*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#10234b}body{min-height:100vh}.login-page{position:relative;min-height:100vh;background:url('../assets/login-bg.png') center/cover no-repeat;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:4vw 9vw}.login-page:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 50%,rgba(15,35,75,.04) 100%);pointer-events:none}.login-card{position:relative;z-index:2;width:min(510px,42vw);padding:36px 38px 25px;border-radius:32px;background:rgba(255,255,255,.94);box-shadow:0 30px 70px rgba(9,39,89,.25);backdrop-filter:blur(16px);animation:cardIn .7s cubic-bezier(.2,.8,.2,1)}.brand{display:flex;align-items:center;gap:15px;margin-bottom:28px}.brand-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:31px;color:white;background:linear-gradient(145deg,#07a4ff,#5548ff);box-shadow:0 12px 25px #2f6cff55}.brand strong{font-size:36px;line-height:1}.brand strong span,h1 span{color:#176dff}.brand small{display:block;color:#7b8ca9;margin-top:7px;font-size:14px}.login-card h1{font-size:40px;margin:0 0 4px;letter-spacing:-1.5px}.lead{color:#7183a4;font-size:17px;margin:0 0 25px}.google,.primary,.verify{width:100%;height:58px;border-radius:15px;border:1px solid #d5dfef;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:16px;color:#10234b;cursor:pointer;transition:.2s}.google:hover{transform:translateY(-2px);box-shadow:0 10px 24px #173f7820}.g{font-size:23px;font-weight:900;color:#4285f4}.primary,.verify{border:0;justify-content:center;color:white;font-weight:800;background:linear-gradient(90deg,#079df8,#514af6);box-shadow:0 12px 24px #2879ff33}.primary:hover,.verify:hover{filter:brightness(1.04);transform:translateY(-1px)}.or{display:flex;align-items:center;gap:14px;color:#8a9ab5;margin:18px 0}.or i{height:1px;background:#dce5f2;flex:1}.login-card label{font-size:13px;font-weight:800;display:block;margin:0 0 8px}.email-wrap{height:58px;border:1px solid #d5dfef;border-radius:15px;display:flex;align-items:center;margin-bottom:14px;background:white}.email-wrap span{width:54px;text-align:center;color:#5b78a5;border-right:1px solid #e1e8f2}.email-wrap input{border:0;outline:0;flex:1;font-size:16px;padding:0 15px;background:transparent;min-width:0}.otp-area{margin-top:16px}.otp-area input{width:100%;height:56px;border:1px solid #d5dfef;border-radius:15px;text-align:center;font-size:24px;letter-spacing:8px;outline:none;margin-bottom:10px}.verify{height:50px}.hidden{display:none}.status{min-height:20px;text-align:center;font-size:13px;margin-top:10px}.status.error{color:#c62828}.status.ok{color:#087c4c}.secure{text-align:center;color:#8493ac;font-size:13px;margin:15px 0 8px}.travel-footer{text-align:center;font-size:23px;color:#83b4ff;opacity:.65;border-top:1px solid #edf2f8;padding-top:14px;letter-spacing:8px}.plane{position:absolute;z-index:3;top:8%;left:-80px;font-size:35px;color:white;filter:drop-shadow(0 5px 7px #16487966);animation:fly 12s linear infinite;pointer-events:none}@keyframes fly{0%{transform:translateX(-10vw) rotate(8deg)}100%{transform:translateX(120vw) rotate(8deg)}}@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){.login-page{padding:24px;justify-content:center;background-position:38% center}.login-page:before{content:"";position:absolute;inset:0;background:rgba(7,27,61,.20)}.login-card{width:min(100%,480px);padding:28px 24px;border-radius:26px}.brand strong{font-size:30px}.login-card h1{font-size:34px}.brand-icon{width:54px;height:54px}.plane{display:none}}@media(max-width:520px){.login-page{align-items:flex-end;padding:16px;min-height:100svh;background-position:34% center}.login-card{padding:22px 18px 18px;border-radius:24px}.brand{margin-bottom:18px}.brand strong{font-size:27px}.brand small{font-size:11px}.login-card h1{font-size:30px}.lead{font-size:14px;margin-bottom:18px}.google,.primary,.email-wrap{height:52px}.travel-footer{display:none}}

/* ===== FINAL GOOGLE BUTTON FIX ===== */

button#googleLogin.google-login-btn {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;

    padding: 0 20px !important;
    margin: 14px 0 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    background: #ffffff !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 14px !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #172554 !important;

    cursor: pointer !important;
    overflow: hidden !important;

    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.07) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


/* FORCE GOOGLE LOGO SIZE */

button#googleLogin .google-g {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;

    display: block !important;
    flex: 0 0 23px !important;
}


/* Text */

button#googleLogin > span {
    width: auto !important;
    height: auto !important;
}


/* Arrow */

