/* ==========================================================================
   SWISS Instalacije dark-theme overlay for the Oyoxo template.
   Loaded AFTER bootstrap/plugins/style/custom so it wins.
   Follows CLAUDE.md 5.2/5.3 and design/design-system/swiss-instalacije/MASTER.md.
   Montserrat only, dark #151515 (never pure black), brand red #c2272b.
   ========================================================================== */

/* --- Self hosted Montserrat (no Google CDN request) ----------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #151515;
  --surface-1: #1b1b1b;
  --surface-2: #212121;
  --line: #2a2a2a;
  --field-border: #6b6b6b;
  --text: #f2f2f0;
  --text-muted: #a3a3a3;
  --text-subtle: #8a8a8a;
  --brand: #c2272b;
  --brand-hover: #b33f2e;
  --brand-text: #dd585c;
  --status-open: #48b884; /* open-status dot only; 7.36:1 on #151515, 6.94:1 on #1b1b1b */
  --on-brand: #ffffff;
  --focus: #f2f2f0;
  --font: "Montserrat", Arial, Helvetica, sans-serif;
  color-scheme: dark;
}

/* --- Base: font + dark canvas -------------------------------------------- */
body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}
h1, h2, h3, h4, h5, h6,
.tm-button, input, select, textarea, button,
.tm-header-nav ul li a, .widget-title {
  font-family: var(--font) !important;
}
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -0.01em; }
p { color: var(--text-muted); }
a { color: var(--text); }
a:hover { color: var(--brand-text); }

