/*
 * Public-site dark mode.
 *
 * Light-mode rules remain in their existing stylesheets. Keeping every dark
 * override here makes the feature easy to audit, disable, or roll back.
 */

/* ================= NAVBAR TOGGLE ================= */

.theme-toggle-item {
    display: flex;
    width: 58px;
    min-height: 44px;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
}

.theme-toggle {
    display: inline-flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme-toggle__control {
    display: inline-flex;
    width: 3em;
    height: 1.5em;
    margin: 0;
    padding: 0.15em;
    align-items: center;
    font-size: 16px;
    color: #fbbf24;
    background-color: #394047;
    border: 0;
    border-radius: 0.75em;
    box-shadow:
        0.125em 0.125em 0 0.125em rgba(0, 0, 0, 0.28) inset,
        0 0 0 1px #68717a;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle__control::before,
.theme-toggle__control::after {
    content: "";
    display: block;
    flex: 0 0 auto;
}

.theme-toggle__control::before {
    width: 1.2em;
    height: 1.2em;
    background-color: #d7d7d7;
    border-radius: 50%;
    transition: background-color 0.15s ease, transform 0.3s ease;
    z-index: 1;
}

.theme-toggle__control::after {
    width: 1.2em;
    height: 1em;
    margin-left: 0;
    background:
        linear-gradient(transparent 50%, rgba(0, 0, 0, 0.15) 0) 0 50% / 50% 100%,
        repeating-linear-gradient(90deg, #bbb 0, #bbb 20%, #999 20%, #999 40%) 0 50% / 50% 100%,
        radial-gradient(circle at 50% 50%, #888 25%, transparent 26%);
    background-repeat: no-repeat;
    border: 0.25em solid transparent;
    border-right: 0 solid transparent;
    border-left: 0.4em solid #d8d8d8;
    transform: translateX(-22.5%);
    transform-origin: 25% 50%;
    transition: border-left-color 0.15s ease, transform 0.3s ease;
}

.theme-toggle__control:checked {
    background-color: #505860;
    box-shadow:
        0.125em 0.125em 0 0.125em rgba(0, 0, 0, 0.18) inset,
        0 0 0 1px #7b858e;
}

.theme-toggle__control:checked::before {
    background-color: #fbbf24;
    opacity: 1;
    box-shadow: 0 0 7px rgba(251, 191, 36, 0.42);
    transform: translateX(125%);
}

.theme-toggle__control:checked::after {
    border-left-color: #fbbf24;
    opacity: 1;
    transform: translateX(-2.5%) rotateY(180deg);
}

.theme-toggle__control:focus-visible {
    outline: 3px solid #ffd854;
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .theme-toggle-item {
        width: 58px;
        margin: 4px auto 0;
    }
}

/* ================= DARK THEME TOKENS ================= */

html.dark-mode {
    color-scheme: dark;
    --dark-page: #121212;
    --dark-surface: #1e1e1e;
    --dark-surface-raised: #262626;
    --dark-surface-hover: #303030;
    --dark-border: #454545;
    --dark-text: #f2f2f2;
    --dark-muted: #bdbdbd;
    --dark-accent: #ffd854;
    --dark-shadow: rgba(0, 0, 0, 0.38);
}

html.dark-mode body {
    color: var(--dark-text);
    background: var(--dark-page);
}

html.dark-mode a:not(.btn):not(.nav-link):not(.footer a) {
    color: #ffe28a;
}

html.dark-mode .text-dark,
html.dark-mode .text-body {
    color: var(--dark-text) !important;
}

html.dark-mode .text-muted,
html.dark-mode .review-user span,
html.dark-mode .review-stars-row small,
html.dark-mode .review-text,
html.dark-mode .google-rating .rating-text,
html.dark-mode .contact-section-lead,
html.dark-mode .contact-method-card p,
html.dark-mode .contact-form-panel > p,
html.dark-mode .contact-service-strip p:not(.service-kicker),
html.dark-mode .services-section-lead,
html.dark-mode .services-directory-card p,
html.dark-mode .services-vehicle-item p,
html.dark-mode .services-detail-tile p,
html.dark-mode .services-directory-card ul,
html.dark-mode .services-info-list div,
html.dark-mode .service-intro,
html.dark-mode .service-step-card p,
html.dark-mode .service-feature-card p,
html.dark-mode .terms-content p {
    color: var(--dark-muted) !important;
}

/* ================= SURFACES AND CARDS ================= */

html.dark-mode .page-loader {
    background: rgba(18, 18, 18, 0.97);
}

html.dark-mode .page-loader__panel,
html.dark-mode .about-service-link,
html.dark-mode .contact-section,
html.dark-mode .contact-method-card,
html.dark-mode .contact-detail-list div,
html.dark-mode .contact-form-panel,
html.dark-mode .services-flyer-tile,
html.dark-mode .services-directory-card,
html.dark-mode .services-vehicle-item,
html.dark-mode .services-map-panel,
html.dark-mode .services-detail-tile,
html.dark-mode .service-detail-section,
html.dark-mode .service-step-card,
html.dark-mode .service-feature-card,
html.dark-mode .card,
html.dark-mode .accordion .card,
html.dark-mode .accordion .card-header,
html.dark-mode .vehicle-card-modern,
html.dark-mode .feature-card-modern,
html.dark-mode .about-card,
html.dark-mode .review-card-modern,
html.dark-mode .toast,
html.dark-mode .table {
    color: var(--dark-text);
    background: var(--dark-surface);
}

html.dark-mode .bg-light,
html.dark-mode .bg-white {
    color: var(--dark-text) !important;
    background-color: var(--dark-page) !important;
}

html.dark-mode .contact-section--muted,
html.dark-mode .contact-service-strip,
html.dark-mode .services-flyer-section,
html.dark-mode .service-detail-section--muted,
html.dark-mode .service-related,
html.dark-mode .form-tile,
html.dark-mode .fullwidth-tile {
    color: var(--dark-text);
    background: var(--dark-page) !important;
}

html.dark-mode .booking-card {
    color: var(--dark-text);
    background: var(--dark-surface);
    box-shadow: 0 10px 30px var(--dark-shadow);
}

html.dark-mode .about-service-link:hover,
html.dark-mode .about-service-link:focus,
html.dark-mode .contact-method-card:hover,
html.dark-mode .contact-method-card:focus,
html.dark-mode .services-directory-card:hover,
html.dark-mode .services-vehicle-item:hover,
html.dark-mode .services-detail-tile:hover,
html.dark-mode .service-step-card:hover,
html.dark-mode .service-feature-card:hover {
    color: var(--dark-text);
    box-shadow: 0 16px 34px var(--dark-shadow);
}

html.dark-mode .services-flyer-tile {
    border-color: var(--dark-border);
}

html.dark-mode .services-flyer-content h2,
html.dark-mode .services-flyer-benefits {
    color: var(--dark-text);
}

html.dark-mode .google-profile-avatar {
    background: #fff;
    border-color: var(--dark-border);
}

/* ================= FORMS AND CUSTOM SELECTS ================= */

html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode .booking-select-button,
html.dark-mode .booking-select-menu,
html.dark-mode .booking-select-option,
html.dark-mode .location-results {
    color: var(--dark-text);
    background-color: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .form-control::placeholder {
    color: #a8a8a8;
    opacity: 1;
}

html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus,
html.dark-mode .booking-select-button:focus {
    color: var(--dark-text);
    background-color: var(--dark-surface-raised);
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 0.2rem rgba(255, 216, 84, 0.22);
}

html.dark-mode .booking-select-button::after {
    border-color: var(--dark-muted);
}

html.dark-mode .booking-select-option {
    border-bottom-color: var(--dark-border);
}

html.dark-mode .booking-select-button.is-placeholder,
html.dark-mode .booking-select-fee-note {
    color: #b5b5b5;
}

html.dark-mode .booking-select-option:hover,
html.dark-mode .booking-select-option:focus,
html.dark-mode .result-item:hover {
    color: var(--dark-text);
    background: var(--dark-surface-hover);
}

html.dark-mode .booking-select-option:disabled {
    color: #929292;
    background: #202020;
}

html.dark-mode .result-item:active {
    background: #3a3a3a;
}

html.dark-mode .is-invalid,
html.dark-mode .form-control.is-invalid {
    color: var(--dark-text);
    background-color: #361f22;
}

html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:hover,
html.dark-mode input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-text);
    box-shadow: 0 0 0 1000px var(--dark-surface-raised) inset;
    transition: background-color 9999s ease-out 0s;
}

/* ================= INTERACTIVE COMPONENTS ================= */

html.dark-mode .wizard-step {
    color: var(--dark-muted);
}

html.dark-mode .wizard-step:hover {
    color: var(--dark-text);
    background: var(--dark-surface-hover);
}

html.dark-mode .wizard-step.active {
    color: var(--dark-text);
    border-bottom-color: var(--dark-accent);
}

html.dark-mode .auckland-clock-pill {
    color: #ffe991;
    background: #453d20;
    border-color: #8f7925;
}

html.dark-mode .auckland-clock-pill::after {
    color: var(--dark-text);
    background: var(--dark-surface-hover);
    border: 1px solid var(--dark-border);
}

html.dark-mode .accordion .card {
    border: 1px solid var(--dark-border);
}

html.dark-mode .accordion .card-header {
    border-bottom-color: var(--dark-border);
}

html.dark-mode .accordion .btn-link,
html.dark-mode .accordion .btn-link:hover {
    color: var(--dark-text);
}

html.dark-mode .table,
html.dark-mode .table th,
html.dark-mode .table td,
html.dark-mode .table-bordered,
html.dark-mode .table-bordered th,
html.dark-mode .table-bordered td {
    border-color: var(--dark-border);
}

html.dark-mode .table-hover tbody tr:hover {
    color: var(--dark-text);
    background: var(--dark-surface-hover);
}

html.dark-mode .toast-body {
    color: var(--dark-text);
    background: var(--dark-surface);
}

html.dark-mode .close {
    color: #fff;
    text-shadow: none;
}

html.dark-mode .btn-light {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .btn-outline-dark {
    color: var(--dark-text);
    border-color: var(--dark-muted);
}

html.dark-mode .btn-outline-dark:hover {
    color: #111;
    background: var(--dark-accent);
    border-color: var(--dark-accent);
}

/* ================= FINANCE AND DRIVER APPS ================= */

html.dark-mode .finance-card,
html.dark-mode .finance-panel,
html.dark-mode .settle-modal-content,
html.dark-mode .print-modal-content,
html.dark-mode .driver-card,
html.dark-mode .driver-page .modal-content {
    color: var(--dark-text);
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: 0 8px 24px var(--dark-shadow);
}

html.dark-mode .finance-card-link,
html.dark-mode .finance-card-link:hover,
html.dark-mode .customer-link {
    color: inherit;
}

html.dark-mode .finance-print-button {
    color: var(--dark-text) !important;
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-mode .finance-print-button:hover,
html.dark-mode .finance-print-button:focus {
    color: var(--dark-text) !important;
    background: var(--dark-surface-raised);
}

html.dark-mode .finance-card span,
html.dark-mode .finance-card small,
html.dark-mode .finance-total span,
html.dark-mode .finance-driver-phone,
html.dark-mode .finance-booking-date,
html.dark-mode .finance-booking-time,
html.dark-mode .finance-booking-id,
html.dark-mode .driver-booking-date,
html.dark-mode .driver-booking-time,
html.dark-mode .driver-booking-reference,
html.dark-mode .driver-balance small,
html.dark-mode .label {
    color: var(--dark-muted);
}

html.dark-mode .finance-page .table-striped tbody tr:nth-of-type(odd),
html.dark-mode .driver-page .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.035);
}

html.dark-mode .finance-table tfoot th,
html.dark-mode .driver-profile-table th {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
}

html.dark-mode .finance-settlement-summary {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .balance-pill {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .balance-pill strong {
    color: var(--dark-text);
}

html.dark-mode .balance-payable {
    background: #3a2a19;
    border-color: #8f622d;
}

html.dark-mode .balance-receivable {
    background: #3c2022;
    border-color: #8f444a;
}

html.dark-mode .balance-settled {
    background: #173723;
    border-color: #377a4e;
}

html.dark-mode .finance-good {
    color: #69db8a;
}

html.dark-mode .finance-bad {
    color: #ff8b91;
}

html.dark-mode .driver-page .modal-header,
html.dark-mode .driver-page .modal-footer,
html.dark-mode .finance-page hr,
html.dark-mode .driver-page hr {
    border-color: var(--dark-border);
}

html.dark-mode .driver-page .iti__country-list {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .driver-page .iti__country.iti__highlight {
    background: var(--dark-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__control,
    .theme-toggle__control::before,
    .theme-toggle__control::after {
        transition: none;
    }
}