/*
 * 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-wechat-copy > p:not(.service-kicker),
html.dark-mode .contact-wechat-figure figcaption,
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 .contact-wechat-panel,
html.dark-mode .services-flyer-tile,
html.dark-mode .quick-link-card,
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 .quick-link-card {
    color: var(--dark-text);
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border);
    box-shadow: 0 12px 30px var(--dark-shadow);
}

html.dark-mode .quick-links-directory {
    background-color: var(--dark-page);
}

html.dark-mode .quick-link-card h2 {
    color: var(--dark-text);
}

html.dark-mode .quick-link-card p {
    color: var(--dark-muted) !important;
}

html.dark-mode .quick-link-card .btn-outline-dark {
    color: var(--dark-text);
    background-color: transparent;
    border-color: var(--dark-muted);
}

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

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-wechat-section,
html.dark-mode .contact-service-strip,
html.dark-mode .services-flyer-section,
html.dark-mode .services-wechat-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 .contact-social-links a {
    color: var(--dark-text) !important;
    background: #111827;
    border-color: var(--dark-border);
}

html.dark-mode .contact-social-links a:hover,
html.dark-mode .contact-social-links a:focus-visible {
    color: #171300 !important;
    background: #fbbf24;
    border-color: #fbbf24;
}

html.dark-mode .contact-social-links > span.is-pending {
    color: var(--dark-muted);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .public-news-banner {
    color: #fef3c7;
    background: #211a08;
    border-color: #6b5312;
}

html.dark-mode .public-news-banner__track i {
    color: #fbbf24;
}

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

html.dark-mode .contact-wechat-panel,
html.dark-mode .contact-wechat-figure {
    border-color: var(--dark-border);
    background: var(--dark-surface);
}

html.dark-mode .contact-wechat-details div {
    border-color: var(--dark-border);
}

html.dark-mode .contact-wechat-details dt {
    color: #67e8b0;
}

html.dark-mode .contact-wechat-tip,
html.dark-mode .services-wechat-chinese {
    color: var(--dark-text) !important;
    background: #152d27;
}

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;
}

/* intl-tel-input is loaded with the deferred Details step. */
html.dark-mode .iti__dropdown-content,
html.dark-mode .iti__country-list {
    color-scheme: dark;
    color: var(--dark-text);
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

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

html.dark-mode .iti__search-input::placeholder,
html.dark-mode .iti__dial-code {
    color: var(--dark-muted);
    opacity: 1;
}

html.dark-mode .iti__country.iti__highlight,
html.dark-mode .iti__country:hover,
html.dark-mode .iti__country:focus {
    color: var(--dark-text);
    background: var(--dark-surface-hover);
}

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);
}

/* ================= COVERAGE MAP MODAL ================= */

html.dark-mode #coverageMapModal .modal-content {
    color: var(--dark-text);
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-mode #coverageMapModal .modal-header {
    background-color: var(--dark-surface);
    border-bottom-color: var(--dark-border);
}

