/* ============================================================================
   CST Taxi — Frontend Styles
   Chichester Station Taxis booking form
   ============================================================================ */

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
    --cst-navy:        #1a1a2e;
    --cst-gold:        #f5a623;
    --cst-gold-dark:   #d4881a;
    --cst-green:       #27ae60;
    --cst-red:         #e74c3c;
    --cst-blue:        #3498db;
    --cst-grey-light:  #f7f8fa;
    --cst-grey:        #e2e6ea;
    --cst-grey-mid:    #adb5bd;
    --cst-grey-dark:   #6c757d;
    --cst-text:        #2c3e50;
    --cst-text-light:  #555;
    --cst-white:       #ffffff;
    --cst-radius:      10px;
    --cst-radius-sm:   6px;
    --cst-shadow:      0 4px 20px rgba(0,0,0,0.08);
    --cst-shadow-hover:0 8px 30px rgba(0,0,0,0.14);
    --cst-transition:  all 0.25s ease;
}

/* ─── Wrap ───────────────────────────────────────────────────────────────── */
.cst-booking-wrap {
    max-width: 780px;
    margin: 0 auto 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cst-text);
    font-size: 15px;
    line-height: 1.6;
}

/* ─── Progress Bar ───────────────────────────────────────────────────────── */
.cst-progress {
    margin-bottom: 30px;
    padding: 0 10px;
}

.cst-progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.cst-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: var(--cst-transition);
}

.cst-step.active,
.cst-step.done {
    opacity: 1;
}

.cst-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cst-grey);
    color: var(--cst-grey-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: var(--cst-transition);
}

.cst-step.active .cst-step-num {
    background: var(--cst-navy);
    color: var(--cst-white);
}

.cst-step.done .cst-step-num {
    background: var(--cst-green);
    color: var(--cst-white);
}

.cst-step-label {
    font-size: 11px;
    color: var(--cst-grey-dark);
    white-space: nowrap;
    font-weight: 500;
}

.cst-step.active .cst-step-label {
    color: var(--cst-navy);
    font-weight: 700;
}

.cst-step-line {
    flex: 1;
    height: 2px;
    background: var(--cst-grey);
    margin: 0 6px;
    margin-bottom: 20px;
    min-width: 20px;
}

/* ─── Screen ─────────────────────────────────────────────────────────────── */
.cst-screen {
    display: none;
    background: var(--cst-white);
    border-radius: var(--cst-radius);
    box-shadow: var(--cst-shadow);
    overflow: hidden;
}

.cst-screen.active {
    display: block;
    animation: cstFadeIn 0.3s ease;
}

@keyframes cstFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cst-screen-header {
    background: var(--cst-navy);
    padding: 28px 36px;
    color: var(--cst-white);
}

.cst-screen-header h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cst-white);
    border: none;
    padding: 0;
}

.cst-screen-header p {
    margin: 0;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.cst-form-body {
    padding: 30px 36px;
}

.cst-screen-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 36px;
    background: var(--cst-grey-light);
    border-top: 1px solid var(--cst-grey);
    gap: 12px;
}

/* ─── Global Message ─────────────────────────────────────────────────────── */
.cst-global-message {
    padding: 14px 20px;
    border-radius: var(--cst-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.cst-global-message.cst-msg-error {
    background: #fdecea;
    color: var(--cst-red);
    border-left: 4px solid var(--cst-red);
}

.cst-global-message.cst-msg-success {
    background: #eafaf1;
    color: var(--cst-green);
    border-left: 4px solid var(--cst-green);
}

/* ─── Return Toggle ──────────────────────────────────────────────────────── */
.cst-return-toggle {
    background: linear-gradient(135deg, #fff9ee, #fff3d6);
    border: 2px solid var(--cst-gold);
    border-radius: var(--cst-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.cst-toggle-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}

.cst-toggle-label input[type="checkbox"] {
    display: none;
}

.cst-toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: var(--cst-grey);
    border-radius: 13px;
    transition: var(--cst-transition);
    flex-shrink: 0;
}

.cst-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--cst-white);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: var(--cst-transition);
}

.cst-toggle-label input:checked ~ .cst-toggle-switch {
    background: var(--cst-navy);
}

.cst-toggle-label input:checked ~ .cst-toggle-switch::after {
    left: 27px;
}

.cst-toggle-text {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.cst-return-badge {
    background: var(--cst-gold);
    color: var(--cst-navy);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Fields ─────────────────────────────────────────────────────────────── */
.cst-field {
    margin-bottom: 20px;
}

.cst-field label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--cst-navy);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cst-field-icon {
    margin-right: 5px;
}

.cst-required {
    color: var(--cst-red);
}

.cst-optional {
    color: var(--cst-grey-mid);
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
}

.cst-field input[type="text"],
.cst-field input[type="email"],
.cst-field input[type="tel"],
.cst-field input[type="date"],
.cst-field input[type="number"],
.cst-field select,
.cst-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--cst-grey);
    border-radius: var(--cst-radius-sm);
    font-size: 15px;
    color: var(--cst-text);
    background: var(--cst-white);
    transition: var(--cst-transition);
    box-sizing: border-box;
    font-family: inherit;
}

