/**
 * CiasteczkoYEZ – Frontend Cookie Banner & Floating Button & Cookie Tab
 * Version: 1.5.0
 */

/* ── Custom properties (overridden via inline style from PHP) ── */
:root {
  --cyez-primary:          #1863dc;
  --cyez-secondary:        #6b7280;
  --cyez-accept:           #008000;
  --cyez-reject:           #dc2626;
  --cyez-text:             #212121;
  --cyez-bg:               #ffffff;
  --cyez-bg-alt:           #f4f4f4;
  --cyez-border:           #ebebeb;
  --cyez-radius:           6px;
  --cyez-btn-radius:       2px;
  --cyez-shadow:           0 -1px 10px 0 rgba(172,171,171,.3), 0 8px 32px rgba(0,0,0,.12);
  --cyez-shadow-modal:     0 32px 68px rgba(0,0,0,.25);
  --cyez-z:                999999;
  --cyez-float-color:      #1863dc;
  --cyez-tab-color:        #1863dc;
  --cyez-tab-text:         #ffffff;
  --cyez-tab-peek-offset:  0px;   /* how many px the tab is offset behind the edge */
  --cyez-transition:       .25s ease;

  /* Animation intensity (overridden per-element via inline style from PHP) */
  --cyez-pulse-size:       8px;   /* glow ring radius for pulse-glow */
  --cyez-pulse-scale:      1.08;  /* scale factor for pulse-scale (e.g. 1.08 = 8% bigger) */
  --cyez-bounce-distance:  7px;   /* travel distance for bounce */

  /* Banner border – defaults transparent/0 so existing installs look identical */
  --cyez-banner-border:       transparent;
  --cyez-banner-border-width: 0px;
}

/* ─── OVERLAY ─────────────────────────────────────────────── */
.cyez-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: calc(var(--cyez-z) - 1);
  pointer-events: none;
  transition: opacity var(--cyez-transition);
}
.cyez-overlay[hidden] { display: none !important; }

/* ─── BANNER BASE ─────────────────────────────────────────── */
.cyez-banner {
  position: fixed;
  z-index: var(--cyez-z);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cyez-text);
  background: var(--cyez-bg);
  box-shadow: var(--cyez-shadow);
  border-radius: var(--cyez-radius);
  border: var(--cyez-banner-border-width) solid var(--cyez-banner-border);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cyez-border) transparent;
}
.cyez-banner[hidden] { display: none !important; }

/* ─── BANNER POSITIONS ────────────────────────────────────── */
.cyez-pos-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--cyez-radius) var(--cyez-radius) 0 0;
  box-shadow: 0 -1px 10px 0 rgba(172,171,171,.3);
}
/* Centered card at the bottom, slides up */
.cyez-pos-bottom-center {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
}
.cyez-pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 540px;
  box-shadow: var(--cyez-shadow-modal);
}
.cyez-pos-left  { bottom: 16px; left: 16px; }
.cyez-pos-right { bottom: 16px; right: 16px; }

/* ─── ALIGNMENT ───────────────────────────────────────────── */
.cyez-align-left   .cyez-banner__inner { text-align: left; }
.cyez-align-center .cyez-banner__inner { text-align: center; }
.cyez-align-right  .cyez-banner__inner { text-align: right; }
.cyez-align-center .cyez-banner__actions,
.cyez-align-center .cyez-category__header { justify-content: center; }
.cyez-align-right  .cyez-banner__actions  { justify-content: flex-end; }

