/* ================================================================
   Figure13 — Deftform Custom CSS
   Mirrors the f13.io design system.
   Dark mode is default; light mode responds to prefers-color-scheme.
   Upload this file to the `F13io-website_color_match` and 
   `F13io-website_color_match-with_logo` styles at
   https://deftform.com/settings/styles
   ================================================================ */

/* ── Dark (default) ──────────────────────────────────────────── */

body.cs_body {
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media screen and (max-width: 768px) {
    body.cs_body {
        background-color: #0D0D14;
    }
}

.cs_splitbg {
    background-color: #000000;
}

.cs_bodycolor {
    color: #C8C6CC;
}

.cs_textcolor {
    color: #C8C6CC;
}

.cs_secondaryColor {
    color: #706D78;
    opacity: 1 !important;
}

.altcha-checkbox-wrap label {
    color: #C8C6CC;
}

.cs_formbg {
    background-color: #0A0A10;
}

.cs_formbg a {
    color: #C8C6CC;
}

hr {
    border-color: #38364E;
}

/* Fields */
.cs_field {
    background-color: #0A0A10;
    border: 1px solid #38364E;
    color: #C8C6CC;
    border-radius: 6px;
}

.cs_field:focus {
    border-color: #916DF7;
    outline: none;
}

.btn__secondary {
    background-color: #0A0A10;
    border: 1px solid #38364E;
    color: #C8C6CC;
    border-radius: 6px;
}

/* Submit button */
.cs_button {
    background-color: #916DF7;
    border-color: #916DF7;
    color: #FFFFFF;
    border-radius: 6px;
}

.cs_button:hover {
    background-color: #A885F9;
    border-color: #A885F9;
    color: #FFFFFF;
}

/* Validation */
.cs_errortext {
    color: #F0706A;
}

/* Checkboxes / radios */
.cs_check_radio:checked {
    color: #916DF7;
}

/* Rating */
.cs_rating.peer:checked ~ label {
    border: 1px solid #916DF7;
    outline: 2px solid #916DF7;
    outline-offset: -2px;
}

/* Progress bar */
.cs_progress_bg {
    background-color: #1C1B27;
}

.cs_progress {
    background-color: #916DF7;
}

/* Date picker */
.cs_datepicker {
    color: #C8C6CC;
}

/* File upload */
.cs_fileupload {
    background-color: #0A0A10;
    color: #C8C6CC;
}

.cs_fileupload > div {
    border-color: #38364E;
    border-radius: 6px;
}

.cs_uploaded {
    border-color: #38364E;
    border-radius: 6px;
    color: #C8C6CC;
}

/* Country select */
.cs_field.countryselect .nice-select-dropdown {
    background-color: #0A0A10;
    border-color: #38364E;
    color: #C8C6CC;
}

.cs_field.countryselect .nice-select-dropdown .option:hover,
.cs_field.countryselect .nice-select-dropdown .option.focus,
.cs_field.countryselect .nice-select-dropdown .option.selected.focus {
    background-color: #1C1B27;
    color: #C8C6CC;
}

/* Phone input (iti) */
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary {
    border-color: #38364E;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover {
    background-color: #1C1B27;
}

.iti__country-list {
    background-color: #0A0A10;
    border-color: #38364E;
    color: #C8C6CC;
}

.iti__country.iti__highlight {
    background-color: #1C1B27;
    color: #C8C6CC;
}

.iti__search-input {
    background-color: #0A0A10 !important;
    border-color: #38364E !important;
    color: #C8C6CC !important;
}

.iti--inline-dropdown .iti__dropdown-content {
    border-color: #38364E;
}

/* Address autocomplete */
.address-autocomplete-element {
    --gmpx-color-surface: #0A0A10;
    --gmpx-color-on-surface: #C8C6CC;
    --gmpx-color-on-surface-variant: #C8C6CC;
    --gmpx-color-primary: #916DF7;
    --gmpx-font-family-base: inherit;
    --gmpx-font-size-base: 0.875rem;
    --gmpx-border-radius: 6px;
    border: 1px solid #38364E;
    border-radius: 6px;
    background-color: #0A0A10;
}

.address-autocomplete-element:focus-within {
    border-color: #916DF7;
}


/* ── Light mode ──────────────────────────────────────────────── */

@media (prefers-color-scheme: light) {

    body.cs_body {
        background-color: #FFFFFF;
    }

    @media screen and (max-width: 768px) {
        body.cs_body {
            background-color: #F5F4FA;
        }
    }

    .cs_splitbg {
        background-color: #FFFFFF;
    }

    .cs_bodycolor {
        color: #2D2B38;
    }

    .cs_textcolor {
        color: #2D2B38;
    }

    .cs_secondaryColor {
        color: #8A8596;
    }

    .altcha-checkbox-wrap label {
        color: #2D2B38;
    }

    .cs_formbg {
        background-color: #F5F4FA;
    }

    .cs_formbg a {
        color: #2D2B38;
    }

    hr {
        border-color: #D5D2E8;
    }

    /* Fields */
    .cs_field {
        background-color: #F5F4FA;
        border-color: #D5D2E8;
        color: #2D2B38;
    }

    .cs_field:focus {
        border-color: #6B42D4;
    }

    .btn__secondary {
        background-color: #F5F4FA;
        border-color: #D5D2E8;
        color: #2D2B38;
    }

    /* Submit button */
    .cs_button {
        background-color: #6B42D4;
        border-color: #6B42D4;
        color: #FFFFFF;
    }

    .cs_button:hover {
        background-color: #7B52E4;
        border-color: #7B52E4;
        color: #FFFFFF;
    }

    /* Validation */
    .cs_errortext {
        color: #C0392B;
    }

    /* Checkboxes / radios */
    .cs_check_radio:checked {
        color: #6B42D4;
    }

    /* Rating */
    .cs_rating.peer:checked ~ label {
        border-color: #6B42D4;
        outline-color: #6B42D4;
    }

    /* Progress bar */
    .cs_progress_bg {
        background-color: #D5D2E8;
    }

    .cs_progress {
        background-color: #6B42D4;
    }

    /* Date picker */
    .cs_datepicker {
        color: #2D2B38;
    }

    /* File upload */
    .cs_fileupload {
        background-color: #F5F4FA;
        color: #2D2B38;
    }

    .cs_fileupload > div {
        border-color: #D5D2E8;
    }

    .cs_uploaded {
        border-color: #D5D2E8;
        color: #2D2B38;
    }

    /* Country select */
    .cs_field.countryselect .nice-select-dropdown {
        background-color: #F5F4FA;
        border-color: #D5D2E8;
        color: #2D2B38;
    }

    .cs_field.countryselect .nice-select-dropdown .option:hover,
    .cs_field.countryselect .nice-select-dropdown .option.focus,
    .cs_field.countryselect .nice-select-dropdown .option.selected.focus {
        background-color: #EEEDF7;
        color: #2D2B38;
    }

    /* Phone input (iti) */
    .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary {
        border-color: #D5D2E8;
    }

    .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover {
        background-color: #EEEDF7;
    }

    .iti__country-list {
        background-color: #F5F4FA;
        border-color: #D5D2E8;
        color: #2D2B38;
    }

    .iti__country.iti__highlight {
        background-color: #EEEDF7;
        color: #2D2B38;
    }

    .iti__search-input {
        background-color: #F5F4FA !important;
        border-color: #D5D2E8 !important;
        color: #2D2B38 !important;
    }

    .iti--inline-dropdown .iti__dropdown-content {
        border-color: #D5D2E8;
    }

    /* Address autocomplete */
    .address-autocomplete-element {
        --gmpx-color-surface: #F5F4FA;
        --gmpx-color-on-surface: #2D2B38;
        --gmpx-color-on-surface-variant: #2D2B38;
        --gmpx-color-primary: #6B42D4;
        border-color: #D5D2E8;
        background-color: #F5F4FA;
    }

    .address-autocomplete-element:focus-within {
        border-color: #6B42D4;
    }
}