/* Section background helpers from the template */
.bg-white, .bg-grey, .tm-section.bg-white, .tm-section.bg-grey {
  background-color: var(--bg) !important;
  background-image: none !important;
}
.bg-grey { background-color: #171717 !important; } /* subtle alternation */
.bg-theme, .bg-darklight { background-color: var(--surface-1) !important; background-image: none !important; }

/* Kill any leftover section-title divider ornaments */
.tm-sectiontitle-divider { display: none !important; }
.tm-sectiontitle h2 { color: var(--text); }
.tm-sectiontitle p { color: var(--text-muted); }

/* Focus visibility on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .tm-button:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* --- Header --------------------------------------------------------------- */
.tm-header-topside { background: var(--surface-1) !important; border-bottom: 1px solid var(--line); }
.tm-header-topside a, .tm-header-topside li, .tm-header-topside b { color: var(--text-muted) !important; }
.tm-header-topside a:hover { color: var(--brand-text) !important; }
.tm-langswitch li a[aria-current="true"] { color: var(--text) !important; font-weight: 600; }

.tm-header-bottomside { background: var(--bg) !important; border-bottom: 1px solid var(--line); }
.tm-header.is-sticky .tm-header-bottomside,
.tm-header-bottomside.is-sticky,
.is-sticky .tm-header-bottomside { background: var(--surface-1) !important; }
.tm-header-nav > ul > li > a { color: var(--text) !important; font-weight: 500; }
.tm-header-nav > ul > li > a:hover { color: var(--brand-text) !important; }
.tm-header-logo img { height: 32px; width: auto; }

/* Header in normal flow. The template sets .tm-header { position:absolute } and
   relies on main.js setting a margin-top on .tm-heroslider/.tm-breadcrumb-area
   to push content clear of it. Inner pages have neither, so their breadcrumb
   slid under the header (worse when the top bar wraps or the web font is still
   swapping and the header grows taller). In-flow, every page's content starts
   below the header regardless of its height. We then cancel the now-redundant
   JS margin-top so the hero does not get a double gap. */
.tm-header { position: relative !important; }
.tm-heroslider, .tm-breadcrumb-area { margin-top: 0 !important; }

/* Mobile nav panel (built by the template JS) */
.tm-mobilenav .mean-nav ul,
.mean-bar, .mean-nav { background: var(--surface-1) !important; }
.mean-bar a, .mean-nav a { color: var(--text) !important; border-color: var(--line) !important; }
.mean-bar .meanmenu-reveal span { background: var(--text) !important; }

/* --- Hero ----------------------------------------------------------------- */
.tm-heroslider-image::before,
.tm-heroslider [data-black-overlay]::before { background-color: rgba(0,0,0,0.55) !important; }
.tm-heroslider-content h1 { color: #ffffff !important; }
.tm-heroslider-content p { color: rgba(255,255,255,0.88) !important; }

/* --- Buttons -------------------------------------------------------------- */
.tm-button {
  background: var(--brand) !important;
  color: var(--on-brand) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.tm-button:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: var(--on-brand) !important; }
.tm-button-white {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--text) !important;
}
.tm-button-white:hover { background: transparent !important; border-color: var(--brand) !important; color: var(--text) !important; }
.tm-buttongroup { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Features ------------------------------------------------------------- */
.tm-feature { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-radius: 8px; padding: 28px; height: 100%; transition: border-color 200ms ease; }
.tm-feature:hover { border-color: var(--field-border); }
.tm-feature-title, .tm-feature-content h5 { color: var(--text); font-size: 1.25rem; font-weight: 600; }
.tm-feature-content p { color: var(--text-muted); }
/* Owner icons (SVG) carry their own colour and a trimmed artboard, so they get a
   fixed box that matches the "Servis i odrzavanje" icon and no recolour filter.
   The filter stays only on the placeholder PNG that has no owner drawing yet. */
.tm-feature-icon img { width: 60px; height: 60px; object-fit: contain; }
.tm-feature-icon img[src$=".png"] { filter: brightness(0) saturate(100%) invert(21%) sepia(83%) saturate(2619%) hue-rotate(346deg) brightness(85%) contrast(90%); }

/* --- About ---------------------------------------------------------------- */
.tm-about-content h2 { color: var(--text); }
.tm-about-lead { color: var(--text) !important; font-size: 1.15rem; font-weight: 500; }
.tm-about-content p { color: var(--text-muted); }
.stylish-list-color li, .stylish-list li { color: var(--text-muted); }
.stylish-list-color li i, .stylish-list li i { color: var(--brand) !important; }
.tm-callbutton { background: var(--surface-2) !important; border: 1px solid var(--line); border-radius: 6px; }
.tm-callbutton-label { display: block; color: var(--text-muted); font-size: 0.85rem; }
.tm-callbutton-number { display: block; color: var(--text); font-weight: 700; font-size: 1.15rem; }
.tm-videobox img, .tm-whyus-image img, .tm-faq-images img { border-radius: 8px; }
.tm-whyus-content h2 { color: var(--text); }
.tm-whyus-block h3 { color: var(--text); font-size: 1.15rem; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.tm-whyus-block h3 span { color: var(--brand); font-weight: 700; }
.tm-whyus-block p { color: var(--text-muted); }

/* --- Services ------------------------------------------------------------- */
.tm-service { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 40px 28px !important; height: 100%; box-shadow: none !important; transition: border-color 200ms ease, transform 200ms ease; }
.tm-service:hover { border-color: var(--field-border) !important; transform: translateY(-2px); box-shadow: none !important; background: var(--surface-1) !important; }
.tm-service-title, .tm-service-content h5 { color: var(--text); font-size: 1.25rem; font-weight: 600; }
.tm-service-content p { color: var(--text-muted); }
.tm-service-icon {
  height: 92px !important; width: 92px !important; line-height: 1 !important;
  padding: 0 !important; margin: 0 auto 22px !important; overflow: hidden !important;
  background: rgba(194,39,43,0.10) !important; border: 1px solid var(--line) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 50% !important; box-shadow: none !important;
}
.tm-service:hover .tm-service-icon, .bg-grey .tm-service-icon, .bg-white .tm-service-icon { background: rgba(194,39,43,0.16) !important; }
.tm-service-icon img {
  width: 64px !important; height: 64px !important; object-fit: contain;
}
.tm-service:hover { box-shadow: none !important; background: transparent !important; }
.tm-service-content .tm-button { margin-top: 20px; }

/* --- Appointment / forms -------------------------------------------------- */
.tm-appointment-box { background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 40px; }
.tm-appointment-box h2 { color: var(--text); }
.tm-appointment-box > p { color: var(--text-muted); }
.tm-form label { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; }
.tm-form input, .tm-form select, .tm-form textarea {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 6px !important;
}
.tm-form input::placeholder, .tm-form textarea::placeholder { color: var(--text-subtle); }
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus { border-color: var(--text) !important; }
.tm-form-consent label { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 0.85rem; }
.tm-form-consent input { width: auto !important; margin-top: 3px; }
.tm-form-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.tm-appointment-bgimage::before { background-color: rgba(0,0,0,0.6) !important; }

/* --- FAQ accordion -------------------------------------------------------- */
.tm-question-right h2 { color: var(--text); }
.tm-accordion .card { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; margin-bottom: 12px; }
.tm-accordion .card-header { background: transparent !important; border: 0 !important; }
.tm-accordion .btn-link { color: var(--text) !important; text-decoration: none !important; font-weight: 600; }
.tm-accordion .btn-link:hover { color: var(--brand-text) !important; }
.tm-accordion .card-body p { color: var(--text-muted); }

/* --- CTA band ------------------------------------------------------------- */
.tm-cta-area [data-overlay]::before, .tm-cta-area::before { background-color: rgba(0,0,0,0.7) !important; }
.tm-cta h2 { color: #ffffff; }
.tm-cta-phone { color: #ffffff !important; font-size: 1.4rem; font-weight: 700; }
.tm-cta-phone a { color: #ffffff; }
.tm-cta-phone i { color: var(--brand-text); }
.tm-cta-or { color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }

/* --- Contact -------------------------------------------------------------- */
.tm-contact-block { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-radius: 8px; padding: 32px 24px; height: 100%; box-shadow: none !important; }
.tm-contact-block h3, .tm-contact-block-content h5 { color: var(--text); font-size: 1.1rem; font-weight: 600; }
.tm-contact-block-content p, .tm-contact-block-content a { color: var(--text-muted); }
.tm-contact-block-content a:hover { color: var(--brand-text); }
.tm-contact-block-icon img { filter: brightness(0) saturate(100%) invert(21%) sepia(83%) saturate(2619%) hue-rotate(346deg) brightness(85%) contrast(90%); }

/* --- Footer --------------------------------------------------------------- */
.tm-footer-topside { background: var(--surface-1) !important; background-image: none !important; border-top: 1px solid var(--line); }
.widget-title { color: var(--text) !important; font-size: 1.05rem; font-weight: 700; }
.widget-info p { color: var(--text-muted); }
.single-widget ul li, .single-widget ul li a, .single-widget ul li span { color: var(--text-muted) !important; }
.single-widget ul li a:hover { color: var(--brand-text) !important; }
.widget-hours ul li span { color: var(--text) !important; font-weight: 600; }
.widget-info-logo img { height: 33px; width: auto; }
.tm-footer-bottomside { background: var(--bg) !important; border-top: 1px solid var(--line); }
.tm-footer-copyright { color: var(--text-subtle) !important; font-size: 0.85rem; }
.tm-footer-lang { color: var(--text-muted); text-align: right; }
.tm-footer-lang a { color: var(--text-muted); }
.tm-footer-lang a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* Visible [CONFIRM] marker styling */
.confirm { color: var(--brand-text); border: 1px dashed var(--brand-text); padding: 0 0.3em; border-radius: 3px; font-size: 0.85em; }

/* --- Neutralize the template's grey dimension-placeholder images ---------- */
/* Hero: replace the placeholder background with a dark gradient, cap height */
.tm-heroslider {
  position: relative !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: clamp(520px, 80vh, 780px) !important;
  display: flex !important;
  align-items: center !important;
  background: radial-gradient(1100px 640px at 72% 12%, #212121, #131313) !important;
}
.tm-heroslider-images, .tm-heroslider .slick-list, .tm-heroslider .slick-track,
.tm-heroslider .slick-slide, .tm-heroslider .slick-slide > div, .tm-heroslider-image {
  height: 100% !important;
  min-height: inherit;
}
.tm-heroslider-images { position: absolute !important; inset: 0 !important; z-index: 0; }
.tm-heroslider-image { background: none !important; }
.tm-heroslider-images::before { background: rgba(0,0,0,0.35) !important; }
/* Hide the template's white angled shape (heroslider-shape.png) */
.tm-heroslider-content::before { display: none !important; }
.tm-heroslider-content { position: relative !important; z-index: 2 !important; width: 100%; padding-block: 48px; }
/* Scroll-reveal blocks must never stay invisible (no-JS / reduced motion / SEO).
   The template covers them with blue/white curtains removed only when JS adds
   .reveal-close on scroll. Force the curtains open so content is always visible. */
.tm-revealblock { opacity: 1 !important; visibility: visible !important; }
.tm-revealblock::before, .tm-revealblock::after { transform: scaleX(0) !important; }
.tm-heroslider-content h1 { max-width: 18ch; }
.tm-heroslider-content p { max-width: 52ch; }
.slick-dots, .tm-slider-dots-2 .slick-dots { display: none !important; }

/* Large content placeholder photos: darken so they read as neutral blocks */
.tm-videobox img, .tm-whyus-image img, .tm-faq-images img, .tm-appointment-image img {
  filter: brightness(0.2) contrast(1) grayscale(1);
  background: #101010;
  border-radius: 8px;
}

/* Call button icon shows a "24" badge (implies 24/7) -> hide it */
.tm-callbutton img { display: none !important; }
.tm-callbutton { display: inline-flex; align-items: center; gap: 4px; flex-direction: column; padding: 12px 20px; }

/* Custom nice-select dropdown (plugin replaces native select) */
.nice-select {
  background: var(--surface-2) !important; color: var(--text) !important;
  border: 1px solid var(--field-border) !important; border-radius: 6px !important;
  height: auto !important; line-height: 1.4 !important; padding: 12px 30px 12px 16px !important; float: none !important; width: 100% !important;
}
.nice-select:after { border-bottom: 2px solid var(--text-muted) !important; border-right: 2px solid var(--text-muted) !important; }
.nice-select .list { background: var(--surface-2) !important; border: 1px solid var(--line) !important; width: 100%; }
.nice-select .option { color: var(--text) !important; background: transparent !important; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: var(--surface-1) !important; }

/* Section background placeholders driven by data-bgimage (JS inline) */
.tm-appointment-bgimage, .tm-appointment-bgimage::before { background-image: none !important; background: transparent !important; display: none !important; }
.tm-appointment-area { background: #141414 !important; }
.tm-cta-area, #tm-calltoaction-area {
  background: transparent !important;
}
.tm-cta-area::before, #tm-calltoaction-area::before { display: none !important; }
.tm-footer-topside { background-image: none !important; }

/* FAQ accordion: dark theme the Bootstrap collapse (template used blue/white) */
.tm-accordion .card { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
.tm-accordion .card-header button,
.tm-accordion .card-header button.collapsed { background: var(--surface-1) !important; color: var(--text) !important; }
.tm-accordion .card-header button:not(.collapsed) { background: var(--surface-2) !important; color: var(--text) !important; }
.tm-accordion .card-header button::after { color: var(--brand) !important; }
.tm-accordion .card-body { background: var(--surface-1) !important; }
.tm-accordion .card-body p { color: var(--text-muted) !important; }

/* FAQ: hide the secondary demo image column, let the accordion go full width
   (real project photos are added later; avoids a broken placeholder here) */
.tm-question-area .row > .col-lg-6:first-child { display: none !important; }
.tm-question-area .row > .col-lg-6:last-child { flex: 0 0 100% !important; max-width: 100% !important; }
.tm-question-right { max-width: 820px; margin: 0 auto; }

/* Contact blocks: template icons are grey "icon" placeholders in white circles -> hide */
.tm-contact-block-icon { display: none !important; }
/* Remove the template overlap that pulled contact cards up over the section above */
.tm-contact-top { margin-top: 0 !important; }

/* The old template top bar, status pill and language switch (.tm-header*,
   .tm-status, .tm-langswitch) were removed when the v3 site header replaced
   them on every page, so their styles were deleted here. The new header ships
   its own styles in assets/css/swiss-header.css. */

/* --- Wizard: fixed floating button + step modal --------------------------- */
.tm-wizard-fab {
  position: fixed; z-index: 900;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; min-width: 52px;
  background: var(--brand); color: var(--on-brand); border: none; border-radius: 999px;
  padding: 14px 24px; font-family: var(--font); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.tm-wizard-fab:hover { background: var(--brand-hover); transform: translateY(-2px); }
.tm-wizard-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tm-wizard-fab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tm-wizard-fab span { white-space: nowrap; }
/* Hidden while the footer or a request form is on screen, so it never covers
   footer content or form fields. Set by swiss.js via IntersectionObserver. */
.tm-wizard-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (max-width: 480px) {
  .tm-wizard-fab { padding: 12px 18px; font-size: 0.9rem; }
}

.tm-wizard-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.62); display: none; align-items: center; justify-content: center; padding: 24px; }
.tm-wizard-overlay.is-open { display: flex; }
.tm-wizard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; width: min(680px, 100%); max-height: 90vh; overflow: auto; padding: 36px; position: relative; }
.tm-wizard-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 1px solid var(--line); color: var(--text); width: 40px; height: 40px; border-radius: 6px; cursor: pointer; font-size: 20px; line-height: 1; }
.tm-wizard-close:hover { border-color: var(--brand); }
.tm-wizard h2 { font-size: 1.5rem; margin: 0 0 6px; color: var(--text); }
.tm-wizard-sub { color: var(--text-muted); margin: 0 0 22px; }
.tm-wizard-progress { display: flex; gap: 8px; margin-bottom: 26px; }
.tm-wizard-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.tm-wizard-progress span.is-active { background: var(--brand); }
.tm-wizard-step { display: none; }
.tm-wizard-step.is-active { display: block; }
.tm-wizard-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 520px) { .tm-wizard-options { grid-template-columns: 1fr; } }
.tm-wizard-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--field-border); border-radius: 8px; padding: 14px 16px; cursor: pointer; color: var(--text); transition: border-color 150ms ease, background-color 150ms ease; }
.tm-wizard-option:hover { border-color: var(--text); }
.tm-wizard-option input { accent-color: var(--brand); }
.tm-wizard-option.is-selected { border-color: var(--brand); background: rgba(194,39,43,0.08); }
.tm-wizard-field { margin-bottom: 16px; }
.tm-wizard-field--mt { margin-top: 16px; }
.tm-wizard-field label { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; }
.tm-wizard-field input, .tm-wizard-field textarea {
  width: 100%; background: var(--surface-1); color: var(--text); border: 1px solid var(--field-border);
  border-radius: 6px; padding: 12px 14px; font-family: var(--font); font-size: 1rem;
}
.tm-wizard-field input:focus, .tm-wizard-field textarea:focus { border-color: var(--text); outline: 2px solid var(--focus); outline-offset: 1px; }
.tm-wizard-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); }
.tm-wizard-consent input { accent-color: var(--brand); margin-top: 3px; }
.tm-wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.tm-wizard-hp { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
.tm-wizard-msg { margin-top: 16px; font-size: 0.92rem; }
.tm-wizard-msg.is-ok { color: #7ee0a2; }
.tm-wizard-msg.is-err { color: var(--brand-text); }

/* --- Service inner pages -------------------------------------------------- */
.tm-breadcrumb { font-size: 0.9rem; color: var(--text-muted); }
.tm-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.tm-breadcrumb a:hover { color: var(--brand-text); }
.tm-breadcrumb span[aria-current] { color: var(--text); }
.tm-page-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: 16px; color: var(--text); }
.tm-page-lead { font-size: 1.15rem; color: var(--text); margin-bottom: 14px; }
.page-content .tm-section-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
.tm-section-card h2 { font-size: 1.2rem; margin-bottom: 14px; color: var(--text); }
.tm-step { text-align: left !important; }
.tm-step-num { display: inline-block; color: var(--brand-text); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; margin-bottom: 8px; }
.tm-service-title a { color: inherit; text-decoration: none; }
.tm-service-title a:hover { color: var(--brand-text); }

/* --- About: "Nazovite nas" as a secondary button, equal height to primary -- */
.tm-about-buttons.tm-buttongroup { align-items: stretch; gap: 12px; }
.tm-about-buttons .tm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.tm-button-tel {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--field-border) !important;
}
.tm-button-tel:hover { background: transparent !important; border-color: var(--text) !important; color: var(--text) !important; }