/* ─── ENTRY ANIMATIONS ────────────────────────────────────── */
@keyframes cyez-slide-up        { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes cyez-slide-down      { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:translateY(0); } }
@keyframes cyez-fade-in         { from { opacity:0; } to { opacity:1; } }
@keyframes cyez-slide-up-center { from { opacity:0; transform:translate(-50%,-42%); } to { opacity:1; transform:translate(-50%,-50%); } }
@keyframes cyez-slide-up-bc     { from { opacity:0; transform:translateX(-50%) translateY(40px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

.cyez-pos-bottom.cyez-anim-slide-up          { animation: cyez-slide-up    .3s ease both; }
.cyez-pos-bottom.cyez-anim-slide-down        { animation: cyez-slide-down  .3s ease both; }
.cyez-pos-bottom.cyez-anim-fade              { animation: cyez-fade-in     .3s ease both; }
.cyez-pos-bottom-center.cyez-anim-slide-up   { animation: cyez-slide-up-bc .3s ease both; }
.cyez-pos-bottom-center.cyez-anim-slide-down { animation: cyez-slide-up-bc .3s ease both; }
.cyez-pos-bottom-center.cyez-anim-fade       { animation: cyez-fade-in     .3s ease both; }
.cyez-pos-left.cyez-anim-slide-up,
.cyez-pos-right.cyez-anim-slide-up           { animation: cyez-slide-up    .3s ease both; }
.cyez-pos-left.cyez-anim-slide-down,
.cyez-pos-right.cyez-anim-slide-down         { animation: cyez-slide-down  .3s ease both; }
.cyez-pos-left.cyez-anim-fade,
.cyez-pos-right.cyez-anim-fade               { animation: cyez-fade-in     .3s ease both; }
.cyez-pos-center.cyez-anim-slide-up          { animation: cyez-slide-up-center .3s ease both; }
.cyez-pos-center.cyez-anim-fade              { animation: cyez-fade-in         .3s ease both; }

/* ─── EXIT ANIMATIONS ────────────────────────────────────── */
@keyframes cyez-out-slide-down  { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(40px); } }
@keyframes cyez-out-slide-up    { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-40px); } }
@keyframes cyez-out-fade        { from { opacity:1; } to { opacity:0; } }
@keyframes cyez-out-center-down { from { opacity:1; transform:translate(-50%,-50%); } to { opacity:0; transform:translate(-50%,-45%); } }
@keyframes cyez-out-bc-down     { from { opacity:1; transform:translateX(-50%) translateY(0); } to { opacity:0; transform:translateX(-50%) translateY(40px); } }

.cyez-banner.cyez-anim-out-slide-down             { animation: cyez-out-slide-down .3s ease both; }
.cyez-banner.cyez-anim-out-slide-up               { animation: cyez-out-slide-up   .3s ease both; }
.cyez-banner.cyez-anim-out-fade                   { animation: cyez-out-fade       .3s ease both; }
.cyez-pos-center.cyez-anim-out-slide-down         { animation: cyez-out-center-down .3s ease both; }
.cyez-pos-bottom-center.cyez-anim-out-slide-down  { animation: cyez-out-bc-down .3s ease both; }
.cyez-pos-bottom-center.cyez-anim-out-slide-up    { animation: cyez-out-bc-down .3s ease both; }

/* ─── INNER LAYOUT ────────────────────────────────────────── */
.cyez-banner__inner { padding: 24px; }

.cyez-banner__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cyez-border);
}
.cyez-icon { font-size: 20px; flex-shrink: 0; color: var(--cyez-primary); display: flex; align-items: center; }

