/* Nadi Plastic — brand & layout overrides. Theme-independent (child theme). */
/* ---------- Design tokens (single source of truth for colour) ----------
   Blue = brand/dominant (60/30/10 rule: neutral 60, blue 30, amber 10).
   Every neutral sits on hue 215 (the brand blue's hue) with very low saturation, so the whole page
   shares one colour temperature instead of mixing pure greys with a blue brand.
   Legacy aliases at the end keep older rules in this file working. */
:root{
  /* blue — dominant */
  --nadi-blue-900:#123561; --nadi-blue-800:#1A468A; --nadi-blue-700:#2259AB;
  --nadi-blue-500:#4381BC; --nadi-blue-400:#279BE1; --nadi-blue-200:#9EC6EC;
  --nadi-blue-100:#E8F0FA; --nadi-blue-050:#F4F8FD;
  /* amber — accent only (max ~10% of a screen) */
  --nadi-amber-600:#DE9B05; --nadi-amber-500:#FAB216; --nadi-amber-400:#FFC33F; --nadi-amber-050:#FFF6E1;
  /* neutrals — blue-tinted, hue 215 */
  --nadi-ink:#14203A; --nadi-n700:#3C4656; --nadi-n600:#5A6575; --nadi-n500:#7E8896;
  --nadi-n300:#C6CDD8; --nadi-n100:#E4E9F0; --nadi-n050:#F2F5F9;
  /* dark surfaces — one navy ramp, replaces the demo's #111 / #1F1F1F / #333 greys */
  --nadi-dark-900:#0A1524; --nadi-dark-800:#0F1D31; --nadi-dark-700:#16283F; --nadi-dark-600:#1E3350;
  --nadi-on-dark-1:#EEF3F9; --nadi-on-dark-2:#B6C3D4; --nadi-on-dark-3:#8695A8;
  --nadi-dark-line:rgba(255,255,255,.10);
  /* status */
  --nadi-success:#1E9E6A; --nadi-error:#D64545; --nadi-warning:#E5A50A; --nadi-info:#279BE1;
  /* focus ring (accessibility) */
  --nadi-focus:0 0 0 3px rgba(34,89,171,.40);
  /* legacy aliases */
  --nadi-blue:var(--nadi-blue-700); --nadi-blue-dark:var(--nadi-blue-800); --nadi-yellow:var(--nadi-amber-500);
  --nadi-sky:var(--nadi-blue-400); --nadi-steel:var(--nadi-blue-500); --nadi-gray:var(--nadi-n600);
  --nadi-paper:var(--nadi-n050);
}

/* Persian typography (client fonts): headings = Shabnam, body/UI = IRANYekan. Latin letter-spacing reset (−0.03em breaks Arabic script). */
html[lang="fa-IR"] body, html[lang="fa-IR"] .elementor-widget-text-editor, html[lang="fa-IR"] .neuros-button, html[lang="fa-IR"] .elementor-button,
html[lang="fa-IR"] .main-menu, html[lang="fa-IR"] .mega-menu, html[lang="fa-IR"] input, html[lang="fa-IR"] textarea, html[lang="fa-IR"] select, html[lang="fa-IR"] button,
html[lang="fa-IR"] .elementor-accordion .elementor-tab-content, html[lang="fa-IR"] .neuros-heading .heading-subtitle, html[lang="fa-IR"] .elementor-counter-title,
html[lang="fa-IR"] .icon-box-info, html[lang="fa-IR"] .testimonial-text, html[lang="fa-IR"] .fluentform, html[lang="fa-IR"] .nadi-compare{
  font-family:"IRANYekan","Shabnam",Tahoma,Arial,sans-serif !important; letter-spacing:0 !important;
}
/* Icon fonts are exempt from the rule above: it sets IRANYekan with !important on every button, which
   stripped the glyph off icon buttons such as the scroll-to-top arrow (<button class="fontello icon-arrow-top">). */
html[lang="fa-IR"] .fontello,
html[lang="fa-IR"] .fontello:before,
html[lang="fa-IR"] [class^="icon-"]:before,
html[lang="fa-IR"] [class*=" icon-"]:before{ font-family:"fontello" !important; }
html[lang="fa-IR"] h1, html[lang="fa-IR"] h2, html[lang="fa-IR"] h3, html[lang="fa-IR"] h4, html[lang="fa-IR"] h5, html[lang="fa-IR"] h6,
html[lang="fa-IR"] .neuros-heading .heading-title, html[lang="fa-IR"] .content-slider-item-heading, html[lang="fa-IR"] .elementor-counter-number-wrapper,
html[lang="fa-IR"] .elementor-accordion .elementor-tab-title, html[lang="fa-IR"] .icon-box-title, html[lang="fa-IR"] .neuros-special-text, html[lang="fa-IR"] .nadi-compare thead th{
  font-family:"Shabnam","IRANYekan",Tahoma,Arial,sans-serif !important; letter-spacing:0 !important; font-weight:700;
}
html[lang="fa-IR"] h1,html[lang="fa-IR"] h2,html[lang="fa-IR"] h3{ line-height:1.4; }
html[lang="fa-IR"] p{ line-height:1.9; }
/* Persian-digit fonts already render numerals in Farsi; keep Latin product codes (PVC/POF) as-is */
html[lang="fa-IR"] .main-menu .menu-item a, html[lang="fa-IR"] .neuros-button{ text-transform:none !important; }
/* Persian digits inside counters/tables keep Latin glyph shapes consistent */
.nadi-num{ font-feature-settings:"tnum"; }
/* ---------- Dark surfaces ----------
   Opt-in class .nadi-dark on a section/column. Text sits in three levels instead of one white,
   and cards are separated from the ground with a hairline, because on dark a lightness step alone
   (dark-700 vs dark-900 is only 1.23:1) reads as dirt rather than elevation.
   No !important: a colour set on a widget in Elementor still wins. */
