/* /public_html/assets/explain.css
   Oman Academy - Explain (Onboarding)
   ✅ Outside = dark overlay
   ✅ Target area = fully normal (SVG mask hole) => exact rounded hole (no مربع)
   ✅ Close (X) = NO background / NO border (as requested) + hover red
*/

:root{
  --oa-explain-z: 999999;
  --oa-dim: rgba(0,0,0,.78);
  --oa-shadow: 0 24px 90px rgba(0,0,0,.32);

  /* Ring */
  --oa-ring-a: rgba(243,146,0,.18);
  --oa-ring-b: rgba(243,146,0,.55);
}

.oa-explain-root{
  position: fixed;
  inset: 0;
  z-index: var(--oa-explain-z);
  display: none;
  direction: rtl;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Fullscreen SVG overlay with mask */
.oa-explain-svg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
  display: block;
}

/* Pulsing highlight ring (separate div above overlay) */
.oa-explain-target{
  position: fixed;
  pointer-events: none;
  box-shadow: var(--oa-shadow), 0 0 0 4px var(--oa-ring-a), 0 0 0 1px var(--oa-ring-b) inset;
  background: rgba(255,255,255,.02);
}

@keyframes oaPulse {
  0%   { box-shadow: var(--oa-shadow), 0 0 0 4px rgba(243,146,0,.18), 0 0 0 1px rgba(243,146,0,.55) inset; }
  50%  { box-shadow: var(--oa-shadow), 0 0 0 6px rgba(243,146,0,.28), 0 0 0 1px rgba(243,146,0,.55) inset; }
  100% { box-shadow: var(--oa-shadow), 0 0 0 4px rgba(243,146,0,.18), 0 0 0 1px rgba(243,146,0,.55) inset; }
}
.oa-explain-target.oa-pulse{ animation: oaPulse 1.2s ease-in-out infinite; }

/* Tooltip card */
.oa-explain-card{
  position: fixed;
  width: min(460px, calc(100vw - 24px));
  background: rgba(255,255,255,.96);
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.30);
  padding: 14px 14px 12px;
  pointer-events: auto;
}

html.dark .oa-explain-card{
  background: rgba(17,24,39,.92);
  color: #fff;
  border-color: rgba(255,255,255,.10);
}

/* Close X button (NO background / NO border) */
.oa-explain-x{
  position: absolute;
  top: 8px;
  left: 8px; /* RTL: close on left like your screenshot */
  width: 34px;
  height: 34px;
  border: 0;
  outline: none;
  background: transparent;   /* ✅ no background */
  box-shadow: none;          /* ✅ no ring */
  border-radius: 12px;       /* for hover hit area only (no visible background) */
  color: rgba(71,85,105,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.oa-explain-x:hover{
  color: rgba(220,38,38,1); /* red-600 */
}
.oa-explain-x:active{ transform: scale(.98); }

html.dark .oa-explain-x{
  color: rgba(226,232,240,1);
}
html.dark .oa-explain-x:hover{
  color: rgba(248,113,113,1); /* red-400 */
}

.oa-explain-title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.6;
  padding-left: 44px; /* space for X */
}

.oa-explain-text{
  margin-top: 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(51,65,85,1);
}
html.dark .oa-explain-text{ color: rgba(226,232,240,.86); }

.oa-explain-foot{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.oa-explain-step{
  font-weight: 900;
  font-size: 11px;
  color: rgba(100,116,139,1);
}
html.dark .oa-explain-step{ color: rgba(226,232,240,.65); }

.oa-explain-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  direction:ltr;
}

.oa-explain-btn{
  height: 34px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(241,245,249,1);
  color: rgba(51,65,85,1);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
html.dark .oa-explain-btn{
  background: rgba(31,41,55,1);
  border-color: rgba(255,255,255,.10);
  color: rgba(226,232,240,1);
}

.oa-explain-btn-primary{
  background: rgba(243,146,0,1);
  border-color: rgba(243,146,0,1);
  color: #fff;
}
.oa-explain-btn-primary:hover{ filter: brightness(0.95); }

body.oa-explain-open{ overflow: hidden; }