/* =====================================================================
   Package Builder — structure/spacing/typography from the design handoff
   (component-builder.html + builder.css), but COLORS, RADII, FONTS and
   EASING follow the plugin's active theme via --muevo-* tokens. On the
   "luxury" theme these tokens equal the handoff's warm-charcoal + gold, so
   it's pixel-identical there; on other themes it adapts (purple, green, …).
   Scoped under .wdc-pkgbuilder so nothing leaks.
   ===================================================================== */
.wdc-pkgbuilder{
  --wdc-bg-1:var(--muevo-surface); --wdc-bg-2:var(--muevo-surface-soft); --wdc-bg-3:var(--muevo-surface-2);
  --wdc-ink:var(--muevo-text); --wdc-ink-soft:var(--muevo-text-soft); --wdc-muted:var(--muevo-text-muted); --wdc-faint:var(--muevo-text-faint);
  --wdc-gold:var(--muevo-primary); --wdc-gold-soft:var(--muevo-primary-strong); --wdc-on-gold:var(--muevo-on-primary);
  --wdc-gold-line:var(--muevo-border-strong);
  --wdc-line:var(--muevo-border); --wdc-line-2:var(--muevo-border-soft);
  --wdc-r:var(--muevo-radius-md); --wdc-r-lg:var(--muevo-radius-lg);
  --wdc-ease:var(--muevo-ease);
  --wdc-serif:var(--muevo-font-display); --wdc-sans:var(--muevo-font); --wdc-mono:var(--muevo-font-mono);
  font-family:var(--wdc-sans); color:var(--wdc-ink); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wdc-pkgbuilder *{ box-sizing:border-box; }
.wdc-pkgbuilder svg{ width:18px; height:18px; }
.wdc-pkgbuilder .split{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(28px,4vw,52px); align-items:start; }
@media (max-width:820px){ .wdc-pkgbuilder .split{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); } }

/* ---------- buttons ---------- */
.wdc-pkgbuilder .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:1.02em 1.7em; border-radius:100px; font-family:var(--wdc-sans); font-weight:600; font-size:.92rem; letter-spacing:.01em; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .5s var(--wdc-ease), background .35s var(--wdc-ease), color .35s var(--wdc-ease), border-color .35s var(--wdc-ease), box-shadow .5s var(--wdc-ease); }
.wdc-pkgbuilder .btn .ar{ display:inline-flex; transition:transform .5s var(--wdc-ease); }
.wdc-pkgbuilder .btn:hover .ar{ transform:translateX(4px); }
.wdc-pkgbuilder .btn-gold{ background:var(--wdc-gold); color:var(--wdc-on-gold); box-shadow:0 16px 40px -18px color-mix(in srgb, var(--wdc-gold) 60%, transparent); }
.wdc-pkgbuilder .btn-gold:hover{ background:var(--wdc-gold-soft); transform:translateY(-2px); }
.wdc-pkgbuilder .btn-block{ width:100%; }

/* ---------- option pills (.opt) ---------- */
.wdc-pkgbuilder .opts{ display:flex; flex-wrap:wrap; gap:10px; }
.wdc-pkgbuilder .opt{ display:inline-flex; align-items:center; gap:10px; background:var(--wdc-bg-2); border:1px solid var(--wdc-line); border-radius:100px; padding:.62em 1.05em; color:var(--wdc-ink-soft); font-size:.9rem; font-weight:500; font-family:var(--wdc-sans); cursor:pointer; transition:border-color .3s var(--wdc-ease), background .3s var(--wdc-ease), color .3s var(--wdc-ease), transform .3s var(--wdc-ease); }
.wdc-pkgbuilder .opt .op{ font-family:var(--wdc-mono); font-size:.74rem; color:var(--wdc-faint); transition:color .3s; }
.wdc-pkgbuilder .opt .tick{ width:17px; height:17px; border-radius:50%; border:1px solid var(--wdc-line); display:grid; place-items:center; color:transparent; transition:.3s; }
.wdc-pkgbuilder .opt .tick svg{ width:11px; height:11px; }
.wdc-pkgbuilder .opt:hover{ border-color:var(--wdc-gold-line); color:var(--wdc-ink); transform:translateY(-1px); }
.wdc-pkgbuilder .opt.on{ border-color:var(--wdc-gold); background:color-mix(in srgb, var(--wdc-gold) 10%, transparent); color:var(--wdc-ink); }
.wdc-pkgbuilder .opt.on .op{ color:var(--wdc-gold-soft); }
.wdc-pkgbuilder .opt.on .tick{ background:var(--wdc-gold); border-color:var(--wdc-gold); color:var(--wdc-on-gold); }

/* ---------- summary (.builder-summary) ---------- */
.wdc-pkgbuilder .glass{ background:var(--muevo-glass); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2); border:1px solid var(--wdc-line); }
.wdc-pkgbuilder .builder-summary{ position:sticky; top:100px; border-radius:var(--wdc-r-lg); padding:28px; }
.wdc-pkgbuilder .builder-summary h4{ font-family:var(--wdc-serif); font-weight:500; font-size:1.2rem; letter-spacing:-.02em; margin:0; }
.wdc-pkgbuilder .bs-list{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:0; min-height:48px; }
.wdc-pkgbuilder .bs-list li{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--wdc-line-2); font-size:.9rem; color:var(--wdc-ink-soft); animation:wdcFadeDown .35s var(--wdc-ease); }
.wdc-pkgbuilder .bs-list li .x{ color:var(--wdc-gold); white-space:nowrap; font-family:var(--wdc-mono); font-size:.8rem; }
.wdc-pkgbuilder .bs-empty{ color:var(--wdc-faint); font-size:.9rem; padding:11px 0; }
.wdc-pkgbuilder .bs-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--wdc-muted); padding:5px 0; }
.wdc-pkgbuilder .bs-row.save{ color:var(--wdc-gold-soft); }
.wdc-pkgbuilder .bs-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:14px; padding-top:16px; border-top:1px solid var(--wdc-line); }
.wdc-pkgbuilder .bs-total .lbl{ font-family:var(--wdc-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--wdc-muted); }
.wdc-pkgbuilder .bs-total .amt{ font-family:var(--wdc-serif); font-size:2.1rem; font-weight:300; letter-spacing:-.02em; }
.wdc-pkgbuilder .bs-total .amt small{ font-family:var(--wdc-sans); font-size:.85rem; color:var(--wdc-muted); }
.wdc-pkgbuilder .bs-note{ font-family:var(--wdc-mono); font-size:.68rem; letter-spacing:.04em; color:var(--wdc-faint); margin-top:16px; line-height:1.7; text-align:center; }

