/* ============================================================
   SIP Auth v3 — Frontend Styles
   Exact match: Login card / Registration 2-col / OTP modal
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --sip-primary:    #1e4fa3;
    --sip-secondary:  #0a2463;
    --sip-bg:         #dce8f0;
    --sip-card:       #ffffff;
    --sip-text:       #0d2137;
    --sip-border:     #d8e3ee;
    --sip-inp-bg:     #f0f4f8;
    --sip-placeholder:#99afc5;
    --sip-label:      #0d2137;
    --sip-sub:        #4a6180;
    --sip-error:      #dc2626;
    --sip-success:    #16a34a;
    --sip-radius:     12px;
    --sip-inp-radius: 8px;
/*     --sip-font:       'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; */
    --sip-shadow:     0 2px 20px rgba(10,36,99,.09);
}

/* ── Page wrapper ──────────────────────────────────────────── */
/* .sip-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    min-height:      60vh;
    padding:         56px 20px 64px;
    background:      var(--sip-bg);
    font-family:     var(--sip-font);
    box-sizing:      border-box;
    width:           100%;
} 
.sip-page--reg { padding-top: 44px; } 

*/

/* ── Site logo above form ──────────────────────────────────── */
.sip-site-logo { margin-bottom: 20px; }
.sip-site-logo img { max-height: 56px; max-width: 220px; object-fit: contain; }

/* ── Large title / subtitle ABOVE card ────────────────────── */
.sip-page-title {
    font-size:      2.2rem !important;
    font-weight:    800 !important;
    color:          var(--sip-text) !important;
    margin:         0 0 10px !important;
    padding:        0 !important;
    text-align:     center;
    letter-spacing: -.03em;
    line-height:    1.15;
    font-family:    var(--sip-font) !important;
}
.sip-page-sub {
    font-size:   0.97rem;
    color:       var(--sip-sub);
    margin:      0 0 28px !important;
    text-align:  center;
    line-height: 1.55;
    max-width:   520px;
}
.sip-contact-form .sip-terms-row input {
	height: auto !important;
}
/* ── Card ──────────────────────────────────────────────────── */
/* .sip-card {
    background:    var(--sip-card);
    border-radius: var(--sip-radius);
    box-shadow:    var(--sip-shadow);
    width:         100%;
    max-width:     540px;
    padding:       30px 28px 10px;
    box-sizing:    border-box;
} 
.sip-card--reg {
    max-width: 760px;
    padding:   32px 36px 12px;
}*/

/* ── Already logged in ─────────────────────────────────────── */
.sip-already {
    color:     var(--sip-sub);
    font-size: .95rem;
    padding:   4px 0;
}

/* ── Field ─────────────────────────────────────────────────── */
.sip-field {
    display:        flex;
    flex-direction: column;
    margin-bottom:  20px;
}
.sip-field label {
    font-size:     0.84rem;
    font-weight:   700;
    color:         var(--sip-label);
    margin-bottom: 10px;
    display:       block;
    font-family:   var(--sip-font);
}

/* ── Inputs ────────────────────────────────────────────────── */
.sip-card input[type="text"],
.sip-card input[type="email"],
.sip-card input[type="password"],
.sip-card input[type="tel"] {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--sip-border);
    border-radius: var(--sip-inp-radius);
    font-size:     0.91rem;
    color:         #000;
    background:    var(--sip-inp-bg);
    outline:       none;
    transition:    border-color .18s, box-shadow .18s, background .18s;
    box-sizing:    border-box;
    font-family:   var(--sip-font);
}
.sip-card input::placeholder { color: var(--sip-placeholder); }
.sip-card input:focus {
    border-color: var(--sip-primary);
    box-shadow:   0 0 0 3px rgba(30,79,163,.12);
    background:   #fff;
}
.sip-card input.sip-err {
    border-color: var(--sip-error) !important;
    box-shadow:   0 0 0 3px rgba(220,38,38,.10) !important;
}

