/* ClinicTell v1.8.0
   All scoped with .ct- prefix to prevent theme conflicts.
   Design: Clean corporate healthcare SaaS
   Full UI audit + document verification + star ratings + mobile fixes */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ──────────────────────────────────────────── */
.ct-wrap {
    --ct-primary:        #1a6fc4;
    --ct-primary-hover:  #155a9e;
    --ct-primary-light:  #e8f1fa;
    --ct-primary-border: #b3d1ee;
    --ct-text:           #1e293b;
    --ct-text-secondary: #64748b;
    --ct-text-muted:     #94a3b8;
    --ct-border:         #e2e8f0;
    --ct-border-dark:    #cbd5e1;
    --ct-bg:             #ffffff;
    --ct-bg-subtle:      #f8fafc;
    --ct-bg-muted:       #f1f5f9;
    --ct-success:        #16a34a;
    --ct-success-hover:  #15803d;
    --ct-success-light:  #dcfce7;
    --ct-success-border: #bbf7d0;
    --ct-warning:        #ca8a04;
    --ct-warning-hover:  #a16207;
    --ct-warning-light:  #fef9c3;
    --ct-warning-border: #fef08a;
    --ct-danger:         #dc2626;
    --ct-danger-hover:   #b91c1c;
    --ct-danger-light:   #fee2e2;
    --ct-danger-border:  #fecaca;
    --ct-radius:         4px;
    --ct-radius-md:      6px;
    --ct-radius-lg:      8px;
    --ct-shadow-sm:      0 1px 2px rgba(0,0,0,.05);
    --ct-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --ct-shadow-md:      0 4px 12px rgba(0,0,0,.08);
    --ct-shadow-lg:      0 10px 30px rgba(0,0,0,.12);
    --ct-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ct-transition:     150ms ease;
}

/* ─────────────────────────────────────────────
   RESET & BASE
   ──────────────────────────────────────────── */
.ct-wrap {
    font-family: var(--ct-font);
    color: var(--ct-text);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    /* FIX: Use clamp for responsive horizontal padding — comfortable on desktop, reasonable on mobile */
    padding: 24px clamp(12px, 4vw, 24px);
    box-sizing: border-box;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ct-wrap *, .ct-wrap *::before, .ct-wrap *::after { box-sizing: border-box; }
.ct-wrap h1, .ct-wrap h2, .ct-wrap h3 { margin: 0 0 16px; color: var(--ct-text); font-weight: 600; line-height: 1.3; }
.ct-wrap h1 { font-size: 24px; }
.ct-wrap h2 { font-size: 20px; }
.ct-wrap h3 { font-size: 16px; }
.ct-wrap p { margin: 0 0 12px; }
.ct-wrap a:not(.ct-btn) { color: var(--ct-primary); text-decoration: none; transition: color var(--ct-transition); }
.ct-wrap a:not(.ct-btn):hover { color: var(--ct-primary-hover); text-decoration: underline; }
.ct-wrap a.ct-btn { color: inherit; text-decoration: none; }
.ct-wrap a.ct-btn:hover { text-decoration: none; }

/* ─────────────────────────────────────────────
   SECTION HEADING (used in verification docs)
   ──────────────────────────────────────────── */
.ct-section-heading {
    font-size: 15px;
    font-weight: 600;
    color: var(--ct-text);
    margin: 24px 0 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ct-border);
}

/* ─────────────────────────────────────────────
   FORM ELEMENTS
   ──────────────────────────────────────────── */
.ct-input, .ct-select, .ct-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ct-border-dark);
    border-radius: var(--ct-radius);
    font-size: 14px;
    font-family: var(--ct-font);
    color: var(--ct-text);
    background: var(--ct-bg);
    transition: border-color var(--ct-transition), box-shadow var(--ct-transition);
    line-height: 1.5;
}
.ct-input:hover, .ct-select:hover, .ct-textarea:hover { border-color: var(--ct-primary-border); }
.ct-input:focus, .ct-select:focus, .ct-textarea:focus {
    outline: none;
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(26,111,196,.12);
}
.ct-input::placeholder { color: var(--ct-text-muted); }
.ct-textarea { resize: vertical; min-height: 80px; }

.ct-form-group { margin-bottom: 18px; }
/* FIX: label display:block ensures it never wraps oddly next to its input */
.ct-form-group > label:first-child {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ct-text);
    letter-spacing: .01em;
}

