/* DoctorXpert Booking — premium UI */
:root {
	--dxb-accent: #C4060C;
	--dxb-accent-dark: #8E0409;
	--dxb-ink: #131417;
	--dxb-muted: #667085;
	--dxb-line: #E6E8EC;
	--dxb-surface: #FFFFFF;
	--dxb-soft: #F7F8FA;
	--dxb-radius: 14px;
	--dxb-shadow: 0 10px 30px -12px rgba(19, 20, 23, .18);
	--dxb-shadow-lg: 0 24px 60px -20px rgba(196, 6, 12, .28);
	--dxb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dxb-hero, .dxb-listing, .dxb-profile, .dxb-services, .dxb-specialties,
.dxb-modal { font-family: var(--dxb-font); color: var(--dxb-ink); box-sizing: border-box; }
.dxb-hero *, .dxb-listing *, .dxb-profile *, .dxb-modal *, .dxb-services *, .dxb-specialties * { box-sizing: border-box; }

/* ---------- Buttons ---------- */
.dxb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:12px 22px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer;
	border:1px solid transparent; text-decoration:none; transition:.18s ease; line-height:1; }
.dxb-btn-primary { background:var(--dxb-accent); color:#fff; box-shadow:0 8px 20px -10px rgba(196,6,12,.7); }
.dxb-btn-primary:hover { background:var(--dxb-accent-dark); color:#fff; transform:translateY(-1px); }
.dxb-btn-ghost { background:#fff; color:var(--dxb-accent); border-color:var(--dxb-accent); }
.dxb-btn-ghost:hover { background:rgba(196,6,12,.06); color:var(--dxb-accent); }
.dxb-btn-outline { background:#fff; color:var(--dxb-ink); border-color:var(--dxb-line); }
.dxb-btn-outline:hover { border-color:var(--dxb-accent); color:var(--dxb-accent); }

/* ---------- Hero ---------- */
.dxb-hero { border-radius:24px; overflow:hidden; margin:24px auto; max-width:1240px;
	background: linear-gradient(100deg, #2A0203 0%, #6B0407 38%, var(--dxb-accent) 78%, #E23A2F 100%); }
.dxb-hero-inner { display:grid; grid-template-columns:1.4fr .8fr; align-items:end; gap:20px; padding:44px 44px 0; }
.dxb-hero-copy { padding-bottom:48px; }
.dxb-hero-title { font-size:clamp(30px,4.2vw,52px); line-height:1.1; font-weight:800; color:#fff; margin:0 0 18px; letter-spacing:-.02em; }
.dxb-hero-title .dxb-accent { color:#FFC7A1; }
.dxb-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
	color:#fff; font-weight:700; font-size:13px; padding:8px 14px; border-radius:8px; backdrop-filter:blur(6px); }
.dxb-badge-dot { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#2BB673; color:#fff; font-size:11px; }
.dxb-searchbar { margin-top:26px; display:flex; align-items:stretch; background:#fff; border-radius:12px;
	padding:6px; gap:6px; box-shadow:var(--dxb-shadow); max-width:720px; cursor:pointer; }
.dxb-sb-city { flex:0 0 190px; display:flex; align-items:center; padding:0 14px; color:var(--dxb-ink); font-weight:600; font-size:15px; }
.dxb-sb-detect { border:0; background:var(--dxb-soft); color:var(--dxb-accent); font-weight:700; font-size:14px;
	padding:0 16px; border-radius:8px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.dxb-pin { width:12px; height:12px; border-radius:50%; border:3px solid currentColor; display:inline-block; }
.dxb-sb-query { flex:1; display:flex; align-items:center; padding:0 16px; color:var(--dxb-muted); font-size:15px;
	border-left:1px solid var(--dxb-line); }
.dxb-sb-submit { flex:0 0 auto; }
.dxb-hero-media { display:flex; justify-content:flex-end; }
.dxb-hero-media img { max-height:340px; width:auto; display:block; }

/* ---------- Modal ---------- */
.dxb-modal { position:fixed; inset:0; z-index:99999; display:none; }
.dxb-modal.is-open { display:block; }
.dxb-modal-backdrop { position:absolute; inset:0; background:rgba(15,16,20,.55); backdrop-filter:blur(2px); }
.dxb-modal-panel { position:relative; margin:6vh auto 0; width:min(760px,94vw); background:#fff;
	border-radius:18px; box-shadow:var(--dxb-shadow-lg); overflow:hidden; animation:dxb-pop .18s ease; }
@keyframes dxb-pop { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
.dxb-modal-head { position:relative; padding:18px 22px; text-align:center; border-bottom:1px solid var(--dxb-line); }
.dxb-modal-head h3 { margin:0; font-size:20px; font-weight:800; color:var(--dxb-accent); }
.dxb-modal-x { position:absolute; right:14px; top:12px; border:0; background:transparent; font-size:26px; line-height:1;
	color:var(--dxb-muted); cursor:pointer; }
.dxb-modal-body { padding:18px 22px 20px; display:grid; gap:12px; }
.dxb-field { position:relative; display:flex; align-items:center; border:1px solid var(--dxb-line); border-radius:12px; padding:4px 6px 4px 42px; }
.dxb-field:focus-within { border-color:var(--dxb-accent); box-shadow:0 0 0 3px rgba(196,6,12,.1); }
.dxb-field input { flex:1; border:0 !important; outline:0; font-size:16px; padding:12px 6px; background:transparent; box-shadow:none !important; }
.dxb-ico { position:absolute; left:12px; width:20px; height:20px; border-radius:50%; border:2px solid var(--dxb-muted); }
.dxb-ico-pin { border-color:#E9A23B; }
.dxb-ico-search::after { content:""; position:absolute; width:8px; height:2px; background:var(--dxb-muted); transform:rotate(45deg); right:-3px; bottom:0; }
.dxb-detect-btn { border:1px solid var(--dxb-line); background:var(--dxb-soft); color:var(--dxb-accent); font-weight:700;
	padding:10px 14px; border-radius:8px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.dxb-suggest { list-style:none; margin:0; padding:0; max-height:52vh; overflow:auto; border-top:1px solid var(--dxb-line); }
.dxb-suggest li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 22px;
	border-bottom:1px solid var(--dxb-line); cursor:pointer; font-size:16px; }
.dxb-suggest li:hover, .dxb-suggest li.is-active { background:rgba(196,6,12,.05); }
.dxb-suggest .dxb-sug-type { color:var(--dxb-muted); font-size:14px; }
.dxb-suggest .dxb-sug-empty { justify-content:center; color:var(--dxb-muted); cursor:default; }

/* ---------- Booking modal ---------- */
.dxb-booking-panel .dxb-modal-head h3 { color:var(--dxb-ink); }
.dxb-book-form { padding:20px 22px 24px; display:grid; gap:14px; }
.dxb-book-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dxb-lbl { display:grid; gap:6px; font-size:13px; font-weight:700; color:var(--dxb-muted); }
.dxb-lbl input, .dxb-lbl select, .dxb-lbl textarea { border:1px solid var(--dxb-line); border-radius:10px;
	padding:11px 12px; font-size:15px; color:var(--dxb-ink); width:100%; background:#fff; }
.dxb-lbl input:focus, .dxb-lbl select:focus, .dxb-lbl textarea:focus { outline:0; border-color:var(--dxb-accent); box-shadow:0 0 0 3px rgba(196,6,12,.1); }
.dxb-lbl-text { font-size:13px; font-weight:700; color:var(--dxb-muted); }
.dxb-slots { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.dxb-slot { border:1px solid var(--dxb-line); background:#fff; border-radius:8px; padding:9px 12px; font-size:14px;
	font-weight:600; cursor:pointer; }
.dxb-slot:hover { border-color:var(--dxb-accent); color:var(--dxb-accent); }
.dxb-slot.is-selected { background:var(--dxb-accent); border-color:var(--dxb-accent); color:#fff; }
.dxb-slot[disabled] { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.dxb-book-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:4px; }
.dxb-book-fee { font-weight:800; font-size:17px; color:var(--dxb-accent); }
.dxb-book-msg { margin:0; font-size:14px; font-weight:600; }
.dxb-book-msg.is-ok { color:#177245; }
.dxb-book-msg.is-error { color:var(--dxb-accent); }

/* ---------- Listing ---------- */
.dxb-listing { max-width:1240px; margin:0 auto; padding:28px 20px 60px; }
.dxb-crumbs { display:flex; gap:8px; font-size:11px; letter-spacing:.08em; color:var(--dxb-muted); margin-bottom:14px; }
.dxb-crumbs a { color:var(--dxb-muted); text-decoration:none; }
.dxb-crumbs a:hover { color:var(--dxb-accent); }
.dxb-crumb-active { color:var(--dxb-accent); font-weight:700; }
.dxb-listing-title { font-size:clamp(22px,3vw,30px); font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.dxb-listing-sub { color:var(--dxb-muted); margin:0 0 18px; font-size:14px; }
.dxb-chips { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; scrollbar-width:none; }
.dxb-chips::-webkit-scrollbar { display:none; }
.dxb-chip { white-space:nowrap; border:1px solid var(--dxb-line); border-radius:999px; padding:9px 18px;
	font-size:14px; font-weight:600; color:var(--dxb-ink); text-decoration:none; background:#fff; transition:.16s; }
.dxb-chip:hover { border-color:var(--dxb-accent); color:var(--dxb-accent); }
.dxb-chip.is-active { background:var(--dxb-accent); border-color:var(--dxb-accent); color:#fff; }

.dxb-results { display:grid; gap:18px; }
.dxb-card { background:#fff; border:1px solid var(--dxb-line); border-radius:var(--dxb-radius);
	overflow:hidden; box-shadow:var(--dxb-shadow); transition:.2s; }
.dxb-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(19,20,23,.35); }
.dxb-card-top { display:grid; grid-template-columns:96px 1fr 220px; gap:20px; padding:22px; }
.dxb-avatar { width:88px; height:88px; border-radius:50%; overflow:hidden; background:var(--dxb-soft);
	display:grid; place-items:center; }
.dxb-avatar img { width:100%; height:100%; object-fit:cover; }
.dxb-avatar-initials { font-weight:800; color:var(--dxb-accent); font-size:24px; }
.dxb-avatar-lg { width:130px; height:130px; }
.dxb-doc-name { margin:0 0 6px; font-size:20px; font-weight:700; }
.dxb-doc-name a { color:var(--dxb-ink); text-decoration:none; }
.dxb-doc-name a:hover { color:var(--dxb-accent); }
.dxb-verified { display:inline-flex; align-items:center; gap:6px; color:#177245; font-size:13px; font-weight:700; }
.dxb-doc-desig { margin:8px 0 2px; font-size:14px; color:var(--dxb-ink); }
.dxb-doc-qual { margin:0; font-size:13px; color:var(--dxb-muted); }
.dxb-stats { display:flex; gap:34px; margin-top:16px; }
.dxb-stat { display:grid; gap:2px; }
.dxb-stat strong { font-size:15px; font-weight:700; }
.dxb-stat span { font-size:12px; color:var(--dxb-muted); }
.dxb-stars { color:#F2A93B; }
.dxb-card-actions { display:grid; gap:10px; align-content:start; }
.dxb-clinics-strip { display:flex; gap:12px; overflow-x:auto; padding:0 22px 18px; scrollbar-width:none; }
.dxb-clinics-strip::-webkit-scrollbar { display:none; }
.dxb-clinic { flex:0 0 280px; text-align:left; background:#fff; border:1px solid var(--dxb-line);
	border-radius:10px; padding:12px 14px; cursor:pointer; display:grid; gap:8px; transition:.16s; }
.dxb-clinic:hover { border-color:var(--dxb-accent); }
.dxb-clinic-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dxb-clinic-meta { display:flex; align-items:center; gap:8px; font-size:13px; color:#177245; }
.dxb-clinic-meta em { margin-left:auto; font-style:normal; color:var(--dxb-ink); font-weight:700; }
.dxb-dot { width:7px; height:7px; border-radius:50%; background:#2BB673; }
.dxb-discount-bar { background:var(--dxb-accent); color:#fff; font-weight:700; font-size:13px;
	text-align:center; padding:10px; }
.dxb-empty { padding:40px; text-align:center; color:var(--dxb-muted); background:var(--dxb-soft); border-radius:var(--dxb-radius); }
.dxb-pagination { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.dxb-pagination .page-numbers { border:1px solid var(--dxb-line); border-radius:8px; padding:8px 14px;
	text-decoration:none; color:var(--dxb-ink); font-weight:600; }
.dxb-pagination .page-numbers.current { background:var(--dxb-accent); border-color:var(--dxb-accent); color:#fff; }

/* ---------- Profile ---------- */
.dxb-profile { max-width:1100px; margin:0 auto; padding:32px 20px 60px; }
.dxb-profile-head { display:grid; grid-template-columns:150px 1fr; gap:24px; background:#fff;
	border:1px solid var(--dxb-line); border-radius:var(--dxb-radius); padding:26px; box-shadow:var(--dxb-shadow); }
.dxb-profile-info h1 { margin:0 0 6px; font-size:28px; font-weight:800; }
.dxb-profile-info .dxb-btn { margin-top:18px; }
.dxb-h2 { font-size:20px; font-weight:800; margin:34px 0 14px; }
.dxb-clinic-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.dxb-clinic-card { border:1px solid var(--dxb-line); border-radius:var(--dxb-radius); padding:18px; background:#fff; }
.dxb-clinic-card h3 { margin:0 0 6px; font-size:16px; }
.dxb-clinic-card p { margin:0 0 4px; font-size:13px; color:var(--dxb-muted); }
.dxb-clinic-fee { font-weight:800 !important; color:var(--dxb-accent) !important; font-size:16px !important; margin:10px 0 !important; }

/* ---------- Services / specialties ---------- */
.dxb-services { max-width:1240px; margin:26px auto; padding:0 20px; display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.dxb-service-card { background:#fff; border:1px solid var(--dxb-line); border-radius:var(--dxb-radius);
	padding:20px; text-decoration:none; color:var(--dxb-ink); box-shadow:var(--dxb-shadow); transition:.18s; }
.dxb-service-card:hover { transform:translateY(-3px); border-color:var(--dxb-accent); }
.dxb-service-card h3 { margin:0 0 8px; font-size:16px; font-weight:800; }
.dxb-service-card p { margin:0; font-size:13px; color:var(--dxb-muted); }
.dxb-specialties { max-width:1240px; margin:26px auto; padding:0 20px; }
.dxb-spec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.dxb-spec { display:grid; gap:4px; padding:18px; border:1px solid var(--dxb-line); border-radius:var(--dxb-radius);
	background:#fff; text-decoration:none; color:var(--dxb-ink); transition:.16s; }
.dxb-spec:hover { border-color:var(--dxb-accent); box-shadow:var(--dxb-shadow); }
.dxb-spec-name { font-weight:700; }
.dxb-spec-count { font-size:12px; color:var(--dxb-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.dxb-hero-inner { grid-template-columns:1fr; padding:32px 24px 0; }
	.dxb-hero-media { display:none; }
	.dxb-card-top { grid-template-columns:72px 1fr; }
	.dxb-card-actions { grid-column:1 / -1; grid-auto-flow:column; }
	.dxb-profile-head { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
	.dxb-searchbar { flex-wrap:wrap; }
	.dxb-sb-city { flex:1 0 55%; }
	.dxb-sb-query { flex:1 0 100%; border-left:0; padding:10px 14px; }
	.dxb-sb-submit { flex:1 0 100%; }
	.dxb-stats { gap:18px; }
	.dxb-book-grid { grid-template-columns:1fr; }
	.dxb-card-actions { grid-auto-flow:row; }
}
