/* ClinicalSlim sign-in and registration pages (demo brand). Dark green #2D4A3E, gold #B8A88A, muted #6B7B73,
   soft borders and shadows. Fonts: Lora (headings) and Manrope (text). */
:root{color-scheme:only light;}
.cs{
  --green:#2D4A3E; --green-2:#233B31; --green-3:#3A5C4E; --gold:#B8A88A; --gold-2:#A8956E; --gold-soft:#E9E1CF;
  --muted:#6B7B73; --ink:#1E2B25; --cream:#F8F5EF; --cream-2:#F2EEE6; --paper:#FFFFFF; --line:#E3DED4; --line-2:#D8D1C4;
  --err:#9A3B2E;
  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
}
.cs *{box-sizing:border-box}
.cs a{color:inherit}

/* ---------- shared bits ---------- */
.cs-logo{display:block; width:250px; max-width:100%; height:auto; margin:0 auto;}
.cs-kicker{margin:22px 0 0; text-align:center; font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--muted);}
.cs-rule{display:block; width:44px; height:2px; margin:18px auto 22px; background:var(--gold); border-radius:2px;}
.cs-title{margin:0; text-align:center; font-family:var(--serif); font-weight:600; font-size:clamp(34px,4.2vw,46px); line-height:1.1; color:var(--green); letter-spacing:-.01em;}
.cs-sub{margin:12px auto 0; max-width:40ch; text-align:center; font-size:16px; line-height:1.6; color:var(--muted);}
.cs-sub a, .cs-inline-link{color:var(--gold-2); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px; text-underline-offset:4px;}
.cs-sub a:hover, .cs-inline-link:hover{color:var(--green); text-decoration-color:var(--green);}

.cs-alert{margin:22px 0 0; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--green); border-radius:10px; background:var(--paper); font-size:14px; line-height:1.5;}
.cs-alert--error{border-left-color:var(--err);}
.cs-alert a{color:var(--green); font-weight:600;}

.cs-field{margin:0 0 18px;}
.cs-label{display:block; margin:0 0 8px; font-size:13.5px; font-weight:600; color:var(--green); letter-spacing:.005em;}
.cs-label .req{color:var(--gold-2); margin-left:2px;}
.cs-label small{font-weight:500; color:var(--muted);}
.cs-control{position:relative;}
.cs-control > .cs-ico{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); pointer-events:none;}
.cs-input{width:100%; height:50px; padding:0 15px; font:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:10px; outline:none; box-shadow:0 1px 2px rgba(45,74,62,.04);
  transition:border-color .18s, box-shadow .18s;}
.cs-control > .cs-ico + .cs-input{padding-left:46px;}
.cs-input::placeholder{color:#A3ABA6;}
.cs-input:hover{border-color:var(--gold);}
.cs-input:focus{border-color:var(--green); box-shadow:0 0 0 4px rgba(45,74,62,.10);}
.cs-input[aria-invalid="true"]{border-color:var(--err);}
select.cs-input{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%232D4A3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;}
.cs-error{display:block; margin-top:6px; font-size:13px; color:var(--err);}
.cs-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer;}
.cs-eye:hover{color:var(--green); background:var(--cream-2);}
.cs-eye svg{width:20px; height:20px;}
.cs-eye:focus-visible, .cs-btn:focus-visible, .cs-check input:focus-visible, .cs-radio input:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

.cs-captcha{display:flex; justify-content:center; margin:6px 0 18px; min-height:78px;}
.cs-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:2px 0 22px;}
.cs-check{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--muted); user-select:none;}
.cs-check input{width:18px; height:18px; margin:0; accent-color:var(--green); cursor:pointer;}
.cs-link{font-size:14px; font-weight:600; color:var(--green); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:1px;}
.cs-link:hover{border-bottom-color:var(--green);}

