/* Custom styles */
* {
  transition: all 0.2s ease;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.mask-fade-bottom {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* ---- Elementor (Visily designer-handoff pages) ---- */

/* Card row: lock cards in LTR flow regardless of page direction so the layout always
   reads lock → trending → target → zap left-to-right (matching the Visily design). */
.visily-cards > .elementor-container { direction: ltr; }

/* Faint vertical divider between adjacent card columns. */
.visily-cards .elementor-column + .elementor-column {
  position: relative;
}
.visily-cards .elementor-column + .elementor-column::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 1px;
  background: rgba(30, 41, 59, 0.15);
  pointer-events: none;
}
.visily-cards .elementor-icon-box-wrapper { text-align: center; }
.visily-cards .elementor-icon-box-icon { margin-inline: auto; }
.visily-cards .elementor-icon-box-description { max-width: 220px; margin-inline: auto; }

/* Equal-height card behavior: every column in a .visily-cards row stretches
   to the tallest sibling, and the widget inside fills its column. Works for
   icon-box (contact info) and html (pricing tiers) widgets alike. */
.visily-cards .elementor-row,
.visily-cards > .elementor-container > .e-con-inner,
.visily-cards > .elementor-container > .elementor-row {
  align-items: stretch;
}
.visily-cards .elementor-widget-wrap {
  height: 100%;
}
.visily-cards .elementor-widget-icon-box,
.visily-cards .elementor-widget-html {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.visily-cards .elementor-widget-icon-box > .elementor-widget-container,
.visily-cards .elementor-widget-html > .elementor-widget-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.visily-cards .elementor-widget-icon-box .elementor-icon-box-wrapper,
.visily-cards .elementor-widget-html > .elementor-widget-container > * {
  flex: 1;
}

/* ============================================================
   Design-fidelity polish across Visily-handoff pages
   ============================================================ */

/* Card chrome — white card with soft border + subtle shadow + generous padding.
   Applied to every icon-box column inside .visily-cards so contact info-cards
   and similar layouts look like the Visily mockups. */
.visily-cards .elementor-column {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
              0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 32px 24px;
  /* horizontal + vertical gap — the vertical part spaces the cards once they
     stack on tablet/mobile (the section uses elementor-column-gap-no). */
  margin: 10px 8px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.visily-cards .elementor-column:hover {
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06),
              0 16px 32px rgba(15, 23, 42, 0.08);
}

/* When using card chrome, dividers between cards no longer make sense — hide them. */
.visily-cards .elementor-column + .elementor-column::before {
  display: none;
}

/* Icon-box stack inside the card: centered, plenty of vertical breathing room. */
.visily-cards .elementor-icon-box-wrapper {
  padding: 8px 4px;
}
.visily-cards .elementor-icon-box-title {
  margin-top: 16px;
  margin-bottom: 12px;
}

/* Button polish — every primary action gets a small lift and crisp focus state. */
.elementor-button {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.elementor-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.elementor-button:focus-visible {
  outline: 2px solid #239fe2;
  outline-offset: 3px;
}

/* "Recommended" / featured badge — used on pricing-desktop's middle tier. */
.visily-recommended-badge {
  display: inline-block;
  background: #239fe2;
  color: #fff;
  font-family: Vazirmatn, Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(35, 159, 226, 0.3);
}

/* Hero badge — used on pricing/home/about hero sections. Reusable utility class. */
.visily-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #053742;
  border-radius: 9999px;
  padding: 5px 18px;
  font-family: Vazirmatn, Inter, sans-serif;
  font-size: 13px;
  color: #053742;
  font-weight: 500;
}
.visily-hero-badge::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #3C83F6;
  border-radius: 9999px;
}

/* Section divider — thin line between major sections, used on careers / pricing. */
.visily-section-divider {
  border: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0;
}

/* Section bg variants matching Visily's surface palette. */
.visily-bg-surface { background: #F5F5F6 !important; }
.visily-bg-dark    { background: #053742 !important; color: #ffffff; }
.visily-bg-light   { background: #FAFAFB !important; }

/* Phone numbers / emails should ALWAYS render LTR even in RTL context. */
.visily-ltr-number, .visily-ltr-email {
  direction: ltr;
  unicode-bidi: embed;
}

/* Trusted-by partner iconboxes: horizontal layout (name + small icon side-by-side),
   one per column, all 5 partners on one row matching Visily. */

/* Force LTR flow on the row so the partner order matches Visily's absolute-positioned
   layout (هلدینگ پارس on the LEFT, توسعه تجارت on the RIGHT) instead of mirroring
   to RTL on the Persian page. !important because Elementor's frontend.css loads
   AFTER our main.css and would otherwise win on equal specificity. */
.visily-trusted,
.visily-trusted > .elementor-container,
.visily-trusted > .elementor-container > .elementor-row {
  direction: ltr !important;
}

/* Visily applies opacity: 0.6 to the partner container so the row reads as a
   subtle credibility strip rather than a primary CTA. */
.visily-trusted > .elementor-container { opacity: 0.6; }

.visily-trusted .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.visily-trusted .elementor-icon-box-title,
.visily-trusted .elementor-widget-icon-box .elementor-icon-box-content {
  white-space: nowrap;
  margin: 0 !important;
}
.visily-trusted .elementor-icon-box-content {
  text-align: center;
}
/* Each column centers its iconbox horizontally + vertically so the 5 partners
   line up neatly. */
.visily-trusted .elementor-column > .elementor-widget-wrap {
  align-content: center;
  justify-content: center;
  align-items: center;
}
.visily-trusted .elementor-widget-icon-box { text-align: center; }
/* Keep the icon a tight 24px box, no colored chrome */
.visily-trusted .elementor-icon-box-icon { margin: 0 !important; }
.visily-trusted .elementor-icon { width: 24px; height: 24px; padding: 0; }
.visily-trusted .elementor-icon svg { width: 100%; height: 100%; }
/* Tighter gap between the 5 partner columns + drop the white card chrome that
   .visily-cards adds (we removed the class on this section already; just in case). */
.visily-trusted > .elementor-container > .elementor-row { gap: 16px; }
.visily-trusted .elementor-column {
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}

/* image-box widgets used as feature cards: let the icon illustration fill
   most of the card's width instead of staying at Elementor's tiny default. */
.elementor-widget-image-box .elementor-image-box-img {
  width: 80% !important;
  margin-inline: auto;
}
.elementor-widget-image-box .elementor-image-box-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .elementor-widget-image-box .elementor-image-box-img { width: 70% !important; }
}

/* Inner-section cards (pricing tiers built as inner-sections) should fill
   their parent column's height so all 3 tier cards line up at the bottom. */
.visily-cards > .elementor-container > .elementor-row > .elementor-column,
.visily-cards > .elementor-container > .elementor-column {
  display: flex;
}
.visily-cards .elementor-column > .elementor-widget-wrap > .elementor-section,
.visily-cards .elementor-column > .elementor-widget-wrap > .elementor-element.elementor-section,
.visily-cards .elementor-inner-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.visily-cards .elementor-inner-section > .elementor-container {
  flex: 1;
}

/* Constrain ALL image widgets to their column width — fixes the 2560px hero overflow. */
.elementor-widget-image img,
.elementor-widget-image .elementor-widget-container img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

/* CTA card chrome — gray-tinted boxed card with subtle border, shadow, padding.
   Applied to a section to make its boxed content area look like Visily's CTA card. */
.visily-cta-card > .elementor-container {
  background: #F5F5F6;
  border: 1px solid rgba(94, 130, 237, 0.10);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
              0 1px 1px rgba(0, 0, 0, 0.04);
  padding: 56px 48px;
}

/* Dark navy CTA card — used on the home page's bottom call-to-action.
   Painted on the INNER container so the dark chrome stays inside the
   section's content_width and doesn't bleed to the viewport edges. */
.visily-cta-dark > .elementor-container {
  background: #0F172A;
  border-radius: 24px;
  box-shadow: 0 8.5px 13.75px rgba(24, 26, 26, 0.22),
              0 0 2px rgba(24, 26, 26, 0.08);
  padding: 64px 48px;
}
.visily-cta-card > .elementor-container > .elementor-row {
  align-items: center;
}
/* Force right-align (start in RTL) on CTA heading + paragraph so they line up
   at the same right edge. Elementor's heading widget doesn't always emit a
   per-widget align class — this catches both paragraphs and headings. */
.visily-cta-card .elementor-widget-heading .elementor-heading-title,
.visily-cta-card .elementor-widget-text-editor p,
.visily-cta-card .elementor-widget-text-editor {
  text-align: start !important;
  margin-inline-start: 0;
  margin-inline-end: auto;
}
/* Remove the artificial max-width on the description so it spans the column. */
.visily-cta-card .elementor-widget-text-editor p {
  max-width: 100%;
}


/* ============================================================
   Responsive overrides for the unified module landings.
   The pages used to come in -desktop / -mobile pairs; now there
   is one responsive page per module and the CSS below picks up
   what Elementor's per-device controls can't reach (inline-styled
   <p> tags and hero-button flex wrap).
   ============================================================ */

@media (max-width: 767px) {
  /* Hero sub-text was hardcoded text-align:right in inline style; center it on mobile. */
  .visily-hero-sub {
    text-align: center !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }
  /* Hero CTA button row: stack the two buttons vertically full-width. */
  .elementor-widget-text-editor a[href*="page_id"],
  .elementor-widget-text-editor a[href^="#capabilities"] {
    width: 100%;
    box-sizing: border-box;
  }
  /* Trim related-modules dense desktop grid to a single column on phones. */
  #related-modules .elementor-row,
  #related-modules .elementor-container > .e-con-inner {
    flex-direction: column;
  }
}

/* Bright blue CTA card — landing page footer CTA per Visily design. */
.visily-cta-blue > .elementor-container {
  background: #239fe2;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(35,159,226,0.30);
  padding: 56px 48px;
}
@media (max-width: 767px) {
  .visily-cta-blue > .elementor-container {
    padding: 40px 24px;
    border-radius: 16px;
  }
}

/* Light-gray CTA card (payments-desktop per Visily — soft section, blue button inside). */
.visily-cta-light > .elementor-container {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  padding: 56px 48px;
}
@media (max-width: 767px) {
  .visily-cta-light > .elementor-container { padding: 40px 24px; border-radius: 14px; }
}

/* Very dark navy CTA card (fx-desktop per Visily). */
.visily-cta-deep-navy > .elementor-container {
  background: #0F172A;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.30);
  padding: 56px 48px;
}
@media (max-width: 767px) {
  .visily-cta-deep-navy > .elementor-container { padding: 40px 24px; border-radius: 14px; }
}

/* ============================================================
   Workflow step arrow connectors (payments / ai / accounting)
   ============================================================ */
/* On desktop+tablet (>=768px) draw an arrow between every adjacent pair
   of workflow step columns. The arrow sits in the inter-column gap and
   points from the higher-numbered step toward the lower-numbered one in
   the visual flow (RTL: first step on the right). */
.visily-workflow > .elementor-container > .elementor-row,
.visily-workflow > .elementor-container > .e-con-inner {
  position: relative;
}
.visily-workflow .elementor-column + .elementor-column {
  position: relative;
}
@media (min-width: 768px) {
  .visily-workflow .elementor-column + .elementor-column::before {
    content: "←";
    position: absolute;
    top: 50%;
    /* In an RTL Elementor row, the +next column is physically to the LEFT
       of the previous one; placing the pseudo at its RIGHT edge floats it
       in the gap between the two cards. */
    right: -22px;
    transform: translateY(-50%);
    z-index: 4;
    color: #239fe2;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
  }
}
/* Mobile: cards stack vertically, hide horizontal connectors */
@media (max-width: 767px) {
  .visily-workflow .elementor-column + .elementor-column::before {
    display: none;
  }
}

/* ============================================================
   Card row uniform-height for HTML-only card grids
   ============================================================
   The card-normalization pass removes per-card box-shadows and switches
   to a 1px gray border, but cards still grow with content unless their
   row equalizes them. The original .visily-cards rules only target
   icon-box / html widgets; extend to text-editor widgets too so
   challenge/capability/workflow/value/benefit cards line up. */
.elementor-widget-text-editor { display: flex; flex-direction: column; }
.elementor-widget-text-editor > .elementor-widget-container { flex: 1; display: flex; }
.elementor-widget-text-editor > .elementor-widget-container > div[style*="background:#FFFFFF"] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Inner row equalization on any inner section containing card widgets */
.elementor-inner-section > .elementor-container > .elementor-row,
.elementor-inner-section > .elementor-container > .e-con-inner {
  align-items: stretch;
}
.elementor-inner-section .elementor-widget-wrap { height: 100%; }

/* ============================================================
   Equal-height cards — the .fnry-card hammer
   ============================================================
   Every white-card div in Elementor is tagged with class="fnry-card".
   These rules cascade height:100% from the row down to the card so any
   row of cards lines up at the tallest sibling, regardless of how
   Elementor's column markup is wrapped (top-column vs inner-column,
   widget-wrap vs widget-container variants). */

/* Force the row that contains fnry-cards to stretch its columns. */
.elementor-section .elementor-container:has(.fnry-card),
.elementor-section .e-con-inner:has(.fnry-card) {
  align-items: stretch;
}

/* Every column on the chain must establish a 100% height context. */
.elementor-column:has(.fnry-card) {
  display: flex;
}
.elementor-column:has(.fnry-card) > .elementor-widget-wrap,
.elementor-column:has(.fnry-card) > .elementor-element-populated {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.elementor-column:has(.fnry-card) > .elementor-widget-wrap > .elementor-widget,
.elementor-column:has(.fnry-card) .elementor-element-populated > .elementor-widget {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.elementor-column:has(.fnry-card) .elementor-widget-text-editor > .elementor-widget-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The card itself becomes a flex column too so internal content fills. */
.fnry-card {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
/* Body paragraph gets to push toward the bottom so cards with shorter
   subtitles still bottom-align their body and look balanced. */
.fnry-card > p:last-child { margin-top: auto !important; }