/* Rabiyah Medical — extra component styles lifted from the static template <style> blocks
 * that are not present in style.css. */

/* English mode uses Inter first. */
html[lang="en"] body {
	font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

::selection {
	background: #008c9b;
	color: #fff;
}

/* ===== Interactive Saudi coverage map (used on the "about" page) ===== */
.coverage-shell{position:relative;overflow:hidden;border:1px solid #e7eef3;border-radius:2rem;background:linear-gradient(145deg,#f8fbfc 0%,#eef7f7 100%);box-shadow:0 24px 60px -36px rgba(19,56,94,.35)}
.coverage-map{position:relative;min-height:590px;background:radial-gradient(circle at 55% 45%,rgba(0,140,155,.08),transparent 45%)}
.saudi-shape{fill:#fff;stroke:#b9dce0;stroke-width:2.2;filter:drop-shadow(0 18px 24px rgba(19,56,94,.1));transition:fill .35s ease,stroke .35s ease}
.map-route{fill:none;stroke:#93cfd4;stroke-width:1.2;stroke-dasharray:4 6;opacity:.65}
.city-pin{cursor:pointer;transition:opacity .3s ease}
.city-pin .pin-halo{fill:#00a8ba;opacity:.13;transform-box:fill-box;transform-origin:center;animation:cityPulse 2.8s ease-out infinite}
.city-pin .pin-dot{fill:#008c9b;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 2px 3px rgba(0,109,121,.32));transition:transform .25s ease,fill .25s ease}
.city-pin.branch .pin-dot{fill:#13385e}
.city-pin.branch .pin-halo{fill:#13385e;opacity:.18}
.city-pin .pin-label{font-family:'IBM Plex Sans Arabic','Inter',sans-serif;font-size:12px;font-weight:700;fill:#13385e;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;transition:opacity .25s ease}
.city-pin:hover .pin-dot,.city-pin.is-active .pin-dot{transform:scale(1.55)}
.city-pin.is-muted{opacity:.16}
.city-pin:nth-of-type(3n) .pin-halo{animation-delay:.7s}.city-pin:nth-of-type(3n+1) .pin-halo{animation-delay:1.4s}
.region-tab{border:1px solid #dbe8eb;background:#fff;color:#526579;transition:all .25s ease}
.region-tab:hover,.region-tab.active{background:#008c9b;color:#fff;border-color:#008c9b;box-shadow:0 9px 20px -12px rgba(0,140,155,.8)}
.coverage-list{min-height:120px}
.coverage-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:.7rem;background:#fff;border:1px solid #e5edf0;color:#42556b;font-size:.83rem}
.coverage-chip::before{content:'';width:.42rem;height:.42rem;border-radius:50%;background:#00a8ba;flex:none}
.map-tooltip{position:absolute;z-index:10;pointer-events:none;transform:translate(-50%,-120%);background:#0c2440;color:#fff;padding:.42rem .7rem;border-radius:.65rem;font-size:.76rem;font-weight:700;box-shadow:0 8px 20px rgba(12,36,64,.22);opacity:0;transition:opacity .15s ease;white-space:nowrap}
.map-tooltip.show{opacity:1}
@keyframes cityPulse{0%{transform:scale(.7);opacity:.3}70%,100%{transform:scale(2.2);opacity:0}}
@media (max-width:768px){.coverage-map{min-height:430px}.city-pin .pin-label{font-size:14px}.map-route{display:none}}
@media (prefers-reduced-motion:reduce){.city-pin .pin-halo{animation:none}.city-pin,.city-pin .pin-dot{transition:none}}
/* ===== Pagination (news & insights archives) ===== */
.nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;padding:0 .8rem;border-radius:.85rem;background:#fff;border:1px solid #e2e8f0;color:#13385e;font-weight:600;font-size:.9rem;transition:all .25s ease;text-decoration:none}
.page-numbers:hover{background:#e6f4f6;border-color:#7fd1d9;color:#006d79}
.page-numbers.current{background:#008c9b;border-color:#008c9b;color:#fff;box-shadow:0 10px 20px -12px rgba(0,140,155,.7)}
.page-numbers.dots{background:transparent;border-color:transparent;color:#64748b}
.page-numbers.prev,.page-numbers.next{font-size:1.1rem}
@media (max-width:640px){.nav-links{gap:.35rem}.page-numbers{min-width:2.3rem;height:2.3rem;padding:0 .6rem;font-size:.82rem}}
/* Flip pagination arrows in RTL (Arabic) so next/prev point with reading direction */
[dir="rtl"] .page-numbers.prev span,
[dir="rtl"] .page-numbers.next span {
	display:inline-block;
	transform: scaleX(-1);
}