/* ============================================================
   ENTANGLE – Frontend Survey Styles
   ============================================================
   Architektura:
     1. Utility třídy          (u-*, is-*)
     2. Kořenový kontejner     (.entangle-container)
     3. Layout & grid          (.row, .col-*)
     4. Typografie             (h2, h3, p uvnitř .entangle-container)
     5. Strukturní komponenty  (uvod, form-group, verification)
     6. Tabulka / matice       (.custom-table, matrix-*)
     7. Vstupní prvky          (checkbox, radio, range, select)
     8. Importance-Satisfaction widget
     9. Stavové třídy          (.error-message, .blue-message, atd.)
    10. Responzivita           (@media)
   ============================================================ */


/* ============================================================
   0. DESIGN TOKENS – výchozí barvy pluginu
   Šablona je může přepsat přes :root, nastavení pluginu přes inline style.
   ============================================================ */

/* ── Plugin fallback colors ────────────────────────────
   Theme defines these variables on :root or body.
   Plugin sets them here as fallbacks — theme values take precedence
   because :root has lower specificity than theme's selectors,
   and if theme sets them on :root too, its stylesheet loads after. */
:root {
  --color-primary: #2271b1;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e0e0e0;
  --color-neutral-300: #ccc;
  --color-base: #222;
  --color-contrast: #fff;
  --border-radius: 0.5rem;
}

.entangle-container__holder,
.entangle-map-modal {

  /* ── Typografická škála (major-third 1.25) ── */
  --font-xs:   0.8125rem;  /* 13px  – meta, hinty */
  --font-sm:   0.875rem;   /* 14px  – popisky, tabulky */
  --font-base: 1rem;       /* 16px  – tělo textu, inputy */
  --font-md:   1.125rem;   /* 18px  – podnadpisy widget */
  --font-lg:   1.25rem;    /* 20px  – h3 otázky */
  --font-xl:   1.5rem;     /* 24px  – h2 sekce */
  --font-2xl:  2rem;       /* 32px  – h2 intro (slider) */
  --line-height-tight: 1.2;
  --line-height-base:  1.5;

  /* ── Spacing škála (8px grid) ── */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
}


/* ============================================================
   0b. BODY – single survey stránka
   ============================================================ */

body.single-survey {
  background-color: #f5f5f5;
  background-color: var(--color-neutral-100);
}

/* ============================================================
   1. UTILITY TŘÍDY
   ============================================================ */

/* Stavová třída – JS ji přidává/odebírá pro show/hide */
.is-hidden { display: none; }

/* Screen-reader only — viditelné pouze pro asistivní technologie */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Jednorázové layout utility */
.u-float-right   { float: right; }
.u-mx-auto       { margin: auto; }
.u-w-60-mx-auto  { width: 60%; margin: auto; }      /* carousel verification-box */
.verification-slide-box { width: 100%; margin: auto; } /* full-width verification in slider */

/* Rozměry */
.u-w-80          { width: 80px; }                   /* th, td v matici */
.u-max-w-30      { max-width: 30px; }               /* col-1 wrapper u checkbox/radio */

/* Spacing */
.u-mt-50         { margin-top: 50px; }              /* verification-box horní odsazení */
.u-mb-0-p-answer { margin: 0 0 15px 0; }           /* popisek limitu odpovědí */
.u-mb-20         { margin-bottom: 20px; }           /* matrix-mobile sekce */
.u-mb-25-hidden  { margin-bottom: 25px; display: none; } /* extended-answer-input */

/* Matice – buňka a reset inputu */
.u-cell-pad      { padding: 10px 20px; }            /* custom-radio div uvnitř td */
.u-input-reset   { margin-left: 0; padding-left: 0; } /* matrix radio/checkbox input */


/* ============================================================
   2. KOŘENOVÝ KONTEJNER
   ============================================================ */

.entangle-container {
  max-width: var(--responsive--aligndefault-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  padding: var(--space-8) var(--space-4);
}

.entangle-container tfoot { display: none; }


/* ============================================================
   3. LAYOUT & GRID
   (Lightweight náhrada Bootstrap gridu uvnitř .entangle-container)
   ============================================================ */

.entangle-container .row,
.entangle-container .asq-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.entangle-container [class*="col-"] {
  padding: 0;
}

.entangle-container .col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.entangle-container .col-6  { flex: 0 0 50%;     max-width: 50%; }
.entangle-container .col-11 { flex: 0 0 91.667%; max-width: 91.667%; }
.entangle-container .col-12 { flex: 0 0 100%;    max-width: 100%; }

/* Responzivní sloupce – přepisují col-12 na ≥768px */
@media (min-width: 768px) {
  .entangle-container .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .entangle-container .col-md-6 { flex: 0 0 50%;     max-width: 50%; }
  .entangle-container .col-md-8 { flex: 0 0 66.667%; max-width: 66.667%; }
}

/* Sloupce pro starší .col-lg-2 / .col-lg-10 breakpointové přepsání – viz @media */
.entangle-container .col-lg-2.col-2 {
  flex: 0 0 16.667%;
  max-width: 16.667%;
}


/* ============================================================
   4. TYPOGRAFIE
   ============================================================ */

/* Základní velikost a barva textu */
.entangle-container {
  font-size: var(--font-base);
  line-height: var(--line-height-base);
  color: var(--color-base);
}

/* Nadpisy */
.entangle-container h2 {
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-base);
  margin: 0 0 var(--space-4) 0;
}

.entangle-container h3 {
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-base);
  margin: 0 0 var(--space-3) 0;
}

.entangle-container h4 {
  font-size: var(--font-md);
  font-weight: 600;
  line-height: var(--line-height-tight);
  color: var(--color-base);
  margin: 0 0 var(--space-2) 0;
}

/* Sekční nadpis nad otázkou */
.nadpis-nad-otazkou {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--color-neutral-300);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Odstavcový text */
.entangle-container .questions-card p {
  font-size: var(--font-sm);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-3) 0;
}

.required-question { color: #ff0000; }


/* ============================================================
   5. STRUKTURNÍ KOMPONENTY
   ============================================================ */

/* --- Karty / wrapper --- */
.questions-card {
  max-width: 800px;
  margin: 0 auto;
}

/* --- Úvodní sekce --- */
.entangle-container-uvod {
  margin-bottom: var(--space-8);
}

.entangle-container-uvod-wrapper {
  font-size: var(--font-base);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-300);
  padding-bottom: var(--space-8);
}

.entangle-container-uvod-wrapper h2 {
  font-size: var(--font-2xl);
  padding-bottom: var(--space-1);
}

/* --- Otázky --- */
.form-group {
  margin-bottom: var(--space-8);
}

.form-group p {
  padding-bottom: var(--space-3);
}

/* --- Verification box --- */
.verification-box {
  gap: var(--space-5);
  padding: 0;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  flex-wrap: wrap;
}

