/* =====================================================================
   SAELIX — ENHANCEMENTS
   Instagram/social proof, planner tools, reviews, video testimonials,
   trust carousel, blog, doctor/clinic matching, Dubai journey map,
   sticky service sidebar, language assistant, premium image system.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* PREMIUM IMAGE SYSTEM                                              */
/* ---------------------------------------------------------------- */
.img-card { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.img-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.img-card:hover img { transform: scale(1.07); }
.img-card.ratio-square { aspect-ratio: 1/1; }
.img-card.ratio-4-3 { aspect-ratio: 4/3; }
.img-card.ratio-3-4 { aspect-ratio: 3/4; }
.img-card.ratio-16-9 { aspect-ratio: 16/9; }
/* Saelix blue/white brand overlay */
.img-card .brand-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,31,68,0.05) 0%, rgba(10,31,68,0.55) 100%);
  transition: opacity var(--t-mid);
}
.img-card.overlay-soft .brand-overlay { background: linear-gradient(180deg, rgba(10,31,68,0) 40%, rgba(6,18,38,0.62) 100%); }
.img-card .img-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-5) var(--sp-4);
  color: #fff; z-index: 2;
}
.img-card .img-cap .tag { background: rgba(56,198,230,0.9); color: #042; margin-bottom: 8px; }
.img-card .img-cap h4 { color: #fff; font-family: var(--font-body); font-size: 1.05rem; }
.glass-img { border: 1px solid rgba(255,255,255,0.5); box-shadow: var(--sh-lg); }

/* ---------------------------------------------------------------- */
/* INSTAGRAM / SOCIAL PROOF                                         */
/* ---------------------------------------------------------------- */
.ig-section { background: linear-gradient(180deg, var(--grey-50), var(--white)); }
.ig-profile {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); padding: var(--sp-6); margin-bottom: var(--sp-6);
}
.ig-avatar {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; padding: 4px;
  background: conic-gradient(from 220deg, var(--cyan-400), var(--blue-500), var(--navy-800), var(--cyan-400));
  display: grid; place-items: center;
}
.ig-avatar .ig-avatar-inner { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ig-avatar img { width: 78%; height: 78%; object-fit: contain; }
.ig-info { flex: 1; min-width: 240px; }
.ig-handle-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 10px; }
.ig-handle { font-size: 1.3rem; font-weight: 700; color: var(--ink-900); font-family: var(--font-body); display: flex; align-items: center; gap: 8px; }
.ig-handle .verified { color: var(--blue-500); }
.ig-handle .verified svg { width: 20px; height: 20px; }
.ig-stats { display: flex; gap: var(--sp-6); margin-bottom: 10px; }
.ig-stats .st b { color: var(--ink-900); font-weight: 700; display: block; font-size: 1.05rem; }
.ig-stats .st span { font-size: 0.82rem; color: var(--ink-500); }
.ig-bio { font-size: 0.92rem; color: var(--ink-700); max-width: 52ch; }
.ig-bio .bio-name { font-weight: 700; color: var(--ink-900); display: block; }
.ig-follow { white-space: nowrap; }
.btn-ig { background: linear-gradient(45deg,#7a3ad6,#d6306b,#f5a623); color: #fff; }
.btn-ig:hover { color: #fff; filter: brightness(1.06); }

/* Highlights row */
.ig-highlights { display: flex; gap: var(--sp-5); overflow-x: auto; padding: 4px 2px var(--sp-5); scrollbar-width: none; }
.ig-highlights::-webkit-scrollbar { display: none; }
.ig-hl { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; text-decoration: none; }
.ig-hl .hl-ring {
  width: 72px; height: 72px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--silver-300), var(--blue-500));
  display: grid; place-items: center; transition: transform var(--t-fast) var(--ease);
}
.ig-hl:hover .hl-ring { transform: translateY(-3px) scale(1.04); }
.ig-hl .hl-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--grad-navy); display: grid; place-items: center; color: #fff; }
.ig-hl .hl-inner svg { width: 28px; height: 28px; }
.ig-hl span { font-size: 0.74rem; font-weight: 600; color: var(--ink-700); }

/* Grid of posts */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.ig-post { position: relative; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); display: block; }
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ig-post:hover img { transform: scale(1.09); }
.ig-post .ig-cat { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,0.92); color: var(--navy-800); }
.ig-post .ig-hoverlay {
  position: absolute; inset: 0; z-index: 2; opacity: 0;
  background: linear-gradient(180deg, rgba(10,31,68,0.1), rgba(6,18,38,0.78));
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-4);
  color: #fff; transition: opacity var(--t-mid);
}
.ig-post:hover .ig-hoverlay { opacity: 1; }
.ig-post .ig-hoverlay p { color: #fff; font-size: 0.82rem; }
.ig-post .ig-engage { display: flex; gap: 14px; font-size: 0.8rem; font-weight: 600; margin-top: 8px; }
.ig-post .ig-engage span { display: flex; align-items: center; gap: 5px; }
.ig-post .ig-engage svg { width: 15px; height: 15px; }
/* Reel marker */
.ig-post.reel .reel-ic { position: absolute; top: 10px; right: 10px; z-index: 3; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ig-post.reel .reel-ic svg { width: 20px; height: 20px; }
.ig-post .reel-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.ig-post .reel-play span { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.28); backdrop-filter: blur(4px); display: grid; place-items: center; }
.ig-post .reel-play svg { width: 22px; height: 22px; color: #fff; fill: #fff; }

/* ---------------------------------------------------------------- */
/* PLANNER TOOLS (tabs)                                             */
/* ---------------------------------------------------------------- */
.planner { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; max-width: 960px; margin-inline: auto; }
.planner-tabs { display: flex; flex-wrap: wrap; background: var(--grad-navy); }
.planner-tab { flex: 1; min-width: 140px; padding: 16px 14px; color: rgba(255,255,255,0.7); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border-bottom: 3px solid transparent; transition: var(--t-fast); }
.planner-tab svg { width: 18px; height: 18px; }
.planner-tab.active { color: #fff; background: rgba(255,255,255,0.08); border-bottom-color: var(--cyan-400); }
.planner-body { padding: var(--sp-7); }
.planner-pane { display: none; animation: fadeUp var(--t-mid) var(--ease); }
.planner-pane.active { display: block; }
.planner-pane h3 { font-family: var(--font-body); font-size: 1.2rem; margin-bottom: 6px; }
.planner-pane .pp-sub { font-size: 0.9rem; color: var(--ink-500); margin-bottom: var(--sp-5); }
.planner-result { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--grey-100); border-radius: var(--r-md); border-left: 4px solid var(--cyan-400); display: none; }
.planner-result.show { display: block; animation: fadeUp var(--t-mid) var(--ease); }
.planner-result h4 { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 8px; color: var(--navy-800); }
.planner-result .big { font-size: 1.6rem; font-weight: 700; color: var(--blue-500); font-family: var(--font-head); }

/* Treatment quiz */
.quiz-q { display: none; }
.quiz-q.active { display: block; animation: fadeUp var(--t-mid) var(--ease); }
.quiz-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: var(--sp-4); }
.quiz-opt { padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-weight: 600; color: var(--ink-900); transition: var(--t-fast); display: flex; align-items: center; gap: 10px; }
.quiz-opt:hover { border-color: var(--blue-500); background: var(--grey-50); transform: translateY(-2px); }
.quiz-opt .qic { width: 36px; height: 36px; border-radius: 9px; background: var(--grey-100); color: var(--blue-500); display: grid; place-items: center; flex-shrink: 0; }
.quiz-opt .qic svg { width: 20px; height: 20px; }

/* WhatsApp builder */
.wa-preview { background: #e8f7ea; border: 1px solid #bfe7c5; border-radius: var(--r-md); padding: var(--sp-4); font-size: 0.9rem; color: #1d3a25; white-space: pre-wrap; min-height: 90px; position: relative; }
.wa-preview::before { content: "WhatsApp preview"; position: absolute; top: -10px; left: 12px; background: #25d366; color: #fff; font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }

/* country chips */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; }
.country-chip { padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 9px; transition: var(--t-fast); }
.country-chip:hover { border-color: var(--blue-500); background: var(--grey-50); }
.country-chip.active { border-color: var(--navy-800); background: rgba(31,95,191,0.07); }
.country-chip .flag { font-size: 1.2rem; }

/* range row */
.range-row { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-3) 0; }
.range-row input[type=range] { flex: 1; }
.range-row output { min-width: 64px; text-align: right; font-weight: 700; color: var(--blue-500); }

/* ---------------------------------------------------------------- */
/* GOOGLE REVIEWS + VIDEO TESTIMONIALS + TRUST CAROUSEL             */
/* ---------------------------------------------------------------- */
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.review-card .rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-card .rc-av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-cyan); color: #fff; display: grid; place-items: center; font-weight: 700; }
.review-card .rc-head strong { display: block; font-size: 0.95rem; color: var(--ink-900); }
.review-card .rc-head .gmark { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--ink-500); }
.review-card .rc-head .gmark svg { width: 14px; height: 14px; }
.review-card .stars { color: #f5b51b; letter-spacing: 1px; margin-bottom: 8px; }
.review-card p { font-size: 0.92rem; }

.video-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); aspect-ratio: 9/13; cursor: pointer; }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.video-card:hover img { transform: scale(1.06); }
.video-card .vc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,68,0.15), rgba(6,18,38,0.8)); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-5); color: #fff; }
.video-card .vc-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.25); backdrop-filter: blur(6px); display: grid; place-items: center; transition: var(--t-fast); }
.video-card:hover .vc-play { background: var(--grad-cyan); transform: translate(-50%,-50%) scale(1.08); }
.video-card .vc-play svg { width: 26px; height: 26px; color: #fff; fill: #fff; }
.video-card .vc-overlay strong { color: #fff; display: block; }
.video-card .vc-overlay span { font-size: 0.8rem; color: rgba(255,255,255,0.8); }

.trust-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trust-carousel .marquee-track { align-items: center; }
.trust-logo { display: flex; align-items: center; gap: 10px; padding: 14px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); font-weight: 600; font-size: 0.9rem; color: var(--navy-800); white-space: nowrap; box-shadow: var(--sh-sm); }
.trust-logo svg { width: 22px; height: 22px; color: var(--blue-500); }

/* ---------------------------------------------------------------- */
/* DOCTOR / CLINIC MATCHING CARDS                                   */
/* ---------------------------------------------------------------- */
.match-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-sm); position: relative; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.match-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.match-card .mc-step { position: absolute; top: -14px; left: var(--sp-6); width: 30px; height: 30px; border-radius: 50%; background: var(--grad-cyan); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; box-shadow: var(--sh-glow); }

