/* ============================================================
   KISSED VIRTUAL CLINIC — component styles
   Builds on the design tokens defined in styles.css (:root variables,
   base typography, .btn, .field, .card). Load styles.css BEFORE this file.
   ============================================================ */

/* ---------- Clinic shell (distinct from public nav) ---------- */
.clinic-shell{min-height:100vh; background:var(--porcelain); display:flex; flex-direction:column;}
.clinic-header{background:var(--white); border-bottom:1px solid var(--silver-line); position:sticky; top:0; z-index:50;}
.clinic-header-inner{max-width:900px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.clinic-logo{display:flex; align-items:center; gap:10px;}
.clinic-logo img{height:30px; width:auto;}
.clinic-badge{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); background:var(--purple-pale); padding:5px 12px; border-radius:999px;}
.clinic-exit{font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.clinic-exit:hover{color:var(--purple);}
@media (max-width:640px){ .clinic-header-inner{padding:14px 18px;} }

/* ---------- Progress ---------- */
.clinic-progress-wrap{max-width:900px; margin:0 auto; padding:22px 28px 0;}
@media (max-width:640px){ .clinic-progress-wrap{padding:18px 18px 0;} }
.clinic-progress-label{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:10px;}
.clinic-progress-label b{color:var(--purple);}
.clinic-progress-track{height:6px; border-radius:999px; background:var(--silver-line); overflow:hidden;}
.clinic-progress-fill{height:100%; background:var(--purple); border-radius:999px; transition:width .3s ease;}
.clinic-save-note{font-size:12px; color:var(--ink-soft); margin-top:8px; display:flex; align-items:center; gap:6px;}
.clinic-save-note .dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0;}

/* ---------- Step body ---------- */
.clinic-body{flex:1; max-width:760px; margin:0 auto; width:100%; padding:36px 28px 80px;}
@media (max-width:640px){ .clinic-body{padding:28px 18px 60px;} }
.clinic-step{display:none;}
.clinic-step.active{display:block; animation:fadeInUp .4s ease;}
.clinic-step-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple); margin-bottom:10px;}
.clinic-step h1{font-size:clamp(24px,4vw,32px); margin-bottom:12px;}
.clinic-step-intro{font-size:15px; margin-bottom:8px;}
.clinic-quote{font-family:'Fraunces', Georgia, serif; font-style:italic; font-size:19px; color:var(--ink); line-height:1.6; margin:24px 0; padding-left:20px; border-left:3px solid var(--green);}

.clinic-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px;}
@media (max-width:640px){ .clinic-form-grid{grid-template-columns:1fr;} }
.clinic-form-grid .field.full{grid-column:1/-1;}
.clinic-fieldset{margin-top:32px;}
.clinic-fieldset legend{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); margin-bottom:14px; padding:0;}

/* ---------- Photo / document upload grid ---------- */
.clinic-upload-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px;}
@media (max-width:760px){ .clinic-upload-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .clinic-upload-grid{grid-template-columns:1fr;} }
.clinic-upload-card{border:1.5px dashed var(--silver); border-radius:var(--radius-sm); background:var(--white); padding:18px 14px; text-align:center; cursor:pointer; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:border-color .16s, background .16s;}
.clinic-upload-card:hover{border-color:var(--purple-bright); background:var(--purple-pale);}
.clinic-upload-card.filled{border-style:solid; border-color:var(--green); background:var(--green-pale);}
.clinic-upload-card input{display:none;}
.clinic-upload-card img{max-height:72px; border-radius:8px; object-fit:cover; margin-bottom:6px;}
.clinic-upload-label{font-size:13px; font-weight:700; color:var(--ink);}
.clinic-upload-hint{font-size:11px; color:var(--ink-soft);}
.clinic-upload-replace{font-size:11.5px; color:var(--purple); font-weight:600; margin-top:4px;}