.verification-box .col-md-6 {
  flex: 1 1 220px;
  max-width: 100%;
  width: auto;
}
#verify_email,
#verify_sms,
#pin_code {
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.submit_verify {
  background-color: var(--color-primary) !important;
  padding: var(--space-2) var(--space-4);
  color: var(--color-contrast, #fff);
}

/* Disabled stav – opravena nekonzistence: bylo .submit-verify (pomlčka) */
.submit_verify:disabled,
.submit_verify[disabled] {
  color: lightgrey;
}

.submit_verify_full-col {
  display: block;
  margin: 0 auto;
}

#sendpin {
  background-color: var(--color-primary) !important;
  color: var(--color-contrast, #fff) !important;
  padding: var(--space-2) var(--space-4);
}


/* ============================================================
   5b. VERIFICATION WIZARD (2-step email/SMS flow)
   ============================================================ */

.verification-wizard {
  max-width: 400px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.verify-heading {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.verify-info-text {
  font-size: var(--font-sm);
  color: #555;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-base);
}

.entangle-container .gdpr-consent-wrap.custom-checkbox {
  margin: var(--space-5) 0 var(--space-5) auto;
  width: fit-content;
}

.entangle-container .gdpr-consent-wrap .custom-control-label {
  width: auto;
}

.gdpr-consent-wrap .col-11 p {
  display: inline;
  margin: 0;
}

.gdpr-error-message {
  color: #dc3545;
  font-size: var(--font-xs);
  margin-top: var(--space-1);
  padding-left: var(--space-2);
}

.verify-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-base);
  background-color: #fff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  margin-bottom: var(--space-2);
  transition: border-color 0.15s ease;
}

.verify-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* intl-tel-input overrides for phone input */
.verification-wizard .iti {
  display: block;
  width: 100%;
  margin-bottom: var(--space-2);
}

.verification-wizard .iti .verify-phone-input {
  margin-bottom: 0;
  padding-left: 110px !important;
  letter-spacing: 1.5px;
}

.verification-wizard .iti__country-container {
  border-right: 1px solid var(--color-neutral-300);
}

.verification-wizard .iti__selected-country-primary {
  padding: 0 8px;
  background: #f8f8f8;
  border-radius: 6px 0 0 6px;
}

.verification-wizard .iti__selected-dial-code {
  font-size: var(--font-sm);
  color: #444;
  padding-left: var(--space-1);
}

.verification-wizard .iti--separate-dial-code .iti__selected-country-primary:hover,
.verification-wizard .iti--separate-dial-code .iti__selected-country-primary:focus {
  background: #eee;
}

.verify-hint {
  font-size: var(--font-xs);
  color: #666;
  margin: 0 0 var(--space-4) 0;
  padding: 0;
}

.verify-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  font-size: var(--font-base);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.verify-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.verify-spinner {
  width: 20px;
  height: 20px;
}

/* OTP digit inputs */
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: var(--font-xl);
  font-weight: 700;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  outline: none;
  transition: border-color 0.15s ease;
  padding: 0;
  box-sizing: border-box;
  color: var(--color-base);
  background: #fff;
}

.otp-digit:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(41, 134, 204, 0.2);
}

/* Sent-to text */
.verify-sent-to {
  font-size: var(--font-sm);
  color: #444;
  margin-bottom: var(--space-2);
  padding: 0;
}

.verify-change-contact {
  font-size: var(--font-xs);
  margin-left: var(--space-2);
  color: var(--color-primary);
  text-decoration: underline;
  background-image: none !important;
}

/* Resend link and countdown */
.verify-resend {
  font-size: var(--font-xs);
  color: #666;
  margin-top: var(--space-4);
  padding: 0;
}

.verify-resend-link {
  color: var(--color-primary);
  background-image: none !important;
}

.verify-resend-countdown {
  color: #999;
}

/* Alert area inside wizard */
.verify-alert-area .alert {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-sm);
}

.verify-alert-area .alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.verify-alert-area .alert-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Success confirmation step */
.verify-done-alert {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-base);
}

/* Responsive: smaller OTP boxes on mobile */
@media (max-width: 480px) {
  .otp-digit {
    width: 40px;
    height: 48px;
    font-size: 20px;
  }

  .otp-inputs {
    gap: 5px;
  }

  .verification-wizard {
    max-width: 100%;
  }
}


/* --- Carousel tlačítka --- */
.custom-carousel-button {
    position: static !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    color: #fff !important;
    background-color: #32373c !important;
    background-color: var(--color-primary) !important;
    border: none !important;
    padding: var(--space-2) var(--space-5) !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer;
    display: inline-block;
}
.custom-carousel-button:hover {
    opacity: 1 !important;
    background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)) !important;
}
.custom-carousel-button:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(41, 134, 204, 0.3);
}

.entangle-container .send-form {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border: none !important;
    padding: var(--space-2) var(--space-5) !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer;
    display: inline-block;
    font-size: inherit !important;
    line-height: inherit !important;
}
.entangle-container .send-form:hover {
    background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)) !important;
}
.send-form:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Progress bar --- */
.entangle-container .progress {
    background-color: var(--color-neutral-200);
    --bs-progress-bar-bg: var(--color-primary);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.entangle-container .progress-bar {
    height: 100%;
    background-color: var(--color-primary) !important;
}

/* --- Carousel navigace (řádek pod slides) --- */
.entangle-container .carousel-nav {
    margin-top: var(--space-6);
}

/* Pravý sloupec navigace – tlačítka zarovnat doprava, ve stejné výšce jako Zpět */
.entangle-container .carousel-nav .col-6:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Odeslat – stejná velikost jako .custom-carousel-button (Zpět/Další) */
.entangle-container .carousel-nav #sendForm:hover {
    background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)) !important;
}
.entangle-container .carousel-nav #sendForm {
    margin-top: 0 !important;
    padding: var(--space-2) var(--space-5) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    min-height: unset !important;
    height: auto !important;
    border-radius: var(--border-radius) !important;
    background-color: #32373c !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* --- Carousel intro slide (default-slide) – styl jako entangle-container-uvod --- */
.entangle-container .carousel-item.default-slide {
    border-bottom: 1px solid var(--color-neutral-300);
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-4);
}

.entangle-container .carousel-item.default-slide h2 {
    font-size: var(--font-2xl);
    padding-bottom: var(--space-1);
}


/* ============================================================
   6b. MATICE – DESKTOPOVÉ INPUTY
   Struktura: td > label > div.custom-radio/checkbox > input
   Inputy nejsou v .col-1, nesměji dostat karet. styl
   ============================================================ */

/* Label v tabulkové buňce – jen centrování, žádná karta */
/* Wrapper div uvnitř buňky */
.custom-table .custom-control {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* Matice – checkbox */
.custom-table input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin: 0;
  position: relative;
  flex-shrink: 0;
}

.custom-table input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5,5 4.5,8 10.5,1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Matice – radio */
.custom-table input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #bbb;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin: 0;
  position: relative;
  flex-shrink: 0;
}

.custom-table input[type="radio"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.5' fill='%23fff'/%3E%3C/svg%3E") center / 8px no-repeat;
}

.table-responsive {
  padding: 0;
}

.entangle-container .row > .matrix-radio-desktop,
.entangle-container .row > .matrix-checkbox-desktop {
  padding-left: 0;
  padding-right: 0;
}

.custom-table {
  border-collapse: separate !important;
  border-spacing: 0;
  table-layout: fixed;
}

