/* Chikitsa Sahayak — Frontend Styles
   Design tokens matched to the site's homepage (blue/navy/mint brand). */
:root {
	--cx-primary: #2F6FED;
	--cx-primary-dark: #1E54C8;
	--cx-navy: #0B1220;
	--cx-mint: #34D399;
	--cx-mint-bg: #ECFDF5;
	--cx-bg: #F5F8FC;
	--cx-card: #FFFFFF;
	--cx-border: #E5EAF2;
	--cx-text: #101828;
	--cx-muted: #667085;
	--cx-danger: #EF4444;
	--cx-danger-bg: #FEE2E2;
	--cx-warning: #D97706;
	--cx-warning-bg: #FEF3C7;
	--cx-badge-bg: #EFF6FF;
	--cx-radius: 16px;
	--cx-radius-pill: 999px;
	--cx-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cx-auth-wrap, .cx-dash { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--cx-text); }

/* ---------- Auth ---------- */
.cx-auth-wrap { display: flex; justify-content: center; padding: 48px 16px; background: var(--cx-bg); }
.cx-auth-card { width: 100%; max-width: 420px; background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow); padding: 32px; }
.cx-auth-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: var(--cx-bg); border-radius: var(--cx-radius-pill); padding: 4px; }
.cx-tab-btn { flex: 1; padding: 10px; border: none; background: transparent; border-radius: var(--cx-radius-pill); cursor: pointer; font-weight: 600; color: var(--cx-muted); }
.cx-tab-btn.active { background: var(--cx-primary); color: #fff; }
.cx-tab-panel { display: none; }
.cx-tab-panel.active { display: block; }
.cx-field { display: block; margin-bottom: 16px; }
.cx-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--cx-muted); }
.cx-field input, .cx-field select { width: 100%; padding: 11px 14px; border: 1px solid var(--cx-border); border-radius: 10px; font-size: 14px; box-sizing: border-box; }
.cx-field input:focus, .cx-field select:focus { outline: none; border-color: var(--cx-primary); box-shadow: 0 0 0 3px rgba(47,111,237,0.14); }
.cx-alert { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; }
.cx-alert-error { background: var(--cx-danger-bg); color: var(--cx-danger); border: 1px solid #FCA5A5; }

/* ---------- Badges (matches homepage "ONE PLATFORM · COMPLETE CARE" pill style) ---------- */
.cx-eyebrow, .cx-role-badge { display: inline-block; background: var(--cx-badge-bg); color: var(--cx-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--cx-radius-pill); }

/* ---------- Buttons — pill-shaped to match site CTAs ---------- */
.cx-btn { display: inline-block; padding: 12px 22px; border-radius: var(--cx-radius-pill); border: none; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.cx-btn-primary { background: var(--cx-primary); color: #fff; width: 100%; text-align: center; }
.cx-btn-primary:hover { background: var(--cx-primary-dark); }
.cx-btn-ghost { background: #fff; color: var(--cx-text); border: 1px solid var(--cx-border); }
.cx-btn-sm { padding: 7px 16px; font-size: 12px; width: auto; }

/* ---------- Dashboard layout ---------- */
.cx-dash { display: flex; gap: 24px; max-width: 1100px; margin: 0 auto; padding: 32px 16px; background: var(--cx-bg); }
.cx-sidebar { width: 240px; flex-shrink: 0; }
.cx-user-card { display: flex; align-items: center; gap: 12px; background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--cx-shadow); }
.cx-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cx-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.cx-user-card .cx-role-badge { margin-top: 4px; }
.cx-nav { background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); overflow: hidden; box-shadow: var(--cx-shadow); }
.cx-nav a { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; color: var(--cx-text); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--cx-border); }
.cx-nav a:last-child { border-bottom: none; }
.cx-nav a.active, .cx-nav a:hover { background: var(--cx-badge-bg); color: var(--cx-primary); }
.cx-nav a.cx-logout { color: var(--cx-danger); }
.cx-badge { background: var(--cx-danger); color: #fff; font-size: 11px; border-radius: var(--cx-radius-pill); padding: 1px 8px; }

.cx-main { flex: 1; min-width: 0; }
.cx-panel { background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--cx-shadow); }
.cx-panel h2 { margin-top: 0; font-size: 18px; }
.cx-empty, .cx-muted { color: var(--cx-muted); font-size: 14px; }

.cx-table-wrap { overflow-x: auto; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-table th { text-align: left; padding: 10px 12px; color: var(--cx-muted); font-weight: 600; border-bottom: 1px solid var(--cx-border); }
.cx-table td { padding: 12px; border-bottom: 1px solid var(--cx-border); }

.cx-status { padding: 3px 10px; border-radius: var(--cx-radius-pill); font-size: 12px; font-weight: 600; }
.cx-status-pending { background: var(--cx-warning-bg); color: var(--cx-warning); }
.cx-status-confirmed, .cx-status-in_progress { background: var(--cx-badge-bg); color: var(--cx-primary); }
.cx-status-completed { background: var(--cx-mint-bg); color: #047857; }
.cx-status-cancelled, .cx-status-refunded { background: var(--cx-danger-bg); color: var(--cx-danger); }

.cx-wallet-balance { font-size: 32px; font-weight: 700; color: var(--cx-primary); }

.cx-favorites-list, .cx-notif-list { list-style: none; padding: 0; margin: 0; }
.cx-favorites-list li { padding: 10px 0; border-bottom: 1px solid var(--cx-border); }
.cx-favorites-list a { color: var(--cx-primary); text-decoration: none; font-weight: 600; }
.cx-notif-list li { padding: 12px 0; border-bottom: 1px solid var(--cx-border); }
.cx-notif-list li.cx-unread { background: var(--cx-badge-bg); border-radius: 10px; padding: 12px; }
.cx-notif-list p { margin: 4px 0; color: var(--cx-muted); font-size: 13px; }
.cx-notif-list time { font-size: 11px; color: var(--cx-muted); }

@media (max-width: 720px) {
	.cx-dash { flex-direction: column; }
	.cx-sidebar { width: 100%; }
}

/* ---------- Auth — split branding layout ---------- */
.cx-auth-wrap { display: block; padding: 0; background: var(--cx-bg); }
.cx-auth-shell { display: flex; min-height: 100vh; max-width: 1100px; margin: 0 auto; }
.cx-auth-brand { flex: 1; background: linear-gradient(160deg, var(--cx-navy), #142238); position: relative; overflow: hidden; display: none; }
.cx-auth-brand-inner { position: relative; z-index: 2; padding: 64px 48px; color: #fff; max-width: 460px; }
.cx-eyebrow-on-dark { background: rgba(255,255,255,0.1); color: #cfe0ff; }
.cx-auth-brand h1 { font-size: 34px; line-height: 1.2; margin: 20px 0 16px; font-weight: 800; }
.cx-auth-brand h1 span { color: #7DA6FF; }
.cx-auth-brand p { color: #A8B3C7; font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.cx-brand-points { list-style: none; margin: 0; padding: 0; }
.cx-brand-points li { display: flex; align-items: center; gap: 10px; color: #E5EAF2; font-size: 14px; margin-bottom: 12px; }
.cx-brand-points li svg { color: var(--cx-mint); flex-shrink: 0; }
.cx-brand-glow { position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(52,211,153,0.25), transparent 70%); display: flex; align-items: center; justify-content: center; color: rgba(125,166,255,0.35); }
.cx-brand-glow svg { width: 90px; height: 90px; }

.cx-auth-wrap .cx-auth-card { flex: 1; max-width: 460px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; box-shadow: none; border: none; border-radius: 0; padding: 48px; }

@media (min-width: 900px) {
	.cx-auth-brand { display: block; }
	.cx-auth-wrap .cx-auth-card { border-left: 1px solid var(--cx-border); }
}

/* ---------- Role picker (register form) ---------- */
.cx-role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.cx-role-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--cx-border); border-radius: 12px; cursor: pointer; font-size: 12px; color: var(--cx-muted); text-align: center; }
.cx-role-option input { position: absolute; opacity: 0; }
.cx-role-option svg { color: var(--cx-muted); }
.cx-role-option:has(input:checked) { border-color: var(--cx-primary); background: var(--cx-badge-bg); color: var(--cx-primary); }
.cx-role-option:has(input:checked) svg { color: var(--cx-primary); }

/* ---------- Stat cards (top of dashboard) ---------- */
.cx-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cx-stat-card { background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--cx-shadow); }
.cx-stat-card strong { display: block; font-size: 20px; line-height: 1.2; }
.cx-stat-card small { color: var(--cx-muted); font-size: 12px; }
.cx-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cx-stat-blue { background: var(--cx-badge-bg); color: var(--cx-primary); }
.cx-stat-amber { background: var(--cx-warning-bg); color: var(--cx-warning); }
.cx-stat-mint { background: var(--cx-mint-bg); color: #047857; }
.cx-stat-rose { background: var(--cx-danger-bg); color: var(--cx-danger); }

/* ---------- Sidebar nav icons ---------- */
.cx-nav a { gap: 10px; }
.cx-nav a svg { flex-shrink: 0; opacity: 0.8; }
.cx-nav a span { flex: 1; }
.cx-nav a.active svg, .cx-nav a:hover svg { opacity: 1; }

/* ---------- Booking slot picker (single provider page) ---------- */
.cx-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 12px; }
.cx-slot-btn { padding: 9px 6px; border: 1px solid var(--cx-border); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-slot-btn:hover:not(:disabled) { border-color: var(--cx-primary); color: var(--cx-primary); }
.cx-slot-btn.is-selected { background: var(--cx-primary); border-color: var(--cx-primary); color: #fff; }
.cx-slot-btn.is-taken, .cx-slot-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* ---------- Full-width plugin pages (homepage, provider pages) ---------- */
body.cx-fullwidth-page { margin: 0; }