/*
 * Snug Concerts — Forms v2
 *
 * Reskins all .snug-form and .snug-login-wrap elements
 * using design tokens. Loaded AFTER snug-forms.css to override.
 */

/* ── Form Container ──────────────────────────────── */
.snug-form {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--snug-space-8);
    background: var(--snug-bg);
    border-radius: var(--snug-radius-lg);
    box-shadow: var(--snug-shadow-md);
    font-family: var(--snug-font);
    color: var(--snug-text) !important;
}

.snug-form *,
.snug-form *::before,
.snug-form *::after {
    box-sizing: border-box;
    color: inherit;
}

/* ── Headings inside forms ───────────────────────── */
.snug-form h2 {
    font-size: var(--snug-text-2xl);
    font-weight: var(--snug-weight-bold);
    color: var(--snug-text);
    margin: 0 0 var(--snug-space-6);
    line-height: var(--snug-leading-tight);
}

.snug-form-section h3 {
    font-size: var(--snug-text-lg);
    font-weight: var(--snug-weight-semibold);
    color: var(--snug-text);
    border-bottom: 2px solid var(--snug-border-light);
    padding-bottom: var(--snug-space-3);
    margin: 0 0 var(--snug-space-4);
}

/* ── Field Labels ────────────────────────────────── */
.snug-form-field label {
    font-size: var(--snug-text-sm);
    font-weight: var(--snug-weight-medium);
    color: var(--snug-text);
    margin-bottom: var(--snug-space-1);
}

.snug-form-required {
    color: var(--snug-error);
}

/* ── Inputs ──────────────────────────────────────── */
.snug-form-field input[type="text"],
.snug-form-field input[type="email"],
.snug-form-field input[type="url"],
.snug-form-field input[type="tel"],
.snug-form-field input[type="number"],
.snug-form-field input[type="date"],
.snug-form-field input[type="password"],
.snug-form-field textarea,
.snug-form-field select {
    display: block;
    width: 100%;
    padding: var(--snug-space-3) var(--snug-space-4);
    font-size: var(--snug-text-sm);
    font-family: var(--snug-font);
    line-height: var(--snug-leading-normal);
    border: 1px solid var(--snug-border);
    border-radius: var(--snug-radius);
    background: var(--snug-bg);
    color: var(--snug-text) !important;
    transition: border-color var(--snug-transition), box-shadow var(--snug-transition);
}

.snug-form-field input:focus,
.snug-form-field textarea:focus,
.snug-form-field select:focus {
    outline: none;
    border-color: var(--snug-accent) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
    color: var(--snug-text) !important;
}

.snug-form-field input::placeholder,
.snug-form-field textarea::placeholder {
    color: var(--snug-text-light) !important;
}

.snug-form-field textarea {
    min-height: 100px;
    resize: vertical;
}

/* ── Select dropdowns ────────────────────────────── */
.snug-form-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--snug-space-3) center;
    padding-right: var(--snug-space-8);
}

.snug-form-field select option {
    color: var(--snug-text) !important;
    background: var(--snug-bg);
}

/* ── Help Text ───────────────────────────────────── */
.snug-form-help {
    font-size: var(--snug-text-xs);
    color: var(--snug-text-muted);
    margin-top: var(--snug-space-1);
}

/* ── Validation Errors ───────────────────────────── */
.snug-field-error input,
.snug-field-error textarea,
.snug-field-error select {
    border-color: var(--snug-error) !important;
}

.snug-form-error {
    font-size: var(--snug-text-xs);
    color: var(--snug-error) !important;
    margin-top: var(--snug-space-1);
}

/* v1.9.190: dark error banner. v2 file loaded after snug-forms.css
   with the light `--snug-error-bg` (pale pink), which won and hid
   the dark-themed banner. Mirror the same dark treatment here. */
.snug-form-error-banner {
    background: rgba(207,107,71,0.12) !important;
    border: 1px solid rgba(207,107,71,0.4) !important;
    border-radius: 3px !important;
    color: #f2a889 !important;
    padding: var(--snug-space-4);
    font-size: var(--snug-text-sm);
    margin-bottom: var(--snug-space-4);
}
.snug-form-error-banner * { color: #f2a889 !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.snug-form-error-banner strong { color: var(--gold, #c9a45a) !important; }
.snug-form-error-banner ul { margin: 6px 0 0 20px !important; }

.snug-form-success,
.snug-form-success * {
    background: var(--snug-success-bg) !important;
    border: 1px solid var(--snug-success) !important;
    border-radius: var(--snug-radius) !important;
    color: var(--snug-success) !important;
    padding: var(--snug-space-4);
    font-size: var(--snug-text-sm);
    margin-bottom: var(--snug-space-4);
}

/* ── Checkbox ────────────────────────────────────── */
.snug-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--snug-space-2);
    font-size: var(--snug-text-sm);
    color: var(--snug-text);
}