/* ── Eye toggle ────────────────────────────────────────────── */
/* .sip-eye must NEVER inherit .sip-btn styles — it is a pure icon button */
.sip-eye-wrap { position: relative; }
.sip-eye-wrap input { padding-right: 46px; }
.sip-eye
{
    all:             unset;
    position:        absolute !important;
    right:           0 !important;
    top:             0 !important;
    bottom:          0 !important;
    width:           44px;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           var(--sip-placeholder);
    background:      var(--sip-secondary) !important;
    border:          none !important;
    border-radius:   0 var(--sip-inp-radius) var(--sip-inp-radius) 0 !important;
    padding:         0 10px!important;
    margin:          0 !important;
    box-shadow:      none !important;
    transform:       none !important;
    opacity:         1 !important;
    transition:      background .15s !important;
    line-height:     0;

}
.sip-card-foot {
	text-align: center;
    color: #000;
    margin-top: 15px;
}
/* .sip-eye:hover { background: var(--sip-primary) !important; color: #fff; } */
.sip-eye svg   { width: 18px; height: 18px; display: block; stroke: #D9D9D9; } 

/* ── Button ────────────────────────────────────────────────── */
/* Explicitly exclude .sip-eye so password toggle never gets button styles */
/* .sip-btn:not(.sip-eye) {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         14px;
    background:      linear-gradient(90deg, #2165b8 0%, var(--sip-primary) 45%, var(--sip-secondary) 100%);
    color:           #fff;
    border:          none;
    border-radius:   var(--sip-inp-radius);
    font-size:       0.97rem;
    font-weight:     600;
    cursor:          pointer;
    letter-spacing:  .01em;
    font-family:     var(--sip-font);
    transition:      opacity .18s, transform .12s;
    margin-bottom:   0;
    opacity:         1;
} */
/* .sip-btn:not(.sip-eye):hover    { opacity: .88; transform: translateY(-1px); } */
.sip-btn:not(.sip-eye):active   { opacity: 1; transform: translateY(0); }
.sip-btn:not(.sip-eye):disabled { opacity: .55; cursor: not-allowed; transform: none; }
.sip-btn--center  { width: auto; padding: 13px 44px; margin: 0 auto; display: flex; }

/* ── Spinner ───────────────────────────────────────────────── */
.sip-spin {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sip-spin .65s linear infinite;
    flex-shrink: 0;
}
@keyframes sip-spin { to { transform: rotate(360deg); } }

/* ── Card footer (register / login link inside card) ───────── */
/* .sip-card-foot {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             6px;
    padding:         18px 0 22px;
    font-size:       0.875rem;
    color:           var(--sip-sub);
    border-top:      1px solid #edf2f8;
    margin-top:      20px;
}
.sip-card-foot a {
    color:       var(--sip-primary);
    font-weight: 700;
    text-decoration: none;
}
.sip-card-foot a:hover { text-decoration: underline; }
.sip-card-foot--col {
    flex-direction: column;
    gap:            10px;
}
 */
/* ── Below-card links ──────────────────────────────────────── */
.sip-below {
    margin-top: 22px;
    text-align: center;
}
.sip-forgot-lnk {
    font-size:   0.93rem;
    font-weight: 700;
    color:       var(--sip-text);
    text-decoration: none;
    transition:  color .15s;
}
.sip-forgot-lnk:hover { color: var(--sip-primary); }

/* ── Messages ──────────────────────────────────────────────── */
.sip-msg {
    padding:       11px 14px;
    border-radius: 7px;
    font-size:     0.875rem;
    font-weight:   500;
    line-height:   1.45;
    margin-bottom: 18px;
}
.sip-msg.error   { background:#fef2f2; color:var(--sip-error);   border:1px solid #fecaca; }
.sip-msg.success { background:#f0fdf4; color:var(--sip-success); border:1px solid #bbf7d0; }
.sip-msg.info    { background:#eff6ff; color:#1d4ed8;            border:1px solid #bfdbfe; }

/* ═══════════════════════════════════════════════════════════════
   REGISTRATION CARD — 2-col grid
═══════════════════════════════════════════════════════════════ */

/* Full-name row: span-2 label then 2 inputs side-by-side */
 .sip-row-label {
/*     font-size:     0.84rem; */
    font-weight:   700; 
    color:         var(--sip-label);
    margin-bottom: 10px;
    font-family:   var(--sip-font);
} 
.sip-grid2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px 20px;
    margin-bottom:         20px;
}
.sip-grid2--name {
    /* Two plain inputs with no label wrapper */
    margin-bottom: 20px;
}
.sip-grid2--name input {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--sip-border);
    border-radius: var(--sip-inp-radius);
    font-size:     0.91rem;
    color:         var(--sip-text);
    background:    var(--sip-inp-bg);
    outline:       none;
    transition:    border-color .18s, box-shadow .18s;
    box-sizing:    border-box;
    font-family:   var(--sip-font);
}
.sip-grid2--name input::placeholder { color: var(--sip-placeholder); }
.sip-grid2--name input:focus {
    border-color: var(--sip-primary);
    box-shadow:   0 0 0 3px rgba(30,79,163,.12);
    background:   #fff;
}
.sip-grid2 .sip-field { margin-bottom: 0; }

/* ── Phone ─────────────────────────────────────────────────── */
.sip-phone {
    display: flex;
}
.sip-phone-code {
    flex-shrink:   0;
    width:         110px;
    border:        1.5px solid var(--sip-border);
    border-right:  none;
    border-radius: var(--sip-inp-radius) 0 0 var(--sip-inp-radius);
    background:    var(--sip-inp-bg);
    color:         var(--sip-text);
    font-size:     0.86rem;
    padding:       10px 8px 10px 10px;
    outline:       none;
    cursor:        pointer;
    font-family:   var(--sip-font);
    appearance:    none;
    -webkit-appearance: none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2399afc5'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 7px center;
    padding-right: 22px;
}
.sip-phone-code:focus { border-color: var(--sip-primary); outline: none; }
.sip-phone input[type="tel"] {
    border-radius: 0 var(--sip-inp-radius) var(--sip-inp-radius) 0 !important;
    flex: 1;
}

/* ── Country select ────────────────────────────────────────── */
.sip-sel-wrap { position: relative; }
.sip-sel-wrap select {
    width:         100%;
    padding:       11px 36px 11px 14px;
    border:        1.5px solid var(--sip-border);
    border-radius: var(--sip-inp-radius);
    background:    var(--sip-inp-bg);
    color:         var(--sip-text);
    font-size:     0.91rem;
    font-family:   var(--sip-font);
    outline:       none;
    appearance:    none;
    -webkit-appearance: none;
    cursor:        pointer;
    box-sizing:    border-box;
    transition:    border-color .18s;
}
.sip-sel-wrap select:focus {
    border-color: var(--sip-primary);
    box-shadow:   0 0 0 3px rgba(30,79,163,.12);
}
.sip-caret {
    position:    absolute;
    right:       13px;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--sip-placeholder);
    font-size:   0.72rem;
    pointer-events: none;
}

/* ── Password strength ─────────────────────────────────────── */
.sip-strength {
/*     height:        3px;
    background:    #e0eaf3;
    border-radius: 3px;
    margin-top:    7px;
    overflow:      hidden; */
	display: none;
}
#sip-sw {
    display:       block;
    height:        100%;
    width:         0%;
    border-radius: 3px;
    transition:    width .3s, background .3s;
}
.sip-slabel { font-size:.73rem; color:var(--sip-sub); margin:3px 0 0; }

