/* ============================================================
   VISA TRAVEL EXPERT — CLEAN HEADER (COMBINED TOPBAR + MENU)
   Fixed header • No overlap • Auto header spacing via JS
=============================================================== */

/* ----------------------------------------
   GLOBAL VARIABLES
----------------------------------------- */
:root {
  --sun1:#ff6a00;
  --sun2:#ee0979;
  --sun3:#8f00ff;

  /* live computed total header height (via JS) */
  --headerTotal:120px;

  /* fallback values */
  --topbar-height:32px;
  --header-height:72px;

  --header-z:20000;
}

/* ----------------------------------------
   GENERAL
----------------------------------------- */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--headerTotal);
}

/* no duplicate padding */
#page-content{padding-top:0!important}

/* ============================================================
   MASTER FIXED WRAPPER (topbar + menu together)
=============================================================== */
#vte-header-wrapper{
  position:fixed;
  inset:0 auto auto 0;
  width:100%;
  z-index:var(--header-z);
  background:transparent;
}

/* ============================================================
   TOP BAR
=============================================================== */
.vte-topbar{
  width:100%;
  padding:1px 0;
  background:linear-gradient(90deg,var(--sun1),var(--sun2),var(--sun3));
  color:#fff;
  font-size:14px;
}

.vte-top-inner{
  max-width:1300px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 14px;
}

.top-left{display:flex;align-items:center}

.top-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.social img{
  width:22px;
  display:block;
  transition:transform .25s ease;
}
.social img:hover{transform:scale(1.15)}

/* ============================================================
   BUTTONS
=============================================================== */
.b2b-btn,
.track-btn{
  background:#fff;
  color:#ee0979;
  font-weight:700;
  border-radius:10px;
  border:2px solid #fff;
  text-decoration:none;
  display:inline-block;
}

.b2b-btn{
  padding:3px 8px;
  margin-left:15px;
  font-size:12px;
  animation:blinkB2B 1.3s infinite ease-in-out;
}

.track-btn{
  padding:3px 10px;
  font-size:14px;
  white-space:nowrap;
  animation:trackPulse 1.6s infinite ease-in-out;
}

@keyframes blinkB2B{
  0%{opacity:1}
  50%{opacity:.35}
  100%{opacity:1}
}

@keyframes trackPulse{
  0%,100%{transform:translateY(0);box-shadow:0 6px 16px rgba(0,0,0,.2)}
  50%{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
}

.b2b-btn:hover,
.track-btn:hover{
  animation:none;
  background:#ff6a00;
  color:#fff;
  transform:scale(1.05);
  transition:.25s;
}

/* ============================================================
   MAIN HEADER
=============================================================== */
#vte-header{
  width:100%;
  height:var(--header-height);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  transition:background .25s,box-shadow .25s,backdrop-filter .25s;
}

.vte-container{
  position:relative;
  max-width:1300px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 12px;
}

#vte-logo{
  width:160px;
  max-width:100%;
  display:block;
}

.vte-license{
  font-size:10px;
  color:#666;
  margin-top:1px;
  margin-left:8px;
}

/* ============================================================
   MENU
=============================================================== */
.vte-menu{
  list-style:none;
  display:flex;
  gap:26px;
  margin:0;
  padding:0;
}

.vte-menu li{position:relative}

.vte-menu a{
  font-size:16px;
  font-weight:600;
  color:#111;
  padding:10px 6px;
  text-decoration:none;
  display:inline-block;
}

.vte-menu a:hover{color:var(--sun2)}

.vte-menu a::after{display:none!important}

.vte-menu a.active::after{
  content:"";
  display:block!important;
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:2px;
  background:var(--sun2);
  border-radius:2px;
}

/* hide mobile Track Visa on desktop */
.mobile-track-item{display:none}

/* ============================================================
   TICKER
=============================================================== */
.ticker{
  overflow:hidden;
  white-space:nowrap;
  width:100%;
}

.ticker-text{
  display:inline-block;
  padding-left:20px;
  color:#fff;
  font-weight:900;
  animation:scrollRTL 20s linear infinite;
}

