/* ── UPSC OTP Login Form ─────────────────────────────────────── */
.upsc-otp-wrapper {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px 24px 20px;
    margin: 40px auto 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    max-width: 460px;       /* keep form readable on desktop */
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .upsc-otp-wrapper {
        padding: 36px 32px 28px;
        margin: 60px auto 40px;
    }
}

/* Header */
.upsc-otp-header { text-align: center; margin-bottom: 22px; }
.upsc-otp-icon-wrap {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #eef5ff, #dbe7f5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    color: #2d6cb5;
}
.upsc-otp-header h3 { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.upsc-otp-header p  { font-size: 13px; color: #666; margin: 0; }

/* Phone input */
.upsc-phone-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: border-color .2s;
}
.upsc-phone-input-wrap:focus-within { border-color: #2d6cb5; }
.upsc-dial-code {
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #f6f9fc;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    height: 48px;
    display: flex;
    align-items: center;
}
#upsc-phone {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    height: 48px;
    padding: 0 14px;
    font-size: 15px;
    color: #1a1a1a;
    background: #fff;
}

/* Primary button */
.upsc-primary-btn {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #2d6cb5, #1a365d);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
}
.upsc-primary-btn:hover:not(:disabled) { opacity: .92; }
.upsc-primary-btn:active:not(:disabled) { transform: scale(.98); }
.upsc-primary-btn:disabled { background: #aaa; cursor: not-allowed; }

/* OTP 6-box input */
.upsc-sent-info { text-align: center; font-size: 13px; color: #555; margin-bottom: 16px; }
.upsc-sent-info strong { color: #1a1a1a; }

.upsc-otp-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}
.upsc-otp-box {
    width: 44px !important;
    height: 52px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s, background .2s !important;
    background: #f8fafc !important;
    padding: 0 !important;
}
.upsc-otp-box:focus {
    border-color: #2d6cb5 !important;
    background: #fff !important;
}
.upsc-otp-box.filled {
    border-color: #1a365d !important;
    background: #eef5ff !important;
}

/* Messages */
.upsc-msg {
    min-height: 20px;
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    border-radius: 6px;
    padding: 0 4px;
}
.upsc-msg.error   { color: #c62828; }
.upsc-msg.success { color: #2d6cb5; }

/* Resend row */
.upsc-resend-row {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 14px;
}
.upsc-resend-row a { color: #2d6cb5; text-decoration: none; font-weight: 600; }
.upsc-resend-row a:hover { text-decoration: underline; }
#upsc-countdown { color: #e65100; font-weight: 700; }

/* Divider */
.upsc-otp-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 4px;
    color: #aaa; font-size: 12px;
}
.upsc-otp-divider::before,
.upsc-otp-divider::after {
    content: ''; flex: 1; height: 1px; background: #e8e8e8;
}

/* Mobile tweaks */
@media (max-width: 400px) {
    .upsc-otp-box { width: 38px !important; height: 46px !important; font-size: 19px !important; }
    .upsc-otp-boxes { gap: 6px; }
    .upsc-otp-wrapper { padding: 22px 16px 16px; }
}

/* Shake animation for wrong OTP */
@keyframes upsc-shake {
    0%,100% { transform: translateX(0); }
    20%,60%  { transform: translateX(-6px); }
    40%,80%  { transform: translateX(6px); }
}
.upsc-otp-boxes.shake { animation: upsc-shake .4s ease; }

/* Hide standard WC login form — OTP only */
.woocommerce-form-login,
.woocommerce-form-login__submit,
.wc_login_nonce,
u.woocommerce-tabs .login { display: none !important; }

/* Hide 'Login' tab if WC shows login/register tabs */
.u-column1.col-1 { display: none !important; }
.u-column2.col-2 { float: none !important; width: 100% !important; }

/* ─── Desktop layout — center the form properly ─────────────────────── */
@media (min-width: 769px) {
    /* Outer container — give it nice spacing & background */
    .upsc-account-page,
    body.woocommerce-account .upsc-account-content,
    body.upsc-otp-page-wrap {
        background: linear-gradient(135deg, #f8f7ff 0%, #eef0ff 100%);
        min-height: calc(100vh - 200px);
        padding: 40px 20px !important;
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
    }
    /* The OTP card — proper desktop width */
    .upsc-otp-wrapper {
        max-width: 440px !important;
        width: 100%;
        margin: 60px auto !important;
        padding: 36px 32px 28px !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.10) !important;
        border: 1px solid rgba(99, 102, 241, 0.08) !important;
    }
    /* Header polish */
    .upsc-otp-header h3 { font-size: 22px !important; margin-bottom: 6px !important; }
    .upsc-otp-header p  { font-size: 14px !important; }
    .upsc-otp-icon-wrap {
        width: 64px !important; height: 64px !important;
        margin-bottom: 16px !important;
    }
    .upsc-otp-icon-wrap svg { width: 32px; height: 32px; }
    /* Inputs taller for easier desktop interaction */
    .upsc-phone-input-wrap, #upsc-phone, .upsc-dial-code,
    .upsc-primary-btn { height: 52px !important; }
    .upsc-primary-btn { font-size: 16px !important; }
    #upsc-phone { font-size: 16px !important; }
    /* OTP boxes bigger on desktop */
    .upsc-otp-box {
        width: 48px !important; height: 56px !important;
        font-size: 22px !important;
    }
    .upsc-otp-boxes { gap: 10px !important; }
}

/* On large desktops add even more breathing room */
@media (min-width: 1200px) {
    .upsc-otp-wrapper { margin: 80px auto !important; }
}