/* ── Terms ─────────────────────────────────────────────────── */
.sip-terms { margin-bottom: 22px; }
.sip-terms-row {
    display:     flex;
    gap:         10px;
    align-items: flex-start;
    cursor:      pointer;
    margin-bottom: 12px;
}
.sip-terms-row input[type="checkbox"] {
    width:       16px; height: 16px;
    flex-shrink: 0;
    margin-top:  3px;
    accent-color: var(--sip-primary);
    cursor:      pointer;
}
.sip-terms-body {
    font-size:     16px;
    color:         #000000;
}
.sip-terms-body ul {
    margin:       8px 0 0;
    padding-left: 18px;
    list-style:   disc;
}
.sip-terms-body ul li {
    font-size:     16px;
    color:         #000000;
    margin-bottom: 10px;   
}
.sip-terms-further {
    font-size:   16px;
    color:       #000000;   
    margin:      0;
}
.sip-terms-further a { color: var(--sip-primary); text-decoration: underline; }

/* ── Submit wrap ───────────────────────────────────────────── */
.sip-reg-submit {
    display:         flex;
    justify-content: center;
    padding-bottom:  4px;
}

/* ═══════════════════════════════════════════════════════════════
   OTP MODAL
═══════════════════════════════════════════════════════════════ */
.sip-overlay {
    position:       fixed;
    inset:          0;
    background:     rgba(0,20,60,.52);
    z-index:        999999;
    display:        flex;
    align-items:    center;
    justify-content:center;
    padding:        16px;
    backdrop-filter: blur(4px);
    animation:      sip-fade .2s ease;
}
@keyframes sip-fade { from{opacity:0} to{opacity:1} }