.cst-field input:focus,
.cst-field select:focus,
.cst-field textarea:focus {
    outline: none;
    border-color: var(--cst-navy);
    box-shadow: 0 0 0 3px rgba(26,26,46,0.1);
}

.cst-field input.cst-input-error,
.cst-field select.cst-input-error {
    border-color: var(--cst-red);
}

.cst-field-error {
    display: block;
    color: var(--cst-red);
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px;
}

.cst-field-note {
    display: block;
    font-size: 12px;
    color: var(--cst-grey-dark);
    margin-top: 5px;
}

.cst-field-row {
    display: flex;
    gap: 16px;
}

.cst-field-half {
    flex: 1;
}

/* ─── Input with Clear Button ────────────────────────────────────────────── */
.cst-input-wrap {
    position: relative;
}

.cst-input-wrap input {
    padding-right: 40px !important;
}

.cst-input-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--cst-grey-mid);
    font-size: 14px;
    display: none;
    line-height: 1;
}

.cst-input-clear:hover {
    color: var(--cst-red);
}

/* ─── Select Wrap ────────────────────────────────────────────────────────── */
.cst-select-wrap {
    position: relative;
}

.cst-select-wrap select {
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.cst-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cst-grey-dark);
    pointer-events: none;
    font-size: 16px;
}

/* ─── Time Loading ───────────────────────────────────────────────────────── */
.cst-time-loading {
    font-size: 13px;
    color: var(--cst-grey-dark);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Distance Info ──────────────────────────────────────────────────────── */
.cst-distance-info {
    background: var(--cst-grey-light);
    border-radius: var(--cst-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--cst-grey);
}

.cst-distance-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}

.cst-distance-label {
    color: var(--cst-grey-dark);
}

.cst-distance-value {
    font-weight: 600;
    color: var(--cst-navy);
}

/* ─── Passenger Counter ──────────────────────────────────────────────────── */
.cst-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cst-counter-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--cst-navy);
    background: var(--cst-white);
    color: var(--cst-navy);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--cst-transition);
    line-height: 1;
}

.cst-counter-btn:hover {
    background: var(--cst-navy);
    color: var(--cst-white);
}

.cst-counter-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cst-counter-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--cst-navy);
    min-width: 30px;
    text-align: center;
}

.cst-counter-note {
    font-size: 12px;
    color: var(--cst-grey-dark);
}

/* ─── Tariff Note ────────────────────────────────────────────────────────── */
#cst-tariff-note {
    font-weight: 600;
    color: var(--cst-navy);
    font-size: 13px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.cst-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--cst-radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--cst-transition);
    text-decoration: none;
    font-family: inherit;
}

.cst-btn-primary {
    background: var(--cst-navy);
    color: var(--cst-white);
}

.cst-btn-primary:hover {
    background: #2d2d4e;
    box-shadow: var(--cst-shadow-hover);
    transform: translateY(-1px);
}

.cst-btn-secondary {
    background: var(--cst-grey-light);
    color: var(--cst-grey-dark);
    border: 2px solid var(--cst-grey);
}

.cst-btn-secondary:hover {
    background: var(--cst-grey);
    color: var(--cst-text);
}

.cst-btn-arrow {
    font-size: 18px;
    line-height: 1;
}

.cst-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.cst-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--cst-white);
    border-radius: 50%;
    animation: cstSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes cstSpin {
    to { transform: rotate(360deg); }
}

