/* =====================================================
   ExtraTV Package Details — style.css  v6.0.0
   Full HTML parity port of EXTRATV_CLEAN_FINAL_NO_SCROLL_BUGS.html
   (V8.3.1 Real File Patch — No Reinvent).

   Strategy:
   - All selectors namespaced under .extratv-pd-wrapper so the
     cinematic dark theme stays inside the package-details area
     and never bleeds into the surrounding WordPress theme.
   - Class names match the reference HTML exactly so behavior
     ports 1:1 (no class-rewriting between PHP and JS).
   - Patch layers from the reference are merged into a single
     coherent cascade; later/winning rules from the original
     are kept as the source of truth.
   ===================================================== */

.extratv-pd-wrapper,
.extratv-pd-wrapper *,
.extratv-pd-bar-wrap .compare-bar,
.extratv-pd-bar-wrap .compare-bar *{
    box-sizing:border-box;
}

.extratv-pd-wrapper{
    --accent: #d946ef;
    --shadow: rgba(217,70,239,.30);
    --glow:   rgba(217,70,239,.18);
    --border: rgba(217,70,239,.42);
    --iconbg: rgba(217,70,239,.14);

    --etv-safe-max-logo-w:320px;
    --etv-safe-logo-h:128px;
    --smart-soft-shadow: rgba(217,70,239,.18);

    max-width:1180px;
    margin:0 auto;
    padding:24px 16px 120px;
    color:#fff;
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    background:
        radial-gradient(circle at 50% -12%, rgba(255,0,180,.15), transparent 34%),
        radial-gradient(circle at 10% 16%, rgba(34,211,238,.08), transparent 26%),
        radial-gradient(circle at 90% 18%, rgba(168,85,247,.08), transparent 28%),
        #060617;
    border-radius:28px;
    direction:rtl;
    overflow-x:hidden;
}

.extratv-pd-wrapper button,
.extratv-pd-wrapper a{
    font-family:inherit;
}

.extratv-pd-wrapper button{
    cursor:pointer;
}

/* ──────────────────────────────────────────────────────
   Empty state
   ────────────────────────────────────────────────────── */
.extratv-pd-wrapper .etpd-empty-state{
    text-align:center;
    color:#aaaabb;
    padding:60px 16px;
    font-size:.95rem;
}

/* ──────────────────────────────────────────────────────
   Tabs (desktop wrapped layout)
   ────────────────────────────────────────────────────── */
.extratv-pd-wrapper .tabs-wrap{
    position:sticky;
    top:0;
    z-index:20;
    max-width:1180px;
    margin:0 auto 4px;
    padding:10px 18px 16px;
    overflow:visible;
    background:linear-gradient(180deg,rgba(6,6,23,.96),rgba(6,6,23,.78),rgba(6,6,23,0));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.extratv-pd-wrapper .tabs{
    width:100%;
    min-width:0;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:0 auto;
    padding:8px 4px 14px;
    list-style:none;
}

.extratv-pd-wrapper .tab{
    flex:0 1 200px;
    min-width:170px;
    max-width:220px;
    min-height:58px;
    padding:11px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:#d7d7e5;
    font-weight:900;
    font-size:.9rem;
    overflow:visible;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, opacity .22s ease;
    will-change:transform, box-shadow;
}

.extratv-pd-wrapper .tab:active{
    transform:scale(.985);
}

.extratv-pd-wrapper .tab.active{
    color:#fff;
    border-color:var(--accent);
    background:rgba(255,255,255,.065);
    box-shadow:0 7px 18px rgba(0,0,0,.22), 0 0 9px var(--smart-soft-shadow);
}

.extratv-pd-wrapper .tab-logo{
    width:136px;
    height:38px;
    max-height:38px;
    object-fit:contain;
    object-position:center;
    display:block;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.08));
}

.extratv-pd-wrapper .tab-logo-fallback{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    max-width:100%;
    padding:2px 4px;
    line-height:1;
    color:#e7e7f3;
    transition:color .22s ease;
}

.extratv-pd-wrapper .tab.active .tab-logo-fallback{
    color:#fff;
}

