/* forms.css */

/* ==== Mobile (max-width: 1000px) ==== */
@media (max-width: 1000px) {

.form-container {
        display: flex;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 100%;
        max-width: 90dvw;
        margin-top: 3dvh;
    }

.form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

.form-error-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

.form-js-error-row {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

.form-button-row {
        justify-content: center !important;
    }

.form-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

.form-column p {
        margin: 2% 0 2% 0;
        text-align: center;
    }

.error-row {
        display: none;
    }

.hidden-container {
        display: none;
        width: 94%;
        text-align: center;
        margin: 0px auto;
        gap: 10px;
        padding: 3%;
    }

.hidden-content {
        position: fixed;
        top: 0px;
        left: 0px;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100dvh;
        background-color: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 101;
    }

.form-error-row p, .form-js-error-row p {
        color:var(--color-primary);
        margin: 0px;
        padding: 2%;
        text-align: center;
        width: 96%;
    }

.form-js-error-row p {
        color:var(--color-primary);
        margin: 0px;
        padding: 1%;
        text-align: center;
        font-size: 12pt;
        width: 98%;
    }

.error-text {
        display: none;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: var(--color-primary);
        font-weight: bold;
        text-align: center;
        padding: 2%;
        margin-top: 1%;
        margin-bottom: 1%;
        border-radius: 5px;
        width: 96%;
    }

.input-error {
        outline: none !important;
        border: 2px solid var(--color-primary) !important;
        font-size: 12pt !important;
        padding: 5px !important;
        line-height: 14pt !important;
        box-shadow: 0px !important;
    }

.error-row {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 1%;
    }

.error-row p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: var(--color-primary) !important;
        font-weight: bold;
        text-align: center;
        margin: 2%;
    }

.password-eye {
        opacity: .5;
    }

}

/* ==== Desktop (min-width: 1001px) ==== */
@media (min-width: 1001px) {

.form-container {
        display: flex;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

.form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

.form-error-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

.form-js-error-row {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

.form-button-row {
        justify-content: center !important;
    }

.form-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

.hidden-container {
        display: none;
        font-family: 'Roboto', sans-serif;
        text-align: center;
        width: 94%;
        max-height: 65%;
        padding: 3% 3% 2% 3%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.hidden-content {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

.error-text {
        display: none;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt !important;
        color: var(--color-primary) !important;
        text-align: center;
        padding: 0;
        width: 100%;
    }

.hidden-content h3 {
        margin-top: 0;
        margin-bottom: 1%;
        background-color: var(--color-surface-alt);
        width: 98%;
        padding: 1%;
        text-align: center;
    }

.form-error-row p, .form-js-error-row p {
        color:var(--color-primary);
        margin: 0px;
        padding: 2%;
        background-color: var(--color-surface-muted);
        text-align: center;
        width: 96%;
    }

.form-js-error-row p {
        color:var(--color-primary);
        margin: 0px;
        padding: 1%;
        background-color: var(--color-surface-muted);
        text-align: center;
        font-size: 12pt;
        width: 98%;
        max-width: 333px;
    }

.password-eye {
        opacity: .5;
        width: 25px;
        height: 25px;
    }

.password-eye:hover {
        opacity: 1;
        cursor: pointer;
    }

.error-row {
        display: none;
    }

.error-row-reset-password-input {
        display: block;
        color: var(--color-primary) !important;
    }

.input-error {
        outline: none !important;
        border: 2px solid var(--color-primary) !important;
        font-size: 12pt !important;
        padding: 3px !important;
        line-height: 12pt !important;
        box-shadow: none !important;
    }

}

/* ==== Brutalist "Delete Account" modal ====
   Layers on top of the generic .hidden-container/.hidden-content popup
   pattern — only elements carrying .brutal-modal opt into this look. */

.brutal-modal {
    background: var(--as-white, #fff);
    border: 3px solid var(--as-black);
    box-shadow: 12px 12px 0 var(--as-red);
    max-width: 460px;
    width: 92%;
    max-height: none;
    padding: 32px;
    text-align: left;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* Neutralize the generic `.hidden-content h3` rule (desktop block above),
   which targets every h3 inside a hidden-content popup — including this
   modal's h3.brutal-title — and otherwise wins over .brutal-title alone
   because ".hidden-content h3" (class+element) outscores ".brutal-title"
   (class only) regardless of stylesheet order. */
.hidden-content .brutal-title {
    background-color: transparent;
    width: auto;
    padding: 0;
    text-align: left;
}

.brutal-delete-warning {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--as-black);
    text-align: left;
    margin: 0 0 24px 0;
}

.brutal-delete-warning-em {
    color: var(--as-red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.brutal-modal form {
    margin: 0;
    width: 100%;
}

.brutal-field {
    margin-bottom: 8px;
}

.brutal-field-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-grey);
    margin: 0 0 8px 4px;
    text-align: left;
}

.brutal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 3px solid var(--as-black);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    outline: none;
}

.brutal-input:focus {
    background: #fffbeb;
}

.brutal-delete-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.brutal-danger-btn {
    background: var(--as-red);
    color: #fff;
    padding: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}

.brutal-danger-btn:hover:not(:disabled) {
    background: var(--as-black);
    box-shadow: 4px 4px 0 var(--as-red);
}

.brutal-danger-btn:disabled {
    background: var(--color-border, #a0a0a0);
    border-color: var(--color-border, #a0a0a0);
    cursor: not-allowed;
}

@media (max-width: 1000px) {
    .brutal-modal {
        padding: 20px;
        box-shadow: 6px 6px 0 var(--as-red);
    }
}