/* --- Contact cards: information is the strongest thing on screen ----------- */
.tm-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .tm-contact-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tm-contact-cards { grid-template-columns: 1fr; } }
.tm-contact-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px;
  padding: 28px 24px; text-align: left; transition: border-color 200ms ease;
}
a.tm-contact-card { text-decoration: none; color: inherit; }
a.tm-contact-card:hover { border-color: var(--field-border); }
.tm-contact-card-icon { display: inline-flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(194,39,43,0.10); border: 1px solid var(--line); color: var(--brand); margin-bottom: 4px; }
/* Guard: an inline icon SVG must never scale to fill its container. Every icon
   also ships explicit width/height attributes, which set the size even with no
   CSS at all (an SVG with only a viewBox would otherwise expand to the parent). */
.tm-contact-card-icon svg,
.tm-wizard-fab svg { flex: none; max-width: 100%; }
.tm-contact-card-icon svg { width: 22px; height: 22px; }
.tm-wizard-fab svg { width: 20px; height: 20px; }
.tm-contact-card-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; }
.tm-contact-card-value { color: var(--text); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
a.tm-contact-card:hover .tm-contact-card-value { color: var(--brand-text); }
.tm-contact-card-support { color: var(--text-muted); font-size: 0.9rem; }

/* Opening hours panel with the current day marked, plus the shared indicator */
.tm-hours-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.tm-hours-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tm-hours-panel-head h3 { margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 600; }
.tm-hours-list { list-style: none; margin: 0; padding: 0; }
.tm-hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; border-radius: 6px; color: var(--text-muted); }
.tm-hours-list li span:last-child { color: var(--text); }
.tm-hours-list li.is-today { background: var(--surface-2); color: var(--text); font-weight: 600; }
.tm-hours-list li.is-today span:last-child { color: var(--text); }
.tm-contact-cta { text-align: center; margin-top: 8px; }