/* FIX: Two-column row — collapses to single column on mobile via @media below */
.ct-form-row { display: flex; gap: 16px; }
.ct-form-row > .ct-form-group { flex: 1; min-width: 0; }

.ct-form-narrow { max-width: 420px; }
.ct-required { color: var(--ct-danger); }
.ct-help-text { font-size: 12px; color: var(--ct-text-secondary); margin-top: 5px; line-height: 1.4; }

.ct-password-wrap { position: relative; }
.ct-password-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px;
    line-height: 1; color: var(--ct-text-muted); transition: color var(--ct-transition);
}
.ct-password-toggle:hover { color: var(--ct-text-secondary); }

/* ─────────────────────────────────────────────
   CHECKBOXES & RADIOS
   FIX: flex layout keeps input and label text on same line always
   ──────────────────────────────────────────── */
.ct-consent-group { margin-top: 14px; }

.ct-checkbox-label {
    display: flex;
    align-items: flex-start;   /* text wraps below input's top, not mid-air */
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    padding: 4px 0;
    font-weight: 400;          /* override any inherited bold from label styles */
}
.ct-checkbox-label input[type="checkbox"],
.ct-checkbox-label input[type="radio"] {
    /* flex-shrink:0 prevents the input shrinking to nothing on narrow screens */
    flex-shrink: 0;
    margin-top: 3px;           /* visually centres with first line of text */
    width: 16px;
    height: 16px;
    accent-color: var(--ct-primary);
    cursor: pointer;
}
/* FIX: span inside checkbox label should never overflow */
.ct-checkbox-label span {
    flex: 1;
    min-width: 0;
}

/* FIX: Checkbox grid — tighter columns on small screens */
.ct-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 12px;
}

.ct-radio-group { display: flex; flex-wrap: wrap; gap: 16px; }
.ct-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    font-weight: 400;
}
.ct-radio-label input[type="radio"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ct-primary);
    cursor: pointer;
}

/* ─────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────── */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: var(--ct-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ct-font);
    cursor: pointer;
    transition: all var(--ct-transition);
    text-decoration: none;
    line-height: 1.5;
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
}
.ct-btn:hover { text-decoration: none; }
.ct-btn:active { transform: translateY(0.5px); }
.ct-btn:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: 2px; }

