/**
 * Cosmetic overrides pro články, kde nám chybí data:
 *   - articleMainImageUrl je null (CSV neměl section-image) → gradient místo šedé
 *   - articleLikes je 0 (legacy field, nepoužíváme) → skryjeme heart counter
 *   - Heart ikona je Font Awesome solid, který už ve webu není (přešli jsme na
 *     Phosphor) → schováme prázdný `<i>` element
 *
 * Tohle je TECH DEBT — viz memory `project_2themoon_admin.md`.
 * V refactoru frontendu (po stabilizaci obsahu) tohle nebudeme potřebovat.
 */

/* === Fixed rails (aside.left + aside.right) — sjednocené umístění napříč
 * stránkami ============================================================
 *
 * Problém: vendor `aside.left/right { position: fixed }` nemá explicitní
 * `top` hodnotu (default `auto`), takže rails se sticknou na pozici, kde
 * by element byl ve flow. Když má `<main>` `padding-top: 100px` (kompenzace
 * fixed headeru — zpravodaj.html), rails skončí o 100 px níž než na
 * homepage / článku detailu (které main padding-top kompenzují jinak).
 *
 * Fix: force `top: 0; bottom: 0` na rails — vždy plná výška viewportu,
 * nezávisle na main padding. Sjednoceno se vzhledem na homepage. */
body.has-article-header main > aside.left,
body.has-article-header main > aside.right {
  top: 0;
  bottom: 0;
}

/* Default gradient pozadí pro článkové dlaždice bez obrázku */
.section-bg-img4 {
  background-color: #f3f6fb;
  background-image: linear-gradient(
    135deg,
    rgba(40, 184, 252, 0.08) 0%,
    rgba(0, 105, 217, 0.04) 100%
  );
}

/* Likes counter zobrazen — admin teď spravuje hodnotu (pole `likes` v DB).
 * Heart ikona se mapuje přes Phosphor shim (icons.min.css). */

/* Hero CTA button (kruhové tlačítko vedoucí na #calculation) — ikona vždy
 * proporcionálně 50 % šířky tlačítka, nezávisle na rozlišení/breakpointu.
 * Použity container queries: `.lb-primary` je containerem, `cqw` jednotka pak
 * udává procentní podíl šířky kontejneru. */
.lb-primary:not(.second) {
  container-type: inline-size;
}
.ul-section-primary > li.li-button .lb-primary:not(.second) > a > .div-center > i {
  font-size: 35cqw;
  line-height: 1;
}

/* Hero slider-nav ikony (Koupě / Výstavba / Rekonstrukce / Refinancování / Úvěr…) —
 * jednotný proporcionální sizing 35 % šířky `.li-icon` kontejneru přes container query.
 * Nahrazuje vendor breakpoint-specific pt hodnoty (12pt/10pt/9pt) jednou škálovatelnou
 * pravidlem. */
ul.ul-slider-nav ul.ul-slider-nav-body > li.li-icon {
  container-type: inline-size;
}
ul.ul-slider-nav ul.ul-slider-nav-body > li.li-icon > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
}

/* Sekce #about / PROČ HYPOTÉKA OSTRAVA — prémiovější textový layout bez pravého obrázku. */
#about .why-hypoteka-section {
  width: 100%;
  max-width: none;
  margin: 0 0 72px;
}

#about .why-hypoteka-section > .div-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  max-width: 980px;
  margin: 0;
}

#about .why-hypoteka-section > .div-row > .col-12:first-child {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 12px;
}

#about .why-hypoteka-section .ul-section-header {
  max-width: 880px;
  margin: 0;
  text-align: left;
}

#about .why-hypoteka-section > .div-row > .col-12:first-child > .div-center {
  justify-content: flex-start;
}

#about .why-hypoteka-section .ul-section-header h3 {
  max-width: 760px;
}

#about .why-hypoteka-section .ul-section-header p {
  max-width: 800px;
}

#about .why-hypoteka-section .ul-section-header strong,
#about .about-benefit-card strong {
  font-weight: 800;
}

#about .about-benefit-card {
  display: flex;
  width: 100%;
  max-width: none;
  margin-top: 0 !important;
  padding: 0;
}

#about .about-benefit-card > .ul-services {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  width: 100%;
  min-height: 100%;
  padding: 28px;
  align-items: start;
  column-gap: 22px;
  border: 1px solid rgba(0, 194, 254, 0.16);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0, 194, 254, 0.08), rgba(255, 255, 255, 0.92));
  box-shadow: 0 14px 40px rgba(3, 22, 36, 0.06);
}

#about .about-benefit-card .li-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 64px;
  min-width: 64px;
}

#about .about-benefit-card .div-circle {
  width: 54px;
  height: 54px;
}

#about .about-benefit-card .li-text {
  width: 100%;
  min-width: 0;
  text-align: left;
}

#about .about-benefit-card h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.25;
}

#about .about-benefit-card .li-description p {
  margin-top: 10px;
  color: rgba(3, 22, 36, 0.76);
  font-size: 15.5px;
  line-height: 1.65;
}

body.dark #about .about-benefit-card > .ul-services {
  border-color: rgba(0, 194, 254, 0.22);
  background: linear-gradient(135deg, rgba(0, 194, 254, 0.12), rgba(1, 11, 18, 0.76));
  box-shadow: 0 14px 40px rgba(0, 194, 254, 0.08);
}

body.dark #about .about-benefit-card .li-description p {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 991px) {
  #about .why-hypoteka-section {
    max-width: none;
    margin-bottom: 64px;
  }

  #about .why-hypoteka-section > .div-row {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 760px;
    margin: 0;
  }

  #about .about-benefit-card > .ul-services {
    padding: 24px;
  }
}

@media (max-width: 575.98px) {
  #about .why-hypoteka-section {
    margin-bottom: 54px;
  }

  #about .about-benefit-card > .ul-services {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px;
    border-radius: 20px;
  }

  #about .about-benefit-card .li-icon {
    width: 58px;
    min-width: 58px;
  }

  #about .about-benefit-card .li-text {
    width: 100%;
  }

  #about .about-benefit-card h3 {
    font-size: 17px;
  }

  #about .about-benefit-card .li-description p {
    font-size: 14.5px;
    line-height: 1.6;
  }
}

/* Sekce „PROČ HYPOTÉKA OSTRAVA“ — 4 service tiles s ikonou v kruhovém `.div-circle`.
 * Sjednocuje ikonu na 35 % šířky kruhu + tvrdě centruje napříč všemi
 * úrovněmi (li-icon → outer div-center → div-circle → inner div-center → i).
 * Vendor `.div-center` má místy konfliktní rules (justify-content:end), proto
 * ho na všech relevantních úrovních forceujeme grid place-items:center. */
ul.ul-services > li.li-icon {
  display: grid;
  place-items: center;
}
ul.ul-services > li.li-icon > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services li.li-icon .div-circle {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-services li.li-icon .div-circle > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services li.li-icon .div-circle > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  /* Phosphor glyphy mají v em-boxu mírný vertikální offset — text-align doplňuje
   * horizontální zarovnání pro inline metriku. */
  text-align: center;
}

/* Sekce #services („S čím Vám zaručeně pomůžeme?") — service cards s ikonou
 * v kruhovém `li.li-icon` (90×90 default, 70×70 mobile, abs positioned).
 * Ikona 35 % šířky kruhu napříč všemi breakpointy + grid centrování. */
