/* ═══════════════════════════════════════
   Thamer Login v2 - CSS
═══════════════════════════════════════ */
:root{
  --tl-bg:#0f1117; --tl-card:#161b22; --tl-border:#30363d;
  --tl-focus:#58a6ff; --tl-text:#e6edf3; --tl-muted:#8b949e;
  --tl-primary:#238636; --tl-primary-h:#2ea043;
  --tl-danger:#f85149; --tl-success:#3fb950; --tl-warn:#d29922;
  --tl-input:#0d1117; --tl-r:10px; --tl-r-sm:7px;
  --tl-shadow:0 16px 48px rgba(0,0,0,.6);
  --tl-t:.18s ease;
}

/* ════════════════════════════════
   POPUP STYLES  (3 themes)
════════════════════════════════ */

/* Theme: dark (default) */
.tl-popup-overlay{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden;
  transition:opacity .25s,visibility .25s;
}
.tl-popup-overlay.open{ opacity:1; visibility:visible; }

/* Backdrop options */
#tl-popup-overlay.tl-backdrop-dark  { background:rgba(0,0,0,.78) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; }
#tl-popup-overlay.tl-backdrop-light { background:rgba(80,70,50,.45) !important; backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important; }
#tl-popup-overlay.tl-backdrop-blur  { background:rgba(10,12,18,.88) !important; backdrop-filter:blur(18px) saturate(1.5) !important; -webkit-backdrop-filter:blur(18px) !important; }
#tl-popup-overlay.tl-backdrop-glass { background:rgba(255,255,255,.08) !important; backdrop-filter:blur(22px) !important; -webkit-backdrop-filter:blur(22px) !important; }
#tl-popup-overlay.tl-backdrop-none  { background:transparent !important; backdrop-filter:none !important; }

