/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* Match main website typography and color palette */
.content-right,
#wizard_container {
        background-color: #5a5350;
        color: #FAF9F6;
}

/* Center wizard horizontally and vertically on desktop */
.row-height {
        display: flex;
        justify-content: center;
        align-items: stretch;
}

.row-height > .content-right {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        float: none;
}

h1.section_title,
h2.section_title,
h3.main_question {
        color: #9d8e59;
}

/* Form labels inside form-control containers - dark on white background */
.form-group > label:not(.container_check):not(.container_radio),
.styled-select label {
        color: #3d3d3d;
}

/* Radio labels - warm off-white on dark background */
label.container_radio {
        color: #FAF9F6 !important;
}

/* Radio labels version 2 - dark text on white background */
label.container_radio.version_2 {
        color: #3d3d3d !important;
}

.summary p,
.summary h3,
#location {
        color: #FAF9F6;
}

.form-control,
input[type="file"],
select.form-control,
textarea.form-control {
        color: #3d3d3d;
        background-color: #ffffff;
        border-color: #cccccc;
}

/* Ensure input placeholders are readable */
.form-control::placeholder,
input[type="file"]::placeholder,
textarea.form-control::placeholder {
        color: #999999;
        opacity: 1;
}

.form-control::-webkit-input-placeholder {
        color: #999999;
}

.form-control::-moz-placeholder {
        color: #999999;
        opacity: 1;
}

.form-control:-ms-input-placeholder {
        color: #999999;
}

/* Select option text must be visible */
select.form-control option {
        color: #3d3d3d;
        background-color: #ffffff;
}

select.form-control option:checked {
        background: #9d8e59;
        color: #ffffff;
}

/* Ensure all text on dark backgrounds is visible */
p, span, div {
        color: inherit;
}

/* Page background - match main site warm grey */
body {
        background-color: #5a5350;
        font-size: 16px;
        font-size: 0.9375rem;
        line-height: 1.6;
        font-family: "montserrat", Arial, sans-serif;
        font-weight: 400;
        color: #FAF9F6;
}

/* Text on dark backgrounds - warm off-white to match main site */
.step h2,
.step h3,
.step p,
.form-group label.custom,
.add_bottom_30 label,
.add_top_20,
#wizard_container .form-group > label:not(.container_check):not(.container_radio) {
        color: #FAF9F6;
}

/* Text inside dark containers */
#middle-wizard {
        color: #FAF9F6;
}

/* Summary section on dark background */
.summary {
        color: #FAF9F6;
}

.summary h3 {
        color: #FAF9F6;
}

.summary p {
        color: #FAF9F6;
}

/* Wizard buttons - match main site button style */
button.forward,
button.submit {
        color: #fff !important;
        background: #7a6e42;
        border-radius: 4px;
}

button.forward:hover,
button.submit:hover {
        background: #5a5335;
}

button.backward {
        border-radius: 4px;
}

/* Bottom wizard border - subtle on dark background */
#bottom-wizard {
        border-top-color: rgba(255, 255, 255, 0.15);
}

.jobs-form-logo img {
        max-width: 220px !important;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 991px) {
        .row-height {
                min-height: 100vh;
                height: auto;
        }

        .content-right {
                overflow-y: visible;
                align-items: flex-start;
                color: #FAF9F6;
        }
}

@media (max-width: 768px) {
        .jobs-form-logo img {
                margin-top: 10px;
                margin-bottom: 15px;
        }

        .container-fluid .row {
                margin: 0;
        }

        .content-right {
                padding: 20px 12px !important;
                min-height: 100vh;
                align-items: flex-start;
                color: #FAF9F6;
        }

        #wizard_container {
                max-width: 100%;
                padding: 0 5px;
        }

        /* Form group spacing optimization */
        .form-group {
                margin-bottom: 0.8rem;
        }

        /* Button styling for mobile */
        button.backward,
        button.forward,
        button.submit {
                padding: 10px 16px;
                font-size: 12px;
                min-width: 70px;
        }

        #bottom-wizard {
                display: flex;
                gap: 8px;
                justify-content: center;
                padding-top: 15px;
                margin-top: 20px;
        }

        #bottom-wizard button {
                flex: 1;
                min-width: auto;
        }

        .submit.step {
                padding: 15px;
        }
}