ul.ul-services-card > li.li-icon {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-services-card > li.li-icon > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services-card > li.li-icon > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Sekce „PRŮBĚH SPOLUPRÁCE / Jednoduchý proces krok za krokem" — 4 kroky timeline
 * s ikonou v `.div-circle-action.success` (70×70 kruh).
 * Vendor 13pt → cqw 35 % šířky kruhu napříč breakpointy + grid centrování. */
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Cooperation timeline — pulse ikon + postupné kreslení spojovacích čar.
 *
 * Ikony zůstávají viditelné od začátku. Při .is-active spustí pulse
 * 0.9 s (scale 1 → 1.25 → 1) + glow box-shadow zůstane.
 *
 * Čáry mezi kroky (`.timeline-line`) jsou v počátku „nenakreslené"
 * (scaleY: 0 + transform-origin: top). Po triggeru se postupně
 * vykreslí shora dolů (scaleY 0 → 1 přes 0.8 s) — vizuálně to vypadá,
 * že čára „jede" k další ikoně. Po dokončení kreslení čáry naskočí
 * pulse další ikony.
 *
 * Pozor: vendor `.timeline-line` má `transform: translate(50%)` pro
 * horizontální centrování — náš transform musí ten translate
 * zachovat (jinak čára skočí o polovinu šířky doleva). */
#cooperation ul.ul-spider .div-circle-action {
  transition: box-shadow 0.4s ease;
}
#cooperation ul.ul-spider .div-circle-action.is-active {
  animation: cooperation-icon-pop 1.2s ease-out forwards;
  box-shadow: 0 8px 24px rgba(0, 194, 254, 0.25);
}
/* Overshoot definovaný v keyframes (ne v easing), aby animation v 100%
 * sedl přesně na scale(1) bez „jojo" efektu na konci. */
@keyframes cooperation-icon-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

#cooperation ul.ul-spider .timeline-line {
  transform: translate(50%) scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s ease;
}
#cooperation ul.ul-spider .timeline-line.is-active {
  transform: translate(50%) scaleY(1);
}

/* Pop pulse na nadpisech kroků („1. Zadání poptávky" atd.) — současně
 * s pop ikony. Jemnější scale (1.05) než u ikony (1.25), protože text
 * je delší a velký pulse by rozbil layout. */
#cooperation ul.ul-spider .ul-spider-body > li:nth-child(2) {
  transform-origin: left center;
}
#cooperation ul.ul-spider .ul-spider-body > li:nth-child(2).is-active {
  animation: cooperation-title-pop 1.2s ease-out forwards;
}
@keyframes cooperation-title-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.07); }
  60%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* Hero karousel obrázků (Koupě / Výstavba / Rekonstrukce / Refinancování / Úvěr) —
 * Vendor má pro `.div-home-image img` desítky responsive %-overrides, ale chybí
 * jim `max-width/max-height` constrains. U buněk se dvěma obrázky (Rekonstrukce
 * = workers.webp + house5.webp overlay) jeden z obrázků přetéká přes container
 * a vendor je pak ořeže. Vynucuju "fit-into-container" pro každou buňku. */
.div-home-image .div-home-body {
  overflow: visible;
}
.div-home-image .div-home-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* `.second` (workers overlay) — fixní bottom alignment, max výška 85 % */
.div-home-image .div-home-body img.second {
  max-height: 85%;
  max-width: 90%;
}

/* Hero na mobile — bank logos slider pinned na DNO viewport (jako na desktopu).
 * Bez tohoto override vendor `.div-home-logos{display:none}` v některých
 * breakpointech sekci skryje, nebo `bottom:0` nesedí. */
@media (max-width: 767px) {
  section.home .div-home-logos {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    height: 60px !important;
    z-index: 5;
  }
  /* Skrytí jen rotujícího slider navu („Koupě / Výstavba / Rekonstrukce…")
   * a image carouselu (rotující obrázky domů) — nepřináší value na malé
   * obrazovce. Cyan kruh „úrok od X%" a zelený CTA „ZADAT POPTÁVKU"
   * zůstávají viditelné. Bank logos lišta zůstává pinned na dně. */
  section.home .div-home-image #custom-slider-nav,
  section.home .div-home-image .carousel-wrapper-scroll { display: none !important; }
  /* CTA „ZADAT POPTÁVKU" — na mobilu zvětšit o ~30 % a posunout těsně
   * pod text úrok kruhu (smí lehce zasahovat do spodní části kruhu,
   * ale ne do jeho textu). transform: scale měřítkuje obsah včetně textu. */
  section.home .div-home-image .div-circle-secondary {
    transform: translateY(25px) scale(1.3);
    transform-origin: center center;
  }
  /* Úrok modrý kruh — na mobilu zvětšit o 15 % včetně textu + posunout
   * blíž k pravému okraji obrazovky (mezera 30 → 21 px, −30 %).
   * transform-origin: right bottom drží spodní hranu na místě, takže
   * vztah k CTA pod ním zůstává; translateX 9 px přibližuje pravou
   * hranu k okraji obrazovky. */
  section.home .div-home-image .div-circle-primary {
    transform: translateX(9px) scale(1.15);
    transform-origin: right bottom;
  }
}

/* Hero pozadí (Ostrava panorama) — vendor má `transform: scale(2.2)` na ≤991px
 * a `scale(1.9)` na ≤575px s default `transform-origin: center`, což ořezává
 * vrch obrázku (věž radnice). Na mobilu odstraníme zoom a ukotvíme pozadí
 * na top — vrch obrázku (obloha + plná věž radnice) začíná u horní hrany
 * sekce, dolů pokračuje budova radnice tak, jak se vejde. */
@media (max-width: 991.98px) {
  .section-bg-img7 {
    transform: none !important;
    background-position: center top !important;
  }
}

/* Hero sekce — výška na mobile.
 * `100svh` (small viewport height) = stabilní hodnota viditelné plochy
 * KDYŽ JE URL BAR VIDITELNÝ (= initial state). To je přesně to, co chceme:
 * při prvním načtení webu je hero stejné jako visible viewport, takže
 * bank logos `bottom:0` jsou na dně viditelné plochy. Po scrollu se URL bar
 * skryje a viewport se zvětší, ale `svh` zůstává stejný (bez jump).
 * Vendor calc(var(--vh,1vh)*100) je fallback. */
@supports (height: 100svh) {
  section.home {
    height: 100svh !important;
  }
}

/* === REFERENCE KLIENTŮ — grid layout (Option A) ============================
 * Plně přepracovaná sekce: full-width header s rating badge, grid recenzí
 * (3 cols desktop / 2 tablet / 1 mobile), CTA tlačítko centrovaně dole. */

/* Větší vertikální mezera od předchozí sekce — vendor default `pt` 100px je málo. */
section#references.pt,
section#team.pt,
section#calculation.pt,
section#cooperation.pt,
section#services.pt,
section#info.pt {
  padding-top: 160px;
}
@media (max-width: 991px) {
  section#references.pt,
  section#team.pt,
  section#calculation.pt,
  section#cooperation.pt,
  section#services.pt,
  section#info.pt { padding-top: 100px; }
}

/* Tlačítko „Další články" v sekci #articles — větší mezera od posledního článku */
.btn-load-more {
  margin-top: 60px;
}
@media (max-width: 991px) {
  /* Mobile: btn-load-more je POD `more-articles-panel`. Vendor wrapper
   * `.col-12.mt-20` přidává 20 px nahoru, btn pak měl 30 px nahoru =
   * total 50 px gap mezi posledním článkem a tlačítkem. Snižujeme
   * btn na 0, takže celkový gap = 20 px (vendor wrapper). */
  .btn-load-more { margin-top: 0; }

  /* Vendor article design je zachován. Mezera mezi posledním článkem
   * a btn na mobile je inherent v vendor fixed-height layoutu —
   * řešíme přes JS batch (jen 2 řady viditelné = 2 články na mobile),
   * tedy klient nikdy nevidí prázdný prostor pod hodně kartami. */
}

/* === More-articles-panel progressive grid =========================
 *
 * Vendor template `col-3 col-ld-12` = jen 2 stavy:
 *   ≥1200 vw → col-3   (25 %, 4 cols)
 *   ≤1199 vw → col-ld-12 (100 %, 1 col)
 * To znamená skok z 4 sloupců rovnou na 1 — na tabletu (768–1199)
 * je 1 sloupec na celé šířce, vypadá špatně.
 *
 * Přidáváme mezistupně:
 *   992–1199 vw (large tablet) → 3 cols (33.33 %)
 *   768–991 vw (tablet)        → 2 cols (50 %)
 *   ≤767 vw (mobile)           → 1 col (vendor 100 %, beze změny)
 *
 * JS handler (index.html) automaticky detekuje počet sloupců
 * z aktuální šířky tilu a `batchSize = 2 × cols`:
 *   Desktop:  4 cols → 8 articles per click
 *   Lg tablet: 3 cols → 6 per click
 *   Tablet:    2 cols → 4 per click
 *   Mobile:    1 col  → 2 per click  */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #more-articles-panel .div-row > .col-3 {
    width: 33.333% !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #more-articles-panel .div-row > .col-3 {
    width: 50% !important;
  }
}

