/* Dark mode overrides specific to this site. */

@media (prefers-color-scheme: dark) {
    .separator-or::before {
        background-color: #444;
    }

    .separator-or span {
        background-color: #1f1f1f;
        color: #9e9e9e;
    }

    .payment-option-selector .button.active {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }

    /* Dark theme for payment button loading state */
    #payment-request-button:empty {
        background-color: #2a2a2a;
    }
    
    #payment-request-button:empty::after {
        border-color: #444;
        border-top-color: #888;
    }

    /* Dark theme for Stripe Elements */
    .stripe-element {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    .stripe-element--focus {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #6a9fff;
        box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.3);
    }

    .stripe-element--invalid {
        border-color: #dc3545;
    }
}

@media (prefers-color-scheme: dark) {
    /* General background */
    body, .grid-container, .accordion-title, .form-inline, .thumbnail-container, .challengetile, .slick-slider {
        background-color: #121212; /* Dark background for the main areas */
        color: #E0E0E0; /* Light text for readability */
    }
    .accordion-content {
        background-color: #1f1f1f;
        color: #e0e0e0;
        border-color: #333;
    }
    .challengetile:hover {
        background-color: #1A1A1A;
    }
    body, div, h1, h2, h3, h4, h5, h6, p, ul li, ol li, label {
        color: #E0E0E0 !important; 
    }
    .pricing-table li {
        color: #bdc3c7; /* Light text for readability */
    }
    /* Buttons and interactive elements */
    .button, .text-link-button, .input-number-group .input-number-decrement,
    .input-number-group .input-number-increment, .togglebox label, .pricing-table .title,
    .ajax__calendar_hover, .slick-prev:before, .slick-next:before {
        background-color: #333; /* Darker element background */
        color: #FFF; /* White text for contrast */
        border-color: #444; /* Slightly lighter border for visibility */
    }    
    .feedback-button {
             background-color: unset;
         }
    tbody, tfoot, thead {
        background-color: #2E2E2E;
    }
    tbody tr:nth-child(2n) {
        background-color: #3A3A3A;
    }
    table.hover tbody tr:hover {
        background-color: #4D4D4D;
    }
    table.hover:not(.unstriped) tr:nth-of-type(2n):hover {
        background-color: #4D4D4D;
    }
    table.hover thead tr:hover {
        background-color: #4D4D4D;
    }
    #Body_cphBody_wzBooking tbody td, #Body_cphBody_wzBooking table tbody, #cphBody_wzReg tbody td, #cphBody_wzReg table tbody, #cphBody_wzPayment tbody td, #cphBody_wzPayment table tbody {
        background-color: #2E2E2E;
    }
    .tabs-content {
        background: #2E2E2E;
    }
    .tabs {
        background: #2E2E2E;
    }
    .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] {
        background: #3A3A3A;
        color: #bdc3c7;
    }
    .challengetile .registration-id {
        color: #065f46 !important;
    }
    /* Special states for buttons */
    .feedback-button[data-response="true"]:hover, .feedback-button[data-response="true"]:focus {
        background-color: #198754; /* Bootstrap green for success */
    }

    .feedback-button[data-response="false"]:hover, .feedback-button[data-response="false"]:focus {
        background-color: #dc3545; /* Bootstrap red for danger */
    }

    .button.success, .label.success, .menu a:hover, .menu a.active,
    ul.menu.vertical li a:hover, ul.menu.vertical li a.active {
        background-color: #065f46; /* Dark green for success and active states */
    }

    /* Text and links */
    .text-link-button:hover, .text-link-button:focus, body a, .side-nav li a {
        color: #4CAF50; /* Bright green for hover states on links */
        text-decoration: underline;
    }

    /* Form elements and special components */
    .form-inline input, .form-inline button, .input-number-group input[type=number] {
        background-color: #2C2C2C; /* Slightly lighter grey for input backgrounds */
        color: #FFF; /* White text inside inputs */
    }
    
    /* Standard input fields and form controls */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    .form-control {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #6a9fff;
        box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.3);
    }
    .form-control:focus {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #6a9fff;
        box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.3);
    }
    
    /* Placeholder text */
    input::placeholder,
    textarea::placeholder {
        color: #999;
    }

    /* Breadcrumbs and navigation */
    .breadcrumbs ol li a, .breadcrumbs ul li a, .menu.vertical > li, .menu.vertical > li a:not(.button) {
        color: #9E9E9E; /* Grey text for less focus attention */
    }

    .top-bar, .top-bar ul {
        background-color: #333; /* Dark grey background for top bar */
    }

    /* Calendar and specific controls */
    .ajax__calendar_container, .pricing-table, .ajax__calendar_day, .ajax__calendar_header .ajax__calendar_hover,
    .ajax__calendar_invalid:hover {
        background-color: #222; /* Very dark background for components like calendars */
        color: #CCC; /* Lighter text for readability */
    }

    /* Progress bars and sliders */
    progress[value]::-webkit-progress-bar {
        background-color: #555; /* Darker grey for progress bar background */
    }

    progress[value]::-webkit-progress-value {
        background-image: linear-gradient(to right, #0d6efd, #6610f2); /* Gradient for progress value */
    }

    #jQueryProgressFormBar > div, #jQueryProgressFormBar > div.warn, #jQueryProgressFormBar > div.error {
        background-color: #444; /* Uniform background for progress states */
    }

    /* Enhancements for visibility */
    .fieldset, .divider, hr {
        border-color: #333; /* Dark borders for separation */
    }

    /* Icons and decorative elements */
    .time.icon strong, .pricing-table .price {
        background-color: #666; /* Mid grey for standout elements like icons */
    }

    .pretty.p-switch input:checked ~ .state label:after {
        background-color: #4CAF50; /* Bright green for toggles */
    }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #6a9fff;
        box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.3);
    }
    input::placeholder,
    textarea::placeholder {
        color: #888;
    }
    input[disabled],
    textarea[disabled],
    select[disabled] {
        background-color: #1a1a1a;
        color: #666;
    }
    .input-group-label {
        background-color: #333;
        color: #e0e0e0;
        border-color: #444;
    }
    .callout{
        background-color: #222;
    }
    .callout.secondary {
        background-color: #1a1a1a;
    }
    .card-section {
        background-color: #2E2E2E;
    }
    .card-divider {
        background-color: #262626;
    }
    table.unstriped tbody tr {
        background-color: #2E2E2E;
    }
    table tbody tr {
        background-color: #2E2E2E;
    }
    .callout.success {
        background-color: #1B3A2B;
        border-color: #2E7D32;
    }
    .callout.warning {
        background-color: #3A2B1B;
        border-color: #F57C00;
    }
    .callout.alert {
        background-color: #3A1B1B;
        border-color: #D32F2F;
    }
    .callout.info {
        background-color: #1B2B3A;
        border-color: #1976D2;
    }
    .callout.primary {
        background-color: #1B1B3A;
        border-color: #3F51B5;
    }
    .callout.secondary {
        background-color: #2B2B2B;
        border-color: #424242;
    }
    /* Modal windows */

    /* Payment form dark theme enhancements */
    .payment-submit {
        background-color: #065f46;
        color: #ffffff;
        border: none;
        transition: background-color 0.3s ease;
    }

    .payment-submit:hover {
        background-color: #047857;
    }

    .payment-submit:active {
        background-color: #065f46;
    }

    .payment-submit:disabled {
        background-color: #1f2937;
        opacity: 0.7;
    }

    .payment-options .button {
        background-color: #1f2937;
        color: #e5e7eb;
        border: 1px solid #374151;
    }

    .payment-options .button:hover {
        background-color: #374151;
    }

    .payment-options .button.active {
        background-color: #065f46;
        border-color: #047857;
    }

    /* Stripe Elements iframe customization */
    .StripeElement {
        background-color: #1f2937;
        border: 1px solid #374151;
        border-radius: 4px;
        padding: 12px;
    }

    .StripeElement--focus {
        border-color: #047857;
        box-shadow: 0 0 0 1px #047857;
    }
    
    .reveal {
        background: #23272e !important;
        color: #e3eaf3 !important;
        border: 1px solid #444b5a !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.7) !important;
    }
    a[rel="external"]::after, .external-link::after, a[rel="external nofollow"]::after {
        filter: invert(1);
    }
    /* Help text dark theme */
    .help-text {
        color: #9E9E9E; /* Grey text for help text in dark theme */
    }
    .help-text small {
        color: #9E9E9E; /* Grey text for small help text in dark theme */
    }
    /* Foundation form text variants */
    .form-text,
    .text-muted {
        color: #9E9E9E !important;
    }
    
    /* Dark theme button styles - dark blue instead of grey */
    .button {
        background-color: #1e3a5f;
        color: #ffffff;
        border: 1px solid #2a4d7a;
        transition: all 0.3s ease;
    }
    
    .button:hover {
        background-color: #2a4d7a;
        color: #ffffff;
        border-color: #3a5d8a;
        box-shadow: 0 2px 4px rgba(42, 77, 122, 0.2);
    }
    
    .button:active {
        background-color: #19304d;
        box-shadow: 0 1px 2px rgba(42, 77, 122, 0.1);
    }
    
    .button.secondary {
        background-color: #2d4158;
        border-color: #3a5270;
    }
    
    .button.secondary:hover {
        background-color: #3a5270;
        border-color: #4a6280;
    }
    
    .button.alert {
        background-color: #8b2635;
        border-color: #a73042;
    }
    
    .button.alert:hover {
        background-color: #a73042;
        border-color: #c33a4f;
    }
    
    .button.tiny,
    .button.small {
        background-color: #1e3a5f;
        border-color: #2a4d7a;
    }
    
    .button.tiny:hover,
    .button.small:hover {
        background-color: #2a4d7a;
        border-color: #3a5d8a;
    }
    
    /* Button group dark theme */
    .button-group .button {
        background-color: #1e3a5f;
        border-color: #2a4d7a;
    }
    
    .button-group .button:hover {
        background-color: #2a4d7a;
    }
    
    .button-group .button.active {
        background-color: #3a5d8a;
        border-color: #4a6d9a;
        box-shadow: 0 0 0 2px rgba(58, 93, 138, 0.3);
    }
    
    /* Table button adjustments */
    table .button {
        margin-bottom: 0;
    }
}

@media (prefers-color-scheme: dark) {
    .payment-form .form-control,
    .payment-form input[type="text"],
    .payment-form input[type="email"],
    .payment-form input[type="password"],
    .payment-form input[type="number"],
    .payment-form input[type="date"],
    .payment-form input[type="tel"],
    .payment-form textarea,
    .payment-form select,
    .payment-form .stripe-element,
    .StripeElement {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    .payment-form .form-control:focus,
    .payment-form .stripe-element--focus,
    .StripeElement--focus {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #6a9fff;
        box-shadow: 0 0 0 2px rgba(106, 159, 255, 0.3);
    }

    .payment-form input::placeholder,
    .payment-form textarea::placeholder {
        color: #888;
    }

    .payment-form .input-group-label {
        background-color: #333;
        color: #e0e0e0;
        border-color: #444;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --autofill-background: #2a2a2a;
        --autofill-text: #f5f5f5;
    }
}