/*
 * Tomanify Onboarding Tour Styles
 *
 * @since 1.0.0
 */

/* Overlay */
#tomanify-tour-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:100000;
  display:none;
  transition:opacity .3s ease;
}

/* Tooltip (+ integrated arrow) */
#tomanify-tour-tooltip{
  position:absolute;
  z-index:100010; /* above highlights */
  display:none;
  max-width:380px;
  background:#ffeaf3;
  color:#222;
  border:2px solid #ff4fa0;
  border-radius:10px;
  box-shadow:0 10px 35px rgba(0,0,0,.3);
  padding:16px 16px 12px;
  line-height:1.6;
  transition:all .25s ease;
}
#tomanify-tour-tooltip h4{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  color:#ff007a;
}
#tomanify-tour-tooltip p{
  margin:0 0 12px;
  color:#333;
  font-size:14px;
  line-height:1.7;
}
#tomanify-tour-actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:10px;
}
.tomanify-tour-btn{
  background:#e0e0e0; border:none; border-radius:6px;
  padding:7px 14px; cursor:pointer; font-weight:600; color:#333;
  transition:all .2s ease;
}
.tomanify-tour-btn:hover{ background:#d2d2d2; }
.tomanify-tour-btn:focus{ outline:2px solid #ff4fa0; outline-offset:2px; }
.tomanify-tour-btn--primary{ background:#2271b1; color:#fff; font-weight:700; }
.tomanify-tour-btn--primary:hover{ background:#18568c; }

/* Tooltip arrow (JS sets --arrow-x in px; ALWAYS anchor by left) */
#tomanify-tour-tooltip::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  background:#ffeaf3;
  border:2px solid #ff4fa0;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transform:rotate(45deg);
  left:var(--arrow-x,24px);  /* ← single source of truth */
  right:auto;
}
#tomanify-tour-tooltip.is-above::after{
  bottom:-10px;
  border-top:none; border-left:none;
}
#tomanify-tour-tooltip.is-below::after{
  top:-10px;
  border-bottom:none; border-right:none;
}

/* Remove old detached pointer if present */
#tomanify-tour-pointer{ display:none !important; }

/* Intro/Outro (centered modal) */
#tomanify-tour-tooltip.tomanify-tour-intro,
#tomanify-tour-tooltip.tomanify-tour-outro{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#ffe2f0 0%,#fff0f6 100%);
  color:#333; text-align:center;
  border:2px solid #ff4fa0;
  box-shadow:0 10px 40px rgba(255,79,160,.35);
  animation:popIn .4s ease;
}
#tomanify-tour-tooltip.tomanify-tour-intro h4,
#tomanify-tour-tooltip.tomanify-tour-outro h4{
  font-size:20px; color:#ff007a; margin-bottom:12px;
}
#tomanify-tour-tooltip.tomanify-tour-intro p,
#tomanify-tour-tooltip.tomanify-tour-outro p{
  font-size:15px; color:#444; line-height:1.8;
  text-align:left; /* default for LTR */
}
/* Override the hard left-align for intro/outro paragraphs when RTL */
#tomanify-tour-tooltip[dir="rtl"].tomanify-tour-intro p,
#tomanify-tour-tooltip[dir="rtl"].tomanify-tour-outro p{
  text-align:right;
}

#tomanify-tour-tooltip.tomanify-tour-intro::after,
#tomanify-tour-tooltip.tomanify-tour-outro::after{ display:none; }