.nadi-dark{ background-color:var(--nadi-dark-800); color:var(--nadi-on-dark-2); }
.nadi-dark h1,.nadi-dark h2,.nadi-dark h3,.nadi-dark h4,.nadi-dark h5,.nadi-dark h6,
.nadi-dark .neuros-heading .heading-title,.nadi-dark .elementor-counter-number-wrapper{ color:var(--nadi-on-dark-1); }
.nadi-dark p,.nadi-dark li,.nadi-dark .elementor-widget-text-editor,.nadi-dark .elementor-counter-title,
.nadi-dark .elementor-accordion .elementor-tab-content{ color:var(--nadi-on-dark-2); }
.nadi-dark small,.nadi-dark .post-meta,.nadi-dark .post-meta *,.nadi-dark figcaption{ color:var(--nadi-on-dark-3); }
.nadi-dark a:not(.neuros-button):not(.elementor-button){ color:var(--nadi-blue-200); }
.nadi-dark a:not(.neuros-button):not(.elementor-button):hover{ color:var(--nadi-amber-400); }
.nadi-dark .neuros-heading .heading-subtitle,.nadi-dark .neuros-heading-widget [class*="subtitle"]{ color:var(--nadi-amber-400); }
.nadi-dark .elementor-accordion .elementor-tab-title,.nadi-dark .elementor-accordion .elementor-tab-title a{ color:var(--nadi-on-dark-1); border-color:var(--nadi-dark-line); }
.nadi-dark table th{ background:var(--nadi-dark-700); color:var(--nadi-on-dark-1); }
.nadi-dark table td{ border-color:var(--nadi-dark-line); color:var(--nadi-on-dark-2); }
/* Comparison table */
.nadi-compare{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:20px; border:1px solid #E0E4EA; font-size:16px; }
.nadi-compare th,.nadi-compare td{ padding:18px 20px; text-align:start; vertical-align:top; border-bottom:1px solid #E0E4EA; }
.nadi-compare thead th{ background:var(--nadi-blue); color:#fff; font-weight:700; }
.nadi-compare tbody th{ background:#F7F8FA; font-weight:700; width:22%; }
.nadi-compare tbody tr:last-child td,.nadi-compare tbody tr:last-child th{ border-bottom:0; }
@media (max-width:767px){ .nadi-compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .nadi-compare{ min-width:640px; } }
/* Contact block */
.nadi-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.nadi-contact div{ background:#fff; border:1px solid #E0E4EA; border-radius:20px; padding:22px 24px; }
.nadi-contact strong{ display:block; color:var(--nadi-gray); font-size:13px; margin-bottom:6px; font-weight:500; }
.nadi-contact a{ color:var(--nadi-ink); font-weight:700; text-decoration:none; font-size:18px; }
.nadi-dark .nadi-contact div{ background:#1F1F1F; border-color:#2A2A2A; } .nadi-dark .nadi-contact a{ color:#fff; }
/* Placeholder marker (visible only to editors via body.logged-in) */
body.logged-in .nadi-placeholder{ outline:2px dashed var(--nadi-yellow); outline-offset:4px; position:relative; }
body.logged-in .nadi-placeholder::after{ content:"placeholder — منتظر داده کارفرما"; position:absolute; top:-12px; inset-inline-start:8px; background:var(--nadi-yellow); color:#111; font-size:11px; padding:2px 8px; border-radius:6px; z-index:5; }
/* Semantic landmark spacing safety */
main.nadi-main{ display:block; }
/* Vertical rhythm: demo sections use 150px paddings; tighten slightly on mobile */
@media (max-width:767px){ .elementor-section.nadi-section{ padding-top:60px !important; padding-bottom:60px !important; } }
/* Footer newsletter block */
.nadi-footer-form-title{ color:var(--nadi-on-dark-1); font-weight:700; margin-bottom:14px; font-size:18px; }
/* Dark surfaces: theme widgets that ship hard-coded light-mode colours */
.nadi-dark .neuros-heading-widget .neuros-heading-content{ color:var(--nadi-on-dark-1); }
.nadi-dark .nadi-compare{ border-color:var(--nadi-dark-line); }
.nadi-dark .nadi-compare tbody th,.nadi-dark .nadi-compare td{ background:var(--nadi-dark-700); color:var(--nadi-on-dark-2); border-color:var(--nadi-dark-line); }
.nadi-dark .blog-item,.nadi-dark .standard-blog-item-wrapper,.nadi-dark .grid-blog-item-wrapper{ background:var(--nadi-dark-700); border-color:var(--nadi-dark-line); }
.nadi-dark .blog-item *,.nadi-dark .standard-blog-item-wrapper *{ color:var(--nadi-on-dark-2); }
.nadi-dark .blog-item a:hover{ color:var(--nadi-amber-400); }
.nadi-dark .elementor-icon-box-wrapper,.nadi-dark .neuros-icon-box{ color:var(--nadi-on-dark-2); }

/* ---------- Hero content slider: readability overlay ----------
   The widget's "Overlay Color" sets background-color on the same element as the background image,
   so it is painted UNDER the photo and has no visible effect. Real overlay layer instead:
   desktop = darker on the text side (right in RTL, left in LTR), mobile = vertical wash.
   Opt out per widget with the CSS class "nadi-no-overlay" (Advanced > CSS Classes). */
.elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-item.slider-item { position: relative; isolation: isolate; }
.elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-item.slider-item::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(8, 24, 48, .38) 0%, rgba(8, 24, 48, .58) 50%, rgba(8, 24, 48, .72) 100%);
}
.elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-item.slider-item > .elementor-section { position: relative; z-index: 1; }
@media (min-width: 992px) {
  html[dir="rtl"] .elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-item.slider-item::before {
    background: linear-gradient(to left, rgba(8, 24, 48, .80) 0%, rgba(8, 24, 48, .52) 40%, rgba(8, 24, 48, .18) 70%, rgba(8, 24, 48, 0) 92%);
  }
  html[dir="ltr"] .elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-item.slider-item::before {
    background: linear-gradient(to right, rgba(8, 24, 48, .80) 0%, rgba(8, 24, 48, .52) 40%, rgba(8, 24, 48, .18) 70%, rgba(8, 24, 48, 0) 92%);
  }
}
/* ---------- Services slider (applications on the home page): keep two tags on one line ----------
   Theme pills are 12px text with 22px side padding, so two film tags need ~272px while a 4-column card offers
   215–240px and the second tag drops to a new line. One non-wrapping row, tighter padding, and a smaller size when
   the card itself is narrow (container query, independent of screen breakpoints); ellipsis only as a last resort. */
.service-listing-wrapper.service-slider-listing .service-item .post-meta-item-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  container-type: inline-size;
}
.service-listing-wrapper.service-slider-listing .service-item .post-meta-item-tags a,
.service-listing-wrapper.service-slider-listing .service-item .post-meta-item-tags a:not(:last-child) {
  flex: 0 1 auto;
  min-width: 0;
  margin: 2px 0;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (max-width: 232px) {
  .service-listing-wrapper.service-slider-listing .service-item .post-meta-item-tags a,
  .service-listing-wrapper.service-slider-listing .service-item .post-meta-item-tags a:not(:last-child) {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
  }
}

/* ---------- Theme background lines: off ----------
   Neuros paints four thin vertical lines over the whole page (.body-lines); they show through every section without
   a background colour. */
.body-lines {
  display: none !important;
}

/* ---------- Persian paragraphs: justified ----------
   Page and post content only (not header/footer), so short centred UI lines elsewhere are untouched. */
html[lang="fa-IR"] [data-elementor-type="wp-page"] p,
html[lang="fa-IR"] [data-elementor-type="wp-post"] p,
html[lang="fa-IR"] .elementor-widget-theme-post-content p,
html[lang="fa-IR"] .post-content p,
html[lang="fa-IR"] .entry-content p {
  text-align: justify;
  text-justify: inter-word;
}
/* short display texts over images and inside sliders/cards: justifying a two-line lead leaves big word gaps */
html[lang="fa-IR"] .elementor-widget-neuros_content_slider p,
html[lang="fa-IR"] .elementor-widget-neuros_testimonial_carousel p,
html[lang="fa-IR"] .nadi-stack p {
  text-align: inherit;
}
html[lang="fa-IR"] [data-elementor-type="wp-page"] .has-text-align-center,
html[lang="fa-IR"] [data-elementor-type="wp-page"] .elementor-align-center p,
html[lang="fa-IR"] .entry-content .has-text-align-center {
  text-align: center;
}

/* ---------- Persian heading scale (Shabnam) ----------
   Fluid sizes so headings stay proportionate on every device instead of the 60-80px Latin demo sizes.
   Specificity is deliberate: html[lang][lang] (0,2,2) outranks the theme's own h1-h6 rules but stays BELOW
   Elementor's per-widget rules (.elementor-<page> .elementor-element-<id> ... = 0,3,0), so a size set on a widget
   in Elementor always wins. No !important for the same reason.
   Values at 1920 / 1440 / 1024 / 768 / 390 px: h1 50/48/40/35/30, h2 44/40/33/29/26, h3 26/25/22/20/20. */
html[lang="fa-IR"][lang] h1 {
  font-size: clamp(30px, 1.9vw + 20px, 50px);
  line-height: 1.4;
  font-weight: 800;
}
html[lang="fa-IR"][lang] h2 {
  font-size: clamp(26px, 1.6vw + 17px, 44px);
  line-height: 1.45;
  font-weight: 700;
}
html[lang="fa-IR"][lang] h3 {
  font-size: clamp(20px, 0.7vw + 15px, 26px);
  line-height: 1.55;
  font-weight: 700;
}
html[lang="fa-IR"][lang] h4 {
  font-size: clamp(18px, 0.45vw + 14px, 22px);
  line-height: 1.6;
  font-weight: 700;
}
html[lang="fa-IR"][lang] h5 {
  font-size: clamp(17px, 0.3vw + 13.5px, 20px);
  line-height: 1.6;
  font-weight: 700;
}
html[lang="fa-IR"][lang] h6 {
  font-size: clamp(16px, 0.2vw + 13px, 18px);
  line-height: 1.65;
  font-weight: 700;
}
/* hero slider: one display size for every slide, whatever its tag (slide 1 is h1, the others h2) */
html[lang="fa-IR"] .elementor-widget-neuros_content_slider :is(h1, h2, h3) {
  font-size: clamp(30px, 2.1vw + 18px, 52px);
  line-height: 1.35;
  font-weight: 800;
}

/* ---------- FAQ (Elementor accordion, counter style): Persian digits ---------- */
@counter-style nadi-persian-2 {
  system: extends persian;
  pad: 2 "۰";
}
html[lang="fa-IR"] .elementor-widget-accordion.elementor-accordion-style-counter .elementor-accordion .elementor-accordion-title::before {
  content: counter(accordion-counter, nadi-persian-2) !important;
  font-family: "IRANYekan", "Shabnam", Tahoma, Arial, sans-serif !important;
}

/* legibility over bright areas of the photo, without darkening the whole image */
.elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-slider-item-heading,
.elementor-widget-neuros_content_slider:not(.nadi-no-overlay) .content-slider-item-text {
  text-shadow: 0 2px 22px rgba(4, 12, 28, .55), 0 1px 3px rgba(4, 12, 28, .35);
}

/* ---------- Button system (4 tiers) ----------
   The theme renders every button as the same .neuros-button; "filled" only ever came from per-widget
   Elementor settings, which is why the page ended up with 7 amber buttons carrying white text at a
   1.83:1 contrast ratio. Tiers are opt-in classes set on the widget (Advanced > CSS Classes):
     nadi-btn-primary  filled blue      — the standard call to action            white on #2259AB  6.81:1
     nadi-btn-accent   filled amber     — hero + closing box only, ink text      #14203A on #FAB216 8.82:1
     nadi-btn-outline  blue outline     — secondary action
     (no class)        text + arrow     — tertiary action
   Specificity is kept at (0,2,0) so these beat the theme's own rules but a colour set on the widget
   in Elementor still wins. */
.elementor-widget-neuros_button .neuros-button,
.elementor-widget-neuros_button .neuros-button:visited{ color:var(--nadi-blue-700); }
.elementor-widget-neuros_button .neuros-button:hover{ color:var(--nadi-blue-800); }

.elementor-widget.nadi-btn-primary .neuros-button,
.elementor-widget.nadi-btn-primary .elementor-button{ background-color:var(--nadi-blue-700); border-color:var(--nadi-blue-700); color:#FFFFFF; }
.elementor-widget.nadi-btn-primary .neuros-button:hover,
.elementor-widget.nadi-btn-primary .elementor-button:hover{ background-color:var(--nadi-blue-800); border-color:var(--nadi-blue-800); color:#FFFFFF; }
.elementor-widget.nadi-btn-primary .neuros-button:active{ background-color:var(--nadi-blue-900); border-color:var(--nadi-blue-900); }

.elementor-widget.nadi-btn-accent .neuros-button,
.elementor-widget.nadi-btn-accent .elementor-button{ background-color:var(--nadi-amber-500); border-color:var(--nadi-amber-500); color:var(--nadi-ink); }
.elementor-widget.nadi-btn-accent .neuros-button:hover,
.elementor-widget.nadi-btn-accent .elementor-button:hover{ background-color:var(--nadi-amber-600); border-color:var(--nadi-amber-600); color:var(--nadi-ink); }

.elementor-widget.nadi-btn-outline .neuros-button,
.elementor-widget.nadi-btn-outline .elementor-button{ background-color:transparent; border:1.5px solid var(--nadi-blue-700); color:var(--nadi-blue-700); }
.elementor-widget.nadi-btn-outline .neuros-button:hover,
.elementor-widget.nadi-btn-outline .elementor-button:hover{ background-color:var(--nadi-blue-700); border-color:var(--nadi-blue-700); color:#FFFFFF; }

/* on dark ground: blue has only 2.49:1 there, so the primary tier switches to amber and the outline to white */
.nadi-dark .elementor-widget.nadi-btn-primary .neuros-button,
.nadi-dark .elementor-widget.nadi-btn-accent .neuros-button{ background-color:var(--nadi-amber-400); border-color:var(--nadi-amber-400); color:var(--nadi-ink); }
.nadi-dark .elementor-widget.nadi-btn-primary .neuros-button:hover,
.nadi-dark .elementor-widget.nadi-btn-accent .neuros-button:hover{ background-color:var(--nadi-amber-500); border-color:var(--nadi-amber-500); color:var(--nadi-ink); }
.nadi-dark .elementor-widget.nadi-btn-outline .neuros-button{ border-color:rgba(255,255,255,.72); color:var(--nadi-on-dark-1); background-color:transparent; }
.nadi-dark .elementor-widget.nadi-btn-outline .neuros-button:hover{ background-color:#FFFFFF; border-color:#FFFFFF; color:var(--nadi-ink); }
.nadi-dark .elementor-widget-neuros_button .neuros-button{ color:var(--nadi-on-dark-1); }
.nadi-dark .elementor-widget-neuros_button .neuros-button:hover{ color:var(--nadi-amber-400); }

/* Visible keyboard focus — the theme ships none */
.neuros-button:focus-visible,.elementor-button:focus-visible,.ff-btn-submit:focus-visible,
.main-menu a:focus-visible,.elementor-accordion .elementor-tab-title:focus-visible{ outline:none; box-shadow:var(--nadi-focus); border-radius:inherit; }
.nadi-dark .neuros-button:focus-visible,.nadi-dark .ff-btn-submit:focus-visible{ box-shadow:0 0 0 3px rgba(255,195,63,.55); }

/* Disabled */
.neuros-button[disabled],.elementor-button[disabled],.ff-btn-submit[disabled]{ background-color:var(--nadi-n100); border-color:var(--nadi-n100); color:var(--nadi-n500); box-shadow:none; cursor:not-allowed; }

/* ---------- Forms ----------
   Fluent Forms ships its own blue (#1A7EFB). The submit button is the closing-box call to action,
   so it carries the amber tier; fields follow the neutral ramp. */
/* Fluent paints the submit from form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) — (0,3,1) — and reads
   its own --fluentform-primary variable, so the colour is set on the variable and the label at a higher weight. */
.frm-fluent-form{ --fluentform-primary:var(--nadi-amber-500); --fluentform-primary-hover:var(--nadi-amber-600); }
.nadi-dark .frm-fluent-form{ --fluentform-primary:var(--nadi-amber-400); --fluentform-primary-hover:var(--nadi-amber-500); }
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style){ background-color:var(--fluentform-primary); border-color:var(--fluentform-primary); color:var(--nadi-ink); font-weight:700; }
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style):hover{ background-color:var(--fluentform-primary-hover); border-color:var(--fluentform-primary-hover); color:var(--nadi-ink); opacity:1; }
.fluentform .ff-el-form-control{ background:#FFFFFF; border-color:var(--nadi-n100); color:var(--nadi-n700); }
.fluentform .ff-el-form-control:focus{ border-color:var(--nadi-blue-700); box-shadow:var(--nadi-focus); }
.fluentform .ff-el-form-control::placeholder{ color:var(--nadi-n500); }
.fluentform .ff-el-input--label label{ color:var(--nadi-ink); }
.fluentform .ff-el-is-error .ff-el-form-control{ border-color:var(--nadi-error); }
.fluentform .error, .fluentform .text-danger{ color:var(--nadi-error); }
.fluentform .ff-message-success{ color:var(--nadi-success); border-color:var(--nadi-success); }
.nadi-dark .fluentform .ff-el-form-control,
.elementor-widget-text-editor .fluentform .ff-el-form-control{ background:var(--nadi-dark-700); border-color:var(--nadi-dark-line); color:var(--nadi-on-dark-1); }
.nadi-dark .fluentform .ff-el-form-control::placeholder{ color:var(--nadi-on-dark-3); }
.nadi-dark .fluentform .ff-el-input--label label{ color:var(--nadi-on-dark-1); }

/* ---------- Accent gradient (numbers, decorative rules) — brand amber to brand blue ---------- */
.nadi-gradient-text{ background:linear-gradient(120deg,var(--nadi-amber-500) 0%,var(--nadi-blue-700) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nadi-dark .nadi-gradient-text{ background:linear-gradient(120deg,var(--nadi-amber-400) 0%,var(--nadi-blue-400) 100%); -webkit-background-clip:text; background-clip:text; }

/* ---------- Base text colour ----------
   The theme paints every heading #111111 (.body-container h1..h6) and body copy mid-grey. The tokens take
   over at (0,2,1): above the theme, below Elementor's per-widget rules, so a colour picked on a widget wins.
   :not(:where(...)) costs no specificity, so it only keeps these rules out of dark sections. */
html[lang="fa-IR"] :is(h1,h2,h3,h4,h5,h6):not(:where(.nadi-dark, .nadi-dark *)){ color:var(--nadi-ink); }
html[lang="fa-IR"] body{ color:var(--nadi-n700); }
html[lang="fa-IR"] hr,html[lang="fa-IR"] .elementor-divider-separator{ border-color:var(--nadi-n100); }

/* ---------- Mobile menu panel ----------
   The desktop dropdown colours are NOT set here: they come from the navigation-menu widget's own controls
   (nav_submenu_box_background / nav_submenu_item_color / nav_submenu_item_active_color) in the header
   template, whose generated CSS outranks anything this file can write without !important.
   The mobile copy of the menu is rendered outside that widget, so those rules never reach it and it keeps
   Max Mega Menu's own near-black. Scoped to the mobile container only. */
/* The mobile panel is light, so its submenus stay transparent and take the panel's background — with the
   navy of the desktop dropdown they matched the item colour and the links disappeared. */
html .mobile-header-menu-container #mega-menu-wrap-main #mega-menu-main li.mega-menu-item ul.mega-sub-menu{
  background-color: transparent;
}

/* ---------- Carousel navigation next to a heading (RTL) ----------
   The theme puts the prev/next buttons inside the heading element (h2.heading-with-pagination) and leaves
   them at the start edge, which in Persian lands under the title on the right. In RTL the title reads from
   the right, so the buttons belong on the opposite end: same line, far left. */
html[dir="rtl"] .neuros-heading.heading-with-pagination{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
}
html[dir="rtl"] .neuros-heading.heading-with-pagination > .neuros-heading-inner{ flex: 1 1 auto; min-width: 0; }
html[dir="rtl"] .neuros-heading.heading-with-pagination > .owl-nav{
  flex: 0 0 auto;
  order: 2;
  margin: 0;
  align-self: center;
  /* stays positioned: the pill outline is an absolutely placed ::after inset to this box */
  position: relative;
}
/* the theme reserves room for the buttons with a padding on the title; the flex row does that now */
html[dir="rtl"] .neuros-heading.heading-with-pagination > .neuros-heading-inner{ padding-left: 0; }

/* Market pills (audio-listing widget): the widget only exposes a border colour in Elementor, so the
   hover fill stays the demo's near-black. Background and label only — the border keeps following Elementor. */
.neuros-audio-listing .audio-item-wrapper .audio-item:hover{
  background-color: var(--nadi-blue-700);
  color: #FFFFFF;
}
.neuros-audio-listing .audio-item-wrapper .audio-item:hover .audio-item-title,
.neuros-audio-listing .audio-item-wrapper .audio-item:hover a{ color: #FFFFFF; }

/* ---------- Pricing boxes (neuros_price_item) ----------
   Used on the home page for the three films. Three things the widget does not offer:
   line breaks in the short description, equal box heights across the row, and a button that follows
   the palette. The title tag is turned into a heading in mu-plugins/nadi-core/price-item.php. */
/* line breaks come from nl2br in mu-plugins/nadi-core/price-item.php; pre-line here as well would
   render every break twice, so the description keeps normal white-space handling. */

/* equal height: the row stretches, every wrapper down to .price-item grows, and the button is pinned
   to the bottom so the three cards line up whatever the text length */
.elementor-widget-wrap:has(> .elementor-widget-neuros_price_item){ align-content: stretch; }
.elementor-widget-neuros_price_item{ display: flex; flex-direction: column; flex-grow: 1; }
.elementor-widget-neuros_price_item > .elementor-widget-container{ display: flex; flex-direction: column; flex: 1 1 auto; }
/* the widget itself keeps the theme's row layout: in the "alt" style the card is 73% wide and the image
   block sits beside it at 38.6% with a negative margin, so forcing a column here drops the image out. */
.elementor-widget-neuros_price_item .neuros-price-item-widget{ flex: 1 1 auto; align-items: stretch; }
/* the card stretches vertically as a flex item; no flex-grow, which would override its width */
.elementor-widget-neuros_price_item .price-item{ display: flex; flex-direction: column; }
.elementor-widget-neuros_price_item .price-item-inner{ display: flex; flex-direction: column; flex: 1 1 auto; }
.elementor-widget-neuros_price_item .price-item-button-container{ margin-top: auto; }
.elementor-widget-neuros_price_item .price-item-custom-fields{ margin-bottom: 24px; }

/* type: the title is an h2 and follows the Persian heading scale; the rest follows the body ramp */
.elementor-widget-neuros_price_item .price-item-title{ margin-top: 0; }
.elementor-widget-neuros_price_item .price-item-description,
.elementor-widget-neuros_price_item .price-item-custom-field{ line-height: 1.9; }

/* the check-list items read as features, so they get the brand blue marker the theme leaves grey */
.elementor-widget-neuros_price_item .price-item-custom-field:before{ color: var(--nadi-blue-700); }
/* The description is justified like the rest of the page, but only once the card itself is wide enough:
   below ~250px of text width (tablet columns and phones) justification opens word gaps wide enough to read worse than a
   ragged edge, so the measurement is the card's own width, not the viewport. The feature list keeps its
   natural alignment: a two-line item would otherwise stretch. */
.elementor-widget-neuros_price_item .price-item{ container-type: inline-size; }
@container (min-width: 250px){
  html[lang="fa-IR"] .elementor-widget-neuros_price_item .price-item-description{
    text-align: justify;
    text-justify: inter-word;
  }
}

/* The pricing row lines up with the slider because its inner section is set to Full Width in Elementor
   (the section was boxed, so at 1920 the row stopped 500px short of the slider). The columns of an inner
   section already hang 10px outside the container and the widget-wrap padding pulls them back, so the
   cards sit exactly on the container edge: nothing to correct here. */

/* Feature list: the widget marks each line with a small dot; these use the same arrow the buttons carry
   (fontello U+E82D, which rtl-arrows.css mirrors for Persian). */
.neuros-price-item-widget .price-item .price-item-custom-fields .price-item-custom-field:before{
  content: '\e82d';
  font: 400 normal 10px/1 'fontello';
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0;
  color: var(--nadi-blue-700);
  right: 2px;
  top: 0.72em;
}

/* The hamburger's side is the widget's own Icon Alignment control (it writes text-align on .menu-trigger
   at a weight this file cannot beat), so it is set to left in the header template, not here. */

/* ---------- Slider video button ----------
   The play glyph sat 3px off inside its ring because it inherited the button's 28px line-height and the
   wrapper centred it as inline text. Flex centring plus a 1px optical nudge for the triangle. */
/* the pill's own padding was 35/94/22/68, which pushed the label and icon off centre; it is set evenly in
   the widget's Button Padding control (the theme's rule outranks this file), and flex keeps them centred */
.content-slider-video .elementor-custom-embed-play{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.content-slider-video .icon-play-wrapper{ display: inline-flex; align-items: center; justify-content: center; }
.content-slider-video .icon-play-wrapper .eicon-play{
  display: block;
  width: auto;
  line-height: 1;
  transform: translateX(1px);
  color: var(--nadi-ink);
}
.content-slider-video .neuros_button_text{ color: var(--nadi-ink); }

/* ---------- Equal heights ----------
   Applications slider: owl lays the stage out as a flex row but pins the items to the top, so cards with
   two lines of title end 29px short of the others. */
.service-listing-wrapper .owl-stage{ align-items: stretch; }
.service-listing-wrapper .owl-item{ height: auto; }
.service-listing-wrapper .service-item-wrapper,
.service-listing-wrapper .service-item{ height: 100%; }

/* "چرا نادی پلاستیک؟" boxes: the column stretches, the widget grows, and the box fills it — the internal
   layout of the widget is left alone. */
.elementor-widget-wrap:has(> .elementor-widget-neuros_icon_box){ align-content: stretch; }
.elementor-widget-neuros_icon_box{ display: flex; flex-direction: column; flex-grow: 1; }
.elementor-widget-neuros_icon_box > .elementor-widget-container{ display: flex; flex-direction: column; flex: 1 1 auto; }
.elementor-widget-neuros_icon_box .neuros-icon-box-widget,
.elementor-widget-neuros_icon_box .icon-box-item{ height: 100%; }
/* the widget stacks column-reverse (icon first in markup, painted last), so the text block has to take the
   spare space or the icon rides up whenever a paragraph is shorter */
.elementor-widget-neuros_icon_box .icon-box-item .content-container{ flex: 1 1 auto; }

/* ---------- Footer form button: same shape and rhythm as the theme's buttons ---------- */
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px 11px 43px;   /* the theme's own button metrics */
  font-size: 14px;
  font-weight: 500;
  line-height: 29px;
  border-radius: 9999px;
  border-width: 1px;
  position: relative;
  transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}
/* the theme draws a gradient overlay on every button's ::after; on a Fluent submit it never gets the
   hover transform that hides it, so it reads as a blue ring around the pill — switched off here */
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style):after{ display: none; }
/* the arrow goes on ::before: the theme already owns ::after on buttons for its hover overlay, and giving
   that pseudo-element content turned the overlay into a visible ring around the label */
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style):before{
  content: '\e82d';
  font: 400 normal 10px/1 'fontello';
  position: absolute;
  inset-inline-end: 24px;   /* the end edge — left in Persian, where the theme's own arrow sits */
  top: 50%;
  transform: translateY(-50%);
  transition: transform .3s;
}
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style):hover:before{
  transform: translateY(-50%) translateX(-4px);
}
form.frm-fluent-form[class*="fluent_form"] .ff-btn-submit:not(.ff_btn_no_style):hover{ transform: translateY(-1px); }

/* The mobile menu's call to action grew and lost 9px of height on hover, because the theme only makes room
   for the arrow in the hover state. Reserving that room in both states keeps the box still. */
html[dir="rtl"] .mobile-header-menu-container .neuros-button,
html[dir="rtl"] .mobile-header-menu-container .neuros-button:hover{
  padding: 15px 24px 15px calc(23px + 1.42857em);
}

/* ---------- Hero slider heading ----------
   The theme styles this one at .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-heading —
   (0,4,0) — with font-weight 400 and line-height 1.125, which outranks both the heading scale above and
   anything set on the widget in Elementor (0,3,0). The same selector plus html[lang] takes it back at
   (0,4,1). Font size is deliberately left to the theme's own breakpoints (80/60/40px). */
html[lang="fa-IR"] .neuros-content-slider-widget .owl-carousel.owl-theme .neuros-heading{
  font-weight: 800;
  line-height: 1.35;
}

/* ---------- Product panel on narrow screens ----------
   The box is a row: the text card on the reading side and the product plate beside it. The plate keeps
   27% of the box width at every size, but the box grows taller as it narrows, so that strip goes from a
   0.42 ratio at 1920 to 0.07 at 600 — a sliver of a roll, which is what "the product image is cut" means.
   Measured: 1920 .42 · 1366 .26 · 1024 .18 · 768 .11 · 600 .07.
   The side strip works while it stays wider than the roll: at 1366 the roll needs 129px of the 171px on
   show, at 1200 132 of 148, and at 1025 138 of 125 — it no longer fits. So from 1150 down the plate
   becomes a band above the card instead, with the photo contained so the whole roll is visible, on the
   same studio tone the photos themselves have (#E1E4EC), and the card overlaps it the way it overlaps the
   strip on desktop. */
@media (max-width: 1150px){
  /* the theme sets these at (0,4,0) and (0,3,0); the child sheet loads after it, so matching wins */
  .neuros-price-item-widget.neuros-price-item-style-alt{
    flex-direction: column-reverse;   /* the plate is the second child in the markup */
  }
  .neuros-price-item-widget.neuros-price-item-style-alt .price-item.price-item-type-standard{
    width: 100%;
    /* stacked layout: when the grid stretches a card to its neighbours' height, the white card takes the extra
       height (not an empty gap above the photo: column-reverse packs towards the bottom) */
    flex: 1 1 auto;
  }
  .neuros-price-item-widget.neuros-price-item-style-alt .price-item-image-block{
    width: 100%;
    height: 300px;
    margin: 0 0 -34px;
    border-radius: 25px;
  }
  /* Elementor writes background-size on this element from the widget's own control, at (0,4,0) and from a
     stylesheet that loads after this one, and its tablet breakpoint is 991 while the layout switches at
     1024. This selector is deliberately heavier so the whole roll shows across the whole range. */
  .elementor-element.elementor-widget.elementor-widget-neuros_price_item
    .neuros-price-item-widget.neuros-price-item-style-alt .price-item-image-block{
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
@media (max-width: 767px){
  .neuros-price-item-widget.neuros-price-item-style-alt .price-item-image-block{ height: 260px; }
}

/* ---------- Food-grade badge ----------
   Two of the four films are food grade, and the client treats that as the important distinction: those
   are the ones that may touch food. Only they carry the badge — stamping the other two "non-food" reads
   as a defect, and the comparison table below states the grade of all four anyway.
   The class goes on the widget in Elementor, so nothing here depends on the theme's markup order. */
.elementor-widget.nadi-grade .price-item{ position: relative; }
.elementor-widget.nadi-grade--food .price-item::before{
  content: "فوودگرید";
  position: absolute;
  top: 28px;
  inset-inline-start: 25px;
  padding: 5px 14px 6px;
  border-radius: 999px;
  background: var(--nadi-amber-050);
  color: var(--nadi-amber-600);
  border: 1px solid var(--nadi-amber-400);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Comparison table (four films) ----------
   The client's own product document ends with this table; it answers "which film do I need" in one
   screen, so it sits under the stacked cards. It lives on the dark section, hence the on-dark colours.
   Under 768px a six-column table cannot be read, so each row becomes a block and every cell shows its
   column name from data-label. */
.nadi-compare-wrap{ margin-top: 40px; overflow-x: auto; }
.nadi-compare-table{
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 15px;
  line-height: 1.9;
  color: var(--nadi-on-dark-2);
}
.nadi-compare-table th,
.nadi-compare-table td{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(238, 243, 249, .12);
  vertical-align: top;
}
.nadi-compare-table th{
  color: var(--nadi-on-dark-1);
  font-weight: 700;
  white-space: nowrap;
  border-bottom-color: rgba(238, 243, 249, .28);
}
.nadi-compare-table tbody tr:last-child td{ border-bottom: 0; }
.nadi-compare-table td:first-child{ color: var(--nadi-on-dark-1); font-weight: 700; }
@media (max-width: 767px){
  .nadi-compare-table,
  .nadi-compare-table tbody,
  .nadi-compare-table tr,
  .nadi-compare-table td{ display: block; width: 100%; }
  .nadi-compare-table thead{ display: none; }
  .nadi-compare-table tr{
    padding: 12px 0 4px;
    border-bottom: 1px solid rgba(238, 243, 249, .18);
  }
  .nadi-compare-table td{ padding: 4px 0; border: 0; }
  .nadi-compare-table td::before{
    content: attr(data-label) "؛ ";
    color: var(--nadi-on-dark-3);
    font-size: 13px;
  }
  .nadi-compare-table td:first-child{ font-size: 17px; }
  .nadi-compare-table td:first-child::before{ content: none; }
}

/* ---------- Export market pills ----------
   The theme's Audio Listing widget was being used for this list: every pill carried an <audio> element
   and clicking one played the demo's sample track, and the widget drops any item without an audio file,
   so the sound could not just be cleared. These are plain pills instead — same shape, same round flag,
   same border and the same blue border on hover as the widget had (#C6CDD8 -> #2259AB), and no audio.
   Sizes copied from the old widget's settings: 14/26 type, 6px 7px 7px 16px padding, 15px image gap. */
.nadi-markets{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nadi-markets li{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 6px 7px 7px 16px;
  border: 1px solid var(--nadi-n300);
  border-radius: 999px;
  background: #fff;
  color: var(--nadi-ink);
  font-size: 14px;
  line-height: 26px;
  list-style: none;
  transition: border-color .3s, color .3s;
}
.nadi-markets li:hover{
  border-color: var(--nadi-blue-700);
  color: var(--nadi-blue-700);
}
.nadi-markets li::before,
.nadi-markets li::marker{ content: none; }
/* the flag reads as a round badge, the way the widget's thumbnail did */
.nadi-markets img{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px rgba(20, 32, 58, .10);
}
@media (max-width: 767px){
  .nadi-markets{ gap: 8px; }
  .nadi-markets li{ gap: 10px; padding: 5px 6px 6px 13px; }
}

/* ---------- Map lights (world markets section) ----------
   Six points on the dotted map breathe one after another. They sit on the markets the client confirmed —
   CIS, the Arab countries and Turkey — and nowhere else: the old positions lit North America, Greenland
   and western Europe, which is not where Nadi Plastic exports.
   Positions are percentages of the image widget, converted from longitude/latitude with the map's own
   projection (x = (lon+180)/360, y = (84-lat)/144) and then kept clear of the heading (top right from 66%
   of the width) and the market pills (which start at 35% of the map's height).
   Markup comes from mu-plugins/nadi-core/widget-markup.php. */
.elementor-widget-image.nadi-map-dots > .elementor-widget-container{ position: relative; }
.nadi-map-dot{
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--nadi-blue-700);
  opacity: 0;
  pointer-events: none;
  animation: nadi-map-dot 12s ease-in-out infinite;
}
/* lighting order runs north to south through the markets */
.nadi-map-dot--1{ left: 60.4%; top: 19.6%; animation-delay: 0s;  }   /* Russia — CIS */
.nadi-map-dot--2{ left: 65.3%; top: 25.0%; animation-delay: 2s;  }   /* west Kazakhstan — CIS */
.nadi-map-dot--3{ left: 67.8%; top: 29.9%; animation-delay: 4s;  }   /* Uzbekistan — CIS */
.nadi-map-dot--4{ left: 62.1%; top: 29.2%; animation-delay: 6s;  }   /* Caucasus — CIS */
.nadi-map-dot--5{ left: 59.7%; top: 31.2%; animation-delay: 8s;  }   /* Turkey */
.nadi-map-dot--6{ left: 61.9%; top: 33.0%; animation-delay: 10s; }   /* north of the Arab peninsula */

@keyframes nadi-map-dot{
  /* on for 2.8s of a 12s cycle with 2s between dots: one light still fading as the next rises */
  0%   { opacity: 0;   transform: scale(.5);  box-shadow: 0 0 0 0 rgba(34, 89, 171, .22); }
  7%   { opacity: .62; transform: scale(1);   box-shadow: 0 0 0 5px rgba(34, 89, 171, .13); }
  15%  { opacity: .55; transform: scale(1);   box-shadow: 0 0 0 13px rgba(34, 89, 171, 0); }
  23%  { opacity: 0;   transform: scale(.55); box-shadow: 0 0 0 0 rgba(34, 89, 171, 0); }
  100% { opacity: 0;   transform: scale(.5);  box-shadow: 0 0 0 0 rgba(34, 89, 171, 0); }
}

/* Narrower viewports: the heading grows across the map and the pills rise, so the two northern lights
   (Russia, Kazakhstan) end up inside the heading and step aside; measured at 1440, 1366 and 1024. */
@media (min-width: 1024px) and (max-width: 1365px){
  .nadi-map-dot--1,
  .nadi-map-dot--2{ display: none; }
  .nadi-map-dot--6{ top: 32%; }
}
/* Tablet and phone: the heading runs 18-42% of the map and the pills start above its top edge — there is
   no clear land left, so the map stays as a backdrop with no lights on it. */
@media (max-width: 1023px){
  .nadi-map-dot{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .nadi-map-dot{ animation: none; opacity: .4; }
}

/* ---------- Order-process steps: the number straightens and writes itself on hover ----------
   At rest it keeps the theme's own look — writing-mode: vertical-lr with rotate(180deg), so the numeral
   reads upside down. Hover turns it a quarter turn to rotate(270deg), which lands the digits upright and
   the line horizontal, so it reads straight as "01".
   The writing mode is deliberately NOT switched to horizontal-tb: that resizes the box, which both nudges
   the text beside it (the step is a flex row) and clips the numeral, because the gradient is painted only
   inside the element's own box and "03" is 92px long against an 80px line. A transform does not touch
   layout, so the box — and everything next to it — stays exactly where the theme puts it.
   The numeral itself is untouched: the amber-to-blue gradient is clipped to the text behind a white fill
   and a 3px stroke, which is what makes it hollow with a gradient outline. */
.elementor-widget-neuros_step_carousel .neuros-step-carousel-widget .step-item .step-number{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.elementor-widget-neuros_step_carousel .neuros-step-carousel-widget .step-item:hover .step-number{
  transform: rotate(270deg);
  animation: nadi-step-draw .9s ease both;
}
@keyframes nadi-step-draw{
  from{ clip-path: inset(0 0 100% 0); }
  to  { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
  .elementor-widget-neuros_step_carousel .neuros-step-carousel-widget .step-item:hover .step-number{
    animation: none;
    transform: rotate(270deg);
  }
}

/* ---------- Applications hub (/applications/, page from scripts/build_applications_page.py) ----------
   The page is standard Elementor widgets plus html widgets carrying these classes.
   Cards stay white with a hairline border on both the white and the paper bands. */
.nadi-app-sec{ scroll-margin-top: 120px; }
.nadi-apps-lead p{ font-size: 19px; color: var(--nadi-n700); }

/* finder: six anchor cards */
.nadi-apps-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 991px){ .nadi-apps-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px){ .nadi-apps-cards{ grid-template-columns: 1fr; } }
a.nadi-apps-card{ display: block; background: #fff; border: 1px solid var(--nadi-n100); border-radius: 20px;
  padding: 26px 24px 22px; color: var(--nadi-ink); box-shadow: 0 6px 18px rgba(20,32,58,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.nadi-apps-card:hover{ transform: translateY(-4px); border-color: var(--nadi-blue-200);
  box-shadow: 0 14px 30px rgba(20,32,58,.10); }
.nadi-apps-card strong{ display: block; font-family: "Shabnam","IRANYekan",Tahoma,Arial,sans-serif;
  font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--nadi-ink); }
a.nadi-apps-card:hover strong{ color: var(--nadi-blue-700); }
.nadi-apps-card span{ display: block; color: var(--nadi-n600); font-size: 14px; line-height: 1.9; }
.nadi-apps-card em{ display: inline-block; font-style: normal; color: var(--nadi-blue-700); font-size: 13.5px;
  font-weight: 600; margin-top: 14px; }

/* one application block */
.nadi-app .nadi-app-eyebrow{ display: block; color: var(--nadi-blue-500); font-weight: 700; font-size: 15px;
  margin-bottom: 6px; }
.nadi-app h2{ font-size: clamp(24px, 3vw, 33px); margin: 0 0 16px; }
.nadi-app-badges{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; }
.nadi-app-badges li{ background: var(--nadi-blue-050); color: var(--nadi-blue-800);
  border: 1px solid var(--nadi-blue-100); border-radius: 999px; padding: 6px 16px; font-size: 13.5px; }
.nadi-app > p{ color: var(--nadi-n700); }
.nadi-app-films{ list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nadi-app-films li{ background: #fff; border: 1px solid var(--nadi-n100); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 4px 14px rgba(20,32,58,.04); }
.nadi-app-films .film-name{ display: block; font-family: "Shabnam","IRANYekan",Tahoma,Arial,sans-serif;
  font-weight: 700; font-size: 16.5px; }
.nadi-app-films .film-name a{ color: var(--nadi-ink); }
.nadi-app-films .film-name a:hover{ color: var(--nadi-blue-700); }
.nadi-app-films .film-why{ display: block; color: var(--nadi-n600); font-size: 14.5px; line-height: 1.9;
  margin-top: 6px; }
.nadi-app-films .film-cta{ display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600;
  color: var(--nadi-blue-700); }
.nadi-app-films .film-cta:hover{ color: var(--nadi-amber-600); }
.nadi-app-example{ margin: 22px 0 0; background: var(--nadi-amber-050);
  border-inline-start: 3px solid var(--nadi-amber-500); border-radius: 10px; padding: 14px 20px;
  color: var(--nadi-n700); font-size: 14.5px; line-height: 1.9; }

/* product × application matrix (reuses .nadi-compare table skin) */
.nadi-apps-matrix td{ text-align: center; }
.nadi-apps-matrix td.yes{ color: var(--nadi-success); font-weight: 700; font-size: 18px; }
.nadi-apps-matrix td.no{ color: var(--nadi-n300); }
.nadi-apps-matrix tbody th a{ color: inherit; }
.nadi-apps-matrix tbody th a:hover{ color: var(--nadi-blue-700); }
.nadi-apps-matrix-note{ margin-top: 14px; color: var(--nadi-n600); font-size: 13.5px; }

/* «چه فیلمی برای محصول من؟» if→then rows */
.nadi-apps-guide{ list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.nadi-apps-guide li{ background: #fff; border: 1px solid var(--nadi-n100); border-radius: 14px;
  padding: 18px 22px; box-shadow: 0 4px 14px rgba(20,32,58,.04); }
.nadi-apps-guide .g-if{ display: block; font-family: "Shabnam","IRANYekan",Tahoma,Arial,sans-serif;
  font-weight: 700; margin-bottom: 6px; color: var(--nadi-ink); }
.nadi-apps-guide .g-then{ display: block; color: var(--nadi-n700); }
.nadi-apps-guide .g-then a{ font-weight: 700; }

/* applications hub v2: center the closing CTA band's heading/button (theme widgets default start) */
.nadi-cta-center .neuros-heading-widget, .nadi-cta-center .heading-title{ text-align:center; }
.nadi-cta-center .neuros-button-widget{ text-align:center; }
/* dark bands: the heading eyebrow must win over the widget's own subtitle color */
.nadi-dark .neuros-heading-widget .heading-subtitle,
.nadi-dark .neuros-heading-widget [class*="subtitle"]{ color:var(--nadi-amber-400) !important; }
.nadi-dark .neuros-subheading{ color:var(--nadi-amber-400) !important; }

/* ---------- Applications hub — DESIGN_RULES pass (2026-09-30) ----------
   text + photo per group, the photo swapping sides from one group to the next (rules 7, 8);
   the film cards run full width under both. RTL: the first grid column is the right one. */
.nadi-app-split{ display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); column-gap:56px; row-gap:30px;
  grid-template-areas:"body photo" "films films"; align-items:center; }
.nadi-app-split.is-mirror{ grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); grid-template-areas:"photo body" "films films"; }
.nadi-app-split .nadi-app-body{ grid-area:body; }
.nadi-app-split .nadi-app-photo{ grid-area:photo; margin:0; }
.nadi-app-split .nadi-app-films{ grid-area:films; }
.nadi-app-photo img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:25px; }
@media (max-width:991px){
  .nadi-app-split,.nadi-app-split.is-mirror{ grid-template-columns:1fr; grid-template-areas:"photo" "body" "films"; row-gap:24px; }
}
/* colour budget (rule 2): chips and the example note go neutral — amber stays for the CTAs */
.nadi-app-badges li{ background:transparent; border-color:var(--nadi-n300); color:var(--nadi-n700); }
.nadi-app-example{ background:var(--nadi-n050); border-inline-start:3px solid var(--nadi-blue-500); }
.nadi-band-paper .nadi-app-example{ background:#fff; }
/* surfaces (rule 1): gray band → white cards, white band → gray cards without the outline */
.nadi-band-white .nadi-app-films li{ background:var(--nadi-n050); border-color:transparent; box-shadow:none; }
/* theme arrow glyph instead of a typed one (rule 14) */
.nadi-apps-card em .fontello,.nadi-app-films .film-cta .fontello{ font-size:9px; margin-inline-start:6px; vertical-align:middle; }
/* the theme's list-arrow bullet (li:before) leaked into chips, film cards and guide rows */
.nadi-app ul > li::before,.nadi-apps-guide > li::before{ content:none !important; display:none !important; }
/* a dark column box: Elementor paints the column background on the inner wrap, so round that */
.elementor-column.nadi-dark, .elementor-column.nadi-dark > .elementor-widget-wrap{ border-radius:25px; }

/* ---------- Applications hub — top of page after the theme's Home 10 (2026-09-30) ---------- */
.nadi-break{ margin:0 !important; height:0; }
.nadi-apps-lead p{ color:var(--nadi-n700); }
/* the moving photo strip's closing edge carries the breadcrumb tab (the theme page-title tab, inverted
   corners and all) opening into the white page below */
.nadi-crumbs{ display:flex; justify-content:flex-end; padding-inline-end:7.65%; margin-top:34px; }
.nadi-crumbs .breadcrumbs{ position:relative; background:#fff; border-radius:20px 20px 0 0; padding:14px 30px 12px; }
.nadi-crumbs .breadcrumbs::before,.nadi-crumbs .breadcrumbs::after{ content:""; position:absolute; bottom:0; width:20px; height:20px; background:transparent; }
.nadi-crumbs .breadcrumbs::before{ right:100%; border-bottom-right-radius:20px; box-shadow:8px 8px 0 8px #fff; }
.nadi-crumbs .breadcrumbs::after{ left:100%; border-bottom-left-radius:20px; box-shadow:-8px 8px 0 8px #fff; }

/* ---------- application photos: soft-cut corners after the Home 10 «about us» image ----------
   the cut-outs take the band colour; physical sides because the grid is RTL:
   plain = photo in the left column (inner corner = bottom-right), mirror = photo on the right. */
.nadi-band-white{ --nadi-notch:#fff; }
.nadi-band-paper{ --nadi-notch:var(--nadi-n050); }
.nadi-app-photo{ position:relative; }
.nadi-app-photo .nadi-notch{ position:absolute; top:0; left:0; width:120px; height:34px; background:var(--nadi-notch); border-bottom-right-radius:25px; }
.nadi-app-photo .nadi-notch::before,.nadi-app-photo .nadi-notch::after{ content:""; position:absolute; width:25px; height:25px; background:transparent; border-top-left-radius:25px; box-shadow:-10px -10px 0 10px var(--nadi-notch); }
.nadi-app-photo .nadi-notch::before{ left:100%; top:0; }
.nadi-app-photo .nadi-notch::after{ top:100%; left:0; }
a.nadi-photo-tab{ position:absolute; bottom:0; right:0; background:var(--nadi-notch); border-top-left-radius:25px;
  padding:16px 26px 4px 28px; font-weight:700; font-size:14.5px; color:var(--nadi-ink); white-space:nowrap; }
a.nadi-photo-tab:hover{ color:var(--nadi-blue-700); }
a.nadi-photo-tab .fontello{ font-size:9px; margin-inline-start:6px; vertical-align:middle; }
a.nadi-photo-tab::before,a.nadi-photo-tab::after{ content:""; position:absolute; width:25px; height:25px; background:transparent; border-bottom-right-radius:25px; box-shadow:10px 10px 0 10px var(--nadi-notch); }
a.nadi-photo-tab::before{ bottom:100%; right:0; }
a.nadi-photo-tab::after{ right:100%; bottom:0; }
/* mirror: photo on the right → tab bottom-left, notch top-right */
.is-mirror .nadi-app-photo .nadi-notch{ left:auto; right:0; border-bottom-right-radius:0; border-bottom-left-radius:25px; }
.is-mirror .nadi-app-photo .nadi-notch::before,.is-mirror .nadi-app-photo .nadi-notch::after{ border-top-left-radius:0; border-top-right-radius:25px; box-shadow:10px -10px 0 10px var(--nadi-notch); }
.is-mirror .nadi-app-photo .nadi-notch::before{ left:auto; right:100%; }
.is-mirror .nadi-app-photo .nadi-notch::after{ left:auto; right:0; }
.is-mirror a.nadi-photo-tab{ right:auto; left:0; border-top-left-radius:0; border-top-right-radius:25px; padding:16px 28px 4px 26px; }
.is-mirror a.nadi-photo-tab::before,.is-mirror a.nadi-photo-tab::after{ border-bottom-right-radius:0; border-bottom-left-radius:25px; box-shadow:-10px 10px 0 10px var(--nadi-notch); }
.is-mirror a.nadi-photo-tab::before{ right:auto; left:0; }
.is-mirror a.nadi-photo-tab::after{ right:auto; left:100%; }
.nadi-hero-lead-narrow .elementor-widget-container{ max-width:760px; margin-inline:auto; }
/* the theme's moving list scrolls its track left (LTR maths) — in RTL that empties the right side */
.nadi-top-strip .neuros-moving-list-widget,.nadi-top-strip .moving-list{ direction:ltr; }
html[lang="fa-IR"] .nadi-hero-lead-narrow p{ text-align:center; text-align-last:center; }

/* ---------- Applications hub — round 2 (2026-09-30) ---------- */
/* the header floats over the first section on this page, so the theme's line decoration runs up
   behind the menu; the section's own top padding clears the menu at every breakpoint */
body.page-id-24925 #masthead{ position:absolute; top:0; left:0; right:0; z-index:60; }
body.page-id-24925 #masthead .elementor-top-section{ background-color:transparent !important; }

/* breadcrumb tab: the theme's page-title tab — rounded top + two concave flares into the edge below */
.nadi-crumbs .breadcrumbs{ background:none !important; padding:0 !important; border-radius:0 !important; }
.nadi-crumbs .breadcrumbs::before,.nadi-crumbs .breadcrumbs::after{ content:none !important; }
.nadi-crumbs-tab{ position:relative; background:#fff; border-radius:20px 20px 0 0; padding:15px 32px 13px; }
.nadi-crumbs-tab::before,.nadi-crumbs-tab::after{ content:""; position:absolute; bottom:0; width:20px; height:40px; background:transparent; }
.nadi-crumbs-tab::before{ right:100%; border-bottom-right-radius:20px; box-shadow:0 20px 0 0 #fff; }
.nadi-crumbs-tab::after{ left:100%; border-bottom-left-radius:20px; box-shadow:0 20px 0 0 #fff; }

/* photo cuts: the notch must be taller than its own corner + the flare beside it, or the S-curve
   shows a step (34px notch with two 25px curves did) → 40px notch, 18px curves */
.nadi-app-photo .nadi-notch{ height:40px; border-bottom-right-radius:18px; }
.nadi-app-photo .nadi-notch::before,.nadi-app-photo .nadi-notch::after{ width:18px; height:18px; border-top-left-radius:18px; box-shadow:-8px -8px 0 8px var(--nadi-notch); }
a.nadi-photo-tab{ border-top-left-radius:18px; padding-top:18px; }
a.nadi-photo-tab::before,a.nadi-photo-tab::after{ width:18px; height:18px; border-bottom-right-radius:18px; box-shadow:8px 8px 0 8px var(--nadi-notch); }
.is-mirror .nadi-app-photo .nadi-notch{ border-bottom-right-radius:0; border-bottom-left-radius:18px; }
.is-mirror .nadi-app-photo .nadi-notch::before,.is-mirror .nadi-app-photo .nadi-notch::after{ border-top-left-radius:0; border-top-right-radius:18px; box-shadow:8px -8px 0 8px var(--nadi-notch); }
.is-mirror a.nadi-photo-tab{ border-top-left-radius:0; border-top-right-radius:18px; }
.is-mirror a.nadi-photo-tab::before,.is-mirror a.nadi-photo-tab::after{ border-bottom-right-radius:0; border-bottom-left-radius:18px; box-shadow:-8px 8px 0 8px var(--nadi-notch); }

/* finder card icons */
.nadi-apps-card-icon{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:50%; background:var(--nadi-blue-050); color:var(--nadi-blue-700); font-size:21px; margin-bottom:16px;
  transition:background-color .2s ease, color .2s ease; }
a.nadi-apps-card:hover .nadi-apps-card-icon{ background:var(--nadi-blue-700); color:#fff; }

/* matrix: a clean card instead of the heavy blue-headed grid */
.nadi-matrix-card{ margin-top:34px; border:1px solid var(--nadi-n100); border-radius:22px; overflow-x:auto;
  background:#fff; box-shadow:0 12px 34px rgba(20,32,58,.06); -webkit-overflow-scrolling:touch; }
.nadi-apps-matrix{ width:100%; min-width:760px; border-collapse:collapse; font-size:15.5px; }
.nadi-apps-matrix thead th{ background:var(--nadi-n050); padding:22px 16px 18px; text-align:center; vertical-align:bottom;
  border-bottom:1px solid var(--nadi-n100); font-family:"Shabnam","IRANYekan",Tahoma,sans-serif; }
.nadi-apps-matrix thead th a{ display:block; color:var(--nadi-ink); font-weight:700; font-size:15.5px; }
.nadi-apps-matrix thead th a:hover{ color:var(--nadi-blue-700); }
.nadi-apps-matrix thead th small{ display:block; margin-top:4px; color:var(--nadi-n500); font-size:12.5px; font-weight:400;
  font-family:"IRANYekan",Tahoma,sans-serif; }
.nadi-apps-matrix thead th.m-corner{ text-align:start; color:var(--nadi-n600); font-weight:600; padding-inline-start:28px; }
.nadi-apps-matrix tbody th{ text-align:start; padding:18px 28px; font-weight:700; background:none; width:auto; }
.nadi-apps-matrix tbody th a{ color:var(--nadi-ink); }
.nadi-apps-matrix tbody th a:hover{ color:var(--nadi-blue-700); }
.nadi-apps-matrix tbody td{ text-align:center; padding:14px 16px; }
.nadi-apps-matrix tbody tr + tr > *{ border-top:1px solid var(--nadi-n100); }
.nadi-apps-matrix tbody tr{ transition:background-color .15s ease; }
.nadi-apps-matrix tbody tr:hover{ background:var(--nadi-blue-050); }
.nadi-apps-matrix td.yes span{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--nadi-blue-700); color:#fff; font-size:14px; font-weight:700; }
.nadi-apps-matrix td.no span{ color:var(--nadi-n300); font-size:18px; }

/* ---------- Applications hub — round 3 (2026-09-30) ---------- */
/* breadcrumbs in the theme's own markup (.breadcrumbs-wrapper sits absolute at the host's bottom);
   the colours the page-title widget would give it, with white because the page below is white */
.nadi-crumbs-host{ position:relative; height:58px; margin-top:34px; }
.nadi-crumbs-host .breadcrumbs{ background-color:#fff; border-radius:25px 25px 0 0; color:#333; }
.nadi-crumbs-host .breadcrumbs a,.nadi-crumbs-host .breadcrumbs .current{ color:#333; }
.nadi-crumbs-host .breadcrumbs .delimiter{ color:#C5C5C5; }
.nadi-crumbs-host .breadcrumbs a::before{ background-image:linear-gradient(262deg,#1A468A 14.51%,#279BE1 95.96%); }
.nadi-crumbs-host .breadcrumbs-wrapper::before,.nadi-crumbs-host .breadcrumbs-wrapper::after{ box-shadow:0 20px 0 0 #fff; }

/* matrix: the theme's table cell borders were clipped at the rounded corners → faded corners.
   Cells lose their own borders; the card carries one clear outline. */
.nadi-apps-matrix th,.nadi-apps-matrix td{ border:0; }
.nadi-apps-matrix thead th{ border-bottom:1px solid var(--nadi-n100); }
.nadi-apps-matrix tbody tr + tr > *{ border-top:1px solid var(--nadi-n100); }
.nadi-matrix-card{ border:1px solid #D9E0EA; }

/* «چه فیلمی برای محصول من مناسب است؟» — a question mark before each question */
.nadi-apps-guide .g-if{ display:flex; align-items:center; gap:12px; }
.nadi-apps-guide .g-q{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--nadi-blue-050); color:var(--nadi-blue-700); font-size:13px; }
.nadi-apps-guide .g-then{ padding-inline-start:42px; }
/* the theme's table rule (1px #adadad on every cell) outranked the reset above */
.nadi-matrix-card table.nadi-apps-matrix th,.nadi-matrix-card table.nadi-apps-matrix td{ border:0 !important; }
.nadi-matrix-card table.nadi-apps-matrix thead th{ border-bottom:1px solid var(--nadi-n100) !important; }
.nadi-matrix-card table.nadi-apps-matrix tbody tr + tr > *{ border-top:1px solid var(--nadi-n100) !important; }

/* ---------- Applications hub — round 4 ---------- */
/* consultation buttons = the product page's «استعلام قیمت» (product.css r7): the softer CTA amber,
   no blue gradient frame, a wider pill with the text centred */
body .elementor-widget.nadi-btn-accent.nadi-cta-wide .neuros-button{ background-color:var(--nadi-amber-400); border-color:var(--nadi-amber-400); color:var(--nadi-ink); }
/* size at the product page's own (lower) specificity: the theme's hover padding must still win,
   that shift is the text's movement on hover */
.elementor-widget.nadi-cta-wide .neuros-button{ min-width:190px; padding-inline:40px; justify-content:center; }
body .elementor-widget.nadi-btn-accent.nadi-cta-wide .neuros-button:hover{ background-color:var(--nadi-amber-500); border-color:var(--nadi-amber-500); color:var(--nadi-ink); }
body .elementor-widget.nadi-btn-accent.nadi-cta-wide .neuros-button::after{ display:none; }

/* FAQ + testimonials row on white: the testimonial card loses the navy, keeps a hairline */
.nadi-testi-plain .testimonial-item,.nadi-testi-plain .owl-stage-outer{ border-radius:25px; }
.nadi-testi-plain .owl-stage-outer{ border:1px solid var(--nadi-n100); }
/* narrow FAQ column: room for the accordion's ۰۱… counter, which the title otherwise runs under */
@media (max-width:1199px){ html[dir="rtl"] .nadi-faq-testi .elementor-accordion .elementor-accordion-title{ padding-right:44px !important; } }

/* H2s in html widgets now use the theme heading markup; size as the product pages' section headings */
.nadi-app .nadi-h2 .neuros-heading{ font-size:40px; line-height:1.3; margin:0 0 16px; }
@media (max-width:767px){ .nadi-app .nadi-h2 .neuros-heading{ font-size:28px; } }

/* ---------- About page (2026-10-01) ---------- */
/* any page that opens with the hero band floats the header over it (was page-id-24925 only) */
body:has(.nadi-top-hero) #masthead{ position:absolute; top:0; left:0; right:0; z-index:60; }
body:has(.nadi-top-hero) #masthead .elementor-top-section{ background-color:transparent !important; }
/* «Made in Iran»: a Latin statement inside an RTL page keeps its word order and centring */
.nadi-ltr-word .neuros-heading{ direction:ltr; }
/* phones: the accordion's ۰۱… counter sat under the question text (same fix as .nadi-faq-testi) */
@media (max-width:767px){ html[dir="rtl"] .nadi-faq-tight .elementor-accordion .elementor-accordion-title{ padding-right:44px !important; } }

/* ---------- About page — round 2 (2026-10-01) ---------- */
/* history: four-digit years were set vertically at 80px inside a clipped 169px slide (cut at the bottom) and the
   hover state collapsed them → lay the year flat above the title, keep it the same on hover */
.nadi-history .step-item{ flex-direction:column; }
.elementor-widget-neuros_step_carousel.nadi-history .step-item .step-number,
.elementor-widget-neuros_step_carousel.nadi-history .step-item:hover .step-number{
  writing-mode:horizontal-tb; transform:none; font-size:56px; line-height:1.1; margin:0 0 14px; }
.elementor-widget-neuros_step_carousel.nadi-history .step-item .step-number:not(:last-child){ margin-left:0; }

/* customer logos: a little stronger than the theme's 30% */
.nadi-logo-carousel img{ max-height:90px; width:auto !important; margin-inline:auto; }

/* CEO: the portrait sits flush in the dark box; name block with a short accent rule */
.nadi-ceo .nadi-ceo-photo img{ box-shadow:0 30px 60px rgba(0,0,0,.35); }
.nadi-ceo .nadi-ltr-word .neuros-special-text, .nadi-ceo .elementor-widget-neuros_special_text{ direction:ltr; }
.nadi-ceo-sign{ display:flex; flex-direction:column; gap:4px; margin-top:28px; }
.nadi-ceo-sign .nadi-ceo-line{ width:56px; height:3px; border-radius:3px; margin-bottom:12px;
  background:linear-gradient(262deg,var(--nadi-amber-500),var(--nadi-blue-400)); }
.nadi-ceo-sign strong{ color:#fff; font-size:20px; font-weight:700; }
.nadi-ceo-sign span{ color:var(--nadi-on-dark-3); font-size:15px; }

/* Nadi Pak org tree: root on top, a rail to three branches, leaves under two of them (white cards on gray) */
.nadi-tree{ --line:#C6CDD8; display:flex; flex-direction:column; align-items:center; }
.nadi-tree a{ text-decoration:none; }
.nadi-tree-root,.nadi-tree-node{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:#fff; border-radius:20px; padding:22px 28px; box-shadow:0 12px 30px rgba(20,32,58,.06); }
.nadi-tree-root{ min-width:300px; padding:28px 40px; border:1.5px solid var(--nadi-blue-200); }
.nadi-tree-root strong{ font-size:26px; color:var(--nadi-ink); }
.nadi-tree-node strong{ font-size:19px; color:var(--nadi-ink); }
.nadi-tree-root span,.nadi-tree-node span{ font-size:14.5px; color:var(--nadi-n600); }
.nadi-tree-root em,.nadi-tree-node em{ font-style:normal; font-size:14px; font-weight:600; color:var(--nadi-blue-700);
  display:inline-flex; align-items:center; gap:6px; direction:ltr; }
.nadi-tree .nadi-ext{ width:15px; height:15px; }
a.nadi-tree-root:hover,a.nadi-tree-node:hover{ box-shadow:0 16px 36px rgba(34,89,171,.14); }
.nadi-tree em.nadi-tree-here{ direction:rtl; background:var(--nadi-blue-100); padding:3px 12px; border-radius:20px; }
.nadi-tree-branches{ list-style:none; margin:0; padding:44px 0 0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px; width:100%; position:relative; }
.nadi-tree-branches::before{ content:""; position:absolute; top:0; left:50%; height:22px; border-left:2px solid var(--line); }
.nadi-tree-branches > li{ position:relative; margin:0; padding:0; display:flex; flex-direction:column; align-items:stretch; }
.nadi-tree-branches > li::before{ content:""; position:absolute; top:-22px; left:50%; height:22px; border-left:2px solid var(--line); }
.nadi-tree-branches > li::after{ content:""; position:absolute; top:-22px; left:-14px; right:-14px; border-top:2px solid var(--line); }
.nadi-tree-branches > li:first-child::after{ left:50%; right:-14px; }
.nadi-tree-branches > li:last-child::after{ right:50%; left:-14px; }
html[dir="rtl"] .nadi-tree-branches > li:first-child::after{ right:50%; left:-14px; }
html[dir="rtl"] .nadi-tree-branches > li:last-child::after{ left:50%; right:-14px; }
.nadi-tree-branches > li.is-here > .nadi-tree-node{ border:1.5px solid var(--nadi-blue-700); }
.nadi-tree-leaves{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.nadi-tree li::before{ content:none; }
.nadi-tree-branches > li::before{ content:""; }
.nadi-tree-leaves li{ margin:0; padding:0; }
.nadi-tree-leaves li::before{ content:none !important; display:none !important; }
.nadi-tree-leaves li > a,.nadi-tree-leaves li > span{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.6); border:1px solid var(--nadi-n100); border-radius:14px; padding:12px 18px; font-size:15px;
  color:var(--nadi-ink); font-weight:600; }
.nadi-tree-leaves li > a:hover{ background:#fff; color:var(--nadi-blue-700); }
.nadi-tree-leaves .fontello{ font-size:9px; }
@media (max-width:991px){
  .nadi-tree-branches{ grid-template-columns:1fr; gap:20px; padding-top:30px; }
  .nadi-tree-branches::before{ height:30px; }
  .nadi-tree-branches > li::before,.nadi-tree-branches > li::after{ display:none; }
  .nadi-tree-root{ min-width:0; width:100%; }
}

/* ---------- Applications hub — top after the theme's Home 16 (2026-10-01) ---------- */
.nadi-top-hero.nadi-dark .nadi-apps-lead p{ color:var(--nadi-on-dark-2); }
/* light button on navy (Home 16's white «Sign up») */
body .elementor-widget.nadi-btn-light .neuros-button{ background-color:#fff; border-color:#fff; color:var(--nadi-ink); }
body .elementor-widget.nadi-btn-light .neuros-button:hover{ background-color:var(--nadi-blue-100); border-color:var(--nadi-blue-100); color:var(--nadi-ink); }
body .elementor-widget.nadi-btn-light .neuros-button::after{ display:none; }
/* bento tiles: photo tiles get a dark foot so the white label reads on any photo */
.nadi-tile{ overflow:hidden; }
.nadi-tile-photo::before{ content:""; position:absolute; inset:0; border-radius:25px; pointer-events:none;
  background:linear-gradient(to top, rgba(10,21,36,.78) 0%, rgba(10,21,36,0) 48%); }
.nadi-tile > .elementor-container{ position:relative; z-index:1; }
.nadi-tile-label p{ margin:0; }
.nadi-tile-label a{ color:#fff !important; font-family:"Shabnam","IRANYekan",Tahoma,sans-serif; font-weight:700; font-size:17px; line-height:1.5; }
.nadi-tile-label a:hover{ color:var(--nadi-amber-400) !important; }
.nadi-tile-copy p{ color:#fff !important; font-family:"Shabnam","IRANYekan",Tahoma,sans-serif; font-weight:700; font-size:20px; line-height:1.6; text-align:start !important; }
.nadi-tile-roll img{ max-height:230px; width:auto; margin-inline:auto; display:block; }
.nadi-tile-blue > .elementor-container > .elementor-column > .elementor-widget-wrap{ align-content:space-between; }
/* the sideways word, as the theme turns it on Home 16: read bottom-to-top along the tile's edge */
.nadi-tile-wordbox{ position:relative; }
.nadi-tile-word{ position:absolute !important; left:22px; bottom:20px; transform-origin:left bottom; transform:rotate(-90deg) translateY(100%); width:auto !important; }
.nadi-tile-word p{ margin:0; direction:ltr; }
.nadi-tile-count .elementor-counter-title{ font-weight:700; }
html[lang="fa-IR"] .nadi-tile-label p,html[lang="fa-IR"] .nadi-tile-copy p{ text-align:start !important; text-align-last:start; }

/* ---------- About page — round 4 (2026-10-01) ---------- */
/* gallery: the theme hover zooms, blurs (10px) and fades a caption over the photo → the tile only lifts a little */
/* the lift sits on the outer card: putting position/transform on the link moved the containing block of the
   theme's absolutely placed photo and the tile went white (round 8) */
.nadi-gallery-pop .gallery-item{ border-radius:20px; transition:transform .35s ease, box-shadow .35s ease; }
.nadi-gallery-pop .gallery-item-wrapper:hover{ z-index:3; }
.nadi-gallery-pop .gallery-item-wrapper:hover .gallery-item{ transform:translateY(-6px) scale(1.03);
  box-shadow:0 22px 44px rgba(20,32,58,.18); }
.nadi-gallery-pop .gallery-item-wrapper .gallery-item-link:hover .gallery-item-media img,
.nadi-gallery-pop .gallery-item-wrapper .gallery-item-inner:hover .gallery-item-media img{ transform:none; filter:none; }
.nadi-gallery-pop .gallery-item-content-wrapper,.nadi-gallery-pop .gallery-item-wrapper .gallery-item-link:hover .gallery-item-content-wrapper{ opacity:0 !important; }
.nadi-gallery-pop .gallery-item-media::before,.nadi-gallery-pop .gallery-item-media::after,
.nadi-gallery-pop .gallery-item-link::before,.nadi-gallery-pop .gallery-item-link::after{ opacity:0 !important; }

/* vision / mission boxes (theme Home 10 boxes under «about us»): icon on top, text at the bottom, dark on hover */
.nadi-vm-box > .elementor-widget-wrap{ height:100%; }
.nadi-vm-icon svg{ width:103px; height:103px; display:block; }
.nadi-vm-box,.nadi-vm-box > .elementor-widget-wrap{ transition:background-color .35s ease; }
.nadi-vm-box .neuros-heading,.nadi-vm-box .neuros-heading *,.nadi-vm-box .elementor-widget-text-editor{ transition:color .35s ease; }
.nadi-vm-box:hover .neuros-heading .neuros-heading-content,.nadi-vm-box:hover .neuros-heading,
.nadi-vm-box:hover .elementor-widget-text-editor,.nadi-vm-box:hover .elementor-widget-text-editor *{ color:#fff !important; }
.nadi-vm-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.nadi-vm-list li{ margin:0; padding:0 0 0 0; }
.nadi-vm-list li::before{ content:none !important; display:none !important; }
.nadi-vm-list strong{ display:block; margin-bottom:2px; }
@media (max-width:991px){ .nadi-vm-box > .elementor-widget-wrap{ min-height:0; } }
/* box: icon at the top, title + text together at the bottom (as in Home 10), whatever the text length */
.nadi-vm-box > .elementor-widget-wrap{ display:flex; flex-direction:column; justify-content:flex-start !important; }
/* round 5: the text sits right under the logo (user) — no push to the bottom */
.nadi-vm-icon img{ width:140px; height:auto; }
/* hover = the theme box's dark state; Elementor's column hover colour did not reach the inner wrap that paints it */
.nadi-vm-box > .elementor-widget-wrap{ transition:background-color .35s ease; }
.elementor-column.nadi-vm-box:hover > .elementor-widget-wrap{ background-color:var(--nadi-dark-800) !important; }
.nadi-vm-box:hover .neuros-heading,.nadi-vm-box:hover .neuros-heading *,.nadi-vm-box:hover .elementor-widget-text-editor,
.nadi-vm-box:hover .elementor-widget-text-editor *{ color:#fff !important; -webkit-text-fill-color:#fff; }

/* ---- contact page (71, /contact-us/) ---------------------------------------------------------------------------
   The form sits in a white card on the gray band, so its fields take the gray surface; the map gets the card
   radius; the footer's consultation box carries the same form, so it is hidden here. */
.nadi-contact-form .fluentform .ff-el-form-control{ background:var(--nadi-n050, #F2F5F9); border-color:transparent; }
.nadi-contact-form .fluentform .ff-el-form-control:focus{ background:#fff; border-color:var(--nadi-blue-700); }
.nadi-contact-form .fluentform .ff-btn-submit{ min-width:190px; }
.nadi-map .elementor-custom-embed,.nadi-map iframe{ border-radius:25px; overflow:hidden; display:block; }
.nadi-contact-box .icon-box-info a{ color:inherit; text-decoration:none; }
.nadi-contact-box .icon-box-info a:hover{ color:var(--nadi-blue-700); }
.nadi-contact-box .icon-box-info [dir="ltr"]{ unicode-bidi:isolate; display:inline-block; }
html[lang="fa-IR"] .nadi-contact-box .icon-box-info p{ text-align:start; text-align-last:auto; }
body.page-id-71 .elementor-element-0de631b,
body.page-id-71 .elementor-element-de6fd54{ display:none; }

/* ---- top band of single pages (blog articles, nadi-core/post-single.php; born on the team member page) ----------
   The band printed after the header: gray, the theme's line drawing, merged with the floating header, title as H1,
   the breadcrumb tab at its bottom. */
.nadi-member-hero{ position:relative; background:var(--nadi-n050) url(/wp-content/uploads/2024/04/home-5-bg.png) no-repeat top left;
  background-size:45.2% auto; border-radius:0 0 25px 25px; padding:230px 40px 0; text-align:center; overflow:hidden; }
.nadi-member-hero .neuros-heading{ margin:0; font-size:clamp(34px, 4.6vw, 64px); line-height:1.25; }
.nadi-member-hero .neuros-subheading{ display:block; justify-content:center; font-size:16px; margin-bottom:18px; }
.nadi-member-hero .neuros-heading-content{ display:block; }
@media (max-width:575px){ .nadi-member-hero{ padding:190px 20px 0; } }

/* ---- blog article (theme single.php + nadi-core/post-single.php) -------------------------------------------------
   The top band reuses the member-page band; article titles run long, so the H1 is smaller. RTL fixes in the sidebar:
   latest-posts thumbnails on the right, list and banner text from the right. */
.nadi-post-hero .neuros-heading{ font-size:clamp(28px, 3.4vw, 50px); max-width:1000px; margin-inline:auto; }
/* latest posts: thumbnail in the start (right) column, date and title beside it — the theme's float layout let the
   title run under the image once it moved right */
html[dir="rtl"] .wp-block-latest-posts li:has(> .wp-block-latest-posts__featured-image){ display:grid; grid-template-columns:75px 1fr; column-gap:14px;
  align-items:start; text-align:right; }
html[dir="rtl"] .wp-block-latest-posts .wp-block-latest-posts__featured-image.alignright{ float:none; margin:0;
  grid-column:1; grid-row:1 / span 3; }
html[dir="rtl"] .wp-block-latest-posts li:has(> .wp-block-latest-posts__featured-image) > :not(.wp-block-latest-posts__featured-image){ grid-column:2; margin:0; padding:0; }
html[dir="rtl"] .nadi-blog-banner .wp-block-cover__inner-container,
html[dir="rtl"] .nadi-blog-banner .wp-block-cover__inner-container *{ text-align:right; }
.nadi-blog-banner .wp-block-cover__inner-container a{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
html[dir="rtl"] .widget_block .wp-block-categories-list{ text-align:right; }

/* application page links closed for now (nadi-core/app-links-lock.php): the box stays, the pointer does not invite a click */
a[data-nadi-app-locked]{ cursor:default; }

/* ==== Products hub (/products/, 2026-10-03) ================================================================
   1 .nadi-products-grid — the four home product cards in one CSS grid, so every card has the same height on
     every device (2 × 2 down to tablets, one column on phones; grid-auto-rows:1fr equalises the rows too).
   2 .nadi-guide — the selection guide: a wireframe flow (two questions → four films). Plain HTML, dashed
     connectors drawn with gradients so they can «flow»; nodes fade in once when the block scrolls into view
     (class .is-in from nadi-core/page-assets.php; without JS everything is simply visible).
   3 .nadi-vs — «شرینک یا استرچ؟» dark box; .nadi-check-list — the quote check list. */
/* ---- The four product cards, on any page (home, about, the products hub, future pages) ------------------------
   Goal (owner, 2026-10-03): the cards have ONE height on every device — 2 × 2 down to tablets, one column on
   phones — whatever the text length. Two ways to get it, same result:
   a) class `nadi-products-grid` on a column that holds the card widgets directly (the products hub);
   b) nothing to set: a column whose inner sections hold the cards in two-column rows (home, about — the layout
      Elementor makes when you drop cards in rows). The rows' wrappers are flattened with display:contents so all
      cards become items of one grid. Skipped inside the Elementor editor, where those wrappers must stay
      selectable; the front end is what gets the grid.
   One other widget may sit above the cards in the same column (a heading): it takes a full-width auto row. */
.elementor .nadi-products-grid > .elementor-widget-wrap,
body:not(.elementor-editor-active) .elementor .elementor-widget-wrap:has(> .elementor-inner-section .elementor-column + .elementor-column .elementor-widget-neuros_price_item){
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:25px 20px; align-content:start; }
body:not(.elementor-editor-active) .elementor .elementor-inner-section:has(.elementor-column + .elementor-column .elementor-widget-neuros_price_item),
body:not(.elementor-editor-active) .elementor .elementor-inner-section:has(.elementor-column + .elementor-column .elementor-widget-neuros_price_item) > .elementor-container,
body:not(.elementor-editor-active) .elementor .elementor-inner-section:has(.elementor-column + .elementor-column .elementor-widget-neuros_price_item) > .elementor-container > .elementor-row,
body:not(.elementor-editor-active) .elementor .elementor-inner-section:has(.elementor-column + .elementor-column .elementor-widget-neuros_price_item) .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-neuros_price_item),
body:not(.elementor-editor-active) .elementor .elementor-inner-section:has(.elementor-column + .elementor-column .elementor-widget-neuros_price_item) .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-neuros_price_item){
  display:contents !important; }
/* a widget above the cards (heading): full width, its own height */
body:not(.elementor-editor-active) .elementor .elementor-widget-wrap:has(> .elementor-inner-section .elementor-column + .elementor-column .elementor-widget-neuros_price_item):has(> .elementor-widget:first-child){ grid-template-rows:auto; }
body:not(.elementor-editor-active) .elementor .elementor-widget-wrap:has(> .elementor-inner-section .elementor-column + .elementor-column .elementor-widget-neuros_price_item) > .elementor-widget{ grid-column:1 / -1; margin-bottom:10px; }
/* the rows' own top margin (35px in the home layout) is gone with the wrappers: give it back when the cards open the column */
body:not(.elementor-editor-active) .elementor .elementor-widget-wrap:has(> .elementor-inner-section:first-child .elementor-column + .elementor-column .elementor-widget-neuros_price_item){ margin-top:35px; }
.elementor .nadi-products-grid > .elementor-widget-wrap > .elementor-widget,
body:not(.elementor-editor-active) .elementor .elementor-inner-section .elementor-widget-wrap > .elementor-widget-neuros_price_item{ width:100%; max-width:100%; margin:0; display:flex; flex-direction:column; }
.elementor .nadi-products-grid > .elementor-widget-wrap > .elementor-widget > .elementor-widget-container{ flex:1 1 auto; display:flex; flex-direction:column; }
/* the card itself keeps the theme row layout (card + photo side by side); the home rules above stretch it */
@media (max-width:767px){
  .elementor .nadi-products-grid > .elementor-widget-wrap,
  body:not(.elementor-editor-active) .elementor .elementor-widget-wrap:has(> .elementor-inner-section .elementor-column + .elementor-column .elementor-widget-neuros_price_item){ grid-template-columns:minmax(0,1fr); gap:20px; }
}

#guide{ scroll-margin-top:110px; }
.nadi-guide{ --ng-line:#AEBCD0; --ng-gap:30px; max-width:1180px; margin:0 auto; text-align:center; color:var(--nadi-ink,#14203A); }
.nadi-guide b{ font-weight:700; }
.nadi-guide small{ display:block; font-size:14.5px; line-height:1.8; color:var(--nadi-n700,#4A5568); }
.ng-q{ position:relative; display:inline-flex; align-items:center; gap:12px; background:#fff; border:1.5px dashed var(--ng-line); border-radius:999px; padding:10px 12px 10px 24px; font-size:17px; line-height:1.6; }
.ng-q1{ font-size:20px; padding:12px 14px 12px 30px; }
.ng-step{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--nadi-blue-700,#2259AB); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; animation:ng-pulse 2.6s ease-out infinite; }
.ng-branches{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:60px; }
/* connectors: vertical ones flow downwards, horizontal ones are still */
.ng-branches::before,.ng-branch::before,.ng-branch > * + *::before,.ng-res::before{ content:""; position:absolute; left:50%; width:2px; margin-left:-1px;
  background:repeating-linear-gradient(to bottom,var(--ng-line) 0 6px,transparent 6px 12px); animation:ng-flow 1s linear infinite; }
.ng-branches::after,.ng-results::after{ content:""; position:absolute; height:2px; background:repeating-linear-gradient(to right,var(--ng-line) 0 6px,transparent 6px 12px); }
.ng-branches::before{ top:-60px; height:30px; }
.ng-branches::after{ top:-30px; left:calc(25% - 10px); right:calc(25% - 10px); }
.ng-branch{ position:relative; display:flex; flex-direction:column; align-items:center; }
.ng-branch::before{ top:-30px; height:30px; }
.ng-branch > * + *{ position:relative; margin-top:var(--ng-gap); }
.ng-branch > * + *::before{ top:calc(var(--ng-gap) * -1); height:var(--ng-gap); }
.ng-pill{ border:1.5px solid var(--nadi-blue-700,#2259AB); color:var(--nadi-blue-700,#2259AB); background:#fff; border-radius:999px; padding:6px 20px; font-weight:700; font-size:15.5px; }
.ng-family{ background:#fff; border:1.5px dashed var(--ng-line); border-radius:20px; padding:16px 24px; width:100%; max-width:420px; }
.ng-family b{ display:block; font-size:22px; line-height:1.6; }
.ng-results{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; margin-top:44px !important; }
.ng-branch > .ng-results::before{ top:-44px; height:28px; }
.ng-results::after{ top:-16px; left:calc(25% - 4px); right:calc(25% - 4px); }
.ng-res{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; background:#fff; border:1px solid #E0E4EA; border-radius:20px; padding:22px 16px 20px;
  color:inherit; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ng-res::before{ top:-16px; height:16px; }
.ng-res:hover{ transform:translateY(-5px); border-color:var(--nadi-blue-700,#2259AB); box-shadow:0 14px 30px rgba(20,32,58,.10); color:inherit; }
.ng-ans{ border:1px solid var(--ng-line); border-radius:999px; padding:1px 14px; font-size:13.5px; font-weight:700; color:var(--nadi-n700,#4A5568); }
.ng-res b{ font-size:18px; line-height:1.7; }
.ng-go{ margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; color:var(--nadi-blue-700,#2259AB); display:inline-flex; align-items:center; gap:8px; }
.ng-go .fontello{ font-size:9px; transition:transform .25s ease; }
.ng-res:hover .ng-go .fontello{ transform:translateX(-4px); }
.nadi-guide-foot p{ max-width:720px; margin-inline:auto; font-size:15.5px; color:var(--nadi-n700,#4A5568); }
html[lang="fa-IR"] .nadi-guide-foot p{ text-align:center; text-align-last:center; }
/* reveal once, in reading order */
.nadi-guide.ng-anim .ng-q1,.nadi-guide.ng-anim .ng-pill,.nadi-guide.ng-anim .ng-family,.nadi-guide.ng-anim .ng-q2,.nadi-guide.ng-anim .ng-res{ opacity:0; translate:0 16px; transition:opacity .55s ease, translate .55s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.nadi-guide.ng-anim.is-in .ng-q1,.nadi-guide.ng-anim.is-in .ng-pill,.nadi-guide.ng-anim.is-in .ng-family,.nadi-guide.ng-anim.is-in .ng-q2,.nadi-guide.ng-anim.is-in .ng-res{ opacity:1; translate:0 0; }
.nadi-guide.ng-anim.is-in .ng-pill{ transition-delay:.15s; }
.nadi-guide.ng-anim.is-in .ng-family{ transition-delay:.3s; }
.nadi-guide.ng-anim.is-in .ng-q2{ transition-delay:.45s; }
.nadi-guide.ng-anim.is-in .ng-res{ transition-delay:.6s, .6s, 0s, 0s, 0s; }
.nadi-guide.ng-anim.is-in .ng-res + .ng-res{ transition-delay:.72s, .72s, 0s, 0s, 0s; }
@keyframes ng-flow{ to{ background-position:0 12px; } }
@keyframes ng-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,89,171,.35); } 70%,100%{ box-shadow:0 0 0 10px rgba(34,89,171,0); } }
@media (prefers-reduced-motion:reduce){
  .nadi-guide *,.nadi-guide *::before{ animation:none !important; transition:none !important; }
  .nadi-guide.ng-anim *{ opacity:1 !important; translate:none !important; }
}
@media (max-width:899px){   /* narrow branches: the two results stack */
  .ng-results{ grid-template-columns:minmax(0,1fr); gap:12px; margin-top:var(--ng-gap) !important; }
  .ng-branch > .ng-results::before{ top:calc(var(--ng-gap) * -1); height:var(--ng-gap); }
  .ng-results::after,.ng-res::before{ display:none; }
}
@media (max-width:639px){   /* phones: one branch under the other */
  .ng-branches{ grid-template-columns:minmax(0,1fr); gap:50px; }
  .ng-branches::after,.ng-branch + .ng-branch::before{ display:none; }
  .ng-q1{ font-size:17.5px; padding:10px 12px 10px 22px; }
  .ng-q{ font-size:15.5px; }
}
@media (min-width:480px) and (max-width:639px){
  .ng-results{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* the comparison table (.nadi-compare--films): a card with a soft shadow, the film family over each name, yes/no
   marks and grade pills; rows tint on hover; under 992px it scrolls sideways with the first column pinned */
.nadi-products-compare{ margin-top:40px; background:#fff; border:1px solid #E0E4EA; border-radius:24px; overflow:hidden; box-shadow:0 18px 44px rgba(20,32,58,.07); }
.nadi-compare.nadi-compare--films{ border:0; border-radius:0; font-size:15.5px; table-layout:fixed; margin:0; }
.nadi-compare--films th,.nadi-compare--films td{ padding:17px 18px; text-align:center; vertical-align:middle; border-bottom:1px solid #E9EDF2; border-inline-start:1px solid #EEF1F5; line-height:1.9; }
.nadi-compare--films tr > :first-child{ border-inline-start:0; }
.nadi-compare.nadi-compare--films thead th{ background:linear-gradient(262deg,#1A468A 0%,#2259AB 100%); color:#fff; padding:20px 16px; border-bottom:0; border-inline-start-color:rgba(255,255,255,.14); }
.nadi-compare.nadi-compare--films thead th:first-child{ background:#14203A; text-align:start; }
.nadi-compare--films thead th a{ display:block; color:#fff; text-decoration:none; font-size:16.5px; line-height:1.7; }
.nadi-compare--films thead th a:hover{ color:#fff; text-decoration:underline; text-underline-offset:5px; }
.nadi-compare--films thead th small{ display:block; font-size:12.5px; font-weight:500; opacity:.78; }
.nadi-compare.nadi-compare--films tbody th{ width:17%; background:#F2F5F9; color:#14203A; text-align:start; font-weight:700; }
.nadi-compare--films tbody td{ color:#3C4656; background:#fff; transition:background-color .2s ease; }
.nadi-compare--films tbody tr:nth-child(even) td{ background:#FAFBFD; }
.nadi-compare--films tbody tr:hover td{ background:#EEF4FC; }
.nadi-compare--films tbody tr:last-child > *{ border-bottom:0; }
.nc-mark{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.nc-mark::before{ content:""; flex:none; width:20px; height:20px; border-radius:50%; background-repeat:no-repeat; background-position:center; }
.nc-yes{ color:#14203A; }
.nc-yes::before{ background-color:#2259AB; background-image:linear-gradient(45deg,transparent 46%,#fff 46% 56%,transparent 56%),linear-gradient(-45deg,transparent 46%,#fff 46% 56%,transparent 56%); background-size:5px 5px,9px 9px; background-position:5px 10px,8px 6px; }
.nc-no{ color:#6B7686; }
.nc-no::before{ background-color:#D5DBE4; background-image:linear-gradient(#fff,#fff); background-size:9px 2px; }
.nc-pill{ display:inline-block; border:1px solid #D5DBE4; border-radius:999px; padding:1px 16px; font-size:14px; font-weight:700; color:#3C4656; }
.nc-pill--food{ border-color:transparent; background:#E8F1FC; color:#1A468A; }
@media (max-width:991px){
  .nadi-products-compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; }
  .nadi-compare.nadi-compare--films{ min-width:900px; }
  .nadi-compare--films tr > :first-child{ position:sticky; right:0; z-index:1; box-shadow:-6px 0 12px -8px rgba(20,32,58,.25); }
}

.nadi-vs-tag{ display:inline-block; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:3px 14px; font-size:13.5px; color:var(--nadi-on-dark-2); }
.nadi-vs-col--b{ border-right:1px solid var(--nadi-dark-line); }
@media (max-width:1024px){ .nadi-vs-col--b{ border-right:0; border-top:1px solid var(--nadi-dark-line); } }
.nadi-vs-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.nadi-vs-links li{ margin:0; padding:0; }
.nadi-vs-links li::before{ content:none !important; display:none !important; }
.nadi-dark .nadi-vs-links a:not(.neuros-button):not(.elementor-button){ display:inline-flex; align-items:center; gap:10px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px 16px; font-size:14.5px; font-weight:600; }
.nadi-dark .nadi-vs-links a:not(.neuros-button):not(.elementor-button):hover{ background:#fff; color:#0F1D31; }
.nadi-vs-links .fontello{ font-size:9px; }

/* the quote list: the theme's own list arrow (as on the other pages); only the rhythm is set here */
.nadi-quote-list ul{ margin:2px 0 12px; }
.nadi-quote-list li{ margin-bottom:8px; line-height:1.9; }
.nadi-compare.nadi-compare--films thead th:not(:first-child){ text-align:center; }
.nadi-quote-list li::before{ color:var(--nadi-blue-700,#2259AB); }
/* products hub: the applications slider title and arrows start at the gutter, like every other heading on the page */
.page-id-25094 .neuros-service-listing-widget .neuros-heading.heading-with-pagination{ margin-left:0; margin-right:0; }