/* assets/css/sale-pages.css  —  MyBetCode AI sales landing */

.ai-sale-page{
    --ai-teal:#22f5c5;
    --ai-green:#34d399;
    --ai-blue:#60a5fa;
    --ai-ink:#e9f1f4;
    --ai-mut:#8ea0ad;
    --ai-panel:rgba(255,255,255,.03);
    --ai-panel-2:rgba(255,255,255,.05);
    --ai-bd:rgba(255,255,255,.08);
    --ai-bd-soft:rgba(255,255,255,.06);
    --ai-grad:linear-gradient(135deg,#34d399 0%,#22d3ee 100%);
    --ai-radius:18px;
    color:var(--ai-ink);
}
.ai-sale-page *{ box-sizing:border-box; }
.ai-sale-page .eyebrow{
    color:var(--ai-teal); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    font-size:.72rem; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.75rem;
}
.ai-sale-page .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ai-teal); box-shadow:0 0 12px var(--ai-teal); }
.ai-sale-page h1{ font-size:clamp(2rem,5vw,3.3rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 1rem; }
.ai-sale-page h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 .85rem; }
.ai-sale-page p{ color:var(--ai-mut); line-height:1.7; margin:0 0 1rem; font-size:1.02rem; }

/* Buttons */
.ai-sale-page .btn-ai{
    background:var(--ai-grad); color:#04221c; font-weight:800; border:0;
    box-shadow:0 10px 30px rgba(34,211,238,.22);
}
.ai-sale-page .btn-ai:hover{ filter:brightness(1.06); }
.ai-sale-page .btn-block{ width:100%; display:inline-flex; justify-content:center; }
.ai-sale-page .btn-lg{ padding:1rem 2rem; font-size:1.05rem; }
.ai-flash{ margin-bottom:1.5rem; }
.alert-ok{ background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); color:#bff3df; padding:.9rem 1.1rem; border-radius:14px; }

/* HERO */
.ai-hero{
    display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center;
    padding:1rem 0 2.6rem; border-bottom:1px solid var(--ai-bd-soft); margin-bottom:2.4rem;
}
.ai-lede{ font-size:1.12rem; max-width:42ch; }
.ai-hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.4rem 0 1rem; }
.ai-hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; color:var(--ai-mut); font-size:.85rem; }
.ai-hero-trust i{ opacity:.5; font-style:normal; }
.ai-video-frame{
    position:relative; aspect-ratio:16/10; border-radius:var(--ai-radius); overflow:hidden;
    background:radial-gradient(120% 120% at 70% 10%, rgba(34,211,238,.16), transparent 60%), #0b1118;
    border:1px solid var(--ai-bd); box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.ai-video-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(34,245,197,.08); border-radius:inherit; }
.ai-video-cap{ text-align:center; font-size:.82rem; margin:.7rem 0 0; }