.extratv-pd-wrapper .tab-logo-mark{
    flex:0 0 auto;
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    color:var(--accent);
    filter:drop-shadow(0 0 4px var(--shadow));
}

.extratv-pd-wrapper .tab-logo-mark svg{
    width:100%;
    height:100%;
    display:block;
}

.extratv-pd-wrapper .tab-logo-text{
    flex:0 1 auto;
    min-width:0;
    font-weight:900;
    font-size:.92rem;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-transform:none;
}

@media (hover:hover){
    .extratv-pd-wrapper .tab:hover{
        transform:translateY(-1px);
    }
}

/* ──────────────────────────────────────────────────────
   Main panel
   ────────────────────────────────────────────────────── */
.extratv-pd-wrapper .panels-stack{
    position:relative;
    width:100%;
}

/* Inactive panels: completely removed from layout. The PHP renderer
   emits all 5 panels pre-rendered with the `hidden` attribute on
   inactive ones; JS only toggles the attribute on tab switch. */
.extratv-pd-wrapper .panel[hidden]{
    display:none !important;
}

.extratv-pd-wrapper .panel{
    position:relative;
    max-width:680px;
    margin:0 auto;
    border-radius:34px;
    padding:22px 20px 24px;
    background:
        radial-gradient(circle at 80% 0%, var(--glow), transparent 38%),
        linear-gradient(180deg,#15152f,#09091d);
    border:1px solid var(--border);
    box-shadow:0 18px 46px rgba(0,0,0,.42), 0 0 18px var(--shadow);
    transition:opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow:visible;
}

.extratv-pd-wrapper .panel.switching{
    opacity:1;
    transform:translateY(4px) scale(.996);
}

.extratv-pd-wrapper .panel-inner{
    position:relative;
    z-index:1;
    animation:etpd-ultraPremiumFade .36s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes etpd-ultraPremiumFade{
    from{opacity:0;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes etpd-swap{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

/* Back button row */
.extratv-pd-wrapper .back-row{
    display:flex;
    justify-content:flex-start;
    margin-bottom:14px;
}

.extratv-pd-wrapper .back-package{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:#fff;
    border-radius:999px;
    padding:7px 12px;
    font-weight:950;
    font-size:.80rem;
    text-decoration:none;
    box-shadow:0 5px 13px var(--shadow);
    will-change:transform, box-shadow;
}

@media (hover:hover){
    .extratv-pd-wrapper .back-package:hover{
        transform:translateY(-1px) scale(1.018);
        box-shadow:0 10px 24px var(--shadow);
    }
}

.extratv-pd-wrapper .back-package:active{
    transform:scale(.985);
}

/* Badge */
.extratv-pd-wrapper .badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.11);
    color:#eee;
    font-weight:900;
    font-size:.78rem;
    margin-bottom:14px;
}

/* Package logo (cinematic block above title) */
.extratv-pd-wrapper .package-logo{
    width:306px;
    height:128px;
    margin:10px auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:30px;
    background:
        radial-gradient(circle at 50% 42%, var(--iconbg), transparent 68%),
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    border:1px solid var(--border);
    box-shadow:0 0 12px var(--shadow), inset 0 0 10px rgba(255,255,255,.012);
    overflow:hidden;
}

.extratv-pd-wrapper .package-logo img{
    max-width:84%;
    max-height:94px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 0 4px var(--shadow));
}

/* Package logo fallback — same dimensions as real-logo state,
   designed as a cinematic wordmark (horizontal: icon + name)
   so the panel keeps its visual weight even before the user
   uploads a brand logo. */
.extratv-pd-wrapper .package-logo.package-logo--fallback{
    display:flex;
    flex-direction:row-reverse; /* icon on the right in RTL → reads name first then icon */
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:14px 22px;
}

.extratv-pd-wrapper .package-logo-mark{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    color:var(--accent);
    filter:drop-shadow(0 0 6px var(--shadow));
}

.extratv-pd-wrapper .package-logo-mark svg{
    width:100%;
    height:100%;
    display:block;
}

.extratv-pd-wrapper .package-logo-wordmark{
    color:#fff;
    font-weight:950;
    font-size:1.55rem;
    line-height:1;
    letter-spacing:.4px;
    white-space:nowrap;
    text-align:center;
    text-shadow:
        0 0 16px var(--shadow),
        0 0 1px rgba(255,255,255,.3),
        0 1px 0 rgba(0,0,0,.35);
}

/* Title + description */
.extratv-pd-wrapper .title{
    text-align:center;
    margin:4px 0 0;
    font-size:1.72rem;
    font-weight:950;
    color:var(--accent);
}

.extratv-pd-wrapper .desc{
    text-align:center;
    margin:14px auto 24px;
    max-width:520px;
    color:#c7c7d6;
    font-size:.94rem;
    line-height:1.85;
}

/* Combo visual (Mix Plus / VIP Plus) */
.extratv-pd-wrapper .combo-visual{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center;
    max-width:360px;
    margin:16px auto 20px;
}

.extratv-pd-wrapper .combo-device{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    color:var(--accent);
}

.extratv-pd-wrapper .combo-device svg{
    width:48px;
    height:48px;
    filter:drop-shadow(0 0 5px currentColor);
}

.extratv-pd-wrapper .combo-device span{
    color:#e8e8f5;
    font-size:.78rem;
    font-weight:900;
}

.extratv-pd-wrapper .combo-plus{
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:1.05rem;
    font-weight:950;
    color:#fff;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}

/* Stat boxes */
.extratv-pd-wrapper .number-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:16px 0 18px;
}

.extratv-pd-wrapper .number-box{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    padding:12px 8px 10px;
    text-align:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.extratv-pd-wrapper .number-box svg{
    width:30px;
    height:30px;
    color:var(--accent);
    filter:drop-shadow(0 0 3px var(--smart-soft-shadow));
}

.extratv-pd-wrapper .number-box strong{
    display:block;
    direction:ltr;
    font-size:1.32rem;
    line-height:1.05;
    font-weight:950;
    color:#fff;
    text-shadow:0 0 10px var(--shadow);
    letter-spacing:.3px;
}

.extratv-pd-wrapper .number-box span{
    display:block;
    margin-top:7px;
    color:#d8d8e8;
    font-size:.9rem;
    font-weight:850;
}

/* Section title + features list */
.extratv-pd-wrapper .section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    font-weight:950;
    margin:18px 0 12px;
    font-size:1.1rem;
}

.extratv-pd-wrapper .features{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.extratv-pd-wrapper .features li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    text-align:right;
    background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    padding:13px 14px;
    color:#eeeeF8;
    font-size:.9rem;
    line-height:1.62;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
    animation:etpd-featureIn .22s ease forwards;
    opacity:0;
}

.extratv-pd-wrapper .features li:nth-child(1) {animation-delay:.02s}
.extratv-pd-wrapper .features li:nth-child(2) {animation-delay:.04s}
.extratv-pd-wrapper .features li:nth-child(3) {animation-delay:.06s}
.extratv-pd-wrapper .features li:nth-child(4) {animation-delay:.08s}
.extratv-pd-wrapper .features li:nth-child(5) {animation-delay:.10s}
.extratv-pd-wrapper .features li:nth-child(6) {animation-delay:.12s}
.extratv-pd-wrapper .features li:nth-child(7) {animation-delay:.14s}
.extratv-pd-wrapper .features li:nth-child(8) {animation-delay:.16s}
.extratv-pd-wrapper .features li:nth-child(9) {animation-delay:.18s}
.extratv-pd-wrapper .features li:nth-child(10){animation-delay:.20s}
.extratv-pd-wrapper .features li:nth-child(11){animation-delay:.22s}

@keyframes etpd-featureIn{to{opacity:1}}

.extratv-pd-wrapper .check{
    flex:0 0 auto;
    width:26px;
    height:26px;
    margin-top:1px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),#8b5cf6);
    box-shadow:0 0 10px var(--shadow);
}

.extratv-pd-wrapper .check svg{width:14px;height:14px}

/* Panel actions (compare button) */
.extratv-pd-wrapper .panel-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:16px;
}

