/**
 * TADTaiwan Membership – Frontend Auth Styles
 *
 * Login, registration and password-reset forms.
 *
 * Sizing uses rem and the card is width-capped rather than fixed, so the
 * forms sit correctly inside a theme's content column and collapse cleanly
 * on a phone. Colours follow the existing public.css palette.
 *
 * @package TAD_Membership
 */

/* ── Container ─────────────────────────────────────────────── */

.tad-auth {
    max-width: 26rem;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.tad-auth__form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.75rem;
}

.tad-auth__intro {
    margin: 0 0 1.25rem;
    font-size: 14px;
    color: #666;
}

/* ── Notices ───────────────────────────────────────────────── */

.tad-auth__notice {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.tad-auth__notice--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.tad-auth__notice--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.tad-auth-notice {
    padding: 0.75rem 1rem;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 14px;
}

/* ── Fields ────────────────────────────────────────────────── */

.tad-auth__field {
    margin-bottom: 1.125rem;
}

.tad-auth__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.tad-auth__required {
    color: #d63638;
    margin-left: 0.125rem;
}

/* box-sizing is set explicitly: themes vary on whether they apply a global
   border-box reset, and without it the 100% width plus padding overflows
   the card. */
.tad-auth__input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tad-auth__input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.tad-auth__hint {
    margin: 0.375rem 0 0;
    font-size: 13px;
    color: #777;
}

/* ── Row: remember me + reset link ─────────────────────────── */

.tad-auth__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.tad-auth__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

/* ── Submit ────────────────────────────────────────────────── */

.tad-auth__submit {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #2271b1;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tad-auth__submit:hover,
.tad-auth__submit:focus {
    background: #135e96;
}

.tad-auth__submit:focus-visible {
    outline: 2px solid #135e96;
    outline-offset: 2px;
}

/* ── Links / footer ────────────────────────────────────────── */

.tad-auth__link {
    color: #2271b1;
    text-decoration: none;
    font-size: 14px;
}

.tad-auth__link:hover,
.tad-auth__link:focus {
    text-decoration: underline;
}

.tad-auth__foot {
    margin: 1.25rem 0 0;
    padding-top: 1.125rem;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* ── Tabbed login / register ───────────────────────────────── */

/* The toggle is a pair of radio inputs rather than a script, so the page
   still switches with JavaScript disabled. They are moved off-screen
   instead of display:none — a hidden input cannot receive keyboard focus,
   which would leave the tabs unreachable by keyboard. */
.tad-auth__tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tad-auth--tabs {
    max-width: 30rem;
}

.tad-auth__tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e0e0e0;
}

.tad-auth__tab {
    flex: 1;
    padding: 0.75rem 1rem;
    margin-bottom: -2px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #666;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tad-auth__tab:hover {
    color: #2271b1;
}

/* Panels are hidden by default and revealed by the matching radio. */
.tad-auth__panel {
    display: none;
}

#tad-auth-tab-login:checked ~ .tad-auth__tabs label[for="tad-auth-tab-login"],
#tad-auth-tab-register:checked ~ .tad-auth__tabs label[for="tad-auth-tab-register"] {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

#tad-auth-tab-login:checked ~ .tad-auth__panel--login,
#tad-auth-tab-register:checked ~ .tad-auth__panel--register {
    display: block;
}

/* Keyboard focus has to be visible on the label, because the input it
   controls is the off-screen element actually receiving focus. */
.tad-auth__tab-input:focus-visible ~ .tad-auth__tabs label[for="tad-auth-tab-login"],
.tad-auth__tab-input:focus-visible ~ .tad-auth__tabs label[for="tad-auth-tab-register"] {
    outline: 2px solid #135e96;
    outline-offset: -2px;
}

/* The in-form "已經是會員？" switcher is a label, so it needs the pointer
   and inline sizing a link would have had. */
.tad-auth__switch {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: #2271b1;
    cursor: pointer;
}

.tad-auth__switch:hover {
    text-decoration: underline;
}

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .tad-auth__form {
        padding: 1.25rem;
        border-radius: 6px;
    }

    .tad-auth__tab {
        padding: 0.625rem 0.5rem;
        font-size: 14px;
    }
}