/* ============================================================================
 * ExtraTV Smart Cards — Premium VIP Portable Logo + Frame Overlay (LAB)
 * STRUCTURAL stylesheet.  v1.17.49.2
 *
 * Purely additive, decorative overlay scoped to `.premium-vip-shell`.
 *   - No global selectors; nothing here can reach another card.
 *   - Both decorative layers carry pointer-events:none -> clicks reach the card.
 *   - No :has().  Hover sync is plain CSS; touch sync is a tiny scoped script
 *     (premium-vip-overlay.js) that mirrors the card's .touch-active onto the
 *     shell as .pv-touch.
 *
 * Token strategy:
 *   - Admin-controlled tokens (colours, sizes, glow) are emitted as INLINE CSS
 *     by PHP on the selector .premium-vip-shell[data-frame-package="<key>"]
 *     (specificity 0,2,0) and therefore OVERRIDE the fallback defaults declared
 *     here on .premium-vip-shell (0,1,0).  The fallbacks below = the approved
 *     HTML R4 reference, so the overlay still renders correctly even if the
 *     inline token block is ever absent.
 *   - Structural-only tokens (card/tab radius, tab glass background) live ONLY
 *     here; PHP never touches them.
 * ========================================================================== */

.premium-vip-shell{
  /* ---- Fallback FRAME tokens (admin-overridable) ---- */
  --pv-frame-line:      rgba(255,201,102,.95);
  --pv-frame-width:     2px;
  --pv-frame-gap:       6px;
  --pv-frame-glow:      rgba(255,170,52,.34);
  --pv-frame-glow-soft: rgba(255,140,30,.15);
  /* ---- Structural-only frame tokens ---- */
  --pv-card-radius:     32px;
  --pv-frame-radius:    calc(var(--pv-card-radius) + var(--pv-frame-gap));
  /* ---- Fallback TAB tokens (admin-overridable) ---- */
  --pv-tab-line:        rgba(255,201,102,.95);
  --pv-tab-glow:        rgba(255,176,56,.40);
  --pv-tab-h:           80px;
  --pv-tab-top:         -46px;   /* midline aligned: -(tab height / 2 + frame gap) */
  --pv-tab-x:           0px;
  --pv-tab-padx:        22px;
  --pv-tab-min:         300px;
  --pv-tab-max:         440px;
  /* ---- Structural-only tab tokens ---- */
  --pv-tab-bg-1:        rgba(18,16,14,.72);
  --pv-tab-bg-2:        rgba(6,6,9,.82);
  --pv-tab-blur:        10px;
  --pv-tab-shadow-extra: 0 8px 22px rgba(0,0,0,.34);
  --pv-tab-tint:        rgba(255,201,102,.16);
  --pv-tab-tint-soft:   rgba(255,201,102,.10);
  --pv-tab-edge:        rgba(255,255,255,.04);
  --pv-tab-edge-warm:   rgba(255,201,102,.15);
  --pv-logo-halo:       rgba(255,201,102,.13);
  --pv-tab-radius:      20px;
  /* ---- Fallback LOGO tokens (admin-overridable) ---- */
  --pv-logo-h:          64px;
  --pv-logo-maxw:       300px;
  --pv-logo-maxh:       68px;
  --pv-logo-fit-pct:    88%;
  /* ---- LAB-only spacing/clearance (admin-overridable; default 0 = current look) ---- */
  --pv-top-clear:       0px;
  --pv-bottom-clear:    0px;

  position: relative;
  isolation: isolate;        /* own stacking context -> frame/tab z-index scoped */
  display: block;

  /* Mirror the real .card responsive width (mobile-first base) so the wrapped
     card renders at an identical size.  The card itself becomes width:100%. */
  width: 92%;
  max-width: 420px;
  /* Horizontal centering + LAB-only vertical clearance. The clearance reserves
     layout space above/below the card so the tab cannot collide with titles or
     adjacent cards. It is independent of the old Logo Badge spacing and of the
     .cards gap; at the default 0 the layout is identical to before. */
  margin: var(--pv-top-clear, 0px) auto var(--pv-bottom-clear, 0px);
}

/* Card fills the shell -> rendered size identical to the un-wrapped 1.17.38 card.
   Specificity (0,3,0) beats every .card width rule in cards.css (all (0,1,0)). */
.premium-vip-shell > .card[data-key]{
  width: 100%;
  max-width: none;
}