/* ─── Vehicle Card ───────────────────────────────────────────────────────── */
.cst-vehicle-card {
    border: 2px solid var(--cst-grey);
    border-radius: var(--cst-radius);
    overflow: hidden;
    margin-bottom: 28px;
    background: var(--cst-white);
    box-shadow: var(--cst-shadow);
}

.cst-vehicle-image {
    background: var(--cst-grey-light);
    text-align: center;
    overflow: hidden;
    padding: 10px;
}

.cst-vehicle-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.cst-vehicle-details {
    padding: 24px;
}

.cst-vehicle-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--cst-navy);
    margin: 0 0 16px;
}

.cst-vehicle-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Icon sits on its own row above the label/value — this gives the label
   the full width of the box to wrap in, instead of squeezing it next to
   the icon horizontally, which was causing labels like "Transmission" and
   "Hand Luggage" to be cut off to "TRA…" / "HAN…" on narrower screens. */
.cst-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    background: var(--cst-grey-light);
    border-radius: var(--cst-radius-sm);
    min-width: 0;
}

.cst-spec-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.cst-spec-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.cst-spec-label {
    font-size: 11px;
    color: var(--cst-grey-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.cst-spec-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--cst-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ─── Extras Section ─────────────────────────────────────────────────────── */
.cst-extras-section {
    margin-top: 10px;
}

.cst-extras-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cst-navy);
    margin: 0 0 4px;
}

.cst-extras-note {
    font-size: 13px;
    color: var(--cst-grey-dark);
    margin: 0 0 16px;
}

.cst-extras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cst-extra-item {
    border: 2px solid var(--cst-grey);
    border-radius: var(--cst-radius-sm);
    overflow: hidden;
    transition: var(--cst-transition);
}

.cst-extra-item:hover {
    border-color: var(--cst-navy);
}

.cst-extra-label {
    display: block;
    cursor: pointer;
}

.cst-extra-label input[type="checkbox"] {
    display: none;
}

.cst-extra-label input:checked ~ .cst-extra-content {
    background: #f0f2ff;
    border-color: var(--cst-navy);
}

.cst-extra-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    transition: var(--cst-transition);
}

.cst-extra-counter-wrap {
    padding: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.cst-extra-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.cst-extra-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cst-extra-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--cst-navy);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cst-extra-note {
    font-size: 11px;
    color: var(--cst-grey-dark);
    font-weight: 400;
}

.cst-extra-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-gold-dark);
}

/* Mini Counter for extras */
.cst-mini-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cst-mini-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--cst-navy);
    background: var(--cst-white);
    color: var(--cst-navy);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--cst-transition);
    line-height: 1;
    padding: 0;
}

.cst-mini-btn:hover {
    background: var(--cst-navy);
    color: var(--cst-white);
}

.cst-mini-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--cst-navy);
    min-width: 20px;
    text-align: center;
}

/* ─── Summary Box ────────────────────────────────────────────────────────── */
.cst-summary-box {
    background: var(--cst-grey-light);
    border-radius: var(--cst-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--cst-grey);
}

.cst-summary-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cst-grey);
}

.cst-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 14px;
    gap: 16px;
}

.cst-sum-label {
    color: var(--cst-grey-dark);
    flex-shrink: 0;
    min-width: 110px;
}

.cst-sum-value {
    color: var(--cst-text);
    font-weight: 500;
    text-align: right;
}

.cst-highlight-green {
    color: var(--cst-green);
    font-weight: 700;
}

/* ─── Tariff Banner ──────────────────────────────────────────────────────── */
.cst-tariff-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cst-navy);
    color: var(--cst-white);
    padding: 14px 20px;
    border-radius: var(--cst-radius-sm);
    margin-bottom: 16px;
}

