.jb-search-module {
    --jb-gold: #ebb73d;
    --jb-black: #000;
    --jb-dark: #111;
    --jb-border: #353535;
    --jb-muted: #b9b9b9;
    max-width: 1180px;
    margin: 0 auto;
    font-family: inherit;
}

.jb-search-card {
    background: var(--jb-black);
    color: #fff;
    padding: 30px;
    border-top: 4px solid var(--jb-gold);
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.jb-search-heading {
    margin-bottom: 22px;
}

.jb-search-heading h2,
.jb-results-heading h3 {
    color: #fff;
    margin: 0 0 6px;
}

.jb-search-heading p,
.jb-results-heading p {
    color: var(--jb-muted);
    margin: 0;
}

.jb-eyebrow {
    display: inline-block;
    color: var(--jb-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.jb-search-form {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1fr .7fr auto;
    gap: 12px;
    align-items: end;
}

.jb-field label {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.jb-field select,
.jb-field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid #555;
    outline: none;
    border-radius: 6px;
    background: #171717;
    color: #fff;
    padding: 0 13px;
    font: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.jb-field select:hover,
.jb-field input:hover {
    border-color: #777;
}

.jb-field select:focus,
.jb-field input:focus {
    border-color: var(--jb-gold);
    box-shadow: 0 0 0 2px rgba(235,183,61,.18);
}

.jb-field select {
    color-scheme: dark;
}

.jb-field select option {
    background: #171717;
    color: #fff;
}

.jb-field input[type="date"] {
    color-scheme: dark;
}

/* v1.5.5 — cross-browser visibility for the public ride-search date control.
   Firefox and mobile WebKit/Blink can paint the native date text/icon using
   their own dark foreground colors even though the field itself is dark. */
.jb-search-form .jb-field {
    min-width: 0;
}

.jb-search-form input[type="date"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    padding: 0 13px;
    line-height: normal;

    /* Explicit foreground is required for Firefox + Android/iOS date controls. */
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    opacity: 1 !important;
    color-scheme: dark;
    background-color: #171717 !important;
}

/* Chromium / Android / iOS native date sub-parts. */
.jb-search-form input[type="date"]::-webkit-datetime-edit,
.jb-search-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.jb-search-form input[type="date"]::-webkit-datetime-edit-text,
.jb-search-form input[type="date"]::-webkit-datetime-edit-month-field,
.jb-search-form input[type="date"]::-webkit-datetime-edit-day-field,
.jb-search-form input[type="date"]::-webkit-datetime-edit-year-field {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}


/* Keep placeholder segments readable while no date has been chosen. */
.jb-search-form input[type="date"]:invalid::-webkit-datetime-edit {
    color: #d9d9d9 !important;
    -webkit-text-fill-color: #d9d9d9 !important;
}

/* Firefox uses the input's own foreground for the native date text.
   Reassert it for focus/active states where the UA stylesheet can win. */
.jb-search-form input[type="date"]:focus,
.jb-search-form input[type="date"]:active,
.jb-search-form input[type="date"]:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-color: #171717 !important;
}

@media (max-width: 800px) {
    .jb-search-form input[type="date"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        opacity: 1 !important;
    }
}

.jb-field input[type="number"] {
    color: #fff;
}

.jb-field input[type="number"]::-webkit-inner-spin-button,
.jb-field input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    filter: invert(1);
}

.jb-field-submit button,
.jb-trip-action button {
    min-height: 50px;
    border: 0;
    border-radius: 6px;
    background: var(--jb-gold);
    color: #000;
    padding: 0 20px;
    font-weight: 800;
}

.jb-field-submit button {
    cursor: pointer;
}

.jb-field-submit button:hover {
    filter: brightness(1.05);
}

.jb-results {
    margin-top: 0;
}

.jb-results-heading {
    background: var(--jb-dark);
    color: #fff;
    padding: 24px 28px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.jb-results-heading-main {
    min-width: 0;
}

.jb-start-over {
    color: var(--jb-gold);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 4px;
}

.jb-start-over:hover {
    color: #fff;
}

.jb-results-subtitle {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 26px;
    background: #f7f7f7;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
}

.jb-results-subtitle span {
    color: #111;
    font-size: 17px;
    font-weight: 800;
}

.jb-results-subtitle small {
    color: #777;
}

.jb-trip-card {
    display: grid;
    grid-template-columns: 1.05fr 1.35fr 42px 1.35fr 1fr 1.25fr;
    gap: 20px;
    align-items: center;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: 0;
    padding: 24px 26px;
}

.jb-trip-card:last-child {
    border-radius: 0 0 8px 8px;
}

.jb-trip-time strong,
.jb-trip-price strong {
    display: block;
    color: #111;
    line-height: 1.1;
}

.jb-trip-time strong {
    font-size: 22px;
}

.jb-trip-price strong {
    font-size: 22px;
}

.jb-arrival,
.jb-trip-price span,
.jb-trip-price small,
.jb-dev-note {
    color: #666;
    display: block;
}

.jb-arrival {
    margin-top: 7px;
    font-size: 14px;
}

.jb-trip-stop strong {
    color: #111;
    display: block;
    line-height: 1.35;
}

.jb-label {
    display: block;
    color: #858585;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.jb-trip-direction {
    color: var(--jb-gold);
    font-size: 24px;
    font-weight: 900;
    text-align: center;
}

.jb-trip-action {
    text-align: right;
}

.jb-trip-action button {
    width: 100%;
    margin-top: 9px;
}

.jb-trip-action button:disabled {
    cursor: not-allowed;
}

.jb-select-placeholder:disabled {
    opacity: .82;
    background: #e5c86f;
    color: #4e4e4e;
}

.jb-dev-note {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.35;
}

.jb-availability {
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.jb-available { color: #247a35; }
.jb-almost-full { color: #a36a00; }
.jb-sold-out,
.jb-not-enough { color: #a32626; }

.jb-message {
    margin-top: 0;
    padding: 24px;
    border-radius: 8px;
}

.jb-message-empty {
    background: #111;
    color: #fff;
    border-left: 4px solid var(--jb-gold);
}

.jb-message-empty strong {
    color: var(--jb-gold);
    font-size: 18px;
}

.jb-message-empty p {
    color: #d0d0d0;
}

.jb-message-error {
    background: #fff1f1;
    border-left: 4px solid #a32626;
    color: #651515;
}

@media (max-width: 1050px) {
    .jb-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .jb-field-submit {
        grid-column: 1 / -1;
    }

    .jb-field-submit button {
        width: 100%;
    }

    .jb-trip-card {
        grid-template-columns: 1fr 1.3fr 32px 1.3fr;
    }

    .jb-trip-price,
    .jb-trip-action {
        grid-column: auto;
    }

    .jb-trip-action {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .jb-results-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .jb-results-subtitle {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .jb-trip-card {
        grid-template-columns: 1fr 1fr;
    }

    .jb-trip-direction {
        display: none;
    }
}

@media (max-width: 640px) {
    .jb-search-card {
        padding: 22px 18px;
    }

    .jb-search-form,
    .jb-trip-card {
        grid-template-columns: 1fr;
    }

    .jb-trip-action {
        text-align: left;
    }
}


.jb-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.jb-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.jb-empty-btn:hover {
    transform: translateY(-1px);
}

.jb-empty-btn-primary {
    background: var(--jb-gold);
    color: #000;
}

.jb-empty-btn-primary:hover {
    color: #000;
    filter: brightness(1.04);
}

.jb-empty-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid #666;
}

.jb-empty-btn-secondary:hover {
    color: var(--jb-gold);
    border-color: var(--jb-gold);
}

@media (max-width: 640px) {
    .jb-empty-actions {
        flex-direction: column;
    }

    .jb-empty-btn {
        width: 100%;
    }
}


.jb-search-view.is-hidden,
.jb-results-view.is-hidden {
    display: none !important;
}


/* ==========================================================
   Milestone 5 — booking / passenger / review foundation
   ========================================================== */

.jb-select-ride-form {
    margin: 0;
}

.jb-select-ride {
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: #ebb73d;
    color: #000;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.jb-select-ride:hover {
    background: #000;
    color: #fff;
}

.jb-checkout-flow {
    background: #f4f4f2;
    padding: 28px 0;
}

.jb-selected-trip-summary,
.jb-checkout-panel {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto 24px;
}

.jb-selected-trip-summary {
    background: #111;
    color: #fff;
    border-top: 4px solid #ebb73d;
    border-radius: 8px;
    padding: 28px;
}

.jb-selected-trip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 20px;
    margin-top: 18px;
}

.jb-selected-trip-grid div {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 12px;
}

.jb-selected-trip-grid small {
    display: block;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.jb-selected-trip-grid strong {
    display: block;
    color: #fff;
}

.jb-checkout-panel {
    background: #fff;
    border-radius: 8px;
    padding: 34px;
    box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

.jb-checkout-panel h2 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 34px;
}

.jb-checkout-intro {
    max-width: 760px;
    color: #666;
    margin-bottom: 26px;
}

.jb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.jb-passengers-section {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #ddd;
}

.jb-passenger-fields {
    display: grid;
    gap: 12px;
}

.jb-passenger-row {
    display: grid;
    grid-template-columns: 130px 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.jb-passenger-row span {
    font-weight: 700;
}

.jb-checkout-panel input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 16px;
}

.jb-checkout-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.jb-primary-action,
.jb-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: 5px;
    padding: 12px 22px;
    background: #ebb73d;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 800;
    cursor: pointer;
}

.jb-primary-action:hover,
.jb-link-button:hover {
    background: #000;
    color: #fff !important;
}

.jb-secondary-action {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

.jb-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 22px 0;
}

.jb-review-total {
    display: inline-block;
    font-size: 26px;
    margin-top: 8px;
}

.jb-passenger-review {
    padding-left: 22px;
}

.jb-hold-notice {
    margin-top: 22px;
    border-left: 4px solid #ebb73d;
    background: #fff7df;
    padding: 14px 16px;
    color: #4a3a0b;
}

.jb-booking-number {
    display: inline-block;
    margin: 18px 0;
    padding: 12px 16px;
    background: #111;
    color: #fff;
    border-radius: 5px;
}

@media (max-width: 760px) {
    .jb-selected-trip-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jb-form-grid,
    .jb-review-grid {
        grid-template-columns: 1fr;
    }

    .jb-passenger-row {
        grid-template-columns: 1fr;
    }

    .jb-checkout-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jb-primary-action,
    .jb-link-button,
    .jb-secondary-action {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================
   v0.3.1 — checkout field visibility fix
   The generic .jb-field rules are intentionally dark because
   they style the black search module. Checkout forms sit on a
   white panel, so they need an explicit light-field override.
   ========================================================== */

.jb-checkout-panel .jb-field label {
    color: #1b1f29 !important;
}

.jb-checkout-panel .jb-field input,
.jb-checkout-panel input[type="text"],
.jb-checkout-panel input[type="email"],
.jb-checkout-panel input[type="tel"] {
    background: #fff !important;
    color: #1b1f29 !important;
    border: 1px solid #cfcfcf !important;
    box-shadow: none !important;
    color-scheme: light;
}

.jb-checkout-panel .jb-field input:hover,
.jb-checkout-panel input[type="text"]:hover,
.jb-checkout-panel input[type="email"]:hover,
.jb-checkout-panel input[type="tel"]:hover {
    border-color: #999 !important;
}

.jb-checkout-panel .jb-field input:focus,
.jb-checkout-panel input[type="text"]:focus,
.jb-checkout-panel input[type="email"]:focus,
.jb-checkout-panel input[type="tel"]:focus {
    border-color: #ebb73d !important;
    box-shadow: 0 0 0 2px rgba(235,183,61,.18) !important;
    outline: none !important;
}

.jb-checkout-panel input::placeholder {
    color: #767b84 !important;
    opacity: 1;
}


/* ==========================================================
   v0.3.2 — primary contact / Passenger 1 relationship
   ========================================================== */

.jb-primary-travelling {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid #e2e2e2;
    border-left: 4px solid #ebb73d;
    border-radius: 5px;
    background: #faf9f5;
}

.jb-primary-travelling-label {
    display: block;
    margin-bottom: 10px;
    color: #1b1f29;
    font-weight: 800;
}

.jb-travelling-options {
    display: flex;
    gap: 20px;
    align-items: center;
}

.jb-travelling-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 700;
    color: #1b1f29;
}

.jb-travelling-options input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: #ebb73d;
}

.jb-field-help {
    margin: 10px 0 0;
    color: #6c7078;
    font-size: 13px;
    line-height: 1.45;
}

.jb-passenger-primary-row input.is-auto-filled {
    background: #f3f1e8 !important;
    color: #30343a !important;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .jb-travelling-options {
        gap: 16px;
        flex-wrap: wrap;
    }
}


/* ==========================================================
   v0.4.0 — PayPal payment step
   ========================================================== */

.jb-payment-box {
    margin-top: 26px;
    padding: 24px;
    border: 1px solid #e2e2e2;
    border-top: 4px solid #ebb73d;
    border-radius: 7px;
    background: #fbfaf6;
}

.jb-payment-box h3 {
    margin: 5px 0 10px;
    font-size: 24px;
}

.jb-paypal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 8px;
    padding: 13px 24px;
    border: 0;
    border-radius: 6px;
    background: #ffc439;
    color: #111;
    font-weight: 800;
    font-size: 17px;
    cursor: pointer;
}

.jb-paypal-button:hover {
    filter: brightness(.96);
}

.jb-payment-mode {
    margin: 10px 0 0;
    color: #777;
    font-size: 12px;
}

.jb-message-warning {
    border-left: 4px solid #ebb73d;
    background: #fff8df;
    color: #493b0e;
}


/* v0.4.1 payment result panels */
.jb-payment-result{padding:44px 20px 24px;background:#f4f4f2}
.jb-payment-result-inner{width:min(1180px,100%);margin:0 auto;padding:34px;background:#fff;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.08);border-top:4px solid #ebb73d}
.jb-payment-result h2{margin:6px 0 10px;font-size:38px}
.jb-payment-result-lead{font-size:18px;color:#555}
.jb-payment-booking-number{display:inline-block;margin:18px 0 24px;padding:12px 16px;background:#111;color:#fff;border-radius:5px}
.jb-payment-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.jb-payment-summary-grid>div{padding:14px 0;border-top:1px solid #ddd}
.jb-payment-summary-grid small{display:block;margin-bottom:5px;color:#777;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.jb-payment-summary-grid strong{display:block;color:#1b1f29}
.jb-payment-followup{margin-top:22px;color:#666}
.jb-payment-cancelled .jb-payment-result-inner{border-top-color:#888}
.jb-payment-error .jb-payment-result-inner{border-top-color:#b42318}
@media(max-width:900px){.jb-payment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.jb-payment-result{padding-left:12px;padding-right:12px}.jb-payment-result-inner{padding:24px 18px}.jb-payment-result h2{font-size:30px}.jb-payment-summary-grid{grid-template-columns:1fr}}


/* ==========================================================
   v0.5.0 — Customer account / booking dashboard
   ========================================================== */

.jb-account-shell {
    width: min(1320px, calc(100% - 40px));
    margin: 48px auto;
}

.jb-account-intro,
.jb-account-heading,
.jb-account-detail-hero {
    margin-bottom: 28px;
}

.jb-account-intro h2,
.jb-account-heading h2,
.jb-account-detail-hero h2 {
    margin: 6px 0 10px;
}

.jb-account-auth-grid,
.jb-account-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 24px;
}

.jb-account-card {
    background: #fff;
    border: 1px solid #ddd;
    border-top: 4px solid #ebb73d;
    border-radius: 7px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jb-account-card h3 {
    margin: 6px 0 14px;
}

.jb-account-card .jb-field label {
    color: #1b1f29 !important;
}

.jb-account-card .jb-field input {
    background: #fff !important;
    color: #1b1f29 !important;
    border: 1px solid #cfcfcf !important;
}

.jb-account-card .jb-field small {
    display: block;
    margin-top: 6px;
    color: #6f737a;
}

.jb-field-full {
    grid-column: 1 / -1;
}

.jb-account-heading,
.jb-account-detail-hero,
.jb-account-section-heading,
.jb-account-cancel-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.jb-account-heading-actions,
.jb-account-detail-statuses {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.jb-account-info-note,
.jb-account-notice {
    margin: 20px 0;
    padding: 16px 18px;
    border-left: 4px solid #ebb73d;
    background: #fff8df;
    color: #463b1f;
}

.jb-account-success {
    background: #e9f7ed;
    border-left-color: #287a3d;
    color: #194f29;
}

.jb-account-error {
    background: #faeaea;
    border-left-color: #b42318;
    color: #782018;
}

.jb-account-bookings {
    margin-top: 34px;
}

.jb-account-section-heading {
    margin-bottom: 18px;
}

.jb-account-section-heading h3 {
    margin: 4px 0 0;
}

.jb-account-booking-list {
    display: grid;
    gap: 14px;
}

.jb-account-booking-card {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(320px,1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    border: 1px solid #ddd;
    border-left: 4px solid #ebb73d;
    background: #fff;
    border-radius: 6px;
}

.jb-account-booking-main h4 {
    margin: 8px 0 4px;
    font-size: 22px;
}

.jb-account-booking-main p {
    margin: 0 0 5px;
    color: #555;
}

.jb-account-booking-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.jb-account-booking-meta small {
    display: block;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #777;
    font-size: 10px;
    margin-bottom: 4px;
}

.jb-account-booking-meta strong {
    color: #1b1f29;
}

.jb-account-empty {
    padding: 28px;
    border: 1px dashed #bbb;
    background: #fafafa;
}

.jb-account-back {
    font-weight: 700;
    text-decoration: none;
}

.jb-account-detail-hero {
    padding: 24px 28px;
    background: #111;
    color: #fff;
    border-top: 4px solid #ebb73d;
    border-radius: 7px;
}

.jb-account-detail-hero h2 {
    color: #fff;
}

.jb-account-dl {
    margin: 0;
}

.jb-account-dl > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid #eee;
}

.jb-account-dl dt {
    font-weight: 800;
    text-transform: uppercase;
    color: #6f737a;
    font-size: 11px;
    letter-spacing: .04em;
}

.jb-account-dl dd {
    margin: 0;
}

.jb-account-manifest {
    margin-top: 24px;
}

.jb-account-manifest ol {
    margin: 14px 0 0 22px;
}

.jb-account-manifest li {
    padding: 7px 0;
}

.jb-account-cancel-panel {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e3c5c5;
    border-left: 4px solid #b42318;
    background: #fff8f8;
}

.jb-account-cancel-panel h3 {
    margin: 4px 0 8px;
}

.jb-account-danger-button {
    padding: 12px 18px;
    border: 1px solid #b42318;
    border-radius: 5px;
    background: #fff;
    color: #b42318;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.jb-account-danger-button:hover {
    background: #b42318;
    color: #fff;
}

@media (max-width: 1000px) {
    .jb-account-booking-card {
        grid-template-columns: 1fr;
    }

    .jb-account-booking-meta {
        max-width: 520px;
    }
}

@media (max-width: 760px) {
    .jb-account-shell {
        width: min(100% - 24px, 1320px);
        margin-top: 28px;
    }

    .jb-account-auth-grid,
    .jb-account-detail-grid {
        grid-template-columns: 1fr;
    }

    .jb-account-heading,
    .jb-account-detail-hero,
    .jb-account-section-heading,
    .jb-account-cancel-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .jb-account-booking-meta {
        grid-template-columns: 1fr 1fr;
    }

    .jb-account-dl > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* ==========================================================
   v0.5.1 — Front-end customer sign-in UX
   ========================================================== */

.jb-account-login-form,
.jb-account-register-form {
    margin-top: 18px;
}

.jb-account-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: -4px;
}

.jb-account-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-weight: 600 !important;
    color: #1b1f29 !important;
}

.jb-account-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #ebb73d;
}

.jb-account-forgot {
    font-weight: 700;
    text-decoration: none;
}

.jb-account-forgot:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .jb-account-login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}


/* ==========================================================
   v0.5.2 — Account profile + booking prefill
   ========================================================== */

.jb-account-profile-card {
    margin: 28px 0 38px;
}

.jb-account-profile-card .jb-account-section-heading {
    margin-bottom: 18px;
}

.jb-account-profile-card .jb-account-section-heading p {
    margin: 6px 0 0;
    color: #666;
}

.jb-account-prefill-note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #ebb73d;
    background: #fff8df;
    color: #55491f;
    font-size: 13px;
}


/* ==========================================================
   v0.5.3 — Existing-account guest booking validation
   ========================================================== */

.jb-message-account-login {
    padding: 28px;
    background: #fff;
    border-left: 4px solid #ebb73d;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jb-message-account-login h2 {
    margin: 6px 0 10px;
}

.jb-message-account-login p {
    max-width: 760px;
}


/* ==========================================================
   v0.5.6 — Account-found alternate email action
   ========================================================== */

.jb-inline-action-form {
    display: inline-flex;
    margin: 0;
}

.jb-secondary-button {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    background: transparent;
}

.jb-message-account-login .jb-checkout-actions {
    align-items: center;
    flex-wrap: wrap;
}


/* ==========================================================
   v0.5.7 — My Account itinerary + detail routing cleanup
   ========================================================== */

.jb-account-itinerary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0 10px;
}

.jb-account-itinerary > div {
    padding-top: 9px;
    border-top: 1px solid #e7e7e7;
}

.jb-account-itinerary small {
    display: block;
    margin-bottom: 4px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10px;
}

.jb-account-itinerary strong {
    display: block;
    color: #1b1f29;
    font-size: 14px;
    line-height: 1.35;
}

.jb-account-booking-number {
    display: block;
    margin-top: 8px;
    color: #4f5560;
}

@media (max-width: 1100px) {
    .jb-account-itinerary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .jb-account-itinerary {
        grid-template-columns: 1fr 1fr;
    }
}


/* v0.5.8 — stable customer booking history/detail */
.jb-account-booking-card {
    grid-template-columns: minmax(0, 2.2fr) minmax(300px, .9fr) auto;
}
.jb-account-itinerary {
    margin-top: 16px;
}
.jb-account-itinerary > div {
    min-width: 0;
}
.jb-account-itinerary strong {
    overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
    .jb-account-booking-card {
        grid-template-columns: 1fr;
    }
}




/* ==========================================================
   v0.6.2 — definitive My Account booking-card layout
   ========================================================== */

.jb-account-shell .jb-account-booking-list .jb-account-booking-card {
    display: block;
    width: 100%;
    padding: 28px 34px 24px;
    box-sizing: border-box;
}

.jb-account-shell .jb-account-booking-heading {
    display: block;
    margin: 0 0 18px;
}

.jb-account-shell .jb-account-booking-heading .jb-status-pill {
    display: inline-block;
    margin-bottom: 8px;
}

.jb-account-shell .jb-account-booking-heading h4 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.jb-account-shell .jb-account-booking-row {
    display: grid;
    grid-template-columns:
        minmax(0, 5fr)
        minmax(320px, 2fr)
        minmax(140px, .8fr);
    column-gap: 32px;
    align-items: start;
    width: 100%;
}

.jb-account-shell .jb-account-booking-row .jb-account-itinerary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    min-width: 0;
}

.jb-account-shell .jb-account-booking-row .jb-account-booking-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
    max-width: none;
}

.jb-account-shell .jb-account-booking-row .jb-account-itinerary > div,
.jb-account-shell .jb-account-booking-row .jb-account-booking-meta > div {
    display: block;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid #e7e7e7;
}

.jb-account-shell .jb-account-booking-row small {
    display: block;
    margin: 0 0 5px;
    min-height: 0;
    font-size: 10px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #777;
    white-space: normal;
}

.jb-account-shell .jb-account-booking-row strong {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #1b1f29;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.jb-account-shell .jb-account-booking-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 62px;
}

.jb-account-shell .jb-account-booking-action .jb-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    white-space: nowrap;
}

.jb-account-shell .jb-account-booking-number {
    display: block;
    margin: 18px 0 0;
    color: #4f5560;
}

@media (max-width: 1200px) {
    .jb-account-shell .jb-account-booking-row {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .jb-account-shell .jb-account-booking-row .jb-account-itinerary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .jb-account-shell .jb-account-booking-action {
        justify-content: flex-start;
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .jb-account-shell .jb-account-booking-list .jb-account-booking-card {
        padding: 22px 20px;
    }

    .jb-account-shell .jb-account-booking-row .jb-account-itinerary {
        grid-template-columns: 1fr 1fr;
    }

    .jb-account-shell .jb-account-booking-row .jb-account-booking-meta {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================
   v0.8.0 — Milestone 9 ticket controls
   ========================================================== */

.jb-account-ticket-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 24px 0;
    padding: 24px 28px;
    border-left: 4px solid #ebb73d;
    background: #f8f4e8;
    border-radius: 4px;
}

.jb-account-ticket-panel h3 {
    margin: 5px 0 7px;
}

.jb-account-ticket-panel p {
    margin: 0;
    max-width: 720px;
}

@media (max-width: 760px) {
    .jb-account-ticket-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
   v1.1.0 — Dual payment method chooser
   ========================================================== */
.jb-payment-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
}
.jb-payment-methods.has-two-gateways {
    grid-template-columns: repeat(2, minmax(0,1fr));
}
.jb-payment-method-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 7px;
}
.jb-payment-method-card h4 {
    margin: 3px 0 8px;
    font-size: 21px;
    color: #1b1f29;
}
.jb-payment-method-card p {
    color: #626262;
}
.jb-payment-method-copy {
    flex: 1 1 auto;
}
.jb-payment-method-kicker {
    display: block;
    color: #b88200;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.jb-card-payment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
    padding: 13px 20px;
    border: 0;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
}
.jb-card-payment-button:hover,
.jb-card-payment-button:focus {
    background: #ebb73d;
    color: #000;
}
.jb-payment-method-card .jb-paypal-button {
    width: 100%;
}

@media (max-width: 760px) {
    .jb-payment-methods.has-two-gateways {
        grid-template-columns: 1fr;
    }
}


/* v1.5.6 — mobile empty-date fallback.
   Android/iOS browsers may intentionally render a native empty date field
   with no yyyy-mm-dd segments. The visual cue below appears only while the
   required native date input is empty and unfocused. */
.jb-date-native-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.jb-date-native-wrap > input[type="date"] {
    width: 100%;
}

.jb-date-mobile-placeholder {
    display: none;
}

@media (max-width: 800px) {
    .jb-date-mobile-placeholder {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        color: #d9d9d9;
        font: inherit;
        line-height: 1;
        pointer-events: none;
        z-index: 2;
    }

    /* Hide the fallback while the native picker is active. */
    .jb-date-native-wrap > input[type="date"]:focus + .jb-date-mobile-placeholder {
        display: none;
    }

    /* Because the field is required, :valid means a real date is selected. */
    .jb-date-native-wrap > input[type="date"]:valid + .jb-date-mobile-placeholder {
        display: none;
    }
}


/* v1.5.7 — consistent calendar affordance in Chrome, Firefox and mobile.
   The browser-native icon is inconsistent (and sometimes absent), so the
   wrapper paints a stable calendar icon while leaving the native date picker intact. */
.jb-date-native-wrap {
    position: relative;
}

.jb-date-native-wrap > input[type="date"] {
    padding-right: 46px !important;
}

.jb-date-native-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}

/* Hide only the painted WebKit/Blink icon; it remains present/clickable underneath. */
.jb-date-native-wrap > input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

/* Keep the mobile yyyy-mm-dd helper clear of the icon. */
@media (max-width: 800px) {
    .jb-date-mobile-placeholder {
        right: 46px;
        white-space: nowrap;
    }
}


/* v1.5.9 — Firefox duplicate calendar-icon correction.
   Firefox already paints its own native date-picker icon reliably.
   Suppress only the Joe Bus overlay in Firefox so the field shows one icon.
   Chrome/Android/iOS retain the custom overlay from v1.5.7. */
@supports (-moz-appearance: none) {
    .jb-date-native-wrap::after {
        display: none !important;
    }

    .jb-date-native-wrap > input[type="date"] {
        padding-right: 13px !important;
    }
}