.clinic-doc-list{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
.clinic-doc-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--silver-line); border-radius:var(--radius-sm); background:var(--white); flex-wrap:wrap;}
.clinic-doc-row.filled{border-color:var(--green); background:var(--green-pale);}
.clinic-doc-name{font-size:14px; font-weight:600;}
.clinic-doc-status{font-size:12px; color:var(--ink-soft);}
.clinic-doc-row.filled .clinic-doc-status{color:var(--green); font-weight:600;}
.clinic-doc-row input{display:none;}
.clinic-doc-row label.btn{cursor:pointer;}

/* ---------- Wellness scan tracker ---------- */
.scan-tracker{display:flex; justify-content:space-between; margin:28px 0; position:relative;}
.scan-tracker::before{content:''; position:absolute; top:14px; left:5%; right:5%; height:2px; background:var(--silver-line); z-index:0;}
.scan-tracker-step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;}
.scan-tracker-dot{width:30px; height:30px; border-radius:50%; background:var(--white); border:2px solid var(--silver); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-soft);}
.scan-tracker-step.done .scan-tracker-dot{background:var(--green); border-color:var(--green); color:#fff;}
.scan-tracker-step.current .scan-tracker-dot{background:var(--purple); border-color:var(--purple); color:#fff;}
.scan-tracker-label{font-size:10.5px; text-align:center; color:var(--ink-soft); max-width:80px;}
.scan-tracker-step.current .scan-tracker-label{color:var(--purple); font-weight:700;}
@media (max-width:600px){ .scan-tracker-label{display:none;} }

/* ---------- Recommendation / completion ---------- */
.completion-icon{width:64px; height:64px; border-radius:50%; background:var(--green-pale); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:22px;}
.integration-note{border:1.5px dashed var(--silver); border-radius:var(--radius-sm); padding:20px 22px; margin-top:24px; background:var(--porcelain);}
.integration-note p{font-size:13px; color:var(--ink-soft);}
.integration-note b{color:var(--purple);}

/* ---------- Wizard nav ---------- */
.clinic-nav-row{display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:26px; border-top:1px solid var(--silver-line); gap:16px; flex-wrap:wrap;}

/* ---------- Dashboard shell ---------- */
.dash-shell{display:grid; grid-template-columns:230px 1fr; gap:0; max-width:1100px; margin:0 auto; align-items:start;}
@media (max-width:820px){ .dash-shell{grid-template-columns:1fr;} }
.dash-sidebar{background:var(--white); border-right:1px solid var(--silver-line); padding:28px 18px; position:sticky; top:73px; align-self:start; height:calc(100vh - 73px); overflow-y:auto;}
@media (max-width:820px){ .dash-sidebar{position:static; height:auto; border-right:none; border-bottom:1px solid var(--silver-line); display:flex; overflow-x:auto; padding:14px 18px; gap:6px;} .dash-nav-item{width:auto; flex-shrink:0;} }
.dash-nav-item{display:block; width:100%; text-align:left; background:none; border:none; font-family:inherit; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--ink-soft); white-space:nowrap; margin-bottom:2px; cursor:pointer;}
.dash-nav-item:hover{background:var(--porcelain-deep); color:var(--purple);}
.dash-nav-item.active{background:var(--purple-pale); color:var(--purple);}
.dash-content{padding:32px 36px; max-width:760px;}
@media (max-width:640px){ .dash-content{padding:24px 20px;} }
.dash-panel{display:none;}
.dash-panel.active{display:block; animation:fadeInUp .35s ease;}
.dash-empty{border:1.5px dashed var(--silver); border-radius:var(--radius); padding:36px; text-align:center; color:var(--ink-soft); font-size:14px;}
.dash-empty b{display:block; color:var(--ink); font-size:15.5px; margin-bottom:8px; font-family:'Fraunces', Georgia, serif;}
.dash-status-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--silver-line); font-size:14px;}
.dash-status-row:last-child{border-bottom:none;}
.card-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--purple); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.card-label .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}

@media (prefers-reduced-motion: reduce){ .clinic-step.active, .dash-panel.active{animation:none;} }