/* ---- LAB-only hide of the existing per-card logo --------------------------
   When the renderer marks the wrapper with .pv-hide-legacy-logo (only for the
   Premium VIP card, only while the LAB overlay is active AND the admin "Hide
   old per-card logo" switch is on), the old .etv-card-logo is hidden so only
   the new integrated tab logo shows. This is a pure visual hide — it never
   touches the saved Logo Badge / Layout settings, and it disappears the instant
   the LAB is off (the class is no longer emitted). The floating text badge is
   intentionally left untouched. */
.etv-card-wrap.pv-hide-legacy-logo > .etv-card-logo{
  display: none !important;
}

/* ---- OUTER GOLD FRAME (transparent centre, soft glow) ---------------------
   Absolutely positioned against the shell; sits --pv-frame-gap OUTSIDE the card
   edge.  The card's own overflow never clips it (frame is a shell sibling). */
.premium-vip-frame-overlay{
  position: absolute;
  inset: calc(-1 * var(--pv-frame-gap));
  border-radius: var(--pv-frame-radius);
  pointer-events: none;
  z-index: 20;
  background: transparent;
  border: var(--pv-frame-width) solid var(--pv-frame-line);
  box-shadow:
    0 0 0 1px rgba(255,168,58,.10),
    0 0 18px var(--pv-frame-glow),
    0 0 46px var(--pv-frame-glow-soft),
    inset 0 0 20px rgba(255,158,44,.05);
  opacity: 1;
  transform: none;
  /* Match the card's own transform transition EXACTLY (cards.css uses
     transform .7s cubic-bezier(.2,.8,.2,1)). A shorter duration made the frame
     finish its lift before the card, which read as the frame detaching /
     jumping during hover or tap (Issue 4). Identical timing keeps them locked. */
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ---- INTEGRATED TOP TAB (dark glass + thin gold edge + logo) --------------
   Width fits the logo, clamped by --pv-tab-min/max.  z-index above the frame so
   it covers the frame line behind it = the "split top border" look. */
.premium-vip-top-tab{
  position: absolute;
  top: var(--pv-tab-top);
  left: calc(50% + var(--pv-tab-x));
  width: max-content;
  min-width: var(--pv-tab-min);
  max-width: var(--pv-tab-max);
  height: var(--pv-tab-h);
  padding: 0 var(--pv-tab-padx);
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pv-tab-radius);
  border: var(--pv-frame-width) solid var(--pv-tab-line);
  background:
    linear-gradient(180deg, var(--pv-tab-edge), transparent 24%),
    radial-gradient(circle at 50% 0%, var(--pv-tab-edge-warm), transparent 58%),
    linear-gradient(135deg, var(--pv-tab-tint), transparent 42%),
    linear-gradient(180deg, var(--pv-tab-bg-1), var(--pv-tab-bg-2));
  backdrop-filter: blur(var(--pv-tab-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--pv-tab-blur)) saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 0 15px var(--pv-tab-glow),
    var(--pv-tab-shadow-extra),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 12px rgba(255,158,44,.06);
  opacity: 1;
  transform: translateX(-50%);
  /* Same 0.7s transform timing as the card (see frame note above). */
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}


/* ExtraTV 1.17.49.2 — Logo Tab Luxury Surface Polish
   LAB-only luxury surface layer for the floating logo tab. No card layout,
   payment, links, badges, or cinematic media changes. */
.premium-vip-top-tab::before,
.premium-vip-top-tab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

.premium-vip-top-tab::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 22%),
    radial-gradient(circle at 22% 8%, var(--pv-tab-edge-warm), transparent 36%);
  opacity:.72;
  mix-blend-mode:screen;
}

.premium-vip-top-tab::after{
  inset:1px;
  background:
    linear-gradient(100deg, transparent 0 24%, rgba(255,255,255,.08) 38%, transparent 55%),
    radial-gradient(circle at 50% 120%, var(--pv-tab-tint-soft), transparent 55%);
  opacity:.65;
}

.premium-vip-top-tab img{
  display: block;
  position: relative;
  z-index: 2;
  height: var(--pv-logo-h);
  width: auto;
  /* 1.17.51.4 - Stronger Fill Tab support: allow a wider elegant fill
     ratio driven by CSS custom property, while still respecting max bounds. */
  max-width: min(var(--pv-logo-fit-pct), var(--pv-logo-maxw));
  max-height: var(--pv-logo-maxh);
  object-fit: contain;                 /* never crop / stretch / distort */
  margin: 0 auto;
  transform: scale(var(--pv-logo-scale, 1));
  transform-origin: center center;
  filter: var(--pv-logo-img-filter, none);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
  /* 1.17.51.2 - Logo Tab Guard Isolation. The global white-flash guard uses
     skip-lazy/no-lazyload on media. Logo-tab images also use those lazy-load
     bypass classes, so force their own canvas to remain transparent. */
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
  padding: 0;
}