/* Header — heading vlevo, kompaktní rating badge vpravo */
#references .references-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;
}
#references .references-header-text {
  flex: 1 1 auto;
  min-width: 280px;
  max-width: 600px;
  height: auto !important;
}
/* Pravý sloupec headeru: rating badge + CTA tlačítko stacked vertikálně */
#references .references-rating-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
  flex-shrink: 0;
}
#references .references-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
}
#references .references-rating-badge .count { font-size: 11pt; opacity: 0.85; }
#references .references-rating-badge .value { font-size: 14pt; font-weight: 700; }
#references .references-rating-badge .stars { display: inline-flex; gap: 2px; }
#references .references-rating-badge .stars i { color: #FBBC04 !important; font-size: 11pt; }
#references .references-rating-badge .label { font-size: 10pt; opacity: 0.9; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.3); }

/* Mobile — kompaktnější badge: schovat popisek a zmenšit padding/gap, jinak
 * by se přetahoval přes okraj obrazovky. */
@media (max-width: 575px) {
  #references .references-rating-badge {
    padding: 12px 16px;
    gap: 8px;
    font-size: 10pt;
  }
  #references .references-rating-badge .label { display: none; }
  #references .references-rating-badge .stars i { font-size: 10pt; }
}

/* Reviews grid */
#references .reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (max-width: 1199px) {
  #references .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  #references .reviews-grid { grid-template-columns: 1fr; }
}

/* Review karta */
#references .review-card {
  background-color: #f5f5f5;
  border: 1px solid rgba(3, 22, 36, 0.08);
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
body.dark #references .review-card { border-color: rgba(255, 255, 255, 0.1); }
#references .review-card::before {
  content: "\e660"; /* ph-quotes-fill ozdobné */
  font-family: "Phosphor-Fill";
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 32pt;
  color: #e8e8e8;
  pointer-events: none;
}
/* Review card hover je řešen v sjednocené karta-hover sekci níže
 * (#references .review-card, #form .form-trust, ...). Tady už nic. */
body.dark #references .review-card {
  background-color: var(--background-color2);
}
body.dark #references .review-card .review-text { color: #fff; }
body.dark #references .review-card .review-rating { color: #fff; }
#references .review-card .review-text {
  font-size: 11pt;
  line-height: 1.55;
  color: var(--font-color);
  font-weight: 500;
  margin: 0;
  /* Posun pod dekorativní ❝ ikonu v pravém horním rohu, ať se text nekryje. */
  padding-top: 36px;
  /* Limit délky textu na 7 řádků s elipsou. Bez `flex: 1` aby `scrollHeight`
   * vs `clientHeight` měřilo jen obsah a detekce overflow byla spolehlivá. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#references .review-card .review-footer {
  /* Pinnuje footer ke dnu karty (bez `flex: 1` na textu by se přilepil k textu) */
  margin-top: auto;
}
/* Expanded state — kliknutím "Číst celé" se line-clamp zruší a text se ukáže celý */
#references .review-card.expanded .review-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Toggle button "Číst celé" / "Sbalit" — defaultně skrytý, JS přidá `.show`
 * pokud text reálně přetéká (scrollHeight > clientHeight). */
#references .review-card .review-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin-top: -8px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 10pt;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  transition: color .2s ease;
}
#references .review-card .review-toggle.show { display: inline-block; }
#references .review-card .review-toggle:hover { color: #009bcb; }
#references .review-card .review-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark #references .review-card .review-footer { border-top-color: rgba(255,255,255,0.1); }
#references .review-card .review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
#references .review-card .review-avatar img { height: 16px; }
#references .review-card .review-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#references .review-card .review-name {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 11pt;
}
/* Review card hvězdičky — sjednoceno s rating badge stars:
 *   - gap mezi hvězdičkami 2 px (vendor badge má 2px, review měl 6)
 *   - mezera mezi „5.0" a první hvězdičkou 8 px (margin-right na rating)
 *   - line-height: 1 + vertikální zarovnání na střed čísla */
#references .review-card .review-stars { display: inline-flex; align-items: center; gap: 0; font-size: 9pt; }
#references .review-card .review-rating { font-weight: 700; color: var(--font-color); margin-right: 8px; line-height: 1; }
#references .review-card .review-stars i { color: #FBBC04 !important; font-size: 9pt; line-height: 1; }
#references .review-card .review-stars i + i { margin-left: 2px; }

/* Skeleton placeholder než dorazí data */
#references .review-skeleton {
  min-height: 240px;
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent) 0 0 / 200% 100%,
    #f5f5f5;
  animation: review-skeleton-shimmer 1.4s infinite linear;
}
#references .review-skeleton::before { content: none; }
@keyframes review-skeleton-shimmer { 0% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }

#references .reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12pt;
  color: var(--font-color);
  opacity: 0.7;
  padding: 40px 0;
}

/* „Zobrazit další recenze" — stejný styl jako „Další články" (.btn-load-more):
 * solid modrý pill 250×50, bílý text, primary color → tmavší modrá na hover. */
#references .reviews-load-more {
  width: 250px;
  height: 50px;
  margin-top: 0;
  margin-bottom: 30px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 10pt;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color .4s linear;
}
#references .reviews-load-more:hover {
  background-color: #009bcb;
}
#references .reviews-load-more[hidden] { display: none; }
@media (max-width: 991px) {
  #references .reviews-load-more { width: 100%; }
}

/* Fade-in animace pro nově načtené review karty */
@keyframes review-card-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#references .review-card-fade-in {
  animation: review-card-fade-in .4s ease-out both;
}

/* CTA tlačítko — kompaktní pill ve stylu rating badge, zelená = akce */
#references .reviews-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background-color: #2b3;
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s linear, transform .3s ease;
}
#references .reviews-cta:hover { background-color: #1b9528; }
#references .reviews-cta i { color: #fff; font-size: 11pt; }
#references .reviews-cta .reviews-cta-text { display: inline-flex; align-items: center; }
#references .reviews-cta .reviews-cta-text .primary { font-size: 11pt; font-weight: 600; }
/* Subtitle "Děkujeme" schovaná pro kompaktní look — match rating badge */
#references .reviews-cta .reviews-cta-text .secondary { display: none; }

/* Tlačítko „Další články" — vendor `.btn-load-more` neměl hover efekt; doplňuji
 * stejný pattern jako ostatní tlačítka (background transition + tmavší modrá). */
.btn-load-more {
  transition: background-color .4s linear;
}
.btn-load-more:hover {
  background-color: #009bcb;
}

/* Form select dropdown caret (Co Vás čeká? / Schůzka). Vendor `.select-with-icon::after`
 * volal Font Awesome 6 Pro (`\f0d7`), ale FA Pro v projektu není — proto čtverec.
 * Přepínám na Phosphor-Light caret-down. Rotace `.open::after` (180°) je zachovaná
 * z vendor pravidel a vizuálně z dolů → nahoru caret. */
.select-with-icon::after {
  content: "\e136" !important; /* ph-caret-down */
  font-family: "Phosphor-Light" !important;
  font-weight: normal !important;
  font-size: 14pt;
  right: 25px;
}

/* Form select — sjednocuju vzhled s textovými inputy (.input-box .input-1):
 * 80px výška, 20px radius, 2px border #eee, fonty 14pt/600.
 * Vendor preload.min.css mělo malý 5px radius a tenký 1px border — nesedí. */
.input-box .select-with-icon select.input-1 {
  height: 80px !important;
  border-radius: 20px !important;
  border: 2px solid #eee !important;
  background-color: #fff !important;
  padding: 13px 47px !important;
  font-size: 14pt !important;
  font-weight: 600 !important;
  color: var(--font-color);
}
body.dark .input-box .select-with-icon select.input-1 {
  color: #fff;
  border: 2px solid #fff !important;
  background-color: var(--background-color2) !important;
}

/* Info tooltip (otazníčky) — vendor stylovala neutrální šedou `#b9b9b9`,
 * přepisuju na primární modrou ať sedí s brandem + delší width pro lepší
 * čitelnost. Font-size je řešen v JEDNOTNÉ TEXT SCALE bloku výš (14 px). */
