/* ═══════════════ e'thix — «خطتك» (Agent v2, C24 F): the plans page and the Agent allowance ═══════════════
   Scoped to .pl-v2 (the page) and .pl-aw / .pl-ai (the allowance tiles, also inside «رصيدك»). Tokens only (core.css),
   so light, dark and the accents follow the theme; no inline styles (CSP): widths arrive as --w through the CSSOM.
   ═══════════════════════════════════════════════════════════════════════════ */

.pl-host{container-type:inline-size;container-name:plans;min-inline-size:0}
.pl-v2{display:grid;gap:1.6rem;min-inline-size:0}

/* ─── the hero: the current plan and «استخدامك الآن» ─── */
.pl-v2 .pl-hero--v2{
  position:relative;isolation:isolate;display:grid;gap:1.25rem;padding:1.5rem;border-radius:var(--r-xl,26px);
  border:1px solid color-mix(in srgb,var(--accent-b) 45%,var(--line));
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent-a) 30%,var(--surface)) 0%,var(--surface) 62%);
  box-shadow:var(--shadow-2),var(--hair);overflow:hidden;
}
.pl-v2 .pl-hero__aurora{z-index:-1;opacity:.75}
.pl-v2 .pl-hero__main{display:grid;gap:.45rem;align-content:start;min-inline-size:0}
.pl-v2 .pl-hero__eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--gold-text)}
.pl-v2 .pl-hero__eyebrow::before{content:"";inline-size:1.6rem;block-size:2px;border-radius:2px;background:var(--gold)}
.pl-v2 .pl-hero__name{font-family:var(--lt);font-size:clamp(1.9rem,7cqi,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  background:var(--g-accent);-webkit-background-clip:text;background-clip:text;color:transparent;inline-size:fit-content;max-inline-size:100%}
html[lang="ar"] .pl-v2 .pl-hero__name{font-family:var(--ar);letter-spacing:0}
.pl-v2 .pl-hero__lead{font-size:.95rem;font-weight:600;color:var(--ink)}
.pl-v2 .pl-sub{margin-block-start:.6rem}
.pl-v2 .pl-incl{gap:.5rem;font-size:.9rem}
.pl-v2 .pl-incl li.is-off{color:var(--muted)}
.pl-v2 .pl-incl li.is-off .pl-ic{background:var(--sunken);color:var(--muted)}
.pl-v2 .pl-hero__now{display:grid;gap:.75rem;align-content:start;min-inline-size:0}
.pl-v2 .pl-hero__now-title{margin:0;font-size:.78rem;font-weight:700;color:var(--muted)}

/* ─── the allowance tiles: the AI balance and the Agent (also in «رصيدك») ─── */
.pl-aw,.pl-ai{
  display:grid;gap:.55rem;padding:1rem 1.05rem;border-radius:var(--r-lg,18px);min-inline-size:0;
  background:var(--glass-strong,var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-1),var(--hair);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
.usage-live .pl-aw{margin-block-start:.9rem;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface-2)}
.pl-aw__head{display:flex;align-items:center;gap:.55rem;min-inline-size:0;flex-wrap:wrap}
.pl-aw__ic{display:inline-grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:11px;flex:none;
  background:var(--g-agent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent-c) 30%,transparent)}
.pl-ai .pl-aw__ic{background:var(--g-accent);color:var(--on-accent)}
.pl-aw__ic .i{inline-size:1.05rem;block-size:1.05rem}
.pl-aw__title{margin:0;font-size:.98rem;font-weight:700;flex:1 1 auto;min-inline-size:0}
.pl-aw__pill{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;
  background:color-mix(in srgb,var(--ok) 16%,transparent);color:color-mix(in srgb,var(--ok) 80%,var(--ink))}
