/* ============================================================
   Dr. Yakir Clinic - native.css (owner: CORE, see NATIVE.md)
   Makes pages built from native Elementor widgets (build/native.py)
   render exactly like the original markup styled by style.css.

   How the converted data is marked:
   .dyk-c  container converted from an original element (it IS that element: tag, classes, id)
   .dyk-x  "transparent" widget: its wrapper is display:contents on the front end and the
           inner element carries the original identity (text-editor HTML, button link attributes)
   .dyk-w  "box" widget: the wrapper carries the original classes, the inner markup is made neutral
   .dyk-i / .dyk-ii  box wrapper of an element that was inline / inline-replaced (span, img, svg)
   .dyk-tb  plain box wrapper around an unclassed element (children of .hero-copy keep their
            animated box); the inner element is still the original one

   Cascade: Elementor's base CSS is printed in @layer elementor (mu-plugins/dryakir-design.php).
   Resets that only undo Elementor live in @layer dyk-native (above elementor, below every
   unlayered rule), so style.css keeps winning exactly as on the original pages. Resets that work
   through Elementor's own custom properties are unlayered (they also apply in the editor).
   Rules that re-create an original rule on widget markup are unlayered, at the original's specificity.
   ============================================================ */

@layer elementor, dyk-restore, dyk-native;

/* ---------- 1. Converted containers: plain elements ---------- */
/* Elementor drives its container layout through custom properties; "initial" makes each
   var() invalid, so the property falls back to the plain-element value. The owner's own
   Elementor settings (per-element CSS, higher specificity) still apply. */
.e-con.dyk-c {
  --flex-direction: initial;
  --flex-wrap: initial;
  --justify-content: initial;
  --align-items: initial;
  --align-content: initial;
  --gap: initial;
  --row-gap: initial;
  --column-gap: initial;
  --padding-top: initial;
  --padding-right: initial;
  --padding-bottom: initial;
  --padding-left: initial;
  --margin-top: initial;
  --margin-right: initial;
  --margin-bottom: initial;
  --margin-left: initial;
  --width: initial;
  --height: initial;
  --min-height: initial;
  --position: initial;
  --z-index: initial;
  --overflow: initial;
  --border-radius: initial;
  --text-align: initial;
  --flex-wrap-mobile: initial;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
  --kit-widget-spacing: 0px;
}
@media (max-width: 767px) {
  .e-con.e-flex.dyk-c { --width: initial; --flex-wrap: initial; }
}
/* Every container's own Elementor CSS sets --display: flex. A plain element is a block; style.css still
   sets display:flex/grid where the original did (its rule beats Elementor's display: var(--display)).
   Through the variable this also holds in the editor, where Elementor's CSS is not layered. */
.elementor .e-con.e-con.dyk-c { --display: block; }
.elementor .e-con.e-con.dyk-c:is(span, a, label) { --display: inline; }
.elementor .e-con.e-con.dyk-c:is(button) { --display: inline-block; }
.elementor .e-con.e-con.dyk-c.dyk-flex { --display: flex; }

@layer dyk-native {
  .e-con.dyk-c {
    display: block;
    min-width: auto;
    transition: none;
  }
  .e-con.dyk-c:is(span, a, label) { display: inline; }
  .e-con.dyk-c:is(button) { display: inline-block; }
  .e-con.dyk-c:is(p) { margin-block: 1em; }
  .e-con.dyk-c.dyk-flex { display: flex; }
  /* Elementor's background-overlay pseudo element: back to a plain ::before for style.css */
  .e-con.dyk-c::before {
    content: none;
    display: inline;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    border: 0 none;
    border-radius: 0;
    opacity: 1;
    mix-blend-mode: normal;
    transition: none;
  }
  /* tags rendered as div: the browser defaults of the original tag */
  .e-con.dyk-c:is(.dyk-t-ul, .dyk-t-ol) { margin-block: 1em; padding-inline-start: 40px; }
  .e-con.dyk-c.dyk-t-ul { list-style: disc; }
  .e-con.dyk-c.dyk-t-ol { list-style: decimal; }
  .e-con.dyk-c.dyk-t-li { display: list-item; }
  .e-con.dyk-c:is(.dyk-t-figure, .dyk-t-blockquote) { margin: 1em 40px; }
  .e-con.dyk-c.dyk-t-dl { margin-block: 1em; }
  .e-con.dyk-c.dyk-t-dd { margin-inline-start: 40px; }
  .e-con.dyk-c.dyk-t-fieldset { margin-inline: 2px; padding: .35em .75em .625em; border: 2px groove ThreeDFace; }
}

