/* =========================================================
   CODERN
   FORMS + VALIDATION SYSTEM
   ========================================================= */


/* =========================================================
   FORM FIELD
   ========================================================= */

.codern-form-field {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =========================================================
   FORM LABEL
   ========================================================= */

.codern-form-label {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color:
        var(--color-heading);

    font-size:
        0.88rem;

    font-weight:
        600;

    line-height:
        1.4;
}


/* =========================================================
   REQUIRED MARK
   ========================================================= */

.codern-form-required {
    color:
        var(--color-primary);

    font-weight:
        700;
}


/* =========================================================
   INPUT / TEXTAREA / SELECT
   ========================================================= */

.codern-form-input,
.codern-form-textarea,
.codern-form-select {
    width: 100%;

    min-height: 48px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.045);

    color:
        var(--color-text);

    font-family:
        inherit;

    font-size:
        0.92rem;

    line-height:
        1.5;

    outline:
        none;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.codern-form-input::placeholder,
.codern-form-textarea::placeholder {
    color:
        var(--color-text-muted);

    opacity:
        0.72;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.codern-form-textarea {
    min-height:
        150px;

    resize:
        vertical;
}


/* =========================================================
   SELECT
   ========================================================= */

.codern-form-select {
    cursor:
        pointer;
}


/* =========================================================
   FOCUS
   ========================================================= */

.codern-form-input:focus,
.codern-form-textarea:focus,
.codern-form-select:focus {
    border-color:
        var(--color-primary);

    background:
        rgba(255, 255, 255, 0.06);

    box-shadow:
        0 0 0 3px
        rgba(255, 193, 7, 0.10);
}


/* =========================================================
   VALID FIELD
   ========================================================= */

.codern-form-field.is-valid
.codern-form-input,

.codern-form-field.is-valid
.codern-form-textarea,

.codern-form-field.is-valid
.codern-form-select {
    border-color:
        rgba(52, 211, 153, 0.48);
}


/* =========================================================
   INVALID FIELD
   ========================================================= */

.codern-form-field.is-invalid
.codern-form-input,

.codern-form-field.is-invalid
.codern-form-textarea,

.codern-form-field.is-invalid
.codern-form-select {
    border-color:
        rgba(248, 113, 113, 0.72);

    box-shadow:
        0 0 0 3px
        rgba(248, 113, 113, 0.08);
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.codern-form-error {
    min-height:
        0;

    margin:
        0;

    color:
        #fca5a5;

    font-size:
        0.78rem;

    line-height:
        1.45;

    opacity:
        0;

    transform:
        translateY(-3px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


/* =========================================================
   SHOW ERROR
   ========================================================= */

.codern-form-field.is-invalid
.codern-form-error {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.codern-form-success {
    display:
        none;

    margin:
        0;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(52, 211, 153, 0.25);

    border-radius:
        10px;

    background:
        rgba(52, 211, 153, 0.08);

    color:
        #86efac;

    font-size:
        0.84rem;

    line-height:
        1.5;
}

.codern-form-success.is-visible {
    display:
        block;
}


/* =========================================================
   FORM HELP TEXT
   ========================================================= */

.codern-form-help {
    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        0.76rem;

    line-height:
        1.5;
}


/* =========================================================
   CHARACTER COUNTER
   ========================================================= */

.codern-form-counter {
    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        -2px;

    color:
        var(--color-text-muted);

    font-size:
        0.72rem;

    line-height:
        1;
}

.codern-form-counter.is-near-limit {
    color:
        #fbbf24;
}

.codern-form-counter.is-limit-reached {
    color:
        #f87171;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.codern-form-check {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    cursor:
        pointer;
}

.codern-form-check input {
    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    margin:
        2px 0 0;

    accent-color:
        var(--color-primary);

    cursor:
        pointer;
}

.codern-form-check-label {
    color:
        var(--color-text-secondary);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.codern-form-submit {
    position:
        relative;

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        11px 22px;

    border:
        1px solid
        var(--color-primary);

    border-radius:
        10px;

    background:
        var(--color-primary);

    color:
        var(--color-on-primary);

    font-family:
        inherit;

    font-size:
        0.9rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        background-color 180ms ease;
}

.codern-form-submit:hover:not(:disabled) {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-primary);
}

.codern-form-submit:active:not(:disabled) {
    transform:
        translateY(0)
        scale(0.98);
}

.codern-form-submit:focus-visible {
    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;
}


/* =========================================================
   DISABLED / LOADING
   ========================================================= */

.codern-form-submit:disabled {
    cursor:
        not-allowed;

    opacity:
        0.68;
}


/* =========================================================
   SUBMIT SPINNER
   ========================================================= */

.codern-form-spinner {
    width:
        17px;

    height:
        17px;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        codern-form-spin
        700ms linear infinite;
}

@keyframes codern-form-spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   FORM ROW
   ========================================================= */

.codern-form-row {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.codern-form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.codern-form-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        6px;
}


/* =========================================================
   INVALID SUMMARY
   ========================================================= */

.codern-form-summary {
    display:
        none;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(248, 113, 113, 0.25);

    border-radius:
        10px;

    background:
        rgba(248, 113, 113, 0.07);

    color:
        #fca5a5;

    font-size:
        0.82rem;

    line-height:
        1.5;
}

.codern-form-summary.is-visible {
    display:
        block;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

.codern-form-input:-webkit-autofill,
.codern-form-textarea:-webkit-autofill,
.codern-form-select:-webkit-autofill {
    -webkit-text-fill-color:
        var(--color-text);

    box-shadow:
        0 0 0 1000px
        rgba(255, 255, 255, 0.045)
        inset;

    transition:
        background-color 9999s ease-out;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .codern-form-row {
        grid-template-columns:
            1fr;
    }


    .codern-form-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .codern-form-submit {
        width:
            100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .codern-form-input,
    .codern-form-textarea,
    .codern-form-select,
    .codern-form-error,
    .codern-form-submit {
        transition:
            none !important;
    }


    .codern-form-spinner {
        animation:
            none !important;
    }
}

/* =========================================================
   LIGHT THEME
   ---------------------------------------------------------
   Dark mode remains unchanged.
   Light mode:
   - Dark glass → white/light glass
   - Dark text variables remain readable
   - Cyan primary → global purple primary
   - Validation colors remain unchanged
   - All functionality/animations preserved
========================================================= */

[data-theme="light"] .codern-form-input,
[data-theme="light"] .codern-form-textarea,
[data-theme="light"] .codern-form-select {
    border-color:
        rgba(124, 58, 237, 0.16);

    background:
        rgba(255, 255, 255, 0.82);

    color:
        var(--color-text);
}


/* =========================================================
   LIGHT PLACEHOLDER
========================================================= */

[data-theme="light"] .codern-form-input::placeholder,
[data-theme="light"] .codern-form-textarea::placeholder {
    color:
        var(--color-text-muted);

    opacity:
        0.72;
}


/* =========================================================
   LIGHT FOCUS
========================================================= */

[data-theme="light"] .codern-form-input:focus,
[data-theme="light"] .codern-form-textarea:focus,
[data-theme="light"] .codern-form-select:focus {
    border-color:
        var(--color-primary);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, 0.12);
}


/* =========================================================
   LIGHT VALID FIELD
========================================================= */

[data-theme="light"]
.codern-form-field.is-valid
.codern-form-input,

[data-theme="light"]
.codern-form-field.is-valid
.codern-form-textarea,

[data-theme="light"]
.codern-form-field.is-valid
.codern-form-select {
    border-color:
        rgba(16, 185, 129, 0.48);
}


/* =========================================================
   LIGHT INVALID FIELD
========================================================= */

[data-theme="light"]
.codern-form-field.is-invalid
.codern-form-input,

[data-theme="light"]
.codern-form-field.is-invalid
.codern-form-textarea,

[data-theme="light"]
.codern-form-field.is-invalid
.codern-form-select {
    border-color:
        rgba(239, 68, 68, 0.58);

    box-shadow:
        0 0 0 3px
        rgba(239, 68, 68, 0.08);
}


/* =========================================================
   LIGHT ERROR
========================================================= */

[data-theme="light"] .codern-form-error {
    color:
        #dc2626;
}


/* =========================================================
   LIGHT SUCCESS
========================================================= */

[data-theme="light"] .codern-form-success {
    border-color:
        rgba(16, 185, 129, 0.24);

    background:
        rgba(16, 185, 129, 0.07);

    color:
        #047857;
}


/* =========================================================
   LIGHT HELP / COUNTER
========================================================= */

[data-theme="light"] .codern-form-help,
[data-theme="light"] .codern-form-counter {
    color:
        var(--color-text-muted);
}

[data-theme="light"] .codern-form-counter.is-near-limit {
    color:
        #d97706;
}

[data-theme="light"] .codern-form-counter.is-limit-reached {
    color:
        #dc2626;
}


/* =========================================================
   LIGHT CHECKBOX / RADIO
========================================================= */

[data-theme="light"] .codern-form-check-label {
    color:
        var(--color-text-secondary);
}

[data-theme="light"] .codern-form-check input {
    accent-color:
        var(--color-primary);
}


/* =========================================================
   LIGHT SUBMIT BUTTON
   ---------------------------------------------------------
   Automatically follows the global purple primary variable.
========================================================= */

[data-theme="light"] .codern-form-submit {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    color:
        var(--color-on-primary);
}

[data-theme="light"] .codern-form-submit:hover:not(:disabled) {
    box-shadow:
        var(--shadow-primary);
}

[data-theme="light"] .codern-form-submit:focus-visible {
    outline-color:
        var(--color-primary);
}


/* =========================================================
   LIGHT INVALID SUMMARY
========================================================= */

[data-theme="light"] .codern-form-summary {
    border-color:
        rgba(239, 68, 68, 0.22);

    background:
        rgba(239, 68, 68, 0.055);

    color:
        #dc2626;
}


/* =========================================================
   LIGHT AUTOFILL
========================================================= */

[data-theme="light"]
.codern-form-input:-webkit-autofill,

[data-theme="light"]
.codern-form-textarea:-webkit-autofill,

[data-theme="light"]
.codern-form-select:-webkit-autofill {
    -webkit-text-fill-color:
        var(--color-text);

    box-shadow:
        0 0 0 1000px
        #ffffff
        inset;
}