/* Sloupec s výrokem je široký; sloupce s odpověďmi si rovnoměrně rozdělí zbytek
   (funguje pro libovolný počet sloupců). Přebíjí u-w-80 (80px) z markupu. */
.custom-table th:first-child,
.custom-table td:first-child { width: 42%; }
.custom-table th:not(:first-child),
.custom-table td:not(:first-child) { width: auto; }

.custom-table thead th {
  border: 0 !important;
  border-bottom: 1px solid black;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  font-size: var(--font-xs);
  line-height: var(--line-height-tight);
}

.custom-table thead th:first-child {
  border-right: 1px solid black;
  text-align: left;
}

.custom-table tbody tr:hover {
  background: none;
}

.custom-table tbody td {
  border-right: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--color-neutral-300);
}

.custom-table tbody td:first-child {
  border-left: none;
  border-right: 1px solid black;
  padding: 0 12px;
}

/* Lepivý první sloupec – background theme barva */
.custom-table tbody .sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 15px 12px 15px 12px !important;
  border-bottom: 1px solid var(--color-neutral-300);
  font-size: var(--font-xs);
  line-height: var(--line-height-tight);
  text-align: left;
  background-color: #f5f5f5;
  background-color: var(--color-neutral-100);
}

/* Label zabírá celou plochu buňky vč. paddingu */
.custom-table td .custom-control-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 15px 20px !important;
  cursor: pointer;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
  line-height: 1;
}

.custom-table td .custom-control-label:hover {
  background: none !important;
}

/* Hover pouze na klikatelné buňce */
.matrix-cell {
  cursor: pointer;
}

.matrix-cell:hover {
  background: var(--color-neutral-200);
}

.custom-table tfoot { display: none; }

/* --- Matice – desktop / mobile přepínání --- */
.matrix-radio-desktop,
.matrix-checkbox-desktop { display: block; }

.matrix-radio-mobile,
.matrix-checkbox-mobile  { display: none; }

.matrix-checkbox-mobile {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Mobile matrix layout --- */
.entangle-container .matrix-radio-mobile .row,
.entangle-container .matrix-checkbox-mobile .row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
}

/* --- Pomocné třídy matice --- */
.matrix-border {
  border-bottom: 1px solid #999;
  margin-bottom: 5px;
}

.matrix-name {
  font-size: var(--font-xs);
  margin-bottom: var(--space-2);
}

.matrix-columns p { float: left; } /* opraveno: bylo "matrix-columns p" bez tečky */


/* ============================================================
   7. VSTUPNÍ PRVKY
   ============================================================ */

.entangle-container input[type="checkbox"],
.entangle-container input[type="radio"] {
  margin: 0;
}

/* --- Radio – stejný styl jako checkbox karta --- */
.entangle-container .custom-radio {
  display: block;
  width: 100%;
  padding-left: 0;
  margin-bottom: var(--space-2);
}

.entangle-container .custom-radio .custom-control-label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 11px 14px 11px 10px;
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
  margin: 0;
  line-height: 1.1;
}

.entangle-container .custom-radio .custom-control-label:hover {
  background: var(--color-contrast);
}

.entangle-container .custom-radio .custom-control-label:has(input:checked) {
  background: hsla(0, 0%, 100%, 0.5);
}

/* Nativní radio – nastylován přímo */
.entangle-container .custom-radio .col-1 input[type="radio"],
.entangle-container .custom-radio label .col-1 input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #bbb;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin: 0;
  position: relative;
}

/* Checked – modrý kruh s bílou tečkou uprostřed */
.entangle-container .custom-radio .col-1 input[type="radio"]:checked,
.entangle-container .custom-radio label .col-1 input[type="radio"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.entangle-container .custom-radio .col-1 input[type="radio"]:checked::after,
.entangle-container .custom-radio label .col-1 input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.5' fill='%23fff'/%3E%3C/svg%3E") center / 8px no-repeat;
}

/* .col-11 fills remaining space, reset Bootstrap row gutter padding */
.entangle-container .custom-radio .custom-control-label .col-11,
.entangle-container .custom-checkbox .custom-control-label .col-11 {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* .col-1 wrapper */
.entangle-container .custom-radio .col-1,
.entangle-container .custom-radio label .col-1 {
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 8px;
  min-width: 30px;
  max-width: 30px;
  flex: 0 0 30px;
}

/* --- Focus-visible indikátory pro keyboard navigaci --- */
.entangle-container .custom-radio .col-1 input[type="radio"]:focus-visible,
.entangle-container .custom-radio label .col-1 input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.entangle-container .custom-checkbox .col-1 input[type="checkbox"]:focus-visible,
.entangle-container .custom-checkbox label .col-1 input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.custom-table input[type="radio"]:focus-visible,
.custom-table input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.importance-radio:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Range slider ---
   Gradient na tracku se aktualizuje přes JS:
   el.style.background = `linear-gradient(to right, var(--color-primary)
     ${pct}%, #ddd ${pct}%)` */
.entangle-range {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  margin-bottom: 32px !important;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--color-primary) 50%, #ddd 50%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

/* Popisky na koncích škály (např. „nejhorší“ … „nejlepší“) */
.entangle-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  /* -10px keeps the labels close under the track but clear of the 24px thumb,
     which overflows ~9px below the 6px track (was -26px → overlapped the thumb). */
  margin-top: -10px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #666;
}

.entangle-range-label-from { text-align: left; }
.entangle-range-label-to   { text-align: right; }

/* Číselný vstup vedle range slideru – fixní max šířka */
.entangle-range-value {
  width: auto !important;
  max-width: 200px !important;
  text-align: center;
}

/* Thumb – Chrome / Safari / Edge */
.entangle-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* Thumb – Firefox */
.entangle-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* Track + progress – Firefox */
.entangle-range::-moz-range-track {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}

.entangle-range::-moz-range-progress {
  height: 6px;
  background: var(--color-primary);
  border-radius: 3px;
}

.entangle-range:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skupiny checkboxů a radiobuttonů */

/* --- Checkbox – celý řádek jako klikatelná karta ---
   Struktura v HTML:
   <div class="custom-control custom-checkbox">
     <label class="custom-control-label row" for="...">
       <div class="col-1">
         <input type="checkbox" class="custom-control-input">
       </div>
       <div class="col-11">Text</div>
     </label>
   </div>                                                    */

.entangle-container .custom-checkbox {
  display: block;
  width: 100%;
  padding-left: 0;
  margin-bottom: var(--space-2);
}

/* Celý label = klikatelná karta */
.entangle-container .custom-checkbox .custom-control-label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 11px 14px 11px 10px;
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
  margin: 0;
  line-height: 1.1;
}

.entangle-container .custom-checkbox .custom-control-label:hover {
  background: var(--color-contrast);
}

/* Checked stav – label se zvýrazní */
.entangle-container .custom-checkbox .custom-control-label:has(input:checked) {
  border-color: var(--color-primary);
}

/* Nativní checkbox – nastylován přímo */
.entangle-container .custom-checkbox .col-1 input[type="checkbox"],
.entangle-container .custom-checkbox label .col-1 input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin: 0;
  position: relative;
}