/* ================= 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-chart-card,
html.dark-mode .finance-outcome-stat,
html.dark-mode .finance-analytics-heading > span {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .finance-chart-heading span,
html.dark-mode .finance-outcome-stat > span,
html.dark-mode .finance-outcome-stat > small,
html.dark-mode .finance-chart-empty {
    color: var(--dark-muted);
}

html.dark-mode .finance-outcome-stat > strong {
    color: var(--dark-text);
}

html.dark-mode .finance-bookings-area {
    fill: rgba(251, 191, 36, .12);
}

html.dark-mode .finance-bookings-line {
    stroke: #fbbf24;
}

html.dark-mode .finance-chart-gridline {
    stroke: var(--dark-border);
}

html.dark-mode .finance-chart-axis-label {
    fill: var(--dark-muted);
}

html.dark-mode .finance-bookings-point {
    fill: var(--dark-surface-raised);
    stroke: #fbbf24;
}

html.dark-mode .finance-bookings-point:hover,
html.dark-mode .finance-bookings-point:focus {
    fill: #fbbf24;
}

html.dark-mode .finance-revenue-bar {
    fill: #4ade80;
}

html.dark-mode .finance-revenue-bar:hover,
html.dark-mode .finance-revenue-bar:focus {
    fill: #86efac;
}

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

html.dark-mode .finance-page a.finance-driver-name--inactive,
html.dark-mode .finance-page a.finance-driver-name--inactive:hover,
html.dark-mode .finance-page a.finance-driver-name--inactive:focus {
    color: #f87171 !important;
}

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 .whatsapp-accounting-note {
    color: #d1fae5;
    background: rgba(6, 95, 70, .24);
    border-color: rgba(52, 211, 153, .42);
    border-left-color: #34d399;
}

html.dark-mode .whatsapp-costs-callout__eyebrow {
    color: #6ee7b7;
}

html.dark-mode .whatsapp-pricing-pill--paid {
    color: #fde68a;
    background: rgba(146, 64, 14, .45);
}

html.dark-mode .whatsapp-pricing-pill--free {
    color: #a7f3d0;
    background: rgba(6, 95, 70, .5);
}

html.dark-mode .undo-safety-notice {
    border-color: rgba(251, 191, 36, .36);
    border-left-color: #fbbf24;
    background: rgba(120, 53, 15, .22);
    color: #fde68a;
}

html.dark-mode .undo-safety-notice span {
    color: #fcd34d;
}

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 .earnings-range-bar {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .earnings-filter-title {
    color: var(--dark-text);
}

html.dark-mode .earnings-range-form label,
html.dark-mode .earnings-range-summary > small,
html.dark-mode .earnings-range-summary em {
    color: var(--dark-muted);
}

html.dark-mode .earnings-range-error {
    color: #fecaca;
    background: rgba(127, 29, 29, .28);
    border-color: rgba(248, 113, 113, .42);
}

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 .driver-vehicle-item {
    border-bottom-color: var(--dark-border);
}

html.dark-mode .driver-vehicle-item small,
html.dark-mode .driver-notification-summary > div > small,
html.dark-mode .driver-notification-grid span {
    color: var(--dark-muted);
}

html.dark-mode .driver-notification-summary,
html.dark-mode .driver-notification-grid > div {
    color: var(--dark-text);
    background: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .driver-notification-grid > div {
    background: var(--dark-surface);
}

html.dark-mode .driver-notification-grid .is-enabled {
    color: #86efac;
}

html.dark-mode .driver-notification-grid .is-disabled {
    color: #fca5a5;
}

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);
}

html.dark-mode .tax-guidance {
    color: var(--dark-text);
    background-color: #352b16;
    border-color: #7c6223;
    border-left-color: #f0ad24;
}

html.dark-mode .tax-period {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: 0 6px 20px var(--dark-shadow);
}

html.dark-mode .tax-period summary,
html.dark-mode .tax-summary-card,
html.dark-mode .tax-assumptions {
    color: var(--dark-text);
    background-color: var(--dark-surface-raised);
    border-color: var(--dark-border);
}

html.dark-mode .tax-period-body {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-top-color: var(--dark-border);
}

html.dark-mode .tax-period-heading small,
html.dark-mode .tax-period-meta,
html.dark-mode .tax-summary-card span,
html.dark-mode .tax-summary-card small,
html.dark-mode .tax-assumptions {
    color: var(--dark-muted);
}

html.dark-mode .tax-period-status {
    color: var(--dark-text);
    background-color: var(--dark-surface-hover);
}

html.dark-mode .tax-position-card {
    background-color: #3a2a19;
    border-color: #8f622d;
}

html.dark-mode .tax-period .alert-info {
    color: #b9ecf5;
    background-color: #17343a;
    border-color: #2a6672;
}

/* ================= BLOG AND LATEST-GUIDE COMPONENTS ================= */

html.dark-mode .blog-index h1,
html.dark-mode .blog-index h2,
html.dark-mode .blog-index h3,
html.dark-mode .blog-article h1,
html.dark-mode .blog-article h2,
html.dark-mode .blog-article h3,
html.dark-mode .latest-guides-section h2,
html.dark-mode .latest-guides-section h3 {
    color: var(--dark-text);
}

html.dark-mode .blog-filter .form-control {
    color: var(--dark-text);
    background-color: var(--dark-surface-raised);
    border-color: #6a6a6a;
}

html.dark-mode .blog-filter .form-control:hover {
    border-color: #8b8b8b;
}

html.dark-mode .blog-filter .form-control:focus {
    color: var(--dark-text);
    background-color: var(--dark-surface-hover);
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 0.2rem rgba(255, 216, 84, 0.24);
}