.extratv-pd-wrapper .compare-add{
    border:1.5px solid var(--border);
    background:rgba(255,255,255,.04);
    color:#fff;
    border-radius:999px;
    padding:13px 14px;
    min-height:46px;
    font-weight:950;
    font-size:.95rem;
    transition:.2s;
    will-change:transform, box-shadow;
    box-shadow:0 5px 12px var(--smart-soft-shadow);
}

.extratv-pd-wrapper .compare-add.active{
    background:linear-gradient(135deg,var(--accent),#ff00b4);
    box-shadow:0 7px 16px var(--smart-soft-shadow);
    border-color:transparent;
    position:relative;
    overflow:hidden;
    animation:etpd-comparePulse .42s ease both;
}

@keyframes etpd-comparePulse{
    0%{transform:scale(1)}
    45%{transform:scale(1.035);box-shadow:0 0 0 4px rgba(255,255,255,.035),0 0 22px var(--shadow);}
    100%{transform:scale(1)}
}

.extratv-pd-wrapper .compare-add.active::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    transform:translateX(120%);
    animation:etpd-shine .75s ease both;
}

@keyframes etpd-shine{to{transform:translateX(-120%)}}

@media (hover:hover){
    .extratv-pd-wrapper .compare-add:hover{
        transform:translateY(-1px) scale(1.018);
        box-shadow:0 10px 24px var(--shadow);
    }
}