.tl-popup{
  position:relative; width:100%; max-width:420px;
  max-height:90vh; overflow-y:auto; border-radius:18px;
  animation:tlSlideUp .28s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width:none;
  /* overflow visible so global dropdown can escape */
  overflow:visible;
}
.tl-popup > *{ overflow:visible; }
.tl-popup::-webkit-scrollbar{ display:none; }
@keyframes tlSlideUp{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── Close button ── */
.tl-popup-close{
  position:absolute; top:12px; left:12px; z-index:100;
  width:32px; height:32px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#e6edf3; cursor:pointer; transition:all var(--tl-t);
  line-height:1; padding:0;
}
.tl-popup-close:hover{ background:rgba(248,81,73,.25); border-color:rgba(248,81,73,.5); color:#f85149; transform:scale(1.1); }
.tl-popup-close svg{ display:block; flex-shrink:0; }

/* ── Card ── */
.tl-card{
  background:var(--tl-card); border:1px solid var(--tl-border);
  border-radius:18px; padding:36px 32px;
  box-shadow:var(--tl-shadow); position:relative;
  /* overflow visible - country dropdown escapes to body via JS */
}
.tl-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#238636,#58a6ff,#bc8cff);
}

/* ── Logo ── */
.tl-logo{ text-align:center; margin-bottom:22px; }
.tl-logo img,.tl-logo .custom-logo{ max-height:48px; max-width:160px; width:auto; object-fit:contain; }
.tl-site-name{ text-align:center; font-size:19px; font-weight:800; color:var(--tl-text); margin-bottom:22px; }

/* ── Messages ── */
.tl-messages{ margin-bottom:0; }
.tl-msg{ padding:11px 14px; border-radius:var(--tl-r-sm); font-size:13px; line-height:1.5; margin-bottom:16px; }
.tl-msg-error  { background:rgba(248,81,73,.1);  border:1px solid rgba(248,81,73,.3);  color:#f85149; }
.tl-msg-success{ background:rgba(63,185,80,.1);  border:1px solid rgba(63,185,80,.3);  color:#3fb950; }
.tl-msg-info   { background:rgba(88,166,255,.1); border:1px solid rgba(88,166,255,.3); color:#58a6ff; }

/* ── Screen ── */
.tl-screen{ animation:tlFadeIn .2s ease; }
@keyframes tlFadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tl-screen-header{ margin-bottom:22px; }
.tl-title{ font-size:20px; font-weight:700; color:var(--tl-text); margin:0 0 5px; }
.tl-subtitle{ font-size:13px; color:var(--tl-muted); line-height:1.55; margin:0; }
.tl-subtitle strong{ color:var(--tl-text); }

/* ── Back btn ── */
.tl-back-btn{
  background:none; border:none; color:var(--tl-muted); cursor:pointer;
  padding:0; margin-bottom:8px; display:inline-flex; align-items:center;
  gap:5px; font-size:13px; font-family:inherit; transition:color var(--tl-t);
}
.tl-back-btn:hover{ color:var(--tl-text); }

/* ── Tabs ── */
.tl-tabs{
  display:flex; gap:5px; background:var(--tl-input);
  border:1px solid var(--tl-border); border-radius:var(--tl-r-sm);
  padding:4px; margin-bottom:20px;
}
.tl-tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; font-size:13px; font-weight:600; border:none; border-radius:5px;
  cursor:pointer; background:transparent; color:var(--tl-muted);
  transition:all var(--tl-t); font-family:inherit;
}
.tl-tab.active{ background:var(--tl-card); color:var(--tl-text); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.tl-tab:hover:not(.active){ color:var(--tl-text); }

/* ── Fields ── */
.tl-field{ margin-bottom:16px; }
.tl-label{ display:block; font-size:12px; font-weight:600; color:var(--tl-muted); margin-bottom:6px; }
.tl-input-wrap{ position:relative; }
.tl-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--tl-muted); display:flex; align-items:center; pointer-events:none;
  transition:color var(--tl-t);
}
.tl-input{
  width:100%; background:var(--tl-input); border:1.5px solid var(--tl-border);
  border-radius:var(--tl-r-sm); padding:11px 38px 11px 13px;
  font-size:14px; color:var(--tl-text); outline:none;
  transition:border-color var(--tl-t),box-shadow var(--tl-t);
  font-family:inherit; direction:ltr; text-align:left; box-sizing:border-box;
}
.tl-input::placeholder{ color:#484f58; }
.tl-input:focus{ border-color:var(--tl-focus); box-shadow:0 0 0 3px rgba(88,166,255,.15); }
.tl-input-wrap:focus-within .tl-icon{ color:var(--tl-focus); }

/* ── Phone row ── */
.tl-phone-row{ display:flex; gap:8px; align-items:stretch; }
.tl-phone-input{ flex:1; padding-right:13px !important; }

/* ════════════════════════════════
   COUNTRY SELECTOR  (fixed)
════════════════════════════════ */
.tl-country-wrap{ position:relative; flex-shrink:0; }

.tl-country-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:0 11px; height:100%; min-height:44px;
  background:var(--tl-input); border:1.5px solid var(--tl-border);
  border-radius:var(--tl-r-sm); color:var(--tl-text);
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:border-color var(--tl-t); font-family:inherit; line-height:1;
}
.tl-country-btn:hover{ border-color:var(--tl-muted); }

/* Use fixed positioning so it escapes overflow:hidden on popup */
.tl-country-dropdown{
  position:fixed !important;
  width:260px !important;
  background:#1c2333 !important;
  border:1px solid #30363d !important;
  border-radius:8px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.8) !important;
  z-index:2147483647 !important;
  overflow:hidden !important;
  display:none;
}
.tl-country-dropdown.open{ display:block !important; }

.tl-country-search-wrap{
  padding:8px;
  border-bottom:1px solid #30363d;
  background:#1c2333;
}
.tl-country-search{
  width:100%; padding:8px 12px;
  background:#0d1117; border:1px solid #30363d; border-radius:5px;
  color:#e6edf3; font-size:13px; outline:none; font-family:inherit;
  box-sizing:border-box; display:block;
}
.tl-country-search::placeholder{ color:#484f58; }

.tl-country-list{
  list-style:none !important; margin:0; padding:4px;
  max-height:220px; overflow-y:auto; display:block;
}
.tl-country-list::-webkit-scrollbar{ width:4px; }
.tl-country-list::-webkit-scrollbar-thumb{ background:#30363d; border-radius:4px; }

.tl-country-item{
  display:flex !important; align-items:center !important;
  gap:9px; padding:9px 10px;
  border-radius:5px; cursor:pointer; list-style:none !important;
  transition:background .15s; margin:0;
}
.tl-country-item:hover,.tl-country-item.sel{
  background:rgba(88,166,255,.15);
}
.tl-country-item .tl-flag{ font-size:18px; flex-shrink:0; line-height:1; }
.tl-country-name{ flex:1; font-size:13px; color:#c9d1d9; }
.tl-dial-sm{ font-size:12px; color:#8b949e; direction:ltr; white-space:nowrap; }

/* ── OTP boxes ── */
.tl-otp-boxes{
  display:flex; gap:9px; justify-content:center; margin:20px 0; direction:ltr;
}
.tl-otp-digit{
  width:50px; height:58px; text-align:center; font-size:22px; font-weight:700;
  color:var(--tl-text); background:var(--tl-input); border:2px solid var(--tl-border);
  border-radius:9px; outline:none; font-family:'Courier New',monospace;
  caret-color:var(--tl-focus);
  transition:border-color var(--tl-t),box-shadow var(--tl-t),transform var(--tl-t);
}
.tl-otp-digit:focus{ border-color:var(--tl-focus); box-shadow:0 0 0 3px rgba(88,166,255,.2); transform:scale(1.06); }
.tl-otp-digit.filled{ border-color:var(--tl-success); background:rgba(63,185,80,.07); }
.tl-otp-digit.error{ border-color:var(--tl-danger); animation:tlShake .4s ease; }
@keyframes tlShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ── Verify sections ── */
.tl-verify-section{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--tl-border); }
.tl-verify-section:last-of-type{ border-bottom:none; }
.tl-verify-label{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tl-muted); margin-bottom:10px; }
.tl-verify-label strong{ color:var(--tl-text); }
.tl-phone-status{ text-align:center; padding:10px; font-size:13px; }
.tl-status-pending{ color:var(--tl-warn); }
.tl-status-ok{ color:var(--tl-success); }

/* ── Remember ── */
.tl-remember-row{ margin:14px 0; }
.tl-check-label{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--tl-muted); cursor:pointer; user-select:none; }
.tl-check-label input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:17px; height:17px; border:2px solid var(--tl-border); border-radius:4px; background:var(--tl-input); cursor:pointer; position:relative; flex-shrink:0; transition:all var(--tl-t); }
.tl-check-label input:checked{ background:var(--tl-primary); border-color:var(--tl-primary); }
.tl-check-label input:checked::after{ content:''; position:absolute; left:3px; top:1px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); }