.cst-tariff-code {
    background: var(--cst-gold);
    color: var(--cst-navy);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.cst-tariff-label {
    font-size: 15px;
    font-weight: 600;
}

/* ─── Fare Breakdown ──────────────────────────────────────────────────────
   Deliberately built from plain divs, not a <table>. A previous version
   used a real HTML table here, and — even after several rounds of CSS
   fixes — the browser's table column-width algorithm (table-layout:fixed
   sizes columns from whichever row happens to render first, which varies
   because rows are injected dynamically by JS) kept producing
   inconsistent, sometimes-broken widths for the full-width Total Fare
   row and section-header rows. Divs with flexbox have no such column-
   width negotiation to go wrong, so this class of bug can't recur. ─── */
.cst-fare-table-wrap {
    background: var(--cst-white);
    border: 2px solid var(--cst-grey);
    border-radius: var(--cst-radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.cst-fare-table {
    width: 100%;
    font-size: 14px;
}

.cst-fare-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    border-bottom: 1px solid var(--cst-grey-light);
}

#cst-fare-lines .cst-fare-row:last-child {
    border-bottom: none;
}

.cst-fare-cell-label {
    flex: 1 1 68%;
    min-width: 0;
    color: var(--cst-text-light);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cst-fare-cell-value {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 600;
    color: var(--cst-text);
    white-space: nowrap;
}

.cst-fare-row-header {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cst-navy);
    border-top: 2px solid var(--cst-grey-light);
    border-bottom: 1px solid var(--cst-grey-light);
    background: var(--cst-grey-light);
}

.cst-fare-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cst-white);
    background: var(--cst-navy);
}

.cst-fare-total {
    color: var(--cst-gold) !important;
    font-size: 22px !important;
    font-weight: 700;
    white-space: nowrap;
}

.cst-pickup-hint {
    color: #1a7f5a !important;
    font-weight: 600;
    display: inline-block;
    margin-top: 3px;
}

.cst-fare-loading {
    display: block !important;
    text-align: center !important;
    color: var(--cst-grey-dark) !important;
    padding: 24px !important;
    font-weight: 400 !important;
}

.cst-fare-note {
    font-size: 12px;
    color: var(--cst-grey-dark);
    text-align: center;
    margin: 0;
}

/* ─── Account Notice ─────────────────────────────────────────────────────── */
.cst-account-notice {
    background: #eaf4fd;
    border-left: 4px solid var(--cst-blue);
    border-radius: var(--cst-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

.cst-account-notice p {
    margin: 0;
}

.cst-login-link {
    color: var(--cst-navy);
    font-weight: 600;
    text-decoration: underline;
}

/* ─── Fare Reminder ──────────────────────────────────────────────────────── */
.cst-fare-reminder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cst-navy);
    color: var(--cst-white);
    padding: 14px 20px;
    border-radius: var(--cst-radius-sm);
    margin-top: 20px;
}

.cst-fare-reminder-label {
    font-size: 14px;
    font-weight: 600;
}

.cst-fare-reminder-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--cst-gold);
}

/* ─── Screen 5: Payment Redirect ─────────────────────────────────────────── */
.cst-screen5-body {
    text-align: center;
    padding: 60px 36px;
}

.cst-payment-redirect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.cst-payment-icon {
    font-size: 48px;
}

.cst-payment-redirect h3 {
    font-size: 20px;
    color: var(--cst-navy);
    margin: 0;
}

.cst-payment-redirect p {
    color: var(--cst-grey-dark);
    margin: 0;
}

.cst-progress-bar-anim {
    width: 280px;
    height: 6px;
    background: var(--cst-grey);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.cst-progress-bar-fill {
    height: 100%;
    background: var(--cst-navy);
    border-radius: 3px;
    animation: cstFill 2.5s ease forwards;
}

@keyframes cstFill {
    from { width: 0; }
    to   { width: 100%; }
}

/* ─── Review Form ────────────────────────────────────────────────────────── */
.cst-review-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cst-review-header {
    text-align: center;
    margin-bottom: 28px;
}

.cst-review-header h2 {
    font-size: 24px;
    color: var(--cst-navy);
    margin: 0 0 6px;
}

.cst-review-header p {
    color: var(--cst-grey-dark);
    margin: 0;
}

/* Star Rating Input */
.cst-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 8px;
}

.cst-stars input[type="radio"] {
    display: none;
}

.cst-stars label {
    font-size: 36px;
    color: var(--cst-grey);
    cursor: pointer;
    transition: var(--cst-transition);
    text-transform: none;
    letter-spacing: 0;
}

.cst-stars input:checked ~ label,
.cst-stars label:hover,
.cst-stars label:hover ~ label {
    color: var(--cst-gold);
}

/* ─── Reviews Display ────────────────────────────────────────────────────── */
.cst-reviews-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cst-reviews-summary {
    text-align: center;
    padding: 28px;
    background: var(--cst-navy);
    color: var(--cst-white);
    border-radius: var(--cst-radius);
    margin-bottom: 28px;
}

.cst-score-number {
    font-size: 52px;
    font-weight: 800;
    color: var(--cst-gold);
    line-height: 1;
}