.pl-aw__pill .i{inline-size:.8rem;block-size:.8rem}
.pl-aw__pill.is-limited,.pl-aw__pill.is-budget{background:color-mix(in srgb,var(--warn) 18%,transparent);color:color-mix(in srgb,var(--warn) 70%,var(--ink))}
.pl-aw__pill.is-locked,.pl-aw__pill.is-off{background:var(--sunken);color:var(--muted)}
.pl-aw__pill.is-paused{background:var(--danger-soft);color:var(--danger)}
.pl-aw__sub{margin:0;font-size:.8rem;color:var(--muted);line-height:1.5}
.pl-aw__line{margin:0;font-size:.86rem;font-weight:600;line-height:1.55;color:var(--ink)}
.pl-aw__bars{display:grid;gap:.55rem}
.pl-aw__row{display:grid;gap:.3rem;min-inline-size:0}
.pl-aw__rowtop{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;min-inline-size:0}
.pl-aw__value{font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pl-aw__label{font-size:.78rem;color:var(--ink-soft);min-inline-size:0;overflow-wrap:anywhere}
.pl-aw__label b{font-weight:700;color:var(--ink)}
.pl-aw__bar{position:relative;block-size:.5rem;border-radius:999px;background:var(--sunken);overflow:hidden}
.pl-aw__fill{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--w,0%);border-radius:inherit;background:var(--g-agent);transition:inline-size var(--t-slow) var(--ios)}
.pl-ai .pl-aw__fill{background:var(--g-accent)}
.pl-aw__bar.is-empty .pl-aw__fill{background:var(--warn)}
.pl-aw__when,.pl-aw__renew{font-size:.74rem;color:var(--muted)}
.pl-aw__renew{margin:0;display:inline-flex;align-items:center;gap:.3rem}
.pl-aw__note{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.pl-aw__from{margin:0;font-size:.82rem;font-weight:600;color:var(--gold-text)}
.pl-aw__cta{justify-self:start}
.pl-aw[data-state="locked"]{background:linear-gradient(160deg,var(--surface-2),var(--surface));border-style:dashed}
.pl-aw[data-state="locked"] .pl-aw__ic{background:var(--sunken);color:var(--muted);box-shadow:none}

/* ─── every plan ─── */
.pl-v2 .pl-all{display:grid;gap:.9rem}
.pl-v2 .pl-all__title{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.pl-v2 .pl-all__lead{margin:-.5rem 0 0;font-size:.88rem;color:var(--muted)}
.pl-v2 .pl-grid{display:grid;grid-template-columns:1fr;gap:.9rem;align-items:stretch}
.pl-v2 .pl-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.7rem;padding:1.25rem 1.1rem 1.1rem;border-radius:22px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);min-inline-size:0;
  animation:pl-rise .6s var(--ios) both;animation-delay:calc(var(--i,0) * 70ms);transition:transform .5s var(--spring),box-shadow var(--t);
}
.pl-v2 .pl-card::before{content:"";position:absolute;inset:0 0 auto;block-size:9rem;z-index:-1;opacity:.7;
  background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--line) 90%,transparent),transparent 70%)}
.pl-v2 .pl-card.p-plan-20::before{background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--accent-a) 75%,transparent),transparent 70%)}
.pl-v2 .pl-card.p-plan-50::before{background:radial-gradient(90% 100% at 50% 0%,rgba(143,160,184,.55),transparent 70%)}
.pl-v2 .pl-card.p-plan-100::before{background:radial-gradient(90% 100% at 50% 0%,rgba(217,164,143,.55),transparent 70%)}
.pl-v2 .pl-card.is-featured{border:1.5px solid transparent;box-shadow:var(--shadow-2);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--gb,0deg),var(--accent-a),var(--accent-c),#8FA0B8,var(--accent-b),var(--accent-a)) border-box;
  animation:pl-rise .6s var(--ios) both,gb-spin 6s linear infinite;animation-delay:calc(var(--i,0) * 70ms),0s}
.pl-v2 .pl-card.is-current{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 45%,transparent),var(--shadow-2)}
@media (hover:hover){.pl-v2 .pl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}
.pl-v2 .pl-flag{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;margin-block-end:-.2rem;padding:.16rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;
  color:var(--gold-text);background:color-mix(in srgb,var(--accent-a) 55%,transparent)}
