/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Fonts: DM Sans with its optical-size axis (opsz 9-40), the same files the previews load from Google.
   One variable file per subset carries every weight; functions.php keeps Elementor's own DM Sans copy out. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/dm-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/dm-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Site base, as in the previews: borders inside the box, the focus ring, selection and caret colours. */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; caret-color: var(--navy); accent-color: var(--navy); }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--radius-btn); }

/* DNA fragment field. The child-theme script draws lines into elements with the class "frag-host". */
.frag { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-linecap: round; }
.frag .hit { stroke: var(--mint); stroke-opacity: 1; }
.frag circle.hit { fill: var(--mint); stroke: none; }
.frag-field { color: var(--deep-navy); -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* Motion, played once when the field scrolls into view. Reduced motion and no script show the still picture. */
.frag-field.is-armed .row { transform: translateX(calc(var(--dir) * 40px)); }
.frag-field.is-armed .hit { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.frag-field .read { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.frag-field.is-read .row { transform: none; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 35ms); }
.frag-field.is-read .hit { transform: scale(1); transition: transform .5s cubic-bezier(.16, 1, .3, 1) calc(.9s + var(--d) * .8s); }
.frag-field.is-read .read { animation: frag-read 2s linear .9s both; }

@keyframes frag-read {
  0% { stroke-dashoffset: 1; opacity: 0; }
  5% { stroke-dashoffset: .9; opacity: .7; }
  40% { stroke-dashoffset: 0; opacity: .7; }
  70% { stroke-dashoffset: 0; opacity: .7; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.frag-field, .route, .genes, .woocommerce form.checkout),
  :is(.frag-field, .route, .genes, .woocommerce form.checkout)::before,
  :is(.frag-field, .route, .genes, .woocommerce form.checkout)::after,
  :is(.frag-field, .route, .genes, .woocommerce form.checkout) *,
  :is(.frag-field, .route, .genes, .woocommerce form.checkout) *::before,
  :is(.frag-field, .route, .genes, .woocommerce form.checkout) *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cookie banner and its settings (Pressidium Cookie Consent) in DM Sans; the plugin has no font setting. */
.cc_div { --cc-font-family: "DM Sans", system-ui, sans-serif; }

/* Header menu on tablets and phones (header part 68): the sub-pages of »Analize« are always shown as indented rows,
   and the button runs the full width, as in the previews (owner, 23 Oct 2026). site.js lets a tap on »Analize« open its page. */
@media (max-width: 1024px) {
  .elementor-68 nav.elementor-nav-menu--dropdown .sub-menu { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
  .elementor-68 nav.elementor-nav-menu--dropdown .elementor-item .sub-arrow { display: none; }
  .elementor-68 nav.elementor-nav-menu--dropdown .nav-cta > a.elementor-item { display: flex; width: 100%; }
}

/* Step route (home, Ožji panel, Širši panel). Its look and its walk are in the global class "route";
   step-route.js arms it, and the number fills with this animation while it is the current step. */
@keyframes route-here {
  0%, 100% { background-color: transparent; color: var(--deep-navy); }
  22%, 55% { background-color: var(--deep-navy); color: var(--white); }
}

/* Questions (Elementor's accordion with the class "accordion"): the answer unfolds to its height and fades in.
   Chrome and Edge only; Safari and Firefox open it at once and only the plus turns into a minus. */
@supports (interpolate-size: allow-keywords) {
  .elementor .accordion { interpolate-size: allow-keywords; }
  .elementor .accordion details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .22s cubic-bezier(.16, 1, .3, 1), opacity .15s linear, content-visibility .22s allow-discrete; }
  .elementor .accordion details[open]::details-content { block-size: auto; opacity: 1; transition: block-size .32s cubic-bezier(.16, 1, .3, 1), opacity .32s linear, content-visibility .32s allow-discrete; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor .accordion summary::after { transition: none; }
  .elementor .accordion details::details-content { transition: opacity .15s linear, content-visibility .15s allow-discrete; }
  .elementor .accordion details[open]::details-content { transition: opacity .15s linear, content-visibility .15s allow-discrete; }
  .elementor .jump a::after { transition: none; }
  .elementor .jump a:hover::after { transform: none; }
}

/* Blagajna: the classic WooCommerce checkout (page with [woocommerce_checkout]), styled as in Predogled spletne strani/blagajna.html.
   The markup comes from WooCommerce and the child-theme checkout hooks; those hooks print classes that start with "zz-". */

/* The page: section spacing, gutters and the body text of the site. */
body.woocommerce-checkout .elementor > .e-con.e-parent { padding-left: 24px; padding-right: 24px; }
body.woocommerce-checkout .elementor > .e-con.e-parent > .e-con-inner { padding-top: 0; padding-bottom: 0; }
body.woocommerce-checkout .elementor-shortcode > .woocommerce { padding: 0 0 96px; font-family: var(--font), system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--text); }
body.woocommerce-checkout .elementor-shortcode > .woocommerce a:not(.link-arrow) { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.woocommerce-checkout .elementor-shortcode > .woocommerce a:not(.link-arrow):hover { color: var(--deep-navy); text-decoration-thickness: 2px; }

/* The short opening on Pale Tint (owner, 22 Oct 2026), as on the other pages people use. The tint runs to the window's edges:
   the shadow paints it sideways and clip-path keeps it to the band's height, so the page gets no sideways scroll. */
.zz-co-opening, .zz-thanks .section.tint { background: var(--tint); box-shadow: 0 0 0 100vmax var(--tint); clip-path: inset(0 -100vmax); }
.zz-co-opening { padding: 96px 0; }
.zz-co-title { margin: 0 0 16px; font-family: var(--font), system-ui, sans-serif; font-size: var(--fs-h1); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--deep-navy); text-wrap: balance; }
.zz-co-lead { margin: 0; max-width: none; font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.zz-co-intro { margin: 0 0 28px; text-wrap: pretty; }
.zz-co-small { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }

/* Layout: the customer's details on the left, the order box on the right. Messages from WooCommerce run across the top. */
.woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: 64px; align-items: start; margin-top: 136px; }  /* the section's 96 px and the library form's 40 px */
.woocommerce form.checkout::before, .woocommerce form.checkout::after { content: none; }
.woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
.woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; width: 100%; float: none; }
.woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; }
.woocommerce form.checkout > #order_review { grid-column: 2; grid-row: 3; }
.woocommerce form.checkout #customer_details .col-1, .woocommerce form.checkout #customer_details .col-2 { width: 100%; float: none; }

/* The two headings WooCommerce prints. */
.woocommerce form.checkout .woocommerce-billing-fields > h3,
.woocommerce form.checkout #order_review_heading { margin: 0 0 16px; font-family: var(--font), system-ui, sans-serif; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--deep-navy); }

/* Fields: the library's field. Two short pairs share a row. */
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; }
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper::before, .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper::after { content: none; }
.woocommerce form.checkout .form-row { grid-column: 1 / -1; width: 100%; float: none; margin: 0 0 20px; padding: 0; }
.woocommerce form.checkout .form-row::before, .woocommerce form.checkout .form-row::after { content: none; }
.woocommerce form.checkout #billing_first_name_field, .woocommerce form.checkout #billing_last_name_field { grid-column: span 3; }
.woocommerce form.checkout #billing_postcode_field { grid-column: span 2; }
.woocommerce form.checkout #billing_city_field { grid-column: span 4; }
.woocommerce form.checkout .form-row label { display: block; margin: 0 0 6px; font-size: 0.9375rem; font-weight: 500; line-height: 1.65; color: var(--deep-navy); }
/* Keep WooCommerce's required-field marker visible. */
.woocommerce form.checkout .form-row label .required { color: var(--error); }
.woocommerce form.checkout .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce form.checkout .form-row input.input-text,
.woocommerce form.checkout .form-row select,
.woocommerce form.checkout .form-row textarea { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: var(--radius-btn); background-color: var(--white); box-shadow: none; font: inherit; color: var(--text); transition: border-color .2s cubic-bezier(.16, 1, .3, 1); }
.woocommerce form.checkout .form-row select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2328447E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); background-position: right 16px center; background-size: 16px; background-repeat: no-repeat; }
.woocommerce form.checkout .form-row input.input-text:hover,
.woocommerce form.checkout .form-row select:hover,
.woocommerce form.checkout .form-row textarea:hover { border-color: var(--deep-navy); }
.woocommerce form.checkout .form-row input.input-text:focus-visible,
.woocommerce form.checkout .form-row select:focus-visible,
.woocommerce form.checkout .form-row textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
/* WooCommerce turns a filled field green; the library has no such state. */
.woocommerce form.checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.checkout .form-row.woocommerce-validated select { border-color: var(--field-line); }
.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select { border-color: var(--error); border-width: 2px; padding: 11px 15px; }
.woocommerce form.checkout .form-row.woocommerce-invalid label { color: var(--deep-navy); }
.woocommerce form.checkout .form-row .checkout-inline-error-message { margin: 6px 0 0; font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: var(--error); }
/* Help under a field. WooCommerce shows it only while the field has focus; here it is always there. */
.woocommerce form.checkout .form-row .woocommerce-input-wrapper .description { display: block !important; margin: 6px 0 0; padding: 0; border-radius: 0; background: none; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.woocommerce form.checkout .form-row .woocommerce-input-wrapper .description::before { content: none; }

/* The order box: the heading is its top, #order_review the rest. */
.woocommerce form.checkout #order_review_heading { width: auto; float: none; margin: 0; padding: 32px 32px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--white); }
.woocommerce form.checkout #order_review { width: auto; float: none; padding: 32px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); }
.zz-order-name { margin: 0 0 4px; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--deep-navy); }
.zz-order-official { margin: 0 0 16px; font-size: 0.9375rem; color: var(--muted); }
.zz-order-change { margin: 0; font-size: 0.9375rem; }
.zz-order-rows { margin: 24px 0 0; }
.zz-order-rows > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.zz-order-rows > div:last-child { border-bottom: 1px solid var(--line); }
.zz-order-rows dt { margin: 0; font-weight: 500; color: var(--deep-navy); }
.zz-order-rows dd { margin: 0; text-align: right; }
.zz-order-total dd { font-size: 1.25rem; font-weight: 600; color: var(--deep-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zz-order .zz-co-small { margin-top: 12px; }
.zz-order-before { margin: 32px 0 8px; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--deep-navy); }
.zz-order-terms { margin: 0 0 24px; padding: 0; list-style: none; }
.zz-order-terms li { position: relative; margin: 0 0 8px; padding-left: 20px; font-size: 0.9375rem; line-height: 1.55; }
.zz-order-terms li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }

