/* HealthOps — تسويق: عدّادات، AOS، GLightbox، معرض، breadcrumb */

/* ===== Trust bar ===== */
.trust-bar{
  background:linear-gradient(90deg,var(--primary-050),#fff,var(--primary-050));
  border-top:1px solid var(--border);padding:14px 0;
}
.hero .trust-bar{background:transparent;border-top:1px solid rgba(30,31,75,.08);border-bottom:none}
.trust-bar-in{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.trust-bar-in span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.trust-bar-in svg{width:17px;height:17px;color:var(--primary)}

/* ===== Hero live iframe ===== */
.hero-live{position:relative}
.hero-live-badge{
  position:absolute;top:14px;inset-inline-start:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;color:#fff;
  background:var(--success);padding:5px 12px;border-radius:99px;
  box-shadow:0 4px 14px rgba(15,124,84,.35);
}
.hero-live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#7EE8B8;animation:hop-pulse 1.4s ease infinite}
@keyframes hop-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-preview-frame .pf-screen{height:380px}
.hero-preview-frame .pf-screen iframe{transform:scale(.55);transform-origin:top right}
@media(max-width:920px){.hero-preview-frame .pf-screen{height:300px}.hero-preview-frame .pf-screen iframe{transform:scale(.42)}}

/* ===== Screenshot frames (template pages + modal) ===== */
.shot-frame{background:#fff;border:1px solid var(--border,#ECEDF5);border-radius:16px;box-shadow:0 12px 32px rgba(45,46,90,.11);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--bg-soft,#F4F5FB);border-bottom:1px solid var(--border,#ECEDF5)}
.shot-bar i{width:10px;height:10px;border-radius:50%;display:inline-block}
.shot-bar i:nth-child(1){background:#F2B8AE}.shot-bar i:nth-child(2){background:#F3DCA6}.shot-bar i:nth-child(3){background:#B7E3C2}
.shot-frame img{width:100%;height:auto;display:block}

/* AOS fallback → hop-reveal fallback */
body:not(.hop-motion-ready):not(.hop-no-motion) [data-hop-reveal]{opacity:1!important;transform:none!important}

/* ===== Screenshot gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:720px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{
  display:block;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:#fff;
  box-shadow:var(--shadow-sm);transition:.2s;position:relative;
}
.gallery-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-100)}
.gallery-thumb{
  min-height:300px;padding:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--bg-soft);position:relative;
}
.gallery-thumb img{width:100%;height:auto;max-height:320px;object-fit:contain;display:block}
.gallery-cap{padding:14px 16px}
.gallery-cap h4{font-size:15px;margin-bottom:4px}
.gallery-cap p{font-size:13px;color:var(--muted);line-height:1.5}
.gallery-zoom{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(19,21,46,.35);opacity:0;transition:.2s;color:#fff;font-weight:800;font-size:13px;
}
.gallery-item:hover .gallery-zoom{opacity:1}

/* ===== How it looks ===== */
.look-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:720px){.look-grid{grid-template-columns:1fr}}
.look-card{display:flex;gap:18px;align-items:flex-start;padding:22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.look-num{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  background:var(--primary-050);color:var(--primary-700);
  display:grid;place-items:center;font-weight:800;font-size:16px;
}
.look-card h4{font-size:16px}.look-card p{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.65}

/* ===== Sticky mobile CTA ===== */
.sticky-cta{
  display:none;position:fixed;bottom:0;inset-inline:0;z-index:45;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(30,31,75,.12);
  gap:10px;
}
.sticky-cta .btn{flex:1;justify-content:center;padding:12px 16px}
@media(max-width:720px){.sticky-cta{display:flex}body{padding-bottom:72px}}

/* ===== Back to top ===== */
.back-top{
  position:fixed;bottom:88px;inset-inline-start:20px;z-index:44;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);
  background:#fff;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;
}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top:hover{color:var(--primary);border-color:var(--primary)}
.back-top svg{width:20px;height:20px}
@media(max-width:720px){.back-top{bottom:80px;inset-inline-start:14px}}

/* ===== Animated counters ===== */
.stat .n{transition:opacity .3s}
.stat.counted .n{animation:stat-pop .5s ease}
@keyframes stat-pop{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1);opacity:1}}

/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--primary-700)}
.breadcrumb svg{width:14px;height:14px;opacity:.5}
.breadcrumb [aria-current]{color:var(--ink)}