.cyez-banner__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyez-primary);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.cyez-banner__text {
  margin: 0 0 16px;
  color: var(--cyez-secondary);
  font-size: 13px;
  line-height: 1.65;
}
.cyez-banner__legal {
  margin: -8px 0 14px;
  padding: 8px 10px;
  background: var(--cyez-bg-alt);
  border-radius: var(--cyez-radius);
  color: var(--cyez-secondary);
  font-size: 12px;
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.cyez-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.cyez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--cyez-btn-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--cyez-transition), transform .1s;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
}
.cyez-btn:hover  { opacity: .82; }
.cyez-btn:active { transform: scale(.98); opacity: .9; }
.cyez-btn:focus-visible { outline: 2px solid var(--cyez-primary); outline-offset: 2px; }
.cyez-btn--accept { background: var(--cyez-accept); color: #fff; border: 2px solid var(--cyez-accept); }
.cyez-btn--reject { background: var(--cyez-reject); color: #fff; border: 2px solid var(--cyez-reject); }
.cyez-btn--secondary { background: transparent; color: var(--cyez-primary); border: 2px solid var(--cyez-primary); }
.cyez-btn--secondary:hover { background: var(--cyez-primary); color: #fff; opacity: 1; }

/* ─── PREFERENCES PANEL ───────────────────────────────────── */
.cyez-preferences { margin-top: 16px; border-top: 1px solid var(--cyez-border); padding-top: 16px; }
.cyez-preferences[hidden] { display: none !important; }
.cyez-category { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cyez-border); }
.cyez-category:last-of-type { border-bottom: none; }
.cyez-category__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cyez-category__label { font-weight: 600; font-size: 13px; flex: 1; color: var(--cyez-text); }
.cyez-category__desc  { margin: 0; font-size: 12px; color: var(--cyez-secondary); line-height: 1.55; }

/* Toggle switch */
.cyez-toggle { position: relative; display: inline-block; flex-shrink: 0; }
.cyez-toggle input { opacity:0; width:0; height:0; position:absolute; }
.cyez-toggle__track { display: block; width: 40px; height: 22px; background: #d1d5db; border-radius: 11px; position: relative; transition: background var(--cyez-transition); cursor: pointer; }
.cyez-toggle input:checked + .cyez-toggle__track { background: var(--cyez-accept); }
.cyez-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform var(--cyez-transition); box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none; }
.cyez-toggle input:checked ~ .cyez-toggle__track .cyez-toggle__thumb { transform: translateX(18px); }
.cyez-toggle input:focus-visible + .cyez-toggle__track { outline: 2px solid var(--cyez-primary); outline-offset: 2px; }

/* Badges */
.cyez-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 2px; white-space: nowrap; }
.cyez-badge--required { background: var(--cyez-bg-alt); color: var(--cyez-secondary); border: 1px solid var(--cyez-border); }

/* ─── FLOATING BUTTON ─────────────────────────────────────── */
.cyez-float {
  position: fixed;
  z-index: var(--cyez-z);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  color: #fff;
  background: var(--cyez-float-color);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: opacity var(--cyez-transition), box-shadow .2s ease;
  padding: 0;
}
.cyez-float:hover        { box-shadow: 0 4px 20px rgba(0,0,0,.3); opacity: .9; }
.cyez-float:focus-visible { outline: 2px solid var(--cyez-primary); outline-offset: 3px; }
.cyez-float[hidden]      { display: none !important; }
.cyez-float--circle  { border-radius: 50%; }
.cyez-float--rounded { border-radius: 10px; }
.cyez-float--leaf    { border-radius: 50% 0 50% 50%; transform: rotate(-45deg); }
.cyez-float--leaf svg { transform: rotate(45deg); }
.cyez-float--pos-bottom-right  { bottom: 20px; right: 20px; }
.cyez-float--pos-bottom-left   { bottom: 20px; left:  20px; }
.cyez-float--pos-bottom-center { bottom: 20px; left: 50%; margin-left: -24px; }
.cyez-float--semi-visible       { opacity: 0.35; }
.cyez-float--semi-visible:hover { opacity: 1; transition: opacity .2s ease; }
.cyez-float--visibility-hidden  { opacity: 0 !important; pointer-events: none; }

/* Pulse glow: semi-transparent white ring + outer blur – works on any button color */
@keyframes cyez-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,.2),
                          0 0 0 0    rgba(255,255,255,0),
                          0 0 0      rgba(255,255,255,0); }
  50%       { box-shadow: 0 2px 12px rgba(0,0,0,.2),
                          0 0 0 var(--cyez-pulse-size, 8px)                 rgba(255,255,255,.40),
                          0 0 calc(var(--cyez-pulse-size, 8px) * 3)         rgba(255,255,255,.20); }
}
/* Pulse scale: whole button grows and shrinks */
@keyframes cyez-pulse-scale      { 0%, 100% { transform: scale(1); }              50% { transform: scale(var(--cyez-pulse-scale, 1.10)); } }
@keyframes cyez-pulse-scale-leaf { 0%, 100% { transform: rotate(-45deg) scale(1);} 50% { transform: rotate(-45deg) scale(var(--cyez-pulse-scale, 1.10)); } }
/* Bounce: uses CSS var for travel distance */
@keyframes cyez-bounce      { 0%, 100% { transform: translateY(0); }                    50% { transform: translateY(calc(-1 * var(--cyez-bounce-distance, 7px))); } }
@keyframes cyez-bounce-leaf { 0%, 100% { transform: rotate(-45deg) translateY(0); }     50% { transform: rotate(-45deg) translateY(calc(-1 * var(--cyez-bounce-distance, 7px))); } }
@keyframes cyez-rotate-icon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cyez-float--anim-pulse                              { animation: cyez-pulse            2.5s ease-in-out infinite; }
.cyez-float--anim-pulse-scale:not(.cyez-float--leaf) { animation: cyez-pulse-scale      2.5s ease-in-out infinite; }
.cyez-float--anim-pulse-scale.cyez-float--leaf       { animation: cyez-pulse-scale-leaf 2.5s ease-in-out infinite; }
.cyez-float--anim-bounce:not(.cyez-float--leaf)      { animation: cyez-bounce           2s   ease-in-out infinite; }
.cyez-float--anim-bounce.cyez-float--leaf            { animation: cyez-bounce-leaf      2s   ease-in-out infinite; }
.cyez-float--anim-rotate svg                         { animation: cyez-rotate-icon      6s   linear      infinite; }
.cyez-float--anim-none { animation: none !important; }