/* Payment part: one way to pay, explained under the price, so the list of methods is not shown (its input still goes with the form). */
.woocommerce form.checkout #payment { border-radius: 0; background: none; }
.woocommerce form.checkout #payment ul.payment_methods { display: none; }
.woocommerce form.checkout #payment div.form-row.place-order { margin: 0; padding: 0; }
.woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper { display: flex; flex-direction: column; }
.woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 0 12px; }
.woocommerce form.checkout .woocommerce-privacy-policy-text { order: 2; }
.woocommerce form.checkout .woocommerce-privacy-policy-text p { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.woocommerce form.checkout label.woocommerce-form__label-for-checkbox { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.55; color: var(--text); cursor: pointer; }
.woocommerce form.checkout label.woocommerce-form__label-for-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }
.woocommerce #payment #place_order { display: inline-flex; align-items: center; justify-content: center; float: none; width: 100%; min-height: 52px; margin: 24px 0 0; padding: 14px 28px; border: 1.5px solid var(--navy); border-radius: var(--radius-btn); background: var(--navy); color: var(--white); font: 600 1rem/1.2 var(--font), system-ui, sans-serif; cursor: pointer; transition: background-color .2s cubic-bezier(.16, 1, .3, 1), border-color .2s cubic-bezier(.16, 1, .3, 1); }
.woocommerce #payment #place_order:hover, .woocommerce #payment #place_order:focus-visible { border-color: var(--btn-hover); background: var(--btn-hover); color: var(--white); }
.woocommerce #payment #place_order:active { border-color: var(--btn-active); background: var(--btn-active); }
.zz-co-after { margin-top: 12px; }

