/* ==========================================================================
   Reffinet Mail – Passwort vergessen / Wiederherstellungs-Adresse
   Ergänzt app.css (Variablen/Komponenten von dort), mobil ab 320 px.
   ========================================================================== */

.recovery-page { width: 100%; max-width: 460px; box-sizing: border-box; overflow-wrap: anywhere; }
.recovery-page .btn,
.recovery-card .btn,
.recovery-status .btn { min-height: var(--tap, 44px); touch-action: manipulation; }
.recovery-page input[type="text"],
.recovery-page input[type="email"],
.recovery-page input[type="password"],
.recovery-card input[type="email"],
.recovery-card input[type="password"] { min-height: var(--tap, 44px); font-size: 16px; }
.recovery-page .input-group { min-width: 0; }
.recovery-page .input-group input { min-width: 0; }
.recovery-page .captcha-box { min-height: 56px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.recovery-note { margin: 1.25rem 0 0; }

.forgot-link { margin: -.25rem 0 0; text-align: right; font-size: .9rem; }
.forgot-link a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); padding: 0 2px; }

.recovery-address { word-break: break-all; }
.recovery-details { margin: .25rem 0 1rem; display: grid; gap: .5rem; }
.recovery-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; min-width: 0; }
.recovery-details dt { color: var(--text2, #9aabc8); font-size: .85rem; }
.recovery-details dd { margin: 0; min-width: 0; font-weight: 600; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1rem; }
.recovery-actions .inline-form { display: inline-flex; margin: 0; }
.recovery-warning { margin: .75rem 0 1rem; }
.recovery-remove { margin-top: 1.25rem; border-top: 1px solid var(--border, rgba(255, 255, 255, .08)); padding-top: .5rem; }
.recovery-remove summary {
    display: flex; align-items: center; min-height: var(--tap, 44px); cursor: pointer;
    color: var(--red, #f87171); font-size: .9rem; font-weight: 600;
}
.recovery-remove .form { margin-top: .5rem; }
.recovery-badge { white-space: nowrap; }

@media (max-width: 640px) {
    .recovery-page.auth-card { margin-top: .75rem; padding: 1.5rem 1.1rem; }
    .recovery-page h1 { font-size: 1.6rem; }
    .recovery-page .input-suffix { padding: 0 10px; font-size: .85rem; }
    .recovery-actions { flex-direction: column; }
    .recovery-actions .inline-form, .recovery-actions .btn,
    .recovery-card .form-actions, .recovery-card .form-actions .btn,
    .recovery-status .btn { width: 100%; }
}

@media (max-width: 360px) {
    .recovery-page.auth-card { padding: 1.25rem .85rem; }
    .recovery-page .input-group { flex-direction: column; }
    .recovery-page .input-group input { border-radius: var(--r-sm, 10px) var(--r-sm, 10px) 0 0; }
    .recovery-page .input-suffix { width: 100%; max-width: none; box-sizing: border-box; border-left: 1px solid var(--border2); border-top: 0; border-radius: 0 0 var(--r-sm, 10px) var(--r-sm, 10px); padding: 8px 10px; }
}