/* ---------- 2. Widget wrappers ---------- */
.elementor-widget:is(.dyk-w, .dyk-x) {
  --flex-direction: initial;
  --flex-wrap: initial;
  --justify-content: initial;
  --align-items: initial;
  --align-content: initial;
  --row-gap: initial;
  --column-gap: initial;
  --kit-widget-spacing: 0px;
  --container-widget-width: initial;
}

@layer dyk-native {
  .elementor-widget:is(.dyk-w, .dyk-x) {
    position: static;
    min-width: auto;
    max-width: none;
    width: auto;
    margin: 0;
    transition: none;
    text-align: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  .elementor-widget.dyk-w.dyk-i { display: inline; }
  .elementor-widget.dyk-w.dyk-ii { display: inline-block; vertical-align: baseline; }
  body:not(.elementor-editor-active) .elementor-widget.dyk-x { display: contents; }

  /* links inside converted widgets keep the browser's underline unless style.css removes it */
  .elementor-widget:is(.dyk-w, .dyk-x) a { text-decoration: revert; box-shadow: none; }
}

/* ---------- 3. Widget internals ---------- */
@layer dyk-native {
  /* Heading. Transparent: the h1-h6/span/div IS the original element (browser defaults back). */
  .elementor-widget-heading:is(.dyk-x, .dyk-tb) > .elementor-heading-title {
    margin: revert;
    padding: revert;
    line-height: revert;
  }
  /* Box: the wrapper is the original element, the inner tag is only text */
  .elementor-widget-heading.dyk-w:not(.dyk-tb) > .elementor-heading-title {
    line-height: inherit;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .elementor-widget-heading.dyk-w:not(.dyk-tb) > .elementor-heading-title { margin: 0 !important; padding: 0 !important; }
  .elementor-widget-heading .elementor-heading-title > a { color: revert; font-size: inherit; line-height: inherit; }

  /* Image */
  .elementor-widget-image.dyk-x img { display: revert; vertical-align: revert; }
  .elementor-widget-image.dyk-x a { display: revert; }
  .elementor-widget-image a img[src$=".svg"] { width: revert; }
  .elementor-widget-image.dyk-w > a { display: block; width: 100%; height: 100%; }
  .elementor-widget-image.dyk-w > img,
  .elementor-widget-image.dyk-w > a > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: inherit;
    object-position: inherit;
    border-radius: inherit;
    aspect-ratio: inherit;
  }

  /* Button: a plain link first, the original .btn classes (on the <a>) do the rest */
  .elementor-widget-button.dyk-x .elementor-button,
  .elementor-widget-button.dyk-w .elementor-button {
    display: revert;
    line-height: inherit;
    background: none;
    font: inherit;
    padding: 0;
    border-radius: 0;
    color: revert;
    fill: revert;
    text-align: inherit;
    transition: none;
  }
  .elementor-widget-button:is(.dyk-x, .dyk-w) .elementor-button:is(:hover, :focus, :visited) { color: revert; }
  .elementor-widget-button .elementor-button.btn > .elementor-button-content-wrapper {
    display: flex;
    gap: inherit;
    align-items: center;
    justify-content: inherit;
  }
  .elementor-widget-button .elementor-button:not(.btn) :is(.elementor-button-content-wrapper, .elementor-button-icon, .elementor-button-text) {
    display: contents;
  }
  .elementor-widget-button .elementor-button-text { display: inline; }

  /* Icon: the svg is the element (the uploaded file carries its own size and colors) */
  .elementor-widget-icon:is(.dyk-x, .dyk-w) .elementor-icon-wrapper,
  .elementor-widget-icon:is(.dyk-x, .dyk-w) div.elementor-icon { display: contents; }
  .elementor-widget-icon:is(.dyk-x, .dyk-w) .elementor-icon {
    line-height: inherit;
    transition: none;
    color: revert;
    font-size: inherit;
    text-align: inherit;
    border-radius: 0;
  }
  .elementor-widget-icon:is(.dyk-x, .dyk-w) a.elementor-icon { display: revert; }
  :is(.elementor-widget-icon, .elementor-widget-icon-list, .elementor-widget-social-icons, .elementor-widget-button):is(.dyk-x, .dyk-w) svg {
    display: revert;
    position: static;
    margin: 0;
    transition: none;
  }

  /* Icon list (an original ul/ol): the wrapper is the list, Elementor's ul is not a box, each li is the original li */
  .elementor-widget-icon-list:is(.dyk-x, .dyk-w) .elementor-icon-list-items { display: contents; }
  .elementor-widget-icon-list.dyk-il-list .elementor-icon-list-item {
    display: list-item;
    align-items: normal;
    position: static;
  }
  .elementor-widget-icon-list:is(.dyk-x, .dyk-w) .elementor-icon-list-item a {
    display: revert;
    align-items: normal;
    width: auto;
    font-size: inherit;
  }
  .elementor-widget-icon-list:is(.dyk-x, .dyk-w) .elementor-icon-list-icon { display: contents; }
  .elementor-widget-icon-list:is(.dyk-x, .dyk-w) .elementor-icon-list-text {
    align-self: auto;
    padding: 0;
    transition: none;
  }
  .elementor-widget-icon-list:is(.dyk-x, .dyk-w) .elementor-icon-list-item::after { content: none; }
  .elementor-widget-icon-list.dyk-il-end .elementor-icon-list-icon > svg { order: 1; }

  /* Social icons: each link is the original <a> */
  .elementor-widget-social-icons.dyk-social { font-size: inherit; line-height: inherit; }
  .elementor-widget-social-icons.dyk-social :is(.elementor-social-icons-wrapper, .elementor-grid-item) { display: contents; }
  .elementor-widget-social-icons.dyk-social .elementor-social-icon {
    display: revert;
    background-color: transparent;
    width: auto;
    height: auto;
    font-size: inherit;
    line-height: inherit;
    align-items: normal;
    justify-content: normal;
    text-align: inherit;
    transition: none;
    border-radius: 0;
    margin: 0;
  }
  .elementor-widget-social-icons.dyk-social .elementor-social-icon:hover { opacity: 1; color: revert; }

  /* Counter: number + label on one line, as the original <span class="num"> + <span class="lbl"> */
  .elementor-widget-counter.dyk-counter .elementor-counter {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: flex-start;
  }
  /* the line's strut (the original label and number shared one line box): a zero-width nbsp in the body font */
  .elementor-widget-counter.dyk-counter .elementor-counter::before { content: "\a0"; width: 0; flex: none; }
  .elementor-widget-counter.dyk-counter .elementor-counter-number-wrapper {
    order: -1;
    display: flex;
    align-items: baseline;
    flex: none;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
  }
  .elementor-widget-counter.dyk-counter :is(.elementor-counter-number-prefix, .elementor-counter-number-suffix) {
    flex-grow: 0;
    text-align: inherit;
  }
  /* an empty prefix would give the number box no baseline */
  .elementor-widget-counter.dyk-counter :is(.elementor-counter-number-prefix, .elementor-counter-number-suffix):empty { display: none; }
  /* "100%": a % / currency sign stays on the number's right, as the browser's bidi order had it inline */
  .elementor-widget-counter.dyk-num-ltr .elementor-counter-number-wrapper { flex-direction: row-reverse; justify-content: flex-end; }
  .elementor-widget-counter.dyk-counter .elementor-counter-title {
    display: block;
    flex: none;
    font: inherit;
    line-height: inherit;
    justify-content: normal;
    align-items: normal;
  }
}

/* ---------- 4. Original leaf rules re-created on widget markup ---------- */
/* .stat .num / .stat .lbl (hero counters) */
.stat .elementor-counter-number-wrapper {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  min-width: 2ch;
}
.stat .elementor-counter-title { color: var(--text-inverse-soft); font-size: .9rem; }
@media (max-width: 760px) {
  .stat .elementor-counter-number-wrapper { font-size: 1.45rem; }
  .stat .elementor-counter-title { font-size: .8rem; }
}

/* ---------- 5. Elementor editor ---------- */
body.elementor-editor-active .reveal { opacity: 1; transform: none; }
body.elementor-editor-active .hero-copy > * { opacity: 1; transform: none; animation: none; }
/* In the editor Elementor's CSS is not layered, so the layered resets above lose to it. The resets of
   Elementor-only inner markup (nothing in style.css targets it) are repeated here for the editor canvas. */
body.elementor-editor-active .elementor-widget-counter.dyk-counter .elementor-counter { display: flex; flex-flow: row wrap; align-items: baseline; justify-content: flex-start; }
body.elementor-editor-active .elementor-widget-counter.dyk-counter .elementor-counter-number-wrapper { order: -1; display: flex; flex: none; align-items: baseline; font: inherit; line-height: inherit; text-align: inherit; }
body.elementor-editor-active .elementor-widget-counter.dyk-counter .elementor-counter-title { display: block; flex: none; font: inherit; line-height: inherit; }
body.elementor-editor-active .elementor-widget-counter.dyk-counter :is(.elementor-counter-number-prefix, .elementor-counter-number-suffix):empty { display: none; }
body.elementor-editor-active .elementor-widget-counter.dyk-num-ltr .elementor-counter-number-wrapper { flex-direction: row-reverse; }
body.elementor-editor-active .stat.dyk-counter .elementor-counter .elementor-counter-number-wrapper { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1.1; }
body.elementor-editor-active .stat.dyk-counter .elementor-counter .elementor-counter-title { color: var(--text-inverse-soft); font-size: .9rem; line-height: 1.7; }
body.elementor-editor-active .elementor-widget-image.dyk-w > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: inherit; border-radius: inherit; }
body.elementor-editor-active .elementor-widget-heading.dyk-w:not(.dyk-tb) > .elementor-heading-title { line-height: inherit; font: inherit; color: inherit; letter-spacing: inherit; }
body.elementor-editor-active .elementor-widget-button .elementor-button.btn > .elementor-button-content-wrapper { gap: inherit; align-items: center; }

