/* Tokens */
:root {
    --fc-border: #D5D7DE;
    --fc-bg: #fff;
    --fc-text: #0f172a;
    --fc-focus-border: #2563eb;
    --fc-focus-ring: rgba(37, 99, 235, 0.35);
    --fc-error: #dc2626;
    --fc-error-ring: rgba(220, 38, 38, 0.28);
    --fc-radius: 10px;
}

.required {
    color: red;
    font-weight: bold;
    margin-left: 4px;
}

/* Controls (scoped) */
.form-row .form-control {
    width: 100%;
    background: var(--fc-bg);
    color: var(--fc-text);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    padding: .625rem .75rem;
    transition: border-color .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}

    /* Focus halo (mouse + keyboard) */
    .form-row .form-control:focus {
        outline: none;
        border-color: var(--fc-focus-border);
        box-shadow: 0 0 0 3px var(--fc-focus-ring);
    }

    /* Error state */
    .form-row .form-control[aria-invalid="true"],
    .form-row .form-control.invalid {
        border-color: var(--fc-error);
    }

        .form-row .form-control[aria-invalid="true"]:focus,
        .form-row .form-control.invalid:focus {
            box-shadow: 0 0 0 3px var(--fc-error-ring);
        }

/* Inline error text */
.form-row .inline-error-message {
    color: var(--fc-error);
    font-size: .9rem;
}

/* Labels */
.form-row .form-label {
    font-weight: 600;
    color: var(--fc-text);
}

.form-row:focus-within .form-label {
    color: var(--fc-focus-border);
}

.form-row:has(.form-control:is([aria-invalid="true"], .invalid)) .form-label {
    color: var(--fc-error);
}

.form-row .form-label .required {
    color: var(--fc-error);
}

.form-row .form-output {
    font-size: 1.1rem;
    color: #1e293b;
}







/* Standard Form Layout */
/* Used on delivery details, review and pay pages */

.form-section {
    padding: 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
    font-family: "Segoe UI", sans-serif;
    box-sizing: border-box;
    margin-bottom: 24px;
    width: 100%;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-sections-wrap {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1290px) {
    .form-sections-wrap {
        flex-direction: row;
        gap: 24px;
    }

    .form-section.split-view {
        width: 50%;
    }
}