/* ============ MyCallDesk — Onboarding & App screens ============ */
:root{ --mcd-blue:#fda12b; --mcd-dark:#0d1b3e; --mcd-navy:#122a5e; --mcd-line:#e6ebf5; --mcd-ok:#1fbf75; }

body.ob-body{ background:#eef3fb; font-family:'Rubik',Arial,sans-serif; color:#28324a; }
.ob-body a{ color:var(--mcd-blue); }

/* ---- Top bar ---- */
.ob-topbar{ background:#fff; border-bottom:1px solid var(--mcd-line); padding:16px 0; position:sticky; top:0; z-index:20; }
.ob-topbar .ob-logo{ font-size:22px; font-weight:700; color:var(--mcd-dark); text-decoration:none; }
.ob-topbar .ob-logo b{ color:var(--mcd-blue); font-weight:700; }
.ob-topbar .ob-exit{ font-size:14px; color:#66708a; text-decoration:none; }
.ob-topbar .ob-exit:hover{ color:var(--mcd-blue); }

/* ---- Wizard progress ---- */
.ob-steps{ list-style:none; margin:0; padding:22px 0 0; display:flex; justify-content:center; flex-wrap:wrap; gap:0; }
.ob-steps li{ position:relative; text-align:center; flex:1; min-width:0; max-width:120px; }
.ob-steps li .dot{ width:34px; height:34px; line-height:34px; border-radius:50%; background:#fff; border:2px solid var(--mcd-line); color:#98a2ba; font-size:14px; font-weight:600; margin:0 auto; position:relative; z-index:2; }
.ob-steps li:before{ content:""; position:absolute; top:17px; left:-50%; width:100%; height:2px; background:var(--mcd-line); z-index:1; }
.ob-steps li:first-child:before{ display:none; }
.ob-steps li .lbl{ display:block; font-size:11px; color:#98a2ba; margin-top:7px; letter-spacing:.2px; }
.ob-steps li.done .dot{ background:var(--mcd-ok); border-color:var(--mcd-ok); color:#fff; }
.ob-steps li.done:before{ background:var(--mcd-ok); }
.ob-steps li.current:before{ background:var(--mcd-ok); }
.ob-steps li.current .dot{ background:var(--mcd-blue); border-color:var(--mcd-blue); color:#fff; box-shadow:0 0 0 5px rgba(253,161,43,.15); }
.ob-steps li.current .lbl{ color:var(--mcd-blue); font-weight:600; }
@media(max-width:767px){ .ob-steps li .lbl{ display:none; } .ob-steps li{ max-width:44px; } }

/* ---- Card ---- */
.ob-main{ padding:40px 0 70px; }
.ob-card{ background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(13,27,62,.08); padding:44px; max-width:640px; margin:0 auto; }
.ob-card.wide{ max-width:820px; }
.ob-card.narrow{ max-width:460px; }
.ob-eyebrow{ color:var(--mcd-blue); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.ob-card h1{ font-size:28px; font-weight:700; color:var(--mcd-dark); margin:6px 0 8px; }
.ob-card .ob-sub{ color:#66708a; font-size:15px; line-height:1.6; margin-bottom:28px; }

/* ---- Form ---- */
.ob-label{ display:block; font-size:13px; font-weight:600; color:#3a465f; margin:0 0 7px; }
.ob-field{ margin-bottom:20px; }
.ob-input, .ob-select, .ob-textarea{ width:100%; border:1px solid var(--mcd-line); border-radius:10px; padding:13px 15px; font-size:15px; color:#28324a; background:#fff; transition:.2s; font-family:inherit; }
.ob-input:focus, .ob-select:focus, .ob-textarea:focus{ border-color:var(--mcd-blue)!important; outline:none; box-shadow:0 0 0 3px rgba(253,161,43,.12); }
.ob-hint{ font-size:12px; color:#98a2ba; margin-top:5px; }
.ob-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .ob-row2{ grid-template-columns:1fr; } }

/* ---- Buttons ---- */
.ob-btn{ display:inline-block; border:none; border-radius:10px; padding:14px 26px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; text-align:center; transition:.2s; font-family:inherit; }
.ob-btn-primary{ background:var(--mcd-blue); color:#fff; }
.ob-btn-primary:hover{ background:#e5891c; color:#fff; }
.ob-btn-block{ width:100%; }
.ob-btn-ghost{ background:#fff; color:#3a465f; border:1px solid var(--mcd-line); }
.ob-btn-ghost:hover{ border-color:var(--mcd-blue); color:var(--mcd-blue); }
.ob-btn-lg{ padding:16px 34px; font-size:16px; }
.ob-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:14px; }
.ob-nav .spacer{ flex:1; }

/* ---- Social buttons ---- */
.ob-social{ display:flex; gap:12px; margin-bottom:22px; }
.ob-social a{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--mcd-line); border-radius:10px; padding:12px; font-size:14px; font-weight:500; color:#3a465f; text-decoration:none; transition:.2s; }
.ob-social a:hover{ border-color:var(--mcd-blue); color:var(--mcd-blue); }
.ob-social i{ font-size:17px; }
.ob-divider{ text-align:center; position:relative; margin:8px 0 22px; color:#98a2ba; font-size:13px; }
.ob-divider:before{ content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--mcd-line); }
.ob-divider span{ background:#fff; padding:0 14px; position:relative; }

/* ---- Checkbox / agree ---- */
.ob-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#66708a; margin-bottom:22px; }
.ob-check input{ margin-top:3px; }

/* ---- OTP ---- */
.ob-otp{ display:flex; gap:12px; justify-content:center; margin:8px 0 26px; }
.ob-otp input{ width:54px; height:62px; text-align:center; font-size:26px; font-weight:600; border:1px solid var(--mcd-line); border-radius:12px; color:var(--mcd-dark); }
.ob-otp input:focus{ border-color:var(--mcd-blue); outline:none; box-shadow:0 0 0 3px rgba(253,161,43,.12); }

/* ---- AI learning checklist ---- */
.ob-learn{ list-style:none; padding:0; margin:26px 0; }
.ob-learn li{ display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid var(--mcd-line); border-radius:12px; margin-bottom:12px; background:#fff; font-size:15px; }
.ob-learn li .ic{ width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:rgba(31,191,117,.12); color:var(--mcd-ok); font-size:14px; flex:none; }
.ob-learn li .ic.spin{ background:rgba(253,161,43,.12); color:var(--mcd-blue); }
.ob-learn li.pending{ opacity:.5; }
.ob-learn li.pending .ic{ background:#eef1f7; color:#98a2ba; }
.ob-progressbar{ height:8px; background:#e9eef7; border-radius:20px; overflow:hidden; margin:4px 0 10px; }
.ob-progressbar span{ display:block; height:100%; background:linear-gradient(90deg,#fda12b,#ffbf6b); border-radius:20px; }

/* ---- Review profile sections ---- */
.ob-section{ border:1px solid var(--mcd-line); border-radius:12px; padding:22px; margin-bottom:18px; }
.ob-section .ob-sec-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ob-section h4{ font-size:16px; font-weight:600; color:var(--mcd-dark); margin:0; }
.ob-section h4 i{ color:var(--mcd-blue); margin-right:8px; }
.ob-edit{ font-size:13px; color:var(--mcd-blue); text-decoration:none; font-weight:500; }
.ob-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ob-tag{ background:rgba(253,161,43,.08); color:#b8710f; padding:6px 14px; border-radius:20px; font-size:13px; }
.ob-kv{ font-size:14px; color:#44506b; line-height:1.9; }
.ob-kv b{ color:var(--mcd-dark); }
.ob-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ob-table td{ padding:8px 6px; border-bottom:1px solid #f0f3f9; color:#44506b; }
.ob-table td:first-child{ font-weight:500; color:var(--mcd-dark); }
.ob-table td:last-child{ text-align:right; color:#66708a; }

/* ---- Toggle rows (capabilities) ---- */
.ob-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--mcd-line); border-radius:12px; margin-bottom:11px; }
.ob-toggle-row .t-label{ font-size:15px; color:#28324a; display:flex; align-items:center; gap:12px; }
.ob-toggle-row .t-label i{ color:var(--mcd-blue); width:20px; text-align:center; }
.ob-switch{ position:relative; width:46px; height:26px; flex:none; }
.ob-switch input{ opacity:0; width:0; height:0; }
.ob-switch .sl{ position:absolute; inset:0; background:#cdd6e6; border-radius:20px; transition:.2s; cursor:pointer; }
.ob-switch .sl:before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.ob-switch input:checked + .sl{ background:var(--mcd-blue); }
.ob-switch input:checked + .sl:before{ transform:translateX(20px); }

/* ---- Selectable option cards (radio) ---- */
.ob-options{ display:grid; gap:12px; }
.ob-options.cols2{ grid-template-columns:1fr 1fr; }
@media(max-width:600px){ .ob-options.cols2{ grid-template-columns:1fr; } }
.ob-opt{ display:block; border:1.5px solid var(--mcd-line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:.15s; position:relative; }
.ob-opt:hover{ border-color:#b9c8e8; }
.ob-opt input{ position:absolute; opacity:0; }
.ob-opt .o-title{ font-size:15px; font-weight:600; color:var(--mcd-dark); display:flex; align-items:center; gap:10px; }
.ob-opt .o-title i{ color:var(--mcd-blue); }
.ob-opt .o-desc{ font-size:13px; color:#66708a; margin-top:5px; }
.ob-opt input:checked ~ .o-title:after{ content:"\f00c"; font-family:FontAwesome; position:absolute; right:16px; top:16px; color:var(--mcd-blue); }
.ob-opt:has(input:checked){ border-color:var(--mcd-blue); background:rgba(253,161,43,.04); box-shadow:0 0 0 3px rgba(253,161,43,.1); }

/* ---- Rules list ---- */
.ob-rule{ display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--mcd-line); border-radius:10px; margin-bottom:10px; font-size:14px; color:#3a465f; }
.ob-rule i.dot-red{ color:#e5484d; }
.ob-rule i.dot-amber{ color:#f5a623; }
.ob-rule .rm{ margin-left:auto; color:#c2cbdc; text-decoration:none; }
.ob-callout{ background:rgba(229,72,77,.06); border:1px solid rgba(229,72,77,.2); border-radius:12px; padding:16px 18px; font-size:14px; color:#a23; }
.ob-callout h5{ color:#c0343a; font-size:14px; margin:0 0 6px; }

/* ---- Greeting / voice preview ---- */
.ob-quote{ background:#f5f8ff; border-left:3px solid var(--mcd-blue); border-radius:0 10px 10px 0; padding:16px 20px; font-style:italic; color:#3a465f; font-size:15px; margin:6px 0 16px; }
.ob-voicebtn{ display:inline-flex; align-items:center; gap:10px; background:rgba(253,161,43,.1); color:var(--mcd-blue); border:none; border-radius:30px; padding:11px 22px; font-weight:600; font-size:14px; cursor:pointer; }

/* ---- Integrations / calendar ---- */
.ob-integrations{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
@media(max-width:600px){ .ob-integrations{ grid-template-columns:1fr; } }
.ob-integration{ display:flex; align-items:center; gap:12px; border:1px solid var(--mcd-line); border-radius:12px; padding:15px 18px; cursor:pointer; font-size:15px; font-weight:500; color:#3a465f; text-decoration:none; transition:.15s; }
.ob-integration:hover{ border-color:var(--mcd-blue); color:var(--mcd-blue); }
.ob-integration i{ font-size:20px; color:var(--mcd-blue); width:24px; text-align:center; }
.ob-connected{ display:inline-flex; align-items:center; gap:8px; background:rgba(31,191,117,.1); color:var(--mcd-ok); padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600; }

/* ---- Phone number choice ---- */
.ob-numbers{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.ob-num{ border:1px solid var(--mcd-line); border-radius:10px; padding:10px 16px; font-size:15px; font-weight:600; color:var(--mcd-dark); letter-spacing:.5px; cursor:pointer; }
.ob-num:hover{ border-color:var(--mcd-blue); color:var(--mcd-blue); }

/* ---- Test AI ---- */
.ob-testgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:700px){ .ob-testgrid{ grid-template-columns:1fr; } }
.ob-testcard{ border:1px solid var(--mcd-line); border-radius:14px; padding:26px; text-align:center; }
.ob-testcard .big-num{ font-size:26px; font-weight:700; color:var(--mcd-dark); letter-spacing:.5px; margin:8px 0 16px; }
.ob-phone-ic{ width:64px; height:64px; line-height:64px; border-radius:50%; background:rgba(253,161,43,.1); color:var(--mcd-blue); font-size:26px; margin:0 auto 8px; }
.ob-checklist{ list-style:none; padding:0; margin:22px 0 0; }
.ob-checklist li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14px; color:#44506b; border-bottom:1px solid #f0f3f9; }
.ob-checklist li i{ color:var(--mcd-ok); }
.ob-feedback{ display:flex; gap:12px; justify-content:center; margin-top:8px; }
.ob-feedback button{ border:1px solid var(--mcd-line); background:#fff; border-radius:10px; padding:12px 24px; font-size:15px; cursor:pointer; color:#3a465f; }
.ob-feedback button:hover{ border-color:var(--mcd-blue); }

/* ---- Success / go live ---- */
.ob-success{ text-align:center; }
.ob-success .burst{ width:96px; height:96px; line-height:96px; border-radius:50%; background:linear-gradient(160deg,#1fbf75,#33d98a); color:#fff; font-size:44px; margin:0 auto 22px; box-shadow:0 12px 30px rgba(31,191,117,.35); }
.ob-bignum{ background:#f5f8ff; border:1px dashed #b9c8e8; border-radius:14px; padding:20px; font-size:30px; font-weight:700; color:var(--mcd-dark); letter-spacing:1px; margin:18px 0; }

/* ---- Chat bubbles reuse (test) ---- */
.ob-chat{ background:#f5f8ff; border-radius:12px; padding:18px; text-align:left; }
.ob-bubble{ padding:11px 15px; border-radius:12px; margin-bottom:10px; max-width:85%; font-size:14px; line-height:1.5; }
.ob-bubble.ai{ background:#fff; border:1px solid var(--mcd-line); color:#28324a; }
.ob-bubble.cust{ background:var(--mcd-blue); color:#fff; margin-left:auto; }
.ob-bubble small{ display:block; font-size:10px; opacity:.65; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }

/* ============ App shell (dashboard / daily brief) ============ */
.ob-app{ display:flex; min-height:100vh; }
.ob-side{ width:250px; background:var(--mcd-dark); color:#c7d2e6; flex:none; padding:22px 0; position:sticky; top:0; height:100vh; }
.ob-side .ob-logo{ color:#fff; font-size:22px; font-weight:700; padding:0 24px 22px; display:block; text-decoration:none; }
.ob-side .ob-logo b{ color:var(--mcd-blue); }
.ob-side nav a{ display:flex; align-items:center; gap:12px; padding:12px 24px; color:#a9b6d0; text-decoration:none; font-size:14.5px; transition:.15s; border-left:3px solid transparent; }
.ob-side nav a i{ width:18px; text-align:center; }
.ob-side nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.ob-side nav a.active{ background:rgba(253,161,43,.16); color:#fff; border-left-color:var(--mcd-blue); }
.ob-content{ flex:1; background:#eef3fb; min-width:0; }
.ob-appbar{ background:#fff; border-bottom:1px solid var(--mcd-line); padding:16px 30px; display:flex; align-items:center; justify-content:space-between; }
.ob-appbar h2{ font-size:20px; margin:0; color:var(--mcd-dark); }
.ob-appbar .badge-live{ background:rgba(31,191,117,.12); color:var(--mcd-ok); font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; }
.ob-appmain{ padding:30px; }
.ob-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:1100px){ .ob-kpis{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .ob-kpis{ grid-template-columns:1fr; } }
.ob-kpi{ background:#fff; border-radius:14px; padding:22px; box-shadow:0 6px 20px rgba(13,27,62,.05); }
.ob-kpi .k-label{ font-size:13px; color:#66708a; }
.ob-kpi .k-val{ font-size:30px; font-weight:700; color:var(--mcd-dark); margin-top:4px; }
.ob-kpi .k-val.blue{ color:var(--mcd-blue); }
.ob-kpi .k-val.green{ color:var(--mcd-ok); }
.ob-panel{ background:#fff; border-radius:14px; padding:26px; box-shadow:0 6px 20px rgba(13,27,62,.05); margin-bottom:22px; }
.ob-panel h3{ font-size:17px; color:var(--mcd-dark); margin:0 0 18px; }
.ob-activity{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f0f3f9; }
.ob-activity:last-child{ border-bottom:none; }
.ob-activity .a-time{ font-size:13px; color:#98a2ba; width:74px; flex:none; }
.ob-activity .a-ic{ width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%; background:rgba(253,161,43,.1); color:var(--mcd-blue); flex:none; }
.ob-activity .a-body{ font-size:14px; color:#44506b; line-height:1.5; }
.ob-activity .a-body b{ color:var(--mcd-dark); }
.ob-brief-item{ display:flex; gap:12px; padding:12px 0; font-size:15px; color:#3a465f; line-height:1.55; border-bottom:1px solid #f0f3f9; }
.ob-brief-item i{ color:var(--mcd-blue); margin-top:3px; }
.ob-action-list{ list-style:none; padding:0; margin:0; }
.ob-action-list li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f3f9; font-size:15px; color:#3a465f; }
.ob-action-list li i{ color:var(--mcd-ok); }
.ob-side-toggle{ display:none; }
@media(max-width:820px){ .ob-side{ display:none; } }

/* ---- Anchor-as-button color fixes (override .ob-body a) ---- */
.ob-body a.ob-btn-primary{ color:#fff; }
.ob-body a.ob-btn-primary:hover{ color:#fff; }
.ob-body a.ob-btn-ghost{ color:#3a465f; }
.ob-body a.ob-btn-ghost:hover{ color:var(--mcd-blue); }
.ob-body a.ob-integration{ color:#3a465f; }
.ob-body a.ob-integration:hover{ color:var(--mcd-blue); }
.ob-body a.ob-num{ color:var(--mcd-dark); }
.ob-body a.ob-num:hover{ color:var(--mcd-blue); }
.ob-body a.ob-logo{ color:var(--mcd-dark); }
.ob-side a.ob-logo{ color:#fff; }

/* Required field marker (same style as MyEduLink) */
.required * { border-left: 5px solid red !important; }

/* Validation error state */
.ob-input.error, .ob-select.error, .ob-textarea.error {
  background: #fff1f1 !important;
  border-color: #dc2626 !important;
}
.field-error { color: #dc2626; font-size: 13px; margin-top: 6px; }