*{box-sizing:border-box}
html{font-family:'Inter',sans-serif;min-height:100%;}
html,body{width:100%;min-height:100%;margin:0}
body{overflow-x:hidden;overflow-y:auto;background:#edf2f8;color:#102143}
button,input{font:inherit}

:root{--navy:#102143;--blue:#0759ed;--orange:#f04b1c;--muted:#53678f;--line:#ccd8e8}

.page{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:760px;
  overflow:hidden;
  background:linear-gradient(180deg,#eef8ff 0%,#fff 62%,#fff 100%);
  isolation:isolate;
}

/* subtle animated edge shadow */
.page:after{
  content:'';position:absolute;z-index:50;right:0;top:0;width:5px;height:100%;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,89,237,.05),rgba(16,33,67,.20),rgba(7,89,237,.05));
  filter:blur(3px);animation:edgePulse 5s ease-in-out infinite;
}
@keyframes edgePulse{0%,100%{opacity:.45;box-shadow:-5px 0 16px rgba(16,33,67,.08)}50%{opacity:.9;box-shadow:-12px 0 28px rgba(7,89,237,.14)}}

.hotel-banner{
  position:absolute;z-index:1;right:0;top:0;width:54%;height:67%;
  background-image:
    linear-gradient(90deg,rgba(239,248,255,1) 0%,rgba(239,248,255,.88) 9%,rgba(239,248,255,.28) 42%,rgba(255,255,255,0) 76%),
    url('assets/hotel-banner.webp');
  background-repeat:no-repeat;background-size:cover;background-position:center top;
  pointer-events:none;
}

.topbar{position:absolute;z-index:20;top:0;left:0;width:100%;height:76px;display:flex;align-items:center;justify-content:flex-end;padding:0 5.8%}
.language-wrap{position:relative}
.language-button{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#071832;padding:7px 2px;cursor:pointer;font-size:18px;font-weight:500}
.globe-icon{width:31px;height:31px;display:block}.globe-icon svg{width:100%;height:100%}
.chevron{width:10px;height:10px;border-right:2px solid #071832;border-bottom:2px solid #071832;transform:rotate(45deg) translateY(-3px);margin-left:3px}
.language-menu{position:absolute;right:0;top:52px;width:155px;padding:6px;background:#fff;border:1px solid #d8e0ed;border-radius:12px;box-shadow:0 14px 32px rgba(18,43,80,.16);display:none}
.language-menu.open{display:block}
.language-menu button{display:block;width:100%;border:0;background:#fff;color:var(--navy);text-align:left;padding:9px 11px;border-radius:8px;font-size:14px;cursor:pointer}
.language-menu button:hover{background:#eef4ff;color:var(--blue)}

/* Desktop hero */
.hero-content{position:absolute;z-index:4;left:6.75%;top:15%;width:34%;}
.brand-icon{width:66px;height:66px;border-radius:50%;background:var(--blue);display:grid;place-items:center;margin-bottom:17px;box-shadow:0 8px 22px rgba(7,89,237,.16)}
.brand-icon svg{width:76%;height:76%}
.eyebrow{font-size:20px;line-height:1.2;font-weight:500;margin:0 0 9px;letter-spacing:-.25px}
.hero-content h1{font-size:48px;line-height:1.04;letter-spacing:-1.7px;font-weight:700;margin:0;white-space:nowrap}
.hero-content h1 span{color:var(--orange)}.hero-content h1 strong{font-weight:700}
.accent-line{width:47px;height:4px;background:var(--blue);margin:16px 0 17px}
.tagline{display:grid;gap:5px;font-size:20px;line-height:1.23;font-weight:600}.tagline strong{color:var(--blue)}

/* Desktop feature row is deliberately constrained to the left column so it can never collide with the form. */
.features{
  position:absolute;z-index:6;left:6.75%;top:57.5%;width:315px;
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;gap:9px;
}
.feature{display:flex;align-items:center;min-width:0;gap:8px;font-size:12px;line-height:1.25;font-weight:500}
.feature-icon{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.96);display:grid;place-items:center;padding:8px;box-shadow:0 5px 16px rgba(33,62,106,.07)}
.feature-icon svg{width:100%;height:100%}.feature-icon.blue{color:var(--blue)}.feature-icon.orange{color:var(--orange)}.feature-divider{width:1px;height:46px;background:#d5dce7}

.login-card{
  position:absolute;z-index:10;left:50%;bottom:3.1vh;transform:translateX(-50%);
  width:570px;max-width:calc(100% - 32px);padding:27px 31px 22px;
  background:rgba(255,255,255,.975);border:1px solid #e1e6ee;border-radius:24px;
  box-shadow:0 19px 46px rgba(33,62,106,.14),0 3px 12px rgba(7,89,237,.05);
  backdrop-filter:blur(7px);animation:cardShadow 5s ease-in-out infinite;
}
@keyframes cardShadow{0%,100%{box-shadow:0 19px 46px rgba(33,62,106,.14),0 3px 12px rgba(7,89,237,.05)}50%{box-shadow:0 23px 55px rgba(33,62,106,.17),0 5px 18px rgba(7,89,237,.07)}}
.login-card label{display:block;font-size:16px;line-height:1.2;font-weight:500;margin:0 0 9px}
.input-box{height:59px;display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.input-box:focus-within{border-color:#6b97f2;box-shadow:0 0 0 3px rgba(7,89,237,.06)}
.input-icon{height:100%;width:50px;flex:0 0 50px;padding:13px;background:#f4f8ff;color:var(--blue)}.input-icon svg{width:100%;height:100%}
.input-box input{height:100%;flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 13px;color:var(--navy);font-size:15px;font-weight:400}.input-box input::placeholder{color:#68799a;opacity:1}
.eye-button{width:45px;height:45px;flex:0 0 45px;border:0;background:transparent;color:var(--blue);padding:9px;cursor:pointer}.eye-button svg{width:100%;height:100%}
.help-text{font-size:12px;line-height:1.2;font-weight:400;color:var(--muted);margin:7px 0 17px}
.password-meta{display:flex;align-items:center;justify-content:space-between}.password-meta .help-text{margin-bottom:17px}
.forgot-button{border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:400;padding:0;margin:0 0 17px;cursor:pointer}
.login-button,.register-button{position:relative;width:100%;height:53px;border-radius:12px;font-size:17px;font-weight:600}
.login-button{border:0;background:var(--blue);color:#fff;box-shadow:0 7px 18px rgba(7,89,237,.14);cursor:pointer}.login-button:hover{filter:brightness(1.04)}
.login-arrow{position:absolute;right:18px;top:50%;font-size:29px;font-weight:300;line-height:1;transform:translateY(-54%)}
.register-button{margin-top:10px;border:1.5px solid var(--orange);background:#fff;color:var(--orange);cursor:pointer}
.or-row{display:flex;align-items:center;gap:12px;margin:17px 0 11px;color:var(--muted)}.or-row span{height:1px;background:#d6deea;flex:1}.or-row em{font-size:12px;font-style:normal;font-weight:400}
.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px;font-weight:400}.secure-note svg{width:22px;height:22px;color:var(--orange)}
.toast{position:fixed;z-index:60;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;background:#102143;color:#fff;border-radius:9px;padding:10px 16px;font-size:13px;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
.bottom-wave,.orange-wave,.blue-wave{display:none!important}

/* Short desktop/laptop: shrink the whole system, but preserve the same geometry. */
@media (min-width:1051px) and (max-height:760px){
  .hero-content{top:14%;left:6.75%}.brand-icon{width:58px;height:58px;margin-bottom:13px}.eyebrow{font-size:18px}.hero-content h1{font-size:43px}.accent-line{margin:12px 0 13px}.tagline{font-size:17px;gap:4px}
  .features{top:57.5%;left:6.75%;width:315px}.feature{font-size:11px}.feature-icon{width:40px;height:40px;flex-basis:40px;padding:7px}.feature-divider{height:42px}
  .login-card{width:570px;padding:23px 27px 18px;bottom:2.6vh}.login-card label{font-size:15px}.input-box{height:53px}.login-button,.register-button{height:48px}.or-row{margin:14px 0 9px}.secure-note{font-size:11px}
}

/* Responsive tablet/mobile layout — normal document flow prevents overlap across devices. */
@media (max-width:1050px){
  .page{height:auto;min-height:100dvh;overflow:hidden;padding-bottom:24px}
  .hotel-banner{position:absolute;inset:0 0 auto 0;width:100%;height:250px;max-height:none;opacity:.57;background-image:linear-gradient(90deg,rgba(239,248,255,.99) 0%,rgba(239,248,255,.83) 28%,rgba(239,248,255,.15) 75%,rgba(255,255,255,0) 100%),url('assets/hotel-banner.webp');background-position:center top;background-size:cover}
  .topbar{position:relative;z-index:20;width:100%;height:54px;justify-content:flex-end;padding:0 20px}
  .language-button{font-size:15px;gap:9px}.globe-icon{width:27px;height:27px}
  .language-menu{top:44px;right:0;left:auto;width:145px;transform:none;z-index:1000}
  .hero-content{position:relative;z-index:4;top:auto;left:auto;width:88%;margin:7px auto 0;transform:none}
  .brand-icon{width:46px;height:46px;margin-bottom:8px}.eyebrow{font-size:14px;margin-bottom:5px}
  .hero-content h1{font-size:24px;line-height:1.05;letter-spacing:-.6px}.accent-line{width:39px;height:3px;margin:9px 0 10px}
  .tagline{font-size:14px;line-height:1.15;gap:2px}
  .features{position:relative;z-index:6;top:auto;left:auto;width:min(88%,360px);margin:58px auto 0;transform:none;display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;gap:5px}
  .feature{gap:4px;font-size:9px}.feature-icon{width:35px;height:35px;flex-basis:35px;padding:6px;border-radius:8px}.feature-divider{height:36px}
  .login-card{position:relative;z-index:10;left:auto;bottom:auto;width:94%;max-width:570px;margin:46px auto 0;padding:17px 14px 13px;transform:none;border-radius:18px;animation:none}
  .login-card label{font-size:13px;margin-bottom:6px}.input-box{height:46px;border-radius:9px}.input-icon{width:40px;flex-basis:40px;padding:10px}.input-box input{font-size:13px;padding:0 8px}.input-box input::placeholder{font-size:12px}.eye-button{width:34px;height:34px;flex-basis:34px;padding:6px}
  .help-text,.forgot-button{font-size:10px}.help-text{margin:5px 0 11px}.password-meta .help-text,.forgot-button{margin-bottom:11px}
  .login-button,.register-button{height:43px;border-radius:8px;font-size:15px}.login-arrow{right:12px;font-size:23px}.register-button{margin-top:7px}.or-row{gap:7px;margin:11px 0 8px}.or-row em{font-size:9px}.secure-note{font-size:9px;gap:5px}.secure-note svg{width:17px;height:17px}
  html[dir="rtl"] .hero-content{left:auto;right:auto;transform:none;text-align:right}
}
@media (max-width:480px){
  .page{min-height:100dvh;padding-bottom:18px}.hotel-banner{height:220px;background-position:58% top}.topbar{height:49px;padding-right:17px}
  .language-button{font-size:14px;gap:8px}.globe-icon{width:25px;height:25px}.language-menu{top:40px;right:0;width:145px}
  .hero-content{width:88%;margin-top:5px}.brand-icon{width:43px;height:43px}.eyebrow{font-size:13px;line-height:1.15}.hero-content h1{font-size:22px;line-height:1.05}.accent-line{margin:7px 0 8px}.tagline{font-size:13px;line-height:1.12;gap:1px}
  .features{width:88%;margin-top:52px;gap:4px}.feature{font-size:8.5px}.feature-icon{width:33px;height:33px;flex-basis:33px}.feature-divider{height:34px}
  .login-card{width:94%;margin-top:38px;padding:15px 13px 11px}.login-card label{font-size:12px}.input-box{height:44px}.input-icon{width:38px;flex-basis:38px;padding:9px}.input-box input,.input-box input::placeholder{font-size:11px}.eye-button{width:33px;height:33px;flex-basis:33px}.help-text,.forgot-button{font-size:9px}.help-text{margin:4px 0 9px}.password-meta .help-text,.forgot-button{margin-bottom:9px}.login-button,.register-button{height:40px;font-size:14px}.login-arrow{font-size:22px}.or-row{margin:9px 0 6px}.secure-note{font-size:8px}.secure-note svg{width:15px;height:15px}
}
@media (max-height:680px) and (max-width:1050px){
  .hotel-banner{height:190px}.hero-content{margin-top:3px}.brand-icon{width:38px;height:38px;margin-bottom:5px}.eyebrow{font-size:12px}.hero-content h1{font-size:20px}.accent-line{margin:5px 0 6px}.tagline{font-size:11px}.features{margin-top:42px}.feature{font-size:7.5px}.feature-icon{width:29px;height:29px;flex-basis:29px;padding:5px}.feature-divider{height:30px}.login-card{margin-top:30px;padding:12px 12px 9px}.login-card label{font-size:11px}.input-box{height:39px}.input-icon{width:35px;flex-basis:35px;padding:8px}.input-box input,.input-box input::placeholder{font-size:10px}.help-text,.forgot-button{font-size:8px;margin-bottom:7px}.login-button,.register-button{height:36px;font-size:13px}.or-row{margin:7px 0 5px}.secure-note{font-size:7.5px}
}
html[dir="rtl"] .login-arrow{right:auto;left:18px;transform:translateY(-54%) scaleX(-1)}
html[dir="rtl"] .input-box input{text-align:right}html[dir="rtl"] .language-menu button{text-align:right}html[dir="rtl"] .language-menu{right:0;left:auto;transform:none}


/* =========================================================
   LINKED LOGIN / SIGN-UP VIEW
   ========================================================= */
.signup-view{display:none!important}
.signup-active .login-view{display:none!important}
.signup-active .signup-view{display:block!important}
.signup-active .hero-content .signup-view{display:block!important}
.signup-active .hero-content .login-view{display:none!important}
.signup-active .features .login-feature-text{display:none}
.signup-active .features .signup-feature-text{display:inline}
.signup-feature-text{display:none}

.signup-card{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:3.1vh;
  transform:translateX(-50%);
  width:570px;
  max-width:calc(100% - 32px);
  padding:25px 31px 18px;
  background:rgba(255,255,255,.975);
  border:1px solid #e1e6ee;
  border-radius:24px;
  box-shadow:0 19px 46px rgba(33,62,106,.14),0 3px 12px rgba(7,89,237,.05);
}

.signup-card form{width:100%}
.signup-input{
  height:51px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #dce3ed;
  border-radius:10px;
  background:#fff;
  margin-bottom:11px;
}
.signup-input:focus-within{border-color:#6b97f2;box-shadow:0 0 0 3px rgba(7,89,237,.06)}
.signup-input input{
  height:100%;
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  padding:0 10px;
  font-size:13px;
}
.signup-input input::placeholder{color:#72809a;opacity:1}
.field-icon{
  position:relative;
  width:47px;
  height:100%;
  flex:0 0 47px;
  color:#71809a;
}
.field-icon:before,.field-icon:after{content:"";position:absolute}
.field-icon.person:before{
  width:8px;height:8px;border:1.6px solid currentColor;border-radius:50%;
  left:19px;top:13px;
}
.field-icon.person:after{
  width:15px;height:8px;border:1.6px solid currentColor;border-radius:8px 8px 3px 3px;
  border-bottom:0;left:15px;top:25px;
}
.field-icon.phone:before{
  width:10px;height:17px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  border-radius:0 0 0 7px;transform:rotate(-42deg);left:17px;top:15px;
}
.field-icon.lock:before{
  width:12px;height:10px;border:1.6px solid currentColor;border-radius:2px;
  left:17px;top:22px;
}
.field-icon.lock:after{
  width:7px;height:8px;border:1.6px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0;
  left:19.5px;top:14px;
}
.signup-eye{position:relative;width:39px;height:39px;flex:0 0 39px;padding:9px;border:0;background:transparent;color:#72809a;cursor:pointer}
.eye-shape{display:block;width:18px;height:12px;border:1.7px solid currentColor;border-radius:50% 50% 50% 50%;position:relative}
.eye-shape:after{content:"";position:absolute;width:4px;height:4px;border:1.5px solid currentColor;border-radius:50%;left:5px;top:2px}
.terms-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0 13px;
  color:#6f7d95;
  font-size:11px;
  line-height:1.35;
  cursor:pointer;
}
.terms-row input{position:absolute;opacity:0;pointer-events:none}
.custom-check{
  width:17px;height:17px;flex:0 0 17px;border:1.4px solid #9aa7ba;border-radius:3px;background:#fff;
}
.terms-row input:checked + .custom-check{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff}
.terms-link{color:var(--blue);text-decoration:none}
.create-button,.already-button{
  position:relative;
  width:100%;
  height:42px;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.create-button{border:0;background:var(--blue);color:#fff;box-shadow:0 7px 18px rgba(7,89,237,.14)}
.create-button span{position:absolute;right:17px;font-size:23px;font-weight:300;line-height:1;top:50%;transform:translateY(-53%)}
.already-button{margin-top:8px;border:1.3px solid var(--orange);background:#fff;color:var(--orange)}
.signup-safe{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:13px;
  color:#71809a;
  font-size:10px;
}
.safe-shield{color:var(--orange);font-size:18px;line-height:1}

.signup-tagline{font-size:14px;line-height:1.45;color:#102143;font-weight:500}
.signup-tagline strong{color:var(--blue);font-weight:600}
.signup-view h1{font-size:43px;line-height:1.08;letter-spacing:-1.2px;margin:0;font-weight:700}
.signup-view h1 span{color:var(--blue)}
.signup-mobile-break{display:none}

@media (min-width:1051px) and (max-height:760px){
  .signup-card{padding:21px 27px 15px;bottom:2.6vh}
  .signup-input{height:45px;margin-bottom:8px}
  .terms-row{margin:2px 0 9px;font-size:10px}
  .create-button,.already-button{height:37px;font-size:12px}
  .already-button{margin-top:6px}
  .signup-safe{margin-top:9px;font-size:9px}
  .signup-view h1{font-size:39px}
  .signup-tagline{font-size:13px}
}

@media (max-width:1050px){
  .signup-card{
    position:relative;
    left:auto;
    bottom:auto;
    width:94%;
    max-width:570px;
    margin:46px auto 0;
    padding:17px 14px 13px;
    transform:none;
    border-radius:18px;
  }
  .signup-input{height:46px;margin-bottom:9px;border-radius:9px}
  .signup-input input{font-size:13px}
  .field-icon{width:40px;flex-basis:40px}
  .signup-eye{width:34px;height:34px;flex-basis:34px;padding:7px}
  .terms-row{font-size:10px;margin:2px 0 11px}
  .create-button,.already-button{height:43px;border-radius:8px;font-size:15px}
  .already-button{margin-top:7px}
  .signup-safe{font-size:9px;margin-top:10px}
  .signup-view h1{font-size:29px;line-height:1.1;letter-spacing:-.7px}
  .signup-tagline{font-size:13px;line-height:1.35}
  .signup-mobile-break{display:none}

  .signup-active .hotel-banner{
    height:300px;
    background-position:65% top;
  }
  .signup-active .hero-content{margin-top:7px}
  .signup-active .features{margin-top:42px}
  .signup-active .signup-card{margin-top:25px}
}

@media (max-width:480px){
  .signup-card{
    width:94%;
    margin-top:25px;
    padding:15px 13px 11px;
  }
  .signup-input{height:44px;margin-bottom:9px}
  .signup-input input{font-size:11px}
  .signup-input input::placeholder{font-size:11px}
  .field-icon{width:38px;flex-basis:38px}
  .signup-eye{width:33px;height:33px;flex-basis:33px}
  .terms-row{font-size:9px;gap:7px;margin:2px 0 10px}
  .custom-check{width:17px;height:17px;flex-basis:17px}
  .create-button,.already-button{height:40px;font-size:14px}
  .signup-safe{font-size:8px;margin-top:9px}
  .signup-view h1{font-size:28px;line-height:1.08}
  .signup-tagline{font-size:12px;line-height:1.35}
  .signup-mobile-break{display:block}
  .signup-active .hotel-banner{height:275px;background-position:62% top}
  .signup-active .hero-content{margin-top:5px}
  .signup-active .features{margin-top:31px}
  .signup-active .signup-card{margin-top:21px}
}

@media (max-height:680px) and (max-width:1050px){
  .signup-input{height:39px;margin-bottom:7px}
  .signup-input input{font-size:10px}
  .field-icon{width:35px;flex-basis:35px}
  .signup-eye{width:30px;height:30px;flex-basis:30px}
  .terms-row{font-size:8px;margin-bottom:7px}
  .create-button,.already-button{height:36px;font-size:13px}
  .signup-safe{font-size:7.5px;margin-top:7px}
  .signup-active .signup-card{margin-top:16px}
  .signup-active .features{margin-top:24px}
  .signup-view h1{font-size:23px}
  .signup-tagline{font-size:10px}
}


/* Final pixel-tuning for the supplied 408px reference. */
@media (max-width:480px){
  body{background:#1c222b}
  .page{width:calc(100% - 8px);margin:0 4px;min-height:100dvh;border-radius:0 0 0 0;overflow:hidden;background:#fff}
  .hotel-banner{
    height:390px!important;
    opacity:1!important;
    background-image:
      linear-gradient(90deg,rgba(239,248,255,.96) 0%,rgba(239,248,255,.80) 30%,rgba(239,248,255,.30) 63%,rgba(255,255,255,0) 88%),
      url('assets/hotel-banner.webp')!important;
    background-repeat:no-repeat;
    background-size:100% auto!important;
    background-position:right 47px!important;
  }
  .topbar{height:49px;padding:0 17px}
  .language-button{font-size:14px;font-weight:500;color:#071832}
  .globe-icon{width:25px;height:25px}
  .hero-content{width:calc(100% - 50px);margin:5px 25px 0}
  .brand-icon{width:48px;height:48px;margin-bottom:7px}
  .eyebrow{font-size:14px;margin-bottom:6px;color:#102143}
  .signup-view h1{font-size:28px;line-height:1.08;letter-spacing:-.75px}
  .accent-line{width:39px;height:3px;margin:8px 0 9px}
  .signup-tagline{font-size:12px;line-height:1.35}
  .features{width:calc(100% - 50px);margin:31px 25px 0;gap:4px}
  .feature{font-size:8.5px;line-height:1.25;gap:4px}
  .feature-icon{width:35px;height:35px;flex-basis:35px;padding:6px;border-radius:9px}
  .feature-divider{height:36px}
  .signup-card{width:calc(100% - 28px);margin:21px 14px 0;padding:16px 15px 12px;border-radius:20px;box-shadow:0 12px 32px rgba(33,62,106,.10)}
  .signup-input{height:50px;margin-bottom:10px;border-radius:10px}
  .field-icon{width:42px;flex-basis:42px}
  .signup-input input,.signup-input input::placeholder{font-size:13px}
  .signup-eye{width:39px;flex-basis:39px}
  .terms-row{font-size:9px;margin:0 0 11px;gap:7px}
  .create-button,.already-button{height:46px;font-size:14px;border-radius:8px}
  .already-button{margin-top:7px}
  .signup-safe{font-size:9px;margin-top:10px}
}

/* Avoid expensive visual effects that delay first paint on mobile. */
@media (max-width:1050px){
  .page:after{animation:none;filter:none}
  .login-card,.signup-card{backdrop-filter:none;animation:none}
}


/* =========================================================
   SIGN-UP DESKTOP ACCURACY
   ========================================================= */
@media (min-width:1051px){
  .signup-active .hotel-banner{
    height:100%;
    max-height:none;
    background-position:center center;
    background-size:cover;
  }

  .signup-active .hero-content{
    top:14.5vh;
    left:6.4%;
    width:500px;
    transform:none;
  }

  .signup-active .hero-content .signup-view h1{
    font-size:46px;
    line-height:1.07;
    letter-spacing:-1.4px;
    margin:0;
  }

  .signup-active .hero-content .signup-tagline{
    margin-top:0;
    font-size:15px;
    line-height:1.48;
    max-width:390px;
  }

  .signup-active .hero-content .accent-line{
    margin:15px 0 14px;
    width:42px;
  }

  .signup-active .features{
    left:6.4%;
    bottom:18.5vh;
    width:490px;
    transform:none;
  }

  .signup-active .signup-card{
    right:6.4%;
    left:auto;
    bottom:6vh;
    transform:none;
    width:570px;
    max-width:42vw;
    padding:27px 31px 18px;
  }

  .signup-active .signup-input{
    height:51px;
    margin-bottom:11px;
  }

  .signup-active .terms-row{
    margin:3px 0 13px;
    font-size:11px;
  }

  .signup-active .create-button,
  .signup-active .already-button{
    height:43px;
  }

  .signup-active .signup-safe{
    margin-top:13px;
    font-size:10px;
  }

  .signup-mobile-break{display:none}
}

@media (min-width:1400px){
  .signup-active .hero-content{left:8%;top:15vh}
  .signup-active .features{left:8%;bottom:17.5vh}
  .signup-active .signup-card{right:8%;width:590px;max-width:43vw}
}

@media (min-width:1800px){
  .signup-active .hero-content{left:10%;top:16vh}
  .signup-active .features{left:10%}
  .signup-active .signup-card{right:10%;width:620px}
}

/* RTL desktop alignment */
html[dir="rtl"] .signup-active .hero-content{
  left:auto;
  right:6.4%;
  text-align:right;
}
html[dir="rtl"] .signup-active .features{
  left:auto;
  right:6.4%;
}
html[dir="rtl"] .signup-active .signup-card{
  right:auto;
  left:6.4%;
}
@media (min-width:1400px){
  html[dir="rtl"] .signup-active .hero-content{right:8%}
  html[dir="rtl"] .signup-active .features{right:8%}
  html[dir="rtl"] .signup-active .signup-card{left:8%}
}
@media (min-width:1800px){
  html[dir="rtl"] .signup-active .hero-content{right:10%}
  html[dir="rtl"] .signup-active .features{right:10%}
  html[dir="rtl"] .signup-active .signup-card{left:10%}
}
.login-button:disabled,.create-button:disabled{opacity:.65;cursor:not-allowed;transform:none}

/* =========================================================
   V5.7.1 SIGN-UP FORM CLEANUP
   Proper SVG icons + centered buttons + smaller type
   ========================================================= */
.signup-input .field-icon{
  width:46px;
  flex:0 0 46px;
  height:100%;
  display:grid;
  place-items:center;
  color:#71809a;
  background:#fff;
}
.signup-input .field-icon:before,
.signup-input .field-icon:after{display:none!important;content:none!important}
.signup-input .field-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signup-eye{
  display:grid;
  place-items:center;
  padding:0!important;
}
.signup-eye .eye-shape{display:none!important}
.signup-eye svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signup-input input,
.signup-input input::placeholder{
  font-size:12px!important;
  font-weight:400!important;
}
.terms-row{font-size:9.5px!important}
.create-button,.already-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
  overflow:hidden!important;
  padding:0 44px!important;
}
.create-button .create-label{
  position:static!important;
  transform:none!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.create-button .create-arrow{
  position:absolute!important;
  right:15px!important;
  top:50%!important;
  transform:translateY(-52%)!important;
  font-size:20px!important;
  font-weight:300!important;
  line-height:1!important;
}
.already-button span{
  position:static!important;
  transform:none!important;
  font-size:inherit!important;
  line-height:1.15!important;
  white-space:normal!important;
}
.signup-safe{font-size:8.5px!important}
.safe-shield{
  width:17px;height:17px;display:grid;place-items:center;color:var(--orange)
}
.safe-shield svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:1051px){
  .signup-active .signup-card{padding:24px 28px 16px!important}
  .signup-active .signup-input{height:47px!important;margin-bottom:9px!important}
  .signup-active .signup-input .field-icon{width:44px!important;flex-basis:44px!important}
  .signup-active .signup-input input,.signup-active .signup-input input::placeholder{font-size:11.5px!important}
  .signup-active .terms-row{font-size:9.5px!important;margin:2px 0 11px!important}
  .signup-active .create-button,.signup-active .already-button{height:39px!important;font-size:11.5px!important;border-radius:9px!important}
  .signup-active .signup-safe{font-size:8.5px!important;margin-top:9px!important}
}
@media (max-width:1050px){
  .signup-card{padding:14px 14px 11px!important}
  .signup-input{height:46px!important;margin-bottom:8px!important}
  .signup-input .field-icon{width:39px!important;flex-basis:39px!important}
  .signup-input .field-icon svg{width:19px!important;height:19px!important}
  .signup-input input,.signup-input input::placeholder{font-size:11.5px!important}
  .signup-eye{width:34px!important;flex-basis:34px!important}
  .signup-eye svg{width:18px!important;height:18px!important}
  .terms-row{font-size:8px!important;margin:0 0 9px!important;gap:6px!important}
  .create-button,.already-button{height:40px!important;font-size:11.5px!important;border-radius:9px!important}
  .create-button .create-arrow{font-size:18px!important;right:12px!important}
  .signup-safe{font-size:7.8px!important;margin-top:8px!important}
}
@media (max-width:420px){
  .signup-card{padding:12px 12px 10px!important}
  .signup-input{height:43px!important;margin-bottom:7px!important}
  .signup-input .field-icon{width:37px!important;flex-basis:37px!important}
  .signup-input input,.signup-input input::placeholder{font-size:10.5px!important}
  .terms-row{font-size:7.4px!important}
  .create-button,.already-button{height:38px!important;font-size:11px!important}
  .signup-safe{font-size:7.2px!important}
}

/* V5.7.2: requested mobile H1 size */
@media (max-width:700px){
  h1{font-size:21px !important;line-height:1.18 !important;}
}

@media(max-width:700px){h1{font-size:21px!important}}


/* ===== V5.8.22 UNIFIED LANGUAGE CONTROL ===== */
.language-button{
  min-height:42px!important;
  padding:8px 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  background:rgba(255,255,255,.97)!important;
  color:#071832!important;
  border:1px solid #dfe7f2!important;
  border-radius:999px!important;
  box-shadow:0 6px 20px rgba(25,45,78,.10)!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
.language-button .globe-icon{width:20px!important;height:20px!important}
.language-menu{top:48px!important;width:166px!important;padding:7px!important;border:1px solid #dfe7f2!important;border-radius:14px!important;box-shadow:0 14px 34px rgba(24,46,82,.16)!important}
.language-menu button{font-size:13px!important;font-weight:550!important;padding:10px 11px!important;border-radius:9px!important}
@media(max-width:700px){
 .language-button{min-height:38px!important;padding:7px 10px!important;font-size:12px!important;gap:6px!important}
 .language-button .globe-icon{width:18px!important;height:18px!important}
 .language-menu{top:43px!important;width:152px!important}.language-menu button{font-size:12px!important;padding:9px 10px!important}
}
\n/* ===== UNIFIED LANGUAGE BUTTON POSITION: LOGIN + SIGNUP ===== */
.page .language-wrap,
.topbar .language-wrap{
  position:fixed!important;
  top:14px!important;
  right:24px!important;
  left:auto!important;
  z-index:99990!important;
  margin:0!important;
  transform:none!important;
}
html[dir="rtl"] .page .language-wrap,
html[dir="rtl"] .topbar .language-wrap{
  right:24px!important;
  left:auto!important;
}
@media(max-width:700px){
  .page .language-wrap,
  .topbar .language-wrap,
  html[dir="rtl"] .page .language-wrap,
  html[dir="rtl"] .topbar .language-wrap{
    top:10px!important;
    right:12px!important;
    left:auto!important;
  }
}

/* =========================================================
   AUTH MOTION + GYG BRANDING (visual only)
   ========================================================= */
.brand-icon{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  animation:brandFloat 4.2s ease-in-out infinite;
}
.brand-icon .brand-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 15px rgba(240,75,28,.18));
}

.login-view,
.signup-active .signup-view{
  animation:authContentFade .48s cubic-bezier(.22,.8,.24,1) both;
}
.login-card,
.signup-active .signup-card{
  animation:authCardInDesktop .58s cubic-bezier(.2,.85,.25,1) both, cardShadow 5s ease-in-out .58s infinite;
}
.login-card form > *,
.signup-active .signup-card form > *{
  animation:authFieldIn .42s ease both;
}
.login-card form > *:nth-child(1),.signup-active .signup-card form > *:nth-child(1){animation-delay:.05s}
.login-card form > *:nth-child(2),.signup-active .signup-card form > *:nth-child(2){animation-delay:.08s}
.login-card form > *:nth-child(3),.signup-active .signup-card form > *:nth-child(3){animation-delay:.11s}
.login-card form > *:nth-child(4),.signup-active .signup-card form > *:nth-child(4){animation-delay:.14s}
.login-card form > *:nth-child(5),.signup-active .signup-card form > *:nth-child(5){animation-delay:.17s}
.login-card form > *:nth-child(6),.signup-active .signup-card form > *:nth-child(6){animation-delay:.20s}
.login-card form > *:nth-child(7),.signup-active .signup-card form > *:nth-child(7){animation-delay:.23s}
.login-card form > *:nth-child(8),.signup-active .signup-card form > *:nth-child(8){animation-delay:.26s}
.login-card form > *:nth-child(9),.signup-active .signup-card form > *:nth-child(9){animation-delay:.29s}
.login-card form > *:nth-child(10),.signup-active .signup-card form > *:nth-child(10){animation-delay:.32s}

@keyframes authContentFade{
  from{opacity:0;transform:translateY(9px);filter:blur(3px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes authCardInDesktop{
  0%{opacity:0;transform:translateX(-50%) translateY(18px) scale(.985);filter:blur(4px)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}
}
@keyframes authFieldIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes brandFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-1.5deg)}
}

@media (max-width:1050px){
  .login-card,
  .signup-active .signup-card{
    animation:authCardInMobile .55s cubic-bezier(.2,.85,.25,1) both;
  }
  @keyframes authCardInMobile{
    0%{opacity:0;transform:translateY(16px) scale(.985);filter:blur(3px)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }
}

@media (prefers-reduced-motion:reduce){
  .brand-icon,.login-view,.signup-active .signup-view,.login-card,.signup-active .signup-card,
  .login-card form > *,.signup-active .signup-card form > *{animation:none!important}
}