.tooltip .tooltip-text {
  background-color: var(--color-primary) !important;
  line-height: 1.5 !important;
  width: 280px !important;
  padding: 16px 20px !important;
}
.tooltip .tooltip-text::after {
  border-color: var(--color-primary) transparent transparent transparent !important;
}
.tooltip.left .tooltip-text::after {
  border-color: transparent transparent transparent var(--color-primary) !important;
}
.tooltip.right .tooltip-text::after {
  border-color: transparent var(--color-primary) transparent transparent !important;
}

/* HYPOTEČNÍ KALKULAČKA tabs na mobile — vendor stackuje col-4 → col-md-12 (full
 * width pod sebou) ale nepřidává mezi ně mezeru. Decentní gap 12px. */
@media (max-width: 991px) {
  .calculator-tabs .div-row > .col-4 + .col-4 {
    margin-top: 12px;
  }
}

/* Desktop — vizuální mezera mezi taby. Vendor `.col-4` cols jsou těsně vedle
 * sebe; přidám horizontal padding na vnitřní `.div-center` ať se buttons (full
 * width) opticky oddělí. */
@media (min-width: 992px) {
  .calculator-tabs .div-row > .col-4 > .div-center {
    padding: 0 8px;
  }
}

/* HYPOTEČNÍ KALKULAČKA — tab buttons (Výpočet splátky / Refinancovat / Maximální úvěr).
 * Vendor styloval pouze active variantu (modrý pill), neaktivní tab byl prostý
 * text bez vizuální afordance. Doplňuji:
 *   - neaktivní: světle šedý pill (vidíš že je klikatelné)
 *   - hover na neaktivní: tmavší šedá
 *   - hover na aktivní: tmavší modrá (match jiným tlačítkům)
 *   - šířka 100 % kontejneru → stejná mezera mezi taby napříč různými šířkami textu */
.tab-button {
  border-radius: 25px;
  /* Transition jen na color (text). Background-color transition by zamrzla
   * při toggle dark↔light (vendor bug — viz sekce výše), takže pruh by
   * zůstal v light barvě (#f0f0f0) i v dark mode. Bez transition skočí
   * background-color instant a vendor `body.dark` rule aplikuje korektně.
   * Hover je instant — bez fade — ale viditelný. */
  transition: color .3s linear;
  width: 100%;
}
.tab-button:not(.active) {
  background-color: #f0f0f0;
}
.tab-button:not(.active):hover {
  background-color: #ddd;
}
.tab-button.active:hover {
  background-color: #009bcb;
}
/* Dark mode — vendor `body.dark .tab-button:not(.active) { bg: var(--background-color4) }`
 * neaplikuje (stejný transition zamrzání jako u sekcí). Force přes !important
 * a explicit hover s mírným zesvětlením (na #010b12 nelze ztmavit). */
body.dark .tab-button:not(.active) {
  background-color: var(--background-color4) !important;
}
body.dark .tab-button:not(.active):hover {
  background-color: #1a2a36 !important;
}

/* Filter pills nad seznamem článků (Bydlení od A do Z, Na co si dát pozor…) —
 * vendor neměl hover state. Doplňuji konzistentně:
 *   - non-active: světle šedá `#eee` → tmavší `#ddd` na hover
 *   - active: var(--color-primary) → `#009bcb` na hover (match ostatním btn) */
ul.ul-article-type > li {
  transition: background-color .4s linear, color .4s linear;
}
ul.ul-article-type > li:hover {
  background-color: #ddd;
}
ul.ul-article-type > li.active:hover {
  background-color: #009bcb;
}

/* Calculate modal popup CTA tlačítko (Zjistit přesnou nabídku / Spočítat úsporu /
 * Zjistit lepší řešení / Zjistit kolik získám) — pulzace stejná jako konzultace
 * (vendor `@keyframes pulse4`, zelená box-shadow). */
.div-modal.calculate .modal-content .div-button {
  animation: pulse4 2s infinite;
}

/* Calculate modal popup („Spočítat splátku" výsledek) — kruhový header avatar
 * `.div-modal-body` (150×150 desktop / 100×100 mobile). Ikona kalkulačky uvnitř
 * 35 % šířky kruhu napříč breakpointy + grid centrování. */
.div-modal.calculate .div-modal-body {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
.div-modal.calculate .div-modal-body > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-modal.calculate .div-modal-body > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Article tile detail button (kruh vpravo dole na každé článkové dlaždici) —
 * 80×80 default / 70×70 medium / 60×60 small / 50×50 smaller. Ikona 35 % šířky
 * kruhu napříč všemi breakpointy + grid centrování. */
.div-panel-article ul.ul-article-text > li.li-button-detail {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Logo swap v dark módu — preloader a footer mají tmavé pozadí, takže
 * dark navy text v `_prim.svg` (#031624) splyne s pozadím. `_white.svg` má
 * stejnou cyan ikonu, ale text je bílý. Header logo neswapujeme — header
 * má v dark módu bílé pozadí, takže prim varianta tam funguje. */
body.dark #logo-preloader,
body.dark .af-logo img {
  content: url('/img/hypoteka_ostrava_white.svg');
}

/* Hero H1 „Hypotéka, která Vám sedne !" — sjednocení s ostatními section
 * nadpisy na webu. Vendor mělo weight 700 + ls normal. Section/form H3
 * mají weight 800 + ls -0.01em — srovnáno na stejný typografický jazyk. */
.ul-section-primary > li:nth-child(2) p.text1 {
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* === JEDNOTNÁ TEXT SCALE (DESKTOP ONLY ≥992 px) =====================
 * Tier         Velikost  Použití
 * ─────────────────────────────────────────────────────────────────
 * Heading XL    56 px     hero h1 (responsive scaling)
 * Heading L     32 px     section h3
 * Subtitle      18 px     section paragraphs, lead text, form-trust strong
 * Body          16 px     base, hero subtitle, regular paragraphs
 * Small         14 px     reviews, tooltips, descriptions, meta info
 * Caption       12 px     footer copyright, fine print
 *
 * Vendor používá pt (legacy print unit), my standardizujeme na px.
 * Tyto overrides aplikujeme JEN NA DESKTOP (≥992 px) — mobile zatím
 * dostane vendor responsive default a vyřešíme separátně.
 * Aplikuje se na všech 9 HTML stránek (api-bridge.css je v <head>). */
@media (min-width: 992px) {
  /* Heading L 32 px — section h3 sjednocení. */
  #team .ul-section-header h3 {
    font-size: 32px !important;
  }

  /* Team specialista jméno (h3 v ul.ul-team2 li:nth-child(2)) — fluid.
   * Na úzkých breakpointech (1024-1280) se „Josef Grossmann" v 32 px
   * nevejde do col-4 (~285 px) a zalamoval na 2 řádky, čímž rozbil
   * vyrovnání karet medailonku. Clamp scale 26 → 32 px. */
  #team ul.ul-team2 > li:nth-child(2) h3 {
    font-size: clamp(26px, 1.3vw + 12.7px, 32px) !important;
  }

  /* Subtitle 18 px — section paragraphs, lead text */
  .ul-section-header p,
  .ul-section-header.second p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
  /* Hero subtitle — fluid clamp scale, optimalizovaný pro daný container.
   * Hero text container je `calc(50% - 200px)` (vendor `.ul-section-primary`).
   * clamp formula: font roste linearně s viewportem, vždy s rezervou pod
   * max-fit (60 znaků na řádek = char_width × 0.55 × font ≤ container).
   *
   * Behavior na desktopu:
   *   2300+ vw → 24 px (max, pro velké monitory)
   *   1920 vw → ~22 px
   *   1440 vw → ~15 px
   *   1024 vw → 14 px (min ve scale)
   *
   * Text vždy fit 2 řádky s forced <br> mezi větami. */
  .ul-section-primary > li:nth-child(3) p {
    font-size: clamp(14px, calc(1.4vw - 5.5px), 24px) !important;
    line-height: 1.5 !important;
  }

  /* Body 16 px — hlavní obsah / klíčové akční tlačítka.
   *   - FAQ otázka text: vendor 12 → 16 (klikací cíl, hlavní obsah sekce)
   *   - Calc CTA „Spočítat splátku": vendor 13.33 → 16 (hlavní konverzní btn) */
  #faq .qa-item .question .li-text p,
  .div-panel-info-footer .button span {
    font-size: 16px !important;
  }

  /* Tab buttons (Splátka/Refinancovat/Maximální úvěr) — fluid font.
   * Cíl 16 px na velkých monitorech, ale text „Maximální úvěr" se na
   * úzkých breakpointech (992-1280) nemusí vejít. Clamp scaleuje
   * 11 → 16 px lineárně podle viewportu, takže text vždy fit pill.
   *
   * Behavior:
   *   1920 vw → 16 px (max, scale tier Body)
   *   1440 vw → 13.6 px
   *   1280 vw → 12.7 px
   *   1024 vw → 11.1 px
   *    992 vw → 11 px (min) */
  .tab-button {
    font-size: clamp(11px, 0.6vw + 5px, 16px) !important;
  }

  /* Small 14 px — reviews, descriptions, tooltips, footer body, card meta,
   * sekundární tlačítka. */
  #references .review-card .review-text,
  .article-card .desc,
  .article-card .meta,
  .tooltip .tooltip-text,
  .article-footer .af-col-contact .af-list li,
  .article-footer .af-col-contact .af-list li > span,
  .article-footer .af-col-contact .af-list li > a,
  .article-footer .af-list-links li,
  .article-footer .af-col-brand p,
  .form-trust-quote-text,
  /* Form inputs labels — vendor 9.33 (7pt) → 14, sotva čitelné jinak. */
  .input-box label,
  /* Hero CTA popisek („Dosáhnete na hypotéku?") — vendor 13.33 → 14 */
  .ul-section-primary > li.li-button p,
  /* Header adresa („Ostrava") — vendor 13.33 → 14 */
  .div-header-top .ul-top-adress span,
  /* FAQ odpověď text — vendor 13.33 → 14 */
  #faq .qa-item .answer p,
  /* Sekundární tlačítka („Další články", „Další recenze") — 13.33 → 14 */
  .btn-load-more,
  #references .reviews-load-more,
  /* Reviews CTA pill text („Napište recenzi") — 14.67 → 14 */
  #references .reviews-cta .primary,
  /* Rating badge count („(170+)") — 14.67 → 14 */
  #references .references-rating-badge .count,
  /* Review name („David K.") — 14.67 → 14 */
  #references .review-card .review-name {
    font-size: 14px !important;
  }

  /* Caption 12 px — drobné popisky, copyright, fine print. */
  .article-footer-bottom,
  .article-footer-bottom span,
  /* Team pozice („Ředitel · Hypoteční specialista") — vendor 11 → 12 */
  #team ul.ul-team2 > li:nth-child(3) .text,
  /* Contact CTA label („ZAVOLEJTE NÁM") — vendor 11 → 12 */
  #contact .contact-cta-label,
  /* Rating badge label („Recenze uživatelů") — 13.33 → 12 (sekundární za separátorem) */
  #references .references-rating-badge .label {
    font-size: 12px !important;
  }
}

