/* ============ LOGIN / CREATE ACCOUNT ============ */

/* The page itself is a dimmed, blurred "backdrop" (a muted navy tint, not
   plain white) so the white card in front of it visibly reads as a floating
   popup rather than a full page -- same idea as a modal's scrim, just baked
   into the page since this isn't a JS overlay on top of other content. */
.login-body{background:
    radial-gradient(720px 520px at 12% -8%, rgba(15,118,109,.16), transparent 60%),
    radial-gradient(640px 480px at 108% 106%, rgba(240,196,101,.18), transparent 60%),
    var(--navy);
  min-height:100vh;min-height:100svh;overflow-x:hidden;}

/* Sits inline next to the tabs now (see login.html) instead of floating
   fixed over the viewport, so it never drifts over the card's own text
   and scrolls together with the rest of the card content. */
.login-top-row{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.login-top-row .login-tabs{flex:1;margin-bottom:0;}
.login-close{flex-shrink:0;position:static;width:36px;height:36px;border-radius:50%;background:var(--navy-06);border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--navy-65);transition:color .25s var(--ease),background .25s var(--ease),transform .35s var(--ease);}
.login-close:hover{color:var(--navy);background:var(--navy-10);transform:rotate(90deg);}

.login-wrap{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px;}
@media (max-width:600px){.login-wrap{padding:28px 14px;}}

.login-card{position:relative;width:100%;max-width:430px;max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);overflow-y:auto;background:var(--white);border-radius:26px;padding:30px 28px 26px;box-shadow:0 50px 110px -25px rgba(0,0,0,.5);}
@media (max-width:480px){.login-card{max-height:calc(100svh - 32px);padding:24px 18px 20px;border-radius:20px;}}

.login-tabs{display:flex;background:var(--navy-06);border-radius:100px;padding:4px;margin-bottom:26px;}
.login-tab{flex:1;text-align:center;padding:10px 12px;border-radius:100px;font-size:14.5px;font-weight:600;color:var(--navy-45);transition:all .3s var(--ease);}
.login-tab.active{background:var(--white);color:var(--navy);box-shadow:0 6px 16px -8px rgba(27,33,45,.25);}

.login-panel{display:none;}
.login-panel.active{display:block;animation:panelIn .4s var(--ease);}

.login-head h2{font-size:22px;font-weight:600;letter-spacing:-.02em;}
.login-head p{font-size:14px;color:var(--navy-65);margin-top:6px;line-height:1.5;}

.login-form{display:grid;gap:13px;margin-top:22px;}
.login-form .f-field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy-80);margin-bottom:7px;}
.login-form input,.login-form select{width:100%;border:1.5px solid var(--navy-10);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--navy);background:var(--white);transition:border-color .25s,background .25s;}
.login-form input:focus,.login-form select:focus{outline:none;border-color:var(--teal);}

.login-submit{width:100%;justify-content:center;margin-top:6px;}

.login-foot-note{text-align:center;font-size:14px;color:var(--navy-45);margin-top:18px;}
.login-foot-note button{color:var(--teal);font-weight:600;}
.login-foot-note button:hover{text-decoration:underline;}

.login-status{font-size:13.5px;text-align:center;margin-top:14px;color:var(--navy-45);min-height:16px;}
.login-status.error{color:#D9482F;}
.login-status.ok{color:var(--teal);}

.login-legal{text-align:center;font-size:12.5px;color:var(--navy-45);line-height:1.6;max-width:400px;}
.login-legal a{color:var(--navy-65);text-decoration:underline;}

/* ============ FORM DETAILS ============ */

.f-hint{font-size:12.5px;color:var(--navy-45);margin-top:6px;line-height:1.5;}
.f-error{font-size:13px;color:#D9482F;margin-top:6px;line-height:1.4;min-height:0;}
.f-error:empty{display:none;}

.password-field{position:relative;}
.password-field input{padding-right:44px;}
.pw-toggle{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--navy-45);transition:color .2s,background .2s;}
.pw-toggle:hover{color:var(--navy);background:var(--navy-06);}

/* Custom checkbox -- native checkboxes render as an inconsistent mix of
   square box + rounded/circular tick across browsers/OSes. This replaces
   that entirely with one consistent rounded-square control. */
.check-stack{display:grid;gap:12px;margin-top:4px;}
.check-option{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px;color:var(--navy-65);line-height:1.5;}
.check-option input[type="checkbox"]{appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:19px;height:19px;margin:1px 0 0;padding:0;border-radius:6px;border:1.5px solid var(--navy-25);background:var(--white);position:relative;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);}
.check-option input[type="checkbox"]:hover{border-color:var(--teal);}
.check-option input[type="checkbox"]:checked{background:var(--teal);border-color:var(--teal);}
.check-option input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(40deg);}
.check-option input[type="checkbox"]:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.check-option a{color:var(--teal);text-decoration:underline;}
.check-option a:hover{color:var(--teal-dark);}

.login-submit:disabled{opacity:.5;cursor:not-allowed;}
.login-submit:disabled:hover{background:var(--orange);transform:none;box-shadow:none;}

.status-link-btn{color:var(--teal);font-weight:600;text-decoration:underline;margin-left:2px;}
.status-link-btn:hover{color:var(--teal-dark);}

.forgot-link{display:block;margin:-4px 0 4px;font-size:13.5px;font-weight:600;color:var(--teal);text-align:right;}
.forgot-link:hover{color:var(--teal-dark);text-decoration:underline;}