/* Messages from WooCommerce above the form: an outlined box in the error colour, no icon. */
body.woocommerce-checkout .woocommerce ul.woocommerce-error { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--error); border-radius: var(--radius-btn); background: var(--white); color: var(--error); font-size: 0.9375rem; font-weight: 500; line-height: 1.55; list-style: none; }
/* A message printed above the form (not inside it) follows the opening line, so its space is on top. */
body.woocommerce-checkout .woocommerce-notices-wrapper ul.woocommerce-error { margin: 32px 0 0; }
body.woocommerce-checkout .woocommerce ul.woocommerce-error::before { content: none; }
body.woocommerce-checkout .woocommerce ul.woocommerce-error li { margin: 0; padding: 0; }
body.woocommerce-checkout .woocommerce ul.woocommerce-error a { color: inherit; }

@media (max-width: 1024px) {
  body.woocommerce-checkout .elementor-shortcode > .woocommerce { padding: 72px 0; }
  .woocommerce form.checkout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .woocommerce form.checkout > #customer_details,
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > #order_review { grid-column: 1; grid-row: auto; }
  body.woocommerce-checkout .elementor-shortcode > .woocommerce { padding: 0 0 72px; }
  .zz-co-opening { padding: 72px 0; }
  .woocommerce form.checkout { margin-top: 112px; }
  /* One column: the order box splits. What you order and its price come first, »Preden oddate« and the button after the form
     (owner, 22 Oct 2026). Its parts become items of the form's grid and are put in that order. */
  .woocommerce form.checkout #order_review, .woocommerce form.checkout .zz-order { display: contents; }
  .woocommerce form.checkout > .woocommerce-NoticeGroup { order: -3; }
  .woocommerce form.checkout > #order_review_heading { order: -2; }
  .woocommerce form.checkout .zz-order-summary { order: -1; margin-bottom: 48px; padding: 32px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); }
  .woocommerce form.checkout .zz-order-pre { order: 1; margin-top: 48px; padding: 32px 32px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--white); }
  .woocommerce form.checkout .zz-order-pre .zz-order-before { margin-top: 0; }
  .woocommerce form.checkout #payment { order: 2; padding: 0 32px 32px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); }
}