html.dark-mode .blog-filter select.form-control option {
    color: var(--dark-text);
    background-color: var(--dark-surface-raised);
}

html.dark-mode .blog-filter label,
html.dark-mode .blog-index__heading > span,
html.dark-mode .blog-toc summary,
html.dark-mode .blog-quick-answer strong,
html.dark-mode .blog-share > strong {
    color: var(--dark-text);
}

html.dark-mode .blog-sidebar li + li {
    border-top-color: var(--dark-border);
}

html.dark-mode .blog-sidebar__book,
html.dark-mode .blog-mobile-call {
    color: #151515 !important;
    background-color: var(--dark-accent);
    border: 1px solid var(--dark-accent);
}

html.dark-mode .blog-sidebar__book:hover,
html.dark-mode .blog-sidebar__book:focus,
html.dark-mode .blog-mobile-call:hover,
html.dark-mode .blog-mobile-call:focus {
    color: #111 !important;
    background-color: #ffe787;
    border-color: #ffe787;
    text-decoration: none;
}

html.dark-mode .blog-sidebar__book:focus-visible,
html.dark-mode .blog-mobile-call:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

html.dark-mode .blog-index .btn-warning,
html.dark-mode .blog-article .btn-warning,
html.dark-mode .latest-guides-section .btn-warning,
html.dark-mode .error-404-page .btn-warning {
    color: #151515;
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
}

html.dark-mode .blog-index .btn-warning:hover,
html.dark-mode .blog-index .btn-warning:focus,
html.dark-mode .blog-article .btn-warning:hover,
html.dark-mode .blog-article .btn-warning:focus,
html.dark-mode .latest-guides-section .btn-warning:hover,
html.dark-mode .latest-guides-section .btn-warning:focus,
html.dark-mode .error-404-page .btn-warning:hover,
html.dark-mode .error-404-page .btn-warning:focus {
    color: #111;
    background-color: #ffe787;
    border-color: #ffe787;
}

html.dark-mode .blog-index .btn-outline-dark,
html.dark-mode .latest-guides-section .btn-outline-dark,
html.dark-mode .error-404-page .btn-dark {
    color: var(--dark-text);
    background-color: transparent;
    border-color: #a7a7a7;
}

html.dark-mode .blog-index .btn-outline-dark:hover,
html.dark-mode .blog-index .btn-outline-dark:focus,
html.dark-mode .latest-guides-section .btn-outline-dark:hover,
html.dark-mode .latest-guides-section .btn-outline-dark:focus,
html.dark-mode .error-404-page .btn-dark:hover,
html.dark-mode .error-404-page .btn-dark:focus {
    color: #111;
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
}

html.dark-mode .blog-cta .btn-outline-light {
    color: #fff;
    background-color: transparent;
    border-color: #d5d5d5;
}

html.dark-mode .blog-cta .btn-outline-light:hover,
html.dark-mode .blog-cta .btn-outline-light:focus {
    color: #111;
    background-color: #fff;
    border-color: #fff;
}

html.dark-mode .blog-faq .btn-link:hover,
html.dark-mode .blog-faq .btn-link:focus {
    color: var(--dark-accent);
    text-decoration-color: var(--dark-accent);
}

html.dark-mode .blog-share button {
    cursor: pointer;
}

html.dark-mode .blog-share a:hover,
html.dark-mode .blog-share a:focus,
html.dark-mode .blog-share button:hover,
html.dark-mode .blog-share button:focus {
    color: var(--dark-accent);
}

html.dark-mode .blog-share button:focus-visible,
html.dark-mode .blog-toc a:focus-visible,
html.dark-mode .blog-card a:focus-visible,
html.dark-mode .footer-latest-guides a:focus-visible {
    outline: 3px solid var(--dark-accent);
    outline-offset: 3px;
}

html.dark-mode .blog-category {
    color: #1d1800 !important;
    background-color: var(--dark-accent);
}

html.dark-mode .blog-toc a.is-active {
    color: var(--dark-accent);
}

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

html.dark-mode .latest-guides-section .card {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-mode .latest-guides-section .card .text-body {
    color: var(--dark-text) !important;
}

html.dark-mode .latest-guides-section .card .text-muted {
    color: var(--dark-muted) !important;
}

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