/* ===================================================================== */

/* Tooltip ikony (?) — sjednotit velikost napříč webem + vertikálně
 * vycentrovat. Vendor mělo `vertical-align: baseline` + `margin-top: -3px`
 * (hack, ikona se zvedala od baseline a nesedla na střed textu).
 * inline-flex kontejner s align-items: center centruje ikonu spolehlivě. */
.tooltip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.tooltip > i,
.tooltip.tb > i {
  font-size: 14pt !important;
  margin: 0 !important;
  line-height: 1 !important;
  /* Optická korekce — Font Awesome regular `circle-question` glyph má
   * asymetrický padding v em-boxu (kruh vykreslený mírně nad center),
   * vypadá lehce výš. 2px down kompenzuje na vizuální střed. */
  transform: translateY(2px);
}

/* === FAQ sekce — UX úpravy ===========================================
 * 1) Skrýt redundantní otazník (?) před textem otázky — text už končí
 *    otazníkem, ikona nepřidává informaci.
 * 2) Hover efekt na pruh otázky (afordance „klikatelné").
 * 3) Šipka rozbalování decentně zvýrazněná primary modrou + rotace
 *    180° na open stavu.
 * 4) Levý sloupec s fotkou centrován vertikálně + horizontálně
 *    (stejný pattern jako benefit v #form / #calculation pravý sloupec). */

/* (1) Otazník před textem pryč — ten šum mizí. */
#faq .qa-item .question .li-icon {
  display: none !important;
}

/* Padding pruhu otázky — vendor `.div-start` měl jen 10px vlevo
 * (počítal s otazníkem který oddělil text od hrany). Po jeho skrytí
 * text „lepí" na levý okraj. Padding-left zvětšeno na 30px;
 * padding-right ponecháno na 0 (vendor sám má ~50px mezi šipkou
 * a pravou hranou pruhu). */
#faq .qa-item .question > .div-start {
  padding-left: 30px !important;
}

/* (2) Hover na pruh otázky — decentní ZTMAVNUTÍ.
 * Vendor `.question` má v light i dark módu pozadí #eee (světle šedé),
 * proto hover přepisujeme univerzálně (nezávisle na body.dark) — match
 * stejnému pattern jako tab-button hover (řádek 587).
 * Skip pro `.active` pruh — ten už je modrý/otevřený, hover nemá smysl. */
#faq .qa-item .question {
  cursor: pointer;
  transition: background-color 0.3s linear;
}
#faq .qa-item:not(.active) .question:hover {
  background-color: #ddd;
}

/* (3) Šipka rozbalování — primary modrá + rotace na open. */
#faq .qa-item .li-icon2 .fa-caret-down {
  color: var(--color-primary);
  font-size: 18px;
  transition: transform 0.3s ease;
}
#faq .qa-item.active .li-icon2 .fa-caret-down {
  transform: rotate(180deg);
}

/* (4) Levý sloupec (fotka) centrován vertikálně + horizontálně —
 *     stejný pattern jako benefit ve #form/#calculation (řádky výše).
 *     Aplikováno také na:
 *     - #cooperation (Průběh spolupráce — obrázek vlevo)
 *     - #about col 2 (PROČ HYPOTÉKA — obrázek vpravo lidé s domkem)
 *     - #about col 3 (Služba / přístup — obrázek vlevo lidé s kalkulačkou) */
@media (min-width: 992px) {
  section#faq > .div-container > .div-row > div:nth-child(1),
  section#cooperation > .div-container > .div-row > div:nth-child(1),
  section#about > .div-container > .div-row > div:nth-child(2),
  section#about > .div-container > .div-row > div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* Sekce #calculation — content row (calc form + benefit list) obalená
 * v jednom tenkém šedém rámečku bez výplně (matching .contact-cta border).
 * Heading row je VENKU karty, aby nadpis začínal na stejné vertikální
 * pozici jako nadpisy ostatních sekcí. */
@media (min-width: 992px) {
  section#calculation > .div-container > .div-row:not(.calc-heading-row) {
    background: transparent;
    border: 1px solid rgba(3,22,36,0.1);
    border-radius: 24px;
    padding: 36px;
    margin-top: 50px !important;
  }
  body.dark section#calculation > .div-container > .div-row:not(.calc-heading-row) {
    border-color: rgba(255,255,255,0.12);
  }
}

/* Sjednocení vertikálních mezer uvnitř karty kalkulačky:
 * - vendor `.calculator-tabs` mělo margin-top 50px (top gap přes 87px)
 * - prázdný placeholder .div-panel-info-footer.second pod CTA tlačítkem
 *   přidával ~80px (bottom gap přes 117px)
 * Oba odstraněny, aby horní i dolní mezera odpovídaly card paddingu (~36px).
 *
 * Univerzální mt:0 (desktop i mobile) — analogicky #form, kde formulář hned
 * navazuje na benefit box bez vlastní vnitřní mezery. Mezeru mezi benefity
 * a kalkulátorem řeší margin-top na col-7 (níže v mobile media query). */
section#calculation .calculator-tabs {
  margin-top: 0 !important;
}
section#calculation .div-panel-info-footer.second {
  display: none !important;
}