@media (max-width: 767px) {
  body.woocommerce-checkout .elementor > .e-con.e-parent { padding-left: 20px; padding-right: 20px; }
  body.woocommerce-checkout .elementor-shortcode > .woocommerce { padding: 0 0 56px; }
  .zz-co-opening { padding: 56px 0; }
  .woocommerce form.checkout { margin-top: 96px; }
  .woocommerce form.checkout #billing_first_name_field,
  .woocommerce form.checkout #billing_last_name_field,
  .woocommerce form.checkout #billing_postcode_field,
  .woocommerce form.checkout #billing_city_field { grid-column: 1 / -1; }
  .woocommerce form.checkout #order_review_heading { padding: 24px 24px 0; }
  .woocommerce form.checkout #order_review { padding: 24px; }
  .woocommerce form.checkout .zz-order-summary { padding: 32px 24px 24px; }
  .woocommerce form.checkout .zz-order-pre { padding: 24px 24px 0; }
  .woocommerce form.checkout #payment { padding: 0 24px 24px; }
}

/* Naročilo prejeto: the order-received view of the checkout, printed by woocommerce/checkout/thankyou.php as in
   Predogled spletne strani/narocilo-prejeto.html. The rules are the preview's, put under .zz-thanks with WordPress/orodja/scoped_css.py;
   the page sits in the checkout page's container, so the preview's container adds no width or gutter of its own. */
