/* =========================================================================
   MEDIXA platform (base) site — "Shifaa" dental-clinic design language.
   Raw CSS (no build step) loaded AFTER app.css on layouts.platform. RTL-first,
   IBM Plex Sans Arabic. Airy light-blue sections, big curved dividers, rounded
   cards, blue gradient feature cards, image collages, blue curved footer.
   Keeps the motion utilities (reveal / counters / lift) from the prior layer.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

:root {
    --sf-blue:   #0B5DD3;   /* primary */
    --sf-blue-d: #0A4CAE;   /* darker */
    --sf-sky:    #3AA8F8;   /* light accent */
    --sf-soft:   #EAF2FD;   /* light section bg */
    --sf-soft2:  #DCEBFB;   /* card / banner bg */
    --sf-ink:    #142748;   /* headings */
    --sf-muted:  #5B6472;   /* body text */
    --sf-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

body.min-h-screen { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; color: var(--sf-ink); }
.pf-display { font-family: 'IBM Plex Sans Arabic', 'Sora', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Colour helpers ---- */
.sf-blue   { color: var(--sf-blue); }
.bg-sf-blue{ background: var(--sf-blue); }
.sf-soft   { background: var(--sf-soft); }
.sf-soft2  { background: var(--sf-soft2); }
.sf-ink    { color: var(--sf-ink); }
.sf-muted  { color: var(--sf-muted); }
.pf-grad   { background: linear-gradient(90deg, var(--sf-blue), var(--sf-sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---- Eyebrow ---- */
.sf-eyebrow { display:inline-flex; align-items:center; gap:.4rem; color: var(--sf-blue); font-weight:700; font-size:.8rem; letter-spacing:.02em; }
.sf-eyebrow::before { content:""; width:22px; height:2px; background: var(--sf-sky); border-radius:2px; }

/* ---- Buttons (pill) ---- */
.sf-btn { display:inline-flex; align-items:center; gap:.5rem; background: var(--sf-blue); color:#fff; font-weight:700; font-size:.95rem; padding:.72rem 1.5rem; border-radius:999px; transition: transform .25s var(--sf-ease), box-shadow .3s, background .3s; box-shadow:0 10px 24px -10px rgba(11,93,211,.55); }
.sf-btn:hover { background: var(--sf-blue-d); transform: translateY(-2px); box-shadow:0 16px 30px -10px rgba(11,93,211,.6); }
.sf-btn-out { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color: var(--sf-blue); font-weight:700; font-size:.95rem; padding:.72rem 1.5rem; border-radius:999px; border:1.5px solid #cfe0f8; transition: all .25s var(--sf-ease); }
.sf-btn-out:hover { border-color: var(--sf-blue); transform: translateY(-2px); }
.sf-btn-white { background:#fff; color: var(--sf-blue); }
.sf-btn-white:hover { background:#eef5ff; }

/* ---- Cards ---- */
.sf-card { background:#fff; border-radius:22px; box-shadow:0 12px 34px -20px rgba(20,39,72,.28); transition: transform .35s var(--sf-ease), box-shadow .35s; }
.sf-lift:hover { transform: translateY(-6px); box-shadow:0 24px 46px -18px rgba(11,93,211,.30); }

/* feature card — light blue, deep-blue on hover (Shifaa) */
.sf-feature { background: var(--sf-soft2); border-radius:20px; padding:1.6rem; transition: all .35s var(--sf-ease); }
.sf-feature .sf-fi { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#fff; color: var(--sf-blue); box-shadow:0 8px 18px -10px rgba(11,93,211,.5); transition: all .35s var(--sf-ease); }
.sf-feature h3 { color: var(--sf-ink); }
.sf-feature p  { color: var(--sf-muted); }
.sf-feature:hover { background: linear-gradient(160deg, var(--sf-blue), var(--sf-blue-d)); transform: translateY(-6px); box-shadow:0 24px 46px -18px rgba(11,93,211,.45); }
.sf-feature:hover h3, .sf-feature:hover p { color:#fff; }
.sf-feature:hover p { color: rgba(255,255,255,.85); }
.sf-feature:hover .sf-fi { background: rgba(255,255,255,.16); color:#fff; box-shadow:none; }

/* stat card */
.sf-stat { background: var(--sf-soft); border-radius:18px; padding:1.4rem 1rem; text-align:center; }
.sf-stat .sf-sn { font-size:2.1rem; font-weight:800; color: var(--sf-blue); line-height:1; }
.sf-stat .sf-sl { font-size:.85rem; color: var(--sf-muted); margin-top:.35rem; }

/* service photo card with gradient-label overlay */
.sf-service { position:relative; border-radius:20px; overflow:hidden; aspect-ratio: 4/3; display:block; box-shadow:0 12px 30px -18px rgba(20,39,72,.35); }
.sf-service img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--sf-ease); }
.sf-service::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,93,211,0) 35%, rgba(10,42,102,.82) 100%); }
.sf-service .sf-slabel { position:absolute; inset-inline:0; bottom:0; z-index:2; padding:1rem; color:#fff; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.sf-service:hover img { transform: scale(1.07); }

/* ---- Curved section edges (Shifaa) — shallow fixed radius so the curve hugs
   the content instead of leaving a tall empty dome on tall sections/footer. ---- */
.sf-curve-b { border-bottom-left-radius: 50% 2.6rem; border-bottom-right-radius: 50% 2.6rem; }
.sf-curve-t { border-top-left-radius: 50% 2.6rem; border-top-right-radius: 50% 2.6rem; }

/* ---- Decorative glow orbs (footer / banners). MUST be out of flow — otherwise
   they occupy real height and push content down (huge empty blue gap). ---- */
.pf-orb { position: absolute; border-radius: 9999px; pointer-events: none; z-index: 0;
  filter: blur(46px); }
.pf-orb--blue { background: radial-gradient(circle at center, rgba(58,168,248,.55), transparent 70%); }
.pf-orb--cyan { background: radial-gradient(circle at center, rgba(120,200,255,.45), transparent 70%); }

/* page banner */
.sf-banner { background: radial-gradient(120% 120% at 80% 0%, #d3e6fd 0%, var(--sf-soft) 60%); }

/* ---- Hero image collage ---- */
.sf-collage { position:relative; }
.sf-collage .sf-blob { position:absolute; inset:6% 6% 6% 6%; background: linear-gradient(160deg, var(--sf-sky), var(--sf-blue)); border-radius:44% 56% 58% 42% / 48% 44% 56% 52%; filter: blur(2px); opacity:.9; z-index:0; }
.sf-collage img { position:relative; z-index:1; border-radius:26px; box-shadow:0 22px 50px -24px rgba(11,93,211,.5); object-fit:cover; }

/* small round icon disc */
.sf-disc { width:48px; height:48px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background: var(--sf-soft2); color: var(--sf-blue); }

/* testimonial card */
.sf-quote { background:#fff; border:1px solid #eaf1fb; border-radius:20px; padding:1.5rem; box-shadow:0 10px 30px -22px rgba(20,39,72,.3); }

/* ---- Header (sticky, white on scroll) ---- */
.pf-header-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px -22px rgba(11,93,211,.5); }
.pf-navlink { position:relative; }
.pf-navlink::after { content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; background: var(--sf-blue); transform: scaleX(0); transform-origin: inline-start; transition: transform .3s var(--sf-ease); border-radius:2px; }
.pf-navlink:hover::after { transform: scaleX(1); }

/* ---- Motion (kept from prior layer) ---- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--sf-ease), transform .7s var(--sf-ease); transition-delay: var(--d, 0ms); }
.reveal.pf-in { opacity:1; transform:none; }
.reveal-zoom { opacity:0; transform: scale(.94); transition: opacity .7s var(--sf-ease), transform .7s var(--sf-ease); transition-delay: var(--d, 0ms); }
.reveal-zoom.pf-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal,.reveal-zoom{opacity:1!important;transform:none!important;} }
[data-counter]{ font-variant-numeric: tabular-nums; }

/* ---- Marquee ---- */
.pf-marquee{ display:flex; width:max-content; animation: pf-marq 34s linear infinite; }
[dir="rtl"] .pf-marquee{ animation-name: pf-marq-rtl; }
.pf-marquee > *{ margin-inline-end:2.5rem; }
@keyframes pf-marq{ to{ transform: translateX(-50%);} }
@keyframes pf-marq-rtl{ to{ transform: translateX(50%);} }
.pf-marquee-mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }

/* ---- Filled fractional star rating (gold over gray — never hollow) ---- */
.sf-stars{ position:relative; display:inline-block; direction:ltr; font-size:1.05rem; line-height:1;
  letter-spacing:2px; white-space:nowrap;
  font-family:"Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji","Noto Sans Symbols 2",sans-serif; }
.sf-stars-bg{ color:#d7e1f0; }
.sf-stars-fg{ position:absolute; inset-block:0; inset-inline-start:0; width:0; overflow:hidden;
  color:#f6b40a; white-space:nowrap; }

/* ---- Reviews marquee (auto-scroll + pointer drag) ---- */
.sf-rev-viewport{ overflow:hidden; cursor:grab; -webkit-user-select:none; user-select:none;
  padding-block:.75rem; touch-action:pan-y; }
.sf-rev-viewport.is-grabbing{ cursor:grabbing; }
.sf-rev-track{ display:flex; width:max-content; will-change:transform; }
.sf-rev-card{ flex:0 0 auto; width:330px; margin-inline-end:1.25rem; background:#fff;
  border:1px solid #e7f0fb; border-radius:20px; padding:1.5rem; min-height:210px;
  box-shadow:0 14px 36px -26px rgba(20,39,72,.4); }
.sf-rev-card p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:520px){ .sf-rev-card{ width:272px; } }

/* ---- Billing toggle (monthly / yearly) ---- */
.sf-billing{ display:inline-flex; align-items:center; gap:.25rem; padding:.35rem; border-radius:999px;
  background:#eef3fa; border:1px solid #e2ebf7; }
.sf-billing button{ padding:.55rem 1.4rem; border-radius:999px; font-weight:700; font-size:.9rem;
  color:var(--sf-muted); transition:all .25s var(--sf-ease); display:inline-flex; align-items:center; }
.sf-billing button.is-on{ background:#fff; color:var(--sf-blue); box-shadow:0 6px 16px -8px rgba(11,93,211,.5); }
.sf-billing .sf-save{ font-size:10px; font-weight:800; color:#12a150; margin-inline-start:.35rem;
  background:#e7f8ef; padding:.1rem .4rem; border-radius:6px; }

/* ---- Pricing plan cards (professional, centered) ---- */
.sf-plan{ position:relative; display:flex; flex-direction:column; text-align:center; align-items:stretch;
  background:#fff; color:var(--sf-ink);
  border:1px solid #e7f0fb; border-radius:26px; padding:2rem 1.9rem;
  box-shadow:0 26px 60px -42px rgba(20,39,72,.55);
  transition:transform .3s var(--sf-ease), box-shadow .3s, border-color .3s; }
.sf-plan:not(.sf-plan-featured):hover{ transform:translateY(-6px); border-color:#d3e4fb;
  box-shadow:0 34px 70px -40px rgba(11,93,211,.4); }
.sf-plan-featured{ color:#fff; border:none;
  background:linear-gradient(165deg,var(--sf-sky) 0%,var(--sf-blue) 44%,var(--sf-blue-d) 100%);
  box-shadow:0 46px 84px -34px rgba(11,93,211,.72); }
@media(min-width:768px){ .sf-plan-featured{ transform:translateY(-1.1rem) scale(1.035); z-index:2; } }
.sf-plan-badge{ position:absolute; top:-.95rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:#fff; color:var(--sf-blue); font-size:11px; font-weight:800; padding:.42rem 1.05rem;
  border-radius:999px; box-shadow:0 12px 26px -8px rgba(11,39,72,.42);
  display:inline-flex; align-items:center; gap:.3rem; }
.sf-plan-icon{ width:54px; height:54px; border-radius:16px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--sf-soft2); color:var(--sf-blue); margin:0 auto 1.1rem; }
.sf-plan-featured .sf-plan-icon{ background:rgba(255,255,255,.18); color:#fff; }
.sf-plan-mut{ color:var(--sf-muted); }
.sf-plan-featured, .sf-plan-featured .sf-plan-mut{ color:#fff; }
.sf-plan-featured .sf-plan-mut{ color:rgba(255,255,255,.9); }
.sf-plan-tick{ width:21px; height:21px; border-radius:999px; flex:0 0 auto; margin-top:.1rem;
  display:inline-flex; align-items:center; justify-content:center; background:#e7f8ef; color:#12a150; }
.sf-plan-featured .sf-plan-tick{ background:rgba(255,255,255,.2); color:#fff; }

/* ---- Payment chips (footer) ---- */
.pf-pay{ display:inline-flex; align-items:center; justify-content:center; height:38px; min-width:64px; padding:0 13px; border-radius:11px; background:#fff; border:1px solid rgba(20,39,72,.07); box-shadow:0 6px 16px -8px rgba(11,39,72,.35); }
.pf-pay img,.pf-pay svg{ height:17px; width:auto; display:block; }

/* ---- Before/after slider ---- */
.sf-ba{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 20px 50px -26px rgba(11,93,211,.5); }
.sf-ba img{ display:block; width:100%; }