/* ============================================================
   re:Members AMS — Registration Form Styles
   Drop your own colours / fonts over these variables.
   ============================================================ */

:root {
    --remem-primary:   #0073aa;
    --remem-success:   #28a745;
    --remem-error:     #dc3545;
    --remem-border:    #ccd0d4;
    --remem-radius:    4px;
    --remem-font:      inherit;
}

.remem-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--remem-font);
}

/* ---------- layout ---------- */
.remem-form .remem-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.remem-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    width: 100%;
}
.remem-half    { flex: 1 1 calc(50% - 8px); min-width: 140px; }
.remem-quarter { flex: 1 1 calc(25% - 8px); min-width: 80px;  }

/* ---------- labels ---------- */
.remem-form label {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: .9em;
}
.remem-req { color: var(--remem-error); }

/* ---------- inputs ---------- */
.remem-form input[type="text"],
.remem-form input[type="email"],
.remem-form input[type="tel"],
.remem-form select {
    padding: 8px 10px;
    border: 1px solid var(--remem-border);
    border-radius: var(--remem-radius);
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s;
}
.remem-form input:focus,
.remem-form select:focus {
    outline: none;
    border-color: var(--remem-primary);
    box-shadow: 0 0 0 2px rgba(0,115,170,.2);
}

/* ---------- button ---------- */
.remem-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--remem-primary);
    color: #fff;
    border: none;
    border-radius: var(--remem-radius);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}
.remem-btn:hover  { opacity: .88; }
.remem-btn:disabled,
.remem-btn.loading { opacity: .6; cursor: not-allowed; }

/* ---------- notices ---------- */
.remem-notice {
    padding: 12px 16px;
    border-radius: var(--remem-radius);
    margin-bottom: 20px;
    font-weight: 500;
}
.remem-notice.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.remem-notice.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
    .remem-half,
    .remem-quarter { flex: 1 1 100%; }
}