/* ── Buttons ── */
.tl-btn{
  width:100%; padding:12px 20px; font-size:14px; font-weight:700;
  border:none; border-radius:var(--tl-r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--tl-t); font-family:inherit; margin-top:4px;
}
.tl-btn-primary{ background:var(--tl-primary); color:#fff; box-shadow:0 2px 8px rgba(35,134,54,.3); }
.tl-btn-primary:hover:not(:disabled){ background:var(--tl-primary-h); transform:translateY(-1px); box-shadow:0 4px 14px rgba(35,134,54,.45); }
.tl-btn-primary:active:not(:disabled){ transform:translateY(0); }
.tl-btn-outline{ background:transparent; color:var(--tl-muted); border:1.5px solid var(--tl-border); }
.tl-btn-outline:hover{ color:var(--tl-text); border-color:var(--tl-muted); }
.tl-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ── Resend ── */
.tl-resend-row{ text-align:center; margin-top:12px; }
.tl-resend-btn{ background:none; border:none; color:var(--tl-focus); font-size:13px; cursor:pointer; padding:5px 10px; border-radius:var(--tl-r-sm); transition:all var(--tl-t); font-family:inherit; font-weight:500; }
.tl-resend-btn:hover:not(:disabled){ background:rgba(88,166,255,.1); }
.tl-resend-btn:disabled{ color:var(--tl-muted); cursor:not-allowed; }
.tl-countdown{ font-size:12px; color:var(--tl-muted); margin-right:4px; }

/* ── Switch row ── */
.tl-switch-row{ text-align:center; font-size:13px; color:var(--tl-muted); margin-top:16px; }
.tl-link-btn{ background:none; border:none; color:var(--tl-focus); font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; padding:0 4px; text-decoration:underline; transition:color var(--tl-t); }
.tl-link-btn:hover{ color:#79c0ff; }

/* ── Spinner ── */
.tl-spinner{ display:inline-block; width:17px; height:17px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:tlSpin .7s linear infinite; flex-shrink:0; }
@keyframes tlSpin{ to{ transform:rotate(360deg); } }

/* ── Success ── */
.tl-success-icon{ text-align:center; color:var(--tl-success); margin-bottom:14px; animation:tlPop .5s cubic-bezier(.175,.885,.32,1.275); }
@keyframes tlPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.tl-redirecting{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-size:13px; color:var(--tl-muted); }

/* ── Already logged in ── */
.tl-already-in{ padding:20px; text-align:center; background:var(--tl-card); border:1px solid var(--tl-border); border-radius:var(--tl-r); max-width:400px; margin:0 auto; }
.tl-already-in p{ font-size:14px; color:var(--tl-text); margin-bottom:14px; }

/* ── Inline ── */
.tl-wrap[data-mode=inline]{ display:flex; align-items:center; justify-content:center; padding:20px 0; }
.tl-wrap[data-mode=inline] .tl-card{ max-width:420px; width:100%; }

/* ── Recaptcha ── */
#tl-login-recaptcha,#tl-reg-recaptcha{ margin-bottom:8px; }

/* ── Loader in btn ── */
.tl-loader{ display:inline-flex; align-items:center; }

/* ── Responsive ── */
@media(max-width:480px){
  .tl-card{ padding:22px 16px; border-radius:14px; }
  .tl-popup{
    max-width:100%;
    border-radius:16px;
    max-height:85vh;
    overflow-y:auto !important;
  }
  .tl-popup-overlay{
    align-items:center;
    padding:16px;
  }
  .tl-country-dropdown{
    width:90vw !important;
    max-width:340px !important;
  }
  .tl-otp-digit{ width:42px; height:52px; font-size:18px; }
  .tl-otp-boxes{ gap:6px; }
}