.zz-thanks { --section: 96px; }
.zz-thanks .container { width: auto; max-width: none; margin: 0; padding: 0; }
body.woocommerce-order-received .elementor-shortcode > .woocommerce { padding-bottom: 0; }
@keyframes route-here-stay {
  0% { background-color: transparent; color: var(--deep-navy); }
  22%, 100% { background-color: var(--deep-navy); color: var(--white); }
}
.zz-thanks *, .zz-thanks *::before, .zz-thanks *::after { box-sizing: border-box; }
.zz-thanks a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.zz-thanks a:hover { color: var(--deep-navy); text-decoration-thickness: 2px; }
.zz-thanks .section { padding-top: var(--section); padding-bottom: var(--section); }
.zz-thanks h1, .zz-thanks h2, .zz-thanks h3 { margin: 0 0 16px; max-width: none; color: var(--deep-navy); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.zz-thanks h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.02em; }
.zz-thanks h2 { font-size: var(--fs-h2); line-height: 1.2; }
.zz-thanks h3 { font-size: var(--fs-h3); line-height: 1.3; }
.zz-thanks p { margin: 0 0 16px; text-wrap: pretty; }
.zz-thanks p:last-child { margin-bottom: 0; }
.zz-thanks .lead { font-size: var(--fs-lead); line-height: 1.55; }
.zz-thanks .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.zz-thanks .link-arrow::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5L14 8l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9.5 3.5L14 8l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.zz-thanks .link-arrow:hover { text-decoration: underline; }
.zz-thanks .link-arrow:hover::after { transform: translateX(4px); }
.zz-thanks .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zz-thanks .route { display: grid; grid-template-columns: repeat(5, 1fr); margin: 40px 0 0; padding: 0; list-style: none; }
.zz-thanks .route li { position: relative; padding-right: 24px; }
.zz-thanks .route li::before { content: ""; position: absolute; top: 21px; left: 52px; right: 8px; border-top: 2px dashed var(--deep-navy); }
.zz-thanks .route li:last-child::before { display: none; }
.zz-thanks .route .num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1.5px solid var(--deep-navy); border-radius: 50%; color: var(--deep-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.zz-thanks .route h3 { margin-bottom: 6px; font-size: 1.125rem; line-height: 1.35; }
.zz-thanks .route p { font-size: 0.9375rem; line-height: 1.55; }
@media (max-width: 1024px) {
  .zz-thanks .route { grid-template-columns: 1fr; gap: 28px; }
  .zz-thanks .route li { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding-right: 0; }
  .zz-thanks .route .num { grid-row: 1 / span 2; margin: 0; }
  .zz-thanks .route li::before { top: 52px; bottom: -22px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--deep-navy); }
}
.zz-thanks .route { --pace: 360ms; }
.zz-thanks .route.is-armed .num, .zz-thanks .route.is-armed h3, .zz-thanks .route.is-armed p { opacity: .35; }
.zz-thanks .route.is-armed li::before { clip-path: inset(0 100% 0 0); }
.zz-thanks .route.is-walked .num, .zz-thanks .route.is-walked h3, .zz-thanks .route.is-walked p { opacity: 1; transition: opacity .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--pace)); }
.zz-thanks .route.is-walked li::before { clip-path: inset(0); transition: clip-path calc(var(--pace) - 100ms) cubic-bezier(.65, 0, .35, 1) calc(var(--i) * var(--pace) + 100ms); }
.zz-thanks .route.is-walked .num { animation: route-here .9s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--pace)) both; }
@media (max-width: 1024px) {
  .zz-thanks .route.is-armed li::before { clip-path: inset(0 0 100% 0); }
  .zz-thanks .route.is-walked li::before { clip-path: inset(0); }
}
.zz-thanks .after { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) {
  .zz-thanks *, .zz-thanks *::before, .zz-thanks *::after { transition-duration: .01ms !important; }
}
.zz-thanks .opening .lead { max-width: none; }
.zz-thanks .link-row { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; }
.zz-thanks .link-row.after { margin-top: 40px; }
.zz-thanks .after { margin-top: 40px; }
.zz-thanks .opening .lead strong { padding: 0 .12em; background: linear-gradient(to top, rgba(98, 194, 164, .5) 0 .4em, transparent .4em); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--deep-navy); }
.zz-thanks .route.vertical { grid-template-columns: 1fr; gap: 28px; }
.zz-thanks .route.vertical li { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding-right: 0; }
.zz-thanks .route.vertical .num { grid-row: 1 / span 2; margin: 0; }
.zz-thanks .route.vertical li::before { top: 52px; bottom: -22px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--deep-navy); }
.zz-thanks .route.vertical h3 { margin-top: 10px; }
.zz-thanks .route li.done .num { background: var(--deep-navy); color: var(--white); }
.zz-thanks .route.vertical.is-armed li::before { clip-path: inset(0 0 100% 0); }
.zz-thanks .route.vertical.is-walked li::before { clip-path: inset(0); }
.zz-thanks .route.is-walked li.done .num { animation-name: route-here-stay; }
.zz-thanks .order-note { margin-top: 48px; padding: 24px 28px; border-radius: var(--radius); background: var(--tint); }
.zz-thanks .order-note p { max-width: none; margin: 0; }
@media (max-width: 767px) {
  .zz-thanks .order-note { padding: 20px; }
}
@media (max-width: 1024px) {
  .zz-thanks { --section: 72px; }
}
@media (max-width: 767px) {
  .zz-thanks { --section: 56px; }
}

