html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    /* optional: page background */
}

/* ===============================
   THEME TOKENS (DEFAULT = LIGHT)
================================ */
:root {
    --card-bg: #ffffff;
    --card-outline: #D7DEE4;
    --title: #3A3A3A;
    --subtitle: #3A3A3A;
    --field-bg: #EEF2F6;
    --field-text: #333333;
    --placeholder: #333333;
    --error: #D3334F;
    --error-bg: #FFEEEE;
    --error-outline: #CE3432;
    --link: #CD3432;
    --btn-bg: #08AE4C;
    --btn-text: #ffffff;
    --chevron: #333333;
    --control-field-bg: #FFFFFF;
}

/* ===============================
   DARK MODE (AUTO)
================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --card-bg: #3E3F42;
        --card-outline: #616161;
        --title: white;
        --subtitle: #ffffff;
        --field-bg: #FFEEEE;
        --field-text: #ffffff;
        --placeholder: #ffffff;
        --error: #FFDB8E;
        --error-bg: #FFEEEE;
        /* keep field bg in dark */
        --error-outline: #ED8E00;
        --link: #ffffff;
        --btn-bg: #08AE4C;
        --btn-text: #ffffff;
        --chevron: #ffffff;
        --control-field-bg: #5B5D65;
    }
}

/* ===============================
   FORM WRAPPER (807 x 530)
================================ */
.new-scan-form {
    width: 807px;
    height: 530px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--card-bg);
    outline: 1px solid var(--card-outline);
    outline-offset: -1px;
}

.consent-text-center {
    max-width: 520px;
    /* controls wrapping */
    margin: 0 auto;
    text-align: center;

    font-size: 14px;
    line-height: 21px;
    /* matches screenshot spacing */
    font-weight: 400;
}


/* inner content width 662, top spacing 33 */
.scan-form-content {
    width: 662px;
    margin: 33px auto 0;
}

/* ===============================
   HEADER
================================ */
.scan-header {
    text-align: center;
}

.scan-title {
    margin: 0 0 8px;
    color: var(--title);
    font-size: 24px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    line-height: 42px;
}

.scan-subtitle {
    margin: 0 0 22px;
    color: var(--subtitle);
    font-size: 18px;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    line-height: 31.5px;
}

/* ===============================
   ERROR SUMMARY (icon + text)
================================ */
.error-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 20px;
    color: var(--error);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.field-wrapper.has-error .field-control {
    background: var(--error-bg) !important;
    /* this is the key line */
    --placeholder: #333333;
}

.error-summary .error-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: none;
}

/* ===============================
   FORM GRID
================================ */
.scan-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: flex;
    gap: 20px;
}

/* each field container is 203 wide, with validation line below */
.field-wrapper {
    width: 203px;
    height: 62px;
    /* 42 input + hint area */
    position: relative;
}

/* input box */
.field {
    width: 203px;
    height: 42px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--field-bg);
    border: 1px solid #656262;
}

/* input/select shared */
.field-control {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: var(--control-field-bg);
    padding: 0 12px;
    color: var(--field-text);
    font-size: 16px;
    font-family: Poppins, sans-serif;
    font-weight: 400;
}

.field-control::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

/* ===============================
   SELECT CHEVRON
================================ */
.select-field {
    position: relative;
}

.select-field .field-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
}

/* Make chevron follow theme */
.select-chevron {
    position: absolute;
    right: 10px;
    top: 9px;
    pointer-events: none;
    display: inline-flex;
    color: var(--chevron);
}

/* IMPORTANT:
   In your SVG path, change fill="#333333" to fill="currentColor"
   so it uses var(--chevron).
*/

/* ===============================
   VALIDATION STYLES
================================ */
.error-msg {
    position: absolute;
    left: 0;
    top: 47px;
    width: 221px;
    color: var(--error);
    font-size: 14px;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    line-height: 19.2px;
}

/* Apply only when validation fails */
.field-wrapper.has-error .field {
    background: var(--error-bg);
    outline: 2px solid var(--error-outline);
    outline-offset: -2px;
}

/* ===============================
   CONSENT
================================ */
.consent-container {
    width: 662px;
    margin: 0 auto;
}

.consent-text {
    width: 544px;
    margin: 0 auto;
    text-align: center;
    color: var(--subtitle);
    font-size: 14px;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    line-height: 21px;
}

.consent-links {
    display: inline;
}

.consent-link {
    color: var(--link);
    text-decoration: underline;
}

/* ===============================
   BUTTON
================================ */
.scan-button {
    width: 320px;
    height: 48px;
    margin: 10px auto 0;
    border: none;
    border-radius: 6px;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-size: 16px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
}

.page-center {
    display: flex;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

.scanresult-container {
    display: none;
    height: 100%;
}

.error-summary.is-visible .error-icon {
    display: block;
}

/* Light theme: placeholder option */
select.field-control:invalid {
    color: #333333;
}

@media (prefers-color-scheme: dark) {
    select.field-control:invalid {
        color: #ffffff;
        /* ✅ white placeholder */
    }
}

.select-chevron {
    color: var(--chevron);
}

@media (prefers-color-scheme: dark) {
    :root {
        --chevron: #ffffff;
        /* ✅ white arrow */
    }
}

@media (prefers-color-scheme: dark) {
    select.field-control option {
        background-color: #3E3F42;
        /* dropdown bg */
        color: #ffffff;
        /* dropdown text */
    }
}

@media (prefers-color-scheme: dark) {
    select.field-control {
        color: #ffffff;
        /* selected value text */
        background-color: #5B5D65;
    }
}

@media (prefers-color-scheme: dark) {
    .error-summary {
        color: rgba(255, 219, 142, 0.95);
    }
}