/* ---------------------------------------------------------------- */
/* DUBAI JOURNEY MAP                                                */
/* ---------------------------------------------------------------- */
.journey-map { position: relative; background: var(--grad-hero); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); overflow: hidden; }
.journey-map svg.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.journey-map .jm-path { fill: none; stroke: rgba(56,198,230,0.5); stroke-width: 2.5; stroke-dasharray: 9 9; }
.jm-points { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); }
.jm-point { text-align: center; color: #fff; }
.jm-point .jm-dot { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(56,198,230,0.6); display: grid; place-items: center; color: var(--cyan-300); backdrop-filter: blur(6px); transition: var(--t-mid); }
.jm-point.lit .jm-dot { background: var(--grad-cyan); color: #fff; transform: scale(1.12); box-shadow: var(--sh-glow); }
.jm-point .jm-dot svg { width: 26px; height: 26px; }
.jm-point strong { display: block; font-size: 0.9rem; }
.jm-point span { font-size: 0.76rem; color: rgba(255,255,255,0.7); }

/* ---------------------------------------------------------------- */
/* STICKY SERVICE SIDEBAR + LAYOUT                                  */
/* ---------------------------------------------------------------- */
.with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-7); align-items: start; }
.service-sidebar { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: var(--sp-4); }
.sidebar-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: var(--sp-5); }
.sidebar-card h4 { font-family: var(--font-body); font-size: 1rem; margin-bottom: var(--sp-3); }
.sidebar-toc a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 0.88rem; color: var(--ink-700); }
.sidebar-toc a:hover, .sidebar-toc a.active { background: var(--grey-100); color: var(--blue-500); }
.sidebar-cta { background: var(--grad-navy); color: #fff; }
.sidebar-cta h4 { color: #fff; }
.sidebar-cta p { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------- */
/* BLOG / RESOURCES                                                 */
/* ---------------------------------------------------------------- */
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.blog-card .bc-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .bc-img img { transform: scale(1.07); }
.blog-card .bc-body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.blog-card .bc-body .tag { margin-bottom: 10px; align-self: flex-start; }
.blog-card .bc-body h3 { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 8px; }
.blog-card .bc-body p { font-size: 0.88rem; flex: 1; }
.blog-card .bc-meta { font-size: 0.78rem; color: var(--ink-500); margin-top: var(--sp-4); }

/* ---------------------------------------------------------------- */
/* FAQ SEARCH                                                       */
/* ---------------------------------------------------------------- */
.faq-search { max-width: 560px; margin: 0 auto var(--sp-6); position: relative; }
.faq-search input { width: 100%; padding: 15px 18px 15px 48px; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-family: inherit; font-size: 0.98rem; background: #fff; }
.faq-search input:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 4px rgba(31,95,191,0.1); }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-500); }
.faq-item.faq-hidden { display: none; }
.faq-noresult { text-align: center; color: var(--ink-500); padding: var(--sp-5); display: none; }
.faq-noresult.show { display: block; }

/* ---------------------------------------------------------------- */
/* FLOATING LANGUAGE ASSISTANT                                      */
/* ---------------------------------------------------------------- */
.lang-assist { position: fixed; left: 20px; bottom: 84px; z-index: 902; }
.lang-assist-btn { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-lg); border: 1px solid var(--line); font-weight: 600; font-size: 0.85rem; color: var(--navy-800); }
.lang-assist-btn svg { width: 18px; height: 18px; color: var(--blue-500); }
.lang-assist-panel { position: absolute; left: 0; bottom: 56px; width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-4); display: none; }
.lang-assist-panel.open { display: block; animation: fadeUp var(--t-fast) var(--ease); }
.lang-assist-panel p { font-size: 0.82rem; margin-bottom: var(--sp-3); }
.lang-assist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lang-assist-grid button { padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.85rem; font-weight: 600; color: var(--ink-900); transition: var(--t-fast); }
.lang-assist-grid button:hover { background: var(--grey-100); border-color: var(--blue-500); }

/* ---------------------------------------------------------------- */
/* RESPONSIVE                                                       */
/* ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .service-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .service-sidebar .sidebar-card { flex: 1; min-width: 240px; }
  .ig-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px) {
  .jm-points { grid-template-columns: repeat(2,1fr); gap: var(--sp-5); }
  .journey-map svg.map-lines { display: none; }
  .quiz-grid { grid-template-columns: 1fr; }
  .ig-profile { flex-direction: column; text-align: center; }
  .ig-info { text-align: center; }
  .ig-handle-row, .ig-stats { justify-content: center; }
  /* Instagram + cards become horizontal swipe carousels on mobile */
  .ig-grid, .swipe-row {
    display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4); -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ig-grid::-webkit-scrollbar, .swipe-row::-webkit-scrollbar { display: none; }
  .ig-grid > *, .swipe-row > * { scroll-snap-align: start; flex: 0 0 70%; }
  .ig-post { flex-basis: 62%; }
  .lang-assist { bottom: 134px; }
}
html[dir="rtl"] .lang-assist { left: auto; right: 20px; }
html[dir="rtl"] .planner-result { border-left: none; border-right: 4px solid var(--cyan-400); }