/* ==========================================
   Southbound — Client profile form (js/clientProfileForm.js)
   Used by profile.html (client) and the Client Hub's Profile tab.
========================================== */

.cp-form [hidden], .profile-page [hidden]{ display:none !important; }

.cp-form{ display:flex; flex-direction:column; gap:14px; }

.cp-section{
    padding:20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius, 18px);
}
.cp-section h2{
    margin:0 0 14px;
    font-size:17px;
}

.cp-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}
.cp-field:last-child{ margin-bottom:0; }

.cp-label{
    color:var(--text);
    font-size:14px;
    font-weight:600;
    line-height:1.4;
}
.cp-required{
    margin-left:4px;
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.cp-hint{ color:var(--muted); font-size:12.5px; }

.cp-input{
    width:100%;
    padding:10px 12px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font:15px var(--font-body);
    color-scheme:dark;
}
.cp-input:focus{ outline:none; border-color:var(--primary); }
textarea.cp-input{ resize:vertical; min-height:74px; line-height:1.5; }
.cp-short{ max-width:200px; }

.cp-choice, .cp-days{ display:flex; flex-wrap:wrap; gap:8px; }
.cp-choice-option, .cp-day{ position:relative; cursor:pointer; }
.cp-choice-option input, .cp-day input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.cp-choice-option span, .cp-day span{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-light);
    color:var(--text-secondary);
    font-size:14px;
    font-weight:600;
}
.cp-day span{ min-width:52px; justify-content:center; padding:0 10px; }
.cp-choice-option input:checked + span, .cp-day input:checked + span{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--on-primary);
}
.cp-choice-option input:focus-visible + span, .cp-day input:focus-visible + span{
    box-shadow:0 0 0 2px rgba(201,173,132,.45);
}

.cp-actions{
    position:sticky;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 16px;
    background:rgba(23,41,31,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--border);
    border-radius:16px;
}
@media (max-width:900px){
    /* sit above the bottom tab bar */
    .cp-actions{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* ---- profile.html ---- */

.profile-page{
    max-width:760px;
    margin:0 auto;
}
.profile-intro{
    margin:0 0 18px;
    padding:16px 18px;
    background:rgba(201,173,132,.08);
    border:1px solid rgba(201,173,132,.25);
    border-radius:14px;
    color:var(--text-secondary);
    font-size:14.5px;
    line-height:1.6;
}
.profile-intro strong{ color:var(--text); }

/* Health check on the one-page form: a checkbox per question. */
.cp-health{ display:flex; flex-direction:column; gap:8px; }
.cp-health-row{
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:14px; line-height:1.45;
}
.cp-health-row input{ margin-top:3px; flex-shrink:0; }
.cp-health-row:has(input:checked){ border-color:var(--amber); }

/* ==========================================================
   PROFILE, PREMIUM (redesign step 7, 2026-10-15). The intro is a plain line
   over a hairline, not a tinted box; each question is a hairline section under
   a plain heading; the choices are glass, and the chosen one is lit. Scoped to
   .profile-page; the questions and what they save are unchanged.
   ========================================================== */

.profile-page .eos-today-eyebrow{ display:none; }
.profile-page .eos-today-hero::before{ display:none; }
.profile-page .profile-intro{
    background:none;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    padding:0 0 16px;
    margin:0 0 6px;
    font-size:15px;
}
.profile-page .ig-card{
    background:none;
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
    padding:22px 0 14px;
}
.profile-page .ig-title{ font:650 22px/1.25 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text); }
.profile-page .ig-chip{
    background:linear-gradient(180deg,rgba(236,230,212,.1),rgba(236,230,212,.035));
    border-color:rgba(236,230,212,.14);
    box-shadow:inset 0 1px 0 rgba(255,244,222,.08);
    color:var(--text-secondary);
}
.profile-page .ig-chip.is-on{
    background:linear-gradient(180deg,#E8CFA6,var(--primary));
    border:1px solid rgba(255,244,222,.5);
    color:var(--on-primary);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}