.sip-otp-modal {
    background:    #ECF1F8;
    border-radius: 5px;
    box-shadow:    0 24px 70px rgba(0,20,80,.22);
    width:         100%;
    max-width:     520px;
    overflow:      hidden;
    position:      relative;
    animation:     sip-up .22s ease;
}
.sip-otp-h {
	color: #16151C !important;
}
@keyframes sip-up { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Dark logo bar (top of OTP modal) */
.sip-otp-header {
    background: linear-gradient(135deg, #0d1117 0%, #1a2533 100%);
    padding:    22px 28px;
    display:    flex;
    align-items:center;
    justify-content:center;
    border-radius: var(--sip-radius) var(--sip-radius) 0 0;
}
.sip-otp-header img {
    max-height: 48px;
    max-width:  190px;
    object-fit: contain;
}

.sip-otp-body { padding: 26px 28px 28px; }
.sip-otp-h {
    font-size:      1.3rem;
    font-weight:    800;
    color:          var(--sip-text);
    margin:         0 0 10px;
    letter-spacing: -.02em;
    font-family:    var(--sip-font);
}
.sip-otp-p {
    font-size:  16px;
    color:    #444444;
  
}

/* Eye wrap inputs need no extra padding since the eye sits outside the input visually */
/* .sip-eye-wrap input[type="password"],
.sip-eye-wrap input[type="text"] {
    border-radius: var(--sip-inp-radius) 0 0 var(--sip-inp-radius) !important;
    border-right:  none !important;
    padding-right: 14px !important; /* no internal space needed — eye is adjacent block */
} */

/* OTP digit boxes */



.sip-otp-box {
    width:         56px !important;
    height:        64px;
    text-align:    center;
    font-size:     1.55rem !important;
    font-weight:   700 !important;
    border:        1.5px solid var(--sip-border) !important;
    border-radius: var(--sip-inp-radius) !important;
    background:    var(--sip-inp-bg) !important;
    color:         var(--sip-text) !important;
    outline:       none;
    caret-color:   transparent;
    padding:       0 !important;
    transition:    border-color .18s, box-shadow .18s, transform .12s;
}
/* .sip-otp-box:focus {
    border-color: var(--sip-primary) !important;
    box-shadow:   0 0 0 3px rgba(30,79,163,.15) !important;
    background:   #fff !important;
    transform:    scale(1.06);
} */
.sip-otp-box.filled {
    border-color: var(--sip-primary) !important;
    background:   #eef3fc !important;
}
.sip-otp-box.shake {
    animation:    sip-shake .38s ease;
    border-color: var(--sip-error) !important;
}
@keyframes sip-shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
}

/* Full-width Verify button inside OTP modal */
.sip-otp-verify-btn { width: 100% !important; }