.extratv-pd-wrapper .compare-add:active{
    transform:scale(.985);
}

/* Compare bar (fixed bottom) */
.extratv-pd-bar-wrap{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    pointer-events:none;
}

.extratv-pd-bar-wrap .compare-bar{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:50;
    max-width:860px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    border-radius:22px;
    background:rgba(10,10,28,.92);
    border:1px solid rgba(255,0,180,.25);
    box-shadow:0 20px 60px rgba(0,0,0,.42), 0 0 16px rgba(255,0,180,.10);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    transform:translateY(120%);
    pointer-events:none;
    transition:opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1);
    color:#fff;
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    direction:rtl;
}

.extratv-pd-bar-wrap .compare-bar.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.extratv-pd-bar-wrap .pills{
    display:flex;
    gap:7px;
    overflow-x:auto;
    flex:1 1 auto;
    min-width:0;
}

.extratv-pd-bar-wrap .pills::-webkit-scrollbar{display:none}

.extratv-pd-bar-wrap .pill{
    flex:0 0 auto;
    border-radius:999px;
    padding:8px 10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:.78rem;
    font-weight:900;
    box-shadow:0 0 12px rgba(255,255,255,.045);
}

.extratv-pd-bar-wrap .pill.current{
    border-color:var(--accent, #ff00b4);
    box-shadow:0 0 12px var(--shadow, rgba(255,0,180,.25));
}

.extratv-pd-bar-wrap .bar-actions{
    display:flex;
    gap:8px;
    flex:0 0 auto;
}

.extratv-pd-bar-wrap .bar-btn{
    border:0;
    border-radius:999px;
    padding:10px 12px;
    color:#fff;
    font-weight:950;
    font-size:.85rem;
    will-change:transform, box-shadow;
}

.extratv-pd-bar-wrap .bar-btn.view{
    background:linear-gradient(135deg,#ff00b4,#8b5cf6);
}

.extratv-pd-bar-wrap .bar-btn.clear{
    background:rgba(255,255,255,.08);
}

@media (hover:hover){
    .extratv-pd-bar-wrap .bar-btn:hover{
        transform:translateY(-1px) scale(1.018);
        box-shadow:0 10px 24px rgba(255,0,180,.28);
    }
}

.extratv-pd-bar-wrap .bar-btn:active{
    transform:scale(.985);
}

/* Compare table section */
.extratv-pd-wrapper .compare-section{
    display:none;
    max-width:860px;
    margin:28px auto 0;
    border-radius:28px;
    background:
        radial-gradient(circle at 80% 0%, rgba(255,0,180,.10), transparent 38%),
        linear-gradient(180deg,#12122b,#09091c);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 70px rgba(0,0,0,.34);
    padding:20px;
    scroll-margin-top:22px;
}

.extratv-pd-wrapper .compare-section.show{
    display:block;
    animation:etpd-swap .22s ease both;
}

.extratv-pd-wrapper .compare-title{
    text-align:center;
    margin:0 0 14px;
    font-size:1.45rem;
    font-weight:950;
    color:#fff;
}

.extratv-pd-wrapper .compare-sub{
    text-align:center;
    margin:-6px 0 16px;
    color:#aaaabb;
    font-size:.88rem;
}

.extratv-pd-wrapper .compare-table{
    overflow-x:auto;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
}

.extratv-pd-wrapper .compare-grid{
    min-width:560px;
    display:grid;
    grid-template-columns:160px repeat(var(--cols,1),1fr);
}

.extratv-pd-wrapper .cell{
    padding:13px 12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    border-left:1px solid rgba(255,255,255,.07);
    text-align:center;
    background:rgba(255,255,255,.025);
    color:#e9e9f4;
}

.extratv-pd-wrapper .cell.head{
    font-weight:950;
    background:rgba(255,0,180,.08);
    color:#fff;
}

.extratv-pd-wrapper .cell.label{
    text-align:right;
    color:#bfc0d1;
    font-weight:900;
}

.extratv-pd-wrapper .cell:last-child{
    border-left:0;
}

.extratv-pd-wrapper .compare-back{
    width:100%;
    margin-top:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#fff;
    padding:12px;
    border-radius:999px;
    font-weight:950;
    will-change:transform, box-shadow;
}

@media (hover:hover){
    .extratv-pd-wrapper .compare-back:hover{
        transform:translateY(-1px) scale(1.018);
        box-shadow:0 10px 24px var(--shadow);
    }
}

.extratv-pd-wrapper .compare-back:active{
    transform:scale(.985);
}

/* Panel selected glow when its package is in the compare set */
.extratv-pd-wrapper .panel.compare-selected{
    border-color:var(--accent);
    box-shadow:
        0 16px 42px rgba(0,0,0,.38),
        0 0 0 1px var(--accent),
        0 0 20px var(--shadow);
}

.extratv-pd-wrapper .panel.compare-selected::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 0%, var(--glow), transparent 44%);
    opacity:.46;
}

/* Tab → panel link focus animation */
.extratv-pd-wrapper .panel.etv-panel-focus{
    animation:etpd-panelFocus .46s cubic-bezier(.2,.8,.2,1) both;
}

.extratv-pd-wrapper .panel.etv-panel-focus::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 0%, var(--glow), transparent 46%);
    opacity:0;
    animation:etpd-panelLightSweep .52s ease both;
}