.ct-btn-primary   { background: var(--ct-primary);   color: #fff; border-color: var(--ct-primary); }
.ct-btn-primary:hover { background: var(--ct-primary-hover); border-color: var(--ct-primary-hover); color: #fff; box-shadow: var(--ct-shadow-sm); }

.ct-btn-outline   { background: var(--ct-bg); color: var(--ct-text); border: 1px solid var(--ct-border-dark); }
.ct-btn-outline:hover { background: var(--ct-bg-subtle); border-color: var(--ct-border-dark); color: var(--ct-text); box-shadow: var(--ct-shadow-sm); }

.ct-btn-text      { background: none; color: var(--ct-primary); padding: 9px 12px; border: none; }
.ct-btn-text:hover { background: var(--ct-primary-light); color: var(--ct-primary); text-decoration: none; }

.ct-btn-danger    { background: var(--ct-danger);  color: #fff; border-color: var(--ct-danger); }
.ct-btn-danger:hover { background: var(--ct-danger-hover); border-color: var(--ct-danger-hover); color: #fff; }

.ct-btn-success   { background: var(--ct-success); color: #fff; border-color: var(--ct-success); }
.ct-btn-success:hover { background: var(--ct-success-hover); border-color: var(--ct-success-hover); color: #fff; }

.ct-btn-warning   { background: #d97706; color: #fff; border-color: #d97706; }
.ct-btn-warning:hover { background: var(--ct-warning-hover); border-color: var(--ct-warning-hover); color: #fff; }

.ct-btn-block     { display: flex; width: 100%; }
.ct-btn-sm        { padding: 6px 14px; font-size: 13px; }
.ct-btn:disabled  { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ct-btn + .ct-btn { margin-left: 6px; }

.ct-form-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   ALERTS
   ──────────────────────────────────────────── */
.ct-alert {
    padding: 12px 16px;
    border-radius: var(--ct-radius);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.ct-alert-info    { background: var(--ct-primary-light); color: #1e40af; border-color: var(--ct-primary-border); }
.ct-alert-success { background: var(--ct-success-light); color: #166534; border-color: var(--ct-success-border); }
.ct-alert-warning { background: var(--ct-warning-light); color: #854d0e; border-color: var(--ct-warning-border); }
.ct-alert-danger  { background: var(--ct-danger-light);  color: #991b1b; border-color: var(--ct-danger-border); }

/* ─────────────────────────────────────────────
   TABS
   ──────────────────────────────────────────── */
.ct-tabs { display: flex; border-bottom: 1px solid var(--ct-border); margin-bottom: 28px; gap: 0; }
.ct-tab {
    padding: 12px 28px;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 14px; font-weight: 600; font-family: var(--ct-font);
    color: var(--ct-text-muted);
    transition: all var(--ct-transition);
    white-space: nowrap;
}
.ct-tab:hover { color: var(--ct-text-secondary); background: var(--ct-bg-subtle); }
.ct-tab-active, .ct-tab-active:hover { color: var(--ct-primary); border-bottom-color: var(--ct-primary); background: none; }
.ct-tab:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: -2px; }
.ct-tab-panel { display: none; }
.ct-tab-panel-active { display: block; }

/* ─────────────────────────────────────────────
   DASHBOARD & ADMIN NAV
   ──────────────────────────────────────────── */
.ct-dash-nav, .ct-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--ct-border);
    margin-bottom: 28px;
}
.ct-dash-tab, .ct-admin-tab {
    padding: 10px 20px;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: var(--ct-font);
    color: var(--ct-text-muted);
    transition: all var(--ct-transition);
    white-space: nowrap;
}
.ct-dash-tab:hover, .ct-admin-tab:hover { color: var(--ct-text-secondary); background: var(--ct-bg-subtle); }
.ct-dash-tab-active, .ct-dash-tab-active:hover,
.ct-admin-tab-active, .ct-admin-tab-active:hover {
    color: var(--ct-primary); border-bottom-color: var(--ct-primary); background: none;
}
.ct-dash-tab:focus-visible, .ct-admin-tab:focus-visible { outline: 2px solid var(--ct-primary); outline-offset: -2px; }
.ct-dash-section, .ct-admin-section { display: none; }
.ct-dash-section-active, .ct-admin-section-active { display: block; }

/* ─────────────────────────────────────────────
   METRIC CARDS
   ──────────────────────────────────────────── */
.ct-dash-cards, .ct-metrics-grid, .ct-admin-metrics, .ct-overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ct-card { background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); padding: 20px; box-shadow: var(--ct-shadow-sm); }
.ct-card h3 { font-size: 11px; text-transform: uppercase; color: var(--ct-text-muted); margin-bottom: 8px; letter-spacing: .6px; font-weight: 600; }
.ct-card .ct-card-value { font-size: 28px; font-weight: 700; color: var(--ct-text); }

/* ─────────────────────────────────────────────
   STATUS BANNERS
   ──────────────────────────────────────────── */
.ct-status-banner { padding: 12px 16px; border-radius: var(--ct-radius); margin-bottom: 20px; font-weight: 600; font-size: 13px; }
.ct-status-APPROVED  { background: var(--ct-success-light); color: #166534; border: 1px solid var(--ct-success-border); }
.ct-status-PENDING   { background: var(--ct-warning-light); color: #854d0e; border: 1px solid var(--ct-warning-border); }
.ct-status-REJECTED, .ct-status-SUSPENDED { background: var(--ct-danger-light); color: #991b1b; border: 1px solid var(--ct-danger-border); }

/* ─────────────────────────────────────────────
   FILTER PANEL
   ──────────────────────────────────────────── */
.ct-filter-panel {
    background: var(--ct-bg-subtle); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md); padding: 16px; margin-bottom: 20px;
}
.ct-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ct-filter-keyword { flex: 1; min-width: 160px; }
.ct-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--ct-border);
}
.ct-filter-actions { text-align: right; margin-top: 12px; }
.ct-filter-group { margin-bottom: 4px; }
.ct-filter-toggle-group { margin-top: 8px; }

/* ─────────────────────────────────────────────
   CLINIC LISTING CARDS
   ──────────────────────────────────────────── */
.ct-clinic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ct-clinic-card {
    background: var(--ct-bg); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md); padding: 20px;
    transition: border-color var(--ct-transition), box-shadow var(--ct-transition);
    position: relative; display: flex; flex-direction: column;
}
.ct-clinic-card:hover { border-color: var(--ct-border-dark); box-shadow: var(--ct-shadow-md); }
.ct-clinic-card.ct-card-featured { border-color: #e6b800; box-shadow: 0 0 0 1px rgba(230,184,0,.2); }

.ct-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.ct-card-logo {
    width: 52px; height: 52px;
    border-radius: var(--ct-radius-md); object-fit: cover;
    background: var(--ct-bg-muted); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px; color: var(--ct-text-muted); overflow: hidden;
}
.ct-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.ct-card-info { flex: 1; min-width: 0; }
.ct-card-title { font-size: 15px; font-weight: 700; color: var(--ct-text); margin-bottom: 2px; }
.ct-card-category { font-size: 12px; color: var(--ct-text-secondary); }
.ct-card-location { font-size: 13px; color: var(--ct-text-secondary); margin-bottom: 8px; }

.ct-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ct-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: var(--ct-radius);
    font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
}
.ct-badge-verified  { background: var(--ct-primary-light); color: var(--ct-primary); }
.ct-badge-featured  { background: var(--ct-warning-light); color: var(--ct-warning); }
.ct-badge-patients.ct-badge-yes      { background: var(--ct-success-light); color: #166534; }
.ct-badge-patients.ct-badge-waitlist { background: var(--ct-warning-light); color: #854d0e; }
.ct-badge-patients.ct-badge-no       { background: var(--ct-danger-light);  color: #991b1b; }
.ct-badge-telehealth { background: #ecfdf5; color: #047857; }

/* ─────────────────────────────────────────────
   STAR RATINGS
   ──────────────────────────────────────────── */
.ct-card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 13px;
}
.ct-stars { display: inline-flex; gap: 1px; line-height: 1; }
.ct-star { font-size: 15px; }
.ct-star-full  { color: #f59e0b; }
.ct-star-half  { color: #f59e0b; opacity: 0.6; }
.ct-star-empty { color: #d1d5db; }
.ct-rating-value { font-weight: 700; color: var(--ct-text); font-size: 13px; }
.ct-rating-count { color: var(--ct-text-muted); font-size: 12px; }

.ct-card-langs { font-size: 12px; color: var(--ct-text-muted); margin-bottom: 8px; }
.ct-card-desc  { font-size: 13px; color: var(--ct-text-secondary); margin-bottom: 12px; line-height: 1.5; flex: 1; }
.ct-card-footer {
    display: flex; gap: 10px; margin-top: auto;
    padding-top: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--ct-border);
}

.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-tag  { background: var(--ct-bg-muted); color: var(--ct-text-secondary); padding: 3px 10px; border-radius: var(--ct-radius); font-size: 12px; font-weight: 500; }

/* ─────────────────────────────────────────────
   PAGINATION
   ──────────────────────────────────────────── */
.ct-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 28px; flex-wrap: wrap; }
.ct-pagination button,
.ct-clinic-leads-page,
.ct-admin-clinics-page,
.ct-admin-leads-page,
.ct-admin-audit-page {
    padding: 7px 13px; border: 1px solid var(--ct-border-dark); background: var(--ct-bg);
    border-radius: var(--ct-radius); cursor: pointer; font-size: 13px; font-family: var(--ct-font);
    color: var(--ct-text); transition: all var(--ct-transition);
    display: inline-flex; align-items: center; justify-content: center; line-height: 1.4;
}
.ct-pagination button:hover,
.ct-clinic-leads-page:hover,
.ct-admin-clinics-page:hover,
.ct-admin-leads-page:hover,
.ct-admin-audit-page:hover { background: var(--ct-bg-muted); border-color: var(--ct-border-dark); }
.ct-pagination .ct-page-active,
.ct-clinic-leads-page.ct-page-active,
.ct-admin-clinics-page.ct-page-active,
.ct-admin-leads-page.ct-page-active,
.ct-admin-audit-page.ct-page-active { background: var(--ct-primary); color: #fff; border-color: var(--ct-primary); }
.ct-results-info { font-size: 13px; color: var(--ct-text-secondary); margin-bottom: 12px; }

/* ─────────────────────────────────────────────
   MODAL
   ──────────────────────────────────────────── */
.ct-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center;
    z-index: 999999; padding: 20px; backdrop-filter: blur(2px);
}
.ct-modal {
    background: var(--ct-bg); border-radius: var(--ct-radius-lg);
    padding: 28px; max-width: 560px; width: 100%; max-height: 90vh;
    overflow-y: auto; position: relative; box-shadow: var(--ct-shadow-lg);
}
.ct-modal-lg { max-width: 900px; }
.ct-modal-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--ct-text-muted); line-height: 1; padding: 4px;
    transition: color var(--ct-transition), background var(--ct-transition);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--ct-radius);
}
.ct-modal-close:hover { color: var(--ct-text); background: var(--ct-bg-muted); }
.ct-modal h2 { margin-bottom: 8px; font-size: 18px; }
.ct-modal-subtitle { font-size: 13px; color: var(--ct-text-secondary); margin-bottom: 16px; }
.ct-modal .ct-btn + .ct-btn { margin-left: 0; }
.ct-modal-actions, .ct-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ct-lead-disclosure {
    background: var(--ct-warning-light); border: 1px solid var(--ct-warning-border);
    border-radius: var(--ct-radius); padding: 10px 14px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.5;
}

/* ─────────────────────────────────────────────
   DOCUMENT UPLOAD (Registration form)
   ──────────────────────────────────────────── */
.ct-verification-docs-section {
    margin-top: 8px;
    background: var(--ct-bg-subtle);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    padding: 20px;
}
.ct-docs-intro { margin-bottom: 16px; }

.ct-doc-upload-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
/* Style the native file input cleanly */
.ct-doc-file-input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-family: var(--ct-font);
    color: var(--ct-text);
    cursor: pointer;
    /* FIX: Prevent overflow on narrow screens */
    max-width: 100%;
}
.ct-doc-upload-status { font-size: 13px; }

/* Status indicator styles shared between registration and admin */
.ct-doc-status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 3px 0; }
.ct-doc-status-ok       { color: var(--ct-success); font-weight: 600; }
.ct-doc-status-error    { color: var(--ct-danger);  font-weight: 600; }
.ct-doc-status-uploading { color: var(--ct-text-secondary); }

/* Inline spinner for doc upload progress */
.ct-spinner-inline {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--ct-border); border-top-color: var(--ct-primary);
    border-radius: 50%; animation: ct-spin .7s linear infinite;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────
   ADMIN — VERIFICATION DOCUMENTS PANEL
   ──────────────────────────────────────────── */
.ct-verification-docs-admin {
    background: var(--ct-bg-subtle);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.ct-admin-doc-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ct-border);
}
.ct-admin-doc-row:last-child { border-bottom: none; padding-bottom: 0; }
.ct-admin-doc-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ct-text);
    min-width: 220px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SUCCESS & MESSAGES
   ──────────────────────────────────────────── */
.ct-success-message { text-align: center; padding: 40px 20px; }
.ct-success-icon { font-size: 48px; color: var(--ct-success); margin-bottom: 16px; }
.ct-form-message {
    padding: 10px 14px; border-radius: var(--ct-radius);
    margin-top: 14px; font-size: 13px; line-height: 1.5;
}
.ct-form-message.ct-msg-error   { background: var(--ct-danger-light);  color: #991b1b; border: 1px solid var(--ct-danger-border); }
.ct-form-message.ct-msg-success { background: var(--ct-success-light); color: #166534; border: 1px solid var(--ct-success-border); }

/* ─────────────────────────────────────────────
   LOADING
   ──────────────────────────────────────────── */
.ct-loading { text-align: center; padding: 40px 20px; }
.ct-spinner {
    display: inline-block; width: 32px; height: 32px;
    border: 3px solid var(--ct-border); border-top-color: var(--ct-primary);
    border-radius: 50%; animation: ct-spin .7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────
   PROGRESS BAR
   ──────────────────────────────────────────── */
.ct-progress-bar { height: 4px; background: var(--ct-border); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.ct-progress-fill { height: 100%; background: var(--ct-primary); border-radius: 2px; transition: width .3s ease; }
.ct-step-indicator { font-size: 13px; color: var(--ct-text-secondary); margin-bottom: 24px; }
.ct-step { padding: 4px 0; }

/* ─────────────────────────────────────────────
   STEP NAV
   ──────────────────────────────────────────── */
.ct-step-nav {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ct-border); flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   PLAN CARDS
   ──────────────────────────────────────────── */
.ct-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.ct-plan-card {
    background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md);
    padding: 24px 20px; text-align: center; transition: all var(--ct-transition);
    position: relative; display: flex; flex-direction: column; align-items: center;
}
.ct-plan-card:hover { border-color: var(--ct-primary-border); box-shadow: var(--ct-shadow); }
.ct-plan-featured { border-color: #e6b800; border-width: 2px; }
.ct-plan-badge {
    position: absolute; top: -1px; right: 16px;
    background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 0 0 var(--ct-radius) var(--ct-radius); letter-spacing: .02em;
}
.ct-plan-price { font-size: 28px; font-weight: 700; color: var(--ct-text); margin: 10px 0; }
.ct-plan-price small { font-size: 13px; color: var(--ct-text-muted); font-weight: 500; }
.ct-plan-duration { color: var(--ct-text-secondary); font-size: 14px; }
.ct-plan-desc { font-size: 13px; color: var(--ct-text-secondary); margin: 10px 0 14px; line-height: 1.5; }
.ct-plan-select { justify-content: center; }
.ct-plan-card .ct-btn, .ct-plan-card .ct-plan-select, .ct-renew-btn { margin-top: auto; }

/* ─────────────────────────────────────────────
   TABLES
   ──────────────────────────────────────────── */
.ct-table-wrap { overflow-x: auto; border-radius: var(--ct-radius-md); border: 1px solid var(--ct-border); }
.ct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-table th, .ct-table td { padding: 10px 14px; border-bottom: 1px solid var(--ct-border); text-align: left; vertical-align: middle; }
.ct-table th {
    background: var(--ct-bg-subtle); font-weight: 600; color: var(--ct-text-secondary);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0;
}
.ct-table tr:last-child td { border-bottom: none; }
.ct-table tr:hover td { background: var(--ct-bg-subtle); }
.ct-table td .ct-btn { margin-left: 0; margin-bottom: 4px; }
.ct-table td .ct-btn + .ct-btn { margin-left: 4px; }

/* ─────────────────────────────────────────────
   TOOLBARS
   ──────────────────────────────────────────── */
.ct-admin-toolbar, .ct-leads-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   CLINIC PROFILE PAGE
   ──────────────────────────────────────────── */
.ct-profile-wrap { max-width: 1000px; }
.ct-profile-header {
    display: flex; gap: 24px; align-items: flex-start;
    padding-bottom: 24px; border-bottom: 1px solid var(--ct-border); margin-bottom: 24px;
}
.ct-profile-logo {
    width: 96px; height: 96px; border-radius: var(--ct-radius-lg); overflow: hidden;
    background: var(--ct-bg-muted); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ct-profile-logo img { width: 100%; height: 100%; object-fit: cover; }
.ct-logo-placeholder { font-size: 30px; font-weight: 700; color: var(--ct-text-muted); }
.ct-profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ct-profile-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ct-profile-body { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.ct-profile-main { min-width: 0; }
.ct-profile-section { margin-bottom: 28px; }
.ct-profile-section h2 { font-size: 15px; border-bottom: 1px solid var(--ct-border); padding-bottom: 10px; margin-bottom: 16px; }
.ct-profile-info { margin-bottom: 20px; }
.ct-profile-form-container { margin-top: 8px; }

/* ─────────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────────── */
.ct-sidebar-card {
    background: var(--ct-bg-subtle); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md); padding: 18px; margin-bottom: 16px;
}
.ct-sidebar-card h3 { font-size: 13px; margin-bottom: 12px; }

/* ─────────────────────────────────────────────
   HOURS OF OPERATION
   FIX: flex-wrap on small screens so times don't overflow
   ──────────────────────────────────────────── */
.ct-hours-display { display: grid; gap: 4px; }
.ct-hours-item { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.ct-hours-grid { display: grid; gap: 10px; }
.ct-hours-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;      /* FIX: wraps to next line on narrow screens */
}
/* FIX: Day label takes fixed width but wraps gracefully */
.ct-day-label {
    width: 90px; font-weight: 600; font-size: 13px;
    flex-shrink: 0; color: var(--ct-text);
}
/* FIX: Time inputs have explicit width, won't grow to fill all space */
.ct-time-input { width: 110px !important; flex: none; }
/* FIX: Closed checkbox in hours row — label stays inline */
.ct-hours-row .ct-checkbox-label {
    padding: 0;
    font-size: 13px;
    gap: 6px;
}

/* ─────────────────────────────────────────────
   AUTH BOXES
   ──────────────────────────────────────────── */
.ct-demo-banner { text-align: center; font-weight: 700; font-size: 14px; background: #f59e0b; color: #fff; border: none; border-radius: var(--ct-radius); }
.ct-auth-box {
    max-width: 440px; margin: 0 auto;
    background: var(--ct-bg); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    /* FIX: responsive padding — less cramped on narrow screens */
    padding: 32px clamp(16px, 5vw, 32px);
}
.ct-auth-box h2 { text-align: center; margin-bottom: 24px; }
.ct-reg-box { max-width: 700px; margin: 0 auto; }
.ct-form-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ct-text-secondary); }

/* ─────────────────────────────────────────────
   DASHBOARD LAYOUT
   ──────────────────────────────────────────── */
.ct-dash-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.ct-dash-actions { display: flex; gap: 8px; align-items: center; }
.ct-subscription-info, .ct-billing-info { margin-bottom: 20px; }
.ct-privacy-disclosure {
    background: var(--ct-warning-light); border: 1px solid var(--ct-warning-border);
    border-radius: var(--ct-radius); padding: 14px 18px; margin-bottom: 20px;
    font-size: 13px; line-height: 1.6;
}

/* ─────────────────────────────────────────────
   MISC
   ──────────────────────────────────────────── */
.ct-no-results { text-align: center; padding: 48px 20px; color: var(--ct-text-secondary); font-size: 15px; }
.ct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ─────────────────────────────────────────────
   RESPONSIVE — 768px and below (tablets)
   ──────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Form rows stack vertically */
    .ct-form-row { flex-direction: column; gap: 0; }

    /* Listings: single column */
    .ct-clinic-grid { grid-template-columns: 1fr; }

    /* Profile: single column */
    .ct-profile-body { grid-template-columns: 1fr; }
    .ct-profile-header { flex-direction: column; align-items: center; text-align: center; }

    /* B-04: Nav tabs scroll — right-edge fade so users see more tabs exist */
    .ct-dash-nav, .ct-admin-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
    }
    .ct-dash-nav::-webkit-scrollbar, .ct-admin-nav::-webkit-scrollbar { display: none; }

    /* Modals: full-width with minimal side padding, scrollable */
    .ct-modal { margin: 8px; padding: 20px 16px; max-height: 95vh; overflow-y: auto; }

    /* Plan cards: single column */
    .ct-plans-grid { grid-template-columns: 1fr; }
    /* Pricing grid inside plugin pages: stack on tablet */
    .ct-wrap .ct-pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }

    /* Metric grid: 2 columns */
    .ct-metrics-grid { grid-template-columns: repeat(2, 1fr); }

    /* B-03: Step nav — equal-width buttons */
    .ct-step-nav { display: flex; flex-direction: row; gap: 10px; }
    .ct-step-nav .ct-btn { flex: 1; text-align: center; justify-content: center; }

    /* Auth box: less padding on mobile */
    .ct-auth-box { padding: 20px 16px; }

    /* Card footer: full width buttons */
    .ct-card-footer { flex-direction: column; }
    .ct-card-footer .ct-btn { width: 100%; }

    /* B-07: Filter improvements */
    .ct-filter-row { flex-wrap: wrap; gap: 8px; }
    .ct-filter-keyword { width: 100%; }
    .ct-filter-row .ct-btn { flex: 1; }
    .ct-filter-grid { grid-template-columns: 1fr !important; }
    .ct-advanced-filters select,
    .ct-advanced-filters input[type="text"] { width: 100%; }

    /* Hours row */
    .ct-hours-row { gap: 6px; }
    .ct-day-label { width: 80px; }

    /* Checkbox grid: 2 columns on tablet */
    .ct-checkbox-grid { grid-template-columns: repeat(2, 1fr); }

    /* Document upload wrap: stack vertically */
    .ct-doc-upload-wrap { flex-direction: column; align-items: flex-start; }

    /* Admin doc row: stack label above actions */
    .ct-admin-doc-row { flex-direction: column; align-items: flex-start; }
    .ct-admin-doc-label { min-width: 0; }

    /* D-03: Sticky contact button on mobile clinic profiles */
    .ct-profile-contact-sticky {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -2px 12px rgba(0,0,0,.12);
        z-index: 100;
        border-top: 1px solid var(--ct-border);
    }
    .ct-profile-sidebar .ct-contact-btn-inline { display: none; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — 480px and below (phones)
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
    /* D-01: Remove horizontal padding from wrap — let container handle it */
    .ct-wrap { padding: 16px 0; }
    /* Auth/reg boxes need their own internal padding */
    .ct-auth-box, .ct-reg-box { padding: 20px 14px !important; }

    /* Metric grid: single column on phones */
    .ct-metrics-grid, .ct-admin-metrics, .ct-overview-cards { grid-template-columns: 1fr; }

    /* Tabs: tighter padding so more tabs fit */
    .ct-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ct-tabs::-webkit-scrollbar { display: none; }
    .ct-tab { padding: 10px 14px; font-size: 13px; flex-shrink: 0; }

    .ct-btn-sm { padding: 5px 10px; font-size: 12px; }

    /* Checkbox grid: single column on phones */
    .ct-checkbox-grid { grid-template-columns: 1fr; }

    /* B-02/D-02: Hours grid — day label on own line above time inputs */
    .ct-hours-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 0;
        border-bottom: 1px solid var(--ct-border);
    }
    .ct-hours-row:last-child { border-bottom: none; }
    .ct-day-label { width: 100%; font-weight: 700; font-size: 13px; color: var(--ct-text); }
    .ct-time-input { width: 100% !important; }
    .ct-hours-row .ct-checkbox-label { margin-top: 4px; }

    /* Verification docs section */
    .ct-verification-docs-section { padding: 14px; }

    /* Pricing grid in portal: single column */
    .ct-wrap .ct-pricing-grid { grid-template-columns: 1fr; padding: 0; }

    /* Leads toolbar: stack filters vertically */
    .ct-leads-toolbar .ct-form-row { flex-direction: column; gap: 8px; }
    .ct-leads-toolbar input,
    .ct-leads-toolbar select { width: 100%; }

    /* Admin toolbar: stack filters */
    .ct-admin-toolbar { flex-direction: column; gap: 8px; }
    .ct-admin-toolbar select,
    .ct-admin-toolbar input { width: 100%; }
}

/* ─────────────────────────────────────────────
   BREADCRUMB & BACK NAVIGATION
   Feels native — part of the site, not a plugin
   ──────────────────────────────────────────── */
.ct-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--ct-text-secondary);
    flex-wrap: wrap;
}
.ct-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ct-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 0;
    transition: color var(--ct-transition);
}
.ct-breadcrumb-back:hover {
    color: var(--ct-primary-hover);
    text-decoration: underline;
}
.ct-breadcrumb-sep {
    color: var(--ct-border-dark);
}
.ct-breadcrumb-current {
    color: var(--ct-text-secondary);
    font-weight: 400;
    /* Truncate long clinic names on small screens */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Auth box breadcrumb (password reset page) */
.ct-auth-box .ct-breadcrumb {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ct-border);
}

/* Success message — used after registration and password reset */
.ct-success-message {
    text-align: center;
    padding: 32px 20px;
}
.ct-success-icon {
    font-size: 48px;
    color: var(--ct-success);
    margin-bottom: 12px;
}
.ct-success-message h3 {
    margin-bottom: 8px;
    color: var(--ct-text);
}
.ct-success-message p {
    color: var(--ct-text-secondary);
    margin-bottom: 16px;
}

/* ─────────────────────────────────────────────
   PROFILE FORM CANCEL BUTTON
   ──────────────────────────────────────────── */
.ct-form-actions .ct-cancel-profile-edit {
    margin-left: 4px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — breadcrumb on mobile
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .ct-breadcrumb-current {
        max-width: 140px;
    }
}

/* ─────────────────────────────────────────────
   DASHBOARD OVERVIEW QUICK ACTIONS
   ──────────────────────────────────────────── */
.ct-overview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   OTP VERIFICATION INPUT
   ──────────────────────────────────────────── */
.ct-otp-input {
    letter-spacing: 8px;
    font-size: 24px !important;
    text-align: center;
    font-family: monospace, monospace;
    font-weight: 700;
    color: var(--ct-primary);
    padding: 12px 16px !important;
    border-width: 2px !important;
    max-width: 220px;
    margin: 0 auto;
    display: block !important;
}
.ct-otp-input:focus {
    border-color: var(--ct-primary) !important;
    box-shadow: 0 0 0 4px rgba(26,111,196,.15) !important;
}
/* Remove browser OTP autofill styling inconsistencies */
.ct-otp-input::-webkit-inner-spin-button,
.ct-otp-input::-webkit-outer-spin-button { -webkit-appearance: none; }

@media (max-width: 480px) {
    .ct-otp-input { letter-spacing: 5px; font-size: 20px !important; max-width: 100%; }
}