/* =============================================================================
   Ride Booking System — booking-form.css
   ============================================================================= */

:root {
    --rbs-primary:      #1a1a2e;
    --rbs-accent:       #945EAA;
    --rbs-light:        #f8f9fa;
    --rbs-border:       #dee2e6;
    --rbs-text:         #333;
    --rbs-muted:        #6c757d;
    --rbs-success:      #28a745;
    --rbs-warning-bg:   #fff3cd;
    --rbs-warning-text: #856404;
    --rbs-error-bg:     #f8d7da;
    --rbs-error-text:   #721c24;
    --rbs-info-bg:      #d1ecf1;
    --rbs-info-text:    #0c5460;
    --rbs-radius:       8px;
    --rbs-shadow:       0 4px 20px rgba(0,0,0,.08);
}

/* Wrapper */
.rbs-wrap {
    max-width: 680px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--rbs-text);
}

/* Progress bar */
.rbs-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
    position: relative;
}
.rbs-progress::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0; right: 0;
    height: 2px;
    background: var(--rbs-border);
    z-index: 0;
}
.rbs-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
}
.rbs-progress__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--rbs-border);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    transition: background .3s;
}
.rbs-progress__label {
    font-size: 11px; color: var(--rbs-muted);
    margin-top: 6px; text-align: center;
}
.rbs-progress__step.is-active  .rbs-progress__num { background: var(--rbs-accent); }
.rbs-progress__step.is-done    .rbs-progress__num { background: var(--rbs-success); }

/* Step panels */
.rbs-step { animation: rbsFadeIn .3s ease; }
@keyframes rbsFadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }

.rbs-step__title { font-size: 22px; font-weight: 700; margin: 0 0 24px; color: var(--rbs-primary); }

/* Fields */
.rbs-field { margin-bottom: 20px; }
.rbs-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.rbs-field input[type="text"],
.rbs-field input[type="email"],
.rbs-field input[type="tel"],
.rbs-field input[type="number"],
.rbs-field input[type="date"],
.rbs-field select {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--rbs-border);
    border-radius: var(--rbs-radius);
    font-size: 15px;
    color: var(--rbs-text);
    background: #fff;
    transition: border-color .2s;
}
.rbs-field input:focus,
.rbs-field select:focus { outline: none; border-color: var(--rbs-accent); }
.rbs-field input.rbs-error { border-color: var(--rbs-accent); }
.rbs-field .rbs-hint { font-size: 12px; color: var(--rbs-muted); margin: 4px 0 0; }
.required { color: var(--rbs-accent); }
.optional { color: var(--rbs-muted); font-weight: 400; font-size: 12px; }

/* Checkbox field */
.rbs-field--checkbox label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 400; }
.rbs-field--checkbox input { width: auto; margin: 0; }

/* Toggle group */
.rbs-toggle-group { display: flex; gap: 12px; }
.rbs-toggle { cursor: pointer; }
.rbs-toggle input { display: none; }
.rbs-toggle span {
    display: inline-block;
    padding: 10px 28px;
    border: 1.5px solid var(--rbs-border);
    border-radius: 40px;
    font-size: 14px; font-weight: 600;
    transition: all .2s;
    user-select: none;
}
.rbs-toggle input:checked + span {
    background: var(--rbs-primary);
    color: #fff;
    border-color: var(--rbs-primary);
}

