/* A+ Esthetic cinematic authentication surface
   Login only. Functional auth behavior stays in core-app.js and account-onboarding.js. */

.login-shell.login-shell-auth{
  position:relative!important;
  isolation:isolate;
  min-height:100dvh!important;
  overflow:hidden;
  align-items:end!important;
  padding:
    max(38px,env(safe-area-inset-top))
    18px
    max(28px,env(safe-area-inset-bottom))!important;
  background:
    linear-gradient(180deg,rgba(14,11,8,.30) 0%,rgba(14,11,8,.10) 28%,rgba(245,238,227,.02) 46%,rgba(243,237,227,.46) 67%,rgba(240,234,225,.94) 100%),
    radial-gradient(72% 54% at 50% 4%,rgba(221,184,102,.22),rgba(221,184,102,0) 70%),
    url('./assets/site/clinic.jpg') center 18% / cover no-repeat!important;
}

.login-shell.login-shell-auth::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(9,7,5,.54) 0%,rgba(9,7,5,.18) 27%,rgba(9,7,5,0) 45%),
    radial-gradient(44% 30% at 50% 10%,rgba(255,242,207,.26),rgba(255,242,207,0) 100%),
    radial-gradient(26% 17% at 82% 18%,rgba(211,165,76,.20),rgba(211,165,76,0) 100%),
    radial-gradient(23% 16% at 14% 72%,rgba(255,255,255,.24),rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.login-shell.login-shell-auth::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -12% -12% auto;
  width:min(520px,92vw);
  height:min(520px,92vw);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(207,168,92,.22) 0%,rgba(207,168,92,.10) 32%,rgba(207,168,92,0) 72%);
  filter:blur(12px);
  pointer-events:none;
}

.login-shell.login-shell-auth .login-card[data-login]{
  position:relative;
  overflow:hidden;
  width:min(440px,100%)!important;
  margin:auto!important;
  padding:32px 28px 28px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:34px!important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.91),rgba(255,255,255,.77) 58%,rgba(255,250,242,.73))!important;
  box-shadow:
    0 40px 100px rgba(24,18,12,.28),
    0 10px 30px rgba(24,18,12,.12),
    inset 0 1px 0 rgba(255,255,255,.86)!important;
  backdrop-filter:blur(26px) saturate(122%);
  -webkit-backdrop-filter:blur(26px) saturate(122%);
  animation:aplusAuthCardIn .56s cubic-bezier(.2,.75,.2,1) both;
}

.login-shell.login-shell-auth .login-card[data-login]::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:164px;
  background:
    radial-gradient(64% 86% at 50% 0%,rgba(239,210,146,.32),rgba(239,210,146,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));
  pointer-events:none;
}

.login-shell.login-shell-auth .login-card[data-login]::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:170px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#d4ae5b 22%,#f4dfae 50%,#d4ae5b 78%,transparent);
  opacity:.98;
}

.login-shell.login-shell-auth .login-logo{
  position:relative;
  width:104px;
  height:104px;
  margin:0 auto 26px!important;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(202,160,83,.20);
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.98) 0%,rgba(252,244,227,.96) 70%,rgba(244,232,207,.88) 100%);
  box-shadow:
    0 22px 42px rgba(116,82,26,.14),
    inset 0 0 0 8px rgba(255,255,255,.50);
}

.login-shell.login-shell-auth .login-logo::before,
.login-shell.login-shell-auth .login-logo::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.login-shell.login-shell-auth .login-logo::before{
  inset:-9px;
  border:1px solid rgba(192,148,66,.16);
}

.login-shell.login-shell-auth .login-logo::after{
  inset:-22px;
  border:1px solid rgba(192,148,66,.09);
}

.login-shell.login-shell-auth .login-brand-logo{
  width:72px!important;
  max-width:none!important;
  height:auto!important;
  filter:drop-shadow(0 6px 14px rgba(140,99,29,.11));
}