/* ─── COOKIE TAB ──────────────────────────────────────────── */
/*
 * The cookie tab protrudes from the bottom or side of the viewport.
 * Colors (background + text) are always applied inline so they
 * reliably override any CSS default.
 */
.cyez-cookie-tab {
  position: fixed;
  z-index: var(--cyez-z);
  cursor: pointer;
  border: none;
  background: var(--cyez-tab-color, #1863dc);
  color: var(--cyez-tab-text, #ffffff);
  display: inline-flex;
  align-items: stretch;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.cyez-cookie-tab[hidden] { display: none !important; }

/*
 * On hover: stop ALL animations on the outer element and inner element.
 * This prevents bounce/glow from fighting with hover opacity/peek transitions,
 * which causes unwanted trembling.
 * – Outer animation: none → margin resets to 0 (neutral position)
 * – Inner animation: none → scale-pulse stops at scale(1)
 * On mouse-leave: animations restart automatically from keyframe 0%
 * (which is the same neutral position), so the bounce resumes cleanly.
 */
.cyez-cookie-tab:hover {
  opacity: 0.9;
  animation: none !important;
}
.cyez-cookie-tab:hover .cyez-cookie-tab__inner {
  animation: none !important;
}
.cyez-cookie-tab:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }

.cyez-cookie-tab__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  white-space: nowrap;
}

/* ── Bottom positions ── */
.cyez-cookie-tab--bottom-left,
.cyez-cookie-tab--bottom-center,
.cyez-cookie-tab--bottom-right {
  bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -3px 14px rgba(0,0,0,.18);
  /* Smooth transition for peek mode */
  transition: bottom .3s ease;
}
.cyez-cookie-tab--bottom-left   { left: 60px; }
.cyez-cookie-tab--bottom-center { left: 50%; transform: translateX(-50%); }
.cyez-cookie-tab--bottom-right  { right: 60px; }

/* Peek mode: shift bottom tabs partially below viewport edge */
.cyez-cookie-tab--bottom-left.cyez-tab-peek,
.cyez-cookie-tab--bottom-right.cyez-tab-peek {
  bottom: calc(-1 * var(--cyez-tab-peek-offset));
}
.cyez-cookie-tab--bottom-center.cyez-tab-peek {
  bottom: calc(-1 * var(--cyez-tab-peek-offset));
  /* keep horizontal centering via transform */
}
/* Hover: slide fully into view */
.cyez-cookie-tab--bottom-left.cyez-tab-peek:hover,
.cyez-cookie-tab--bottom-center.cyez-tab-peek:hover,
.cyez-cookie-tab--bottom-right.cyez-tab-peek:hover {
  bottom: 0 !important;
}

/* ── Right side tabs: 3 vertical positions ── */
.cyez-cookie-tab--right-top,
.cyez-cookie-tab--right-center,
.cyez-cookie-tab--right-bottom {
  right: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -3px 0 14px rgba(0,0,0,.18);
  transition: right .3s ease;
}
.cyez-cookie-tab--right-top    { top: 15%; }
.cyez-cookie-tab--right-center { top: 50%; transform: translateY(-50%); }
.cyez-cookie-tab--right-bottom { bottom: 15%; }

/* Peek: shift right side tabs behind the right edge */
.cyez-cookie-tab--right-top.cyez-tab-peek,
.cyez-cookie-tab--right-bottom.cyez-tab-peek {
  right: calc(-1 * var(--cyez-tab-peek-offset));
}
.cyez-cookie-tab--right-center.cyez-tab-peek {
  /* must keep Y centering – use right only */
  right: calc(-1 * var(--cyez-tab-peek-offset));
}
.cyez-cookie-tab--right-top.cyez-tab-peek:hover,
.cyez-cookie-tab--right-center.cyez-tab-peek:hover,
.cyez-cookie-tab--right-bottom.cyez-tab-peek:hover {
  right: 0 !important;
}

/* Vertical inner for right tabs */
.cyez-cookie-tab--right-top .cyez-cookie-tab__inner,
.cyez-cookie-tab--right-center .cyez-cookie-tab__inner,
.cyez-cookie-tab--right-bottom .cyez-cookie-tab__inner {
  flex-direction: column;
  padding: 18px 12px;
  gap: 10px;
}

/* Right side text direction:
   Default (outward): tilt head RIGHT to read — vertical-rl, top-to-bottom */
.cyez-cookie-tab--right-top .cyez-cookie-tab__label,
.cyez-cookie-tab--right-center .cyez-cookie-tab__label,
.cyez-cookie-tab--right-bottom .cyez-cookie-tab__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
/* Inward: tilt head LEFT — rotate 180° (bottom-to-top) */
.cyez-tab-text--inward.cyez-cookie-tab--right-top .cyez-cookie-tab__label,
.cyez-tab-text--inward.cyez-cookie-tab--right-center .cyez-cookie-tab__label,
.cyez-tab-text--inward.cyez-cookie-tab--right-bottom .cyez-cookie-tab__label {
  transform: rotate(180deg);
}

/* ── Left side tabs: 3 vertical positions ── */
.cyez-cookie-tab--left-top,
.cyez-cookie-tab--left-center,
.cyez-cookie-tab--left-bottom {
  left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 3px 0 14px rgba(0,0,0,.18);
  transition: left .3s ease;
}
.cyez-cookie-tab--left-top    { top: 15%; }
.cyez-cookie-tab--left-center { top: 50%; transform: translateY(-50%); }
.cyez-cookie-tab--left-bottom { bottom: 15%; }

/* Peek: shift left side tabs behind the left edge */
.cyez-cookie-tab--left-top.cyez-tab-peek,
.cyez-cookie-tab--left-bottom.cyez-tab-peek {
  left: calc(-1 * var(--cyez-tab-peek-offset));
}
.cyez-cookie-tab--left-center.cyez-tab-peek {
  left: calc(-1 * var(--cyez-tab-peek-offset));
}
.cyez-cookie-tab--left-top.cyez-tab-peek:hover,
.cyez-cookie-tab--left-center.cyez-tab-peek:hover,
.cyez-cookie-tab--left-bottom.cyez-tab-peek:hover {
  left: 0 !important;
}

/* Vertical inner for left tabs */
.cyez-cookie-tab--left-top .cyez-cookie-tab__inner,
.cyez-cookie-tab--left-center .cyez-cookie-tab__inner,
.cyez-cookie-tab--left-bottom .cyez-cookie-tab__inner {
  flex-direction: column;
  padding: 18px 12px;
  gap: 10px;
}

/* Left side text direction:
   Default (outward): tilt head LEFT to read — vertical-lr, top-to-bottom */
.cyez-cookie-tab--left-top .cyez-cookie-tab__label,
.cyez-cookie-tab--left-center .cyez-cookie-tab__label,
.cyez-cookie-tab--left-bottom .cyez-cookie-tab__label {
  writing-mode: vertical-lr;
  text-orientation: mixed;
}
/* Inward: tilt head RIGHT — rotate 180° (bottom-to-top) */
.cyez-tab-text--inward.cyez-cookie-tab--left-top .cyez-cookie-tab__label,
.cyez-tab-text--inward.cyez-cookie-tab--left-center .cyez-cookie-tab__label,
.cyez-tab-text--inward.cyez-cookie-tab--left-bottom .cyez-cookie-tab__label {
  transform: rotate(180deg);
}

/* ─── COOKIE TAB ANIMATIONS ──────────────────────────────── */
/*
 * Pulse: box-shadow only — works for all positions (no transform conflict).
 * Bounce: uses margin so it doesn't conflict with centering transforms.
 */

/*
 * Pulse glow: semi-transparent white ring + outer blur.
 * Uses --cyez-pulse-size (set inline from PHP based on admin slider).
 * White overlays work on any tab background color.
 */
@keyframes cyez-tab-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0    rgba(255,255,255,0),
                          0 0 0      rgba(255,255,255,0); }
  50%       { box-shadow: 0 0 0 var(--cyez-pulse-size, 8px)               rgba(255,255,255,.40),
                          0 0 calc(var(--cyez-pulse-size, 8px) * 3)       rgba(255,255,255,.18); }
}

