/* ===================================================
   BOOK A TICKET — PAGE STYLES
   (uses :root variables + Syne font from index4728.css)
=================================================== */

/* ===== INTRO / HERO ===== */
.bat-hero{
  position:relative;overflow:hidden;
  padding:9.5rem 2rem 3.5rem;
}
.bat-hero .wrap em{
  font-style:normal;color:var(--cyan2);
  text-shadow:0 0 30px rgba(147,197,253,.4),0 0 60px rgba(96,165,250,.2);
}

/* ===== FORM SECTION ===== */
.bat-form-section{padding:2rem 2rem 6rem;position:relative;z-index:10}
.bat-wrap{max-width:640px}

/* ===== TICKET CARD (liquid glass) ===== */
.bat-card{
  position:relative;
  padding:2.4rem 2.2rem 2.6rem;
  border-radius:24px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 45%, rgba(9,16,31,.4)),
    linear-gradient(145deg,#0a1020,#0d1432);
  border:1px solid var(--b2);
  backdrop-filter:blur(26px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 12px rgba(0,0,0,.3),
    0 25px 70px rgba(0,0,0,.4),
    0 0 60px rgba(0,150,255,.06);
  overflow:hidden;
  animation:bat-card-in 1s var(--ease3d) both;
}
.bat-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px circle at 20% -10%, rgba(0,212,255,.10), transparent 55%);
  opacity:.9;
}
.bat-card::after{
  content:'';position:absolute;top:-40%;left:-20%;width:60%;height:220%;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  animation:bat-sheen 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bat-card-in{
  0%{opacity:0;transform:translateY(34px) scale(.96) perspective(900px) rotateX(6deg)}
  100%{opacity:1;transform:translateY(0) scale(1) perspective(900px) rotateX(0)}
}
@keyframes bat-sheen{
  0%,100%{transform:translateX(-10%) rotate(8deg)}
  50%{transform:translateX(140%) rotate(8deg)}
}

/* ===== FORM FIELDS ===== */
.field-group{margin-bottom:1.5rem;position:relative;z-index:2}
.field-label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;letter-spacing:.05em;
  color:var(--cyan2);margin-bottom:.6rem;
}
.field-label svg{color:var(--cyan);flex-shrink:0}

.field-input,.field-textarea{
  width:100%;
  font-family:'Syne',sans-serif;
  font-size:.9rem;font-weight:600;color:var(--text);
  padding:.9rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--b1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 2px 10px rgba(0,0,0,.2);
  outline:none;
  transition:border-color .3s var(--ease3d), box-shadow .3s var(--ease3d), background .3s var(--ease3d), transform .3s var(--ease3d);
}
.field-input::placeholder,.field-textarea::placeholder{color:var(--dim);font-weight:500}
.field-textarea{resize:vertical;min-height:120px;line-height:1.7}

