@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Wrapper ── */
.cab-booking-wrap {
    max-width: 780px;
    margin: 32px auto;
    font-family: 'Inter', sans-serif;
    color: #1e293b;
}

/* ── Step indicator ── */
.cab-steps {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 24px;
}
.cab-step { display:flex; align-items:center; gap:10px; opacity:.4; transition:opacity .3s; }
.cab-step--active { opacity:1; }
.cab-step__num {
    width:34px; height:34px; border-radius:50%;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff; font-weight:700; font-size:.9rem;
    display:flex; align-items:center; justify-content:center;
}
.cab-step__label { font-weight:600; font-size:.9rem; color:#374151; }
.cab-step-line   { flex:1; height:2px; background:#e2e8f0; margin:0 16px; }

/* ── Form Title ── */
.cab-form-title {
    font-size:1.35rem; font-weight:700; color:#1e293b;
    margin:0 0 22px; padding-bottom:12px;
    border-bottom:2px solid #f1f5f9;
}

/* ── Grid ── */
.cab-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.cab-field { display:flex; flex-direction:column; }
.cab-field--full { grid-column:1/-1; }
.cab-field label { font-size:.82rem; font-weight:600; color:#475569; margin-bottom:6px; }
.req { color:#ef4444; }
.cab-field input,
.cab-field select,
.cab-field textarea {
    padding:11px 14px;
    border:1.5px solid #e2e8f0;
    border-radius:10px;
    font-size:.95rem;
    font-family:inherit;
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
    outline:none;
}
.cab-field input:focus,
.cab-field select:focus,
.cab-field textarea:focus {
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.cab-field textarea { resize:vertical; }

/* Duration */
.cab-duration-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Time row */
.cab-time-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.cab-time-row select { text-align:center; font-weight:600; }

/* Next button */
.cab-btn {
    margin-top:24px;
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 30px;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff; border:none; border-radius:10px;
    font-size:.97rem; font-weight:700;
    cursor:pointer; transition:opacity .2s,transform .1s;
    font-family:inherit;
}
.cab-btn:hover  { opacity:.9; }
.cab-btn:active { transform:scale(.98); }
.cab-btn:disabled { opacity:.5; cursor:not-allowed; }
.cab-btn--outline {
    background:#fff; color:#6366f1;
    border:2px solid #6366f1;
}
.cab-btn--outline:hover { background:#f5f3ff; }
.cab-btn--pay {
    background:linear-gradient(135deg,#10b981,#059669);
}
.cab-step2-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* ── Summary card ── */
.cab-summary {
    background:linear-gradient(135deg,#f0f4ff,#faf5ff);
    border:1px solid #c7d2fe;
    border-radius:14px;
    padding:20px;
    margin-bottom:22px;
}
.cab-summary-grid { display:flex; flex-direction:column; gap:8px; }
.cab-summary-row  { display:grid; grid-template-columns:28px 100px 1fr; align-items:start; gap:6px; font-size:.88rem; }
.cab-sum-icon { font-size:1rem; }
.cab-sum-key  { font-weight:600; color:#64748b; }
.cab-sum-val  { color:#1e293b; }

/* Email block */
.cab-email-block { background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; padding:20px; margin-bottom:4px; }
.cab-email-block label { display:block; font-size:.83rem; font-weight:600; color:#475569; margin-bottom:7px; }
.cab-email-block input { width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:.95rem; outline:none; box-sizing:border-box; }
.cab-email-block input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.cab-email-block small { display:block; color:#94a3b8; font-size:.78rem; margin-top:6px; }

/* SweetAlert custom popup */
.cab-swal-popup { border-radius:18px !important; }

@media (max-width:580px) {
    .cab-form-grid { grid-template-columns:1fr; }
    .cab-duration-row { grid-template-columns:1fr 1fr; }
    .cab-time-row { grid-template-columns:1fr 1fr 1fr; }
    .cab-summary-row { grid-template-columns:24px 80px 1fr; }
}