/* Animations */
@keyframes popIn{
  from{ opacity:0; transform:translate(-50%,-48%) scale(.95); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Small screens */
@media (max-width:600px){
  #tomanify-tour-tooltip{ max-width:90%; padding:14px; }
}

/* Highlight ring (generic) */
.tomanify-tour-highlight{
  position:relative;
  z-index:100002 !important;
  box-shadow:0 0 0 3px #ff4fa0, 0 0 0 8px rgba(255,79,160,.25);
  border-radius:6px;
  transition:box-shadow .3s ease;
}

/* Postbox highlight (covers header + inside) */
#tomanify_foreign_fields.tomanify-tour-highlight{
  position:relative;
  z-index:100003 !important;
  box-shadow:none;
}
#tomanify_foreign_fields.tomanify-tour-highlight::after{
  content:"";
  position:absolute;
  top:-12px; right:-12px; bottom:-12px; left:-12px;
  border:2px solid #ff4fa0;
  border-radius:14px;
  background:#fff8fb;
  box-shadow:0 4px 24px rgba(255,79,160,.25);
  z-index:-1;
  pointer-events:none;
}
#tomanify_foreign_fields.tomanify-tour-highlight .postbox-header,
#tomanify_foreign_fields.tomanify-tour-highlight .hndle,
#tomanify_foreign_fields.tomanify-tour-highlight .handle-actions,
#tomanify_foreign_fields.tomanify-tour-highlight .inside{
  position:relative;
  z-index:0;
  background:#fff;
  border-radius:10px;
}
#tomanify_foreign_fields.tomanify-tour-highlight h2,
#tomanify_foreign_fields.tomanify-tour-highlight label{
  color:#111;
}

/* Field-specific safe background (optional) */
#tomanify-meta-chek-box-foreign.tomanify-tour-highlight,
#tomanify-meta-chek-box-foreign.tomanify-tour-highlight .inside,
#tomanify-meta-chek-box-foreign.tomanify-tour-highlight .tomanify-meta,
#tomanify-meta-foreign-price.tomanify-tour-highlight,
#tomanify-meta-foreign-price.tomanify-tour-highlight .inside,
#tomanify-meta-foreign-price.tomanify-tour-highlight .tomanify-meta,
#tomanify-meta-currency.tomanify-tour-highlight,
#tomanify-meta-currency.tomanify-tour-highlight .inside,
#tomanify-meta-currency.tomanify-tour-highlight .tomanify-meta,
#tomanify-meta-margin.tomanify-tour-highlight,
#tomanify-meta-margin.tomanify-tour-highlight .inside,
#tomanify-meta-margin.tomanify-tour-highlight .tomanify-meta{
  background:#fff;
  border-radius:8px;
}
#tomanify-meta-chek-box-foreign.tomanify-tour-highlight h2,
#tomanify-meta-chek-box-foreign.tomanify-tour-highlight label,
#tomanify-meta-foreign-price.tomanify-tour-highlight h2,
#tomanify-meta-foreign-price.tomanify-tour-highlight label,
#tomanify-meta-currency.tomanify-tour-highlight h2,
#tomanify-meta-currency.tomanify-tour-highlight label,
#tomanify-meta-margin.tomanify-tour-highlight h2,
#tomanify-meta-margin.tomanify-tour-highlight label{
  color:#222;
}

/* Products table highlight (full frame) */
#tomanify-products-table.tomanify-tour-highlight{
  position:relative;
  z-index:100003 !important;
}
#tomanify-products-table.tomanify-tour-highlight::after{
  content:"";
  position:absolute;
  top:-12px; left:-12px; right:-12px; bottom:-12px;
  border:2px solid #ff4fa0;
  border-radius:12px;
  background:#fff8fb;
  box-shadow:0 4px 24px rgba(255,79,160,.25);
  z-index:-1;
  pointer-events:none;
  transition:all .25s ease;
}
#tomanify-products-table.tomanify-tour-highlight th,
#tomanify-products-table.tomanify-tour-highlight td{
  background:#fff;
  color:#111;
}

/* ==========================================
   RTL & Language Adjustments
   ========================================== */

/* When container (wrap) marks RTL */
.tomanify-rtl #tomanify-tour-tooltip{ direction:rtl; text-align:right; }

/* When document or tooltip itself is RTL */
html[dir="rtl"] #tomanify-tour-tooltip{ direction:rtl; text-align:right; }
#tomanify-tour-tooltip[dir="rtl"]{ direction:rtl; text-align:right; }