/*
 * Pulse scale: whole tab inner element grows and shrinks.
 * Applied to __inner so it doesn't conflict with the outer
 * position transforms (translateY(-50%) on centred side tabs).
 * Uses --cyez-pulse-scale (e.g. 1.08 = 8% bigger at peak).
 */
@keyframes cyez-tab-pulse-scale {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(var(--cyez-pulse-scale, 1.08)); }
}

/* Bounce via margin – uses --cyez-bounce-distance so it's adjustable */
@keyframes cyez-tab-bounce-up    { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: var(--cyez-bounce-distance, 7px); } }
@keyframes cyez-tab-bounce-right { 0%, 100% { margin-right:  0; } 50% { margin-right:  var(--cyez-bounce-distance, 7px); } }
@keyframes cyez-tab-bounce-left  { 0%, 100% { margin-left:   0; } 50% { margin-left:   var(--cyez-bounce-distance, 7px); } }

/* Glow pulse: all positions */
.cyez-tab-anim-pulse { animation: cyez-tab-pulse-glow 2.5s ease-in-out infinite; }

/* Scale pulse: applied to __inner to avoid transform conflicts */
.cyez-tab-anim-pulse-scale .cyez-cookie-tab__inner { animation: cyez-tab-pulse-scale 2.5s ease-in-out infinite; }