/* === #calculation MOBILNÍ LAYOUT (≤991px) =============================
 * Pattern matchuje sekci #form (kontaktní formulář):
 *   - benefit box NAHOŘE, formulář/kalkulátor POD ním
 *   - mezera mezi sloupci: 100px (md) / 30px (ml ≤575) — vendor mt-md-100/mt-ml-30
 *
 * Vendor HTML pořadí v #calculation je opačné než #form (kalkulátor=col-7
 * první v DOM, benefity=col-5 druhý). Reorder přes flex `order` na mobilu. */
@media (max-width: 991px) {
  section#calculation > .div-container > .div-row:not(.calc-heading-row) {
    display: flex;
    flex-direction: column;
  }
  /* Benefity (col-5) nahoru — vendor mt-md-50 / mt-ml-30 zachovat (mezera
   * od heading-row); jen `order` přesune v DOM nahoru. */
  section#calculation > .div-container > .div-row:not(.calc-heading-row) > .col-5.col-md-12 {
    order: -1;
  }
  /* Kalkulátor (col-7) dole — 100px gap od benefit boxu (match #form mt-md-100) */
  section#calculation > .div-container > .div-row:not(.calc-heading-row) > .col-7.col-md-12 {
    margin-top: 100px;
  }
}
@media (max-width: 575px) {
  /* Match #form mt-ml-30 na malých zařízeních */
  section#calculation > .div-container > .div-row:not(.calc-heading-row) > .col-7.col-md-12 {
    margin-top: 30px;
  }
}

/* Sekce #calculation — pravý sloupec s benefit kartou:
 *   - vertikálně centrovat (jinak karta sedí u horní hrany na úrovni
 *     nadpisu, zatímco formulář vlevo začíná až pod nadpisem),
 *   - horizontálně centrovat (rovnoměrný gap od formuláře vlevo
 *     i od kraje obrazovky vpravo). */
@media (min-width: 992px) {
  section#calculation > .div-container > .div-row > div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Sekce #form — levý sloupec s benefit kartou horizontálně centrovat
   * (rovnoměrný gap od kraje obrazovky vlevo i od formuláře vpravo). */
  section#form > .div-container > .div-row > div:nth-child(1) {
    display: flex;
    justify-content: center;
  }

  /* Mezera mezi benefit boxem a formulářem/kalkulátorem na desktopu —
   * vendor col-* sloupy mají padding 0 a žádný gap. Na úzkých
   * desktop breakpointech (1024-1280) se boxy doslova dotýkaly.
   * Aplikuje se přes padding na vnitřní obsah sloupce, aby vendor
   * flex-basis (50% / 7-5 grid) zůstal nedotčený a layout nezalamoval. */
  section#form > .div-container > .div-row > .col-6:nth-child(1) {
    padding-right: 20px;
  }
  section#form > .div-container > .div-row > .col-6:nth-child(2) {
    padding-left: 20px;
  }
  section#calculation > .div-container > .div-row:not(.calc-heading-row) > .col-7 {
    padding-right: 20px;
  }
  section#calculation > .div-container > .div-row:not(.calc-heading-row) > .col-5 {
    padding-left: 20px;
  }
}

/* Hero kalkulačka tlačítko + popisek („Dosáhnete na hypotéku?") — na
 * desktopu mělo malou mezeru (20 px) od subheadingu, působí to namačkaně.
 * Tablet+ desktop dostává větší vertikální dýchací prostor. */
@media (min-width: 992px) {
  .ul-section-primary > li.li-button {
    margin-top: 60px !important;
  }
}

/* Horní lišta v záhlaví (news + OTEVŘENO + adresa) — vendor stylovala ikony
 * na 13.3px (10pt), což bylo subtilnější než ikony v patičce (19px). Sjednoceno
 * na 19px, aby váhově odpovídaly ostatním ikonám. */
.div-header-top .ul-menu-top i,
.div-header-top .ul-top-open i,
.div-header-top .ul-top-adress i {
  font-size: 19px !important;
}

/* Skrytí ikony kalendáře v náhledu článku — vendor JS template
 * (`buildSmallCardHTML` v `settings.min.js`) ji generuje vždy, ale optické
 * zarovnání ikony Phosphor-Light vůči digitům Montserratu napříč všemi
 * vendor breakpointy (8pt/6pt/5pt) bylo nestabilní. Datum samo o sobě je
 * dostatečně čitelné, ikona není informačně nutná. Zachováváme `<i>` v DOM
 * (nezasahujeme do vendor JS), jen ho skryjeme. */
.div-panel-article .li-date > i {
  display: none !important;
}

/* Skrytí ikony kalendáře také v Zpravodaj listing (`zpravodaj.html`,
 * `.article-card .meta`). Sjednocený vzhled s homepage náhledy.
 * Selector cílí jen na calendar — ikona uživatele (`fa-user`) u jména
 * autora zůstává viditelná, ta optické problémy nemá. */
.article-card .meta i.fa-calendar-lines {
  display: none !important;
}

/* Vertikální zarovnání srdíčka + počtu liků (`.ul-article-settings`
 * vnořený `ul.flex`) — robustní napříč všemi rozlišeními.
 * `inline-flex` na rodiči i na obou sourozencích eliminuje baseline
 * metrics různých glyphů, `vertical-align: middle` jako fallback. */
.div-panel-article .ul-article-settings .ul-basic.flex {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.div-panel-article .ul-article-settings .ul-basic.flex > li,
.div-panel-article .ul-article-settings .ul-basic.flex > li > i,
.div-panel-article .ul-article-settings .ul-basic.flex > li > span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle;
  padding: 0 !important;
  margin: 0 !important;
}

/* HYPOTEČNÍ KALKULAČKA — tlačítko „Spočítat splátku" (pill 250×50px).
 * Ikona inline s textem — 35 % výšky tlačítka přes `cqh` jednotku.
 * Flex centrování zarovná ikonu vertikálně na střed textu (line-height nestačí). */
.div-panel-info-footer a.button {
  container-type: size;
}
.div-panel-info-footer a.button > div.div-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.div-panel-info-footer a.button > div.div-center > i {
  font-size: 35cqh;
  line-height: 1;
}

/* === DARK REŽIM — sjednocení pozadí napříč webem ====================
 *
 * Dvě nezávislé vendor chyby, které způsobovaly rozpadlé barvy:
 *
 * (1) `<section>` má `transition: background-color 0.4s linear`
 *     (vendor primary.min.css). Při toggle dark↔light se transition
 *     spustí ale zamrzne v initial stavu — sekce se vizuálně NIKDY
 *     nepřepne. `getComputedStyle` vrací zamrzlou hodnotu, CSS
 *     override (i inline `!important`) je efektivně ignorován.
 *     Fix: `transition: none !important` na sekce + footer.
 *
 * (2) `<footer.article-footer>` má computed `height: 100px` (vendor),
 *     ale jeho obsah (`.article-footer-inner` + `.article-footer-bottom`)
 *     má scrollHeight ~416px. `overflow: visible` → 316px obsahu
 *     PŘETÉKÁ ven z parent footeru a rendruje se na body bg. Když
 *     nastavíš `.article-footer { background }`, zabarví se jen 100px
 *     (= těch malých kousků nahoře a dole) a zbytek (logo, kontakty,
 *     copyright) leze na body color → vypadá to, že "footer barva
 *     se aplikuje jen na malý kus".
 *     Fix: `height: auto !important` — footer nese svůj obsah.
 *
 * --footer-bg proměnná pro snadné přebarvení.
 * Aktuálně sladěno s navigací v záhlaví (`.ul-menu` v dark mode). */
:root {
  --footer-bg: #010b12; /* match s nav .ul-menu (= vendor --background-color4) */
}

main > section,
.article-footer {
  transition: none !important;
}

/* Fix vendor footer height bug — bez něj `background-color` na footeru
 * pokryje jen prvních 100 px a obsah spadne na body bg. */
.article-footer {
  height: auto !important;
}

/* Dark mode — sekce v <main> sjednoceny s body (#031624).
 * #contact je sjednocen s ostatními sekcemi (#references, #about, …),
 * není v „footer area" — visuálně navazuje na obsah, ne na patičku. */
body.dark main > section:not(#home):not(#form) {
  background-color: var(--background-color2) !important;
}