/* ===== Accordion (template inside) ===== */
.inside-acc{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.inside-item{border-bottom:1px solid var(--border)}
.inside-item:last-child{border-bottom:none}
.inside-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:transparent;border:0;font-family:inherit;
  font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;text-align:start;
}
.inside-q svg{width:18px;height:18px;color:var(--muted);transition:.2s;flex-shrink:0}
.inside-item.open .inside-q svg{transform:rotate(45deg)}
.inside-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.inside-item.open .inside-a{max-height:600px}
.inside-a-in{padding:0 20px 18px;color:var(--muted);font-size:14px;line-height:1.7}
.inside-a-in ul{margin:8px 0 0;padding:0 18px 0 0;list-style:disc}
.inside-a-in li{margin-bottom:6px}

/* ===== Use cases / audience ===== */
.use-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.use-grid{grid-template-columns:1fr}}
.use-panel{padding:24px;border-radius:var(--radius);border:1px solid var(--border);background:#fff}
.use-panel h3{font-size:17px;margin-bottom:12px}
.use-panel ul{margin:0;padding:0 18px 0 0;list-style:none}
.use-panel li{position:relative;padding-inline-start:18px;margin-bottom:10px;font-size:14px;color:var(--muted);line-height:1.6}
.use-panel li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--primary)}

/* ===== Template FAQ ===== */
.tpl-faq .qa{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.tpl-faq .qa-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;background:transparent;border:0;font-family:inherit;
  font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;text-align:start;
}
.tpl-faq .qa-a{max-height:0;overflow:hidden;transition:max-height .3s}
.tpl-faq .qa.open .qa-a{max-height:300px}
.tpl-faq .qa-a>div{padding:0 18px 16px;color:var(--muted);font-size:14px;line-height:1.7}

/* ===== Related templates ===== */
.related-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.related-row a{
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;
  border:1px solid var(--border-strong);color:var(--muted);transition:.15s;
}
.related-row a:hover,.related-row a.on{border-color:var(--primary);color:var(--primary-700);background:var(--primary-050)}

/* ===== Before/after (Pro) ===== */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.ba-grid{grid-template-columns:1fr}}
.ba-card{padding:24px;border-radius:var(--radius-lg);border:1px solid var(--border)}
.ba-before{background:#FFF5F5;border-color:#F5D0D0}
.ba-after{background:var(--primary-050);border-color:var(--primary-100)}
.ba-card h3{font-size:17px;margin-bottom:14px}
.ba-card ul{margin:0;padding:0 16px 0 0;font-size:14px;color:var(--muted);line-height:1.75}

/* ===== Golden thread SVG ===== */
.golden-thread{max-width:900px;margin:0 auto}
.golden-thread svg{width:100%;height:auto}
.gt-node{cursor:pointer;transition:.2s}
.gt-node:hover circle{filter:brightness(1.1)}
.gt-line{stroke:var(--primary);stroke-width:2;fill:none;stroke-dasharray:6 4;animation:gt-flow 20s linear infinite}
@keyframes gt-flow{to{stroke-dashoffset:-200}}
@media(prefers-reduced-motion:reduce){.gt-line{animation:none}.hero-live-badge::before{animation:none}}

/* ===== Pricing badge ===== */
.price-card.featured{position:relative;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-lg)}
.price-value-tag{
  position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:11px;font-weight:800;
  padding:4px 14px;border-radius:99px;white-space:nowrap;
}
html[dir="rtl"] .price-value-tag{transform:translateX(50%)}