/* =============================================================
   Popup Slide-In Banner — banner.css
   ============================================================= */

/* ── CSS custom properties ── */
#psib-wrap {
  --psib-bg:        #1a1a2e;
  --psib-text:      #ffffff;
  --psib-accent:    #e94560;
  --psib-accent-r:  233;
  --psib-accent-g:  69;
  --psib-accent-b:  96;
  --psib-radius:    0 14px 14px 0;
  --psib-shadow:    4px 8px 32px rgba(0, 0, 0, 0.45);
  --psib-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --psib-duration:  0.45s;

  position: fixed;
  bottom:   80px;   /* 80px up — clears marquee bar */
  left:     0;
  z-index:  999999;

  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

/* =============================================================
   PULSING "CLICKABLE" ANIMATION
   Applied to the banner while visible — signals it's tappable.
   ============================================================= */
@keyframes psib-pulse {
  0%   { box-shadow: var(--psib-shadow), 0 0 0 0   rgba(var(--psib-accent-r), var(--psib-accent-g), var(--psib-accent-b), 0.75); }
  70%  { box-shadow: var(--psib-shadow), 0 0 0 10px rgba(var(--psib-accent-r), var(--psib-accent-g), var(--psib-accent-b), 0); }
  100% { box-shadow: var(--psib-shadow), 0 0 0 0   rgba(var(--psib-accent-r), var(--psib-accent-g), var(--psib-accent-b), 0); }
}

/* =============================================================
   SHARED PANEL BASE
   ============================================================= */
#psib-banner,
#psib-tab {
  background:    var(--psib-bg);
  color:         var(--psib-text);
  border-radius: var(--psib-radius);
  box-shadow:    var(--psib-shadow);

  transform:      translateX(calc(-100% - 4px));
  opacity:        0;
  pointer-events: none;

  transition:
    transform var(--psib-duration) var(--psib-ease),
    opacity   0.30s ease,
    box-shadow 0.20s ease;

  position: absolute;
  bottom:   0;
  left:     0;
}

/* Visible state */
#psib-banner.psib-visible,
#psib-tab.psib-visible {
  transform:      translateX(0);
  opacity:        1;
  pointer-events: auto;
}

/* Pulse on visible banner */
#psib-banner.psib-visible {
  animation: psib-pulse 2s ease-out infinite;
}

/* Pause pulse on hover — own shadow takes over */
#psib-banner:hover {
  animation-play-state: paused;
  box-shadow: 6px 10px 40px rgba(0, 0, 0, 0.60);
}

/* =============================================================
   STATE 1 — FULL BANNER
   ============================================================= */
#psib-banner {
  width:       330px;
  min-height:  220px;
  padding:     18px 18px 16px;
  cursor:      pointer;
  display:     flex;
  flex-direction: column;
  gap:         10px;
  position:    relative;
  box-sizing:  border-box;
  overflow:    visible; /* allow collapse button to sit outside edge */
}

/* ── ← Collapse button — floats outside the top-right corner ── */
#psib-btn-collapse {
  position:         absolute;
  top:              0;
  right:            0;
  transform:        translate(40%, -40%);
  width:            32px;
  height:           32px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       rgba(20, 20, 40, 0.90);
  border:           2px solid rgba(255, 255, 255, 0.40);
  border-radius:    50%;
  color:            var(--psib-text);
  cursor:           pointer;
  padding:          0;
  line-height:      1;
  transition:       background 0.20s, transform 0.20s;
  z-index:          3;
  box-shadow:       0 2px 8px rgba(0, 0, 0, 0.5);
}

#psib-btn-collapse:hover {
  background: var(--psib-accent);
  transform:  translate(40%, -40%) scale(1.15);
}
#psib-btn-collapse:focus-visible {
  outline: 2px solid var(--psib-text);
  outline-offset: 2px;
}

/* ── Banner content ── */
.psib-body {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  width:          100%;
}

.psib-headline {
  margin:         0;
  font-family:    'Arial Black', Arial, sans-serif;
  font-weight:    900;
  font-size:      1.1rem;
  line-height:    1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color:          var(--psib-text);
  padding-right:  36px;
}

.psib-timer { width: 100%; }

.psib-cta {
  margin:      0;
  font-size:   0.72rem;
  opacity:     0.80;
  text-align:  center;
  border-top:  1px solid rgba(255, 255, 255, 0.20);
  padding-top: 8px;
  letter-spacing: 0.03em;
}

/* ── CPC timer colours ── */
#psib-banner .cpc-mst-wrap .cpc-mst-before,
#psib-banner .cpc-mst-wrap .cpc-mst-time-part,
#psib-banner .cpc-mst-wrap .cpc-mst-label {
  color: #fff !important;
}

#psib-banner .cpc-mst-wrap.cpc-mst-type-countdown {
  border:        2px dashed rgba(255, 255, 255, 0.55) !important;
  background:    rgba(0, 0, 0, 0.20) !important;
  border-radius: 8px !important;
  padding:       8px 12px !important;
  width:         100% !important;
  box-sizing:    border-box !important;
}

/* =============================================================
   STATE 2 — COLLAPSED TAB
   ============================================================= */
#psib-tab {
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        10px 6px 8px;
  gap:            6px;
  box-sizing:     border-box;
  width:          auto;
}

#psib-tab:hover { box-shadow: 6px 10px 40px rgba(0, 0, 0, 0.60); }
#psib-tab:focus-visible {
  outline: 2px solid var(--psib-text);
  outline-offset: 2px;
}