button#googleLogin .google-arrow {
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .25s ease !important;
}


/* Hover */

button#googleLogin:hover {
    border-color: #4285f4 !important;
    transform: translateY(-2px) !important;

    box-shadow:
        0 9px 24px rgba(66, 133, 244, 0.18) !important;
}

button#googleLogin:hover .google-arrow {
    transform: translateX(4px) !important;
}

button#googleLogin:active {
    transform: scale(.98) !important;
}


/* OR divider */

.login-divider {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 !important;

    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.login-divider::before,
.login-divider::after {
    content: "" !important;
    height: 1px !important;
    background: #e4eaf3 !important;
    flex: 1 !important;
}

/* ===== KHARCHIVA LOGIN BRAND MOTION ===== */
.brand{animation:khBrandFloat 3.6s ease-in-out infinite;transform-origin:left center}
.brand strong{display:inline-block;background:linear-gradient(90deg,#10234b 0%,#176dff 48%,#6c4cff 72%,#10234b 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:khBrandShimmer 5s linear infinite;filter:drop-shadow(0 5px 12px rgba(23,109,255,.12))}
.brand strong span{color:inherit}
.brand-icon{animation:khIconFloat 3s ease-in-out infinite}
@keyframes khBrandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes khBrandShimmer{0%{background-position:0% center}100%{background-position:220% center}}
@keyframes khIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.brand,.brand strong,.brand-icon{animation:none!important}}


/* =====================================================
   KHARCHIVA LOGIN — MOBILE HERO FINAL POSITION FIX
   Cartoon + Airplane visibility
   ===================================================== */

@media (max-width: 600px) {

  .login-page {
    min-height: 100dvh !important;

    /* Background image ko mobile par better frame kare */
    background-position: 43% center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    /* Login card ke liye proper space */
    padding: 348px 16px 22px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    overflow-x: hidden !important;
  }

  /* Login card */
  .login-card {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto !important;
    padding: 22px 18px 20px !important;

    border-radius: 24px !important;

    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
      0 20px 50px rgba(20,40,80,.18) !important;

    z-index: 5 !important;
  }

  /* Existing animated plane emoji hide —
     background airplane already clearly visible */
  .plane {
    display: none !important;
  }
}


/* iPhone / narrow Android */
@media (max-width: 430px) {

  .login-page {
    /*
      Thoda left-side scene andar laata hai,
      jisse cartoon face cut nahi hoga.
    */
    background-position: 38% center !important;
    padding-top: 330px !important;
  }

  .login-card {
    padding: 20px 16px 18px !important;
    border-radius: 22px !important;
  }

  .login-card h1 {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
}


/* Very small phones */
@media (max-width: 370px) {

  .login-page {
    background-position: 35% center !important;
    padding-top: 300px !important;
  }

  .login-card h1 {
    font-size: 27px !important;
  }
}

/* ===== FINAL MOBILE LOGIN IMAGE FRAMING ===== */

@media (max-width: 600px) {

  .login-page {
    background-size: auto 100% !important;
    background-position: 30% center !important;
    background-repeat: no-repeat !important;
    background-color: #eaf6ff !important;
  }
}

@media (max-width: 430px) {

  .login-page {
    background-size: auto 100% !important;
    background-position: 27% center !important;
  }
}

/* =====================================================
   KHARCHIVA — MOBILE GLASS LOGIN CARD
   ===================================================== */

@media (max-width: 600px) {

  /* Main Welcome Back card */
  .login-card {
    background: rgba(255, 255, 255, 0.78) !important;

    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;

    border: 1px solid rgba(255,255,255,0.72) !important;

    box-shadow:
      0 18px 45px rgba(15, 35, 70, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.75) !important;

    border-radius: 24px !important;
  }

  /* Inputs readable rahenge */
  .login-card input {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Google button */
  .google-btn {
    background: rgba(255,255,255,0.84) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(215,225,240,0.9) !important;
  }

  /* Text readability */
  .login-card h1,
  .login-card h2,
  .login-card label {
    text-shadow: 0 1px 1px rgba(255,255,255,.45);
  }
}


/* Small phones */
@media (max-width: 430px) {

  .login-card {
    /* Thoda aur transparent */
    background: rgba(255,255,255,0.74) !important;

    backdrop-filter: blur(13px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(13px) saturate(140%) !important;
  }
}

/* Kharchiva mobile release safe-area finishing */
@media (max-width:600px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  .login-page{
    min-height:100dvh !important;
    padding-left:max(14px,env(safe-area-inset-left)) !important;
    padding-right:max(14px,env(safe-area-inset-right)) !important;
    padding-bottom:max(14px,env(safe-area-inset-bottom)) !important;
  }
  .login-card{width:100% !important;max-width:480px !important;}
  .email-wrap input,.otp-area input{font-size:16px !important;}
}