/* HolidaySeva — /signin/ page styles.
   Reuses the design tokens already on :root from header.css
   (--ta-navy, --ta-yel, --ta-gray-*, --ta-font, etc.). Plain CSS +
   vanilla JS only, kept slim and flat — no heavy shadows, no hover lift. */

.page-signin{background:var(--ta-white,#fff)}
.page-signin *,
.page-signin *::before,
.page-signin *::after{box-sizing:border-box}

.si{
  display:flex;
  min-height:calc(100vh - 64px);
}

/* ===================== LEFT: VISUAL PANEL (desktop only) ===================== */
.si__visual{
  display:none;
  position:relative;
  flex:1 1 44%;
  overflow:hidden;
  background:var(--ta-navy,#0d2b5e);
}
.si__visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.si__visual-scrim{
  position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(9,31,69,.1) 10%,rgba(9,31,69,.86) 100%);
}
.si__visual-text{
  position:relative;z-index:1;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px;
  color:#fff;
}
.si__visual-eyebrow{
  margin:0 0 8px;
  font:700 11.5px/1 var(--ta-font,'Poppins',sans-serif);
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ta-yel,#ffc72c);
}
.si__visual-h{
  margin:0 0 10px;
  font:600 30px/1.2 var(--ta-font,'Poppins',sans-serif);
  letter-spacing:-.5px;
}
.si__visual-sub{
  margin:0;
  max-width:34ch;
  font:400 14px/1.55 var(--ta-font,'Poppins',sans-serif);
  color:rgba(255,255,255,.85);
}

/* ===================== RIGHT: FORM PANEL ===================== */
.si__panel{
  flex:1 1 56%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}
.si__card{width:100%;max-width:360px}

.si__logo{display:inline-block;margin-bottom:20px;line-height:0}
.si__logo img{height:26px;width:auto}

.si__h{
  margin:0 0 4px;
  font:600 22px/1.25 var(--ta-font,'Poppins',sans-serif);
  letter-spacing:-.4px;
  color:var(--ta-navy,#0d2b5e);
}
.si__sub{
  margin:0 0 20px;
  font:400 13.5px/1.5 var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-muted,#5d6778);
}
.si__sub strong{color:var(--ta-black,#091f45);font-weight:600}

.si__form{margin:0}
.si__label{
  display:block;
  margin-bottom:6px;
  font:600 11px/1 var(--ta-font,'Poppins',sans-serif);
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ta-gray-muted,#5d6778);
}

.si__phone-field{
  display:flex;align-items:center;
  background:var(--ta-gray-bg,#f3f6fc);
  border:1.5px solid transparent;
  border-radius:12px;
  padding:0 14px;
  margin-bottom:14px;
  transition:border-color .12s, background .12s;
}
.si__phone-field:focus-within{border-color:var(--ta-navy,#0d2b5e);background:#fff}
.si__cc{
  font:600 14.5px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-text,#1a2233);
  padding-right:10px;
  margin-right:10px;
  border-right:1px solid var(--ta-gray-border,#e5e9f0);
}
.si__input{
  flex:1;border:0;background:transparent;outline:0;
  padding:13px 0;
  font:500 15px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-text,#1a2233);
}
.si__input::placeholder{color:#9aa3b2}

.si__btn{
  display:block;width:100%;
  background:var(--ta-navy,#0d2b5e);
  color:#fff;
  border:0;border-radius:999px;
  padding:13px;
  font:600 14.5px var(--ta-font,'Poppins',sans-serif);
  cursor:pointer;
}
.si__btn:hover{background:var(--ta-black,#091f45)}

.si__terms{
  margin:14px 0 0;
  font:400 11.5px/1.55 var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-muted,#5d6778);
}
.si__terms a{color:var(--ta-navy,#0d2b5e);text-decoration:underline}

/* ---- Back button (OTP step) ---- */
.si__back{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:0;
  margin-bottom:14px;
  font:600 12.5px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-muted,#5d6778);
}
.si__back:hover{color:var(--ta-navy,#0d2b5e)}
.si__back svg{width:14px;height:14px}

/* ---- OTP boxes ---- */
.si__otp{display:flex;gap:8px;margin-bottom:16px}
.si__otp-box{
  width:100%;aspect-ratio:1;
  text-align:center;
  font:600 18px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-navy,#0d2b5e);
  background:var(--ta-gray-bg,#f3f6fc);
  border:1.5px solid var(--ta-gray-border,#e5e9f0);
  border-radius:10px;
  outline:0;
}
.si__otp-box:focus{border-color:var(--ta-navy,#0d2b5e);background:#fff}

.si__resend{
  margin:14px 0 0;
  text-align:center;
  font:400 12.5px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-muted,#5d6778);
}
.si__resend-btn{
  background:none;border:0;cursor:pointer;padding:0;margin-left:4px;
  font:600 12.5px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-navy,#0d2b5e);
}
.si__resend-btn:disabled{color:var(--ta-gray-muted,#5d6778);cursor:default}

.si__skip{
  display:block;
  margin-top:24px;
  text-align:center;
  font:500 12.5px var(--ta-font,'Poppins',sans-serif);
  color:var(--ta-gray-muted,#5d6778);
  text-decoration:none;
}
.si__skip:hover{color:var(--ta-navy,#0d2b5e)}

/* ===================== RESPONSIVE ===================== */
@media(min-width:860px){
  .si__visual{display:block}
}

/* Below 860px there's no side visual, so stop force-centering the card
   in a full-viewport-height flex box — on a tall phone that just leaves
   a wall of empty white space above and below it. Let it flow from the
   top instead, like a normal page. */
@media(max-width:859px){
  .si{min-height:0;display:block}
  .si__panel{display:block;padding:36px 20px 28px}
  .si__card{max-width:420px;margin:0 auto}
}

@media(max-width:400px){
  .si__otp{gap:6px}
}