/* The editor's live preview drops the button link's Custom Attributes (class btn ...); the wrapper's
   dyk-eb-* twins give the same look while editing. */
body.elementor-editor-active .dyk-eb .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: 10px;
  padding: 14px 30px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  line-height: 1.7; text-decoration: none; border: 0;
}
body.elementor-editor-active .dyk-eb .elementor-button-content-wrapper { gap: 10px; align-items: center; }
body.elementor-editor-active .dyk-eb-primary .elementor-button { background: linear-gradient(120deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 14px 34px -12px rgba(46, 159, 216, .65); }
body.elementor-editor-active .dyk-eb-gold .elementor-button { background: linear-gradient(120deg, var(--gold-light), var(--gold)); color: #2a1f0a; box-shadow: 0 14px 34px -12px rgba(201, 164, 92, .55); }
body.elementor-editor-active .dyk-eb-ghost .elementor-button { background: rgba(255, 255, 255, .07); color: var(--text-inverse); border: 1px solid rgba(255, 255, 255, .22); }
body.elementor-editor-active .dyk-eb-whatsapp .elementor-button { background: linear-gradient(120deg, #35d36e, #1fae53); color: #fff; }
body.elementor-editor-active .dyk-eb-sm .elementor-button { padding: 10px 20px; font-size: .92rem; }
body.elementor-editor-active .dyk-eb-lg .elementor-button { padding: 17px 40px; font-size: 1.12rem; }

/* ===== generated by build/native.py: child-combinator remaps (do not edit by hand) ===== */
/* style.css: .treatment-card > p */
.treatment-card > :where(.elementor-widget.dyk-x) > p { color: var(--text-soft); margin: 0 0 18px; }
/* style.css: .section > .container */
.section > :where(.elementor-widget.dyk-x) > .container { position: relative; z-index: 1; }
/* style.css: .hero-copy > * */
.hero-copy > :where(.elementor-widget.dyk-x) > *,
.hero-copy > :where(.elementor-icon-wrapper) > :where(.elementor-icon) > * { opacity: 0; transform: translateY(24px); animation: rise-in .8s cubic-bezier(.22,.61,.36,1) forwards; }
/* style.css: .hero-copy > *:nth-child(1) */
.hero-copy > :where(.elementor-widget.dyk-x):nth-child(1) > * { animation-delay: .1s; }
/* style.css: .hero-copy > *:nth-child(2) */
.hero-copy > :where(.elementor-widget.dyk-x):nth-child(2) > * { animation-delay: .22s; }
/* style.css: .hero-copy > *:nth-child(3) */
.hero-copy > :where(.elementor-widget.dyk-x):nth-child(3) > * { animation-delay: .36s; }
/* style.css: .hero-copy > *:nth-child(4) */
.hero-copy > :where(.elementor-widget.dyk-x):nth-child(4) > * { animation-delay: .5s; }
/* style.css: .hero-copy > *:nth-child(5) */
.hero-copy > :where(.elementor-widget.dyk-x):nth-child(5) > * { animation-delay: .66s; }
/* style.css: body.a11y-no-motion .hero-copy > * */
body.a11y-no-motion .hero-copy > :where(.elementor-widget.dyk-x) > *,
body.a11y-no-motion .hero-copy > :where(.elementor-icon-wrapper) > :where(.elementor-icon) > * { opacity: 1; transform: none; animation: none; }
/* site-home.css: .dyk-compare .dyk-cmp-handle > * */
.dyk-compare .dyk-cmp-handle > :where(.elementor-widget.dyk-x) > *,
.dyk-compare .dyk-cmp-handle > :where(.elementor-icon-wrapper) > :where(.elementor-icon) > * { position: relative;
  z-index: 1;
  width: auto;
  margin: 0;
  pointer-events: none; }
/* site-home.css: .dyk-h-more > * */
@media (max-width: 760px) {
.dyk-h-more > :where(.elementor-widget.dyk-x) > *,
.dyk-h-more > :where(.elementor-icon-wrapper) > :where(.elementor-icon) > * { flex: 1 1 100%; }
}
/* site-pages.css: .dyk-pg-hero-doc .hero-copy > :nth-child(6) */
.dyk-pg-hero-doc .hero-copy > :where(.elementor-widget.dyk-x):nth-child(6) > * { animation-delay: .8s; }
/* site-treatments.css: .dyk-tr-opt .treatment-card > p b */
.dyk-tr-opt .treatment-card > :where(.elementor-widget.dyk-x) > p b { color: var(--ink-2); }
/* site-treatments.css: .dyk-tr-opt .treatment-card > p.dyk-tr-how */
.dyk-tr-opt .treatment-card > :where(.elementor-widget.dyk-x) > p.dyk-tr-how { background: #f3f8fc;
  border: 1px solid #e4edf4;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .95rem;
  color: var(--text); }
/* ===== end of generated remaps ===== */