@media (max-width: 480px) {
        .content-right {
                padding: 10px 8px !important;
                min-height: auto;
        }

        #wizard_container {
                max-width: 100%;
                padding: 0;
        }

        .jobs-form-branding {
                margin-bottom: 10px;
                padding: 0 5px;
        }

        .jobs-form-logo img {
                max-width: 180px !important;
                margin: 8px auto;
                display: block;
        }

        h2.section_title {
                font-size: 18px;
                margin-bottom: 2px;
        }

        h3.main_question {
                font-size: 14px;
                margin-bottom: 15px;
        }

        /* Form improvements for touch */
        .form-control {
                min-height: 44px;
                font-size: 16px;
                padding: 10px 8px;
        }

        label {
                font-size: 13px;
                margin-bottom: 4px;
        }

        .form-group {
                margin-bottom: 0.6rem;
        }

        .container_radio,
        .container_check {
                font-size: 13px;
                padding-left: 28px;
                margin-bottom: 8px;
        }

        .container_radio .checkmark,
        .container_check .checkmark {
                height: 18px;
                width: 18px;
        }

        /* Responsive file upload */
        input[type=file] {
                padding: 8px 4px;
                font-size: 13px;
        }

        input[type=file]::-webkit-file-upload-button {
                padding: 6px 8px;
                font-size: 11px;
        }

        /* Styled select optimization */
        .styled-select {
                width: 100%;
        }

        .styled-select .form-control {
                width: 100%;
        }

        /* Bottom buttons - full width and separated */
        button.backward,
        button.forward,
        button.submit {
                padding: 11px 12px;
                font-size: 11px;
                flex: 1;
                min-width: 60px;
        }

        #bottom-wizard {
                display: flex;
                gap: 6px;
                justify-content: space-between;
                flex-wrap: wrap;
                padding-top: 12px;
                margin-top: 15px;
        }

        #bottom-wizard button {
                flex: 1 1 calc(33% - 5px);
                min-width: auto;
        }

        /* Modal improvements for mobile */
        .modal-dialog {
                margin: 10px;
        }

        .modal-body {
                padding: 15px;
        }

        .modal-body p {
                font-size: 13px;
                margin-bottom: 15px;
        }

        /* Template section padding */
        .summary .wrapper {
                padding: 30px 15px;
        }

        .summary h3 {
                font-size: 16px;
                margin-bottom: 15px;
        }

        /* Cookie banner on mobile */
        .cookie-consent-banner {
                padding: 10px 10px !important;
                gap: 10px !important;
        }

        .cookie-consent-content {
                flex-direction: column;
                gap: 10px;
        }

        .cookie-consent-text h3 {
                font-size: 16px;
        }

        .cookie-consent-text p {
                font-size: 12px;
        }

        .cookie-consent-actions {
                width: 100%;
                flex-direction: column;
        }

        .cookie-btn {
                width: 100%;
                padding: 10px 12px;
                font-size: 12px;
        }
}

/* Extra small devices */
@media (max-width: 360px) {
        .jobs-form-logo img {
                max-width: 150px !important;
        }

        h2.section_title {
                font-size: 16px;
        }

        h3.main_question {
                font-size: 13px;
        }

        button.backward,
        button.forward,
        button.submit {
                padding: 8px 10px;
                font-size: 10px;
        }
}

/* Accessibility: Focus states and contrast improvements */
button:focus,
input:focus,
select:focus,
textarea:focus {
        outline: 2px solid #9d8e59;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(157, 142, 89, 0.25);
}

/* Ensure checkbox and radio buttons are visible */
.container_check .checkmark,
.container_radio .checkmark {
        background-color: #ffffff;
        border: 2px solid #9d8e59;
}

.container_check input:checked ~ .checkmark,
.container_radio input:checked ~ .checkmark {
        background-color: #9d8e59;
}

.container_check .checkmark:after,
.container_radio .checkmark:after {
        border-color: #ffffff;
}

/* Error states - ensure visibility */
.error,
.form-control.error,
input.error,
select.error,
textarea.error {
        color: #d32f2f;
        border-color: #d32f2f !important;
        background-color: #ffebee;
}

.error-message,
.help-block-error {
        color: #d32f2f;
        font-weight: 500;
}

/* Success states */
.form-control.valid {
        border-color: #4CAF50 !important;
}

/* Print styles */
@media print {

        .cookie-consent-banner,
        .mobile-nav,
        button.backward,
        button.forward {
                display: none !important;
        }
}