/* → expand arrow at top of tab */
.psib-tab-expand {
  color:           var(--psib-accent);
  opacity:         0.90;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ── Banner badge: [ 25% off↕ ] box + Headline to the right ──
   .psib-banner-badge     = flex row (box | headline)
   .psib-banner-badge-mark = the red box containing pct + sideways "off"
   .psib-banner-badge-pct  = "25%" horizontal text
   .psib-banner-badge-off  = "off" rotated 90° (sideways, reads bottom→top)
   .psib-headline inside badge row fills the remaining width              */
.psib-banner-badge {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
  padding-bottom: 8px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.15);
  margin-bottom:  2px;
}

.psib-banner-badge-mark {
  display:         inline-flex;
  align-items:     center;
  flex-shrink:     0;
  background:      var(--psib-accent);
  color:           #fff;
  border-radius:   8px;
  padding:         6px 8px 6px 10px;
  gap:             4px;
  box-shadow:      0 2px 6px rgba(0, 0, 0, 0.30);
}

.psib-banner-badge-pct {
  font-family:    'Arial Black', Arial, sans-serif;
  font-weight:    900;
  font-size:      1.15rem;
  line-height:    1;
  letter-spacing: -0.02em;
  white-space:    nowrap;
}

/* "off" rotated so it reads bottom → top, sitting to the right of "25%" */
.psib-banner-badge-off {
  writing-mode:    vertical-rl;
  transform:       rotate(180deg);
  font-size:       0.52rem;
  font-weight:     800;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  opacity:         0.88;
  line-height:     1;
  white-space:     nowrap;
}

/* Headline sits to the right of the badge box */
.psib-banner-badge .psib-headline {
  padding-right: 0;   /* collapse btn floats outside — no clearance needed */
  margin:        0;
  flex:          1;
}

/* ── Tab badge: red box [25%] + "off" label below ── */
.psib-tab-badge {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             3px;
  width:           100%;
  padding:         2px 0 5px;
  flex-shrink:     0;
}

/* Red box containing the percentage */
.psib-tab-badge-mark {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--psib-accent);
  color:           #fff;
  font-family:     'Arial Black', Arial, sans-serif;
  font-weight:     900;
  font-size:       0.55rem;
  line-height:     1;
  padding:         3px 5px;
  border-radius:   4px;
  letter-spacing:  -0.02em;
  white-space:     nowrap;
}

/* "off" label sitting below the box */
.psib-tab-badge-off {
  font-size:      0.42rem;
  font-weight:    800;
  color:          var(--psib-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height:    1;
}

.psib-tab-timer-wrap {
  position:   relative;
  width:       38px;
  height:      230px;
  overflow:    hidden;
  flex-shrink: 0;
}

.psib-tab-timer {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  width:            220px;
}

.psib-tab-text-only .psib-tab-label {
  font-family:    'Arial Black', Arial, sans-serif;
  font-weight:    900;
  font-size:      0.7rem;
  text-transform: uppercase;
  color:          var(--psib-text);
  white-space:    nowrap;
}

#psib-tab .cpc-mst-before { display: none !important; }

#psib-tab .cpc-mst-time-part { font-size: 1.05rem !important; color: #fff !important; }
#psib-tab .cpc-mst-label     { font-size: 0.48rem !important; color: #fff !important; }

#psib-tab .cpc-mst-wrap.cpc-mst-type-countdown {
  border:     none        !important;
  background: transparent !important;
  padding:    2px         !important;
  width:      220px       !important;
}

/* =============================================================
   MOBILE — 768px and below
   • Banner: 50vw, horizontal timer (all 4 units in one row),
     smaller fonts to fit, pulsing border inherited from above.
   ============================================================= */
@media (max-width: 768px) {

  #psib-banner {
    width:      50vw;
    min-height: auto;
    padding:    14px 12px 12px;
    gap:        7px;
  }

  .psib-headline {
    font-size:     0.78rem;
    padding-right: 28px;
  }

  /* Banner badge — smaller mark and label on mobile */
  .psib-banner-badge         { gap: 7px; padding-bottom: 6px; }
  .psib-banner-badge-mark    { font-size: 0.90rem; padding: 4px 7px; border-radius: 6px; }
  .psib-banner-badge-label   { font-size: 0.65rem; }

  /* Horizontal timer on mobile — all 4 units in one row */
     Keep the default flex-row layout; just tighten fonts/spacing
     so days | hours | mins | secs all fit within 50vw.          */
  #psib-banner .cpc-mst-wrap.cpc-mst-type-countdown {
    padding: 6px 6px !important;
  }

  #psib-banner .cpc-mst-time-part { font-size: 0.80rem !important; }
  #psib-banner .cpc-mst-label     { font-size: 0.40rem !important; }

  /* Tighten spacing between timer columns */
  #psib-banner .cpc-mst-countdown-grid {
    gap: 0 4px !important;   /* reduce gap if the timer uses one */
  }

  /* Mobile tab padding — no left padding so strip stays tight to edge */
  #psib-tab {
    padding: 10px 6px 8px 0;
  }

  #psib-btn-collapse {
    width:  26px;
    height: 26px;
  }

  /* Narrower tab on mobile */
  .psib-tab-timer-wrap {
    width:  30px;
    height: 175px;
  }

  .psib-tab-timer { width: 165px; }

  #psib-tab .cpc-mst-wrap.cpc-mst-type-countdown {
    width: 165px !important;
  }

  #psib-tab .cpc-mst-time-part { font-size: 0.85rem !important; }
}

/* Very small screens — 480px and below */
@media (max-width: 480px) {
  #psib-banner {
    width:   50vw;
    padding: 12px 10px 10px;
    gap:     6px;
  }

  .psib-headline { font-size: 0.70rem; }

  #psib-banner .cpc-mst-time-part { font-size: 0.72rem !important; }
  #psib-banner .cpc-mst-label     { font-size: 0.36rem !important; }

  .psib-cta { display: none; }
}