/* ------------------------------------------------------------------
   Milasha TV Player - the design system.

   One file, loaded by every page. Ported from the landing page so every
   existing class keeps working; the type is the player's, because the
   player is the product and the marketing should look like it.

   Chakra Petch  display    Nunito Sans  body
   Space Mono    labels, times, codecs, counts
   Cherry Bomb One  the MILASHA wordmark only
   ------------------------------------------------------------------ */

:root{
  /* ---- the identity, taken from the mascot ------------------------------
     Violet body, electric-blue screen, violet-black ground. Deliberately no
     hue in common with milasha.tv (yellow #facc15 on slate #111827).        */
  --ink:#0B0713;
  --violet-900:#140D24;
  --violet-800:#1C1333;
  --violet-700:#261A45;
  --violet-600:#33245C;
  --violet-100:#F0E8FF;
  --violet-300:#D9C2FF;
  --violet-400:#B98CF5;
  --violet-500:#9B63EE;
  --blue-300:#8FB4FF;
  --blue-400:#5B8CFF;
  --glow:#CFE0FF;
  --line:rgba(190,160,255,.15);
  --cream:#F3EFFA;
  --muted:#A99CC4;
  --dim:#7E7299;
  --on-accent:#140D24;

  /* ---- compatibility aliases -------------------------------------------
     The markup was written against the old names. They now resolve to the
     new palette, so no page had to change. New work should use the names
     above; these can retire once nothing references them.                  */
  --brown-900:var(--violet-900);
  --brown-800:var(--violet-800);
  --brown-700:var(--violet-700);
  --brown-600:var(--violet-600);
  --pink-100:var(--violet-100);
  --pink-300:var(--violet-300);
  --pink-400:var(--violet-400);
  --pink-500:var(--violet-500);

  --display:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
  --logo:'Cherry Bomb One',system-ui,sans-serif;
  --r:18px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.018em;line-height:1.04}
h1{font-size:clamp(30px,5.4vw,62px);font-weight:700;text-transform:uppercase}
h2{font-size:clamp(28px,4vw,46px);font-weight:700}
h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pink-400);
  background:rgba(185,140,245,.09);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pink-400)}
.lead{color:var(--muted);font-size:clamp(16px,1.7vw,19px);line-height:1.62;max-width:58ch}
.sec-head{max-width:62ch;margin-bottom:26px}
.sec-head p{color:var(--muted);margin:14px 0 0;font-size:17px}

/* Header, nav and the dropdown pattern now live in
   resources/views/partials/nav-styles.blade.php, shared by the public
   header and the signed-in nav so the two cannot drift apart. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:13px 24px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-pink{background:var(--pink-400);color:var(--on-accent);font-weight:700}
.btn-pink:hover{background:var(--pink-300)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:rgba(217,194,255,.04)}
.btn-ghost:hover{border-color:rgba(217,194,255,.3)}
.btn-sm{padding:10px 18px;font-size:13.5px;border-radius:12px}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:clamp(40px,6vw,72px) 0 clamp(34px,4.6vw,56px);
  background:
    radial-gradient(90% 120% at 80% -10%,rgba(185,140,245,.14) 0%,transparent 55%),
    radial-gradient(70% 90% at 8% 10%,rgba(51,36,92,.75) 0%,transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--line);
}
.hero-grid{display:grid;gap:46px;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:56px}}
.hero h1{margin:22px 0 0}
.hero h1 .soft{
  display:block;
  background:linear-gradient(96deg,var(--pink-300),var(--pink-500) 60%,var(--brown-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:16px;color:var(--dim);font-size:13.5px}

/* format pills */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.pill{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pink-300);background:rgba(185,140,245,.07);
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;
}