/* Bounce: bottom positions */
.cyez-cookie-tab--bottom-left.cyez-tab-anim-bounce,
.cyez-cookie-tab--bottom-center.cyez-tab-anim-bounce,
.cyez-cookie-tab--bottom-right.cyez-tab-anim-bounce {
  animation: cyez-tab-bounce-up 2s ease-in-out infinite;
}
/* Bounce: right side positions */
.cyez-cookie-tab--right-top.cyez-tab-anim-bounce,
.cyez-cookie-tab--right-center.cyez-tab-anim-bounce,
.cyez-cookie-tab--right-bottom.cyez-tab-anim-bounce {
  animation: cyez-tab-bounce-right 2s ease-in-out infinite;
}
/* Bounce: left side positions */
.cyez-cookie-tab--left-top.cyez-tab-anim-bounce,
.cyez-cookie-tab--left-center.cyez-tab-anim-bounce,
.cyez-cookie-tab--left-bottom.cyez-tab-anim-bounce {
  animation: cyez-tab-bounce-left 2s ease-in-out infinite;
}
.cyez-tab-anim-none { animation: none !important; }

/* ─── RESPONSIVE VISIBILITY PER DEVICE (admin-configured) ─── */
/*
 * Applied from PHP templates when admin unchecks a device breakpoint.
 * Breakpoints: mobile ≤ 767px  |  tablet 768–1024px  |  desktop ≥ 1025px
 */