.cst-score-max {
    font-size: 20px;
    color: rgba(255,255,255,0.5);
}

.cst-reviews-stars-summary {
    margin: 8px 0;
}

.cst-star-full  { color: var(--cst-gold); }
.cst-star-half  { color: var(--cst-gold); opacity: 0.6; }
.cst-star-empty { color: var(--cst-grey-mid); }

.cst-reviews-count {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.cst-reviews-grid {
    display: grid;
    gap: 20px;
}

.cst-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cst-cols-1 { grid-template-columns: 1fr; }
.cst-cols-3 { grid-template-columns: repeat(3, 1fr); }

.cst-review-card {
    background: var(--cst-white);
    border: 1px solid var(--cst-grey);
    border-radius: var(--cst-radius);
    padding: 22px;
    box-shadow: var(--cst-shadow);
    transition: var(--cst-transition);
}

.cst-review-card:hover {
    box-shadow: var(--cst-shadow-hover);
    transform: translateY(-2px);
}

.cst-review-rating {
    font-size: 18px;
    margin-bottom: 10px;
}

.cst-review-comment {
    font-size: 14px;
    color: var(--cst-text-light);
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 14px;
    padding: 0;
    border: none;
}

.cst-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--cst-grey-dark);
    border-top: 1px solid var(--cst-grey-light);
    padding-top: 12px;
}

.cst-reviewer-name {
    font-weight: 700;
    color: var(--cst-navy);
}

/* ─── Notice ─────────────────────────────────────────────────────────────── */
.cst-notice {
    padding: 16px 20px;
    border-radius: var(--cst-radius-sm);
    margin: 16px 0;
}

.cst-notice p {
    margin: 0;
    font-size: 14px;
}

.cst-notice-error   { background: #fdecea; border-left: 4px solid var(--cst-red);   color: var(--cst-red); }
.cst-notice-success { background: #eafaf1; border-left: 4px solid var(--cst-green); color: var(--cst-green); }
.cst-notice-info    { background: #eaf4fd; border-left: 4px solid var(--cst-blue);  color: var(--cst-blue); }

/* ─── WooCommerce Thank You ───────────────────────────────────────────────── */
.cst-thankyou-booking {
    margin-top: 30px;
}

.cst-thankyou-booking .woocommerce-table {
    width: 100%;
    border-collapse: collapse;
}

.cst-thankyou-booking .woocommerce-table th,
.cst-thankyou-booking .woocommerce-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cst-grey);
    font-size: 14px;
}

.cst-thankyou-booking .woocommerce-table th {
    color: var(--cst-grey-dark);
    font-weight: 600;
    width: 160px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
    .cst-booking-wrap {
        padding: 0 8px;
    }

    .cst-form-body,
    .cst-screen-footer,
    .cst-screen-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cst-field-row {
        flex-direction: column;
    }

    .cst-step-label {
        display: none;
    }

    .cst-vehicle-specs {
        grid-template-columns: 1fr;
    }

    .cst-extras-grid {
        grid-template-columns: 1fr;
    }

    .cst-cols-2,
    .cst-cols-3 {
        grid-template-columns: 1fr;
    }

    .cst-screen-footer {
        flex-direction: column;
    }

    .cst-btn {
        width: 100%;
        justify-content: center;
    }

    .cst-progress-steps {
        gap: 0;
    }

    .cst-step-line {
        min-width: 10px;
    }
}

/* ─── Return Journey Section ─────────────────────────────────────────────── */
.cst-return-section {
    background: linear-gradient(135deg, #f0f4ff, #e8eeff);
    border: 2px solid #c5d0f5;
    border-radius: var(--cst-radius);
    padding: 20px;
    margin-top: 16px;
}

.cst-return-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--cst-navy);
    margin: 0 0 4px;
}

.cst-return-subheading {
    font-size: 13px;
    color: var(--cst-grey-dark);
    margin: 0 0 16px;
}

/* Return scenario info box */
.cst-scenario-box {
    border-radius: var(--cst-radius-sm);
    padding: 14px 16px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
}

.cst-scenario-a {
    background: #eafaf1;
    border-left: 4px solid var(--cst-green);
    color: #1a5c38;
}

.cst-scenario-b {
    background: #fef9e7;
    border-left: 4px solid var(--cst-gold);
    color: #7a5c00;
}