.cs-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; padding:0 22px; border:0; border-radius:10px;
  background:var(--green); color:#FBF8F2; font:inherit; font-size:16px; font-weight:600; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(35,59,49,.55); transition:background .18s, transform .18s, box-shadow .18s;}
.cs-btn:hover{background:var(--green-2); box-shadow:0 12px 24px -14px rgba(35,59,49,.6);}
.cs-btn:active{transform:translateY(1px);}
.cs-btn[disabled]{opacity:.75; cursor:progress;}
.cs-btn svg{width:18px; height:18px;}
.cs a.cs-btn{color:#FBF8F2; text-decoration:none;}
.cs a.cs-btn--ghost{color:var(--green);}
.cs-btn--ghost{margin-top:12px; background:transparent; color:var(--green); border:1px solid var(--gold); box-shadow:none; text-decoration:none;}
.cs-btn--ghost:hover{background:var(--cream-2); border-color:var(--green); box-shadow:none;}

.cs-divider{display:flex; align-items:center; gap:16px; margin:26px 0 0; font-size:14px; color:var(--muted);}
.cs-divider::before, .cs-divider::after{content:""; flex:1; height:1px; background:var(--line);}
.cs-divider a{color:var(--muted); text-decoration:none;}
.cs-divider a:hover{color:var(--green); text-decoration:underline; text-underline-offset:3px;}
.cs-foot{margin:26px 0 0; text-align:center; font-size:12px; color:#8E9993; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px;}
.cs-foot a{color:#8E9993; text-decoration:none;}
.cs-foot a:hover{color:var(--green);}

/* ---------- sign-in: photo | card | green panel ---------- */
.cs-login{display:grid; grid-template-columns:1fr; min-height:100vh; min-height:100dvh;}
.cs-login__photo, .cs-login__panel{display:none;}
.cs-login__main{display:flex; align-items:center; justify-content:center; padding:84px 20px 40px; background:var(--cream);}
.cs-login__card{width:100%; max-width:430px;}
.cs-login form{margin-top:30px;}
@media (min-width:900px){
  .cs-login{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);}
  .cs-login__panel{display:block;}
}
@media (min-width:1200px){
  .cs-login{grid-template-columns:minmax(0,.62fr) minmax(0,1.35fr) minmax(0,.62fr);}
  .cs-login__photo{display:block; background:#2D4A3E url('../brand/login-photo.jpg') center/cover no-repeat;}
}
.cs-login__panel{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 100% 0%, var(--green-3) 0%, var(--green) 45%, var(--green-2) 100%);}
.cs-login__panel::before{content:""; position:absolute; right:-24%; top:24%; width:118%; aspect-ratio:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(233,225,207,.55), rgba(184,168,138,.35) 55%, rgba(184,168,138,.12));
  -webkit-mask:var(--cs-mark) center/contain no-repeat; mask:var(--cs-mark) center/contain no-repeat;}
.cs-login__panel svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}