.login-shell.login-shell-auth .login-kicker{
  margin:0 0 8px;
  color:#9e762d;
  font-size:9px;
  font-weight:800;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.login-shell.login-shell-auth h1{
  margin:0 0 9px!important;
  color:#1c1814;
  font:500 42px/1.02 Georgia,"Times New Roman",serif!important;
  letter-spacing:-.045em!important;
}

.login-shell.login-shell-auth .login-card[data-login]>p{
  max-width:330px;
  margin:0 0 24px!important;
  color:#7f776d!important;
  font-size:13px!important;
  line-height:1.58!important;
}

.login-shell.login-shell-auth .field{
  gap:8px;
  margin-bottom:14px;
}

.login-shell.login-shell-auth .field>span{
  padding-left:2px;
  color:#675f55!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}

.login-shell.login-shell-auth .field input{
  min-height:54px!important;
  padding:0 16px!important;
  border:1px solid rgba(78,65,46,.11)!important;
  border-radius:16px!important;
  background:rgba(250,248,243,.74)!important;
  color:#201c18!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}

.login-shell.login-shell-auth .field input:hover{
  border-color:rgba(176,132,50,.24)!important;
}

.login-shell.login-shell-auth .field input:focus{
  border-color:rgba(187,141,57,.50)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:
    0 0 0 4px rgba(192,148,66,.09),
    0 10px 24px rgba(79,61,29,.06)!important;
  transform:translateY(-1px);
}

.login-shell.login-shell-auth .primary,
.login-shell.login-shell-auth .secondary{
  min-height:54px!important;
  border-radius:16px!important;
  font-size:14px!important;
  font-weight:760!important;
  letter-spacing:.005em;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease!important;
}

.login-shell.login-shell-auth .primary{
  position:relative;
  overflow:hidden;
  margin-top:3px;
  border:1px solid #171410!important;
  background:linear-gradient(180deg,#29241e 0%,#16120f 100%)!important;
  color:#fff!important;
  box-shadow:
    0 14px 26px rgba(27,22,16,.17),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.login-shell.login-shell-auth .primary::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-45%;
  width:34%;
  height:220%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(229,199,135,.14),transparent);
  transition:left .48s ease;
}

.login-shell.login-shell-auth .primary:hover::after{
  left:115%;
}

.login-shell.login-shell-auth .primary:active,
.login-shell.login-shell-auth .secondary:active,
.login-shell.login-shell-auth .native-provider-button:active{
  transform:scale(.986);
}

.login-shell.login-shell-auth .secondary.login-signup{
  margin-top:10px!important;
  border:1px solid rgba(141,108,48,.17)!important;
  background:rgba(255,252,246,.56)!important;
  color:#2d2722!important;
  box-shadow:none!important;
}

.login-shell.login-shell-auth .secondary.login-signup:hover{
  border-color:rgba(170,126,43,.33)!important;
  background:rgba(255,251,239,.76)!important;
}

.login-shell.login-shell-auth .login-divider{
  gap:14px!important;
  margin:22px 0 18px!important;
  color:#968f85!important;
  font-size:10px!important;
}

.login-shell.login-shell-auth .login-divider::before{
  background:linear-gradient(90deg,transparent,rgba(122,102,69,.22))!important;
}

.login-shell.login-shell-auth .login-divider::after{
  background:linear-gradient(90deg,rgba(122,102,69,.22),transparent)!important;
}

.login-shell.login-shell-auth .official-social-grid,
.login-shell.login-shell-auth .native-social-grid{
  gap:10px!important;
}

.login-shell.login-shell-auth .native-provider-button{
  min-height:52px!important;
  height:52px!important;
  border-radius:15px!important;
  box-shadow:0 8px 18px rgba(31,26,20,.07);
}

.login-shell.login-shell-auth .native-apple-button{
  border-color:#090909!important;
  background:linear-gradient(180deg,#0e0e0e,#000)!important;
}

.login-shell.login-shell-auth .native-google-button{
  border-color:rgba(70,67,61,.16)!important;
  background:#fff!important;
}

.login-shell.login-shell-auth .official-apple{
  min-height:52px!important;
  height:52px!important;
  border-radius:15px!important;
  overflow:hidden;
}

.login-shell.login-shell-auth .notice.error{
  margin:0 0 16px;
  border-radius:14px;
}

@keyframes aplusAuthCardIn{
  from{opacity:0;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}
}

@media(max-width:520px){
  .login-shell.login-shell-auth{
    padding:
      max(24px,env(safe-area-inset-top))
      16px
      max(22px,env(safe-area-inset-bottom))!important;
    background-position:center 12%!important;
  }

  .login-shell.login-shell-auth .login-card[data-login]{
    padding:28px 22px 24px!important;
    border-radius:30px!important;
  }

  .login-shell.login-shell-auth .login-logo{
    width:92px;
    height:92px;
    margin-bottom:24px!important;
  }

  .login-shell.login-shell-auth .login-brand-logo{
    width:66px!important;
  }

  .login-shell.login-shell-auth h1{
    font-size:39px!important;
  }
}

@media(max-height:760px){
  .login-shell.login-shell-auth{
    padding-top:max(18px,env(safe-area-inset-top))!important;
    background-position:center 24%!important;
  }

  .login-shell.login-shell-auth .login-card[data-login]{
    padding:26px 20px 22px!important;
    border-radius:28px!important;
  }

  .login-shell.login-shell-auth .login-logo{
    width:80px;
    height:80px;
    margin-bottom:18px!important;
  }

  .login-shell.login-shell-auth .login-brand-logo{
    width:56px!important;
  }

  .login-shell.login-shell-auth h1{
    font-size:35px!important;
  }

  .login-shell.login-shell-auth .field input,
  .login-shell.login-shell-auth .primary,
  .login-shell.login-shell-auth .secondary{
    min-height:50px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .login-shell.login-shell-auth .login-card[data-login]{
    animation:none!important;
  }

  .login-shell.login-shell-auth .field input,
  .login-shell.login-shell-auth .primary,
  .login-shell.login-shell-auth .secondary,
  .login-shell.login-shell-auth .primary::after{
    transition:none!important;
  }
}