/* =========================================================
   VISA TRAVEL EXPERT - JOIN US PAGE CSS
   FULL FINAL PRODUCTION VERSION
   Zero Header Conflict + Premium UI + Responsive
========================================================= */

/* =========================================================
   SAFE ROOT (No Header / Ticker Override)
========================================================= */

body.join-page{
  background:#f8f9fb;
}

body.join-page *{
  box-sizing:border-box;
}

/* =========================================================
   VARIABLES
========================================================= */

body.join-page{
  --join-primary:#ff6a00;
  --join-primary2:#ff2d75;
  --join-dark:#111;
  --join-text:#444;
  --join-light:#777;
  --join-white:#fff;
  --join-line:#e7e7e7;
  --join-shadow:0 18px 45px rgba(0,0,0,.08);
}

/* =========================================================
   HERO SECTION
========================================================= */

body.join-page .join-hero-wrap{
  width:100%;
  padding:14px 14px 0;
  margin:0;
}

body.join-page .join-hero{
  position:relative;
  width:min(1380px,100%);
  height:450px;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;

  background:url('../images/join/joinus-banner.webp')
             center center / cover no-repeat;
}

body.join-page .join-hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.42) 48%,
    rgba(0,0,0,.12) 100%
  );
}

body.join-page .hero-content{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;

  color:#fff;
  padding:0 20px 38px;
}

body.join-page .hero-content h1{
  margin:0;
  max-width:1100px;
  font-size:clamp(36px,5vw,68px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-0.8px;
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}

body.join-page .hero-content p{
  margin:14px 0 0;
  max-width:900px;
  font-size:18px;
  line-height:1.6;
}

/* =========================================================
   MAIN SECTION
========================================================= */

body.join-page .join-section{
  width:min(1280px, calc(100% - 28px));
  margin:34px auto 80px;
}

/* =========================================================
   ALERT BOX
========================================================= */

body.join-page .join-msg{
  margin-bottom:18px;
  padding:14px 18px;
  border-radius:14px;
  text-align:center;
  font-size:15px;
  font-weight:700;
}

body.join-page .join-msg.success{
  background:#e9fff0;
  color:#11843f;
}

body.join-page .join-msg.error{
  background:#ffeaea;
  color:#b10000;
}

/* =========================================================
   CARD
========================================================= */

body.join-page .join-card{
  background:#fff;
  border-radius:24px;
  padding:34px 30px;
  box-shadow:var(--join-shadow);
}

body.join-page .join-card h2{
  margin:0;
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  color:#111;
}

body.join-page .join-card p{
  margin:10px 0 24px;
  color:var(--join-light);
  font-size:16px;
  line-height:1.6;
}

/* =========================================================
   FORM GRID
========================================================= */

body.join-page .join-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

body.join-page .field.full{
  grid-column:1 / -1;
}

/* =========================================================
   FORM FIELDS
========================================================= */

body.join-page .field label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:#111;
}

body.join-page .field input,
body.join-page .field select,
body.join-page .field textarea{
  width:100%;
  height:56px;
  padding:0 16px;

  border:1px solid var(--join-line);
  border-radius:14px;
  outline:none;

  background:#fff;
  color:#111;
  font-size:15px;
}

body.join-page .field textarea{
  min-height:56px;
  resize:none;
  padding-top:16px;
}

body.join-page .field input:focus,
body.join-page .field select:focus,
body.join-page .field textarea:focus{
  border-color:var(--join-primary);
  box-shadow:0 0 0 4px rgba(255,106,0,.08);
}

/* =========================================================
   OTP ROW
========================================================= */

body.join-page .otp-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 220px;
  gap:14px;
  align-items:end;
}

/* =========================================================
   BUTTONS
========================================================= */

body.join-page .send-otp-btn,
body.join-page .submit-btn{
  height:56px;
  border:none;
  border-radius:999px;

  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;

  background:linear-gradient(
    135deg,
    var(--join-primary),
    var(--join-primary2)
  );

  transition:.25s ease;
}

body.join-page .submit-btn{
  grid-column:1 / -1;
}

body.join-page .send-otp-btn:hover,
body.join-page .submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(255,106,0,.20);
}

/* =========================================================
   HINT TEXT
========================================================= */

body.join-page .live-hint{
  margin-top:6px;
  font-size:13px;
  color:#777;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:768px){

  body.join-page .join-hero-wrap{
    padding:0;
  }

  body.join-page .join-hero{
    width:min(100%, calc(100% - 16px));
    height:300px;
    margin:16px auto 0;
    border-radius:22px;
  }

  body.join-page .hero-content{
    padding:0 14px 24px;
  }

  body.join-page .hero-content h1{
    font-size:clamp(24px,7vw,34px);
    line-height:1.15;
  }

  body.join-page .hero-content p{
    font-size:13px;
    line-height:1.5;
    margin-top:10px;
  }

  body.join-page .join-section{
    width:min(100%, calc(100% - 16px));
    margin:22px auto 60px;
  }

  body.join-page .join-card{
    padding:24px 18px;
    border-radius:20px;
  }

  body.join-page .join-card h2{
    font-size:28px;
  }

  body.join-page .join-form{
    grid-template-columns:1fr;
  }

  body.join-page .field.full{
    grid-column:auto;
  }

  body.join-page .otp-row{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:520px){

  body.join-page .join-hero{
    height:320px;
  }

  body.join-page .hero-content h1{
    font-size:clamp(24px,8vw,30px);
  }

}