/* WhatsApp number entry and the WhatsApp-first login (login.php, supplier-login.php, My Profile, Settings > WhatsApp).
   Uses the shared theme variables from styles.css, so dark mode follows body.dark-mode. */

.wa-phone { text-align: left; margin-bottom: 14px; }
.wa-phone label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--text-secondary); }
.wa-phone-row { display: flex; gap: 8px; align-items: stretch; }
.wa-phone-row select.wa-phone-dial {
    flex: 0 0 auto;
    width: auto;
    max-width: 46%;
    min-height: 44px;
    padding: 8px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, #fff);
    color: inherit;
    font-size: 15px;
}
.wa-phone-row input.wa-phone-local {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.wa-login { text-align: left; }
.wa-login-title { font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.wa-login-title .fa-whatsapp { color: #25D366; }
.wa-login-help { margin-bottom: 14px; font-size: 13px; color: var(--text-muted); }
.wa-login-notice { margin-bottom: 12px; padding: 10px 12px; border-radius: 4px; background: rgba(37, 211, 102, 0.12); }
.wa-login-button { width: 100%; white-space: normal; min-height: 44px; }
.wa-login-code { margin-top: 18px; }
.wa-login-code input { font-size: 22px; letter-spacing: 0.3em; text-align: center; }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--text-muted); font-size: 13px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-color); }

.pw-login { text-align: left; }
.pw-login > summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-weight: 500;
}
.pw-login > summary::-webkit-details-marker { display: none; }
.pw-login[open] > summary { margin-bottom: 16px; }