/* ── Book Call Wizard (bcw) ── */
:root {
  --bcw-bg: #F0EEFA;
  --bcw-s: #FFF;
  --bcw-s2: #FAFAFE;
  --bcw-s3: #F3F2FA;
  --bcw-b: #ECEAF6;
  --bcw-b2: #DDD9EE;
  --bcw-t1: #12112A;
  --bcw-t2: #4E4C6A;
  --bcw-t3: #6B6987;
  --bcw-t4: #9896AE;
  --bcw-p: #6D4AE8;
  --bcw-p2: #8B6FF0;
  --bcw-p3: #A78BFA;
  --bcw-pl: #F0EDFF;
  --bcw-pb: rgba(109,74,232,.14);
  --bcw-g: #059669;
  --bcw-gl: #ECFDF5;
  --bcw-gb: rgba(5,150,105,.18);
  --bcw-a: #D97706;
  --bcw-al: #FFFBEB;
  --bcw-e: cubic-bezier(.22,1,.36,1);
}

.bcw-dialog { max-width: 28rem; }
.bcw { border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--bcw-b); box-shadow: 0 2px 24px rgba(0,0,0,.06); font-family: 'Outfit',system-ui,-apple-system,sans-serif; }

/* ── Header ── */
.bcw-head { padding: 1.15rem 1.5rem .85rem; border-bottom: 1px solid var(--bcw-b); background: var(--bcw-s); }
.bcw-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.bcw-ico { width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--bcw-pl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bcw-ico svg { width: 1rem; height: 1rem; color: var(--bcw-p); }
.bcw-title { flex: 1; font-size: 1.15rem; font-weight: 800; color: var(--bcw-t1); letter-spacing: -.02em; }
.bcw-close { width: 2rem; height: 2rem; border-radius: .55rem; border: 1px solid var(--bcw-b); background: var(--bcw-s); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bcw-t4); transition: all .12s; }
.bcw-close:hover { background: var(--bcw-s3); color: var(--bcw-t2); }
.bcw-close svg { width: .65rem; height: .65rem; }

/* Progress bars */
.bcw-progress { display: flex; gap: .35rem; transition: opacity .2s; }
.bcw-bar { flex: 1; height: .35rem; border-radius: 1rem; background: var(--bcw-b2); overflow: hidden; }
.bcw-bar .fill { height: 100%; border-radius: 1rem; width: 0; transition: width .4s var(--bcw-e); }
.bcw-bar.done .fill { width: 100%; background: var(--bcw-p); }
.bcw-bar.active .fill { width: 100%; background: var(--bcw-p3); }

/* Step labels */
.bcw-labels { display: flex; margin-top: .5rem; transition: opacity .2s; }
.bcw-lbl { flex: 1; font-size: .7rem; font-weight: 600; color: var(--bcw-t4); text-align: center; transition: color .2s; }
.bcw-lbl.done { color: var(--bcw-p); }
.bcw-lbl.active { color: var(--bcw-t2); }