.premium-vip-top-tab img.pv-tab-logo-img,
.premium-vip-top-tab img.skip-lazy.no-lazyload{
  background: transparent !important;
  background-color: transparent !important;
}

/* ---- Locked to the card on hover (matches the card's translateY(-8px) lift) -
   Hovering the card (a descendant) also triggers :hover on the shell, so the
   frame/tab lift together with the card.  Gated to fine-pointer devices so a
   sticky :hover on touchscreens can never leave the overlay detached. */
@media (hover:hover){
  .premium-vip-shell:hover .premium-vip-frame-overlay{
    transform: translateY(-8px) scale(1.015);
  }
  .premium-vip-shell:hover .premium-vip-top-tab{
    transform: translateX(-50%) translateY(-8px) scale(1.015);
  }
}

/* ---- Touch lift: JS mirrors the card's .touch-active onto the shell ---- */
.premium-vip-shell.pv-touch .premium-vip-frame-overlay{
  transform: translateY(-8px) scale(1.015);
}
.premium-vip-shell.pv-touch .premium-vip-top-tab{
  transform: translateX(-50%) translateY(-8px) scale(1.015);
}

/* ---- Reduced motion: keep it visible, drop the lift transition ---- */
@media (prefers-reduced-motion: reduce){
  .premium-vip-frame-overlay,
  .premium-vip-top-tab{
    transition: none;
  }
}

/* ============================================================================
 * RESPONSIVE — mirror the real .card width at every breakpoint + structural
 * tokens (radii).  Admin-controlled size/colour tokens for tablet/mobile are
 * supplied by the PHP inline block; the values below are fallbacks that keep
 * the overlay faithful to the R4 reference if that block is absent.
 * ========================================================================== */

/* Mobile  <=480px  (card: max-width:336px, width inherits 92%) */
@media (max-width:480px){
  .premium-vip-shell{
    width: 92%;
    max-width: 336px;
    --pv-card-radius: 24px;
    --pv-tab-radius:  15px;
    --pv-frame-glow:      rgba(255,176,56,.22);
    --pv-frame-glow-soft: rgba(255,146,36,.09);
    --pv-tab-glow:        rgba(255,176,56,.30);
    --pv-tab-h:    56px;
    --pv-tab-top:  -48px;
    --pv-tab-padx: 13px;
    --pv-tab-min:  196px;
    --pv-tab-max:  300px;
    --pv-logo-h:    44px;
    --pv-logo-maxh: 50px;
  }
}

/* Tablet  481–1023px  (card: width:90%, max-width:380px) */
@media (min-width:481px) and (max-width:1023px){
  .premium-vip-shell{
    width: 90%;
    max-width: 380px;
    --pv-card-radius: 32px;
    --pv-tab-radius:  16px;
    --pv-tab-glow: rgba(255,176,56,.34);
    --pv-tab-h:    66px;
    --pv-tab-top:  -54px;
    --pv-tab-padx: 16px;
    --pv-tab-min:  236px;
    --pv-tab-max:  360px;
    --pv-logo-h:    52px;
    --pv-logo-maxh: 58px;
  }
}

/* Desktop  >=1024px  (card: width:min(700px,87%), max-width:700px) */
@media (min-width:1024px){
  .premium-vip-shell{
    width: min(700px, 87%);
    max-width: 700px;
    --pv-card-radius: 32px;
    --pv-tab-radius:  20px;
  }
}

/* Intermediate desktop 1024–1199  (card: max-width:640px).
   Width mirror only; desktop base tab tokens are intentionally reused here
   (admin-adjustable) — a deliberate, documented simplification of the R4
   intermediate tab sizing. */
@media (min-width:1024px) and (max-width:1199px){
  .premium-vip-shell{
    max-width: 640px;
  }
}

/* ExtraTV 1.17.46.1 — Mobile Safe Margins for Overlay Shell
   Only mirrors the safe card width on phones so the tab/frame stay within
   the same mobile envelope. Desktop/tablet and overlay HTML are untouched. */
