/* ===== Souad Booking – Frontend Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

/* Direction-aware wrapper — dir attr set by PHP is_rtl() */
.souad-booking-wrap {
    font-family: 'Tajawal', sans-serif;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
    color: #2c2c2a;
    /* No hardcoded direction — inherits from dir="" attr on the element */
}

/* ===== STEP INDICATOR ===== */
.sb-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}
.sb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: .4;
    transition: opacity .3s;
}
.sb-step.active { opacity: 1; }
.sb-step.done   { opacity: .7; }
.sb-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #e8e3f8;
    color: #6b52c8;
    font-size: 14px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s, color .3s;
}
.sb-step.active .sb-step-num { background: #6b52c8; color: #fff; }
.sb-step-label { font-size: 12px; color: #888; white-space: nowrap; }
.sb-step-line {
    flex: 1;
    height: 2px;
    background: #e0d9f7;
    margin: 0 8px;
    min-width: 40px;
    margin-bottom: 20px;
}

/* ===== PANELS ===== */
.sb-panel { animation: sbFadeIn .35s ease; }
.sb-panel.hidden { display: none; }
@keyframes sbFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.sb-panel-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3d2f8f;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #f0ebff;
}
.sb-panel-title-sub {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    margin-inline-start: 8px;
}

/* ===== CALENDAR ===== */
.sb-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.sb-cal-title { font-size: 1rem; font-weight: 700; color: #3d2f8f; }
.sb-cal-nav {
    background: #f5f0ff;
    border: none;
    border-radius: 8px;
    width: 36px; height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #6b52c8;
    transition: background .2s;
}
.sb-cal-nav:hover { background: #e8dfff; }

.sb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: .75rem;
}
.sb-cal-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    padding: 6px 0;
}
.sb-cal-day {
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    border: 1.5px solid transparent;
}
.sb-cal-day.empty   { visibility: hidden; pointer-events: none; }
.sb-cal-day.past    { color: #ccc; cursor: not-allowed; background: transparent; }
.sb-cal-day.unavail { color: #ddd; cursor: not-allowed; background: #fafafa; }
.sb-cal-day.avail   { background: #f0faf3; color: #2a7a4a; border-color: #b8e6c8; cursor: pointer; }
.sb-cal-day.avail:hover { background: #d4f5e2; border-color: #5cba85; transform: scale(1.05); }
.sb-cal-day.avail.today { border-color: #6b52c8 !important; font-weight: 700; box-shadow: 0 0 0 2px #e8e3f8; }
.sb-cal-day.selected { background: #6b52c8 !important; color: #fff !important; border-color: #6b52c8 !important; font-weight: 700; }

.sb-cal-legend {
    display: flex; gap: 1rem; justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.sb-leg-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #888; }
.sb-leg-dot {
    width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid;
}
.sb-leg-dot.avail    { background: #f0faf3; border-color: #5cba85; }
.sb-leg-dot.unavail  { background: #fafafa; border-color: #ddd; }
.sb-leg-dot.selected { background: #6b52c8; border-color: #6b52c8; }
.sb-hint { font-size: 12px; color: #aaa; text-align: center; margin-top: .25rem; }

/* ===== PRICE BADGE ===== */
.sb-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff8e6;
    border: 1.5px solid #f5d87a;
    color: #7a5c00;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: .75rem;
}

/* ===== TIME SLOTS ===== */
.sb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 1.25rem;
}
.sb-slot {
    padding: 12px 8px;
    text-align: center;
    border: 1.5px solid #e0d9f7;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #4a3a99;
    background: #faf8ff;
    transition: all .2s;
}
.sb-slot:hover   { border-color: #6b52c8; background: #f0ebff; }
.sb-slot.selected{ background: #6b52c8; color: #fff; border-color: #6b52c8; }
.sb-slot.taken   { background: #f9f9f9; color: #ccc; border-color: #eee; cursor: not-allowed; text-decoration: line-through; }
.sb-slot-taken-label { font-size: 10px; display: block; color: #ccc; }

/* ===== BOOKING SUMMARY ===== */
.sb-booking-summary {
    background: #f5f0ff;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.sb-summary-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #3d2f8f; }

/* ===== FORM — direction-neutral using logical properties ===== */
.sb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.sb-field label { font-size: 13px; font-weight: 500; color: #555; }
.sb-field input,
.sb-field textarea,
.sb-field select {
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    color: #333;
    transition: border-color .2s;
    background: #fff;
    /* dir inherited from parent wrapper */
    width: 100%;
    box-sizing: border-box;
}
.sb-field input:focus,
.sb-field textarea:focus { outline: none; border-color: #6b52c8; }
.sb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sb-req { color: #e24b4a; }

.sb-session-types { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-session-type {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
}
.sb-session-type input { display: none; }
.sb-session-type.active,
.sb-session-type:has(input:checked) {
    border-color: #6b52c8;
    background: #f5f0ff;
    color: #4a3a99;
    font-weight: 600;
}
.sb-privacy-note {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin: .5rem 0 1rem;
}

/* ===== BUTTONS ===== */
.sb-form-actions { display: flex; justify-content: space-between; align-items: center; }
.sb-btn-submit {
    background: #6b52c8;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.sb-btn-submit:hover  { background: #5540a8; }
.sb-btn-submit:active { transform: scale(.97); }
.sb-btn-back {
    background: none; border: none; color: #6b52c8;
    font-family: 'Tajawal', sans-serif;
    font-size: 13px; cursor: pointer;
    text-decoration: underline;
}
.sb-slot-actions { display: flex; justify-content: flex-start; }

/* ===== MESSAGES ===== */
.sb-unavail-msg {
    text-align: center;
    color: #c0392b;
    background: #fff5f5;
    border: 1.5px solid #fcc;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    font-size: 14px;
    margin: .5rem 0 1rem;
    grid-column: 1 / -1;
}
.sb-error {
    background: #fff5f5;
    border: 1.5px solid #fcc;
    border-radius: 10px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    margin-top: 1rem;
    text-align: center;
}
.sb-error.hidden { display: none; }

/* ===== SUCCESS ===== */
.sb-success { text-align: center; padding: 2rem 1rem; }
.sb-success-icon {
    width: 64px; height: 64px;
    background: #d4f5e2;
    border-radius: 50%;
    font-size: 28px;
    color: #2a7a4a;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.sb-success h3 { font-size: 1.4rem; color: #2a7a4a; margin-bottom: .5rem; }
.sb-success p  { color: #666; margin-bottom: 1.25rem; }
.sb-success-details {
    background: #f5f0ff; border-radius: 10px;
    padding: 1rem; margin-bottom: 1.5rem;
    display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
}

/* ===== LOADING ===== */
.sb-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 1.5rem; color: #888; font-size: 14px;
}
.sb-loading.hidden { display: none; }
.sb-spinner {
    width: 20px; height: 20px;
    border: 2px solid #ddd;
    border-top-color: #6b52c8;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== RTL-specific tweaks ===== */
[dir="rtl"] .sb-btn-back::before { content: '→ '; }
[dir="ltr"] .sb-btn-back::before { content: '← '; }
[dir="rtl"] .sb-btn-back          { content: ''; }
[dir="rtl"] #sb-back-1::before,
[dir="rtl"] #sb-back-2::before    { content: '→ '; }
[dir="ltr"] #sb-back-1::before,
[dir="ltr"] #sb-back-2::before    { content: '← '; }

/* ===== RESPONSIVE ===== */
@media (max-width: 520px) {
    .sb-field-row { grid-template-columns: 1fr; }
    .sb-slots-grid { grid-template-columns: repeat(3, 1fr); }
    .sb-steps { gap: 0; }
    .sb-step-line { min-width: 20px; }
}