/* ---------- registration: green | card | sand ---------- */
.cs-reg{position:relative; min-height:100vh; min-height:100dvh; padding:72px 16px 56px; background:var(--cream);}
/* the sign-in page's sides, held in place while the form scrolls */
.cs-reg__photo, .cs-reg__panel{display:none;}
@media (min-width:1200px){
  .cs-reg__photo{display:block; position:fixed; left:0; top:0; bottom:0; width:24%; background:#2D4A3E url('../brand/login-photo.jpg') center/cover no-repeat;}
}
@media (min-width:900px){
  .cs-reg__panel{display:block; position:fixed; right:0; top:0; bottom:0; width:24%;}
}
.cs-reg__sheet{position:relative; z-index:1; max-width:700px; margin:0 auto; background:var(--cream); border-radius:24px;
  padding:52px clamp(18px,5vw,56px) 40px; box-shadow:0 30px 60px -40px rgba(35,59,49,.45);}
@media (min-width:900px) and (max-width:1199px){ .cs-reg__sheet{margin-right:calc(24% + 24px); margin-left:max(16px, calc((76% - 700px) / 2));} }
.cs-reg__box{margin:30px 0 0; background:#FBF9F5; border:1px solid var(--line); border-radius:16px; padding:26px clamp(16px,3.4vw,28px) 24px; box-shadow:0 1px 2px rgba(45,74,62,.04);}
.cs-sec{display:flex; align-items:center; gap:16px; margin:30px 0 16px; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--green);}
.cs-sec:first-child, .cs-reg__box > .cs-sec:first-of-type{margin-top:0;}
.cs-sec::after{content:""; flex:1; height:1px; background:var(--line);}
.cs-grid{display:grid; gap:0 14px; grid-template-columns:1fr;}
@media (min-width:560px){
  .cs-grid--2{grid-template-columns:1fr 1fr;}
  .cs-grid--dob{grid-template-columns:1.25fr 1fr 1fr;}
  .cs-grid--city{grid-template-columns:1.5fr 1fr 1fr;}
}
@media (max-width:559px){ .cs-grid--dob{grid-template-columns:1.3fr 1fr 1fr;} }
.cs-radios{display:flex; gap:26px; padding:4px 0 0;}
.cs-radio{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer;}
.cs-radio input{width:20px; height:20px; margin:0; accent-color:var(--green); cursor:pointer;}
.cs-radios[aria-invalid="true"] .cs-radio{color:var(--err);}
.cs-show{position:absolute; right:8px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px; border:0; border-radius:8px; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;}
.cs-show:hover{background:var(--cream-2); color:var(--green);}
.cs-show svg{width:17px; height:17px;}
.cs-pwd .cs-input{padding-right:84px;}
.cs-rules{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; font-size:13px; color:var(--muted);}
.cs-rules li{display:flex; align-items:center; gap:8px;}
.cs-rules li::before{content:""; flex:none; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-2); background:center/10px no-repeat;}
.cs-rules li.is-met{color:var(--green);}
.cs-rules li.is-met::before{border-color:var(--green); background-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.cs-agree{display:flex; gap:12px; align-items:flex-start; margin:22px 0 0; font-size:14px; line-height:1.55; color:var(--muted); cursor:pointer;}
.cs-agree input{flex:none; width:19px; height:19px; margin:1px 0 0; accent-color:var(--green); cursor:pointer;}
.cs-agree[aria-invalid="true"]{color:var(--err);}
.cs-reg .cs-btn{margin-top:22px;}
.cs-msg{margin:12px 0 0; padding:10px 13px; border:1px solid var(--line); border-left:3px solid var(--err); border-radius:9px; background:var(--paper); font-size:14px; line-height:1.5;}
.cs-info{margin:8px 0 0; padding:9px 12px; border-left:3px solid var(--gold); border-radius:8px; background:var(--paper); font-size:13px; line-height:1.5;}
.cs-info a{color:var(--green); font-weight:600;}
.cs-after{margin:18px 0 0; text-align:center; font-size:13px; line-height:1.7; color:var(--muted);}
.cs-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media (max-width:719px){
  .cs-reg{padding:64px 0 0;}
  .cs-reg__sheet{border-radius:0; box-shadow:none; padding-top:36px;}
  .cs-rules{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ .cs *{transition:none!important;} }

/* ---------- forgot password ---------- */
.cs-back{display:inline-flex; align-items:center; gap:8px; margin:0 0 26px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;}
.cs a.cs-back{color:var(--muted);}
.cs a.cs-back:hover{color:var(--green);}
.cs-back svg{width:16px; height:16px;}
.cs-note{display:flex; gap:12px; align-items:flex-start; margin:24px 0 0; padding:13px 15px; border-radius:12px; background:#F3EEE3; border:1px solid #ECE3D1; font-size:13.5px; line-height:1.55; color:var(--muted);}
.cs-note svg{flex:none; width:18px; height:18px; margin-top:1px; color:var(--gold-2);}
.cs-alert--ok{border-left-color:var(--gold);}