@media (max-width:480px){
  .premium-vip-shell{
    width:100%;
    max-width:min(336px, calc(100vw - 36px));
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
    --pv-frame-gap:4px;
  }

  .premium-vip-top-tab{
    max-width:min(var(--pv-tab-max), calc(100% - 24px));
    box-sizing:border-box;
    overflow:hidden;
  }
}

@media (max-width:360px){
  .premium-vip-shell{
    max-width:calc(100vw - 32px);
  }
}

/* ExtraTV 1.17.48 — Multi-package normalized logo controls.
   Applies only to bundled normalized PNGs. Uploaded custom logos keep the
   original sizing behavior. */
.premium-vip-top-tab img[src*="-normalized.png"]{
  --pv-normalized-logo-zoom: 1.08;
  transform: scale(var(--pv-normalized-logo-zoom));
  transform-origin: center;
}

@media (max-width:480px){
  .premium-vip-top-tab img[src*="-normalized.png"]{
    --pv-normalized-logo-zoom: 1.04;
  }
}

/* ExtraTV 1.17.48.1 — Professional Card Spacing Control
   Only changes vertical spacing between cards. It does not affect card width,
   logo/frame geometry, prices, buttons, WooCommerce, JOD, or WhatsApp. */
.extratv-page .cards{
  gap: var(--pv-card-gap-d, 96px);
}

@media (max-width:1023px){
  .extratv-page .cards{
    gap: var(--pv-card-gap-t, 84px);
  }
}

@media (max-width:480px){
  .extratv-page .cards{
    gap: var(--pv-card-gap-m, 76px);
  }
}

/* ExtraTV 1.17.48.2 — Logo Tab Vertical Clearance
   Reserves real layout height above overlay-enabled cards so the floating tab
   cannot collide with section titles or the previous card. Width/layout of the
   card itself is unchanged. */
.extratv-page .premium-vip-shell{
  margin-top: var(--pv-tab-clear-d, 72px);
}

@media (max-width:1023px){
  .extratv-page .premium-vip-shell{
    margin-top: var(--pv-tab-clear-t, 64px);
  }
}

@media (max-width:480px){
  .extratv-page .premium-vip-shell{
    margin-top: var(--pv-tab-clear-m, 58px);
  }
}

/* ExtraTV 1.17.48.3 — Overlay Transform Lock
   Video-confirmed fix: overlay-enabled cards must not use independent hover /
   press lift transforms. The card, frame and tab stay locked in one stable
   position across desktop, tablet and mobile. This only affects cards wrapped
   by .premium-vip-shell and does not change width, spacing, colors, prices,
   buttons, WooCommerce, JOD or WhatsApp. */
.premium-vip-shell,
.premium-vip-shell:hover,
.premium-vip-shell:active,
.premium-vip-shell:focus,
.premium-vip-shell:focus-within{
  transform: none !important;
}

.premium-vip-shell > .card[data-key],
.premium-vip-shell > .card[data-key]:hover,
.premium-vip-shell > .card[data-key]:active,
.premium-vip-shell > .card[data-key]:focus,
.premium-vip-shell > .card[data-key]:focus-within,
.premium-vip-shell > .card[data-key].touch-active{
  transform: none !important;
  filter: none;
}

.premium-vip-shell:hover .premium-vip-frame-overlay,
.premium-vip-shell:active .premium-vip-frame-overlay,
.premium-vip-shell:focus .premium-vip-frame-overlay,
.premium-vip-shell:focus-within .premium-vip-frame-overlay{
  transform: none !important;
}

.premium-vip-shell:hover .premium-vip-top-tab,
.premium-vip-shell:active .premium-vip-top-tab,
.premium-vip-shell:focus .premium-vip-top-tab,
.premium-vip-shell:focus-within .premium-vip-top-tab{
  transform: translateX(-50%) !important;
}

/* Some baseline rules move the old floating badge when the card is hovered.
   If the overlay is active, keep that badge stable too so no surrounding
   element visually jumps while the frame/tab are locked. */
.etv-card-wrap.pv-hide-legacy-logo:has(.premium-vip-shell:hover) > .extratv-floating-badge,
.etv-card-wrap.pv-hide-legacy-logo:has(.premium-vip-shell:active) > .extratv-floating-badge,
.etv-card-wrap.pv-hide-legacy-logo:has(.premium-vip-shell:focus-within) > .extratv-floating-badge{
  animation: none !important;
  transform: translateX(-50%) !important;
}

/* ExtraTV 1.17.48.4 — Touch PV-State Lock
   1.17.48.3 fixed mouse hover. Touch devices still got .pv-touch from the
   overlay state-sync script, and the old .pv-touch rules moved the frame/tab.
   These final rules explicitly neutralize that touch-only state. */
