/* WhatsApp OTP Login — v3.2 */

.wotp-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.wotp-overlay.wotp-visible { opacity: 1; }

.wotp-popup {
    background: #fff; border-radius: 24px 24px 0 0;
    width: 100%; max-width: 500px; padding: 12px 24px 32px;
    position: relative; box-shadow: 0 -8px 40px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
.wotp-overlay.wotp-visible .wotp-popup { transform: translateY(0); }

.wotp-drag-handle { width: 40px; height: 4px; background: #ddd; border-radius: 4px; margin: 0 auto 16px; }

.wotp-header-row {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-bottom: 16px; direction: rtl;
}
.wotp-user-icon {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid #eee;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wotp-title { font-size: 19px; font-weight: 700; color: #1a1a1a; margin: 0; white-space: nowrap; }

.wotp-label { font-size: 14px; color: #555; margin-bottom: 8px; text-align: right; font-weight: 500; }

/* Force LTR for dial code — fixes RTL flip */
div#wotp-country-btn, span#wotp-dial-code, .wotp-ci-code {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: left !important;
}

.wotp-phone-wrap {
    display: flex; align-items: center; border: 1.5px solid #e5e5e5;
    border-radius: 10px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff; direction: ltr; height: 50px;
}
.wotp-phone-wrap:focus-within { border-color: #7ec8c8; box-shadow: 0 0 0 3px rgba(126,200,200,0.08); }

.wotp-country-selector {
    display: flex; align-items: center; gap: 5px; padding: 0 8px 0 12px;
    cursor: pointer; border-right: 1px solid #eee; user-select: none;
    flex-shrink: 0; height: 100%; transition: background 0.15s;
    direction: ltr;
}
.wotp-country-selector:hover { background: #f9f9f9; }
.wotp-flag { font-size: 20px; line-height: 1; }
.wotp-dial-code {
    font-size: 14px; font-weight: 500; color: #444;
    direction: ltr; unicode-bidi: bidi-override; white-space: nowrap;
}
.wotp-chevron { color: #bbb; flex-shrink: 0; }

.wotp-phone-input {
    flex: 1; border: none; outline: none; padding: 0 14px;
    font-size: 16px; background: transparent; color: #1a1a1a;
    direction: ltr; text-align: left; width: 100%; min-width: 0; height: 100%;
}
.wotp-phone-input::placeholder { color: #c5c5c5; }

.wotp-country-dropdown {
    margin-top: 6px; border: 1px solid #e5e5e5; border-radius: 12px;
    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow: hidden; z-index: 10; animation: wotp-dd-in 0.2s ease;
}
@keyframes wotp-dd-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.wotp-country-search {
    width: 100%; border: none; border-bottom: 1px solid #f0f0f0;
    padding: 12px 16px; font-size: 14px; outline: none; box-sizing: border-box;
}
.wotp-country-list { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.wotp-country-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; transition: background 0.12s; font-size: 14px; direction: ltr;
}
.wotp-country-item:hover { background: #f5fafa; }
.wotp-country-item .wotp-ci-flag { font-size: 20px; width: 28px; text-align: center; }
.wotp-country-item .wotp-ci-name { flex: 1; color: #333; }
.wotp-country-item .wotp-ci-code { color: #999; font-size: 13px; direction: ltr; unicode-bidi: bidi-override; }

.wotp-otp-info { text-align: center; font-size: 14px; color: #555; margin-bottom: 20px; }
.wotp-otp-info strong { color: #333; font-weight: 600; }
.wotp-otp-boxes { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; direction: ltr; }
.wotp-otp-digit {
    width: 56px; height: 56px; text-align: center; font-size: 22px; font-weight: 700;
    border: 1.5px solid #e5e5e5; border-radius: 10px; background: #fff;
    outline: none; transition: all 0.2s; color: #1a1a1a; caret-color: #7ec8c8;
}
.wotp-otp-digit:focus { border-color: #7ec8c8; box-shadow: 0 0 0 3px rgba(126,200,200,0.1); }
.wotp-otp-digit.wotp-filled { border-color: #7ec8c8; background: #f5fbfb; }

.wotp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px; border: none; border-radius: 10px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; margin-top: 16px; font-family: inherit;
}
.wotp-btn-primary { background: #7ec8c8; color: #fff; }
.wotp-btn-primary:hover { background: #6bbcbc; }
.wotp-btn-primary:active { transform: scale(0.99); }
.wotp-btn-primary:disabled { background: #c4e3e3; cursor: not-allowed; }

.wotp-btn-loader {
    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%; animation: wotp-spin 0.6s linear infinite;
}
@keyframes wotp-spin { to { transform: rotate(360deg); } }

.wotp-btn-link {
    background: none; border: none; color: #7ec8c8; font-size: 14px;
    cursor: pointer; padding: 8px; font-weight: 500; font-family: inherit;
}
.wotp-btn-link:hover { color: #5aadad; }

.wotp-resend-wrap { text-align: center; margin-top: 14px; }
.wotp-timer { font-size: 13px; color: #aaa; }

.wotp-error {
    background: #fef5f5; color: #d94545; font-size: 13px; padding: 8px 12px;
    border-radius: 8px; margin-top: 10px; text-align: center; border: 1px solid #fde0e0;
    animation: wotp-shake 0.35s ease;
}
@keyframes wotp-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Trusted device notice */
.wotp-trusted-msg {
    text-align: center; padding: 16px 0; font-size: 14px; color: #555;
}
.wotp-trusted-msg .wotp-trusted-icon { font-size: 32px; margin-bottom: 8px; }

@media (max-width: 480px) {
    .wotp-popup { padding: 10px 20px 28px; }
    .wotp-otp-digit { width: 50px; height: 52px; font-size: 20px; }
    .wotp-otp-boxes { gap: 8px; }
}

/* Admin login page override */
body.login #loginform, body.login #nav, body.login .privacy-policy-page-link,
body.login #backtoblog, body.login #login h1 { display: none !important; }
body.login #login { width: 100%; max-width: 100%; padding: 0; }
body.login { background: #f5f5f5; }