/* --- Scroll reveal: fade + small translate, transform/opacity only ---------
   The hidden start state (.reveal-init) is added by swiss.js, never here, so
   content stays visible if JS is off, unsupported or reduced-motion is set. */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }
.reveal-d4 { transition-delay: 240ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal-init { opacity: 1 !important; transform: none !important; }
}

/* --- Home hero: energy scroll scene (v3, pinned) --------------------------
   Only on / and /de/. The scene's own stylesheet sets --es-top to 76px on
   desktop and 64px at 999px and below, which matches the sticky site header
   (.site-header), so no --es-top override is needed here. The site header
   already carries its own z-index: 100 and sticks at top: 0.
   The floating quote button (.tm-wizard-fab, injected by swiss.js) is hidden
   while the scene is pinned (html.is-energy-pinned, set by the scene script)
   or the mobile drawer is open (html.has-open-drawer, set by swiss-header.js),
   so it never covers the scene or the open menu. This composes with the
   existing .is-hidden rule that swiss.js toggles near the footer and forms. */
.is-energy-pinned .tm-wizard-fab,
.has-open-drawer .tm-wizard-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s, visibility .25s;
}

/* position: sticky is disabled by any ancestor that clips overflow or sets a
   transform. Checked html, body, main, .page-content and .wrapper: none set a
   transform, but the template sets html { overflow: hidden; overflow-y: auto }
   and, worse, body { overflow: hidden !important }, which would trap the sticky
   stage. Clip only the horizontal axis: overflow-x: clip prevents sideways
   scroll without creating a scroll container, so the stage still tracks the
   page scroll and the page keeps scrolling vertically as normal. */