.cst-scenario-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.cst-scenario-cost {
    font-weight: 700;
    font-size: 16px;
    margin-top: 8px;
    display: block;
}

/* ─── Map Section ────────────────────────────────────────────────────────── */
.cst-map-header {
    margin: 20px 0 10px;
}

.cst-map-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--cst-navy);
    margin: 0;
}

#cst-route-map {
    border: 2px solid var(--cst-grey);
}

.cst-map-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.cst-map-stat {
    background: var(--cst-grey-light);
    border-radius: var(--cst-radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cst-map-stat-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.cst-map-stat-label {
    display: block;
    font-size: 11px;
    color: var(--cst-grey-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cst-map-stat-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cst-navy);
}

@media ( max-width: 640px ) {
    .cst-map-summary {
        grid-template-columns: 1fr;
    }
}

/* ─── Cancel / Modify Action Pages ──────────────────────────────────────── */
.cst-action-wrap {
    max-width: 640px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cst-action-header {
    text-align: center;
    margin-bottom: 24px;
}

.cst-action-header h2 {
    font-size: 24px;
    color: var(--cst-navy);
    margin: 0 0 6px;
}

.cst-action-header p {
    color: var(--cst-grey-dark);
    margin: 0;
}

.cst-action-summary {
    background: var(--cst-grey-light);
    border-radius: var(--cst-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--cst-grey);
}

.cst-policy-box {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--cst-radius);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.cst-policy-box p { margin: 6px 0 0; }

.cst-policy-grace,
.cst-policy-standard { background: #eafaf1; border-left: 4px solid var(--cst-green); color: #1a5c38; }
.cst-policy-late      { background: #fef9e7; border-left: 4px solid var(--cst-gold);  color: #7a5c00; }
.cst-policy-lockout,
.cst-policy-expired   { background: #fdecea; border-left: 4px solid var(--cst-red);   color: #922b21; }
.cst-policy-warning   { background: #fef9e7; border-left: 4px solid var(--cst-gold);  color: #7a5c00; }

.cst-refund-amount {
    font-size: 15px;
    font-weight: 700;
}

.cst-charge-note {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
    margin-left: 6px;
}

.cst-btn-danger {
    background: var(--cst-red);
    color: var(--cst-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--cst-radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--cst-transition);
    font-family: inherit;
}

.cst-btn-danger:hover {
    background: #c0392b;
}

.cst-modify-form {
    background: var(--cst-white);
    border: 1px solid var(--cst-grey);
    border-radius: var(--cst-radius);
    padding: 20px 24px;
}

/* ─── Mobile Booking Form Fixes ──────────────────────────────────────────── */
@media ( max-width: 640px ) {

    /* Screen header */
    .cst-screen-header {
        padding: 20px 16px;
    }

    .cst-screen-header h2 {
        font-size: 18px;
    }

    /* Form body and footer */
    .cst-form-body {
        padding: 16px;
    }

    .cst-screen-footer {
        padding: 14px 16px;
        gap: 10px;
    }

    /* Return toggle — keep on one line */
    .cst-return-toggle {
        padding: 12px 14px;
    }

    .cst-toggle-label {
        gap: 10px;
    }

    .cst-toggle-text {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
    }

    .cst-return-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Fields */
    .cst-field label {
        font-size: 12px;
    }

    .cst-field input,
    .cst-field select,
    .cst-field textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    /* Field row stacks on mobile */
    .cst-field-row {
        flex-direction: column;
        gap: 0;
    }

    /* Passenger counter */
    .cst-counter {
        gap: 16px;
    }

    .cst-counter-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .cst-counter-val {
        font-size: 28px;
    }

    /* Buttons full width on mobile */
    .cst-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }

    .cst-btn-secondary {
        width: auto;
        padding: 12px 20px;
    }

    /* Vehicle card */
    .cst-vehicle-card {
        margin-bottom: 16px;
    }

    .cst-vehicle-image {
        padding: 8px;
    }

    .cst-vehicle-details {
        padding: 14px;
    }

    .cst-vehicle-name {
        font-size: 17px;
        margin-bottom: 12px;
    }

    /* Column count for this breakpoint is set once, above, by the
       .cst-vehicle-specs rule in the first 640px media block — not
       redeclared here, since a second conflicting "1fr 1fr" rule at this
       same breakpoint was previously overriding it back to a cramped
       2-column layout and shrinking the label text to 10px, which is
       what caused the truncated "TRA…" / "MAX…" / "HAN…" labels. */
    .cst-spec-item {
        padding: 10px 12px;
        gap: 5px;
    }

    .cst-spec-label {
        font-size: 10px;
    }

    .cst-spec-value {
        font-size: 13px;
    }

    /* Extras grid single column on mobile */
    .cst-extras-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Fare summary */
    .cst-summary-box {
        padding: 14px 16px;
    }

    .cst-summary-row {
        flex-direction: column;
        gap: 2px;
        padding: 6px 0;
        border-bottom: 1px solid var(--cst-grey-light);
    }

    .cst-sum-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--cst-grey-mid);
        min-width: unset;
    }

    .cst-sum-value {
        font-size: 14px;
        font-weight: 600;
        text-align: left;
    }

    .cst-tariff-banner {
        padding: 12px 14px;
        gap: 10px;
    }

    .cst-tariff-label {
        font-size: 14px;
    }

    /* Fare breakdown */
    .cst-fare-row {
        padding: 9px 12px;
        font-size: 13px;
    }

    .cst-fare-total-row {
        padding: 12px;
        font-size: 15px;
    }

    .cst-fare-total {
        font-size: 18px !important;
    }

    /* Customer details screen */
    .cst-fare-reminder {
        padding: 12px 14px;
    }

    .cst-fare-reminder-amount {
        font-size: 18px;
    }

    /* Map section */
    #cst-route-map {
        height: 220px !important;
    }

    .cst-map-summary {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cst-map-stat {
        padding: 8px 10px;
    }

    /* Progress bar */
    .cst-step-num {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .cst-step-line {
        min-width: 8px;
    }

    /* Return journey section */
    .cst-return-section {
        padding: 14px;
    }

    .cst-return-heading {
        font-size: 14px;
    }

    /* Screen 5 payment redirect */
    .cst-screen5-body {
        padding: 40px 16px;
    }

    .cst-payment-icon {
        font-size: 36px;
    }

    .cst-payment-redirect h3 {
        font-size: 17px;
    }
}

/* ─── GDPR Consent Checkbox ──────────────────────────────────────────────── */
.cst-consent-field {
    margin-bottom: 20px;
}

.cst-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    background: var(--cst-grey-light);
    border: 2px solid var(--cst-grey);
    border-radius: var(--cst-radius);
    padding: 14px 16px;
    transition: var(--cst-transition);
}

.cst-consent-label:hover {
    border-color: var(--cst-navy);
}

.cst-consent-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    margin-top: 2px;
    accent-color: var(--cst-navy);
}

.cst-consent-label input:checked ~ .cst-consent-text {
    color: var(--cst-navy);
}

.cst-consent-label input:checked + .cst-consent-text,
.cst-consent-label:has(input:checked) {
    border-color: var(--cst-navy);
    background: #f0f2ff;
}

.cst-consent-text {
    font-size: 13px;
    color: var(--cst-text-light);
    line-height: 1.6;
}

.cst-consent-text a {
    color: var(--cst-navy);
    font-weight: 600;
    text-decoration: underline;
}

.cst-consent-text a:hover {
    color: var(--cst-gold-dark);
}

/* ─── Google Reviews Badge ───────────────────────────────────────────────── */
.cst-google-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e6ea;
    border-radius: var(--cst-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    text-decoration: none;
    transition: var(--cst-transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.cst-google-badge:hover {
    border-color: #4285F4;
    box-shadow: 0 2px 8px rgba(66,133,244,0.15);
    transform: translateY(-1px);
}

.cst-google-badge-logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cst-google-badge-content {
    flex: 1;
}

.cst-google-badge-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.cst-star {
    font-size: 18px;
    color: #f5a623;
    line-height: 1;
}

.cst-star-half {
    opacity: 0.5;
}

.cst-google-badge-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cst-google-badge-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}

.cst-google-badge-text span {
    font-size: 12px;
    color: #666;
}

.cst-google-badge-arrow {
    font-size: 16px;
    color: #aaa;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cst-google-badge {
        padding: 10px 12px;
        gap: 10px;
    }

    .cst-google-badge-text strong {
        font-size: 14px;
    }

    .cst-google-badge-text span {
        font-size: 11px;
    }
}

/* ─── Google Reviews Badge ───────────────────────────────────────────────── */
.cst-reviews-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cst-white);
    border: 1px solid #e2e6ea;
    border-radius: 50px;
    padding: 8px 16px;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin: 12px 0 0;
    width: fit-content;
    transition: box-shadow 0.2s, transform 0.2s;
}

.cst-reviews-badge:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.cst-reviews-badge-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cst-reviews-badge-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    letter-spacing: 0.3px;
}

