/* =====================================================================
   Wellness Dream Center — package builder styles
   The .opt option pills, the sticky .builder-summary, and the
   .bld-* category accordion. Built on site.css tokens.
   Used by packages.html and the isolated component-builder.html.
   ===================================================================== */

.builder-group{ margin-bottom:26px; }
.builder-group h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0 0 14px; }
.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{ display:inline-flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:100px; padding:.62em 1.05em; color:var(--ink-soft); font-size:.9rem; font-weight:500; transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.opt .op{ font-family:var(--mono); font-size:.74rem; color:var(--faint); transition:color .3s; }
.opt .tick{ width:17px; height:17px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:transparent; transition:.3s; }
.opt .tick svg{ width:11px; height:11px; }
.opt:hover{ border-color:var(--gold-line); color:#fff; transform:translateY(-1px); }
.opt.on{ border-color:var(--gold); background:rgba(201,162,78,.1); color:#fff; }
.opt.on .op{ color:var(--gold-soft); }
.opt.on .tick{ background:var(--gold); border-color:var(--gold); color:#1a1306; }

.builder-summary{ position:sticky; top:100px; border-radius:var(--r-lg); padding:28px; }
.bs-list{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:0; min-height:48px; }
.bs-list li{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:.9rem; color:var(--ink-soft); animation:fadeDown .35s var(--ease); }
.bs-list li .x{ color:var(--gold); white-space:nowrap; font-family:var(--mono); font-size:.8rem; }
.bs-empty{ color:var(--faint); font-size:.9rem; padding:11px 0; }
.bs-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--muted); padding:5px 0; }
.bs-row.save{ color:var(--gold-soft); }
.bs-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:14px; padding-top:16px; border-top:1px solid var(--line); }
.bs-total .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.bs-total .amt{ font-family:var(--serif); font-size:2.1rem; font-weight:300; letter-spacing:-.02em; }
.bs-total .amt small{ font-family:var(--sans); font-size:.85rem; color:var(--muted); }
[data-lang="ar"] .builder-group h4, [data-lang="ar"] .bs-total .lbl, [data-lang="ar"] .opt .op{ font-family:'Tajawal', var(--mono); letter-spacing:0; }
@media (max-width:820px){ .builder-summary{ position:static; } }

/* accordion category bars */
.bld-cat{ border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; overflow:hidden; background:var(--bg-1); transition:border-color .3s var(--ease); }
.bld-cat.open{ border-color:var(--gold-line); }
.bld-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:17px 20px; background:none; border:0; cursor:pointer; color:var(--ink); text-align:start; transition:background .3s var(--ease); }
.bld-head:hover{ background:rgba(201,162,78,.04); }
.bld-head .bld-h-l{ display:flex; align-items:center; gap:14px; min-width:0; }
.bld-head .bld-h-r{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.bld-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--gold); border:1px solid var(--gold-line); background:rgba(201,162,78,.05); flex-shrink:0; }
.bld-ic svg{ width:21px; height:21px; }
.bld-head b{ font-family:var(--serif); font-weight:500; font-size:1.1rem; display:block; line-height:1.2; }
.bld-sub{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; display:block; }
.bld-count{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--gold); border:1px solid var(--gold-line); background:rgba(201,162,78,.06); border-radius:100px; padding:.3em .8em; display:none; white-space:nowrap; }
.bld-count.show{ display:inline-block; }
.bld-chev{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); transition:transform .4s var(--ease), background .3s var(--ease); }
.bld-chev svg{ width:16px; height:16px; }
.bld-cat.open .bld-chev{ transform:rotate(180deg); background:rgba(201,162,78,.08); border-color:var(--gold-line); }
.bld-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }
.bld-cat.open .bld-panel{ grid-template-rows:1fr; }
.bld-panel > div{ overflow:hidden; min-height:0; }
.bld-panel .opts{ padding:2px 20px 20px; }
[data-lang="ar"] .bld-sub, [data-lang="ar"] .bld-count{ font-family:'Tajawal', var(--mono); letter-spacing:0; }