html { overflow-x: clip; }
body { overflow-x: clip !important; overflow-y: visible !important; }
.wrapper { overflow-x: clip; }


/* ==================================================================
   Home page illustrations (public/assets/art/*.svg), added 2026-09-24.
   Replace the darkened grey template placeholders with the real
   drawings. Files are referenced via <img>, never inlined.
   ================================================================== */
img.art-cover, .tm-footer-band img.art-band, #tm-calltoaction-area .art-band { filter: none !important; }

/* transparent illustrations sit directly on the section: no dark card/box behind */
.tm-videobox, .tm-whyus-image, .tm-faq-images,
.tm-videobox .slick-slide, .tm-faq-images .slick-slide {
  background: transparent !important;
  border: 0 !important;
}
.tm-videobox img.art-cover,
.tm-whyus-image img.art-cover,
.tm-faq-images img.art-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent !important;
}

/* wide service-area band behind the call to action */
#tm-calltoaction-area.tm-cta-area { position: relative; overflow: hidden; }
#tm-calltoaction-area.tm-cta-area .art-band {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
#tm-calltoaction-area.tm-cta-area::before { position: absolute; inset: 0; z-index: 1 !important; }
#tm-calltoaction-area.tm-cta-area > .container { position: relative; z-index: 2; }

/* decorative service-area band at the top of the footer */
.tm-footer-band { display: block; width: 100%; height: 150px; overflow: hidden; line-height: 0; }
.tm-footer-band img.art-band { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .tm-footer-band { height: 110px; } }

/* The FAQ illustration column (public/assets/art via <img>) was hidden while it
   only held grey placeholders. Real illustrations now live there, so show it and
   restore the two-column layout on desktop (mobile keeps the accordion stacked). */
.tm-question-area .row > .col-lg-6:first-child { display: block !important; }
.tm-question-right { max-width: none; margin: 0; }
@media (min-width: 992px) {
  .tm-question-area .row > .col-lg-6:last-child { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ==================================================================
   Service cards: every card in a row is the same height and the button
   lines up at the bottom, without a fixed description height (German
   wraps differently). Real classes: .tm-service (card) > .tm-service-icon
   + .tm-service-content (title, p, .tm-button). Home services + /usluge/ hub.
   ================================================================== */
.tm-services-area .row { align-items: stretch; }
.tm-service { display: flex; flex-direction: column; height: 100%; }
.tm-service-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.tm-service-content > p { flex: 1 1 auto; }
.tm-service-content .tm-button {
  margin-top: auto;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}