/* Font policy in RTL/Persian: force inherit to avoid admin Arial fallback */
.tomanify-rtl #tomanify-tour-tooltip,
.tomanify-rtl #tomanify-tour-tooltip * ,
html[dir="rtl"] #tomanify-tour-tooltip,
html[dir="rtl"] #tomanify-tour-tooltip * ,
html:lang(fa) #tomanify-tour-tooltip,
html:lang(fa) #tomanify-tour-tooltip * {
  font-family: inherit;
}

/* Generic white "plate" behind any compact highlighted element */
.tomanify-tour-highlight.tomanify-plate,
th .tomanify-tour-highlight,
td .tomanify-tour-highlight,
.tomanify-products .tomanify-tour-highlight {
  position: relative;
  z-index: 100003 !important;
}

/* The white plate itself (kept subtle + same pink frame) */
.tomanify-tour-highlight.tomanify-plate::after,
th .tomanify-tour-highlight::after,
td .tomanify-tour-highlight::after,
.tomanify-products .tomanify-tour-highlight::after {
  content: "";
  position: absolute;
  inset: -10px;                 /* padding around tight targets */
  background: #fff;
  border: 2px solid #ff4fa0;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(255,79,160,.25);
  z-index: -1;
  pointer-events: none;
}

/* If your products list uses specific IDs for columns, keep these too */
#tomanify-col-foreign-price.tomanify-tour-highlight,
#tomanify-col-currency.tomanify-tour-highlight,
#tomanify-col-margin.tomanify-tour-highlight,
#tomanify-col-final.tomanify-tour-highlight {
  background: #fff;
  border-radius: 8px;
}

/* (Optional) if you have a separate "buy price" column id, include it: */
#tomanify-col-buy-price.tomanify-tour-highlight {
  background: #fff;
  border-radius: 8px;
}
/* === Solid highlight for input fields (for real <input> elements) === */
#tomanify-input-cagr.tomanify-tour-highlight{
  position: relative;
  z-index: 100003 !important;
  background: #fff;                 /* White background layer */
  border-radius: 8px;
  outline: 2px solid #ff4fa0;       /* Pink highlight frame near the edge */
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(255,79,160,.20); /* Soft outer glow */
}

/* Ensure the outer glow remains visible even if the parent has overflow:hidden */
#tomanify-input-cagr.tomanify-tour-highlight,
#tomanify-input-cagr.tomanify-tour-highlight *{
  overflow: visible !important;
}

/* ==== Button ordering for LTR vs RTL layouts ==== */

/* Base layout: group is right-aligned inside the tooltip */
#tomanify-tour-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end; /* Buttons aligned to the right edge */
}

/* Default order (LTR): Back | End | Next  → visually right to left */
#tomanify-tour-actions [data-act="back"]{ order:1; }
#tomanify-tour-actions [data-act="end"] { order:2; }
#tomanify-tour-actions [data-act="next"]{ order:3; }

/* RTL: logical reversed order — Next on the left, Back on the right */
html[dir="rtl"] #tomanify-tour-actions,
#tomanify-tour-tooltip[dir="rtl"] #tomanify-tour-actions{
  flex-direction:row;            /* Ensure normal row direction (not row-reverse) */
}
html[dir="rtl"] #tomanify-tour-actions [data-act="next"],
#tomanify-tour-tooltip[dir="rtl"] #tomanify-tour-actions [data-act="next"]{ order:1; }
html[dir="rtl"] #tomanify-tour-actions [data-act="end"],
#tomanify-tour-tooltip[dir="rtl"] #tomanify-tour-actions [data-act="end"]{  order:2; }
html[dir="rtl"] #tomanify-tour-actions [data-act="back"],
#tomanify-tour-tooltip[dir="rtl"] #tomanify-tour-actions [data-act="back"]{ order:3; }

/* The Start button in the intro screen is not affected by these ordering rules */