/* ============================================================
 * styles/feature-tour.css — بطاقة «نسخة جديدة محسّنة» والجولة التعريفية (تصميم محمد — 16 أكتوبر)
 * طبقة بملء الشاشة تجمّد الصفحة؛ البطاقة لوحة سفلية (النموذج «أ»)، والشرائح لقطة حقيقية بضوء على العنصر وبطاقة شرح.
 * مظهر داكن واحد مقصود للثيمين (اللقطات داكنة). — One deliberate dark look for both themes (the shots are dark).
 * ============================================================ */
html.tour-open,html.tour-open body{overflow:hidden !important;}
.tour-overlay{position:fixed;inset:0;z-index:5000;font-family:'IBM Plex Sans Arabic',sans-serif;color:#EAF1F7;direction:rtl;}
.tour-card-mode{background:rgba(3,8,14,.72);}
.tour-slides-mode{background:#03080E;display:flex;align-items:center;justify-content:center;}

/* ===== البطاقة: نفس لوحة «نسخة جديدة متاحة» الكهرمانية (styles/update-sheet.css) — the card reuses the amber update sheet ===== */
.tour-card{animation:tourUp .3s ease-out;}
@keyframes tourUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ===== الشرائح — the slides ===== */
.tour-stage{position:relative;overflow:hidden;border-radius:0;}
.tour-stage.loading .tour-shot{visibility:hidden;}
.tour-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
/* الثقب: ظل ضخم يعتّم كل ما حوله، وإطار أخضر حول العنصر — the hole: a huge shadow dims everything around, a green frame */
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(3,8,14,.8);outline:2.5px solid #4FE8C8;outline-offset:4px;transition:all .3s ease;pointer-events:none;}
.tour-tip{position:absolute;left:16px;right:16px;box-sizing:border-box;
  background:#0F1D2E;border:1.5px solid rgba(79,232,200,.5);border-radius:20px;padding:16px 18px;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 34px rgba(0,0,0,.5);}
.tour-tip::before{content:'';position:absolute;left:var(--arrow-x, 50%);width:16px;height:16px;margin-left:-8px;background:#0F1D2E;
  border-left:1.5px solid rgba(79,232,200,.5);border-top:1.5px solid rgba(79,232,200,.5);}
.tour-tip.below::before{top:-9px;transform:rotate(45deg);}
.tour-tip.above::before{bottom:-9px;transform:rotate(225deg);}
.tour-tip h2{margin:0;font-size:19px;font-weight:700;line-height:1.4;}
.tour-body{display:flex;flex-direction:column;gap:8px;max-height:34vh;overflow-y:auto;scrollbar-width:thin;}
.tour-tip p{margin:0;font-size:15px;line-height:1.75;color:#DCE6EF;}
.tour-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap;}
.tour-dots{display:flex;gap:6px;}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);}
.tour-dots i.on{background:#4FE8C8;width:20px;border-radius:5px;}
.tour-nav{display:flex;gap:8px;margin-right:auto;}
.tour-count{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 18px);right:18px;z-index:2;font-size:14px;color:#DCE6EF;background:rgba(0,0,0,.45);border-radius:12px;padding:4px 10px;}
.tour-skip{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 14px);left:16px;z-index:2;background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:14px;padding:7px 16px;font-family:inherit;font-size:15px;cursor:pointer;}

/* ===== الأزرار — buttons ===== */
.tour-btn{border:none;border-radius:14px;font-family:inherit;font-weight:700;font-size:16px;padding:11px 20px;cursor:pointer;}
.tour-btn.primary{background:linear-gradient(90deg,#4FE8C8,#25D7B0,#1FB8C9);color:#04261D;}
.tour-btn.ghost{background:rgba(255,255,255,.1);color:#EAF1F7;}
.tour-btn:focus-visible,.tour-skip:focus-visible{outline:2px solid #4FE8C8;outline-offset:2px;}