@keyframes scrollRTL{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

.ticker a{
  color:#fff;
  text-decoration:none;
  font-weight:900;
}

.ticker:hover .ticker-text{
  animation-play-state:paused!important;
}

/* ============================================================
   SUBMENU (DESKTOP)
=============================================================== */
.sub{
  list-style:none;
  padding:12px 0;
  margin:0;
  background:#fff;
  width:210px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  position:absolute;
  top:100%;
  left:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s,transform .25s;
  z-index:25000;
}

.has-sub:hover .sub{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.sub li{padding:10px 20px}

.sub a{
  display:block;
  background:#f4f7ff;
  padding:8px 12px;
  border-radius:10px;
  font-size:15px;
  color:#111;
}
.sub a:hover{
  background:#e2e7ff;
  color:var(--sun2);
}

/* ============================================================
   MAIN BUTTON
=============================================================== */
.btn-main{
  padding:9px 20px;
  border-radius:30px;
  background:linear-gradient(90deg,var(--sun2),var(--sun1));
  color:#fff;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:transform .25s,filter .25s;
}
.btn-main:hover{
  transform:scale(1.06);
  filter:brightness(1.05);
}

/* ============================================================
   HAMBURGER (single clean version)
=============================================================== */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
}

.hamburger span{
  width:28px;
  height:3px;
  background:#333;
  border-radius:3px;
  transition:transform .25s,opacity .25s;
}

/* animated X */
.hamburger.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE PANEL
=============================================================== */
.vte-mobile-panel{
  display:none;
  position:fixed;
  left:0;
  top:var(--headerTotal);
  width:100%;
  height:calc(100vh - var(--headerTotal));
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px);
  z-index:15000;
  overflow-y:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  transform:translateY(-100%);
  opacity:0;
  transition:transform .25s,opacity .25s;
}

.vte-mobile-panel.open{
  display:block;
  transform:translateY(0);
  opacity:1;
}

/* ============================================================
   RESPONSIVE
=============================================================== */

/* ---------- Mobile Navigation ---------- */
@media(max-width:980px){

  .vte-nav{display:none}
  .hamburger{display:flex}

  .vte-mobile-panel ul{
    list-style:none;
    padding:0 0 10px 0;
    margin:0;
  }

  .vte-mobile-panel li{
    padding:12px 18px;
    border-bottom:1px solid #f0f0f0;
  }

  .vte-mobile-panel a{
    display:block;
    color:#111;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    padding:8px 0;
  }

  .mobile-sub{
    display:none;
    background:#f8f8f8;
    border-radius:10px;
    margin-top:8px;
    padding:10px 14px;
  }

  .mobile-arrow{
    float:right;
    font-size:22px;
    font-weight:700;
    color:#ff6a00;
  }

  .top-left{display:none}
  .mobile-track-item{display:block}
}

/* ---------- Mobile Header Alignment ---------- */
@media(max-width:768px){

  /* lock header height for proper vertical centering */
  #vte-header{
    height:72px;
  }

  .vte-top-inner{
    flex-direction:column;
    gap:0;
    padding:6px 10px;
  }

  .vte-container{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    width:100%;
    position:relative;
  }

  /* left logo */
  #vte-logo{
    width:120px !important;
  }

  .vte-left{
    grid-column:1;
    justify-self:start;
  }

  /* ⭐ hamburger stays right edge */
  .vte-right{
    grid-column:3;
    justify-self:end;
    align-self:center;
  }

  .hamburger{
    display:flex;
    padding:4px;
    margin-right:0;
  }
}

/* ============================================================
   LOGIN / REGISTER / FORGOT MODALS
=============================================================== */

.login-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:30000;
  padding:12px;
  backdrop-filter:blur(3px);
}

.login-modal.open{display:flex}
body.modal-open{overflow:hidden}

.login-box{
  background:#fff;
  max-width:380px;
  width:100%;
  padding:22px 20px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:pop .25s ease;
}

@keyframes pop{
 from{transform:scale(.92);opacity:0}
 to{transform:scale(1);opacity:1}
}