.cst-reviews-badge-stars {
    display: flex;
    gap: 1px;
}

.cst-star {
    font-size: 15px;
    line-height: 1;
}

.cst-star-full  { color: #fbbc04; }
.cst-star-half  { color: #fbbc04; opacity: 0.6; }
.cst-star-empty { color: #ddd; }

.cst-reviews-badge-info {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.cst-reviews-badge-rating {
    font-size: 14px;
    font-weight: 800;
    color: var(--cst-navy);
}

.cst-reviews-badge-count {
    font-size: 11px;
    color: #888;
}

/* ─── Screen Header with Reviews Badge ──────────────────────────────────── */
.cst-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cst-screen-header-left {
    flex: 1;
    min-width: 0;
}

.cst-screen-header-left h2 {
    margin: 0 0 4px;
}

.cst-screen-header-left p {
    margin: 0;
}

.cst-screen-header {
    flex-direction: column;
    align-items: flex-start;
}

.cst-reviews-badge-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    padding: 10px 16px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
    white-space: nowrap;
    margin-top: 8px;
}

.cst-reviews-badge-header:hover {
    background: rgba(255,255,255,0.2);
}

.cst-reviews-badge-stars-sm {
    display: flex;
    gap: 1px;
    line-height: 1;
}

.cst-reviews-badge-score {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

@media ( max-width: 480px ) {
    .cst-reviews-badge-header {
        padding: 5px 10px;
    }
    .cst-reviews-badge-score {
        font-size: 11px;
    }
}

/* ─── Consent Checkbox Fixes ─────────────────────────────────────────────── */
.cst-consent-text {
    font-size: 13px;
    color: var(--cst-text-light);
    line-height: 1.6;
    font-weight: 400 !important;
    text-transform: none !important;
}

.cst-consent-link {
    color: var(--cst-gold-dark) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-transform: none !important;
}

.cst-consent-link:hover {
    color: var(--cst-navy) !important;
}

/* ─── Consent Box Rebuild ────────────────────────────────────────────────── */
.cst-consent-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8f9fa;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 16px;
}

.cst-consent-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: default !important;
    display: block !important;
}

/* ─── Owner Reply on Public Reviews ─────────────────────────────────────── */
.cst-owner-reply {
    margin-top: 12px;
    padding: 12px 16px;
    background: #f0f8f0;
    border-left: 3px solid #27ae60;
    border-radius: 0 6px 6px 0;
}

.cst-owner-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.cst-owner-reply-label {
    font-weight: 700;
    font-size: 13px;
    color: #1a1a2e;
}

.cst-owner-reply-date {
    font-size: 11px;
    color: #999;
}

.cst-owner-reply-text {
    font-size: 13px;
    color: #444;
    margin: 0;
    line-height: 1.6;
}

/* ─── Fare Total Mobile Fix ──────────────────────────────────────────────── */
/* This block previously targeted .cst-fare-total-row td as a band-aid for
   the table-column-width bug described above. Now that the fare breakdown
   is div-based (see the main .cst-fare-total-row rule), full width and
   flex layout apply unconditionally at every screen size, so this
   override is no longer needed and has been removed rather than left as
   dead, confusing code. */
/* ─── Flatpickr Date Picker (blocked-date greying out) ──────────────────── */
/* Dates fully blocked by a driver holiday (see CST_Availability::ajax_get_blocked_dates)
   are passed into flatpickr's `disable` option. Flatpickr already adds the
   .flatpickr-disabled class and prevents clicks/keyboard selection on those days;
   this just makes them visually obvious (struck through, muted, no hover state)
   rather than looking like a plain unstyled disabled day. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    text-decoration: line-through;
    color: #c2c2c2 !important;
    background: transparent !important;
    cursor: not-allowed;
}

.flatpickr-day.selected {
    background: #1a1a2e;
    border-color: #1a1a2e;
}

.flatpickr-day.today {
    border-color: #f5a623;
}

.flatpickr-day:hover:not(.flatpickr-disabled) {
    background: #f5a62333;
}