.field-input:focus,.field-textarea:focus{
  border-color:rgba(0,212,255,.45);
  background:rgba(0,212,255,.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 4px rgba(0,212,255,.09),
    0 8px 30px rgba(0,150,255,.12);
  transform:translateY(-1px);
}

/* ===== SUBMIT BUTTON =====
   Note: background/border/backdrop-filter/box-shadow/border-radius for
   this element are unified with the rest of the site's frosted-glass
   buttons via liquid-glass6084.css + liquid-glass.js (pointer-tracked
   specular highlight). Only layout, color, and motion are set here. */
.book-submit{
  position:relative;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:.6rem;
  padding:1.05rem 1.6rem;
  font-family:'Syne',sans-serif;font-size:.92rem;font-weight:800;letter-spacing:.02em;
  color:#fff;cursor:pointer;
  transition:transform .25s var(--ease3d);
}
.book-submit:hover{transform:translateY(-3px)}
.book-submit:active{transform:translateY(0)}
.book-submit:disabled{opacity:.75;cursor:progress}

.submit-spin{
  display:none;
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
}
.book-submit.loading .submit-txt,
.book-submit.loading .submit-ic{display:none}
.book-submit.loading .submit-spin{display:block;animation:bat-spin .7s linear infinite}
@keyframes bat-spin{to{transform:rotate(360deg)}}

/* ===== STATUS MESSAGE ===== */
.bat-status{
  min-height:1px;margin-top:1.1rem;
  font-size:.82rem;font-weight:700;
  display:flex;align-items:center;gap:.5rem;
  border-radius:12px;
}
.bat-status:empty{margin-top:0;padding:0}
.bat-status.success,.bat-status.error{
  padding:.85rem 1rem;
  animation:bat-status-in .45s var(--ease3d) both;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bat-status.success{
  color:#7CF5C4;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.28);
  box-shadow:0 0 24px rgba(16,185,129,.12);
}
.bat-status.error{
  color:#ff9fa8;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);
  box-shadow:0 0 24px rgba(239,68,68,.12);
}
@keyframes bat-status-in{
  0%{opacity:0;transform:translateY(-6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .bat-hero{padding:7.5rem 1.4rem 2.6rem}
  .bat-form-section{padding:1.5rem 1.2rem 4.5rem}
  .bat-card{padding:1.8rem 1.4rem 2rem;border-radius:20px}
}

/* ===================================================
   OTP VERIFICATION MODAL
=================================================== */
.otp-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem;
  background:rgba(2,4,15,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease3d);
}
.otp-overlay.on{opacity:1;pointer-events:all}

.otp-card{
  position:relative;width:100%;max-width:420px;
  padding:2.2rem 1.9rem 2rem;border-radius:22px;
  text-align:center;
  background:
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 45%, rgba(9,16,31,.5)),
    linear-gradient(145deg,#0a1020,#0d1432);
  border:1px solid var(--b2);
  backdrop-filter:blur(26px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 25px 70px rgba(0,0,0,.45),0 0 60px rgba(0,150,255,.08);
  transform:translateY(18px) scale(.96);
  transition:transform .35s var(--ease3d);
}
.otp-overlay.on .otp-card{transform:translateY(0) scale(1)}

.otp-close{
  position:absolute;top:.9rem;right:.9rem;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid var(--b1);
  color:var(--sub);font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s;
}
.otp-close:hover{background:rgba(255,255,255,.08);color:var(--text)}

.otp-icon{
  width:52px;height:52px;margin:0 auto 1rem;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);
  background:rgba(0,212,255,.08);border:1px solid var(--b2);
}

.otp-h{font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:.5rem}
.otp-p{font-size:.85rem;color:var(--sub);line-height:1.6;margin-bottom:1.6rem}
.otp-p strong{color:var(--cyan2);word-break:break-all}

.otp-boxes{display:flex;justify-content:center;gap:.7rem;margin-bottom:1.3rem}
.otp-box{
  width:52px;height:60px;text-align:center;
  font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:var(--text);
  border-radius:14px;background:rgba(255,255,255,.025);
  border:1px solid var(--b1);outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 2px 10px rgba(0,0,0,.2);
  transition:border-color .3s var(--ease3d),box-shadow .3s var(--ease3d),transform .3s var(--ease3d);
}
.otp-box:focus{
  border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 4px rgba(0,212,255,.09);
  transform:translateY(-1px);
}
.otp-box.err{border-color:rgba(239,68,68,.5);animation:otp-shake .4s}
@keyframes otp-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

.otp-status{min-height:1px;margin-bottom:.2rem;font-size:.8rem;font-weight:700}
.otp-status:empty{margin-bottom:0}
.otp-status.error{color:#ff9fa8}
.otp-status.success{color:#7CF5C4}
.otp-status.info{color:var(--cyan2)}

.otp-resend{
  margin-top:1rem;background:none;border:none;cursor:pointer;
  font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--cyan2);letter-spacing:.02em;
}
.otp-resend:disabled{color:var(--dim);cursor:default}
.otp-resend:hover:not(:disabled){text-decoration:underline}

@media(max-width:480px){
  .otp-box{width:44px;height:54px;font-size:1.3rem}
  .otp-boxes{gap:.5rem}
}