.entangle-container .custom-checkbox .col-1 input[type="checkbox"]:checked,
.entangle-container .custom-checkbox label .col-1 input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Fajfka přes ::after */
.entangle-container .custom-checkbox .col-1 input[type="checkbox"]:checked::after,
.entangle-container .custom-checkbox label .col-1 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5,5 4.5,8 10.5,1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* .col-1 wrapper – odsazení checkboxu od levého okraje */
.entangle-container .custom-checkbox .col-1,
.entangle-container .custom-checkbox label .col-1 {
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 8px;
  min-width: 30px;
  max-width: 30px;
  flex: 0 0 30px;
}

.entangle-container .extended-answer-input {
  margin-top: var(--space-2);
}

/* --- Select --- */
.entangle-container select {
  display: block;
  width: 100%;
  padding: var(--space-2) 40px var(--space-2) var(--space-4);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-base);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.entangle-container select:hover {
  border-color: #999;
}

.entangle-container select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

.entangle-container select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

/* --- Input text --- */
.entangle-container input[type="text"],
.entangle-container input[type="email"],
.entangle-container input[type="tel"],
.entangle-container input[type="number"] {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-base);
  background-color: #fff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.entangle-container input[type="text"]:hover,
.entangle-container input[type="email"]:hover,
.entangle-container input[type="tel"]:hover,
.entangle-container input[type="number"]:hover {
  border-color: #999;
}

.entangle-container input[type="text"]:focus,
.entangle-container input[type="email"]:focus,
.entangle-container input[type="tel"]:focus,
.entangle-container input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

/* --- Textarea --- */
.entangle-container textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-base);
  background-color: #fff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.entangle-container textarea:hover {
  border-color: #999;
}

.entangle-container textarea:focus,
.entangle-container textarea.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}


/* ============================================================
   8. IMPORTANCE-SATISFACTION WIDGET
   ============================================================ */

/* Importance + Satisfaction – flexbox layout s fixní mezerou */
.imp-sat-container {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

@media (max-width: 600px) {
  .imp-sat-container {
    flex-direction: column;
    gap: 20px;
  }
}

/* --- Důležitost --- */
.importance-heading {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: var(--space-5);
  padding-top: var(--space-5);
}

.importance-container {
  display: inline-block;
}

/* Skrytý nativní radio – sr-only pozicí (čitelný pro screen reader) */
.importance-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.importance-radio + label {
  display: inline-block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  vertical-align: middle;
  margin: -1px var(--space-1) 0 0;
  padding-left: 0 !important;
  font-size: var(--font-sm);
  color: #333;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  cursor: pointer;
}

.importance-radio:hover + label {
  background: rgba(0, 0, 0, 0.13);
}

.importance-radio[waschecked="true"] + label,
.importance-radio[waschecked="true"]:hover + label {
  background: #000;
  color: #fff;
}

/* --- Spokojenost --- */
.satisfaction-heading {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: var(--space-5);
  padding-top: var(--space-5);
}

.satisfaction-container {
  display: inline-block;
}

.satisfaction-container input[type="radio"] {
  -webkit-appearance: none;
  width: 42px !important;
  height: 42px !important;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  transition: all 0.2s ease;
}

.satisfaction-container input[type="radio"]:focus {
  outline: none;
}

.satisfaction-container input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 50%;
}

.satisfaction-container input[type="radio"]:after {
  display: none;
}

/* Emoji ikony – výchozí (šedá), hover a waschecked="true" (barevná) */
/* totally_sad */
.satisfaction-container input[type="radio"].totally_sad {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.402 0 0 9.40202 0 21C0 32.598 9.402 42 21 42Z' fill='black' fill-opacity='0.08'/%3E%3Cpath d='M15.1039 17.5509C16.2476 16.4072 16.2476 14.5528 15.1039 13.4091C13.9601 12.2653 12.1058 12.2653 10.962 13.4091C9.81829 14.5528 9.81829 16.4072 10.962 17.5509C12.1058 18.6946 13.9601 18.6946 15.1039 17.5509Z' fill='%2305364A'/%3E%3Cpath d='M31.785 16.3241C32.2538 14.776 31.3788 13.141 29.8307 12.6722C28.2826 12.2035 26.6476 13.0785 26.1788 14.6266C25.7101 16.1747 26.5851 17.8097 28.1332 18.2784C29.6813 18.7472 31.3163 17.8722 31.785 16.3241Z' fill='%2305364A'/%3E%3Cpath d='M30.2772 29.608C30.2555 29.5646 30.2338 29.5212 30.1904 29.4562C28.1729 26.2888 24.7451 24.4014 20.992 24.4014C17.2389 24.4014 13.8112 26.2888 11.7936 29.4562C11.7719 29.4996 11.7285 29.5429 11.7068 29.608C11.0777 30.8229 12.0105 32.2764 13.3773 32.2764H28.585C29.9735 32.2764 30.9281 30.8229 30.2772 29.608Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}
.satisfaction-container input[type="radio"].totally_sad:hover,
.satisfaction-container input[type="radio"].totally_sad[waschecked="true"] {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.402 0 0 9.40202 0 21C0 32.598 9.402 42 21 42Z' fill='%23E01F25'/%3E%3Cpath d='M15.1039 17.5509C16.2476 16.4072 16.2476 14.5528 15.1039 13.4091C13.9601 12.2653 12.1058 12.2653 10.962 13.4091C9.81829 14.5528 9.81829 16.4072 10.962 17.5509C12.1058 18.6946 13.9601 18.6946 15.1039 17.5509Z' fill='%2305364A'/%3E%3Cpath d='M31.785 16.3241C32.2538 14.776 31.3788 13.141 29.8307 12.6722C28.2826 12.2035 26.6476 13.0785 26.1788 14.6266C25.7101 16.1747 26.5851 17.8097 28.1332 18.2784C29.6813 18.7472 31.3163 17.8722 31.785 16.3241Z' fill='%2305364A'/%3E%3Cpath d='M30.2772 29.608C30.2555 29.5646 30.2338 29.5212 30.1904 29.4562C28.1729 26.2888 24.7451 24.4014 20.992 24.4014C17.2389 24.4014 13.8112 26.2888 11.7936 29.4562C11.7719 29.4996 11.7285 29.5429 11.7068 29.608C11.0777 30.8229 12.0105 32.2764 13.3773 32.2764H28.585C29.9735 32.2764 30.9281 30.8229 30.2772 29.608Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}