/* Dark mode — patička (.article-footer) match navigaci v záhlaví.
 * Pokrývá CELÝ footer (height: auto fix výše). */
body.dark .article-footer {
  background-color: var(--footer-bg) !important;
}

/* === HOVER EFEKTY — sjednocení napříč webem =========================
 *
 * Kategorie a chování:
 *   1) Šedý pill / panel (closed) — bg → ztmavnutí v light, mírné
 *      zesvětlení v dark (na #010b12 nelze ztmavit dál):
 *      = Tab btn closed (existuje), Article filter pill closed
 *        (existuje), FAQ pruh closed (existuje), Hero slider-nav
 *        closed (PŘIDÁVÁM).
 *   2) Modrá CTA pill (active / primary) — bg → tmavší modrá:
 *      = Calc CTA, „Další články", „Další recenze", Tab btn active,
 *        Hero slider-nav active (PŘIDÁVÁM).
 *   3) Text linky — color → var(--color-primary):
 *      = Footer odkaz (vendor), Review „Číst celé" (existuje),
 *        Header menu link (PŘIDÁVÁM).
 *   4) Theme toggle (sluníčko/měsíček) — opacity + scale (PŘIDÁVÁM).
 *
 * Společný timing 0.3s linear přes všechna pravidla. */

/* (1+2) Hero slider-nav (Koupě/Výstavba/Rekonstrukce/Refinancování/Úvěr).
 * Vendor neměl :hover — chybí afordance. Active item dostává tmavší
 * modrou jako ostatní primary CTA, closed item ztmavnutí (light) /
 * mírné zesvětlení (dark, kde vendor bg #010b12 nejde fyzicky ztmavit). */
ul.ul-slider-nav > li {
  transition: background-color 0.3s linear, color 0.3s linear;
}
ul.ul-slider-nav > li:not(.active):hover {
  background-color: #ddd;
}
body.dark ul.ul-slider-nav > li:not(.active):hover {
  background-color: #1a2a36;
}
ul.ul-slider-nav > li.active:hover {
  background-color: #009bcb;
}

/* (3) Header menu link — text fade na primary modrou. */
.div-header .ul-menu li a {
  transition: color 0.3s linear;
}
.div-header .ul-menu li a:hover {
  color: var(--color-primary);
}

/* (4) Theme toggle (sluníčko/měsíček v záhlaví). Vendor neměl hover —
 * uživatel nepoznal že je klikatelné. Decentní opacity + scale. */
label[for="switcher-input-vertical"] {
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
label[for="switcher-input-vertical"]:hover {
  opacity: 0.75;
  transform: scale(1.08);
}

/* === FAQ pruh — fix dark mode hover (stejný pattern jako tab buttons) ==
 *
 * Vendor `body.dark .question { bg: var(--background-color4) }` v
 * primary.min.css existuje, ale neaplikuje kvůli `transition:
 * background-color` zamrzání (totéž jako sekce a tab buttons). FAQ
 * pruhy zůstávají #eee i v dark mode, takže hover #ddd vypadal jako
 * „bílá na bílé" — světlo místo ztmavnutí.
 *
 * Fix: vypnout `transition: background-color` na `.question`
 * (zachovat color transition) + force dark vendor bg + explicit
 * hover s mírným zesvětlením. */
#faq .qa-item .question {
  transition: color 0.3s linear !important;
}
body.dark #faq .qa-item:not(.active) .question {
  background-color: var(--background-color4) !important;
}
body.dark #faq .qa-item:not(.active) .question:hover {
  background-color: #1a2a36 !important;
}

/* === KARTA HOVER — sjednocený efekt napříč webem ====================
 *
 * Aplikuje se na:
 *   - Reference klientů (.review-card)
 *   - Benefit kontejner v #form (.form-trust)
 *   - Benefit kontejner v #calculation (.form-trust)
 *   - Service cards (ul.ul-services-card)
 *
 * Light mode: jemný černý drop shadow + lift.
 * Dark mode: primary modrá glow (černý shadow je na tmavém pozadí
 * neviditelný).
 *
 * `.review-card` má vendor transition + lift z api-bridge.css výše,
 * tady jen sjednocujeme dark variant a přidáváme ostatní karty. */

#references .review-card,
#form .form-trust,
#calculation .form-trust,
#about .about-benefit-card > .ul-services,
#services ul.ul-services-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#references .review-card:hover,
#form .form-trust:hover,
#calculation .form-trust:hover,
#about .about-benefit-card > .ul-services:hover,
#services ul.ul-services-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Dark mode — primary modrá glow místo černého stínu */
body.dark #references .review-card:hover,
body.dark #form .form-trust:hover,
body.dark #calculation .form-trust:hover,
body.dark #about .about-benefit-card > .ul-services:hover,
body.dark #services ul.ul-services-card:hover {
  box-shadow: 0 8px 24px rgba(0, 194, 254, 0.18);
}

/* Medailonek hypotečních specialistů — kruhová fotka.
 *
 * Pozor: vendor (primary.min.css) má na fotku
 * `position: absolute; transform: translateX(-50%)` pro horizontální
 * centrování (left:50% + translateX trick). Hover transform proto
 * MUSÍ obsahovat `translate(-50%, -4px)` — bez `-50%` by fotka
 * skočila o 150 px doleva (= polovina šířky obrázku). */
#team ul.ul-team2 > li:first-child img {
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#team ul.ul-team2 > li:first-child img:hover {
  transform: translate(-50%, -4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body.dark #team ul.ul-team2 > li:first-child img:hover {
  box-shadow: 0 8px 24px rgba(0, 194, 254, 0.18);
}

/* Při hover na fotku → zvýrazni jméno a pozici v stejném medailonku.
 * Použito `:has()` (moderní CSS, baseline všech browserů od 2023) —
 * sourozenecký selector by nestačil, protože `<img>` je vnořený
 * v `<li>:first-child` a nemá sourozence na své úrovni. */
#team ul.ul-team2 > li:nth-child(2) h3,
#team ul.ul-team2 > li:nth-child(3) .text {
  transition: color 0.3s ease, transform 0.3s ease;
}
#team ul.ul-team2 > li:nth-child(2) h3 {
  display: inline-block; /* aby transform fungoval */
}
#team ul.ul-team2:has(> li:first-child img:hover) > li:nth-child(2) h3 {
  transform: scale(1.05);
}
#team ul.ul-team2:has(> li:first-child img:hover) > li:nth-child(3) .text {
  color: var(--color-primary);
}

/* === Šipka → na primary CTA tlačítkách =============================
 *
 * Sjednocení s Contact CTAs (Zavolejte/Napište/Domluvit) a Reviews
 * CTA „Napište recenzi", které šipku už mají. Tady doplňujeme:
 *   - „Spočítat splátku" (#calculation Calc CTA)
 *   - „Další články" (.btn-load-more)
 *   - „Zobrazit další recenze" (.reviews-load-more)
 *
 * Použito CSS ::after místo HTML <i>, protože:
 *   - Reviews load-more vendor JS resetuje `textContent` na click
 *     (viz index.html `btn.textContent = "Zobrazit další recenze"`)
 *     a `<i>` element by zmizel.
 *   - Pseudo-element je v CSS a JS ho nemůže přepsat.
 *
 * Codepoint `\e06c` = ph-arrow-right (Phosphor-Light), match
 * existující šipce `.fa-arrow-right` z icons.min.css. */
/* Parent CTA tlačítka přepnuta na inline-flex — automatické vertikální
 * centrování textu i šipky (::after) přes `align-items: center`. Nahrazuje
 * inline-block + vertical-align hack, který je závislý na font metrikách
 * a fontově proměnlivý. Tady je výsledek nezávislý na fontu / line-height. */
.btn-load-more,
#references .reviews-load-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Šipky → na primary CTA tlačítkách napříč webem — SKRYTÉ.
 * Výjimka: `.contact-cta` (Zavolejte / Napište / Domluvit schůzku)
 * v sekci kontakt na homepage. Tam šipky zůstávají dle vendor designu. */
.btn-load-more::after,
#references .reviews-load-more::after,
.div-panel-info-footer a.button > .div-center::after,
.div-send-form a > .div-center::after,
.div-form-cooperation > .div-center::after,
.reviews-cta i.fa-arrow-right,
.ma-content .sidebar-author a::after,
.ma-content .article-author-bio .cta::after,
.ma-content .stats-card .cta::after,
.ma-content .sidebar-cta a::after {
  display: none !important;
}