@media (max-width: 767px) {
  .cyez-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cyez-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
  .cyez-hide-desktop { display: none !important; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 540px) {
  /* Banner: always full-width at bottom on mobile */
  .cyez-banner {
    bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%;
    border-radius: var(--cyez-radius) var(--cyez-radius) 0 0;
    transform: none !important;
    box-shadow: 0 -1px 10px 0 rgba(172,171,171,.3);
  }
  .cyez-pos-bottom-center { left: 0; transform: none; max-width: 100%; }
  .cyez-banner__inner  { padding: 20px 16px; }
  .cyez-banner__actions { flex-direction: column; }
  .cyez-btn { width: 100%; text-align: center; }

  /* Cookie tab: adjust bottom tabs away from screen corners */
  .cyez-cookie-tab--bottom-left  { left: 16px; }
  .cyez-cookie-tab--bottom-right { right: 16px; }

  /* Side tabs on mobile: smaller padding + smaller font so they fit */
  .cyez-cookie-tab--right-top .cyez-cookie-tab__inner,
  .cyez-cookie-tab--right-center .cyez-cookie-tab__inner,
  .cyez-cookie-tab--right-bottom .cyez-cookie-tab__inner,
  .cyez-cookie-tab--left-top .cyez-cookie-tab__inner,
  .cyez-cookie-tab--left-center .cyez-cookie-tab__inner,
  .cyez-cookie-tab--left-bottom .cyez-cookie-tab__inner {
    padding: 12px 9px;
    gap: 7px;
    font-size: 11px;
  }

  /* Ensure peek tabs are still visible on mobile touch devices
     (no :hover on touch, so always show a visible portion) */
  .cyez-cookie-tab--bottom-left.cyez-tab-peek,
  .cyez-cookie-tab--bottom-center.cyez-tab-peek,
  .cyez-cookie-tab--bottom-right.cyez-tab-peek {
    /* Limit offset on mobile so at least 12px is always visible */
    bottom: max(calc(-1 * var(--cyez-tab-peek-offset)), -30px);
  }
  .cyez-cookie-tab--right-top.cyez-tab-peek,
  .cyez-cookie-tab--right-center.cyez-tab-peek,
  .cyez-cookie-tab--right-bottom.cyez-tab-peek {
    right: max(calc(-1 * var(--cyez-tab-peek-offset)), -30px);
  }
  .cyez-cookie-tab--left-top.cyez-tab-peek,
  .cyez-cookie-tab--left-center.cyez-tab-peek,
  .cyez-cookie-tab--left-bottom.cyez-tab-peek {
    left: max(calc(-1 * var(--cyez-tab-peek-offset)), -30px);
  }
}