/* ---------- accordion category bars (.bld-*) ---------- */
.wdc-pkgbuilder .bld-cat{ border:1px solid var(--wdc-line); border-radius:var(--wdc-r); margin-bottom:12px; overflow:hidden; background:var(--wdc-bg-1); transition:border-color .3s var(--wdc-ease); }
.wdc-pkgbuilder .bld-cat.open{ border-color:var(--wdc-gold-line); }
.wdc-pkgbuilder .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(--wdc-ink); text-align:start; font-family:var(--wdc-sans); transition:background .3s var(--wdc-ease); }
.wdc-pkgbuilder .bld-head:hover{ background:color-mix(in srgb, var(--wdc-gold) 4%, transparent); }
.wdc-pkgbuilder .bld-h-l{ display:flex; align-items:center; gap:14px; min-width:0; }
.wdc-pkgbuilder .bld-h-r{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.wdc-pkgbuilder .bld-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--wdc-gold); border:1px solid var(--wdc-gold-line); background:color-mix(in srgb, var(--wdc-gold) 5%, transparent); flex-shrink:0; }
.wdc-pkgbuilder .bld-ic svg{ width:21px; height:21px; }
.wdc-pkgbuilder .bld-head b{ font-family:var(--wdc-serif); font-weight:500; font-size:1.1rem; display:block; line-height:1.2; }
.wdc-pkgbuilder .bld-sub{ font-family:var(--wdc-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--wdc-muted); margin-top:4px; display:block; }
.wdc-pkgbuilder .bld-count{ font-family:var(--wdc-mono); font-size:.66rem; letter-spacing:.06em; color:var(--wdc-gold); border:1px solid var(--wdc-gold-line); background:color-mix(in srgb, var(--wdc-gold) 6%, transparent); border-radius:100px; padding:.3em .8em; display:none; white-space:nowrap; }
.wdc-pkgbuilder .bld-count.show{ display:inline-block; }
.wdc-pkgbuilder .bld-chev{ width:34px; height:34px; border-radius:50%; border:1px solid var(--wdc-line); display:grid; place-items:center; color:var(--wdc-gold); transition:transform .4s var(--wdc-ease), background .3s var(--wdc-ease); }
.wdc-pkgbuilder .bld-chev svg{ width:16px; height:16px; }
.wdc-pkgbuilder .bld-cat.open .bld-chev{ transform:rotate(180deg); background:color-mix(in srgb, var(--wdc-gold) 8%, transparent); border-color:var(--wdc-gold-line); }
.wdc-pkgbuilder .bld-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--wdc-ease); }
.wdc-pkgbuilder .bld-cat.open .bld-panel{ grid-template-rows:1fr; }
.wdc-pkgbuilder .bld-panel > div{ overflow:hidden; min-height:0; }
.wdc-pkgbuilder .bld-panel .opts{ padding:2px 20px 20px; }
/* When a category holds many services, cap the open list to ~4 rows and scroll the
   rest. The scrollbar only appears once the list is taller than the cap (overflow:auto). */
.wdc-pkgbuilder .bld-panel .opts{ max-height:200px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--wdc-gold-line) transparent; }
.wdc-pkgbuilder .bld-panel .opts::-webkit-scrollbar{ width:8px; }
.wdc-pkgbuilder .bld-panel .opts::-webkit-scrollbar-thumb{ background:var(--wdc-gold-line); border-radius:100px; }
.wdc-pkgbuilder .bld-panel .opts::-webkit-scrollbar-track{ background:transparent; }

@keyframes wdcFadeDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- Arabic / RTL (fonts swap to Tajawal/Cairo; prices stay LTR) ---------- */
[dir="rtl"] .wdc-pkgbuilder{ --wdc-serif:'Cairo', var(--muevo-font-display); --wdc-sans:'Tajawal', var(--muevo-font); }
[dir="rtl"] .wdc-pkgbuilder .bld-sub, [dir="rtl"] .wdc-pkgbuilder .bld-count, [dir="rtl"] .wdc-pkgbuilder .bs-total .lbl, [dir="rtl"] .wdc-pkgbuilder .opt .op{ font-family:'Tajawal', var(--muevo-font-mono); letter-spacing:0; }
[dir="rtl"] .wdc-pkgbuilder .x, [dir="rtl"] .wdc-pkgbuilder .op, [dir="rtl"] .wdc-pkgbuilder .amt{ direction:ltr; unicode-bidi:embed; }
/* RTL: mirror the forward arrow so it points the right way in Arabic. */
[dir="rtl"] .wdc-pkgbuilder .btn .ar{ transform:scaleX(-1); }
[dir="rtl"] .wdc-pkgbuilder .btn:hover .ar{ transform:scaleX(-1) translateX(4px); }