/* player frame */
.frame{
  position:relative;border-radius:24px;padding:14px;
  background:linear-gradient(160deg,var(--brown-700),var(--brown-900));
  border:1px solid var(--line);
  box-shadow:0 50px 110px -60px rgba(0,0,0,.95);
}
.frame-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 12px}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--brown-600);display:block}
.frame-bar i:first-child{background:var(--pink-500)}
.frame-body{border-radius:15px;overflow:hidden;background:var(--ink);border:1px solid rgba(217,194,255,.08)}
.screen{
  aspect-ratio:16/10;
  background:
    radial-gradient(60% 70% at 30% 30%,rgba(185,140,245,.16),transparent 60%),
    linear-gradient(150deg,var(--brown-800),var(--ink));
  display:grid;place-items:center;position:relative;
}
.play{
  width:62px;height:62px;border-radius:50%;background:var(--pink-400);
  display:grid;place-items:center;box-shadow:0 0 0 12px rgba(185,140,245,.10);
}
.play::before{
  content:"";border-left:17px solid var(--on-accent);border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px;
}
.screen .badge{
  position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-300);background:rgba(10,8,7,.6);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;
}
.epg{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(217,194,255,.07)}
.epg-row{display:flex;align-items:center;gap:12px;background:var(--brown-900);padding:11px 14px}
.epg-row .t{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none;width:44px}
.epg-row .n{font-size:13.5px;color:var(--cream);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epg-row .bar{height:4px;border-radius:3px;background:var(--brown-600);flex:none;width:70px;overflow:hidden}
.epg-row .bar span{display:block;height:100%;background:var(--pink-400)}

/* ---------- strip ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--brown-900)}
.strip-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:760px){.strip-in{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--brown-900);padding:26px 22px}
.stat .k{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--violet-300);letter-spacing:-.01em;line-height:1.25}
.stat .v{margin-top:5px;font-size:13.5px;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:clamp(38px,5vw,64px) 0}
.plans{background:linear-gradient(180deg,var(--ink),var(--brown-900) 60%,var(--ink))}
/* Cards spread out equally across whatever width they're given, and the row
   simply fits one more when a card is added or removed - no breakpoint has
   to be told how many cards exist. Below ~740px there's only room for one
   column, so cards stack; auto-fit takes it from there. */
.plans .wrap{max-width:1320px}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  justify-content:center;
  gap:18px;
}
@media(min-width:1180px){
  .plan{padding:28px 22px 24px}
  .price .amt{font-size:clamp(32px,3.2vw,42px)}
  .plan .desc{font-size:14.5px;min-height:56px}
  .feats li{font-size:14px;gap:10px}
  .plan h3{font-size:13px}
}
.plan{
  position:relative;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(165deg,var(--brown-800),var(--brown-900));
  padding:30px 26px 26px;display:flex;flex-direction:column;
}
.plan.solo{border-color:rgba(217,194,255,.24)}
.plan.pro{
  border-color:rgba(185,140,245,.38);
  background:linear-gradient(165deg,var(--brown-700),var(--brown-900));
  box-shadow:0 40px 90px -60px rgba(185,140,245,.5);
}
.plan .tag{
  position:absolute;top:-11px;right:24px;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-accent);background:var(--pink-400);border-radius:999px;padding:5px 13px;
}
.plan h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-300);font-weight:600}
.price{display:flex;align-items:baseline;gap:7px;margin:16px 0 6px}
.price .amt{font-family:var(--display);font-size:clamp(38px,5vw,50px);font-weight:700;letter-spacing:-.045em}
.price .per{color:var(--dim);font-size:15px}
.plan .desc{color:var(--muted);font-size:15px;margin:0 0 22px;min-height:44px}
.feats{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--cream)}
.feats li .ck{
  flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  background:rgba(185,140,245,.14);color:var(--pink-300);font-size:11px;font-weight:700;margin-top:2px;
}
.feats li.off{color:var(--dim)}
.feats li.off .ck{background:rgba(169,156,196,.10);color:var(--dim)}
.plan .btn{width:100%;margin-top:auto}