/* LAYOUT: main + right sidebar */
.ai-sale-layout{ display:grid; grid-template-columns:1fr 320px; gap:2.2rem; align-items:start; }
.ai-sale-main{ min-width:0; }
.ai-block{ padding:2.4rem 0; border-bottom:1px solid var(--ai-bd-soft); scroll-margin-top:90px; }
.ai-block:first-child{ padding-top:.6rem; }
.ai-quote{
    margin-top:1.2rem; padding:1.1rem 1.3rem; border-left:3px solid var(--ai-teal);
    background:var(--ai-panel); border-radius:0 14px 14px 0; color:#cfe2e8; font-size:1.05rem; font-weight:600;
}
.ai-pick-states{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.ps{ padding:.5rem .9rem; border-radius:999px; font-size:.82rem; font-weight:700; border:1px solid var(--ai-bd); }
.ps-approved{ color:#bff3df; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); }
.ps-watch{ color:#cfe0ff; background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.35); }
.ps-avoid{ color:#ffd6d6; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.35); }
.ps-insuf{ color:#e7d8b0; background:rgba(234,179,8,.1); border-color:rgba(234,179,8,.3); }

/* Right sidebar */
.ai-sale-side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:1rem; }
.ai-side-card{
    background:radial-gradient(140% 140% at 100% 0%, rgba(34,211,238,.1), transparent 55%), var(--ai-panel-2);
    border:1px solid var(--ai-bd); border-radius:var(--ai-radius); padding:1.4rem;
}
.ai-side-card h3{ font-size:1.2rem; margin:.2rem 0 .5rem; }
.ai-side-card p{ font-size:.92rem; margin-bottom:1rem; }
.ai-side-card .btn{ margin-bottom:.6rem; }
.ai-side-points{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem; }
.ai-side-points li{ position:relative; padding-left:1.4rem; color:#c6d4da; font-size:.88rem; }
.ai-side-points li::before{ content:"✓"; position:absolute; left:0; color:var(--ai-teal); font-weight:900; }
.ai-side-nav{ display:flex; flex-direction:column; background:var(--ai-panel); border:1px solid var(--ai-bd-soft); border-radius:14px; overflow:hidden; }
.ai-side-nav a{ padding:.7rem 1rem; color:var(--ai-mut); text-decoration:none; font-size:.9rem; border-bottom:1px solid var(--ai-bd-soft); }
.ai-side-nav a:last-child{ border-bottom:0; }
.ai-side-nav a:hover{ color:var(--ai-ink); background:var(--ai-panel-2); }

/* Demo grids + shared bits */
.demo-grid{ display:grid; gap:1rem; margin-top:1.4rem; }
.demo-grid-2{ grid-template-columns:1fr 1fr; }
.pill{ display:inline-flex; align-items:center; padding:.32rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700; border:1px solid var(--ai-bd); color:#c6d4da; background:var(--ai-panel); }
.pill-active,.pill-won{ color:#bff3df; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4); }
.pill-conf{ color:#bff3df; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4); }
.pill-risk{ color:#e7d8b0; background:rgba(234,179,8,.1); border-color:rgba(234,179,8,.32); }
.pill-unit{ color:#bff3df; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4); }
.tag{ padding:.3rem .7rem; border-radius:8px; font-size:.74rem; font-weight:700; background:var(--ai-panel-2); border:1px solid var(--ai-bd-soft); color:#c6d4da; }
.tag-sport{ background:var(--ai-grad); color:#04221c; border:0; }
.kick{ color:var(--ai-mut); font-size:.82rem; }

/* Bookmaker chips */
.bk-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 .4rem; }
.bk-chip{ padding:.5rem .9rem; border-radius:10px; background:var(--ai-panel-2); border:1px solid var(--ai-bd); font-size:.85rem; font-weight:600; color:#d4e2e8; }
.bk-more{ color:var(--ai-teal); border-color:rgba(34,245,197,.35); }

/* Demo: bet code */
.demo-betcode{ position:relative; background:var(--ai-panel-2); border:1px solid var(--ai-bd); border-left:3px solid var(--ai-green); border-radius:var(--ai-radius); padding:1.3rem; }
.demo-betcode header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.bk{ display:flex; align-items:center; gap:.7rem; }
.bk-logo{ width:38px; height:38px; border-radius:10px; background:#e23; color:#fff; font-weight:900; display:grid; place-items:center; }
.bk strong{ display:block; font-size:1rem; }
.bk span{ color:var(--ai-mut); font-size:.78rem; }
.code-block{ background:rgba(0,0,0,.25); border:1px solid var(--ai-bd-soft); border-radius:14px; padding:1.1rem; text-align:center; }
.code-label{ display:block; color:var(--ai-mut); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:2.1rem; letter-spacing:.18em; font-weight:800; margin:.4rem 0 .9rem; }
.demo-copy{ width:100%; padding:.8rem; border-radius:999px; cursor:pointer; }
.demo-copy:disabled{ opacity:.55; cursor:not-allowed; }
.attached{ margin-top:1rem; padding-top:1rem; }
.attached .lbl{ display:block; color:var(--ai-mut); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem; }
.attached strong{ font-size:1.02rem; }
.attached p{ margin:.25rem 0 0; font-size:.86rem; }
.attached .muted{ color:var(--ai-mut); }
.demo-betcode footer{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ai-bd-soft); font-size:.82rem; font-weight:700; color:#c6d4da; }

/* Demo: pick */
.demo-pick{ position:relative; background:var(--ai-panel-2); border:1px solid var(--ai-bd); border-radius:var(--ai-radius); padding:1.2rem 1.2rem 0; overflow:hidden; }
.demo-pick .accent{ position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(#f59e0b,#fbbf24); }
.pick-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.pick-head .tags{ display:flex; gap:.4rem; }
.pick-teams{ display:flex; justify-content:space-between; align-items:center; margin:1rem 0; gap:1rem; }
.teams .team{ display:flex; align-items:center; gap:.6rem; font-size:1.15rem; font-weight:700; margin:.35rem 0; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-green{ background:var(--ai-green); }
.dot-blue{ background:var(--ai-blue); }
.vs{ text-align:center; background:var(--ai-panel); border:1px solid var(--ai-bd-soft); border-radius:12px; padding:.6rem .9rem; }
.vs strong{ display:block; }
.vs span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ai-mut); }
.pick-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.pick-boxes .box{ background:var(--ai-panel); border:1px solid var(--ai-bd-soft); border-radius:12px; padding:.8rem; }
.pick-boxes .box span{ display:block; color:var(--ai-mut); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.pick-boxes .box strong{ font-size:1rem; }
.pick-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 1rem; }
.pick-actions{ display:grid; grid-template-columns:1fr 1fr 1fr; margin:0 -1.2rem; border-top:1px solid var(--ai-bd-soft); }
.pick-actions span{ padding:.85rem; text-align:center; font-size:.85rem; font-weight:700; color:#c6d4da; border-right:1px solid var(--ai-bd-soft); }
.pick-actions span:last-child{ border-right:0; }
.pick-actions .primary{ background:var(--ai-grad); color:#04221c; }

/* Demo: chat */
.demo-chat{ background:var(--ai-panel); border:1px solid var(--ai-bd); border-radius:var(--ai-radius); padding:1.4rem; margin-top:1.4rem; }
.demo-chat .msg{ display:flex; gap:.8rem; margin-bottom:1.1rem; }
.demo-chat .msg.user{ justify-content:flex-end; }
.demo-chat .bubble{ max-width:80%; padding:1rem 1.1rem; border-radius:16px; line-height:1.6; font-size:.96rem; color:var(--ai-ink); }
.demo-chat .who{ display:block; font-weight:800; margin-bottom:.35rem; }
.msg.user .bubble{ background:rgba(34,211,238,.08); border:1px solid rgba(34,245,197,.3); }
.msg.ai .bubble{ background:var(--ai-panel-2); border:1px solid var(--ai-bd); }
.ava{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:rgba(96,165,250,.15); color:#cfe0ff; flex:0 0 auto; }
.ai-ava{ background:rgba(34,211,238,.12); border:1px solid rgba(34,245,197,.25); font-size:1.1rem; }
.chat-foot{ text-align:center; color:var(--ai-mut); font-size:.8rem; padding-top:.8rem; border-top:1px solid var(--ai-bd-soft); }

/* Demo: result */
.demo-result{ background:var(--ai-panel-2); border:1px solid var(--ai-bd); border-left:3px solid var(--ai-green); border-radius:var(--ai-radius); padding:1.3rem; }
.res-head{ display:flex; justify-content:space-between; align-items:center; }
.res-head .tags{ display:flex; gap:.4rem; }
.demo-result h4{ font-size:1.25rem; margin:.9rem 0 .2rem; }
.demo-result h4 em{ color:var(--ai-mut); font-style:normal; font-weight:600; }
.demo-result .kick{ margin-bottom:1rem; display:block; }
.score{ display:flex; justify-content:space-between; align-items:center; background:var(--ai-panel); border:1px solid var(--ai-bd-soft); border-radius:12px; padding:.9rem 1.1rem; }
.score span{ color:var(--ai-mut); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.score strong{ font-size:1.5rem; }
.res-sel{ border-left:3px solid var(--ai-teal); padding:.3rem 0 .3rem .9rem; margin:1rem 0; }
.res-sel span{ display:block; color:var(--ai-mut); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.res-sel strong{ font-size:1.1rem; }
.res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.res-grid div{ background:var(--ai-panel); border:1px solid var(--ai-bd-soft); border-radius:10px; padding:.7rem; }
.res-grid span{ display:block; color:var(--ai-mut); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
.res-foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ai-bd-soft); color:#c6d4da; font-size:.88rem; }
.ai-inline-link{ margin-top:1.3rem; }

/* Lead capture */
.ai-lead{ margin-top:1.6rem; background:var(--ai-panel-2); border:1px solid var(--ai-bd); border-radius:var(--ai-radius); padding:1.3rem; display:grid; gap:1rem; }
.ai-lead-copy strong{ display:block; font-size:1.05rem; }
.ai-lead-copy span{ color:var(--ai-mut); font-size:.9rem; }
.ai-lead-row{ display:flex; gap:.7rem; }
.ai-lead-row .input{ flex:1; }
.ai-sale-page .input{ width:100%; padding:.85rem 1rem; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--ai-bd); color:var(--ai-ink); font-size:.95rem; }
.ai-sale-page .input:focus{ outline:none; border-color:var(--ai-teal); box-shadow:0 0 0 3px rgba(34,245,197,.15); }

/* Lead done (after submit, 7-day hide) */
.ai-lead-done{ grid-template-columns:auto 1fr; align-items:center; gap:1rem; border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.06); }
.ai-lead-tick{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#04221c; background:var(--ai-grad); }

/* Lifestyle carousel */
.ls-wrap{ position:relative; margin-top:1.4rem; }
.ls-track{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:none; }
.ls-track::-webkit-scrollbar{ display:none; }
.ls-slide{
    flex:0 0 300px; scroll-snap-align:start; aspect-ratio:3/4; border-radius:var(--ai-radius);
    border:1px solid var(--ai-bd); position:relative; overflow:hidden; cursor:pointer;
    background-color:#0b1118;
    background-image:linear-gradient(180deg, rgba(7,11,16,.05) 0%, rgba(7,11,16,.85) 100%), var(--img);
    background-size:cover; background-position:center;
    display:flex; align-items:flex-end;
    transition:transform .2s, border-color .2s;
}
.ls-slide:hover{ border-color:rgba(34,245,197,.4); }
.ls-slide:focus-visible{ outline:2px solid var(--ai-teal); outline-offset:2px; }
.ls-slide figcaption{ padding:1.1rem; position:relative; z-index:2; }
.ls-slide figcaption strong{ display:block; font-size:1.1rem; }
.ls-slide figcaption span{ color:#c6d4da; font-size:.86rem; }
/* Per-slide rules now layer only a dark legibility overlay over the real photo
   (no solid color fill on top of var(--img), so the image shows through). */
.ls-slide.s1,
.ls-slide.s2,
.ls-slide.s3,
.ls-slide.s4,
.ls-slide.s5,
.ls-slide.s6{
    background-image:linear-gradient(180deg, rgba(6,18,26,0) 35%, rgba(6,18,26,.85) 100%), var(--img);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
/* Zoom button (center of slide) */
.ls-zoom{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:54px; height:54px; border-radius:50%; z-index:3;
    background:rgba(7,11,16,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.28); color:#fff;
    display:grid; place-items:center; cursor:pointer; opacity:.92;
    transition:transform .15s, background .15s, border-color .15s;
}
.ls-zoom svg{ width:22px; height:22px; }
.ls-slide:hover .ls-zoom{ background:rgba(7,11,16,.72); border-color:var(--ai-teal); transform:translate(-50%,-50%) scale(1.08); }

.ls-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--ai-bd); background:rgba(7,11,16,.8); color:#fff; font-size:1.4rem; cursor:pointer; z-index:4; }
.ls-prev{ left:-12px; }
.ls-next{ right:-12px; }
.ls-nav:hover{ border-color:var(--ai-teal); }

/* Lightbox (hardcoded colors so it works outside any var scope) */
.ls-lightbox{ position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:1.5rem; background:rgba(3,6,9,.88); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ls-lightbox[hidden]{ display:none; }
.ls-lightbox-inner{ margin:0; max-width:min(92vw,720px); width:100%; }
.ls-lightbox-inner img{ width:100%; height:auto; max-height:78vh; object-fit:contain; border-radius:16px; border:1px solid rgba(255,255,255,.12); display:block; background:#0b1118; }
.ls-lightbox.ls-noimg .ls-lightbox-inner{ min-height:300px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg,#0f766e,#22d3ee); }
.ls-lightbox-inner figcaption{ text-align:center; margin-top:1rem; color:#fff; }
.ls-lightbox-inner figcaption strong{ display:block; font-size:1.2rem; }
.ls-lightbox-inner figcaption span{ color:#c6d4da; font-size:.9rem; }
.ls-lightbox-close{ position:absolute; top:1.2rem; right:1.2rem; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(7,11,16,.7); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; z-index:2; }
.ls-lightbox-close:hover{ border-color:#22f5c5; }
body.ls-lightbox-open{ overflow:hidden; }

/* Feature block */
.ai-block-feature{ background:radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.08), transparent 55%); border-radius:var(--ai-radius); padding:2.2rem; border:1px solid var(--ai-bd); }
.ai-feature-cta{ margin-top:1.2rem; }

/* CTA / pricing */
.ai-cta{ padding:3rem 0 1rem; scroll-margin-top:80px; }
.ai-cta-head{ text-align:center; max-width:640px; margin:0 auto 2rem; }
.ai-cta-notes{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.notice-card{ background:rgba(234,179,8,.05); border:1px solid rgba(234,179,8,.25); border-radius:14px; padding:1.1rem 1.3rem; }
.notice-card strong{ color:#e7d8b0; display:block; margin-bottom:.4rem; }
.notice-card p{ margin:0; font-size:.9rem; }

/* FAQ */
.ai-faq{ padding:3rem 0; }
.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:.7rem; }
.faq-list details{ background:var(--ai-panel-2); border:1px solid var(--ai-bd); border-radius:14px; overflow:hidden; }
.faq-list summary{ padding:1.1rem 1.3rem; cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; color:var(--ai-teal); font-size:1.3rem; font-weight:400; }
.faq-list details[open] summary::after{ content:"−"; }
.faq-list details > div{ padding:0 1.3rem 1.2rem; color:var(--ai-mut); line-height:1.7; }
.faq-list a{ color:var(--ai-teal); }

/* Final CTA */
.ai-final{ text-align:center; padding:3.5rem 1.5rem; margin-top:1rem; border-radius:var(--ai-radius); border:1px solid var(--ai-bd); background:radial-gradient(120% 120% at 50% 0%, rgba(34,211,238,.12), transparent 60%), var(--ai-panel); }
.ai-final h2{ margin-bottom:.6rem; }
.ai-final p{ max-width:560px; margin:0 auto 1.6rem; }
.ai-final-trust{ margin-top:1.4rem; color:var(--ai-mut); font-size:.82rem; }

/* ===== Checkout modal button (outside .ai-sale-page scope — hardcoded) ===== */
.checkout-modal .btn-ai{
    background:linear-gradient(135deg,#34d399 0%,#22d3ee 100%) !important;
    color:#04221c !important; font-weight:800; border:0;
    box-shadow:0 10px 30px rgba(34,211,238,.22);
}
.checkout-modal .btn-ai:hover{ filter:brightness(1.06); }
.checkout-modal .btn-block{ width:100%; display:inline-flex; align-items:center; justify-content:center; }

/* Responsive */
@media (max-width:980px){
    .ai-hero{ grid-template-columns:1fr; }
    .ai-sale-layout{ grid-template-columns:1fr; }
    .ai-sale-side{ position:static; order:2; }
    .demo-grid-2{ grid-template-columns:1fr; }
    .ai-cta-notes{ grid-template-columns:1fr; }
}
@media (max-width:560px){
    .ai-lead-row{ flex-direction:column; }
    .ls-slide{ flex-basis:240px; }
    .ls-prev{ left:-6px; } .ls-next{ right:-6px; }
    .res-grid{ grid-template-columns:1fr 1fr; }
    .pick-actions span{ font-size:.78rem; padding:.7rem .3rem; }
}