/* ============================================================
   Account Settings Styles — account_settings.css
   Matches site palette: browns, antiquewhite
   ============================================================ */

/* --- Container --- */
.account-settings-view {
    background-color: antiquewhite;
    border: 1px solid #8B4513;
    border-radius: 10px;
    padding: 1.25em 1.5em;
    margin-bottom: 1em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    margin-top: 2.5em;
}

/* --- Heading --- */
.account-settings-heading {
    font-size: large;
    font-weight: 700;
    color: #5C3317;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 0.25em;
    margin-bottom: 0.75em;
    font-family: sans-serif;
}

/* --- Form Group (label + dropdown + indicator row) --- */
.account-settings-group {
    margin-bottom: 1.25em;
}

/* --- Labels --- */
.account-settings-label {
    display: block;
    font-weight: 600;
    font-size: 0.95em;
    color: #5C3317;
    margin-bottom: 0.4em;
    font-family: sans-serif;
}

/* --- Dropdowns --- */
.account-settings-select {
    width: 100%;
    max-width: 420px;
    padding: 0.45em 0.75em;
    font-size: medium;
    font-family: sans-serif;
    border: 1px solid brown;
    border-radius: 6px;
    background-color: #fffaf3;
    color: #2a1a0a;
    cursor: pointer;
    box-sizing: border-box;
}

.account-settings-select:focus {
    outline: none;
    border-color: #5C3317;
    background-color: white;
}

/* --- Save Indicator (checkmark / "Saved") --- */
.account-settings-saved {
    display: inline-block;
    color: #6B8E23;
    font-size: 0.9em;
    font-weight: 600;
    margin-left: 0.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: sans-serif;
}

.account-settings-saved.visible {
    opacity: 1;
}

/* --- Error Message --- */
.account-settings-error {
    color: #8B0000;
    background-color: #ffe4e4;
    border: 1px solid #cc0000;
    border-radius: 6px;
    padding: 0.6em 1em;
    margin: 0.5em 0;
    font-family: sans-serif;
    font-size: 0.95em;
}

/* --- Loading State --- */
.account-settings-loading {
    text-align: center;
    color: #8B4513;
    padding: 20px;
    font-style: italic;
    font-size: medium;
}

/* --- Text Input (matches .account-settings-select) --- */
.account-settings-input {
    width: 100%;
    max-width: 420px;
    padding: 0.45em 0.75em;
    font-size: medium;
    font-family: sans-serif;
    border: 1px solid brown;
    border-radius: 6px;
    background-color: #fffaf3;
    color: #2a1a0a;
    box-sizing: border-box;
}

.account-settings-input:focus {
    outline: none;
    border-color: #5C3317;
    background-color: white;
}

/* --- Inline Save Button --- */
.account-settings-save-btn {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.4em 1em;
    font-size: 0.9em;
    font-family: sans-serif;
    font-weight: 600;
    color: white;
    background-color: #8B4513;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.account-settings-save-btn:hover {
    background-color: #5C3317;
}

/* --- Danger Zone Section --- */
.account-settings-danger-zone {
    margin-top: 2em;
    padding: 1.25em 1.5em;
    border: 2px solid #cc0000;
    border-radius: 10px;
    background-color: #fff0f0;
}

.account-settings-danger-zone p {
    margin: 0 0 1em 0;
    color: #5C3317;
    font-size: 0.95em;
    font-family: sans-serif;
}

/* --- Danger Button (Delete Account) --- */
.account-settings-danger-btn {
    padding: 0.6em 1.2em;
    font-size: 0.95em;
    font-family: sans-serif;
    font-weight: 600;
    color: white;
    background-color: #cc0000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.account-settings-danger-btn:hover {
    background-color: #990000;
}