.addons{display:grid;gap:16px;margin-top:18px}
@media(min-width:860px){.addons{grid-template-columns:1fr 1fr}}
.addon{
  border:1px dashed rgba(217,194,255,.22);border-radius:18px;padding:22px 24px;
  background:rgba(38,26,69,.35);display:flex;gap:18px;align-items:center;
}
.addon .big{font-family:var(--display);font-size:28px;font-weight:700;color:var(--pink-300);letter-spacing:-.02em;flex:none}
.addon h4{font-size:15px;margin:0 0 3px;font-family:var(--display);font-weight:600}
.addon p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

.billing-note{
  margin-top:26px;border-left:3px solid var(--pink-400);background:rgba(185,140,245,.06);
  border-radius:0 12px 12px 0;padding:16px 20px;color:var(--muted);font-size:13.5px;line-height:1.62;
}
.billing-note b{color:var(--pink-300);font-weight:600}

/* ---------- capabilities ---------- */
.cap-grid{display:grid;gap:16px}
@media(min-width:700px){.cap-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cap{
  border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  background:linear-gradient(165deg,var(--brown-800),var(--brown-900));
  transition:border-color .18s ease,transform .18s ease;
}
.cap:hover{border-color:rgba(185,140,245,.3);transform:translateY(-2px)}
.cap .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(185,140,245,.12);color:var(--pink-300);font-size:17px;
}
.cap h3{margin-bottom:9px}
.cap p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.cap .tech{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.cap .tech span{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(217,194,255,.12);border-radius:7px;padding:4px 8px;
}

/* ---------- scripts ---------- */
.scripts{background:var(--brown-900);border-block:1px solid var(--line)}
.script-grid{display:grid;gap:14px;margin-top:34px}
@media(min-width:700px){.script-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.script-grid{grid-template-columns:repeat(3,1fr)}}
.script{
  border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--brown-800);
}
.script .label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-400)}
.script .sample{font-size:19px;margin-top:12px;color:var(--cream);line-height:1.45}
.script .meta{margin-top:10px;font-size:12.5px;color:var(--dim)}
.script.rtl .sample{direction:rtl;text-align:right}
.script.soon{opacity:.62}
.script.soon .label{color:var(--muted)}
.script.soon .meta{color:var(--dim)}

/* ---------- steps ---------- */
.steps{display:grid;gap:18px;counter-reset:s}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:rgba(38,26,69,.4);counter-increment:s}
.step::before{
  content:counter(s);font-family:var(--display);font-size:13px;font-weight:700;
  width:30px;height:30px;border-radius:9px;background:var(--pink-400);color:var(--on-accent);
  display:grid;place-items:center;margin-bottom:16px;
}
.step h3{margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px;max-width:840px}
/* Scoped to .faq on purpose. These were bare `details`/`summary` rules, and
   `overflow:hidden` — which the accordion needs to keep its rounded corners —
   silently clipped the language dropdown's menu to the height of its trigger.
   The menu still painted, so it looked fine and simply could not be clicked. */
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--brown-900);overflow:hidden}
.faq details[open]{border-color:rgba(185,140,245,.26)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;font-weight:500;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pink-400);font-size:20px;font-weight:300;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:14.5px;line-height:1.65}

/* ---------- cta ---------- */
.final{
  background:
    radial-gradient(80% 130% at 50% 0%,rgba(185,140,245,.16),transparent 60%),
    var(--brown-900);
  border-top:1px solid var(--line);text-align:center;
}
.final h2{max-width:18ch;margin:18px auto 0}
.final .lead{margin:18px auto 0;text-align:center}
.final .hero-cta{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:40px 0 30px}
footer .billing-note{margin-top:0;margin-bottom:32px}
.foot-grid{display:grid;gap:34px}
@media(min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.foot h4{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-400);margin:0 0 14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:var(--muted);font-size:14px}
.foot a:hover{color:var(--pink-300)}
.foot p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.legal{
  margin-top:40px;padding-top:26px;border-top:1px solid rgba(217,194,255,.08);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  color:var(--dim);font-size:12.5px;
}
.legal a{color:var(--dim)}
.legal a:hover{color:var(--pink-300)}

