/* =====================
    WIZARD/STEPPER UI - FINAL V2
   ===================== */
:root {
    --bg: #0D1117;
    --card: #161B22;
    --border: rgba(255, 255, 255, 0.1);
    --muted: rgba(255, 255, 255, 0.7);
    --text: #ffffff;
    --accent: #7c3aed;
    --accent-soft: #22d3ee;
    --ring: rgba(124, 58, 237, 0.35);
    --ok: #28a745;
    --err: #ef4444;
}
.flc-book {
    position: relative;
    padding: 24px;
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}
.flc-book *, .flc-book *::before, .flc-book *::after { box-sizing: border-box; }
.flc-book img { max-width: 100%; height: auto; display: block; }
.flc-book__wrap { max-width: 900px; margin: 0 auto; }

.flc-header { text-align: center; margin-bottom: 32px; }
.flc-header__title { font-size: clamp(24px, 4vw, 32px); margin: 0 0 8px; color: var(--text); }
.flc-header__desc { color: var(--muted); margin: 0; max-width: 450px; margin: 0 auto; line-height: 1.5; }

/* Progress Bar */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 12px var(--accent-soft); }
    50% { box-shadow: 0 0 24px var(--accent-soft); }
}
.flc-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; position: relative; }
.flc-progress__step { text-align: center; position: relative; z-index: 1; }
.flc-progress__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); color: var(--muted); display: grid; place-items: center; font-weight: bold; margin: 0 auto 8px; transition: all .3s ease; }
.flc-progress__label { font-size: 0.8rem; color: var(--muted); transition: color .3s ease; }
.flc-progress__line-bg, .flc-progress__line-fill { position: absolute; top: 15px; left: 0; right: 0; height: 6px; border-radius: 3px; margin: 0 50px; }
.flc-progress__line-bg { background: var(--bg); border: 1px solid var(--border); }
.flc-progress__line-fill { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); width: 0%; transition: width .4s ease-in-out; filter: blur(3px); animation: pulse-glow 3s infinite ease-in-out; }
.flc-progress__step.is-active .flc-progress__dot { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent); }
.flc-progress__step.is-active .flc-progress__label { color: var(--text); }
.flc-progress__step.is-complete .flc-progress__dot { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 0 12px var(--ok); }

/* Steps Container */
.flc-steps-container { position: relative; min-height: 480px; }
.flc-step { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; pointer-events: none; }
.flc-step.is-active { opacity: 1; visibility: visible; position: static; pointer-events: auto; }
.flc-step__title { text-align: center; font-size: clamp(20px, 3vw, 24px); margin: 0 0 24px; color: var(--text); }

/* Cards: Masters */
.flc-cards--masters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.flc-card--master { border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .2s ease; background: var(--bg); overflow: hidden; }
.flc-card--master:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.flc-card--master[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.flc-master__photo { width: 100%; height: 240px; }
.flc-master__photo img { width: 100%; height: 100%; object-fit: cover; }
.flc-master__meta { padding: 12px; }
.flc-card__title { font-weight: 600; color: var(--text); }
.flc-card__desc { color: var(--muted); font-size: 0.9rem; }

/* Cards: Services */
.flc-filter { margin-bottom: 16px; }
.flc-filter input[type="search"] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; color: var(--text); }
.flc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.flc-chip { border: 1px solid var(--border); background: transparent; padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: .92rem; color: var(--muted); }
.flc-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.flc-cards#serviceList { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.flc-card--service { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.flc-card--service .flc-card__photo { width: 100%; height: 180px; }
.flc-card--service .flc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.flc-card--service .flc-card__meta { padding: 12px; }
.flc-card--service .flc-card__foot { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.flc-card--service .flc-price { font-weight: bold; color: var(--text); }
.flc-card--service .flc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flc-btn--details, .flc-pick { border: none; border-radius: 8px; padding: 10px; cursor: pointer; font-weight: 600; }
.flc-btn--details { background: rgba(255,255,255,0.1); color: #fff; }
.flc-pick { background: var(--accent); color: #fff; }
.flc-pick.active { background: var(--ok); }

/* Date & Time */
.flc-datebar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 16px; }
.flc-datebar .nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: transparent; cursor: pointer; color: #fff; font-size: 20px; }
.flc-datebar .dates { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.flc-datebar .dates::-webkit-scrollbar { display: none; }
.flc-date { flex: 0 0 80px; scroll-snap-align: start; border: 1px solid var(--border); background: transparent; padding: 8px; border-radius: 8px; text-align: center; cursor: pointer; color: #fff; }
.flc-date .dow { font-size: .8rem; color: var(--muted); }
.flc-date .day { font-size: 18px; font-weight: bold; }
.flc-date[aria-selected="true"] { border-color: var(--accent); background: var(--accent); }
.flc-date[disabled] { opacity: .4; cursor: not-allowed; }
.flc-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.time { border: 1px solid var(--border); background: transparent; padding: 12px; border-radius: 8px; text-align: center; cursor: pointer; color: #fff; }
.time[aria-selected="true"] { background: var(--accent); border-color: var(--accent); }
.time:disabled { opacity: .4; cursor: not-allowed; }

/* Step 4: Final */
.flc-final-grid { display: grid; gap: 24px; }
@media(min-width: 768px) { .flc-final-grid { grid-template-columns: .8fr 1.2fr; } }
.sum-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.sum-title { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.sum-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.sum-line:last-of-type { border: none; }
.sum-line span { color: var(--muted); }
.sum-line b { font-weight: 600; text-align: right; color: var(--text); }
.sum-total b { font-size: 1.2rem; color: var(--accent-soft); }
.flc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 500px) { .flc-form .row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field span { margin-bottom: 4px; font-size: 0.9rem; color: var(--muted); }
.field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: #fff; }
.phone-field .phone-input-wrapper { position: relative; }
.phone-field .phone-flag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: auto; }
.phone-field input { padding-left: 42px; }
.err { color: var(--err); font-size: .8rem; min-height: 1em; margin-top: 4px; }
.agree { margin: 8px 0; }
.agree label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }

/* Navigation */
.flc-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
.flc-btn { border: none; border-radius: 8px; padding: 12px 24px; font-weight: 700; cursor: pointer; }
.flc-btn--primary { background: var(--accent); color: #fff; }
.flc-btn--ghost { background: transparent; border: 1px solid var(--border); color: #fff; }
#confirmBtn, #backBtn { display: none; }

/* Modal */
.flc-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.flc-modal.is-visible { opacity: 1; visibility: visible; }
.flc-modal__backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.flc-modal__content { position: relative; background: var(--card); border-radius: 12px; max-width: 500px; width: calc(100% - 32px); overflow: hidden; border: 1px solid var(--border); }
.flc-modal__close { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.flc-modal__img { width: 100%; height: 250px; object-fit: cover; }
.flc-modal__body { padding: 20px; }
.flc-modal__title { margin: 0 0 8px; font-size: 20px; color: var(--text); }
.flc-modal__desc { margin: 0; color: var(--muted); line-height: 1.6; }

/* Toast */
.flc-toast {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--accent); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 100; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease;}
.flc-toast.show { opacity: 1; visibility: visible; bottom: 30px; }