.login-box input{
  width:100%;
  padding:12px;
  margin-top:10px;
  border-radius:12px;
  border:1px solid #ccc;
  font-size:14px;
}

.login-box input:focus{
  border-color:var(--sun2);
  box-shadow:0 0 0 2px rgba(238,9,121,.12);
}

.close-login{
  float:right;
  font-size:22px;
  cursor:pointer;
}
.close-login:hover{color:var(--sun2)}

/* EXACT same style as Login button */
.modal-btn{
  width:100%;
  display:block;
  text-align:center;

  padding:12px 18px;

  border:none;
  border-radius:999px;

  background:linear-gradient(90deg,#ff0080,#ff6a00);

  color:#fff;
  font-size:15px;
  font-weight:700;

  cursor:pointer;
  box-sizing:border-box;

  transition:transform .2s ease, box-shadow .2s ease;
}

.modal-btn:hover{
  transform:scale(1.03);
  box-shadow:0 6px 18px rgba(255,0,128,.25);
}

.modal-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ============================================================
   TOAST
=============================================================== */
#toastBox{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:999999;
}

.toast{
  background:#111;
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  min-width:240px;
  max-width:380px;
  text-align:center;
  animation:toast-in .25s ease-out forwards;
}

.toast.success{background:#16a34a}
.toast.error{background:#dc2626}
.toast.warning{background:#f59e0b}
.toast.info{background:#2563eb}

@keyframes toast-in{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   OTP MODAL
=============================================================== */
.otp-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:40000;
  align-items:center;
  justify-content:center;
}
.otp-modal.open{display:flex!important}

.otp-card{
  background:#fff;
  padding:25px 30px 20px;
  width:320px;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  text-align:center;
}

/* otp boxes */
.otp-input-wrapper{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:10px 0 6px;
}

.otp-cell{
  width:40px;
  height:46px;
  border-radius:10px;
  border:1.5px solid #ccc;
  font-size:20px;
  text-align:center;
}

/* =========================
   PASSWORD EYE FIX
=========================*/

.pass-wrap{
  position:relative;
}

.pass-wrap input{
  padding-right:42px;   /* space for eye icon */
}

/* eye button position */
.eye-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  display:flex;
  align-items:center;
}

/* default icon sizes */
.eye-toggle svg{
  width:22px;
  height:22px;
}

/* stop big black fill */
.eye-toggle svg path,
.eye-toggle svg circle{
  fill:none !important;
  stroke:#444;
}

/* show ONLY open eye by default */
.eye-toggle .closed{
  display:none;
}

/* when toggled -> show closed eye */
.eye-toggle.active .open{
  display:none;
}
.eye-toggle.active .closed{
  display:inline-block;
}

.auth-btn,
.login-btn,
.register-btn,
.otp-btn {
  width: 100%;
  max-width: 100%;
  display: block;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 30px;
  border: none;
  text-align: center;
  box-sizing: border-box;
}

.auth-btn,
.login-btn,
.register-btn,
.otp-btn {
  background: linear-gradient(90deg, #ff0080, #ff6a00);
  color: #fff;
}

.auth-form {
  width: 100%;
}

.auth-form button {
  width: 100%;
}

.modal-body {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

button {
  min-width: 0;
}

/* form spacing improvements */
.login-box input,
.phone-row select{
  background:#f9fafb;
  border-radius:14px;
}

.hint{
  font-size:12px;
  margin-top:3px;
  display:block;
}

/* validation colors */
.hint.ok{
  color:#16a34a;
}

.hint.error{
  color:#dc2626;
}

/* phone line */
.phone-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
}

/* inline terms row */
.termsRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size:13px;
}

.termsRow input{
  width:auto;
}

#emailHint.ok{color:#16a34a}
#emailHint.error{color:#dc2626}

#phoneHint.ok{color:#16a34a}
#phoneHint.error{color:#dc2626}

#passStrength.ok{color:#16a34a}
#passStrength.weak{color:#dc2626}

#matchHint.ok{color:#16a34a}
#matchHint.error{color:#dc2626}