/* ============================================================
   Forms — auth screens and any other form on the site
   ============================================================ */
.auth-wrap{
  min-height:calc(100vh - 68px);display:grid;place-items:center;
  padding:clamp(28px,6vw,64px) 20px;
}
.auth-card{
  width:100%;max-width:428px;
  background:var(--brown-900);border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,4vw,38px);
}
.auth-card .logo{justify-content:center;margin-bottom:20px}
.auth-card h1{font-size:25px;line-height:1.2;margin:0 0 6px;text-align:center}
.auth-card .auth-sub{
  color:var(--muted);font-size:14.5px;text-align:center;margin:0 0 26px;
}
.field{margin-bottom:17px}
.field label{
  display:block;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.field input[type=text],.field input[type=email],
.field input[type=password],.field input[type=tel],.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);font-family:var(--body);font-size:15px;font-weight:400;
  padding:13px 15px;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet-400);
  box-shadow:0 0 0 3px rgba(185,140,245,.16);
}
.field input::placeholder{color:#5F5480}
.field .err{display:block;color:#FF8B9B;font-size:13px;margin-top:7px}
.field .hint{display:block;color:var(--dim);font-size:12.5px;margin-top:7px}
.check{display:flex;align-items:center;gap:9px;margin:4px 0 20px}
.check input{
  width:16px;height:16px;accent-color:var(--violet-400);flex:none;cursor:pointer;
}
.check label{font-size:14px;color:var(--muted);cursor:pointer;margin:0}
.auth-card .btn{width:100%}
.auth-alt{
  margin-top:22px;padding-top:19px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:14px;color:var(--muted);flex-wrap:wrap;
}
.auth-alt a{color:var(--violet-300);text-decoration:none;font-weight:600}
.auth-alt a:hover{text-decoration:underline}
.form-note{
  background:rgba(185,140,245,.07);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px;color:var(--muted);margin-bottom:22px;
}

/* ============================================================
   Legal and other long-form text pages
   Styles raw tags, so the markup stays semantic and a new
   policy page needs no classes at all.
   ============================================================ */
.legal{max-width:78ch;margin:0 auto;padding:clamp(34px,5vw,60px) 20px clamp(48px,6vw,76px)}
.legal h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.legal .eff{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 30px;
}
.legal h2{
  font-size:20px;margin:26px 0 10px;padding-top:14px;
  border-top:1px solid var(--line-2);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:16.5px;margin:18px 0 8px;color:var(--violet-300)}
.legal p{color:var(--muted);margin:0 0 11px;font-size:15.5px;line-height:1.6}
.legal ul,.legal ol{color:var(--muted);margin:0 0 11px;padding-left:22px;line-height:1.6}
.legal li{margin-bottom:8px}
.legal strong{color:var(--cream);font-weight:700}
.legal a{color:var(--violet-300);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--violet-400)}
.legal table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.legal th,.legal td{
  border:1px solid var(--line);padding:10px 12px;text-align:left;
  color:var(--muted);vertical-align:top;
}
.legal th{color:var(--cream);font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(185,140,245,.05)}
.legal .callout{
  background:rgba(185,140,245,.08);border:1px solid var(--line);
  border-left:3px solid var(--violet-400);border-radius:0 14px 14px 0;
  padding:17px 19px;margin:0 0 20px;
}
.legal .callout p:last-child{margin-bottom:0}
.legal .callout > p:first-child{color:var(--cream);font-weight:700;margin-bottom:9px}
.legal .callout strong{display:block;margin-bottom:7px;color:var(--cream)}
.field input.code-in{
  text-align:center;letter-spacing:.42em;font-family:var(--mono);font-size:19px;
  padding-left:0;padding-right:0;text-indent:.42em;
}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--violet-300);
}
.linkish:hover{text-decoration:underline}