:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --brand-primary: #ec7a01;
    --brand-secondary: #f89a2f;
    --brand-dark: #2e2e2e;
    --brand-dark-soft: #333333;
    --brand-white: #ffffff;
    --glass: rgba(255, 255, 255, 0.88);
    --glass-strong: rgba(255, 255, 255, 0.96);
    --text-main: var(--brand-dark);
    --line: rgba(248, 154, 47, 0.4);
    --focus-ring: 0 0 0 0.2rem rgba(236, 122, 1, 0.25);
    --bg-layer-1: radial-gradient(circle at 14% 20%, rgba(248, 154, 47, 0.18) 0%, rgba(248, 154, 47, 0) 40%);
    --bg-layer-2: radial-gradient(circle at 86% 10%, rgba(236, 122, 1, 0.14) 0%, rgba(236, 122, 1, 0) 42%);
    --bg-layer-3: radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 48%);
    --bg-layer-4: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 154, 47, 0.14) 45%, rgba(255, 255, 255, 0.96) 100%);
    --bg-grid: rgba(248, 154, 47, 0.08);
    --bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(248, 154, 47, 0.24) 100%);
    --container-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 154, 47, 0.22) 100%);
    --container-shadow:
        0 0 0 1px rgba(248, 154, 47, 0.26),
        0 0 28px rgba(236, 122, 1, 0.2),
        0 0 52px rgba(248, 154, 47, 0.16),
        0 24px 48px rgba(46, 46, 46, 0.18);
    --container-before-bg: linear-gradient(130deg, rgba(236, 122, 1, 0.2) 8%, rgba(248, 154, 47, 0.16) 52%, rgba(255, 255, 255, 0.22) 96%);
    --character-glow: rgba(236, 122, 1, 0.35);
    --form-border: rgba(46, 46, 46, 0.2);
    --form-inset-glow: rgba(248, 154, 47, 0.16);
    --form-drop-shadow: rgba(46, 46, 46, 0.2);
    --input-bg: rgba(255, 255, 255, 0.92);
    --input-border: rgba(46, 46, 46, 0.26);
    --input-placeholder: rgba(51, 51, 51, 0.7);
    --input-focus-border: rgba(248, 154, 47, 0.86);
    --input-focus-glow: rgba(236, 122, 1, 0.3);
    --input-focus-bg: rgba(255, 255, 255, 0.98);
    --btn-border: rgba(248, 154, 47, 0.65);
    --btn-text: #ffffff;
    --btn-bg: linear-gradient(120deg, rgba(236, 122, 1, 0.9) 0%, rgba(248, 154, 47, 0.9) 100%);
    --btn-shadow: rgba(236, 122, 1, 0.28);
    --btn-hover-border: rgba(248, 154, 47, 0.95);
    --btn-hover-shadow: rgba(248, 154, 47, 0.45);
    --progress-color: var(--brand-secondary);
    --progress-shadow: rgba(236, 122, 1, 0.35);
    --bs-body-color: var(--text-main);
    --bs-body-color-rgb: 46, 46, 46;
    --bs-body-bg: var(--brand-white);
    --bs-tertiary-bg: rgba(248, 154, 47, 0.1);
    --bs-border-color-translucent: rgba(248, 154, 47, 0.24);
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --glass: rgba(46, 46, 46, 0.78);
    --glass-strong: rgba(51, 51, 51, 0.9);
    --text-main: var(--brand-white);
    --bg-layer-1: radial-gradient(circle at 14% 20%, rgba(248, 154, 47, 0.24) 0%, rgba(248, 154, 47, 0) 40%);
    --bg-layer-2: radial-gradient(circle at 86% 10%, rgba(236, 122, 1, 0.2) 0%, rgba(236, 122, 1, 0) 42%);
    --bg-layer-3: radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 48%);
    --bg-layer-4: linear-gradient(145deg, rgba(46, 46, 46, 0.96) 0%, rgba(51, 51, 51, 0.94) 45%, rgba(46, 46, 46, 0.98) 100%);
    --bg-grid: rgba(248, 154, 47, 0.06);
    --bg-overlay: linear-gradient(180deg, rgba(46, 46, 46, 0.2) 0%, rgba(46, 46, 46, 0.68) 100%);
    --container-bg: #1a1d1c;
    --container-shadow:
        0 0 0 1px rgba(248, 154, 47, 0.24),
        0 0 28px rgba(236, 122, 1, 0.35),
        0 0 52px rgba(248, 154, 47, 0.2),
        0 24px 48px rgba(46, 46, 46, 0.45);
    --container-before-bg: linear-gradient(130deg, rgba(236, 122, 1, 0.24) 8%, rgba(248, 154, 47, 0.18) 52%, rgba(255, 255, 255, 0.16) 96%);
    --character-glow: rgba(236, 122, 1, 0.45);
    --form-border: rgba(255, 255, 255, 0.24);
    --form-inset-glow: rgba(248, 154, 47, 0.1);
    --form-drop-shadow: rgba(46, 46, 46, 0.4);
    --input-bg: #282b28;
    --input-border: rgba(255, 255, 255, 0.32);
    --input-placeholder: rgba(255, 255, 255, 0.72);
    --input-focus-border: rgba(248, 154, 47, 0.86);
    --input-focus-glow: rgba(236, 122, 1, 0.3);
    --input-focus-bg: rgba(46, 46, 46, 0.92);
    --btn-border: rgba(248, 154, 47, 0.55);
    --btn-text: #ffffff;
    --btn-bg: linear-gradient(120deg, rgba(236, 122, 1, 0.3) 0%, rgba(248, 154, 47, 0.24) 100%);
    --btn-shadow: rgba(236, 122, 1, 0.24);
    --btn-hover-border: rgba(248, 154, 47, 0.88);
    --btn-hover-shadow: rgba(248, 154, 47, 0.4);
    --progress-color: var(--brand-secondary);
    --progress-shadow: rgba(236, 122, 1, 0.45);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg: var(--brand-dark);
    --bs-tertiary-bg: var(--brand-dark-soft);
}