.premium-vip-shell.pv-touch,
.premium-vip-shell.pv-touch:hover,
.premium-vip-shell.pv-touch:active,
.premium-vip-shell.pv-touch:focus-within{
  transform: none !important;
}

.premium-vip-shell.pv-touch > .card[data-key],
.premium-vip-shell.pv-touch > .card[data-key].touch-active,
.premium-vip-shell.pv-touch > .card[data-key]:active,
.premium-vip-shell.pv-touch > .card[data-key]:focus-within{
  transform: none !important;
  filter: none !important;
}

.premium-vip-shell.pv-touch .premium-vip-frame-overlay,
.premium-vip-shell.pv-touch:hover .premium-vip-frame-overlay,
.premium-vip-shell.pv-touch:active .premium-vip-frame-overlay,
.premium-vip-shell.pv-touch:focus-within .premium-vip-frame-overlay{
  transform: none !important;
}

.premium-vip-shell.pv-touch .premium-vip-top-tab,
.premium-vip-shell.pv-touch:hover .premium-vip-top-tab,
.premium-vip-shell.pv-touch:active .premium-vip-top-tab,
.premium-vip-shell.pv-touch:focus-within .premium-vip-top-tab{
  transform: translateX(-50%) !important;
}

/* 1.17.51.1 acceptance lock: the logo image shadow must come only from
   the per-package CSS variable. Off computes to filter:none. */
.premium-vip-top-tab img{
  -webkit-filter: var(--pv-logo-img-filter, none);
  filter: var(--pv-logo-img-filter, none);
  background: transparent !important;
  background-color: transparent !important;
}

/* ExtraTV 1.17.48.6 — Logo Tab Midline Frame Alignment
   Alignment-only fallback. No mask, no notch, no border cut, no pseudo overlay.
   The PHP token output computes --pv-tab-top from tab height + frame gap so
   the frame top line visually meets the middle of the logo tab. */

/* ExtraTV 1.17.48.7 — Overlay Top Content Safe Area
   Used after midline tab alignment. The tab/frame stay exactly where 1.17.48.6
   placed them; only the top in-card labels are pushed down slightly so they do
   not visually collide with the lowered logo tab. Scoped to overlay-enabled
   cards only. */
.premium-vip-shell > .card[data-key]{
  --pv-top-content-safe: 18px;
}

.premium-vip-shell > .card[data-key] .badge-mini{
  top: calc(14px + var(--pv-top-content-safe));
}

.premium-vip-shell > .card[data-key] .device{
  top: calc(18px + var(--pv-top-content-safe));
}

/* Desktop horizontal cards need a little more breathing room because the logo
   tab is visually larger and the top badges are close to the frame line. */
@media (min-width:1024px){
  .premium-vip-shell > .card[data-key]{
    --pv-top-content-safe: 22px;
  }
}

/* Tablet keeps moderate offset. */
@media (min-width:481px) and (max-width:1023px){
  .premium-vip-shell > .card[data-key]{
    --pv-top-content-safe: 18px;
  }
}

/* Mobile: smaller offset so the card content does not get pushed too far down. */
@media (max-width:480px){
  .premium-vip-shell > .card[data-key]{
    --pv-top-content-safe: 14px;
  }
}

/* ExtraTV 1.17.48.8 — Overlay Toast Safe Position
   The 12/6-month selection toast used absolute top:58px, which overlaps the
   top badges after the logo tab midline alignment. In overlay-enabled cards
   only, place the toast below the top badge/device row. No JS or payment logic
   changes. */
.premium-vip-shell > .card[data-key]{
  --pv-toast-safe-top: 94px;
}

.premium-vip-shell > .card[data-key] .toast{
  top: var(--pv-toast-safe-top);
  left: 18px;
  right: 18px;
  z-index: 16;
}

@media (min-width:1024px){
  .premium-vip-shell > .card[data-key]{
    --pv-toast-safe-top: 96px;
  }
  .premium-vip-shell > .card[data-key] .toast{
    max-width: 380px;
  }
}

@media (min-width:481px) and (max-width:1023px){
  .premium-vip-shell > .card[data-key]{
    --pv-toast-safe-top: 92px;
  }
}

@media (max-width:480px){
  .premium-vip-shell > .card[data-key]{
    --pv-toast-safe-top: 88px;
  }
  .premium-vip-shell > .card[data-key] .toast{
    left: 14px;
    right: 14px;
  }
}