.pl-v2 .pl-flag .i{inline-size:.8rem;block-size:.8rem;fill:currentColor}
.pl-v2 .pl-card__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.pl-v2 .pl-card__name{margin:0;font-family:var(--lt);font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
html[lang="ar"] .pl-v2 .pl-card__name{font-family:var(--ar);letter-spacing:0}
.pl-v2 .pl-card__tag{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-soft);min-block-size:2.6em}
.pl-v2 .pl-card__balance{margin:0;font-size:.9rem;font-weight:700}
.pl-v2 .pl-meter{block-size:.45rem}
.pl-v2 .pl-card__agent{margin:0;display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .65rem;border-radius:12px;font-size:.82rem;font-weight:600;line-height:1.45;
  background:color-mix(in srgb,#7488A8 12%,transparent);color:var(--ink)}
.pl-v2 .pl-card__agent .pl-ic{background:var(--g-agent);color:#fff}
.pl-v2 .pl-card__agent.is-locked{background:var(--sunken);color:var(--muted);font-weight:500}
.pl-v2 .pl-card__agent.is-locked .pl-ic{background:transparent;color:var(--muted)}
.pl-v2 .pl-card__list{gap:.45rem}
.pl-v2 .pl-cta{margin:auto 0 0;display:flex;align-items:center;justify-content:center;gap:.4rem;min-block-size:2.5rem;padding:.4rem .8rem;border-radius:var(--r,13px);
  font-size:.84rem;font-weight:700;background:var(--sunken);color:var(--muted);border:1px dashed var(--line)}
.pl-v2 .pl-cta .pl-ic{background:transparent;margin:0}
.pl-v2 .pl-cta.is-current{background:color-mix(in srgb,var(--ok) 14%,transparent);color:color-mix(in srgb,var(--ok) 75%,var(--ink));border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.pl-v2 .pl-cta.is-available{background:color-mix(in srgb,var(--accent-a) 38%,transparent);color:var(--gold-text);border:1px solid color-mix(in srgb,var(--accent-b) 45%,transparent)}
.pl-v2 .pl-note{text-align:center}

/* ─── compare ─── */
.pl-v2 .pl-compare{display:grid;gap:.75rem;min-inline-size:0}
.pl-v2 .pl-table-wrap{overflow-x:auto;border-radius:var(--r-lg,18px);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);max-inline-size:100%}
.pl-v2 .pl-table-wrap:focus-visible{outline:none;box-shadow:var(--ring)}
.pl-v2 .pl-table{inline-size:100%;min-inline-size:34rem;border-collapse:collapse;font-size:.86rem}
.pl-v2 .pl-table__cap{caption-side:bottom;padding:.6rem;font-size:.76rem;color:var(--muted)}
.pl-v2 .pl-table th,.pl-v2 .pl-table td{padding:.75rem .85rem;text-align:center;border-block-end:1px solid var(--line);vertical-align:middle}
.pl-v2 .pl-table thead th{background:var(--surface-2);font-weight:800;font-size:.9rem}
.pl-v2 .pl-table tbody th{text-align:start;font-weight:600;color:var(--ink-soft);position:sticky;inset-inline-start:0;background:var(--surface)}
.pl-v2 .pl-table .is-current{background:color-mix(in srgb,var(--ok) 9%,var(--surface));font-weight:700}
.pl-v2 .pl-table tbody tr:last-child th,.pl-v2 .pl-table tbody tr:last-child td{border-block-end:0}

/* ─── how it is counted ─── */
.pl-v2 .pl-how{display:grid;gap:.6rem}
.pl-v2 .pl-faq{border:1px solid var(--line);border-radius:var(--r-lg,18px);background:var(--surface);padding:0 1rem;transition:box-shadow var(--t)}
.pl-v2 .pl-faq[open]{box-shadow:var(--shadow-1)}
.pl-v2 .pl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 0;cursor:pointer;list-style:none;font-weight:700;font-size:.92rem}
.pl-v2 .pl-faq summary::-webkit-details-marker{display:none}
.pl-v2 .pl-faq summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.pl-v2 .pl-faq__chev{display:inline-grid;flex:none;transition:transform var(--t) var(--ios)}
.pl-v2 .pl-faq__chev .i{inline-size:1rem;block-size:1rem}
.pl-v2 .pl-faq[open] .pl-faq__chev{transform:rotate(180deg)}
.pl-v2 .pl-faq p{margin:0 0 .95rem;font-size:.88rem;line-height:1.75;color:var(--ink-soft)}

@keyframes pl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─── wider containers ─── */
@container plans (min-width:520px){
  .pl-v2 .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container plans (min-width:700px){
  .pl-v2 .pl-hero--v2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:1.8rem;gap:1.6rem}
}
@container plans (min-width:900px){
  .pl-v2 .pl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:420px){
  .pl-v2 .pl-hero--v2{padding:1.1rem;border-radius:20px}
  .pl-v2 .pl-card{padding:1.05rem .95rem .95rem;border-radius:18px}
  .pl-aw,.pl-ai{padding:.85rem .9rem}
}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .pl-v2 .pl-card,html:not(.force-motion) .pl-v2 .pl-card.is-featured{animation:none}
  html:not(.force-motion) .pl-aw__fill{transition:none}
}
html[data-theme="dark"] .pl-v2 .pl-hero--v2{background:linear-gradient(155deg,color-mix(in srgb,var(--accent-c) 22%,var(--surface)) 0%,var(--surface) 62%)}
html[data-theme="dark"] .pl-v2 .pl-card.p-plan-20::before{background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--accent-c) 45%,transparent),transparent 70%)}
html[data-theme="dark"] .pl-v2 .pl-card.p-plan-50::before{background:radial-gradient(90% 100% at 50% 0%,rgba(92,112,145,.5),transparent 70%)}
html[data-theme="dark"] .pl-v2 .pl-card.p-plan-100::before{background:radial-gradient(90% 100% at 50% 0%,rgba(168,112,92,.45),transparent 70%)}
html[data-theme="dark"] .pl-v2 .pl-card.is-featured{background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--gb,0deg),var(--accent-c),var(--accent-b),#56667F,var(--accent-a),var(--accent-c)) border-box}