body {
    background-image:
        var(--bg-layer-1),
        var(--bg-layer-2),
        var(--bg-layer-3),
        var(--bg-layer-4),
        url("../images/new-website-form-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-main);
    font-weight: 100 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg,
            var(--bg-grid) 0,
            var(--bg-grid) 1px,
            transparent 1px,
            transparent 42px);
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--bg-overlay);
    mix-blend-mode: multiply;
    z-index: -1;
}

.form-container {
    position: relative;
    min-height: 43rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--container-bg);
    box-shadow: var(--container-shadow);
    backdrop-filter: blur(8px);
    overflow: hidden;
}


.character-gramophone {
    position: absolute;
    width: 20%;
    right: -15px;
    top: 41px;
    filter: drop-shadow(0 0 12px var(--character-glow));
}

.form {
    position: relative;
    z-index: 1;
    background: var(--glass);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--form-border);
    box-shadow:
        inset 0 0 24px var(--form-inset-glow),
        0 10px 30px var(--form-drop-shadow);
    min-height: 500px;
}

.bg-dark {
    background-color: var(--glass-strong) !important;
}

label {
    font-size: 14px !important;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

button {
    font-size: 12px !important;
}

.character-parent {
    position: relative;
}

.character {
    position: absolute;
    width: 37%;
    left: -247px;
    bottom: -70px;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 16px var(--character-glow));
}

.footer {
    background-color: transparent !important;
    padding: 20px 0;
    position: static;
    bottom: 0;
    width: 100%;
}

.footer * {
    color: var(--text-main) !important;
}

.bg-dark p {
    color: var(--text-main);
}

a.form-radio.form-radio-primary.active>i,
.form-radio.form-radio-primary>input[type="radio"]:checked+i {
    background-color: var(--brand-primary);
    box-shadow: 0 0 10px rgba(236, 122, 1, 0.72);
}

.form-control,
.form-select {
    color: var(--text-main);
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--bs-body-bg);
}

.form-field .form-label,
.form-label, .form-select{
    margin-bottom: 0.4rem;
    font-weight: 200;
    line-height: 1.35;
    color: var(--text-main);
}

.form-field .form-control,
.form-field .form-select,
.form-field textarea.form-control {
    border-radius: 0.6rem;
}

.form-select {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-right: 2.2rem;
}

[dir="rtl"] .form-select {
    padding-right: 0.75rem;
    padding-left: 2.2rem;
    background-position: left 0.75rem center;
}

.form-field .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-field .input-group .btn.clone-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-color: var(--btn-border);
}

[dir="rtl"] .form-field .input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}

[dir="rtl"] .form-field .input-group .btn.clone-btn {
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
    border-color: var(--input-focus-border);
    box-shadow: var(--focus-ring), 0 0 18px var(--input-focus-glow);
    background-color: var(--container-bg);
}

.form-fixed-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.steps-wrapper {
    flex: 1 1 auto;
}

.form-navigation {
    flex: 0 0 auto;
    position: static;
    background: transparent;
    margin-top: 1rem;
}

.form-step {
    opacity: 1;
}

.form-step.d-none {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.original-step-actions {
    display: none !important;
}

.form-navigation .btn {
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--btn-border);
    color: var(--btn-text);
    background: var(--btn-bg);
    box-shadow: 0 0 12px var(--btn-shadow);
}

.form-navigation .btn:hover,
.form-navigation .btn:focus {
    border-color: var(--btn-hover-border);
    box-shadow: 0 0 20px var(--btn-hover-shadow);
    color: var(--btn-text);
}

.progress+.d-flex span.small.fw-bold {
    color: var(--progress-color);
    text-shadow: 0 0 8px var(--progress-shadow);
}

@media (max-width: 991.98px) {
    .form-container {
        border-radius: 0.85rem;
    }

    .character {
        width: 30%;
        left: -130px;
        bottom: -30px;
    }

    .character-gramophone {
        width: 28%;
        right: -8px;
    }
}

@media (max-width: 767.98px) {
    .form {
        padding: 16px;
        min-height: auto;
    }

    .character,
    .character-gramophone {
        display: none;
    }

    .form-navigation .btn {
        width: 100%;
    }
}