/* ── Body ── */
.bcw-body { position: relative; overflow: hidden; background: var(--bcw-s); }
.bcw-step { display: none; padding: 1.5rem; animation: bcwFadeIn .3s var(--bcw-e) both; }
.bcw-step.active { display: block; }
@keyframes bcwFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Step header */
.bcw-st-head { margin-bottom: 1.15rem; }
.bcw-st-num { font-size: .7rem; font-weight: 700; color: var(--bcw-p); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.bcw-st-title { font-size: 1.2rem; font-weight: 800; color: var(--bcw-t1); letter-spacing: -.02em; }

/* ── Intro (Step 0) ── */
.bcw-intro { display: none; padding: 1.5rem; animation: bcwFadeIn .3s var(--bcw-e) both; }
.bcw-intro.active { display: block; }

/* Cover with overlay */
.bcw-intro-cover { width: 100%; aspect-ratio: 16/7; border-radius: .85rem; overflow: hidden; margin-bottom: .85rem; position: relative; background: linear-gradient(135deg, #E8DEF8 0%, #F0EDFF 40%, #ECFDF5 100%); }
.bcw-intro-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,17,42,.6) 0%, transparent 50%); border-radius: .85rem; pointer-events: none; }
.bcw-intro-cover.has-cover { background: none; }
.bcw-intro-cover.has-cover > img.bcw-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcw-cover-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: .7rem .85rem; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.bcw-co-creator { display: flex; align-items: center; gap: .5rem; }
img.bcw-co-av { width: 3.7rem !important; height: 3.7rem !important; min-width: 3.7rem; max-width: 3.7rem; min-height: 3.7rem; max-height: 3.7rem; border-radius: .5rem; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.45); box-shadow: 0 1px 4px rgba(0,0,0,.2); display: block; }
.bcw-co-name { display: flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 700; color: #fff; }
.bcw-co-badge { width: 1rem; height: 1rem; flex-shrink: 0; }
.bcw-co-handle { font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.6); }
.bcw-co-pills { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.bcw-co-pill { padding: .2rem .6rem; border-radius: 100px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: .68rem; font-weight: 600; color: #fff; white-space: nowrap; }
.bcw-co-pill strong { font-weight: 800; }

/* Title & desc */
.bcw-intro-title { font-size: 1.12rem; font-weight: 800; color: var(--bcw-t1); letter-spacing: -.03em; line-height: 1.2; }
.bcw-intro-desc { font-size: .82rem; font-weight: 500; color: var(--bcw-t3); margin-top: .3rem; line-height: 1.6; max-height: 3.8rem; overflow: hidden; transition: max-height .3s ease; }
.bcw-intro-desc.expanded { max-height: none; }

/* Show more button */
.bcw-show-more { border: none; background: none; font-family: 'Outfit',system-ui,-apple-system,sans-serif; font-size: .75rem; font-weight: 600; color: var(--bcw-p); cursor: pointer; display: flex; align-items: center; gap: .2rem; padding: 0; margin-top: .15rem; }
.bcw-show-more svg { width: .75rem; height: .75rem; transition: transform .2s; }
.bcw-show-more.open svg { transform: rotate(180deg); }

/* Features checklist */
.bcw-intro-features { margin-top: .75rem; display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.bcw-intro-feat { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--bcw-t2); }
.bcw-intro-feat svg { width: .95rem; height: .95rem; color: var(--bcw-g); flex-shrink: 0; }

/* How-it-works toggle */
.bcw-hiw-toggle { display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; background: var(--bcw-s2); border: 1px solid var(--bcw-b); border-radius: .7rem; cursor: pointer; transition: all .15s; font-size: .82rem; font-weight: 600; color: var(--bcw-t2); margin-top: .75rem; }
.bcw-hiw-toggle:hover { border-color: var(--bcw-b2); background: var(--bcw-s); }
.bcw-hiw-toggle svg:first-child { width: 1rem; height: 1rem; color: var(--bcw-p); flex-shrink: 0; }
.bcw-hiw-toggle span { flex: 1; }
.bcw-hiw-chev { width: .85rem; height: .85rem; color: var(--bcw-t4); transition: transform .2s; flex-shrink: 0; }
.bcw-hiw-toggle.open .bcw-hiw-chev { transform: rotate(180deg); }

/* How-it-works panel */
.bcw-hiw-panel { display: none; padding-top: .6rem; animation: bcwFadeIn .3s var(--bcw-e) both; }
.bcw-hiw-panel.open { display: flex; flex-direction: column; gap: .4rem; }
.bcw-hiw-item { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; }
.bcw-hiw-num { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.bcw-hiw-text { font-size: .78rem; color: var(--bcw-t4); line-height: 1.5; }
.bcw-hiw-text strong { color: var(--bcw-t1); font-weight: 600; }

/* ── Step 1: Call Type Cards ── */
.bcw-ct { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border: 1.5px solid var(--bcw-b); border-radius: .85rem; cursor: pointer; transition: all .15s; margin-bottom: .5rem; }
.bcw-ct:last-child { margin-bottom: 0; }
.bcw-ct:hover { border-color: var(--bcw-b2); background: var(--bcw-s2); }
.bcw-ct.on { border-color: var(--bcw-p); background: var(--bcw-pl); }
.bcw-ct-ico { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bcw-ct-ico svg { width: 1.3rem; height: 1.3rem; }
.bcw-ct.on .bcw-ct-ico { background: var(--bcw-p); color: #fff; }
.bcw-ct:not(.on) .bcw-ct-ico { background: var(--bcw-s3); color: var(--bcw-t3); }
.bcw-ct-info { flex: 1; }
.bcw-ct-name { font-size: 1rem; font-weight: 700; color: var(--bcw-t1); }
.bcw-ct.on .bcw-ct-name { color: var(--bcw-p); }
.bcw-ct-detail { font-size: .75rem; font-weight: 500; color: var(--bcw-t4); margin-top: .1rem; }
.bcw-ct-price { padding: .35rem .75rem; border-radius: .45rem; font-size: .9rem; font-weight: 800; flex-shrink: 0; }
.bcw-ct.on .bcw-ct-price { background: rgba(109,74,232,.1); color: var(--bcw-p); }
.bcw-ct:not(.on) .bcw-ct-price { background: var(--bcw-s3); color: var(--bcw-t3); }

/* ── Step 2: Calendar ── */
.bcw-cal-nav { display: flex; align-items: center; margin-bottom: .85rem; }
.bcw-month { flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--bcw-t1); text-align: center; text-transform: capitalize; }
.bcw-cal-nav button { width: 2rem; height: 2rem; border-radius: .55rem; border: 1px solid var(--bcw-b); background: var(--bcw-s); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bcw-t3); transition: all .12s; }
.bcw-cal-nav button:hover { background: var(--bcw-s3); color: var(--bcw-t1); }
.bcw-cal-nav button svg { width: .65rem; height: .65rem; }

.bcw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.bcw-cal-hd { font-size: .7rem; font-weight: 700; color: var(--bcw-t4); text-align: center; padding: .4rem 0; text-transform: uppercase; }
.bcw-cal-d { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: .6rem; font-size: .92rem; font-weight: 600; color: var(--bcw-t1); cursor: pointer; transition: all .15s; position: relative; background: var(--bcw-s2); border: 1.5px solid var(--bcw-b); }
.bcw-cal-d:hover:not(.off) { background: var(--bcw-s); border-color: var(--bcw-b2); box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.bcw-cal-d.off { color: var(--bcw-t4); pointer-events: none; opacity: .3; background: none; border-color: transparent; }
.bcw-cal-d.has { border-color: var(--bcw-gb); background: var(--bcw-gl); }
.bcw-cal-d.has:hover { background: #D1FAE5; border-color: var(--bcw-g); box-shadow: 0 2px 8px rgba(5,150,105,.1); }
.bcw-cal-d.sel { background: var(--bcw-p); color: #fff; font-weight: 700; border-color: var(--bcw-p); box-shadow: 0 3px 10px rgba(109,74,232,.2); }
.bcw-cal-d.sel:hover { background: var(--bcw-p2); border-color: var(--bcw-p2); }
.bcw-cal-d .avail { position: absolute; bottom: .3rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--bcw-g); }
.bcw-cal-d.sel .avail { background: rgba(255,255,255,.5); }

.bcw-cal-legend { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bcw-b); }
.bcw-cal-leg { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--bcw-t3); }
.bcw-dot-g { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bcw-g); display: inline-block; vertical-align: middle; }
.bcw-dot-p { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bcw-p); display: inline-block; vertical-align: middle; }

/* ── Step 3: Time Slots ── */
.bcw-slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.bcw-slots-date { display: flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: .45rem; background: var(--bcw-pl); font-size: .85rem; font-weight: 600; color: var(--bcw-p); }
.bcw-slots-date svg { width: .75rem; height: .75rem; }
.bcw-slots-count { font-size: .75rem; font-weight: 600; color: var(--bcw-t4); }
.bcw-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.bcw-slot { padding: .7rem .4rem; border: 1.5px solid var(--bcw-b); border-radius: .65rem; text-align: center; cursor: pointer; transition: all .12s; }
.bcw-slot:hover:not(.gone) { border-color: var(--bcw-pb); background: var(--bcw-pl); }
.bcw-slot.on { border-color: var(--bcw-p); background: var(--bcw-p); }
.bcw-slot .time { font-size: .95rem; font-weight: 700; color: var(--bcw-t1); }
.bcw-slot.on .time { color: #fff; }
.bcw-slot .dur { font-size: .65rem; font-weight: 600; color: var(--bcw-t4); margin-top: .05rem; }
.bcw-slot.on .dur { color: rgba(255,255,255,.6); }
.bcw-slot.gone { opacity: .3; pointer-events: none; }
.bcw-slot.gone .time { text-decoration: line-through; }
.bcw-no-slots { text-align: center; padding: 2rem 1rem; color: var(--bcw-t3); font-size: .9rem; }

/* ── Step 4: Confirm ── */
.bcw-conf-card { border: 1.5px solid var(--bcw-b); border-radius: .85rem; overflow: hidden; margin-bottom: 1rem; }
.bcw-conf-row { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
.bcw-conf-row + .bcw-conf-row { border-top: 1px solid var(--bcw-b); }
.bcw-conf-label { font-size: .85rem; font-weight: 500; color: var(--bcw-t3); display: flex; align-items: center; gap: .3rem; }
.bcw-conf-label svg { width: .75rem; height: .75rem; }
.bcw-conf-val { font-size: .95rem; font-weight: 700; color: var(--bcw-t1); }
.bcw-conf-row.bcw-conf-total { background: var(--bcw-pl); }
.bcw-conf-row.bcw-conf-total .bcw-conf-label { font-weight: 700; color: var(--bcw-p); }
.bcw-conf-row.bcw-conf-total .bcw-conf-val { font-size: 1.15rem; font-weight: 800; color: var(--bcw-p); }

.bcw-conf-tip { display: flex; align-items: flex-start; gap: .4rem; padding: .65rem .85rem; border-radius: .6rem; background: var(--bcw-gl); border: 1px solid var(--bcw-gb); font-size: .78rem; font-weight: 500; color: #065F46; line-height: 1.45; }
.bcw-conf-tip svg { width: .85rem; height: .85rem; color: var(--bcw-g); flex-shrink: 0; margin-top: .1rem; }

/* ── Footer ── */
.bcw-foot { display: flex; align-items: center; gap: .4rem; padding: 1rem 1.5rem; border-top: 1px solid var(--bcw-b); background: var(--bcw-s2); }
.bcw-back { padding: .6rem 1rem; border: 1.5px solid var(--bcw-b); border-radius: .6rem; background: var(--bcw-s); font-family: 'Outfit',system-ui,-apple-system,sans-serif; font-size: .85rem; font-weight: 600; color: var(--bcw-t3); cursor: pointer; display: flex; align-items: center; gap: .3rem; transition: all .12s; }
.bcw-back:hover { border-color: var(--bcw-b2); color: var(--bcw-t2); }
.bcw-back svg { width: .6rem; height: .6rem; }
.bcw-hidden { visibility: hidden; }
.bcw-spacer { flex: 1; }
.bcw-chip { display: flex; align-items: center; gap: .25rem; padding: .35rem .65rem; border-radius: .4rem; background: var(--bcw-pl); font-size: .7rem; font-weight: 600; color: var(--bcw-p); }
.bcw-chip svg { width: .55rem; height: .55rem; }
.bcw-next { padding: .6rem 1.35rem; border: none; border-radius: .6rem; background: var(--bcw-p); color: #fff; font-family: 'Outfit',system-ui,-apple-system,sans-serif; font-size: .85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .35rem; box-shadow: 0 2px 8px rgba(109,74,232,.2); transition: all .15s var(--bcw-e); }
.bcw-next:hover { background: var(--bcw-p2); transform: translateY(-1px); }
.bcw-next:active { transform: translateY(0); }
.bcw-next svg { width: .65rem; height: .65rem; }
.bcw-next.pay { padding: .6rem 1.5rem; }
.bcw-next:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .bcw-step, .bcw-intro { padding: 1.15rem; }
  .bcw-slot-grid { grid-template-columns: repeat(2, 1fr); }
  .bcw-head { padding: 1rem 1.15rem .75rem; }
  .bcw-foot { padding: .85rem 1.15rem; }
  .bcw-co-pills { gap: .2rem; }
  .bcw-co-pill { font-size: .6rem; padding: .15rem .45rem; }
}