/* „FORMULÁŘ ZDE" v sekci #cooperation — vendor `<a>` má default
 * browser link color (modrá rgb(0,0,238)), proto pseudoelement
 * `::after` (šipka) byl modrý. Span měl vendor `color: #fff`,
 * ale ::after dědí z `.div-center` ne ze span. Force white na
 * celém linku — šipka i text jsou bílé na zeleném tlačítku. */
#cooperation a[href="#form"] {
  color: #fff;
}

/* Kalkulačka: výsledkový modal. Všechny selektory jsou scoped na #calculate-modal. */
#calculate-modal.div-modal.calculate {
  padding: 24px;
  align-items: center;
  justify-content: center;
}

#calculate-modal .modal-content,
#calculate-modal .modal-content * {
  box-sizing: border-box;
}

#calculate-modal.div-modal.calculate .modal-content {
  width: min(760px, calc(100vw - 48px));
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 48px);
  margin: 0;
  padding: 34px 38px 34px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(3, 22, 36, 0.26);
  position: relative;
  font-weight: 700;
}

#calculate-modal .div-modal-body {
  display: none;
}

#calculate-modal .div-modal-body > .div-center {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
}

#calculate-modal .div-modal-body i {
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

#calculate-modal .div-modal-close {
  width: 42px;
  height: 42px;
  top: 18px;
  right: 18px;
  margin: 0;
  border-radius: 50%;
  background: rgba(3, 22, 36, 0.06);
  transition: background-color 0.2s ease;
}

#calculate-modal .div-modal-close:hover {
  background: rgba(3, 22, 36, 0.1);
}

#calculate-modal .div-modal-close i {
  font-size: 16px;
  line-height: 1;
  color: rgba(3, 22, 36, 0.52);
}

#calculate-modal .calc-result-card {
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

#calculate-modal .calc-result-card[style*="block"] {
  display: flex !important;
}

#calculate-modal .calc-result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 194, 254, 0.1);
  color: #007fa8;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

#calculate-modal .calc-result-title {
  max-width: 640px;
  margin: 16px 56px 0 0;
  color: var(--font-color);
  font-size: 26px;
  line-height: 1.18;
  font-weight: 850;
}

#calculate-modal .calc-result-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px solid rgba(0, 194, 254, 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 194, 254, 0.12), rgba(0, 194, 254, 0.035));
}

#calculate-modal .calc-result-value {
  color: var(--color-primary) !important;
  font-size: clamp(38px, 5.5vw, 56px) !important;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#calculate-modal .calc-result-unit {
  color: var(--color-primary) !important;
  font-size: 22px !important;
  line-height: 1.2;
  font-weight: 800;
  margin-left: 0;
}

#calculate-modal .calc-result-note {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(3, 22, 36, 0.72) !important;
  font-size: 15px !important;
  line-height: 1.55;
  font-weight: 500 !important;
}

#calculate-modal .calc-result-question {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--font-color) !important;
  font-size: 16px !important;
  line-height: 1.45;
  font-weight: 800 !important;
}

#calculate-modal .calc-result-benefits {
  display: grid;
  gap: 9px;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

#calculate-modal .calc-result-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--font-color);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 650;
}

#calculate-modal .calc-result-benefits i.check {
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(34, 187, 51, 0.12);
  color: #2b3;
  font-size: 12px;
  line-height: 1;
}

#calculate-modal .calc-result-benefits span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

#calculate-modal .calc-result-actions {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#calculate-modal .calc-result-actions a {
  display: inline-block;
  width: min(100%, 350px);
  color: #fff;
  text-decoration: none;
}

#calculate-modal .calc-result-actions .div-button {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  background-color: #2b3;
  animation: none !important;
  box-shadow: 0 10px 24px rgba(34, 187, 51, 0.24);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#calculate-modal .calc-result-actions .div-button:hover {
  background-color: #1b9528;
  box-shadow: 0 12px 28px rgba(34, 187, 51, 0.28);
}

#calculate-modal .calc-result-actions .div-button *,
#calculate-modal .calc-result-actions .div-button::before,
#calculate-modal .calc-result-actions .div-button::after,
#calculate-modal .calc-result-actions .div-center::before,
#calculate-modal .calc-result-actions .div-center::after {
  animation: none !important;
}

#calculate-modal .calc-result-actions .div-button span {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: 850;
  white-space: normal;
  text-align: center;
  text-decoration: none;
}

#calculate-modal .calc-result-trust {
  width: min(100%, 350px);
  max-width: 350px;
  margin: 10px 0 0;
  color: rgba(3, 22, 36, 0.58) !important;
  font-size: 12.5px !important;
  line-height: 1.45;
  font-weight: 700 !important;
  text-align: center;
}

body.dark #calculate-modal.div-modal.calculate .modal-content {
  background: var(--background-color2);
  box-shadow: 0 26px 80px rgba(0, 194, 254, 0.14);
}

body.dark #calculate-modal .div-modal-close {
  background: rgba(255, 255, 255, 0.08);
}

body.dark #calculate-modal .div-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

body.dark #calculate-modal .div-modal-close i {
  color: rgba(255, 255, 255, 0.72);
}

body.dark #calculate-modal .calc-result-badge {
  background: rgba(0, 194, 254, 0.14);
  color: #7cddff;
}

body.dark #calculate-modal .calc-result-title,
body.dark #calculate-modal .calc-result-question,
body.dark #calculate-modal .calc-result-benefits li {
  color: var(--font-color2) !important;
}

body.dark #calculate-modal .calc-result-box {
  border-color: rgba(0, 194, 254, 0.24);
  background: linear-gradient(135deg, rgba(0, 194, 254, 0.16), rgba(0, 194, 254, 0.055));
}

body.dark #calculate-modal .calc-result-note {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.dark #calculate-modal .calc-result-benefits i.check {
  background: rgba(34, 187, 51, 0.16);
  color: #5ee06b;
}

body.dark #calculate-modal .calc-result-trust {
  color: rgba(255, 255, 255, 0.62) !important;
}

@media (max-width: 575.98px) {
  #calculate-modal.div-modal.calculate {
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
  }

  #calculate-modal.div-modal.calculate .modal-content {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px 0;
    padding: 22px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 24px;
  }

  #calculate-modal .div-modal-body {
    display: none;
  }

  #calculate-modal .div-modal-body > .div-center {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  #calculate-modal .div-modal-body i {
    font-size: 18px;
  }

  #calculate-modal .div-modal-close {
    width: 40px;
    height: 40px;
    top: 14px;
    right: 14px;
  }

  #calculate-modal .calc-result-badge {
    max-width: calc(100% - 50px);
    min-height: 28px;
    padding: 6px 10px;
    font-size: 10px;
  }

  #calculate-modal .calc-result-title {
    margin: 16px 46px 0 0;
    font-size: 22px;
    line-height: 1.22;
  }

  #calculate-modal .calc-result-box {
    margin-top: 16px;
    padding: 18px;
    border-radius: 18px;
  }

  #calculate-modal .calc-result-value {
    font-size: clamp(32px, 10vw, 40px) !important;
  }

  #calculate-modal .calc-result-unit {
    font-size: 17px !important;
  }

  #calculate-modal .calc-result-note {
    margin-top: 16px;
    font-size: 14px !important;
  }

  #calculate-modal .calc-result-question {
    font-size: 15px !important;
  }

  #calculate-modal .calc-result-benefits {
    margin-top: 18px;
  }

  #calculate-modal .calc-result-benefits li {
    font-size: 14px;
  }

  #calculate-modal .calc-result-actions {
    margin-top: 22px;
  }

  #calculate-modal .calc-result-actions a {
    width: 100%;
    max-width: 340px;
    text-decoration: none;
  }

  #calculate-modal .calc-result-actions .div-button {
    height: 56px;
  }

  #calculate-modal .calc-result-actions .div-button span {
    font-size: 14px !important;
  }

  #calculate-modal .calc-result-trust {
    width: 100%;
    max-width: 340px;
    font-size: 12.5px !important;
  }
}