/* sad */
.satisfaction-container input[type="radio"].sad {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='black' fill-opacity='0.08'/%3E%3Cpath d='M15.1034 17.5519C16.2471 16.4081 16.2471 14.5538 15.1034 13.41C13.9596 12.2663 12.1053 12.2663 10.9615 13.41C9.81781 14.5538 9.81781 16.4081 10.9615 17.5519C12.1053 18.6956 13.9596 18.6956 15.1034 17.5519Z' fill='%2305364A'/%3E%3Cpath d='M31.2392 17.3594C32.2752 16.1171 32.108 14.2703 30.8657 13.2342C29.6235 12.1982 27.7766 12.3654 26.7406 13.6077C25.7046 14.8499 25.8718 16.6968 27.114 17.7328C28.3563 18.7688 30.2032 18.6016 31.2392 17.3594Z' fill='%2305364A'/%3E%3Cpath d='M28.4775 32.5844C27.805 32.5844 27.1541 32.2589 26.7636 31.6515C25.5054 29.6556 23.3359 28.4841 20.9929 28.4841C18.6499 28.4841 16.4805 29.6773 15.2222 31.6515C14.6148 32.606 13.3565 32.8881 12.4236 32.2806C11.4691 31.6732 11.187 30.4149 11.7945 29.482C13.8121 26.3147 17.2398 24.4272 20.9929 24.4272C24.746 24.4272 28.1738 26.3147 30.1913 29.482C30.7988 30.4366 30.5168 31.6949 29.5622 32.2806C29.2368 32.4976 28.8463 32.5844 28.4775 32.5844Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}
.satisfaction-container input[type="radio"].sad:hover,
.satisfaction-container input[type="radio"].sad[waschecked="true"] {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='%23F15A29'/%3E%3Cpath d='M15.1034 17.5519C16.2471 16.4081 16.2471 14.5538 15.1034 13.41C13.9596 12.2663 12.1053 12.2663 10.9615 13.41C9.81781 14.5538 9.81781 16.4081 10.9615 17.5519C12.1053 18.6956 13.9596 18.6956 15.1034 17.5519Z' fill='%2305364A'/%3E%3Cpath d='M31.2392 17.3594C32.2752 16.1171 32.108 14.2703 30.8657 13.2342C29.6235 12.1982 27.7766 12.3654 26.7406 13.6077C25.7046 14.8499 25.8718 16.6968 27.114 17.7328C28.3563 18.7688 30.2032 18.6016 31.2392 17.3594Z' fill='%2305364A'/%3E%3Cpath d='M28.4775 32.5844C27.805 32.5844 27.1541 32.2589 26.7636 31.6515C25.5054 29.6556 23.3359 28.4841 20.9929 28.4841C18.6499 28.4841 16.4805 29.6773 15.2222 31.6515C14.6148 32.606 13.3565 32.8881 12.4236 32.2806C11.4691 31.6732 11.187 30.4149 11.7945 29.482C13.8121 26.3147 17.2398 24.4272 20.9929 24.4272C24.746 24.4272 28.1738 26.3147 30.1913 29.482C30.7988 30.4366 30.5168 31.6949 29.5622 32.2806C29.2368 32.4976 28.8463 32.5844 28.4775 32.5844Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}

/* happy */
.satisfaction-container input[type="radio"].happy {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='black' fill-opacity='0.08'/%3E%3Cpath d='M13.0118 18.4239C14.6293 18.4239 15.9405 17.1127 15.9405 15.4952C15.9405 13.8777 14.6293 12.5664 13.0118 12.5664C11.3943 12.5664 10.083 13.8777 10.083 15.4952C10.083 17.1127 11.3943 18.4239 13.0118 18.4239Z' fill='%2305364A'/%3E%3Cpath d='M28.9571 18.4239C30.5746 18.4239 31.8858 17.1127 31.8858 15.4952C31.8858 13.8777 30.5746 12.5664 28.9571 12.5664C27.3396 12.5664 26.0283 13.8777 26.0283 15.4952C26.0283 17.1127 27.3396 18.4239 28.9571 18.4239Z' fill='%2305364A'/%3E%3Cpath d='M20.9954 32.5902C17.2422 32.5902 13.8145 30.7028 11.7969 27.5354C11.1895 26.5809 11.4715 25.3226 12.4261 24.7369C13.3806 24.1294 14.6389 24.4114 15.2246 25.366C16.4829 27.3619 18.6524 28.5334 20.9954 28.5334C23.3384 28.5334 25.5078 27.3402 26.7661 25.366C27.3735 24.4114 28.6318 24.1294 29.5647 24.7369C30.5192 25.3443 30.8012 26.6026 30.1938 27.5354C28.1762 30.7028 24.7485 32.5902 20.9954 32.5902Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}
.satisfaction-container input[type="radio"].happy:hover,
.satisfaction-container input[type="radio"].happy[waschecked="true"] {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='%2391CA60'/%3E%3Cpath d='M13.0118 18.4239C14.6293 18.4239 15.9405 17.1127 15.9405 15.4952C15.9405 13.8777 14.6293 12.5664 13.0118 12.5664C11.3943 12.5664 10.083 13.8777 10.083 15.4952C10.083 17.1127 11.3943 18.4239 13.0118 18.4239Z' fill='%2305364A'/%3E%3Cpath d='M28.9571 18.4239C30.5746 18.4239 31.8858 17.1127 31.8858 15.4952C31.8858 13.8777 30.5746 12.5664 28.9571 12.5664C27.3396 12.5664 26.0283 13.8777 26.0283 15.4952C26.0283 17.1127 27.3396 18.4239 28.9571 18.4239Z' fill='%2305364A'/%3E%3Cpath d='M20.9954 32.5902C17.2422 32.5902 13.8145 30.7028 11.7969 27.5354C11.1895 26.5809 11.4715 25.3226 12.4261 24.7369C13.3806 24.1294 14.6389 24.4114 15.2246 25.366C16.4829 27.3619 18.6524 28.5334 20.9954 28.5334C23.3384 28.5334 25.5078 27.3402 26.7661 25.366C27.3735 24.4114 28.6318 24.1294 29.5647 24.7369C30.5192 25.3443 30.8012 26.6026 30.1938 27.5354C28.1762 30.7028 24.7485 32.5902 20.9954 32.5902Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}

/* totally_happy */
.satisfaction-container input[type="radio"].totally_happy {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='black' fill-opacity='0.08'/%3E%3Cpath d='M13.0122 18.4273C14.6297 18.4273 15.941 17.1161 15.941 15.4986C15.941 13.8811 14.6297 12.5698 13.0122 12.5698C11.3947 12.5698 10.0835 13.8811 10.0835 15.4986C10.0835 17.1161 11.3947 18.4273 13.0122 18.4273Z' fill='%2305364A'/%3E%3Cpath d='M28.9576 18.4273C30.5751 18.4273 31.8863 17.1161 31.8863 15.4986C31.8863 13.8811 30.5751 12.5698 28.9576 12.5698C27.3401 12.5698 26.0288 13.8811 26.0288 15.4986C26.0288 17.1161 27.3401 18.4273 28.9576 18.4273Z' fill='%2305364A'/%3E%3Cpath d='M28.5889 24.7402H13.3811C12.0143 24.7402 11.0598 26.1938 11.7106 27.4086C11.7323 27.452 11.754 27.4954 11.7974 27.5605C13.815 30.7279 17.2427 32.6153 20.9958 32.6153C24.749 32.6153 28.1767 30.7279 30.1943 27.5605C30.216 27.5171 30.2594 27.4737 30.281 27.4086C30.9102 26.1938 29.9556 24.7402 28.5889 24.7402Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}
.satisfaction-container input[type="radio"].totally_happy:hover,
.satisfaction-container input[type="radio"].totally_happy[waschecked="true"] {
  background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42Z' fill='%2339B54A'/%3E%3Cpath d='M13.0122 18.4273C14.6297 18.4273 15.941 17.1161 15.941 15.4986C15.941 13.8811 14.6297 12.5698 13.0122 12.5698C11.3947 12.5698 10.0835 13.8811 10.0835 15.4986C10.0835 17.1161 11.3947 18.4273 13.0122 18.4273Z' fill='%2305364A'/%3E%3Cpath d='M28.9576 18.4273C30.5751 18.4273 31.8863 17.1161 31.8863 15.4986C31.8863 13.8811 30.5751 12.5698 28.9576 12.5698C27.3401 12.5698 26.0288 13.8811 26.0288 15.4986C26.0288 17.1161 27.3401 18.4273 28.9576 18.4273Z' fill='%2305364A'/%3E%3Cpath d='M28.5889 24.7402H13.3811C12.0143 24.7402 11.0598 26.1938 11.7106 27.4086C11.7323 27.452 11.754 27.4954 11.7974 27.5605C13.815 30.7279 17.2427 32.6153 20.9958 32.6153C24.749 32.6153 28.1767 30.7279 30.1943 27.5605C30.216 27.5171 30.2594 27.4737 30.281 27.4086C30.9102 26.1938 29.9556 24.7402 28.5889 24.7402Z' fill='%2305364A'/%3E%3C/svg%3E") center / cover;
}


/* ============================================================
   9. STAVOVÉ TŘÍDY & ZPRÁVY
   ============================================================ */

.error-message,
.satisfaction-error-message {
  background: #e85050;
  padding: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0 0;
  border-radius: 2px;
}

.error-message p,
.satisfaction-error-message p {
  margin: 0;
  padding: 0;
  color: #fff;
}

/* ── Frontend countdown ───────────────────────────── */

.entangle-frontend-countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-sm);
  font-weight: 500;
  border-radius: var(--border-radius);
  background: #fef8ee;
  border: 1px solid #f0c33c;
  color: #826200;
}

.entangle-frontend-countdown[data-type="end"] {
  background: #fef2f1;
  border-color: #d63638;
  color: #8a1f1f;
}

.entangle-frontend-countdown-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.entangle-frontend-countdown.is-expired .entangle-frontend-countdown-timer {
  color: #d63638;
}

.blue-message h3  { color: #0676ac !important; }

.thanks-message .green-message h3 {
  color: inherit !important;
  font-size: var(--font-xl);
  margin-bottom: var(--space-4);
}

.thanks-message .green-message p {
  all: revert;
}

.send-normal-state {
  margin-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Submit tlačítko – disabled stav (ověření PINem) --- */
.send-form[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;          /* aby fungoval title tooltip i click handler */
}

.send-form[disabled]:hover {
  background-image: none !important;
}

/* Tooltip zpráva při kliknutí na disabled submit (mobilní fallback) */
.send-form-disabled-msg {
  display: block;
  text-align: center;
  color: #c0392b;
  font-size: var(--font-xs);
  margin-top: var(--space-2);
  animation: entangle-fade-in 0.2s ease;
}

/* Tooltip nad tlačítkem Další při neověřeném verification slidu */
.verify-required-tooltip {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--space-2);
  background: #333;
  color: #fff;
  font-size: var(--font-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  animation: entangle-fade-in 0.2s ease;
}
.verify-required-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  border: 6px solid transparent;
  border-top-color: #333;
}

@keyframes entangle-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.entangle-hp-wrap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.entangle-thanks-btn-wrap {
  margin-top: var(--space-5);
}

.entangle-thanks-btn {
  display: inline-block;
  color: #fff !important;
  background-color: #32373c !important;
  background-color: var(--color-primary) !important;
  border: none !important;
  padding: var(--space-2) var(--space-5) !important;
  border-radius: var(--border-radius) !important;
  cursor: pointer;
  text-decoration: none !important;
  font-size: inherit;
}
.entangle-thanks-btn:hover {
  background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.entangle-thanks-btn:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(41, 134, 204, 0.3);
}


/* ============================================================
   10. RESPONZIVITA
   ============================================================ */

/* Přepnutí matice z tabulky na mobilní seznam */
@media only screen and (max-width: 600px) {
  .matrix-radio-desktop,
  .matrix-checkbox-desktop { display: none; }

  .matrix-radio-mobile,
  .matrix-checkbox-mobile  { display: block; }

  /* Mobilní label pro radio/checkbox – přidá šedé pozadí */
  .custom-radio .custom-control-label,
  .custom-checkbox .custom-control-label {
    background-color: #f2f2f2;
    margin: 0 0 5px 0;
    padding: 10px 2px;
    border-radius: 5px;
    align-items: center;
  }

  /* Matice (mobil) – odsazení otázky od odpovědí a více prostoru mezi otázkami */
  .matrix-radio-mobile > .input-container,
  .matrix-checkbox-mobile > .input-container {
    margin-bottom: 32px;
  }

  .matrix-radio-mobile > .input-container > h4,
  .matrix-checkbox-mobile > .input-container > h4 {
    margin-bottom: 14px !important;
    font-size: var(--font-base);
  }

  /* Bootstrap grid override pro .col-lg-2 */
  .col-lg-2.col-2 {
    width: 20%;
    max-width: 20%;
    flex: 0 0 20%;
  }

  .col-lg-10 .col-lg-2.col-2 {
    text-align: right;
  }
}

@media (min-width: 600px) and (max-width: 992px) {
  .col-lg-2.col-2 {
    width: 20%;
    max-width: 20%;
    flex: 0 0 20%;
  }

  .col-lg-10 .col-lg-2.col-2 {
    text-align: center;
  }
}


/* ============================================================
   11. HLASOVÁNÍ – Vote-specific styles
   ============================================================ */

.single-voting .container {
  max-width: 1000px !important;
}

@media (max-width: 1000px) {
  .single-voting .entangle-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.single-voting .entangle-container-uvod-wrapper {
  text-align: center;
}

/* Kruhová tlačítka +/- */
.circle {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.circle svg {
  display: block;
}

.small-plus-circle,
.small-negative-circle {
  width: 22px;
  height: 22px;
}
.small-plus-circle svg,
.small-negative-circle svg {
  width: 14px;
  height: 14px;
}

.big-plus-circle,
.big-negative-circle {
  width: 40px;
  height: 40px;
}
.big-plus-circle svg,
.big-negative-circle svg {
  width: 20px;
  height: 20px;
}


.bg-gray {
  background-color: #f2f2f3;
}

/* Karta projektu */
.project-card {
  border-radius: var(--border-radius);
  margin-bottom: var(--space-5);
  border: 1px solid transparent;
  padding: var(--space-5) var(--space-5) 0;
  background-color: #fff;
}

.project-card:last-child {
  margin-bottom: 0;
}

.project-card.used-positive {
  background-color: #e9f8ef;
  border: 1px solid #198754;
}

.project-card.used-negative {
  background-color: #feeeee;
  border: 1px solid #dc3545;
}

.project-card.need-vote {
  border: 1px solid #dc3545;
}

.project-card__header {
  margin-bottom: var(--space-3);
}

.project-card__image img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  max-height: 250px;
}

.project-card__info img {
  max-width: 100% !important;
}

.project-card__detail-link {
  display: inline-block;
  margin-top: var(--space-2);
}

.entangle-container .project-card__info {
  padding-left: var(--space-4);
}

.entangle-container .project-card h3 {
  font-size: var(--font-lg);
}

/* Rozbalovací detail – mobilní tlačítko */
.project-card__show-more--mobile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.project-card__show-more--mobile svg {
  transition: .3s transform;
}

.project-card__show-more--mobile.active svg {
  transform: rotate(180deg);
  transition: .3s transform;
}

@media only screen and (min-width: 768px) {
  .project-card__show-more--mobile {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {
  .project-card__info_text {
    display: none;
  }
}

/* Doplňující informace */
.additional-info {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}

.additional-info li {
  margin-bottom: var(--space-1);
}

.additional-info li:last-child {
  margin-bottom: 0;
}

/* Hlasovací tlačítka */
.voting-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-neutral-300);
  padding: var(--space-5) 0;
}

.voting-buttons a {
  text-decoration: none !important;
  background-image: none !important;
}

/* Wrapper submit tlačítka + back link v doplňujícím dotazníku */
.vote-submit-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.back-to-voting {
  font-size: var(--font-sm);
  color: #555;
  text-decoration: none !important;
  background-image: none !important;
}

/* Bootstrap tooltip styling pro vote tlačítka – JS inicializuje tooltip z title atributu.
   Tooltip je v body, mimo .entangle-container__holder → pevné hodnoty, ne tokeny. */
.tooltip .tooltip-inner {
  background-color: #333;
  color: #fff;
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 6px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #333;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #333;
}

.voting-buttons a.used span.big-plus-circle {
  outline: 1px solid #198754;
  outline-offset: 2px;
}

.voting-buttons a.used span.big-negative-circle {
  outline: 1px solid #dc3545;
  outline-offset: 2px;
}

.voting-buttons a.disabled span.circle {
  background-color: rgba(0, 0, 0, 0.24) !important;
  cursor: default;
  outline: none;
}

/* Překročení limitu hlasů */
.positives-exceeded,
.negatives-exceeded {
  color: #888;
}

.positives-bg-exceeded,
.negatives-bg-exceeded {
  background-color: #888 !important;
}

/* Sticky lišta s celkovým skóre */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

/* Focus reset pro hlasovací odkazy */
.entangle-container a:focus {
  background: transparent !important;
}


/* ============================================================
   12. BOOTSTRAP REPLACEMENT – utility třídy & komponenty
   (nahrazují bootstrap-scoped.css)
   ============================================================ */

/* --- Container (voting page) --- */
.entangle-container__holder .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* --- Form control --- */
.entangle-container .form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: inherit;
  line-height: var(--line-height-base);
  color: var(--color-base);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  background: #fff;
  transition: border-color 0.15s ease;
}
.entangle-container .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

/* --- Spacing utilities --- */
.entangle-container__holder .mb-1 { margin-bottom: 0.25rem; }
.entangle-container__holder .mb-2 { margin-bottom: 0.5rem; }
.entangle-container__holder .mb-3 { margin-bottom: 1rem; }
.entangle-container__holder .mb-4 { margin-bottom: 1.5rem; }
.entangle-container__holder .mb-5 { margin-bottom: 3rem; }

.entangle-container__holder .mt-1 { margin-top: 0.25rem; }
.entangle-container__holder .mt-2 { margin-top: 0.5rem; }
.entangle-container__holder .mt-3 { margin-top: 1rem; }
.entangle-container__holder .mt-5 { margin-top: 3rem; }

.entangle-container__holder .my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.entangle-container__holder .my-5 { margin-top: 3rem; margin-bottom: 3rem; }

.entangle-container__holder .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.entangle-container__holder .py-5 { padding-top: 3rem; padding-bottom: 3rem; }

.entangle-container__holder .me-1 { margin-right: 0.25rem; }
.entangle-container__holder .m-auto { margin: auto; }

/* --- Text & background utilities --- */
.entangle-container__holder .text-center { text-align: center; }
.entangle-container__holder .text-success { color: #198754; }
.entangle-container__holder .text-danger  { color: #dc3545; }
.entangle-container__holder .bg-success   { background-color: #198754; }
.entangle-container__holder .bg-danger    { background-color: #dc3545; }
.entangle-container__holder .fw-bold      { font-weight: 700; }

/* --- Display utilities --- */
.entangle-container__holder .d-inline-block        { display: inline-block; }
.entangle-container__holder .justify-content-center { display: flex; justify-content: center; }

/* --- Alert --- */
.entangle-container__holder .alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-sm);
  margin-bottom: var(--space-4);
}
.entangle-container__holder .alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.entangle-container__holder .alert-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* --- Table --- */
.entangle-container .table {
  width: 100%;
  border-collapse: collapse;
}

/* --- Carousel (base structure, no animations) --- */
.entangle-container .carousel {
  position: relative;
  overflow: hidden;
}
.entangle-container .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.entangle-container .carousel-item {
  display: none;
  position: relative;
  width: 100%;
}
.entangle-container .carousel-item.active {
  display: block;
}

/* --- Tooltip (structure for lightweight replacement) ---
   Tooltip se připojuje přímo do body, mimo .entangle-container__holder,
   proto zde NELZE použít CSS tokeny (--font-sm atd.) – musí být pevné hodnoty. */
.tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.tooltip.show {
  opacity: 1;
}
.tooltip-inner {
  background-color: #333;
  color: #fff;
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}
.tooltip.bs-tooltip-top {
  padding-bottom: 6px;
}
.tooltip.bs-tooltip-top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}
.tooltip.bs-tooltip-bottom {
  padding-top: 6px;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}

/* ============================================================
   MAPPING – Frontend
   ============================================================ */

.entangle-mapping .entangle-container-uvod {
  margin-bottom: 0;
}

.entangle-mapping .entangle-container-uvod-wrapper {
  border-bottom: 0;
  padding-bottom: var(--space-8);
}

.entangle-mapping .entangle-mapping-toolbar {
  border-top: 1px solid var(--color-neutral-200);
  margin-left: calc(-1 * var(--space-5));
  margin-right: calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5);
}

.entangle-mapping .entangle-mapping-toolbar-inner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.entangle-mapping .entangle-mapping-toolbar-filters {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.entangle-mapping .entangle-map-category-filter,
.entangle-mapping .entangle-map-sec-filter {
  width: auto;
  flex: 0 0 auto;
  display: inline-block;
}

.entangle-map-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  color: var(--color-base);
  padding: 0;
  transition: background 0.15s;
  box-sizing: border-box;
}

.entangle-map-search-toggle:hover {
  background: var(--color-neutral-200);
}

.entangle-map-search-toggle .material-symbols-outlined {
  font-size: 20px;
}

.entangle-map-search-toggle.is-active {
  background: var(--color-neutral-200);
}

.entangle-map-search-wrap {
  position: relative;
  display: none;
}

.entangle-map-search-wrap.is-open {
  display: block;
}

.entangle-mapping .entangle-map-search-filter {
  width: 180px;
  padding-right: 32px;
}

.entangle-map-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #999;
  padding: 2px 4px;
  display: none;
}

.entangle-map-search-clear:hover {
  color: #333;
}

.entangle-map-search-wrap.has-value .entangle-map-search-clear {
  display: block;
}

.entangle-mapping .entangle-map-pin-count {
  opacity: 0.7;
  font-size: var(--font-sm);
}

.entangle-map-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-size: var(--font-base, 1rem);
  line-height: inherit;
  border: 0;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  color: var(--color-contrast, #fff);
  cursor: pointer;
  transition: background-image 0.15s ease, transform 0.05s ease;
}

.entangle-map-add-btn:hover,
.entangle-map-add-btn:focus {
  background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
  outline: none;
}

.entangle-map-add-btn:active {
  transform: translateY(1px);
}

.entangle-map-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.entangle-mapping.entangle-container {
  padding: var(--space-8) var(--space-5) 0;
}

.entangle-mapping--no-header.entangle-container {
  padding-top: 0;
}

.entangle-mapping--no-header .entangle-mapping-toolbar {
  border-top: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* ── Area tabs ─────────────────────────────────────── */

.entangle-mapping-areas {
  margin-left: calc(-1 * var(--space-5));
  margin-right: calc(-1 * var(--space-5));
  padding: 0 var(--space-5);
  background: var(--color-neutral-100);
}

.entangle-mapping-areas-inner {
  display: flex;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entangle-area-tab {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-sm);
  color: var(--color-base);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.entangle-area-tab:hover {
  color: var(--color-primary);
}

.entangle-area-tab.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* Full-width map: break out of parent padding so the map spans full width. */
.entangle-mapping .entangle-mapping-canvas {
  position: relative;
  width: calc(100% + var(--space-5) * 2);
  margin-left: calc(-1 * var(--space-5));
  margin-bottom: 0;
  height: 600px;
  background: var(--color-neutral-100);
  overflow: hidden;
}

.entangle-mapping .entangle-mapping-canvas .projekty-map {
  width: 100%;
  height: 100%;
}

/* Skeleton shimmer for map loading */
.entangle-map-skeleton {
  position: relative;
  overflow: hidden;
  background: #e8e8e8;
}

.entangle-map-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: entangle-shimmer 1.5s infinite;
}

@keyframes entangle-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
  .entangle-mapping .entangle-mapping-toolbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .entangle-mapping .entangle-map-pin-count {
    display: none;
  }

  .entangle-mapping.entangle-container {
    padding: var(--space-6) var(--space-5) 0;
  }

  .entangle-mapping .entangle-container-uvod-wrapper {
    padding-bottom: var(--space-6);
  }

  .entangle-map-modal {
    padding: 0 !important;
  }

  .entangle-map-modal-inner {
    /* 100vh = "large viewport" (bez adres baru) na mobile → inner přeteče visible plochu
       nahoru a dolů (schová se pod URL bar / bottom nav). 100dvh = dynamic viewport,
       respektuje aktuálně zobrazenou UI prohlížeče. Fallback vh pro browsers bez dvh. */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  /* iOS safe area — když je modal fullscreen, header/footer musí respektovat
     notch (top) a home indicator (bottom), jinak by tlačítka byla nedostupná. */
  .entangle-map-modal-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }
  .entangle-map-modal-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .entangle-mapping .entangle-mapping-toolbar-filters {
    margin-left: 0;
    flex-direction: column;
  }

  .entangle-mapping .entangle-map-category-filter,
  .entangle-mapping .entangle-map-sec-filter {
    width: 100%;
  }

  .entangle-mapping .entangle-map-search-filter {
    width: 100%;
  }

  .entangle-map-search-toggle {
    display: none;
  }

  .entangle-map-search-wrap {
    display: block !important;
    width: 100%;
  }

  .entangle-mapping .entangle-mapping-canvas {
    height: 480px;
  }
}

/* ── Submit modal ──────────────────────────────────────── */

.entangle-map-modal {
  display: none;
  position: fixed;
  inset: 0;
  /* Explicit height (dvh) — moderní browsers interpretují inset: 0 jako small viewport,
     ale některé starší (Opera Mobile pre-2023, Samsung Internet) používají large viewport
     → modal overflow ven z visible plochy. Explicit height: 100dvh vždy fits visible. */
  height: 100vh;
  height: 100dvh;
  z-index: 2147483647; /* max i32 — above any hub/login overlay */
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  /* Override .entangle-container base styles on overlay */
  max-width: none;
  margin: 0;
  border-radius: 0;
}
.entangle-map-modal.is-open { display: flex; }

/* Autocomplete dropdown must appear above the modal */
.pac-container {
  z-index: 2147483647 !important;
}

.entangle-map-modal-inner {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius);
  max-width: 680px;
  width: 100%;
  /* Fallback + dynamic viewport (mobile: 100vh = large viewport = přeteče visible). */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.entangle-map-modal-inner > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.entangle-map-modal-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px var(--space-5);
  border-bottom: 1px solid var(--color-neutral-300);
  background: #fff;
}

.entangle-map-modal-header h3 {
  margin: 0;
  font-size: var(--font-base);
}

.entangle-map-modal-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  color: var(--color-base);
}

.entangle-map-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5);
}