/* Notices */
.rbs-notice {
    padding: 12px 16px;
    border-radius: var(--rbs-radius);
    font-size: 14px;
    margin-top: 12px;
}
.rbs-notice--warning { background: var(--rbs-warning-bg); color: var(--rbs-warning-text); border: 1px solid #ffc107; }
.rbs-notice--info    { background: var(--rbs-info-bg);    color: var(--rbs-info-text);    border: 1px solid #bee5eb; }
.rbs-notice--error   { background: var(--rbs-error-bg);   color: var(--rbs-error-text);   border: 1px solid #f5c6cb; }
.rbs-notice--rules   { background: var(--rbs-light);      color: var(--rbs-text);         border: 1px solid var(--rbs-border); }
.rbs-notice--rules ul { margin: 8px 0 0 20px; padding: 0; }
.rbs-notice--rules li { margin-bottom: 4px; }
.rbs-notice--contact { text-align: center; padding: 24px; }
.rbs-notice--contact strong { display: block; font-size: 18px; margin-bottom: 8px; color: var(--rbs-accent); }
.rbs-notice--contact a { color: var(--rbs-primary); font-weight: 600; }

/* Summary card */
.rbs-summary-card {
    background: var(--rbs-light);
    border: 1px solid var(--rbs-border);
    border-radius: var(--rbs-radius);
    overflow: hidden;
}
.rbs-summary-section { padding: 20px 24px; border-bottom: 1px solid var(--rbs-border); }
.rbs-summary-section:last-child { border-bottom: none; }
.rbs-summary-section h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--rbs-muted); }
.rbs-summary-section dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.rbs-summary-section dt { font-weight: 600; font-size: 13px; color: var(--rbs-muted); }
.rbs-summary-section dd { margin: 0; font-size: 14px; }

.rbs-summary-section--price { background: var(--rbs-primary); color: #fff; }
.rbs-summary-section--price h3 { color: rgba(255,255,255,.6); }
.rbs-summary-section--price .rbs-price-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.rbs-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.rbs-total span { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.rbs-total strong { font-size: 28px; }

/* Payment */
.rbs-payment-total { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--rbs-primary); }
.rbs-payment-total strong { color: var(--rbs-accent); }
.rbs-stripe-element {
    padding: 14px;
    border: 1.5px solid var(--rbs-border);
    border-radius: var(--rbs-radius);
    background: #fff;
    min-height: fit-content;
}
.rbs-stripe-element.StripeElement--focus { border-color: var(--rbs-accent); }

/* Navigation buttons */
.rbs-nav { display: flex; justify-content: space-between; margin-top: 32px; gap: 12px; }
.rbs-btn {
    padding: 14px 32px;
    border: none; border-radius: 40px;
    font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all .2s;
}
.rbs-btn--primary  { background: var(--rbs-accent);   color: #fff; }
.rbs-btn--secondary{ background: var(--rbs-border);    color: var(--rbs-text); }
.rbs-btn--pay      { width: 100%; margin-top: 12px; font-size: 17px; padding: 16px; }
.rbs-btn:hover     { opacity: .88; transform: translateY(-1px); }
.rbs-btn:disabled  { opacity: .55; cursor: not-allowed; transform: none; }

/* Success screen */
.rbs-success { text-align: center; padding: 48px 32px; }
.rbs-success__icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--rbs-success);
    color: #fff; font-size: 36px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
}
.rbs-success h2 { font-size: 26px; margin-bottom: 8px; color: var(--rbs-primary); }
.rbs-success__ref {
    font-size: 28px; font-weight: 700;
    color: var(--rbs-accent);
    padding: 16px;
    background: var(--rbs-light);
    border-radius: var(--rbs-radius);
    display: inline-block;
    margin: 12px 0;
    letter-spacing: 2px;
}

/* Responsive */
@media ( max-width: 500px ) {
    .rbs-progress__label { display: none; }
    .rbs-summary-section dl { grid-template-columns: 1fr; }
    .rbs-toggle-group { flex-direction: column; }
}

/* ---- Pay Later ---- */
.rbs-btn--pay-later {
    background: #fff;
    color: #0073aa;
    border: 2px solid #0073aa;
    margin-top: 8px;
    width: 100%;
}
.rbs-btn--pay-later:hover {
    background: #f0f8ff;
}
.rbs-pay-divider {
    text-align: center;
    color: #999;
    font-size: 0.85em;
    margin: 12px 0 4px;
}

/* ---- Date formatted label ---- */
.rbs-date-display {
    margin-top: 6px;
    font-weight: 600;
    color: #0073aa;
    font-size: 1.05em;
}

/* ---- Blocked time slot in dropdown ---- */
option.rbs-time--blocked {
    color: #aaa;
    font-style: italic;
}

/* ---- Tip selector ---- */
.rbs-tip-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.rbs-tip-btn {
    padding: 10px 20px;
    border: 2px solid #0073aa;
    background: #fff;
    color: #0073aa;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.rbs-tip-btn:hover,
.rbs-tip-btn.is-active {
    background: #0073aa;
    color: #fff;
}
.rbs-tip-display {
    margin-top: 8px;
    font-weight: 600;
    color: #0073aa;
}
.rbs-payment-grand-total {
    margin: 12px 0;
    font-size: 1.15em;
    font-weight: 700;
    color: #1a1a2e;
}