/* Naročilo prejeto, the screens WooCommerce shows instead of it: the e-mail check (a guest who opens the order link later
   or on another device) and the sign-in (an order placed from a user account). The opening comes from
   woocommerce/checkout/order-received.php; under it, WooCommerce's sentence, notice and form in the site's field and button,
   as the white section of the page. */
/* The opening has only the title here, so the title keeps no margin under it. */
.zz-thanks .opening h1:last-child { margin-bottom: 0; }
body.woocommerce-order-received .zz-thanks ~ :is(form, .woocommerce-info, .woocommerce-error, .woocommerce-message) { max-width: 34rem; }
body.woocommerce-order-received .zz-thanks + :is(form, .woocommerce-info) { margin-top: 96px; }
body.woocommerce-order-received .zz-thanks ~ form { margin-bottom: 96px; padding: 0; border: 0; border-radius: 0; }
body.woocommerce-order-received .zz-thanks ~ form > p:not(.form-row) { margin: 0 0 24px; }
body.woocommerce-order-received .zz-thanks ~ :is(.woocommerce-info, .woocommerce-message) { margin-bottom: 24px; padding: 0; border: 0; background: none; color: var(--text); font-size: 1.0625rem; line-height: 1.65; }
body.woocommerce-order-received .zz-thanks ~ * :is(.woocommerce-error, .woocommerce-info)::before,
body.woocommerce-order-received .zz-thanks ~ :is(.woocommerce-info, .woocommerce-message)::before { content: none; }
body.woocommerce-order-received .zz-thanks ~ form .woocommerce-error { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--error); border-radius: var(--radius-btn); background: var(--white); color: var(--error); font-size: 0.9375rem; font-weight: 500; line-height: 1.55; list-style: none; }
body.woocommerce-order-received .zz-thanks ~ form .woocommerce-error li { margin: 0; padding: 0; }
body.woocommerce-order-received .zz-thanks ~ form .form-row { float: none; width: 100%; margin: 0 0 20px; padding: 0; }
body.woocommerce-order-received .zz-thanks ~ form .form-row label:not(.woocommerce-form__label-for-checkbox) { display: block; margin: 0 0 6px; font-size: 0.9375rem; font-weight: 500; line-height: 1.65; color: var(--deep-navy); }
body.woocommerce-order-received .zz-thanks ~ form .form-row label .required { color: var(--error); }
body.woocommerce-order-received .zz-thanks ~ form .form-row .input-text { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: var(--radius-btn); background: var(--white); box-shadow: none; font: inherit; color: var(--text); transition: border-color .2s cubic-bezier(.16, 1, .3, 1); }
body.woocommerce-order-received .zz-thanks ~ form .form-row .input-text:hover { border-color: var(--deep-navy); }
body.woocommerce-order-received .zz-thanks ~ form .form-row .input-text:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
body.woocommerce-order-received .zz-thanks ~ form label.woocommerce-form__label-for-checkbox { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 0 0 4px; font-size: 0.9375rem; line-height: 1.55; color: var(--text); cursor: pointer; }
body.woocommerce-order-received .zz-thanks ~ form label.woocommerce-form__label-for-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }
body.woocommerce-order-received .zz-thanks ~ form button.button { display: inline-flex; align-items: center; justify-content: center; float: none; min-height: 52px; margin: 4px 0 0; padding: 14px 28px; border: 1.5px solid var(--navy); border-radius: var(--radius-btn); background: var(--navy); color: var(--white); font: 600 1rem/1.2 var(--font), system-ui, sans-serif; cursor: pointer; transition: background-color .2s cubic-bezier(.16, 1, .3, 1), border-color .2s cubic-bezier(.16, 1, .3, 1); }
body.woocommerce-order-received .zz-thanks ~ form button.button:is(:hover, :focus-visible) { border-color: var(--btn-hover); background: var(--btn-hover); color: var(--white); }
body.woocommerce-order-received .zz-thanks ~ form button.button:active { border-color: var(--btn-active); background: var(--btn-active); }
body.woocommerce-order-received .zz-thanks ~ form .lost_password { margin: 0; font-size: 0.9375rem; }
body.woocommerce-order-received .zz-thanks ~ form .clear { display: none; }
@media (max-width: 1024px) {
  body.woocommerce-order-received .zz-thanks + :is(form, .woocommerce-info) { margin-top: 72px; }
  body.woocommerce-order-received .zz-thanks ~ form { margin-bottom: 72px; }
}
@media (max-width: 767px) {
  body.woocommerce-order-received .zz-thanks + :is(form, .woocommerce-info) { margin-top: 56px; }
  body.woocommerce-order-received .zz-thanks ~ form { margin-bottom: 56px; }
}