.entangle-map-modal-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px var(--space-5);
  border-top: 1px solid var(--color-neutral-300);
  background: #fff;
}

.entangle-map-modal-footer .entangle-map-submit-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-sm);
}

.entangle-map-field {
  margin-bottom: var(--space-5);
}

.entangle-map-field > label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: var(--font-base);
}

.entangle-map-field textarea {
  resize: vertical;
}

.entangle-map-submit-picker {
  width: 100%;
  height: 260px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  background: var(--color-neutral-100);
}

.entangle-map-submit-coords {
  margin: 6px 0 0;
  font-size: var(--font-xs);
  opacity: 0.7;
}

.entangle-map-hint {
  margin: 4px 0 6px;
  font-size: var(--font-xs);
  opacity: 0.7;
}

/* ── Modal loading & success states ────────────────── */

.entangle-map-modal-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255,255,255,0.9);
  font-size: var(--font-base);
  color: var(--color-base);
  border-radius: var(--border-radius);
}

.entangle-map-modal-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: entangle-spin 0.8s linear infinite;
}

@keyframes entangle-spin {
  to { transform: rotate(360deg); }
}

.entangle-map-modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  flex: 1 1 auto;
  min-height: 200px;
}

.entangle-map-modal-success-icon .material-symbols-outlined {
  font-size: 64px;
  color: #15803d;
}

.entangle-map-modal-success-message {
  margin-top: var(--space-4);
  font-size: var(--font-base);
  line-height: 1.5;
  color: var(--color-base);
  max-width: 360px;
}

/* ── Image upload ──────────────────────────────────── */

.entangle-map-upload-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.entangle-map-upload-previews:empty {
  margin-bottom: 0;
}

.entangle-map-upload-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.entangle-map-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entangle-map-upload-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.entangle-map-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed var(--color-neutral-300);
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-base);
  transition: border-color 0.15s, background 0.15s;
}

.entangle-map-upload-btn:hover {
  border-color: var(--color-primary);
  background: rgba(0,0,0,0.02);
}

.entangle-map-upload-btn .material-symbols-outlined {
  font-size: 20px;
  color: var(--color-primary);
}

.entangle-map-req {
  color: #c0392b;
}

.entangle-map-gdpr {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 400;
}
.entangle-map-gdpr input {
  margin-top: 4px;
}

.entangle-map-honeypot {
  position: absolute;
  left: -9999px;
}