@keyframes etpd-panelFocus{
    0%  {transform:translateY(7px) scale(.994);box-shadow:0 14px 36px rgba(0,0,0,.38),0 0 8px var(--shadow);border-color:rgba(255,255,255,.10)}
    58% {transform:translateY(0) scale(1.006);  box-shadow:0 22px 58px rgba(0,0,0,.46),0 0 0 1px var(--accent),0 0 28px var(--shadow);border-color:var(--accent)}
    100%{transform:translateY(0) scale(1)}
}

@keyframes etpd-panelLightSweep{
    0%  {opacity:0;transform:translateY(-10px)}
    42% {opacity:.72;transform:translateY(0)}
    100%{opacity:0;transform:translateY(10px)}
}

@media (prefers-reduced-motion: reduce){
    .extratv-pd-wrapper .panel.etv-panel-focus,
    .extratv-pd-wrapper .panel.etv-panel-focus::after{
        animation:none !important;
    }
}

/* Smart back-target glow (used by JS when user clicks "back to card") */
.extratv-pd-back-glow{
    animation:etpd-backGlow 2s ease both;
    position:relative;
    z-index:3;
}

@keyframes etpd-backGlow{
    0%  {box-shadow:0 0 0 rgba(255,0,180,0); outline:0 solid rgba(255,0,180,0)}
    30% {box-shadow:0 0 0 2px var(--accent, #ff00b4),0 0 28px var(--shadow, rgba(255,0,180,.35)); outline:1px solid var(--accent, #ff00b4)}
    100%{box-shadow:0 0 0 rgba(255,0,180,0); outline:0 solid rgba(255,0,180,0)}
}

/* ──────────────────────────────────────────────────────
   Tablet (≤ 1080px) — horizontal-scroll tabs
   ────────────────────────────────────────────────────── */
@media (max-width:1080px){
    .extratv-pd-wrapper{
        max-width:100%;
    }

    .extratv-pd-wrapper .tabs-wrap{
        overflow-x:auto;
        overflow-y:hidden;
        padding-left:18px;
        padding-right:18px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .extratv-pd-wrapper .tabs-wrap::-webkit-scrollbar{display:none}

    .extratv-pd-wrapper .tabs{
        width:max-content;
        min-width:max-content;
        max-width:none;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:10px;
        padding:10px 18px 16px;
    }

    .extratv-pd-wrapper .tab{
        flex:0 0 166px;
        min-width:166px;
        max-width:166px;
        min-height:60px;
    }

    .extratv-pd-wrapper .tab-logo{
        width:132px;
        height:38px;
    }
}

/* ──────────────────────────────────────────────────────
   Mobile (≤ 640px) — clean stable mobile tabs
   (matches "CLEAN FINAL MOBILE TABS — STABLE VERSION"
   from the reference: no auto-scroll, no magnetic snap,
   no forced centering, manual swipe only.)
   ────────────────────────────────────────────────────── */
@media (max-width:640px){
    .extratv-pd-wrapper{
        padding:18px 14px 126px;
        border-radius:0;
    }

    .extratv-pd-wrapper .tabs-wrap{
        position:sticky;
        top:0;
        z-index:20;
        width:100%;
        max-width:100%;
        margin:0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x;
        overscroll-behavior-x:contain;
        direction:rtl;
        scroll-behavior:auto;
        scroll-snap-type:none;
        scroll-padding:0;
        padding:12px 14px 16px;
        background:linear-gradient(180deg,rgba(6,6,23,.96),rgba(6,6,23,.86),rgba(6,6,23,0));
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        box-sizing:border-box;
        scrollbar-width:none;
    }

    .extratv-pd-wrapper .tabs-wrap::-webkit-scrollbar{
        display:none;
        width:0;
        height:0;
    }

    .extratv-pd-wrapper .tabs-wrap::before,
    .extratv-pd-wrapper .tabs-wrap::after{
        display:none;
        content:none;
    }

    .extratv-pd-wrapper .tabs{
        direction:rtl;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:flex-start;
        align-items:center;
        gap:10px;
        width:max-content;
        min-width:max-content;
        max-width:none;
        margin:0;
        padding:0;
        scroll-padding:0;
        scroll-snap-type:none;
    }

    .extratv-pd-wrapper .tab{
        position:relative;
        flex:0 0 138px;
        min-width:138px;
        max-width:138px;
        min-height:52px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:8px 9px;
        overflow:hidden;
        border-radius:999px;
        opacity:.78;
        transform:none;
        scroll-snap-align:none;
        border-color:rgba(255,255,255,.10);
        background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
        box-shadow:none;
    }

    .extratv-pd-wrapper .tab-logo{
        width:104px;
        height:32px;
        max-height:32px;
    }

    .extratv-pd-wrapper .tab-logo-fallback{
        gap:5px;
        padding:0 2px;
    }

    .extratv-pd-wrapper .tab-logo-mark{
        width:14px;
        height:14px;
    }

    .extratv-pd-wrapper .tab-logo-text{
        font-size:.82rem;
        letter-spacing:.1px;
    }

    .extratv-pd-wrapper .tab.active{
        opacity:1;
        transform:none;
        border-color:var(--accent);
        background:
            radial-gradient(circle at 50% 0%, var(--glow), transparent 58%),
            linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.032));
        box-shadow:
            0 10px 26px rgba(0,0,0,.30),
            0 0 0 1px var(--accent),
            0 0 16px var(--shadow);
    }

    .extratv-pd-wrapper .tab.active::before{
        content:"";
        position:absolute;
        left:22px;
        right:22px;
        bottom:7px;
        height:2px;
        border-radius:999px;
        background:var(--accent);
        box-shadow:0 0 10px var(--shadow);
    }

    .extratv-pd-wrapper .tab.active::after{
        display:none;
    }

    /* Panel + content sized for mobile */
    .extratv-pd-wrapper .panel{
        max-width:100%;
        padding:20px 14px;
        border-radius:28px;
        margin-top:6px;
        box-shadow:0 14px 34px rgba(0,0,0,.34), 0 0 9px var(--shadow);
        overflow:hidden;
    }

    .extratv-pd-wrapper .title{
        font-size:1.46rem;
    }

    .extratv-pd-wrapper .desc{
        margin:14px auto 22px;
        font-size:.88rem;
        line-height:1.78;
    }

    .extratv-pd-wrapper .features{
        gap:9px;
    }

    .extratv-pd-wrapper .features li{
        font-size:.86rem;
        line-height:1.62;
        padding:13px 14px;
    }

    .extratv-pd-wrapper .number-strip{
        gap:8px;
    }

    .extratv-pd-wrapper .number-box{
        padding:12px 6px 10px;
        border-radius:16px;
    }

    .extratv-pd-wrapper .number-box strong{
        font-size:1.08rem;
    }

    .extratv-pd-wrapper .number-box span{
        font-size:.75rem;
    }

    .extratv-pd-wrapper .package-logo{
        width:211px;
        height:94px;
        margin:8px auto 18px;
        border-radius:24px;
        transform:translateY(-2px);
    }

    .extratv-pd-wrapper .package-logo--fallback{
        padding:8px 14px;
        gap:10px;
    }

    .extratv-pd-wrapper .package-logo-mark{
        width:30px;
        height:30px;
    }

    .extratv-pd-wrapper .package-logo-wordmark{
        font-size:1.18rem;
        letter-spacing:.3px;
    }

    .extratv-pd-wrapper .package-logo img{
        max-width:82%;
        max-height:69px;
    }

    .extratv-pd-wrapper .combo-device svg{
        width:42px;
        height:42px;
    }

    .extratv-pd-wrapper .combo-device span{
        font-size:.72rem;
    }

    .extratv-pd-wrapper .back-package{
        padding:7px 11px;
        font-size:.78rem;
    }

    .extratv-pd-bar-wrap .compare-bar{
        bottom:10px;
        left:10px;
        right:10px;
        align-items:stretch;
        flex-direction:column;
    }

    .extratv-pd-bar-wrap .bar-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}

/* ──────────────────────────────────────────────────────
   Small mobile (≤ 390px)
   ────────────────────────────────────────────────────── */
@media (max-width:390px){
    .extratv-pd-wrapper .tabs-wrap{
        padding-left:12px;
        padding-right:12px;
    }

    .extratv-pd-wrapper .tabs{
        gap:9px;
    }

    .extratv-pd-wrapper .tab{
        flex-basis:130px;
        min-width:130px;
        max-width:130px;
        min-height:54px;
    }

    .extratv-pd-wrapper .tab-logo{
        width:98px;
        height:30px;
        max-height:30px;
    }

    .extratv-pd-wrapper .tab-logo-mark{
        width:12px;
        height:12px;
    }

    .extratv-pd-wrapper .tab-logo-text{
        font-size:.74rem;
        letter-spacing:0;
    }

    .extratv-pd-wrapper .package-logo{
        width:197px;
        height:88px;
    }

    .extratv-pd-wrapper .package-logo img{
        max-height:64px;
    }

    .extratv-pd-wrapper .package-logo-mark{
        width:28px;
        height:28px;
    }

    .extratv-pd-wrapper .package-logo-wordmark{
        font-size:1.08rem;
    }
}