.snug-form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--snug-accent);
}

/* ── Checkbox Group (multiselect replacement) ───── */
.snug-form-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--snug-space-2);
}

.snug-form-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: var(--snug-space-2);
    padding: var(--snug-space-2) var(--snug-space-3);
    background: var(--snug-bg);
    border: 1px solid var(--snug-border);
    border-radius: var(--snug-radius);
    font-size: var(--snug-text-sm);
    color: var(--snug-text);
    cursor: pointer;
    transition: all var(--snug-transition, 150ms ease);
    user-select: none;
}

.snug-form-checkbox-item:hover {
    border-color: var(--snug-accent);
    background: var(--snug-accent-light, #fef3c7);
}

.snug-form-checkbox-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--snug-accent);
    cursor: pointer;
}

.snug-form-checkbox-item:has(input[type="checkbox"]:checked) {
    background: var(--snug-accent);
    border-color: var(--snug-accent);
    color: #fff;
}

/* Admin override notice on profile edit form. */
.snug-form-admin-notice {
    margin: 0 0 var(--snug-space-4);
    padding: var(--snug-space-3) var(--snug-space-4);
    background: var(--snug-accent-light, #fef3c7);
    border-left: 4px solid var(--snug-accent, #d97706);
    border-radius: var(--snug-radius);
    color: var(--snug-accent-text, #78350f);
    font-size: var(--snug-text-sm);
}

/* ── Star Rating ─────────────────────────────────── */
.snug-star {
    color: var(--snug-border);
    transition: color var(--snug-transition);
}

.snug-star.active,
.snug-star:hover {
    color: var(--snug-accent);
}

/* ── Submit Button ───────────────────────────────── */
.snug-form-actions {
    margin-top: var(--snug-space-8);
    padding-top: var(--snug-space-6);
    border-top: 1px solid var(--snug-border-light);
}

.snug-form-submit {
    display: inline-block;
    padding: var(--snug-space-3) var(--snug-space-8);
    font-size: var(--snug-text-base);
    font-weight: var(--snug-weight-semibold);
    font-family: var(--snug-font);
    color: var(--snug-bg) !important;
    background: var(--snug-accent);
    border: none;
    border-radius: var(--snug-radius-full);
    cursor: pointer;
    transition: background var(--snug-transition);
}

.snug-form-submit:hover {
    background: var(--snug-accent-hover);
}

.snug-form-submit:disabled {
    background: var(--snug-border);
    cursor: not-allowed;
}

.snug-form-cancel-btn {
    display: inline-block;
    padding: var(--snug-space-3) var(--snug-space-8);
    font-size: var(--snug-text-base);
    font-weight: var(--snug-weight-semibold);
    font-family: var(--snug-font);
    color: var(--snug-text-muted) !important;
    background: transparent;
    border: 2px solid var(--snug-border);
    border-radius: var(--snug-radius-full);
    cursor: pointer;
    transition: background var(--snug-transition), color var(--snug-transition);
    text-decoration: none;
}

.snug-form-cancel-btn:hover {
    background: var(--snug-bg-hover);
    color: var(--snug-text) !important;
    border-color: var(--snug-text-light);
    text-decoration: none;
}

/* ── Read-only / Notice ──────────────────────────── */
/* v1.9.190: dark tokens. v2 file loads after snug-forms.css so this
   used to win with the light --snug-* palette; now inverted to match.
   !important on color/bg to beat the parent .snug-form { color:
   var(--snug-text) !important } that would otherwise force cream text
   to fall back to snug-text via inheritance in some cascade states. */
.snug-form-readonly {
    padding: var(--snug-space-3) var(--snug-space-4);
    background: var(--ink-mid, #16181D) !important;
    border: 1px solid var(--border, #2A2D35) !important;
    border-radius: var(--snug-radius);
    font-size: var(--snug-text-sm);
    color: var(--cream, #F0EDE8) !important;
}

.snug-form-notice {
    padding: var(--snug-space-6);
    background: var(--snug-bg);
    border-radius: var(--snug-radius-lg);
    text-align: center;
    color: var(--snug-text);
    font-size: var(--snug-text-sm);
}

.snug-form-notice a {
    color: var(--snug-accent);
}

/* ── Agreement Link ──────────────────────────────── */
.snug-agreement-link {
    color: var(--snug-accent) !important;
    font-weight: var(--snug-weight-medium);
}

.snug-agreement-link:hover {
    color: var(--snug-accent-hover) !important;
}

/* ── Agreement Modal ─────────────────────────────── */
.snug-agreement-modal {
    border-radius: var(--snug-radius-lg);
    box-shadow: var(--snug-shadow-lg);
}

.snug-agreement-modal-header {
    border-bottom: 1px solid var(--snug-border-light);
}

.snug-agreement-modal-title {
    font-family: var(--snug-font);
    color: var(--snug-text);
}

.snug-agreement-modal-body {
    color: var(--snug-text);
    font-family: var(--snug-font);
}

/* ── Profile Stats Cards (edit profile page) ─────── */
.snug-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--snug-space-3);
    margin-bottom: var(--snug-space-6);
}

@media (min-width: 640px) {
    .snug-profile-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.snug-stat-card {
    text-align: center;
    padding: var(--snug-space-4);
    background: var(--snug-bg-subtle);
    border-radius: var(--snug-radius);
}

.snug-stat-value {
    display: block;
    font-size: var(--snug-text-xl);
    font-weight: var(--snug-weight-bold);
    color: var(--snug-text);
}

.snug-stat-label {
    display: block;
    font-size: var(--snug-text-xs);
    color: var(--snug-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Photo grid (edit profile). v1.9.201: rules moved to snug-forms.css so
   the unified gallery (main-image picker + enlarged remove control from
   v1.9.200) is the SSOT. This file used to redeclare .snug-profile-photos-grid
   and .snug-profile-photo-thumb at 100px, which silently overrode the v200
   140px thumbs because -v2.css loads after snug-forms.css. Kant Rule 7. */

/* ── Login Form ──────────────────────────────────── */
.snug-login-wrap {
    max-width: 400px;
    margin: 40px auto;
    padding: var(--snug-space-8);
    background: var(--snug-bg);
    border-radius: var(--snug-radius-lg);
    box-shadow: var(--snug-shadow-md);
    font-family: var(--snug-font);
    color: var(--snug-text) !important;
}

.snug-login-wrap * {
    color: inherit;
}

.snug-login-header h2 {
    font-size: var(--snug-text-2xl);
    font-weight: var(--snug-weight-bold);
    color: var(--snug-text);
}

.snug-login-header p {
    color: var(--snug-text-muted);
}

.snug-login-field label {
    font-size: var(--snug-text-sm);
    font-weight: var(--snug-weight-medium);
    color: var(--snug-text);
}

.snug-login-field input[type="text"],
.snug-login-field input[type="email"],
.snug-login-field input[type="password"] {
    border: 1px solid var(--snug-border);
    border-radius: var(--snug-radius);
    color: var(--snug-text) !important;
    font-family: var(--snug-font);
    transition: border-color var(--snug-transition);
}

.snug-login-field input:focus {
    border-color: var(--snug-accent) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
    color: var(--snug-text) !important;
}

.snug-login-submit {
    background: var(--snug-accent);
    border-radius: var(--snug-radius-full);
    font-family: var(--snug-font);
    font-weight: var(--snug-weight-semibold);
    color: var(--snug-bg) !important;
    transition: background var(--snug-transition);
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
}

.snug-login-submit:hover {
    background: var(--snug-accent-hover);
}

.snug-login-forgot,
.snug-login-footer a {
    color: var(--snug-accent) !important;
}

.snug-login-forgot:hover,
.snug-login-footer a:hover {
    color: var(--snug-accent-hover) !important;
}

.snug-login-remember {
    color: var(--snug-text-muted);
}

.snug-login-toggle-pw {
    color: var(--snug-accent) !important;
}

.snug-login-error,
.snug-login-error * {
    background: var(--snug-error-bg) !important;
    border-color: var(--snug-error) !important;
    color: var(--snug-error) !important;
}

.snug-login-success,
.snug-login-success * {
    background: var(--snug-success-bg) !important;
    border-color: var(--snug-success) !important;
    color: var(--snug-success) !important;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .snug-form {
        padding: var(--snug-space-5);
        margin: 0 var(--snug-space-3);
    }

    .snug-login-wrap {
        margin: 20px var(--snug-space-3);
        padding: var(--snug-space-6);
    }
}