/*
 * Indivisible Volunteer Signup — Registration form style override
 *
 * Applies the design system's semantic tokens to the User Registration
 * plugin's default frontend form rendered at /registration/.
 *
 * The page content is wrapped in an .ids-page div (via the_content filter)
 * so that semantic tokens scoped to .ids-page resolve correctly.
 *
 * Selector specificity is intentionally higher than the plugin's own
 * default theme stylesheet to ensure overrides take effect.
 */

/* ============================================================
   Form container
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded {
    background: var(--ids-surface-page) !important;
    padding: 2rem;
    color: var(--ids-text-on-dark);
    border: none !important;
    border-radius: 0 !important;
}

/* ============================================================
   Labels
   ============================================================ */
.user-registration.ur-frontend-form .ur-label {
    color: var(--ids-text-label) !important;
    font-size: 15px;
    font-weight: 400;
}

/* ============================================================
   Inputs
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid input,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid select,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid textarea {
    background: var(--ids-surface-input) !important;
    border: 1px solid var(--ids-border-input) !important;
    border-radius: var(--ids-radius-sm) !important;
    height: 46px !important;
    max-height: none !important;
    padding: 0 12px !important;
    color: var(--ids-text-on-light) !important;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid textarea {
    height: auto !important;
    padding: 12px !important;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid input::placeholder,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid textarea::placeholder {
    color: var(--ids-text-placeholder) !important;
    font-size: 14px;
    text-transform: none;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid input:focus,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid select:focus,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid textarea:focus {
    outline: none !important;
    border-color: var(--ids-border-input-focus) !important;
    box-shadow: 0 0 0 2px oklch(from var(--ids-accent-primary) l c h / 0.25) !important;
    background: var(--ids-surface-input-focus) !important;
}

/* ============================================================
   Submit button
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded form button[type="submit"],
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-submit-button {
    background: var(--ids-accent-primary) !important;
    color: var(--ids-text-on-dark) !important;
    border: 1px solid var(--ids-accent-primary) !important;
    border-radius: var(--ids-radius-sm) !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded form button[type="submit"]:hover,
.user-registration.ur-frontend-form.ur-frontend-form--rounded form .ur-submit-button:hover {
    background: var(--ids-accent-primary-hover) !important;
    border-color: var(--ids-accent-primary-hover) !important;
}

/* ============================================================
   Validation messages
   ============================================================ */
.user-registration.ur-frontend-form .ur-field-error,
.user-registration.ur-frontend-form .woocommerce-error {
    color: var(--ids-accent-danger) !important;
    font-size: 13px;
    margin-top: 4px;
}