/* Home page, 6 Nov 2026: the hero without animation (H0) stacks below 900 px, and the blood-flow animation in
   »Kaj je molekularna analiza krvi?« (H0b). assets/js/blood-flow.js builds the canvas, the labels and the control
   inside the Elementor element .hero-flow-stage; these rules are their look, copied from Predogled spletne strani/domov.html. */
@media (max-width: 900px) {
  .elementor .hero-flow { flex-direction: column; align-items: stretch; min-height: 0; }
  .elementor .hero-flow::before { display: none; }
  .elementor .hero-flow-copy { max-width: none; padding: 48px 0 32px; }
  .elementor .flow-band .hero-flow-stage { height: 500px; margin-top: -24px; }
}
.elementor .hero-flow-stage canvas { display: block; width: 100%; height: 100%; }
.elementor .flow-label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(15, 37, 71, .86);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), border-color .2s, background-color .2s;
}
.elementor .flow-label.is-on { opacity: 1; }
/* Labels are not text to select or links to click: hovering only brings their kind forward. */
.elementor .flow-label { cursor: default; user-select: none; -webkit-user-select: none; }
.elementor .flow-label.is-focus { border-color: rgba(255, 255, 255, .7); background: rgba(27, 49, 87, .95); }
.elementor .flow-label i { flex: none; display: block; width: 14px; height: 14px; border-radius: 50%; }
.elementor .flow-label.ct i { width: 20px; height: 5px; border-radius: 3px; background: var(--mint); }
.elementor .flow-label.cf i { width: 20px; height: 5px; border-radius: 3px; background: #8EA0BF; }
.elementor .flow-label.rbc i { background: var(--soft-red); }
.elementor .flow-label.tumor i { background: #1F5A4B; box-shadow: inset 0 0 0 2px var(--mint); }
/* Pause key: a large round, see-through key that floats on the vessel itself, so it reads as part of the scene.
   The script places it on the vessel's axis. Its words show under it on hover and keyboard focus;
   screen readers get them always (aria-label). */
.elementor .flow-pause {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(15, 37, 71, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.elementor .flow-pause[hidden] { display: none; }
.elementor .flow-pause svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.elementor .flow-pause .ico-play { display: none; fill: currentColor; stroke-width: 1.5; }
.elementor .flow-pause.is-paused .ico-pause { display: none; }
.elementor .flow-pause.is-paused .ico-play { display: inline; }
.elementor .flow-pause-text {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 37, 71, .86);
  color: #FFFFFF;
  font: 600 1rem/1.3 var(--font);
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.elementor .flow-pause:hover, .elementor .flow-pause:focus-visible { background: rgba(15, 37, 71, .7); border-color: rgba(255, 255, 255, .7); color: #FFFFFF; }
.elementor .flow-pause:hover .flow-pause-text, .elementor .flow-pause:focus-visible .flow-pause-text { opacity: 1; }
.elementor .flow-pause:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 50%; }
@media (max-width: 900px) {
  .elementor .flow-label { padding: 8px 14px; font-size: 1.125rem; }
}
.elementor .flow-band.is-flat-top .hero-flow-stage { height: 460px; }
/* Mockup E: quieter labels (owner: »labels are too strong«): weight 500, 16 px, a see-through fill, no shadow. */
.elementor .flow-band.is-flat-top .flow-label { padding: 6px 14px; gap: 8px; border-color: rgba(15, 37, 71, .1); background: rgba(255, 255, 255, .72); box-shadow: none; font-size: 1rem; font-weight: 500; color: var(--text, #33415C); }
.elementor .flow-band.is-flat-top .flow-label.is-focus { border-color: rgba(15, 37, 71, .35); background: #FFFFFF; color: var(--deep-navy); }
.elementor .flow-band.is-flat-top .flow-label i { width: 10px; height: 10px; }
/* Mockup E: the animation key leaves the vessel and sits under it (owner, 6 Nov 2026). It must not look like a label
   (owner), so it is built like the site's controls: the icon in a 28 px outlined circle that fills Navy on hover
   (as the arrow on the jump bar), and the words beside it in Navy, weight 600, with no pill around them. */
.elementor .flow-band.is-flat-top.tint .flow-pause { display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; padding: 8px 8px 8px 4px; border: 0; border-radius: 6px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--navy); }
.elementor .flow-band.is-flat-top.tint .flow-pause[hidden] { display: none; }
.elementor .flow-band.is-flat-top.tint .flow-pause svg { box-sizing: border-box; width: 28px; height: 28px; padding: 6px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .2s, color .2s; }
.elementor .flow-band.is-flat-top.tint .flow-pause .ico-play { stroke-width: 0; }
.elementor .flow-band.is-flat-top.tint .flow-pause-text { position: static; padding: 0; background: none; color: inherit; font: 600 0.9375rem/1.3 var(--font); transform: none; opacity: 1; }
.elementor .flow-band.is-flat-top.tint .flow-pause:hover, .elementor .flow-band.is-flat-top.tint .flow-pause:focus-visible { background: none; color: var(--navy); }
.elementor .flow-band.is-flat-top.tint .flow-pause:hover svg, .elementor .flow-band.is-flat-top.tint .flow-pause:focus-visible svg { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.elementor .flow-band.is-flat-top.tint .flow-pause:hover .flow-pause-text { text-decoration: underline; text-underline-offset: 3px; }
.elementor .flow-band.is-flat-top.tint .flow-pause:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.elementor .flow-band.is-flat-top .flow-label.ct i, .elementor .flow-band.is-flat-top .flow-label.cf i { width: 16px; height: 4px; }  /* mockup E: the vessel ends higher, so the scene is shorter */
/* Light scene on Pale Tint (owner: the section stays light, as the original). The script switches to a light
   palette when the section is not .dark: Deep Navy vessel lines and pointers, darker grey fragments, white cells
   with a navy outline. Labels and the key turn white with Deep Navy text. */
.elementor .flow-band:not(.dark) .flow-label { border-color: var(--line); background: rgba(255, 255, 255, .92); color: var(--deep-navy); box-shadow: 0 1px 2px rgba(15, 37, 71, .06); }
.elementor .flow-band:not(.dark) .flow-label.is-focus { border-color: var(--deep-navy); background: #FFFFFF; }
.elementor .flow-band:not(.dark) .flow-label.cf i { background: #6F84A8; }
.elementor .flow-band:not(.dark) .flow-label.ct i { background: #3FA585; }
.elementor .flow-band:not(.dark) .flow-label.tumor i { box-shadow: inset 0 0 0 2px rgba(15, 37, 71, .55); }
.elementor .flow-band:not(.dark) .flow-label.wbc i { background: #D0D9E7; }
.elementor .flow-band:not(.dark) .flow-pause { border-color: rgba(15, 37, 71, .25); background: rgba(255, 255, 255, .55); color: var(--deep-navy); }
.elementor .flow-band:not(.dark) .flow-pause:hover, .elementor .flow-band:not(.dark) .flow-pause:focus-visible { background: rgba(255, 255, 255, .85); border-color: var(--deep-navy); color: var(--deep-navy); }
.elementor .flow-band:not(.dark) .flow-pause:focus-visible { outline-color: var(--deep-navy); }
.elementor .flow-band:not(.dark) .flow-pause-text { background: var(--deep-navy); }