/* ═══════════════════════════════════════════════════════════════
   NetGSM SMS OTP — Frontend Styles
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ngsm-primary:   #1a73e8;
    --ngsm-success:   #1e8f3c;
    --ngsm-error:     #d93025;
    --ngsm-border:    #d2d5db;
    --ngsm-bg:        #f8f9fa;
    --ngsm-radius:    8px;
    --ngsm-shadow:    0 2px 8px rgba(0,0,0,.1);
}

/* ── Tab navigation ──────────────────────────────────────────── */
.ngsm-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ngsm-border);
}

.ngsm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    transition: color .15s, border-color .15s;
}

.ngsm-tab:hover   { color: var(--ngsm-primary); }
.ngsm-tab.active  { color: var(--ngsm-primary); border-bottom-color: var(--ngsm-primary); }

/* ── OTP form wrapper ────────────────────────────────────────── */
.ngsm-otp-form {
    padding: 4px 0;
}

.ngsm-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

/* ── Phone input row ─────────────────────────────────────────── */
.ngsm-phone-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid var(--ngsm-border);
    border-radius: var(--ngsm-radius);
    overflow: hidden;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.ngsm-phone-row:focus-within {
    border-color: var(--ngsm-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.ngsm-flag {
    padding: 10px 12px;
    background: var(--ngsm-bg);
    border-right: 1px solid var(--ngsm-border);
    font-size: 14px;
    white-space: nowrap;
    color: #555;
    user-select: none;
}

.ngsm-phone-row .ngsm-input {
    border: none !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    flex: 1;
    font-size: 16px;
    letter-spacing: .5px;
    outline: none;
}

/* ── Generic input ───────────────────────────────────────────── */
.ngsm-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ngsm-border);
    border-radius: var(--ngsm-radius);
    font-size: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.ngsm-input:focus {
    outline: none;
    border-color: var(--ngsm-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

/* ── OTP digit boxes ─────────────────────────────────────────── */
.ngsm-otp-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 16px 0;
}

.ngsm-otp-box {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid var(--ngsm-border);
    border-radius: var(--ngsm-radius);
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .1s;
    caret-color: transparent;
}
.ngsm-otp-box:focus {
    outline: none;
    border-color: var(--ngsm-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.18);
    transform: scale(1.06);
}
.ngsm-otp-box:not(:placeholder-shown) {
    border-color: var(--ngsm-primary);
    background: #eef4fd;
}

@keyframes ngsm-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.ngsm-shake { animation: ngsm-shake .45s ease; }

/* ── Countdown ───────────────────────────────────────────────── */
.ngsm-countdown {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}
#ngsm-timer {
    font-weight: 700;
    color: var(--ngsm-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.ngsm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--ngsm-primary);
    color: #fff;
    border: none;
    border-radius: var(--ngsm-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    margin-bottom: 10px;
    position: relative;
}
.ngsm-btn:hover:not(:disabled) {
    background: #1558b0;
    box-shadow: var(--ngsm-shadow);
}
.ngsm-btn:active:not(:disabled) { transform: scale(.98); }
.ngsm-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ngsm-spin .7s linear infinite;
    display: inline-block;
}
@keyframes ngsm-spin { to { transform: rotate(360deg); } }

.ngsm-link-btn {
    background: none;
    border: none;
    color: var(--ngsm-primary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    display: block;
    width: 100%;
    text-align: center;
    transition: color .15s;
}
.ngsm-link-btn:hover:not(:disabled) { text-decoration: underline; }
.ngsm-link-btn:disabled { color: #aaa; cursor: not-allowed; }

/* ── Messages ────────────────────────────────────────────────── */
.ngsm-msg {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    min-height: 20px;
    margin-top: 8px;
    transition: all .2s;
}
.ngsm-msg.ngsm-success {
    background: #e6f4ea;
    color: var(--ngsm-success);
    border: 1px solid #a8d5b5;
}
.ngsm-msg.ngsm-error {
    background: #fce8e6;
    color: var(--ngsm-error);
    border: 1px solid #f5a99b;
}

/* ── Checkout block ──────────────────────────────────────────── */
.ngsm-checkout-block {
    background: var(--ngsm-bg);
    border: 1px solid var(--ngsm-border);
    border-radius: var(--ngsm-radius);
    padding: 20px;
    margin-top: 20px;
}

/* ── Admin ───────────────────────────────────────────────────── */
.ngsm-admin h1 { display: flex; align-items: center; gap: 8px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ngsm-otp-box { width: 38px; height: 46px; font-size: 20px; }
    .ngsm-otp-boxes { gap: 6px; }
}

/* ── Premium one-step login UX ─────────────────────────────── */
.ngsm-login-shell {
    width: 100%;
    box-sizing: border-box;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(145deg, #111827 0%, #171717 55%, #260b05 100%);
    color: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    overflow: hidden;
    position: relative;
}
.ngsm-login-shell:before {
    content: "";
    position: absolute;
    inset: -40% -35% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,90,20,.34), rgba(255,90,20,0) 68%);
    pointer-events: none;
}
.ngsm-login-shell * { box-sizing: border-box; }
.ngsm-login-hero { position: relative; z-index: 1; margin-bottom: 16px; }
.ngsm-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #ffd8ca;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 10px;
}
.ngsm-login-hero h3 {
    margin: 0 0 6px !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}
.ngsm-login-hero p {
    margin: 0 !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.ngsm-login-shell .ngsm-tabs {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    margin: 0 0 16px !important;
}
.ngsm-login-shell .ngsm-tab {
    justify-content: center;
    min-height: 42px;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(255,255,255,.76) !important;
    font-weight: 800 !important;
    margin: 0 !important;
    padding: 10px 8px !important;
}
.ngsm-login-shell .ngsm-tab.active {
    background: #ff5a14 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255,90,20,.28) !important;
}
.ngsm-login-shell .ngsm-panel,
.ngsm-login-shell .ngsm-otp-form { position: relative; z-index: 1; }
.ngsm-login-shell .ngsm-label { color: #fff !important; }
.ngsm-login-shell .ngsm-phone-row {
    min-height: 54px;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.96) !important;
}
.ngsm-login-shell .ngsm-flag {
    min-height: 54px;
    background: #fff3ed !important;
    color: #222 !important;
    font-weight: 800;
}
.ngsm-login-shell .ngsm-phone-row .ngsm-input {
    min-height: 54px !important;
    font-weight: 800;
    color: #111827;
}
.ngsm-login-shell .ngsm-btn {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff6a1f, #ff3d00) !important;
    box-shadow: 0 14px 30px rgba(255,90,20,.30) !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
}
.ngsm-login-shell .ngsm-btn:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.ngsm-login-shell .ngsm-otp-box {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(255,255,255,.20) !important;
    color: #111827 !important;
    border-radius: 14px !important;
}
.ngsm-login-shell .ngsm-countdown,
.ngsm-login-shell .ngsm-link-btn { color: rgba(255,255,255,.78) !important; }
.ngsm-login-shell .ngsm-link-btn:not(:disabled) { color: #ffd8ca !important; }
.ngsm-login-shell .ngsm-msg { color: rgba(255,255,255,.84); }
.ngsm-login-shell .ngsm-success { color: #86efac !important; }
.ngsm-login-shell .ngsm-error { color: #fecaca !important; }
.ngsm-login-shell .ngsm-password-panel input:not([type="checkbox"]),
.ngsm-login-shell .ngsm-password-panel input[type="text"],
.ngsm-login-shell .ngsm-password-panel input[type="password"] {
    border-radius: 14px !important;
    min-height: 48px !important;
}
.ngsm-login-shell .ngsm-password-panel label,
.ngsm-login-shell .ngsm-password-panel .lost_password,
.ngsm-login-shell .ngsm-password-panel .woocommerce-LostPassword,
.ngsm-login-shell .ngsm-password-panel a { color: rgba(255,255,255,.86) !important; }
@media (max-width: 420px) {
    .ngsm-login-shell { padding: 15px; border-radius: 18px; }
    .ngsm-login-shell .ngsm-tab { font-size: 12px !important; }
    .ngsm-login-hero h3 { font-size: 20px !important; }
    .ngsm-login-shell .ngsm-otp-box { width: 39px !important; height: 48px !important; }
}