/* Resend */
.sip-resend {
    font-size:     0.85rem;
    color:         var(--sip-sub);
    margin-bottom: 18px;
    min-height:    22px;
}
#sip-resend-btn {
    background:  none;
    border:      none;
    color:       var(--sip-primary);
    font-weight: 700;
    cursor:      pointer;
    font-size:   0.85rem;
    padding:     0;
    font-family: var(--sip-font);
}
#sip-resend-btn:hover { text-decoration: underline; }

/* Close X */
.sip-otp-x {
    position:   absolute;
    top:        10px;
    right:      13px;
    background: rgba(255,255,255,.12);
    border:     none;
    color:      #000!important;
    font-size:  1rem;
    cursor:     pointer;
    width:      28px; height: 28px;
    border-radius: 50%;
    display:    flex;
    align-items:center;
    justify-content:center;
    transition: background .15s;
    z-index:    2;
}
.sip-otp-x:hover { background: rgba(255,255,255,.25); }

/* ═══════════════════════════════════════════════════════════════
   TABS ([sip_auth])
═══════════════════════════════════════════════════════════════ */
.sip-tabs-wrap {
    background:    var(--sip-card);
    border-radius: var(--sip-radius);
    box-shadow:    var(--sip-shadow);
    width:         100%;
    max-width:     800px;
    overflow:      hidden;
}
.sip-tabs-nav {
    display:     flex;
    border-bottom: 2px solid #e5edf5;
}
.sip-tab-btn {
    flex:        1;
    padding:     15px;
    background:  none;
    border:      none;
    font-size:   0.94rem;
    font-weight: 600;
    color:       #8fa5be;
    cursor:      pointer;
    position:    relative;
    top:         2px;
    border-bottom: 2px solid transparent;
    transition:  color .18s, border-color .18s;
    font-family: var(--sip-font);
}
.sip-tab-btn.active { color: var(--sip-primary); border-bottom-color: var(--sip-primary); }
.sip-tab-panel        { display: none; }
.sip-tab-panel.active { display: block; }
.sip-tab-inner        { padding: 28px 30px 10px; }
.sip-tab-foot {
    text-align:  center;
    padding:     14px 0 4px;
    font-size:   0.875rem;
}
.sip-tab-foot a { color: var(--sip-primary); font-weight: 700; text-decoration: none; }
.sip-tab-foot a:hover { text-decoration: underline; }

/* Embedded reg in tab — remove duplicate page chrome */
.sip-tab-inner--reg .sip-page--reg { padding: 0; background: transparent; align-items: stretch; }
.sip-tab-inner--reg .sip-card--reg { box-shadow: none; padding: 28px 30px 12px; max-width: 100%; }
.sip-tab-inner--reg .sip-page-title { text-align: left; }
.sip-tab-inner--reg .sip-page-sub   { text-align: left; }
.sip-tab-inner--reg .sip-site-logo  { display: none; }

/* ── Login link ────────────────────────────────────────────── */
a.sip-login-link { color: var(--sip-primary); font-weight: 600; text-decoration: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 620px) {
/*     .sip-page         { padding: 32px 12px 44px; }
    .sip-page-title   { font-size: 1.7rem !important; } 
    .sip-card         { padding: 24px 18px 10px; }
    .sip-card--reg    { padding: 24px 18px 12px; }*/
    .sip-grid2        { grid-template-columns: 1fr; }
    .sip-grid2--name  { grid-template-columns: 1fr; }
    .sip-otp-boxes    { gap: 7px; }
    .sip-otp-box      { width: 46px !important; height: 54px; font-size: 1.3rem !important; }
    .sip-otp-body     { padding: 30px; }
    .sip-tabs-wrap    { max-width: 100%; }
    .sip-tab-inner    { padding: 22px 18px 10px; }
    .sip-btn--center  { width: 100%; }
    .sip-phone-code   { width: 90px; font-size: 0.82rem; }
}
@media (max-width: 400px) {
    .sip-otp-boxes    { gap: 5px; }
    .sip-otp-box      { width: 40px !important; height: 48px; font-size: 1.15rem !important; }
}