/**
 * File: calc_theme.css
 * Path: calcwood.tomashorsky.com/shared/calc_theme.css
 * Info: Hlavní a jediný stylovací soubor kalkulačky...
 * Verze a aktuální datum: 17-04-26 v_3.07
 */

/* --- ZÁKLADNÍ POZADÍ A OBAL PRO MICROSITE --- */
body {
    background: radial-gradient(circle at center, #2b2b2b 0%, #0a0a0a 100%);
    background-attachment: fixed;
    font-family: "Roboto", Arial, sans-serif;
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    /* OPRAVA ROZLOŽENÍ: Donutí stránku skládat hlavičku a kalkulačku pod sebe */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 0 !important;
}

.microsite-wrapper {
    width: 100%;
    max-width: 900px;
    margin-top: -18px;
}

/* ========================================= */
/* === HLAVIČKA APLIKACE (GLOBÁLNÍ) ===      */
/* ========================================= */
.cw-global-header {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    background: transparent;
    padding: 25px 20px 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
    z-index: 1000;
}

.cw-header-left {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.cw-header-left:hover {
    transform: scale(1.02);
}

.cw-header-logo-img {
    height: 60px;
    margin-right: 15px;
    filter: drop-shadow(0 2px 8px rgba(249, 195, 67, 0.2));
}

.cw-header-title {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
    letter-spacing: 2px;
    color: #ffffff;
}

.cw-header-title span {
    color: #f9c343;
}

.cw-header-right a {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.cw-header-right a:hover {
    opacity: 1;
    transform: scale(1.05);
}

.cw-header-powered-img {
    height: 90px;
    width: auto;
}

/* Responzivita pro mobilní telefony */
@media (max-width: 650px) {
    .cw-global-header {
        flex-direction: column;
        padding: 20px 20px 0 20px;
        gap: 15px;
    }

    .cw-header-left {
        align-self: flex-start;
    }

    .microsite-wrapper {
        margin-top: 0px;
    }

    .cw-header-logo-img {
        height: 40px;
    }

    .cw-header-title {
        font-size: 40px;
    }

    /* Skrytí POUZE loga Powered by na mobilu nahoře */
    .cw-header-powered-img {
        display: none !important;
    }

    /* Vycentrování vlaječek pod logem */
    .cw-header-right {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================= */
/* === OPRAVA ROZLOŽENÍ (REVIZE 4.0 - MASTER FIX) === */
/* ================================================= */
/* 1. HLAVNÍ OBAL - Musí být VŽDY BLOCK */
.th-calc-inputs {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    margin-bottom: 10px;
}

/* 2. DEFINICE VŠECH MŘÍŽEK (Základní i Expertní) */
.th-basic-grid,
.th-expert-grid,
.th-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* Výchozí stav: 2 sloupce */
    gap: 20px;
    width: 100%;
    /* Vyrušení Flexboxu, pokud tam nějaký zbyl */
    flex-direction: row !important;
    align-items: start !important;
}

/* 3. EXPERTNÍ NASTAVENÍ (OBAL) - Vždy na nový řádek */
.th-accordion-item {
    width: 100% !important;
    display: block !important;
    margin-top: 20px;
    clear: both;
}

/* --- RESPONZIVITA A LOGIKA PŘEPÍNÁNÍ --- */
/* A) DESKTOP (Široká obrazovka > 900px) -> 3 SLOUPCE */
@media (min-width: 900px) {

    .th-basic-grid,
    .th-expert-grid,
    .th-grid-2,
    .th-is-mobile .th-basic-grid,
    .th-is-mobile .th-expert-grid,
    .th-is-mobile .th-grid-2 {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 20px !important;
    }

    /* Pojistka pro rodiče */
    .th-calc-inputs {
        display: block !important;
    }
}

/* B) MOBIL (Vynuceno JS třídou .th-is-mobile) -> 2 SLOUPCE */
.th-is-mobile .th-basic-grid,
.th-is-mobile .th-expert-grid,
.th-is-mobile .th-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

/* C) EXTRA MALÉ DISPLEJE (< 350px) -> 1 SLOUPEC */
@media (max-width: 350px) {

    .th-basic-grid,
    .th-expert-grid,
    .th-grid-2,
    .th-is-mobile .th-basic-grid,
    .th-is-mobile .th-expert-grid,
    .th-is-mobile .th-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* --- VÝSLEDEK (Box) --- */
.th-calc-result {
    margin-top: 25px;
    padding: 20px;
    background: rgba(20, 20, 20, 0.6);
    border-left: 4px solid #f9c343;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    display: none;
}

.th-calc-result strong {
    color: #f9c343;
    font-size: 18px;
}

/* --- JEDNOTNÝ STYL VÝSLEDKOVÝCH KARET --- */
.res-row {
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.res-num {
    color: #fff;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

.res-sep {
    color: #777;
    font-size: 0.6em;
    font-weight: normal;
    margin: 0 2px;
}

.res-unit {
    color: #888 !important;
    font-size: 12px !important;
    font-weight: normal;
    margin-left: 2px;
}

.res-mod {
    color: #f9c343;
    font-size: 0.6em;
    font-weight: normal;
    margin-left: 5px;
}

.res-info {
    font-size: 0.5em;
    color: #aaa;
    font-weight: normal;
}

/* Specificky pro tabulku vrtání */
.drilling-list .res-num {
    font-size: 18px !important;
}

/* Nadpisy sloupců v tabulce */
.drilling-list div[style*="font-size:10px"] {
    font-size: 11px !important;
}

/* --- STYLY PŘESUNUTÉ Z PHP (CLEANUP) --- */
/* Zamčené (manuálně zadané) hodnoty */
.th-input-locked {
    color: #f9c343 !important;
    font-weight: bold !important;
    background-color: #333 !important;
    border: 1px solid #f9c343 !important;
    box-shadow: 0 0 5px rgba(249, 195, 67, 0.2);
}

/* Automatické hodnoty */
.th-input-auto {
    color: #888 !important;
    font-style: italic;
    background-color: #222 !important;
    border: 1px solid #444 !important;
}

/* Reset tlačítko */
.th-reset-btn {
    display: block;
    margin: 10px auto;
    background: none;
    border: 1px solid #555;
    color: #aaa;
    padding: 9px 18px;
    font-size: 12px;
    border-radius: 60px;
    cursor: pointer;
    text-transform: none;
    font-weight: bold;
}

.th-reset-btn:hover {
    border-color: #fff;
    color: #fff;
}

/* Popisky (Labels) */
.th-lab-white {
    color: #fff;
    margin: 0;
}

.th-lab-std {
    margin: 0;
}

.th-lab-small {
    font-size: 12px;
    color: #fff;
    margin: 0;
}

.th-lab-bold {
    color: #fff;
    font-weight: bold;
    margin: 0;
}

/* Vynucení vzhledu nadpisů (Velká písmena + kompaktnost) */
.th-lab-white,
.th-lab-std,
.th-lab-small,
.th-lab-bold {
    font-size: 11px;
    letter-spacing: 0.5px;
    margin: 0;
    display: inline-block;
}

/* Nadpisy sekcí */
.th-sec-title {
    text-align: center;
    color: #f9c343;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.th-sec-subtitle {
    font-size: 12px;
    color: #aaa;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Oddělovače a Layout */
.th-sep-dashed {
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    margin: 20px 0;
    padding-top: 15px;
}

.th-sep-solid {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pozn.: .th-grid-2 už je řešeno nahoře v „mřížkách“ (display/grid + 2 sloupce),
   tady jen dorovnáváme gap tak, jak to ve finále chceš na 15px. */
.th-grid-2 {
    gap: 15px;
}

.th-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* Specifické inputy */
.th-inp-bold {
    font-weight: bold;
}

.th-inp-faint {
    border-color: rgba(255, 255, 255, 0.3);
}

.th-inp-readonly {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    border-color: transparent;
    cursor: not-allowed;
}

/* Osa výsuvu (malý řádek) */
.th-axis-row {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.th-axis-label {
    font-size: 10px;
    color: #aaa;
}

.th-axis-val {
    width: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #888;
    border: none;
    text-align: right;
    font-size: 11px;
    padding: 2px;
}

/* Info text dole */
.th-info-small {
    text-align: center;
    font-size: 10px;
    color: #aaa;
    margin-top: 5px;
}

/* --- TOOLTIPY (OTAZNÍČKY) --- */
.th-help-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: rgba(249, 195, 67, 0.15);
    color: #f9c343;
    border: 1px solid #f9c343;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    font-size: 11px;
    font-weight: bold;
    cursor: help;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
}

.th-tooltip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 260px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 0 80px rgba(0, 0, 0, 1);
    color: #ddd;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    padding: 15px;
    z-index: 9999;
    pointer-events: none;
    white-space: normal;
    text-transform: none;
    transition: all 0.2s ease-in-out;
}

.th-tooltip-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e1e1e transparent transparent transparent;
}

.th-help-icon:hover .th-tooltip-box {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.th-tt-highlight {
    color: #f9c343;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
}

/* Úprava řádku s popiskem */
.th-label-row {
    margin-bottom: 2px;
    line-height: 1.1;
}

.th-input-group.locked input {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* FIX TOOLTIPU U PRAVÉHO OKRAJE */
.th-help-icon .th-tooltip-box.th-tt-shift-left {
    left: auto !important;
    right: -10px !important;
    transform: none !important;
    margin-left: 0 !important;
}

.th-help-icon .th-tooltip-box.th-tt-shift-left::after {
    left: auto !important;
    right: 15px !important;
    transform: translateX(0) !important;
}

/* FIX TOOLTIPU U LEVÉHO OKRAJE */
.th-help-icon .th-tooltip-box.th-tt-shift-right {
    left: -10px !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
}

.th-help-icon .th-tooltip-box.th-tt-shift-right::after {
    left: 15px !important;
    right: auto !important;
    transform: translateX(0) !important;
}

/* --- SVG VIZUALIZACE - STYLY --- */
.svg-corpse-bg {
    fill: #252525;
}

.svg-frame-rect {
    fill: url(#hatch);
    stroke: #aaa;
    stroke-width: 1px;
}

.svg-drawer-front {
    fill: #444;
    stroke: #f9c343;
    stroke-width: 1.5px;
    stroke-opacity: 0.8;
}

.svg-dim-text {
    fill: #f9c343;
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif;
}

.svg-label-text {
    fill: #fff;
    font-size: 14px;
    font-weight: normal;
    font-family: sans-serif;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.svg-dim-line {
    stroke: #f9c343;
    stroke-width: 1px;
}

.svg-guide-line {
    stroke: #f9c343;
    stroke-width: 0.5px;
    stroke-dasharray: 4, 2;
    opacity: 0.6;
}

/* Canvas */
#drawerCanvas {
    display: block;
    margin: 0 auto 15px auto;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* --- ACCORDION (Sbalovací sekce v expertním nastavení) --- */
.th-accordion-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    margin-top: 10px;
    overflow: visible !important;
}

.th-accordion-header {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    color: #ddd;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background 0.2s;
    border-radius: 5px;
}

.th-accordion-header:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.th-accordion-header.active {
    background: rgba(249, 195, 67, 0.15);
    color: #f9c343;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.th-accordion-content {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    display: none;
}

.th-acc-icon {
    font-weight: bold;
    font-size: 18px;
    /* Zvětšeno, aby plus a mínus vypadaly lépe */
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center center;
    line-height: 1;
}

/* --- FIX: KULATÉ ROHY A VALIDACE (Individuální inputy) --- */
#pdf-btn-container {
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#custom_heights_container input,
#custom_const_container input {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-align: center;
    transition: all 0.3s ease;
}

#custom_heights_container input:focus,
#custom_const_container input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #f9c343;
    outline: none;
}

/* Červená chyba */
.th-input-error {
    color: #ff4444 !important;
    border-color: #ff4444 !important;
    background: rgba(255, 68, 68, 0.1) !important;
    font-weight: bold;
}

/* --- OPRAVA ROZLOŽENÍ INPUTŮ A LIMITŮ --- */
.th-input-group {
    position: relative !important;
    margin-bottom: 2px !important;
    width: 100%;
}

/* (duplicitní pojistka zachována významově) */
.th-input-group {
    position: relative;
}

.th-limit-info {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    text-align: center !important;
    font-size: 11px;
    color: #bbb;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* Dynamicky generované inputy (individuální výšky) */
.th-dynamic-item {
    position: relative;
    margin-bottom: 25px;
}

.th-dynamic-item .th-limit-info {
    bottom: -22px;
    font-size: 10px;
    color: #f9c343;
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

/* FIX: Oprava uskakujících šipek u Blum materiálu */
#blum-mat-limit-info {
    position: absolute !important;
    bottom: -18px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 0 !important;
    pointer-events: none;
}

/* --- NOVÉ STYLY PRO SDÍLENÍ --- */
.th-share-btn {
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.th-share-btn:hover {
    border-color: #f9c343;
    color: #f9c343;
    background: rgba(249, 195, 67, 0.05);
}

/* Toast */
#th-toast-msg {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #f9c343;
    text-align: center;
    border-radius: 4px;
    padding: 12px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #f9c343;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

#th-toast-msg.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

/* --- Nový nadpis pro výsledky --- */
.th-results-header {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 15px 0;
    color: #f9c343;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 1px dashed rgba(249, 195, 67, 0.3);
    border-bottom: 1px dashed rgba(249, 195, 67, 0.3);
    background: rgba(249, 195, 67, 0.05);
    cursor: default;
}

/* ========================================= */
/* === FINAL FIX: INTELIGENTNÍ STICKY + RESPONZIVNÍ SVG === */
/* ========================================= */
/* 1. ODBLOKOVÁNÍ DRUPALU */
html,
body,
#outer-wrapper,
#main-wrapper,
#main,
#content {
    overflow: visible !important;
}

/* 2. OSVOBOZENÍ Z KLECE */
.th-visual-container {
    display: contents;
}

/* --- FINÁLNÍ STICKY BOX (poslední výherní definice) --- */
#th-svg-wrapper {
    position: relative;
    z-index: 900;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 1), 0 0 50px rgba(0, 0, 0, 1);
    border-bottom: 6px solid rgba(249, 195, 67, 0.9);
    margin-bottom: 30px;
    background-color: #2e2e2e;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 13px 13px;
    background-position: center top;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 50vh;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* SVG uvnitř wrapperu (z „responzivní SVG“ části) */
#th-svg-wrapper svg {
    display: block !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    max-height: none !important;
}

/* STAV: stuck */
#th-svg-wrapper.stuck {
    position: fixed !important;
    top: 60px !important;
    height: 28vh !important;
    max-height: 500px !important;
    background-color: #2e2e2e;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 13px 13px;
    background-position: center top;
    border-bottom: 6px solid #f9c343;
    z-index: 900;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    margin-bottom: -10px !important;
    box-sizing: border-box;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 1), inset 0 20px 120px rgba(0, 0, 0, 1);
}

#th-svg-wrapper.stuck svg {
    display: block !important;
    height: 105% !important;
    width: auto !important;
    max-width: 105% !important;
    margin: 0 auto !important;
}

#th-svg-wrapper.stuck .th-visual-container {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pro jistotu, aby sticky fungovalo */
@media (min-width: 1024px) {
    #th-svg-wrapper {
        position: sticky;
        position: -webkit-sticky;
        top: 100px;
        z-index: 90;
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 1), 0 0 50px rgba(0, 0, 0, 1);
    }
}

/* Sticky jen pro opravdové PC (původní „pojistka“ zachovaná) */
@media (min-width: 1024px) and (min-height: 600px) {
    #th-svg-wrapper {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 100px !important;
        z-index: 90;
    }
}

/* ========================================= */
/* === MOBILNÍ ZOBRAZENÍ (Vynuceno JS) === */
/* ========================================= */
.th-is-mobile #th-svg-wrapper,
.th-is-mobile #th-svg-wrapper.stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 20px !important;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 1); /* OPRAVA: Zmenšený vnější stín, aby se vešel do obrazovky a neořezával se */
    border-bottom: 6px solid rgba(249, 195, 67, 0.9);
    padding-top: 0 !important;
    z-index: 1 !important;
    /* OPRAVA POZADÍ: Přidáno !important, aby to nepřepsal Drupal/Téma */
    background-color: #2e2e2e !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 13px 13px !important;
    background-position: center top !important;
}

.th-is-mobile #sticky-placeholder {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
}

.th-is-mobile #th-svg-wrapper svg {
    max-height: 40vh !important;
    margin-bottom: 0 !important;
}

/* Mobil -> 2 sloupce inputů (finální verze) */
.th-is-mobile .th-basic-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

/* Extra malé mobily -> 1 sloupec */
@media (max-width: 350px) {

    .th-basic-grid,
    .th-is-mobile .th-basic-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Radio buttony pod sebe */
.th-is-mobile .th-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Výsledkové karty pod sebe */
.th-is-mobile .th-calc-result-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
}

.th-is-mobile .result-card {
    margin-bottom: 10px;
}

/* Proti zoomování na iPhone */
.th-is-mobile .th-input-group input {
    font-size: 16px !important;
}

/* Oprava mezery nahoře */
.th-is-mobile .th-visual-container {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* ========================================= */
/* === ALERT BOX === */
/* ========================================= */
.th-alert-box {
    margin-top: 30px;
    padding: 20px;
    border: 1px dashed #f9c343;
    border-radius: 6px;
    background: rgba(249, 195, 67, 0.05);
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
}

.th-alert-title {
    color: #f9c343;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.th-alert-list {
    margin: 8px 0 0 18px;
    padding: 0;
    list-style: disc;
    color: #aaa;
}

.th-alert-list li {
    margin-bottom: 6px;
}

.th-alert-list strong {
    color: #fff;
}

/* ========================================= */
/* === BETA BANNER (Marketing) === */
/* ========================================= */
.th-beta-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
}

.th-beta-badge {
    display: inline-flex !important;
    /* Přepíše chování z PHP */
    width: fit-content !important;
    /* Stáhne šířku přesně podle obsahu */
    justify-content: center !important;
    align-items: center;
    gap: 40px !important;
    /* Vytvoří tvé požadované odskočení 40px před tlačítkem */
    background: rgba(249, 195, 67, 0.1);
    border: 1px solid rgba(249, 195, 67, 0.3);
    padding: 8px 25px !important;
    /* Trochu zvětšíme okraje, aby to vypadalo luxusněji */
    border-radius: 80px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    margin: 0 auto;
    /* Udrží celou lištu hezky uprostřed */
}

.th-beta-badge:hover {
    background: rgba(249, 195, 67, 0.15);
    border-color: rgba(249, 195, 67, 0.6);
    box-shadow: 0 4px 20px rgba(249, 195, 67, 0.1);
}

.th-beta-dot {
    width: 8px;
    height: 8px;
    background-color: #f9c343;
    border-radius: 50%;
    box-shadow: 0 0 10px #f9c343;
    animation: th-pulse 2s infinite;
}

.th-beta-title {
    color: #f9c343;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-beta-desc {
    color: #eee;
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes th-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 195, 67, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(249, 195, 67, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(249, 195, 67, 0);
    }
}

@media (max-width: 500px) {
    .th-beta-badge {
        flex-direction: column !important;
        /* Na mobilu hodíme tlačítko pod text */
        gap: 12px !important;
        /* Menší mezera pro mobil */
        padding: 12px 20px !important;
        border-radius: 40px !important;
        text-align: center;
    }

    .th-beta-desc {
        border-left: none;
        padding-left: 0;
        font-size: 10px;
        opacity: 0.8;
        display: block;
        margin-top: 4px;
    }

    .th-beta-dot {
        display: none;
    }
}

/* ========================================= */
/* === VIZUÁLNÍ PŘEPÍNAČE === */
/* ========================================= */
.th-visual-radio-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-top: 5px;
}

.th-clean-label {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    flex: 1;
}

.th-clean-label::before,
.th-clean-label::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.th-hidden-radio {
    display: none !important;
}

.th-option-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    background: #222;
    border: 2px solid #444;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.th-option-title {
    font-size: 13px;
    font-weight: bold;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    /* Přidáno centrování */
    width: auto;
}

.th-option-main-text {
    display: block;
    margin-bottom: 4px;
}

.th-option-sub-text {
    display: block;
    font-size: 0.75em;
    font-weight: normal;
    opacity: 0.6;
}

input[type="radio"]:checked+.th-option-card {
    background: rgba(249, 194, 67, 0.116);
    border-color: #f9c343;
    box-shadow: inset 0 0 20px 0 rgb(249, 195, 67, 0.1), 0 0 15px 0 rgba(249, 195, 67, 0.3);
}

input[type="radio"]:checked+.th-option-card .th-option-title {
    color: #f9c343;
}

input[type="radio"]:checked+.th-option-card svg {
    fill: #f9c343;
}

.th-custom-icon {
    width: 36px !important;
    height: 36px !important;
    display: block;
    fill: #555;
    transition: fill 0.2s ease;
}

/* ========================================= */
/* === PŘEPÍNAČ JEDNOTEK (ŠTÍHLÝ DESIGN) === */
/* ========================================= */
.th-unit-switch-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
}

.th-unit-switch-group {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 30px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.th-unit-switch-label {
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    /* Přebije globální display: block z .th-calc-wrapper label */
    align-items: center !important;
}

.th-unit-switch-btn {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    transition: all 0.3s !important;
    color: #aaa !important;
    line-height: 1 !important;
}

input[name="calc_unit"]:checked+.th-unit-switch-btn {
    background: #f9c343 !important;
    color: #000 !important;
    font-weight: bold !important;
}

input[name="calc_unit"]:not(:checked)+.th-unit-switch-btn:hover {
    color: #fff !important;
}

/* ========================================= */
/* === PATIČKA / DISCLAIMER === */
/* ========================================= */
.th-footer-box {
    margin-top: 40px;
    padding: 25px;
    background: rgba(20, 20, 20, 0.6);
    border-left: 4px solid #f9c343;
    border-radius: 4px;
    color: #bbb;
    font-size: 13px;
    line-height: 1.6;
}

.th-footer-title {
    color: #f9c343;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.th-footer-link {
    color: #f9c343;
    text-decoration: none;
    border-bottom: 1px dotted rgba(249, 195, 67, 0.5);
    transition: all 0.2s;
}

.th-footer-link:hover {
    color: #fff;
    border-bottom-style: solid;
}

/* ========================================= */
/* === HLAVIČKA APLIKACE (LOGO + NADPIS) === */
/* ========================================= */
.th-app-header {
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    text-align: center;
}

.th-app-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    color: #f9c343;
}

.th-app-logo svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.th-app-title {
    margin: 0;
    color: #f9c343;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    font-family: 'Roboto', sans-serif;
    text-align: center !important;
}

.th-app-subtitle {
    font-size: 14px;
    color: #aaa;
    font-weight: normal;
    margin-top: 4px;
    text-align: center !important;
}

@media (max-width: 600px) {
    .th-app-header {
        gap: 10px;
        flex-direction: column;
    }

    .th-app-logo {
        width: 50px;
        height: 50px;
    }

    .th-app-title {
        font-size: 18px;
    }

    .th-app-subtitle {
        font-size: 11px;
    }
}

/* ========================================= */
/* === TLAČÍTKA === */
/* ========================================= */
.th-btn-outline-yellow {
    background: transparent !important;
    border: 2px solid #f9c343 !important;
    color: #f9c343 !important;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.th-btn-outline-yellow:hover {
    background: #f9c343 !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(249, 195, 67, 0.4);
}

.th-btn-outline-green {
    background: transparent !important;
    border: 2px solid #4CAF50 !important;
    color: #4CAF50 !important;
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    margin-top: 15px;
}

.th-btn-outline-green:hover {
    background: #4CAF50 !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

/* NOVÉ ROZLOŽENÍ TLAČÍTEK (ROW) */
.th-btns-row {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 20px;
    margin-bottom: 20px;
}

.th-btns-row button {
    flex: 1;
    width: 100%;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    box-sizing: border-box;
}

.th-btns-row .th-share-btn {
    height: 100%;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
    .th-btns-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* === UZAMČENÍ PRO NON-PRO UŽIVATELE === */
/* Kontejner expertního nastavení, když je zamčený */
.th-locked-section {
    position: relative;
    opacity: 0.8;
    /* Mírně průhledné */
}

/* Zpráva uvnitř zamčené sekce (Moderní kompaktní vzhled) */
.th-lock-overlay-msg {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(249, 195, 67, 0.3);
    color: #ddd;
    padding: 10px 15px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

@media (min-width: 600px) {
    .th-lock-overlay-msg {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 12px 20px;
    }
}

/* Všechny inputy uvnitř zamčené sekce */
.th-locked-section input {
    cursor: not-allowed !important;
    background-color: #2a2a2a !important;
    /* Tmavší pozadí */
    color: #555 !important;
    /* Tmavší text */
    border-color: #333 !important;
}

/* Tlačítka +/- (spinnery) uvnitř zamčené sekce */
.th-locked-section .th-spin-btn {
    pointer-events: none;
    /* Nejde na ně kliknout */
    opacity: 0.2;
}

/* Radio buttony (typ čela) uvnitř zamčené sekce */
.th-locked-section .th-option-card {
    cursor: not-allowed !important;
    opacity: 0.5;
    pointer-events: none;
    /* Nejde přepínat */
}

/* Reset tlačítka */
.th-locked-section .th-reset-btn {
    display: none;
    /* Skryjeme reset tlačítka */
}

/* SPECIFICKÉ: Individuální výšky (generované JS) */
/* Musíme jim zakázat interakci přes CSS, protože nemají HTML atribut disabled */
.th-locked-section #custom_heights_container input,
.th-locked-section #custom_const_container input {
    pointer-events: none;
}

/* === HARD LOCK PRO EXPERTNÍ SEKCI === */
/* 1. Hlavní zámek: Zrušena globální průhlednost, aby tooltipy mohly být 100% neprůhledné */
.th-disabled-zone {
    pointer-events: none;
    user-select: none;
    opacity: 1 !important;
    filter: none !important;
}

/* 2. VÝJIMKA: Hláška s odkazem (Musí svítit a jít na ni kliknout) */
.th-disabled-zone .th-lock-overlay-msg {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
    position: relative;
    z-index: 60; /* Zvýšeno na 60, aby bylo nad novým tmavým štítem */
}

/* 3. VÝJIMKA: Hlavičky Accordionu (Aby šly rozbalit, i když je vnitřek mrtvý) */
.th-disabled-zone .th-accordion-header {
    pointer-events: auto !important;
    /* Povolí klikání na nadpis */
    cursor: pointer !important;
}

/* 4. VÝJIMKA: Odkaz na náhled PDF (Očičko) musí být klikací a viditelný i v zamčené zóně */
.th-disabled-zone .th-pdf-preview-link,
.th-locked-section .th-pdf-preview-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
    position: relative;
    z-index: 60;
}

/* 5. VÝJIMKA: Tooltipy (otazníčky) musí jít přečíst na hover, i když je zóna zamčená */
.th-disabled-zone .th-help-icon {
    pointer-events: auto !important;
    position: relative;
    z-index: 60;
    /* Manuální zašednutí samotného otazníčku, aby splynul se zamčenou zónou */
    background: rgba(255, 255, 255, 0.05) !important;
    color: #666 !important;
    border-color: #444 !important;
}

/* Tooltip samotný - 100% neprůhledný, ale v tlumených barvách (aby nekřičel) */
.th-disabled-zone .th-help-icon .th-tooltip-box {
    background: #1a1a1a !important; /* Tmavě šedé pozadí */
    border: 1px solid #333 !important; /* Tmavý rámeček */
    color: #999 !important; /* Šedivý text místo svítivě bílého */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Tlumená žlutá pro zvýrazněný text v tooltipu */
.th-disabled-zone .th-help-icon .th-tooltip-box .th-tt-highlight {
    color: #a38229 !important; /* Mnohem tmavší, "špinavá" žlutá */
}

/* Šipka tooltipu v barvě tlumeného pozadí */
.th-disabled-zone .th-help-icon .th-tooltip-box::after {
    border-color: #1a1a1a transparent transparent transparent !important;
}

/* Hover efekt pro odkaz v zamčené zóně */
.th-disabled-zone .th-pdf-preview-link:hover,
.th-locked-section .th-pdf-preview-link:hover {
    color: #f9c343 !important;
}

/* Výchozí stav (šedá) */
.th-custom-icon.mailform {
    filter: invert(1) opacity(0.5);
    transition: filter 0.2s ease;
}

/* Vybraný stav (tvoje žlutá #f9c343) */
input:checked+.th-option-card .th-custom-icon.mailform {
    filter: invert(86%) sepia(21%) saturate(1207%) hue-rotate(358deg) brightness(101%) contrast(96%);
}

/* --- TLAČÍTKA KOUPIT A KUPÓN --- */
.th-buy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.th-buy-title {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.th-buy-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.th-btn-buy {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #222;
    border: 2px solid #555;
    color: #fff;
    padding: 8px 20px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 17px;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.th-btn-buy:hover {
    border-color: #f9c343;
    color: #f9c343;
    text-decoration: none;
}

.th-btn-badge {
    color: #000000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}

.th-badge-cz {
    background: #f9c343;
}

.th-badge-sk {
    background: #f9c343;
}

/* Kupón */
.th-coupon-box {
    background: rgba(249, 195, 67, 0.05);
    border: 1px dashed #f9c343;
    border-radius: 8px;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.th-coupon-text {
    font-size: 13px;
    color: #ddd;
}

.th-coupon-code {
    background: #111;
    border: 1px solid #444;
    color: #f9c343;
    font-weight: bold;
    font-family: monospace;
    font-size: 19px;
    padding: 6px 20px;
    border-radius: 60px;
    letter-spacing: 2px;
    user-select: all;
    cursor: pointer;
}

/* Poznámka košík */
.th-cart-note {
    color: #f9c343;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    background: rgba(249, 195, 67, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
}

/* ========================================= */
/* === STYLIZACE ROZBALOVACÍHO POLE (SELECT) === */
/* ========================================= */
.th-input-group select {
    width: 100%;
    height: 48px;
    /* Sjednocení výšky s inputy */
    padding: 0 35px 0 15px;
    /* Místo pro šipku vpravo */
    background-color: #222;
    border: 1px solid #444;
    color: #fff;
    border-radius: 40px !important;
    /* Stejné zakulacení jako mají inputy */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-align-last: center;
    /* Vycentruje vybranou hodnotu uvnitř selectu */
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    /* Odstranění výchozí šipky prohlížeče a vložení naší žluté SVG šipky */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9c343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.th-input-group select:focus {
    border-color: #f9c343;
    box-shadow: 0 0 10px rgba(249, 195, 67, 0.2);
}

/* Obarvení roletky (Funguje hlavně na Windows/Chrome, Apple zařízení si to řídí sama) */
.th-input-group select option {
    background-color: #222;
    color: #fff;
    font-weight: normal;
    padding: 10px;
    border: 0 !important;
}

/* --- LICENČNÍ KLÍČ (PRO VERZE) - MODERNÍ VZHLED --- */
.license-key-wrapper {
    margin-top: 15px;
    width: 260px;
    text-align: center;
    position: relative;
}

/* Obal rozbalovacího okna */
.license-key-box {
    margin-top: 12px;
    background: #161616; /* Sjednoceno s tmavými kartami kalkulačky */
    padding: 18px 15px;
    border-radius: 16px;
    border: 1px solid #333;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), inset 0 2px 5px rgba(0,0,0,0.3);
    position: relative;
}

/* Malá šipka pro vizuální propojení s horním tlačítkem */
.license-key-box::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #161616;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
}

/* Input pole */
.license-key-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 30px;
    border: 1px solid #444;
    background: #0a0a0a;
    color: #fff;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-size: 13px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2; /* Aby byl nad šipkou */
}

.license-key-input:focus {
    outline: none;
    border-color: #f9c343;
    background: #111;
    box-shadow: 0 0 0 1px rgba(249, 195, 67, 0.3);
}

/* Tlačítko Ověřit (Sjednoceno do žlutého Outline stylu) */
.license-key-btn {
    background: transparent;
    color: #f9c343;
    border: 2px solid #f9c343;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 800;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.license-key-btn:hover {
    background: #f9c343;
    color: #000;
    box-shadow: 0 4px 15px rgba(249, 195, 67, 0.3);
    transform: translateY(-1px);
}

.license-key-btn:active {
    transform: translateY(1px);
}

.license-message {
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

/* =======================================================
   PRO PURCHASE BLOCK & UX ANIMATIONS
   ======================================================= */
/* Hlavní nákupní blok (šedé pozadí, vycentrování) */
.th-pro-purchase-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 25px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    /* Vycentruje text i nadpis */
    transition: all 0.3s ease;
}

/* Nadpis s ikonou zámečku */
.th-pro-purchase-title {
    opacity: 0.95;
    margin-bottom: 20px;
    display: block;
    font-size: 14px;
    color: #fff;
}

/* Flex kontejner pro tlačítka (vycentruje je pod sebe) */
.th-pro-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Tlačítko - Měsíční (Tmavé se žlutým okrajem) */
.th-pro-btn-monthly {
    background: #222;
    color: #fff;
    border: 1px solid #f4c542;
    padding: 10px 20px;
    border-radius: 60px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    width: 260px;
    transition: 0.3s;
}

.th-pro-btn-monthly:hover {
    background: #333;
}

/* Tlačítko - Roční (Celé žluté se stínem) */
.th-pro-btn-yearly {
    background: #f4c542;
    color: #111;
    border: none;
    padding: 12px 20px;
    border-radius: 80px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    width: 260px;
    box-shadow: 0 4px 10px rgba(249, 195, 67, 0.3);
    transition: 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.th-pro-btn-yearly:hover {
    box-shadow: 0 6px 15px rgba(249, 195, 67, 0.5);
    transform: translateY(-1px);
}

/* Odkazy pod tlačítky (Login / Mám klíč) */
.th-pro-link-sub {
    color: #f9c343;
    font-size: 13px;
    text-decoration: underline;
    margin-top: 5px;
    transition: color 0.2s;
    display: inline-block;
}

.th-pro-link-sub:hover {
    color: #fff;
}

/* Tlačítko pro rozbalení licenčního klíče (Jemný pilulkový design) */
.th-license-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: #f9c343;
    font-size: 13px;
    padding: 8px 20px;
    border: 1px solid rgba(249, 195, 67, 0.3);
    border-radius: 40px;
    transition: all 0.3s ease;
    background: rgba(249, 195, 67, 0.05);
    text-decoration: none;
    margin-top: 5px;
}

.th-license-toggle-btn:hover {
    background: rgba(249, 195, 67, 0.15);
    border-color: #f9c343;
    color: #fff;
}

/* Animace probliknutí (když uživatel klikne na zamčenou zónu) */
@keyframes proFlash {
    0% {
        box-shadow: 0 0 0px rgba(249, 195, 67, 0);
        border-color: rgba(255, 255, 255, 0.08);
        transform: scale(1);
    }

    20% {
        box-shadow: 0 0 40px rgba(249, 195, 67, 0.8);
        border-color: #f4c542;
        transform: scale(1.01);
    }

    100% {
        box-shadow: 0 0 0px rgba(249, 195, 67, 0);
        border-color: rgba(255, 255, 255, 0.08);
        transform: scale(1);
    }
}

.th-highlight-flash {
    animation: proFlash 3s ease-out;
}

/* Neviditelný štít přes zamčenou zónu, který chytá kliknutí a dělá efekt zašednutí */
.th-disabled-click-catcher {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(22, 22, 22, 0.65); /* Ztmaví vše pod sebou */
    backdrop-filter: grayscale(1); /* Udělá vše pod sebou černobílé */
    -webkit-backdrop-filter: grayscale(1);
}

/* Výjimka pro hlavičky akordeonů v zamčené zóně, aby šly rozbalit */
.th-accordion-header-clickable {
    position: relative;
    z-index: 60;
    /* Musí být vyšší než 50 (což má lapač kliknutí) */
    pointer-events: auto;
    /* Povolí kliknutí i v mrtvé zóně */
}

/* =======================================================
   📱 MOBILE UX FIXES (Optimalizace pro telefony do 900px)
   ======================================================= */
@media (max-width: 900px) {

    /* 1. Vycentrování a zmenšení tlačítek (Blum/Classic, Overlay/Inset) */
    .th-visual-radio-group {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 auto 30px auto !important; /* OPRAVA: Ještě větší odsazení od prvků pod tím na mobilu */
    }

    .th-option-card {
        flex: 1 !important;
        max-width: 50% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 5px !important;
        min-height: auto !important;
    }

    .th-option-title {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-top: 5px !important;
    }

    /* 2. Zarovnání rozhozených inputů (Perimeter Gap vs Gap Between Fronts) */
    /* Štítky budou mít stejnou výšku a text bude "sedět" dole, takže inputy lícují */
    .th-label-row {
        min-height: 34px !important;
        display: flex !important;
        align-items: flex-end !important;
        padding-bottom: 4px !important;
    }

    /* 3. Individuální čela a boxy - POUZE 1 SLOUPEC (zabrání přetékání doprava) */
    #custom_heights_container,
    #custom_const_container {
        grid-template-columns: 1fr !important;
    }

    /* 4. Zajištění, aby expertní mřížka celkově nepřetékala */
    .th-expert-grid {
        gap: 15px 10px !important;
        /* Zmenšení mezer mezi prvky na mobilu */
    }
}

/* ========================================= */
/* === DEFINITIVNÍ OPRAVA TOOLTIPŮ PRO MOBILY === */
/* ========================================= */
@media (max-width: 900px) {

    /* 1. LEVÝ SLOUPEC A SAMOSTATNÉ ŘÁDKY -> Posun na střed obrazovky */
    .th-help-icon .th-tooltip-box,
    .th-help-icon .th-tooltip-box.th-tt-shift-left {
        position: absolute !important;
        width: 260px !important;
        max-width: 85vw !important;
        margin-left: 0 !important;
        /* Vycentrujeme vůči ikoně a posuneme doprava na střed displeje */
        left: 50% !important;
        right: auto !important;
        transform: translateX(calc(-50% + 25vw)) translateY(10px) !important;
    }

    /* Zobrazení po kliknutí (Levý sloupec) */
    .th-help-icon:hover .th-tooltip-box,
    .th-help-icon:active .th-tooltip-box,
    .th-help-icon:hover .th-tooltip-box.th-tt-shift-left,
    .th-help-icon:active .th-tooltip-box.th-tt-shift-left {
        transform: translateX(calc(-50% + 25vw)) translateY(0) !important;
    }

    /* Skrytí šipky (na středu obrazovky by neukazovala přesně na ikonu) */
    .th-help-icon .th-tooltip-box::after,
    .th-help-icon .th-tooltip-box.th-tt-shift-left::after {
        display: none !important;
    }

    /* 2. PRAVÝ SLOUPEC V MŘÍŽKÁCH -> Posun na střed obrazovky */
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box,
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left {
        /* Vycentrujeme vůči ikoně a posuneme doleva na střed displeje */
        left: 50% !important;
        right: auto !important;
        transform: translateX(calc(-50% - 25vw)) translateY(10px) !important;
    }

    /* Zobrazení po kliknutí (Pravý sloupec) */
    .th-basic-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box,
    .th-expert-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box,
    .th-grid-2>div:nth-child(even) .th-help-icon:hover .th-tooltip-box,
    .th-basic-grid>div:nth-child(even) .th-help-icon:active .th-tooltip-box,
    .th-expert-grid>div:nth-child(even) .th-help-icon:active .th-tooltip-box,
    .th-grid-2>div:nth-child(even) .th-help-icon:active .th-tooltip-box,
    .th-basic-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box.th-tt-shift-left,
    .th-expert-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box.th-tt-shift-left,
    .th-grid-2>div:nth-child(even) .th-help-icon:hover .th-tooltip-box.th-tt-shift-left,
    .th-basic-grid>div:nth-child(even) .th-help-icon:active .th-tooltip-box.th-tt-shift-left,
    .th-expert-grid>div:nth-child(even) .th-help-icon:active .th-tooltip-box.th-tt-shift-left,
    .th-grid-2>div:nth-child(even) .th-help-icon:active .th-tooltip-box.th-tt-shift-left {
        transform: translateX(calc(-50% - 25vw)) translateY(0) !important;
    }

    /* Skrytí šipky pro pravý sloupec */
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box::after,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box::after,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box::after,
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left::after,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left::after,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box.th-tt-shift-left::after {
        display: none !important;
    }
}

/* === SECTION 2: MODERN STYLE OVERRIDES & THEME (PRIORITY) === */
/**
  * File: modern-style.css
  * Path: tomashorsky.com/_calc_/drawer_calc/modern-style.css
  * Info: Profi layout, oprava SVG ořezu, Smart Sticky fix
  * Verze: 02-03-26 v_1.8 (ULTIMATE FIX)
 */
/* ================================================= */
/* === 1. ŠÍŘKA STRÁNKY (1400px) === */
/* ================================================= */
body .microsite-wrapper {
    max-width: 1400px !important;
    width: 95% !important;
    margin: 0 auto !important;
}

.th-calc-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* ================================================= */
/* === 2. ABSOLUTNÍ ZÁKAZ JS MANIPULACE S SVG === */
/* ================================================= */
/* Placeholder se stává STICKY prvkem (míčkem), který jezdí */
#sticky-placeholder {
    display: block !important;
    position: sticky !important;
    top: 20px !important;
    height: auto !important;
    min-height: 1px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    overflow: visible !important;
    /* Zabrání oříznutí */
    transform: none !important;
    transition: none !important;
    z-index: 10 !important;
}

/* Samotný obal SVG - Zákaz ořezu, fixní pozice a NÁVRAT TVÉ GRAFIKY */
#th-svg-wrapper,
#th-svg-wrapper.stuck {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    /* Přinutíme obal, aby obepnul SVG a nenechal se zmenšit JS */
    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;
    /* Zrušení JS scrollování - o to se stará placeholder nad ním */
    position: static !important;
    transform: none !important;
    transition: none !important;
    margin: 0 !important;
    /* Zabrání oříznutí */
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* TVOJE PŮVODNÍ GRAFIKA (Mřížka + Inset stín) */
    border: 1px solid #333;
    border-radius: 12px !important;
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 1), 0 0 50px rgba(0, 0, 0, 1);
    border-bottom: 6px solid rgba(249, 195, 67, 0.9);
    margin-bottom: 30px;
    background-color: #2e2e2e;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 13px 13px;
    background-position: center top;
    z-index: 2 !important;
    border: 1px solid #2a2a2a !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Zajištění, že samotné SVG se přizpůsobí obalu */
#th-svg-wrapper svg {
    width: 100% !important;
    height: auto !important;
    max-height: 750px !important;
    display: block !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* ================================================= */
/* === 3. HLAVNÍ GRID (ROZDĚLENÍ NA 2 SLOUPCE) === */
/* ================================================= */
@media (min-width: 1024px) {
    #th-calc-app {
        display: grid !important;
        /* OPRAVA: Použití 'fr' místo '%' zabrání přetékání o 40px mezeru! */
        grid-template-columns: 55fr 45fr !important;
        /* TOTO OPRAVUJE MEZERY: 1fr na 7. řádku zajistí, že veškeré volné místo z vysokého SVG spadne sem.
           Řádky s inputy tak zůstanou vždy semknuté u sebe se stejnou fixní mezerou! */
        grid-template-rows: auto max-content max-content max-content max-content max-content 1fr auto auto auto !important;
        gap: 0 40px !important;
        align-items: start !important;
        position: relative !important;
    }

    #th-calc-app>.th-app-header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin-bottom: 20px !important;
    }

    #th-calc-app>.th-mode-switch-container {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }

    #th-calc-app>div[style*="justify-content: flex-end"] {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
    }

    #th-calc-app>.th-calc-inputs {
        grid-column: 1 / 2 !important;
        grid-row: 4 !important;
    }

    #th-calc-app>#pro-purchase-section {
        grid-column: 1 / 2 !important;
        grid-row: 5 !important;
    }

    #th-calc-app>.th-accordion-item {
        grid-column: 1 / 2 !important;
        grid-row: 6 !important;
    }

    /* Tlačítko se drží dole ve svém řádku (1fr), takže lícuje se spodkem SVG plátna. 
       Mezera se vytvoří přirozeně nad ním, zatímco inputy zůstanou nahoře u sebe. */
    #th-calc-app>.th-calc-btn {
        grid-column: 1 / 2 !important;
        grid-row: 7 !important;
        align-self: end !important;
    }

    /* --- PRAVÝ SLOUPEC (KOLEJE PRO SVG) --- */
    .th-visual-container {
        display: block !important;
        grid-column: 2 / 3 !important;
        /* Koleje končí přesně s řádkem 7 (tlačítko Calculate) */
        grid-row: 2 / 8 !important;
        /* Kontejner už NENÍ sticky! Slouží jen jako dráha. Sticky je až prvek uvnitř. */
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
        z-index: 10 !important;
    }

    /* --- TLAČÍTKA A VÝSLEDKY (PLNÁ ŠÍŘKA DOLE) --- */
    #th-calc-app>#pdf-btn-container {
        grid-column: 1 / -1 !important;
        grid-row: 8 !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Výsledky mají vyšší z-index pro jistotu */
    #th-calc-app>#th-result-output {
        grid-column: 1 / -1 !important;
        grid-row: 9 !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 20 !important;
        background: #0a0a0a !important;
    }

    #th-calc-app>.th-footer-box {
        grid-column: 1 / -1 !important;
        grid-row: 10 !important;
        margin-top: 40px !important;
    }
}

/* ================================================= */
/* === 4. INPUTY (3 SLOUPCE) A ZAROVNÁNÍ === */
/* ================================================= */
.th-basic-grid,
.th-expert-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
}

/* OPRAVA: Vertikální sjednocení všech nadpisů nad inputy */
.th-label-row,
.th-basic-grid>div>div:first-child,
.th-expert-grid>div>div:first-child,
.th-grid-2>div>div:first-child {
    display: flex !important;
    align-items: flex-end !important;
    /* Zarovná texty dolů k inputu */
    min-height: 32px !important;
    /* Pevná výška pro 2 řádky i tooltipy */
    margin-bottom: 8px !important;
}

.th-label-row label,
.th-basic-grid>div>div:first-child label,
.th-expert-grid>div>div:first-child label,
.th-grid-2>div>div:first-child label {
    margin-bottom: 0 !important;
    /* Zrušíme původní odsazení */
    line-height: 1.3 !important;
    width: 100% !important;
    display: block !important;
}

/* Výjimka pro malé dynamické inputy (Individuální výšky) */
.th-dynamic-item .th-label-row {
    min-height: 24px !important;
    justify-content: center !important;
    /* Vycentruje obsah flexboxu horizontálně */
}

.th-dynamic-item .th-label-row label {
    text-align: center !important;
    /* Vycentruje samotný text uvnitř labelu */
}

@media (min-width: 1024px) {

    .th-basic-grid,
    .th-expert-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ================================================= */
/* === 5. KOMPAKTNÍ KARTY (DARK MODE) === */
/* ================================================= */
.th-accordion-item,
#th-result-output,
.th-pro-purchase-block {
    background: #161616 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    padding: 18px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 20px !important;
    /* Sjednocená pevná mezera na 20px */
    margin-top: 0 !important;
    /* Pojistka proti sčítání mezer */
    box-sizing: border-box;
}

/* Původní transparentní vzhled pro přepínače a inputy (plovoucí design) */
.th-mode-switch-container,
.th-basic-grid {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}

.th-accordion-item .th-accordion-item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

/* Absolutní vyčištění obalových divů, které dělaly ty rozdílné mezery */
#th-calc-app>.th-calc-inputs {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#th-calc-app>#pro-purchase-section {
    margin: 0 0 20px 0 !important; /* OPRAVA: Vrácení mezery pod nákupním blokem */
    padding: 25px 20px !important;
    background: transparent !important;
}

/* OPRAVA ZÁHADNÉHO ŠEDÉHO POZADÍ NA MOBILU (Pojistka pro Drupal) */
.microsite-wrapper,
#th-calc-app,
.th-calc-wrapper {
    background: transparent !important;
}

#th-calc-app>div[style*="justify-content: flex-end"] {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 20px 0 !important;
    /* Sjednoceno na 20px */
    padding: 0 !important;
}

/* ================================================= */
/* === 6. MODERNÍ INPUTY A TLAČÍTKA === */
/* ================================================= */
.th-input-group input[type="number"],
.th-input-group select {
    background: #0a0a0a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    height: 42px !important;
    font-family: 'Roboto', sans-serif !important;
    transition: all 0.3s ease;
}

.th-input-group input[type="number"]:focus,
.th-input-group select:focus {
    border-color: #f9c343 !important;
    box-shadow: 0 0 0 1px rgba(249, 195, 67, 0.5) !important;
    outline: none;
}

.th-spin-btn {
    background: #222 !important;
    color: #888 !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
}

.th-input-group.locked input {
    color: rgba(255, 255, 255, 0.4) !important;
}

.th-spin-btn:hover {
    background: #f9c343 !important;
    color: #000 !important;
}

.th-calc-btn {
    width: 100% !important;
    border-radius: 8px !important;
    background: #f9c343 !important;
    color: #000 !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin: 0 0 20px 0 !important;
}

.th-calc-btn:hover {
    background: #ffcc4d !important;
    transform: translateY(-2px);
}

/* Přebarvení SVG ikon uvnitř žlutého tlačítka na černou */
.th-calc-btn svg path {
    fill: #000000 !important;
}

.th-calc-wrapper label {
    margin-bottom: 10px;
}

/* ================================================= */
/* === 7. OPRAVA VÝSLEDKŮ A TLAČÍTEK DOLE === */
/* ================================================= */
/* Responzivní mřížka pro výsledky */
.th-calc-result-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* Mobil: 1 sloupec pod sebou */
    gap: 15px !important;
    align-items: stretch !important;
}

@media (min-width: 768px) {
    .th-calc-result-grid {
        grid-template-columns: 1fr 1fr !important;
        /* PC/Tablet: 2 sloupce vedle sebe */
    }

    /* Přebití inline stylů z JS (zrušíme roztahování přes celou šířku) */
    .th-calc-result-grid>div {
        grid-column: span 1 !important;
    }
}

.result-card {
    background: #0a0a0a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    height: 100% !important;
    /* Karty vedle sebe budou stejně vysoké */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Vycentrování obsahu na střed výšky */
}

/* Třída highlight zrušena pro sjednocení vzhledu výsledků */
.result-card.highlight {
    border-color: #2a2a2a !important;
    background: #0a0a0a !important;
}

.th-btns-row {
    max-width: 600px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
}

/* ================================================= */
/* === 8. OPRAVA ANIMACE PROBLIKNUTÍ (PRO BLOK) ===  */
/* ================================================= */
/* Obejítí !important restrikcí pomocí pseudo-elementu */
.th-pro-purchase-block {
    position: relative !important;
}

.th-pro-purchase-block::after {
    content: "";
    position: absolute;
    /* O kousek větší než samotný blok, aby to udělalo hezkou záři */
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    border: 2px solid #f9c343;
    box-shadow: 0 0 35px rgba(249, 195, 67, 0.6), inset 0 0 15px rgba(249, 195, 67, 0.2);
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

/* Spuštění animace při přidání třídy z JS */
.th-pro-purchase-block.th-highlight-flash::after {
    animation: proFlashModern 1.5s ease-out;
}

@keyframes proFlashModern {
    0% {
        opacity: 0;
        transform: scale(0.99);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ================================================= */
/* === 9. MOBILNÍ OPTIMALIZACE A OPRAVY CHYB ===     */
/* ================================================= */
@media (max-width: 900px) {

    /* 0. VIZUÁLNÍ ÚKLID HLAVIČKY (Centrování na mobilu) */
    .th-app-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
        padding-top: 10px !important;
    }

    .th-app-header>div:first-child {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .th-share-widget {
        margin: 0 auto !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* 1. Zrušení sticky SVG na mobilu - ať to nejezdí dolů */
    #sticky-placeholder {
        display: none !important;
    }

    #th-svg-wrapper,
    #th-svg-wrapper.stuck {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        height: auto !important;
        margin-bottom: 20px !important;
        z-index: 1 !important;
    }

    .th-visual-container {
        position: relative !important;
        height: auto !important;
        display: block !important;
    }

    /* 2. Zamezení posouvání stránky doprava (Horizontal overflow fix) */
    body,
    html {
        overflow-x: hidden !important;
    }

    .microsite-wrapper {
        overflow-x: visible !important; /* OPRAVA: Povolí stínům přesahovat ven, aby se neořezávaly */
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 3. Oprava "Rekapitulace korpusu" - aby text nepřetékal */
    .result-card>div[style*="display: flex"],
    .result-card>div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* 4. Oprava "Rozpis vrtání" - ZAROVNÁNÍ DOLŮ A ZALOMENÍ DO 2 ŘÁDKŮ */
    .drilling-list {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Obal jednotlivé zásuvky - přidáme padding, aby to nebylo nalepené na krajích */
    .drilling-list>div {
        min-width: 0 !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
    }

    /* Samotný řádek s hodnotami (4 sloupce) */
    .drilling-list>div>div[style*="display: flex"],
    .drilling-list>div>div[style*="display:flex"] {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        /* KLÍČOVÉ: Donutí všechny buňky v řádku mít stejnou výšku */
        gap: 20px 0 !important;
    }

    /* Jednotlivé sloupce (buňky s čísly) */
    .drilling-list>div>div[style*="display: flex"]>div,
    .drilling-list>div>div[style*="display:flex"]>div {
        width: 48% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        /* Nyní už to bude fungovat a zarovná čísla absolutně dolů */
        align-items: center !important;
        text-align: center !important;
    }

    /* Zmenšení textů pro lepší čitelnost na mobilu a úsporu místa */
    .drilling-list div[style*="font-size:10px"],
    .drilling-list div[style*="font-size: 10px"],
    .drilling-list div[style*="font-size:11px"],
    .drilling-list div[style*="font-size: 11px"] {
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        /* Mezera mezi textem a číslem */
        word-wrap: break-word !important;
    }

    /* Zmenšení samotných čísel výsledků a zalomení jednotek pod číslo (POUZE MOBIL) */
    .drilling-list .res-row {
        flex-direction: column !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .drilling-list .res-num {
        font-size: 16px !important;
    }

    .drilling-list .res-unit {
        font-size: 10px !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
        display: block !important;
    }

    /* 5. Oprava tlačítek KOUPIT a textů okolo */
    .th-buy-title {
        text-align: center !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
    }

    .th-buy-buttons {
        gap: 10px !important;
        width: 100% !important;
    }

    /* Tlačítka naskládáme chytře - CZ/SK štítek bude NAD textem KOUPIT */
    .th-btn-buy {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 10px 5px !important;
        font-size: 13px !important;
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .th-btn-badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
        margin: 0 !important;
    }

    /* Kupón a slevový text - aby nepřetékal z obrazovky */
    .th-coupon-box {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 10px !important;
    }

    .cw-lang-switcher {
        margin-bottom: 10px;
    }

    /* 6. OPRAVA TOOLTIPŮ NA MOBILU (Řídí to přesně JavaScript) */
    .th-help-icon .th-tooltip-box,
    .th-help-icon .th-tooltip-box.th-tt-shift-left,
    .th-help-icon .th-tooltip-box.th-tt-shift-right,
    .th-basic-grid>div:nth-child(odd) .th-help-icon .th-tooltip-box,
    .th-expert-grid>div:nth-child(odd) .th-help-icon .th-tooltip-box,
    .th-grid-2>div:nth-child(odd) .th-help-icon .th-tooltip-box,
    div[style*="grid-column: span"] .th-help-icon .th-tooltip-box,
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box {
        width: 265px !important;
        max-width: 90vw !important;
        white-space: normal !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px) !important;
    }

    .th-help-icon:hover .th-tooltip-box,
    .th-help-icon:active .th-tooltip-box,
    .th-help-icon:focus .th-tooltip-box,
    .th-basic-grid>div:nth-child(odd) .th-help-icon:hover .th-tooltip-box,
    .th-expert-grid>div:nth-child(odd) .th-help-icon:hover .th-tooltip-box,
    .th-grid-2>div:nth-child(odd) .th-help-icon:hover .th-tooltip-box,
    div[style*="grid-column: span"] .th-help-icon:hover .th-tooltip-box,
    .th-basic-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box,
    .th-expert-grid>div:nth-child(even) .th-help-icon:hover .th-tooltip-box,
    .th-grid-2>div:nth-child(even) .th-help-icon:hover .th-tooltip-box {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Skrytí šipky na mobilu */
    .th-help-icon .th-tooltip-box::after,
    .th-help-icon .th-tooltip-box.th-tt-shift-left::after,
    .th-help-icon .th-tooltip-box.th-tt-shift-right::after,
    .th-basic-grid>div:nth-child(odd) .th-help-icon .th-tooltip-box::after,
    .th-expert-grid>div:nth-child(odd) .th-help-icon .th-tooltip-box::after,
    .th-grid-2>div:nth-child(odd) .th-help-icon .th-tooltip-box::after,
    .th-basic-grid>div:nth-child(even) .th-help-icon .th-tooltip-box::after,
    .th-expert-grid>div:nth-child(even) .th-help-icon .th-tooltip-box::after,
    .th-grid-2>div:nth-child(even) .th-help-icon .th-tooltip-box::after {
        display: none !important;
    }
}

/* ================================================= */
/* === 10. ROZLOŽENÍ VÝSLEDKŮ NA ŠIROKÉM MONITORU === */
/* ================================================= */
@media (min-width: 1200px) {

    /* Zapneme grid pro celý černý blok s výsledky, POUZE když není skrytý přes JS */
    #th-result-output:not([style*="display: none"]):not([style*="display:none"]) {
        display: grid !important;
        /* Levý sloupec 35% (karty), pravý zbytek místa (tabulka vrtání) */
        grid-template-columns: 35% 1fr !important;
        gap: 0 40px !important;
        align-items: start !important;
    }

    /* Výchozí pravidlo: Všechny prvky uvnitř (nadpisy, tabulka) jdou do pravého sloupce */
    #th-result-output>* {
        grid-column: 2 / 3 !important;
    }

    /* VÝJIMKA 1: Mřížka se 4 kartami jde do levého sloupce */
    #th-result-output>.th-calc-result-grid {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 20 !important;
        /* Dovolíme levému sloupci roztáhnout se na výšku */
        display: flex !important;
        flex-direction: column !important;
        /* Poskládá ty 4 karty hezky pod sebe */
        gap: 15px !important;
        margin-top: 10px !important;
        /* Lehké optické zarovnání s nadpisem vpravo */
    }

    /* VÝJIMKA 2: Pokud jsou na konci výsledků nějaká tlačítka nebo upozornění, dáme je dolů přes celou šířku */
    #th-result-output>.th-buy-wrapper,
    #th-result-output>.th-coupon-box,
    #th-result-output>#pro-purchase-section {
        grid-column: 1 / -1 !important;
        margin-top: 20px !important;
    }

    /* Mírné zvětšení písma v tabulce vrtání, když máme tolik místa vpravo */
    .drilling-list .res-num {
        font-size: 20px !important;
    }
}

/* ================================================= */
/* === 11. DONATE FOOTER (PROFI WIDE STYLE) ===      */
/* ================================================= */
.th-donate-wrapper {
    /* Roztažení na stejnou šířku jako Beta blok */
    width: 100% !important;
    margin: 20px 0 40px 0 !important;
    background: #0a0a0a !important;
    /* Stejné temné pozadí jako Beta blok */
    border: 1px solid #1a1a1a !important;
    /* Velmi jemný rámeček */
    border-left: 3px solid #f9c343 !important;
    /* Typická žlutá linka vlevo */
    padding: 25px 30px !important;
    box-sizing: border-box !important;
    /* Flexbox pro rozložení: text vlevo, tlačítko vpravo */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 40px !important;
}

.th-donate-content {
    flex: 1 !important;
}

.th-donate-title {
    color: #f9c343 !important;
    font-size: 13px !important;
    /* Stejná velikost jako nadpis Beta bloku */
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.th-donate-text {
    font-size: 13px !important;
    /* Stejná velikost jako text v Beta bloku */
    line-height: 1.6 !important;
    color: #b3b3b3 !important;
    /* Světle šedá pro lepší čitelnost */
    margin: 0 !important;
}

.th-donate-action {
    flex-shrink: 0 !important;
}

.th-donate-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f9c343 !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 12px 30px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.th-donate-btn:hover {
    background: #ffcc4d !important;
    transform: translateY(-2px) !important;
}

/* Mobilní zobrazení - poskládá se to pod sebe */
@media (max-width: 768px) {
    .th-donate-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
        gap: 20px !important;
    }

    .th-donate-action,
    .th-donate-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ================================================= */
/* === 11. DONATE FOOTER (MODERN PROFI STYLE) ===    */
/* ================================================= */
.th-donate-wrapper {
    max-width: 800px !important;
    margin: 60px auto 40px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.th-donate-card {
    background: #161616 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    /* Profi stín a jemný vnitřní odlesk */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(249, 195, 67, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Moderní horní svítící linka (glow efekt do ztracena) */
.th-donate-card::before {
    content: "";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #f9c343, transparent) !important;
    opacity: 0.8 !important;
}

.th-donate-title {
    color: #f9c343 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.th-donate-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #b3b3b3 !important;
    margin-bottom: 10px !important;
    /* Tady je ta změna, která to posune nahoru */
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.th-donate-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f9c343 !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 14px 40px !important;
    border-radius: 8px !important;
    /* Stejné jako hlavní tlačítko */
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.th-donate-btn:hover {
    background: #ffcc4d !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(249, 195, 67, 0.3) !important;
}

@media (max-width: 768px) {
    .th-donate-card {
        padding: 30px 20px !important;
    }

    .th-donate-title {
        font-size: 18px !important;
    }

    .th-donate-text {
        font-size: 14px !important;
    }
}

/* ================================================= */
/* === OPRAVA MEZERY NAD TLAČÍTKEM DONATE ===        */
/* ================================================= */
/* Zrušení natahování odstavce */
.th-footer-box p {
    flex-grow: 0 !important;
    margin-bottom: 15px !important;
    /* Zde si můžeš ladit mezeru mezi textem a tlačítkem */
}

/* Zrušení odskoku tlačítka na dno */
.th-footer-box div[style*="margin-top: auto"] {
    margin-top: 0 !important;
}

/* ================================================= */
/* === 12. PROMO BLOKY (PLÁNY A NÁVODY) ===          */
/* ================================================= */
.th-promo-section {
    width: 100%;
    max-width: 1000px !important;
    /* Širší, aby se vešly 3 vedle sebe hezky */
    margin: 60px auto 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    font-family: 'Roboto', sans-serif !important;
}

.th-promo-main-title {
    text-align: center !important;
    color: #f9c343 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.th-promo-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Tablet: 2 vedle sebe */
@media (max-width: 900px) {
    .th-promo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobil: 1 pod sebou */
@media (max-width: 600px) {
    .th-promo-grid {
        grid-template-columns: 1fr !important;
    }
}

.th-promo-card {
    background: #161616 !important;
    /* Stejná barva jako karty v kalkulačce */
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.th-promo-card:hover {
    transform: translateY(-5px) !important;
    border-color: #f9c343 !important;
    box-shadow: 0 8px 25px rgba(249, 195, 67, 0.15) !important;
}

.th-promo-img-wrapper {
    width: 100% !important;
    height: 180px !important;
    background: #0a0a0a !important;
    overflow: hidden !important;
    position: relative !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.th-promo-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.th-promo-card:hover .th-promo-img-wrapper img {
    transform: scale(1.05) !important;
}

.th-promo-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #161616 !important;
}

.th-promo-card-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
}

.th-promo-card-text {
    color: #b3b3b3 !important;
    font-size: 13px !important;
    /* Sjednoceno s texty v kalkulačce */
    line-height: 1.6 !important;
    margin: 0 0 25px 0 !important;
    flex-grow: 1 !important;
}

.th-promo-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #f9c343 !important;
    text-align: center !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    /* Sjednoceno s tlačítky kalkulačky */
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(249, 195, 67, 0.3) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
    margin-top: auto !important;
}

.th-promo-card:hover .th-promo-btn {
    background: #f9c343 !important;
    color: #000 !important;
    border-color: #f9c343 !important;
}

/* ================================================= */
/* === 13. VIDEO PŘEDSTAVENÍ (PROFI WIDE STYLE) ===  */
/* ================================================= */
.th-video-promo-wrapper {
    width: 100% !important;
    /* ZMĚNĚNO: Vyplní celý obal na 100 % */
    max-width: 100% !important;
    /* ZMĚNĚNO: Zrušeno staré omezení na 1400px */
    margin: 0 auto 60px auto !important;
    background: rgba(22, 22, 22, 0.6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: center !important;
}

.th-video-promo-text {
    flex: 1 1 300px !important;
    text-align: left !important;
}

.th-video-promo-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #f9c343 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

.th-video-promo-desc {
    color: #b3b3b3 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.th-video-promo-iframe {
    flex: 1.8 1 450px !important;
    /* Číslo 1.8 zajistí, že video zabere opticky víc místa než text */
    width: 100% !important;
}

.th-video-promo-iframe .iframe-container {
    position: relative !important;
    padding-bottom: 56.25% !important;
    /* Zachová dokonalý poměr stran 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #000 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    /* Lehký stín pod samotným videem */
}

.th-video-promo-iframe iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* --- MOBILNÍ ZOBRAZENÍ --- */
@media (max-width: 768px) {
    .th-video-promo-wrapper {
        padding: 25px 20px !important;
        gap: 25px !important;
        margin-bottom: 40px !important;
    }

    .th-video-promo-text {
        text-align: center !important;
        /* Na mobilu text vycentrujeme nad videem */
    }

    .th-video-promo-title {
        font-size: 18px !important;
    }
}

/* --- NOVÉ STYLY PRO SEZNAM FUNKCÍ VEDLE VIDEA --- */
.th-video-features {
    margin-top: 20px !important;
    text-align: left !important;
    font-family: 'Roboto', sans-serif !important;
}

.th-features-title {
    color: #b3b3b3 !important;
    /* Sjednoceno s šedým textem, aby to neřvalo */
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.th-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.th-feature-list li {
    position: relative !important;
    padding-left: 24px !important;
    /* Místo pro vlastní fajfku */
    color: #b3b3b3 !important;
    /* Tvoje standardní šedá barva */
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Vlastní žlutá fajfka přes SVG background (přesně v barvě #f9c343) */
.th-feature-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    /* Optické zarovnání s prvním řádkem textu */
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9c343' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.th-feature-list li strong {
    color: #e0e0e0 !important;
    /* Jemnější bílá pro nadpisy, aby to nebylo tak agresivní */
    font-weight: 700 !important;
}

/* Zobrazení seznamu funkcí na mobilu a přesunutí POD video */
@media (max-width: 768px) {
    .th-video-promo-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        /* Zmenšíme globální mezeru, řídíme si to přesněji */
    }

    /* "Rozpustíme" obal textů, aby se jeho vnitřnosti staly přímými potomky flexboxu a mohli jsme je seřadit */
    .th-video-promo-text {
        display: contents !important;
    }

    /* Seřadíme prvky přesně tak, jak chceme: Nadpis -> Text -> Video -> Funkce */
    .th-video-promo-title {
        order: 1 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    .th-video-promo-desc {
        order: 2 !important;
        text-align: center !important;
    }

    .th-video-promo-iframe {
        order: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
        flex: none !important;
        /* TOTO JE TEN FIX: Zruší vynucenou výšku 450px */
    }

    .th-video-features {
        display: block !important;
        order: 4 !important;
        margin-top: 15px !important;
    }
}

/* ================================================= */
/* === INFORMAČNÍ TEXTY POD INPUTY (MIN/MAX, ATD.) === */
/* ================================================= */
.th-input-subtext {
    text-align: center !important;
    color: rgb(255, 255, 255, 0.65) !important;
    margin-top: 4px !important;
    font-style: italic !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    display: block !important;
}

/* ================================================= */
/* === 15. SPODNÍ ŽLUTÉ POZNÁMKY VE VÝSLEDCÍCH ===   */
/* ================================================= */
.th-result-bottom-note {
    color: #f9c343 !important;
    font-size: 11px !important;
    margin-top: 10px !important;
    text-align: center !important;
}

/* ================================================= */
/* === 16. UNIFIKOVANÉ NADPISY VÝSLEDKŮ ===          */
/* ================================================= */
.th-result-title {
    text-align: center !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    color: #c0c0c0 !important;
    letter-spacing: 1px !important;
    font-weight: normal !important;
}

/* --- STYLY PRO CHANGELOG --- */
.th-changelog-container {
    background: #161616 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    margin: 40px auto 0 auto !important;
    /* Mezera nad changelogem */
    width: 600px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    grid-column: 1 / -1 !important;
    /* Roztažení přes celý grid, pokud je v něm */
}

.th-changelog-header {
    padding: 10px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    background: #1a1a1a !important;
    transition: background 0.3s ease !important;
}

.th-changelog-header:hover {
    background: #222 !important;
}

.th-changelog-title {
    color: #ddd !important;
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.th-icon-wrapper-20 {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.th-changelog-toggle {
    color: #ddd !important;
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
}

.th-changelog-content {
    display: none;
    /* Skryto v základu */
    padding: 0 20px 20px 20px !important;
    border-top: 1px solid #2a2a2a !important;
}

.th-changelog-item {
    padding: 15px 0 !important;
    border-bottom: 1px dashed #333 !important;
}

.th-changelog-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.th-cl-version {
    color: #f9c343 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

.th-cl-desc {
    color: #b3b3b3 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

#cw-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    color: #f1f1f1;
    padding: 15px 20px;
    text-align: center;
    z-index: 9999;
    display: none;
    /* Skryto v základu, JS to zobrazí */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    font-family: 'Roboto', Arial, sans-serif;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cw-cookie-text {
    display: inline-block;
    margin: 0 20px 0 0;
    font-size: 14px;
}

.cw-cookie-link {
    color: #f9c343;
    text-decoration: underline;
}

.cw-cookie-btn {
    background-color: #f9c343;
    color: #111;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s;
}

.cw-cookie-btn:hover {
    background-color: #e6b030;
}

/* ========================================= */
/* === OPTICUTTER MŘÍŽKA (2 SLOUPCE) ===     */
/* ========================================= */
.th-opti-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100%;
    align-items: start !important;
}

@media (max-width: 900px) {
    .th-opti-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ========================================= */
/* === PILULKOVÉ PŘEPÍNAČE (NÁŘEZOVÝ PLÁN) === */
/* ========================================= */
.th-pill-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.th-pill-col .th-label-row {
    margin-bottom: 10px !important;
    min-height: auto !important;
    /* Zruší globálních 48px POUZE pro tyto přepínače */
    align-items: flex-start !important;
    /* Přitáhne text nahoru k podnadpisu */
}

.th-pill-group {
    display: flex !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 30px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    /* Roztáhne se na zbývající výšku sloupce */
    align-items: stretch !important;
    /* Tlačítka budou stejně vysoká */
}

.th-pill-label {
    flex: 1 !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
}

.th-pill-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 5px !important;
    /* Menší padding do stran, aby se vešel text */
    font-size: 11px !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    color: #aaa !important;
    display: flex !important;
    align-items: center !important;
    /* Dokonalé vertikální vycentrování */
    justify-content: center !important;
    /* Horizontální vycentrování */
    text-align: center !important;
    line-height: 1.2 !important;
    height: 100% !important;
}

input[type="radio"]:checked+.th-pill-btn {
    background: #f9c343 !important;
    color: #000 !important;
    font-weight: bold !important;
    box-shadow: 0 2px 10px rgba(249, 195, 67, 0.3) !important;
}

input[type="radio"]:not(:checked)+.th-pill-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================= */
/* === STYLY PRO SDÍLENÍ A PDF (OPRAVA) ===  */
/* ========================================= */
/* Hlavní kontejner pro všechny 3 prvky vedle sebe na PC */
.th-btns-row-new {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* OPRAVA: Zarovná tlačítka shora do jedné roviny */
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* 1. Tlačítko PDF */
.th-pdf-wrapper {
    position: relative;
    flex: 0 1 auto;
    /* Nenecháme ho roztahovat na celou šířku */
}

.th-pdf-wrapper .th-btn-outline-yellow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    height: auto;
    /* Flexibilní výška pro případ zalomení textu na malých mobilech */
    margin: 0;
    padding: 8px 15px;
    box-sizing: border-box;
    white-space: normal; /* OPRAVA: Povolí zalomení textu, aby nepřetékal z obrazovky */
    text-align: center;
    line-height: 1.2;
}

/* OPRAVA: Zrušení zbytečné mezery před textem "S NÁŘEZOVÝM PLÁNEM" */
.th-pdf-wrapper .th-btn-outline-yellow span {
    margin-left: 0 !important;
}

/* 2. Tlačítka Uložit URL a Uložit projekt */
.th-share-wrapper {
    flex: 0 1 auto;
}

/* Prohození pořadí tlačítek na počítači (Uložit projekt bude první) */
.th-share-wrapper button[onclick*="saveCurrentProject"] {
    order: -1;
}

.th-share-wrapper .th-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    /* Stejná výška jako PDF */
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 50px;
}

/* 3. Pilulka se sociálními ikonkami */
.th-config-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    /* Stejná výška jako ostatní tlačítka */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    gap: 10px;
}

.th-socials-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
    white-space: nowrap;
}

/* Dokonale kulaté ikonky (oprava šišatosti) */
.th-config-socials a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    /* Zabrání smrsknutí flexboxem */
    min-height: 30px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.th-config-socials a svg {
    width: 14px !important;
    height: 14px !important;
    fill: #ccc !important;
    transition: fill 0.3s ease !important;
    display: block !important;
}

.th-config-socials a:hover {
    background: #f9c343 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 10px rgba(249, 195, 67, 0.3) !important;
}

.th-config-socials a:hover svg {
    fill: #000 !important;
}

/* ========================================= */
/* === MOBILNÍ ZOBRAZENÍ (POD SEBOU) ===     */
/* ========================================= */
@media (max-width: 800px) {
    .th-btns-row-new {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    .th-pdf-wrapper,
    .th-share-wrapper,
    .th-config-socials {
        width: 100% !important;
        flex: none !important;
    }

    /* Zlomení obalu s tlačítky Uložit, aby se poskládala pod sebe */
    .th-share-wrapper {
        flex-direction: column !important;
        gap: 15px !important; /* Stejná mezera jako u ostatních tlačítek */
    }

    .th-share-wrapper .th-share-btn {
        width: 100% !important;
        height: 46px !important; /* Vynucení správné výšky */
        min-height: 46px !important;
        flex: none !important; /* Zrušení inline flex: 1, které tlačítka deformovalo */
        border-radius: 50px !important;
    }

    /* Tlačítko Uložit projekt bude na mobilu NAD tlačítkem Uložit konfiguraci */
    .th-share-wrapper button[onclick*="saveCurrentProject"] {
        order: -1 !important;
    }

    /* NOVÉ: Roztažení samotného PDF tlačítka na 100% */
    .th-pdf-wrapper .th-btn-outline-yellow {
        width: 100% !important;
    }
}

/* ========================================= */
/* === OPRAVA MODÁLNÍHO OKNA (E-MAIL) ===    */
/* ========================================= */
/* Odsazení informačního textu pod tlačítky Kutil/Truhlář */
.th-modal-type-info {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    display: block !important;
}

/* --- ROZVRŽENÍ KALKULAČKY (Desktop Grid) --- */
@media (min-width: 768px) {
    #th-calc-app {
        display: grid;
        grid-template-columns: 380px 1fr;
        column-gap: 40px;
        row-gap: 0px;
    }

    .th-app-header {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .th-mode-switch-container {
        grid-column: 1 / 2;
        grid-row: 2;
    }

    .th-visual-container {
        grid-column: 2 / 3;
        grid-row: 2 / 8;
    }

    .th-calc-inputs {
        grid-column: 1 / 2;
        grid-row: 4;
    }

    .th-accordion-item {
        grid-column: 1 / 2;
        grid-row: 5;
        width: 100%;
        box-sizing: border-box;
    }

    .th-calc-btn {
        grid-column: 1 / -1;
        grid-row: 7;
        margin-top: 30px;
    }

    #pdf-btn-container {
        grid-column: 1 / -1;
        grid-row: 8;
    }

    .th-calc-result {
        grid-column: 1 / -1;
        grid-row: 9;
    }
}

/* ========================================= */
/* === OPRAVY NA ZÁKLADĚ ZPĚTNÉ VAZBY ===    */
/* ========================================= */
@media (max-width: 900px) {

    /* 1. Dodatečné odsazení na mobilu: Přepínač 100%, inputy vedle sebe (Flexbox magie) */
    .th-is-mobile #margin_inputs_container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .th-is-mobile #margin_inputs_container>.th-pill-col {
        width: 100% !important;
    }

    .th-is-mobile #margin_inputs_container>#margin_left_container,
    .th-is-mobile #margin_inputs_container>#margin_right_container {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* 2. Zákaz zalamování sloupců u výsledků (Kóty musí zůstat vedle sebe) */
    .drilling-list>div>div[style*="display: flex"],
    .drilling-list>div>div[style*="display:flex"] {
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }

    /* Zrušení vynucené šířky 48%, která to rozbíjela */
    .drilling-list>div>div[style*="display: flex"]>div:not(:first-child),
    .drilling-list>div>div[style*="display:flex"]>div:not(:first-child) {
        width: auto !important;
        flex: 1 !important;
    }

    /* 3. Vynucené centrování VŠECH tooltipů na mobilu (Definitivní fix) */
    #th-calc-app .th-help-icon .th-tooltip-box,
    #th-calc-app .th-help-icon .th-tooltip-box.th-tt-shift-left,
    #th-calc-app .th-help-icon .th-tooltip-box.th-tt-shift-right {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px) !important;
        margin-left: 0 !important;
    }

    #th-calc-app .th-help-icon:hover .th-tooltip-box,
    #th-calc-app .th-help-icon:active .th-tooltip-box,
    #th-calc-app .th-help-icon:hover .th-tooltip-box.th-tt-shift-left,
    #th-calc-app .th-help-icon:active .th-tooltip-box.th-tt-shift-left {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ================================================= */
/* === ÚKLID HLAVIČKY NA MOBILU (ÚSPORA MÍSTA) ===   */
/* ================================================= */
@media (max-width: 1199px) {

    /* 1. Skrytí horních sociálních ikon (zůstanou jen dole ve výsledcích) */
    .th-social-sidebar {
        display: none !important;
    }

    /* 2. Skrytí původního přepínače jazyků v hlavičce */
    .cw-lang-switcher {
        display: none !important;
    }

    /* 3. Zobrazení přepínače jazyků POUZE uvnitř mobilního menu */
    .th-mobile-overlay .cw-lang-switcher {
        display: inline-flex !important;
        margin-top: 30px !important;
        transform: scale(1.2);
        /* Mírné zvětšení pilulky, aby se na mobilu lépe mačkala */
    }
}

/* Skrytí FB tlačítka na počítači (Neprůstřelný selektor) */
#th-calc-app:not(.th-is-mobile) a[onclick*="'fb'"],
#th-calc-app:not(.th-is-mobile) a[onclick*='"fb"'],
#th-calc-app:not(.th-is-mobile) .th-btn-fb {
    display: none !important;
}

/* ========================================= */
/* === NATIVNÍ SDÍLENÍ (MOBIL) ===           */
/* ========================================= */
/* Skrytí nativního tlačítka na PC */
#th-native-share-btn {
    display: none !important;
}

/* Vykreslení SVG ikony pomocí masky (aby fungovala změna barvy jako u inline SVG) */
.th-native-share-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ccc;
    -webkit-mask: url(/img/share-arrows.svg) no-repeat center / contain;
    mask: url(/img/share-arrows.svg) no-repeat center / contain;
    transition: background-color 0.3s ease;
}

.th-config-socials a:hover .th-native-share-icon {
    background-color: #000;
}

@media (max-width: 900px) {

    /* Skryjeme původní text s dvojtečkou a všechny specifické sociální ikony */
    .th-config-socials .th-socials-label,
    .th-config-socials a:not(#th-native-share-btn) {
        display: none !important;
    }

    /* Zrušíme původní pilulkový obal, aby nepřekážel novému tlačítku */
    .th-config-socials {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Z nativního tlačítka uděláme plnohodnotný velký button (jako Uložit konfiguraci) */
    .th-is-mobile #th-native-share-btn {
        display: flex !important;
        width: 100% !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 1px solid #555 !important;
        color: #aaa !important;
        border-radius: 50px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
        gap: 10px !important;
        transition: all 0.3s ease !important;
    }

    /* Hover efekt stejný jako u Uložit konfiguraci */
    .th-is-mobile #th-native-share-btn:hover,
    .th-is-mobile #th-native-share-btn:active {
        border-color: #f9c343 !important;
        color: #f9c343 !important;
        background: rgba(249, 195, 67, 0.05) !important;
    }

    /* Ikona už nebude mít kolečko, jen převezme barvu textu (currentColor) */
    .th-is-mobile .th-native-share-icon {
        background-color: currentColor !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
}

/* ================================================= */
/* === 17. FYZIKA NA POZADÍ (DISCLAIMER BLOK) ===    */
/* ================================================= */
.th-physics-info-wrapper {
    max-width: 1000px !important;
    /* Omezení šířky přesně jako mají plány dole */
    margin: 40px auto !important;
    /* Vycentrování celého bloku na střed */
    padding: 0 20px !important;
    /* Bezpečné odsazení textu od krajů displeje */
    box-sizing: border-box !important;
}

/* Na počítači rozdělíme text do 2 sloupců pro profi vzhled a lepší čitelnost */
@media (min-width: 900px) {
    .th-physics-info-wrapper p {
        column-count: 2 !important;
        /* Rozdělí text na 2 sloupce */
        column-gap: 40px !important;
        /* Mezera mezi sloupci */
        text-align: justify !important;
        /* Zarovnání do bloku, aby sloupce měly hezké hrany */
    }
}

/* ========================================= */
/* === STYLY PRO HLAVNÍ ROZCESTNÍK (HUB) === */
/* ========================================= */
body.hub-body {
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    padding: 0;
    align-items: center;
    min-height: 100vh;
}

.hub-container {
    width: 100%;
    max-width: 650px;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

/* HLAVIČKA A LOGO */
.hub-header {
    margin-bottom: 50px;
}

.hub-logo-svg {
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 10px rgba(249, 195, 67, 0.2));
    width: 60px;
    height: auto;
}

.hub-title {
    font-size: 42px;
    font-weight: 900;
    margin: 0;
    letter-spacing: 2px;
    color: #ffffff;
}

.hub-title span {
    color: #f9c343;
}

.hub-subtitle {
    font-size: 16px;
    color: #888888;
    margin-top: 10px;
    font-weight: 300;
}

/* PRÉMIOVÉ TLAČÍTKO (KARTA) */
.premium-btn {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 60px;
    padding: 20px 30px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.premium-btn:hover {
    background: rgba(249, 195, 67, 0.05);
    border-color: #f9c343;
    box-shadow: 0 15px 35px rgba(249, 195, 67, 0.15);
    transform: translateY(-5px);
}

.btn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(249, 195, 67, 0.1);
    border-radius: 50%;
    margin-right: 25px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.premium-btn:hover .btn-icon-wrapper {
    background: #f9c343;
}

.btn-icon-wrapper svg {
    width: 34px !important;
    height: 34px !important;
    transition: all 0.3s ease;
}

.premium-btn:hover .btn-icon-wrapper svg path,
.premium-btn:hover .btn-icon-wrapper svg line,
.premium-btn:hover .btn-icon-wrapper svg rect,
.premium-btn:hover .btn-icon-wrapper svg polyline,
.premium-btn:hover .btn-icon-wrapper svg circle {
    stroke: #000000 !important;
}

.btn-text-content {
    text-align: left;
}

.btn-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.premium-btn:hover .btn-title {
    color: #f9c343;
}

.btn-desc {
    display: block;
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.4;
}

.btn-arrow {
    margin-left: auto;
    color: #555;
    font-size: 24px;
    transition: all 0.3s ease;
}

.premium-btn:hover .btn-arrow {
    color: #f9c343;
    transform: translateX(5px);
}

.premium-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

.hub-footer {
    margin-top: 40px;
    text-align: center;
}

.hub-footer a {
    display: inline-block;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.hub-footer a:hover {
    opacity: 1;
    transform: scale(1.05);
}

.hub-footer img {
    height: 95px;
    width: auto;
}

@media (max-width: 1199px) {
    .hub-flags {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .th-social-sidebar {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .hub-flags {
        display: none !important;
    }

    .hub-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .premium-btn {
        padding: 15px 20px !important;
        border-radius: 24px !important;
        margin-bottom: 15px !important;
    }

    .btn-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        margin-right: 15px !important;
    }

    .btn-icon-wrapper svg {
        width: 24px !important;
        height: 24px !important;
    }

    .btn-title {
        font-size: 17px !important;
        margin-bottom: 4px !important;
    }

    .btn-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .btn-arrow {
        font-size: 20px !important;
        margin-left: 10px !important;
    }
}

/* ========================================= */
/* === CENTRÁLNÍ PŘEPÍNAČ JAZYKŮ ===         */
/* ========================================= */
.cw-lang-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #161616;
    border: 1px solid #333;
    border-radius: 30px;
    padding: 3px;
    align-items: center;
    gap: 2px;
}

.cw-lang-btn {
    text-decoration: none;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    color: #888;
    background: transparent;
    line-height: 1.2;
}

.cw-lang-btn:hover {
    color: #fff;
}

.cw-lang-btn.active {
    background: #f9c343;
    color: #000;
    box-shadow: 0 2px 10px rgba(249, 195, 67, 0.2);
}

/* ========================================= */
/* === BOČNÍ PANEL PRO SDÍLENÍ (SOCIAL) ===  */
/* ========================================= */
/* DESKTOP: Fixní panel vpravo */
.th-social-sidebar {
    position: fixed;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 99999;
}

.th-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 12px 0 0 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
}

.th-social-btn svg {
    fill: #ffffff;
    transition: fill 0.3s;
    width: 22px;
    height: 22px;
    display: block;
}

.th-social-btn:hover {
    transform: translateX(-12px);
    background: #f9c343;
    border-color: #f9c343;
}

.th-social-btn:hover svg {
    fill: #000000;
}

/* MOBILNÍ ZOBRAZENÍ: Zpět do řádku */
@media (max-width: 768px) {
    .th-social-sidebar {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .th-social-btn {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        width: 42px;
        height: 42px;
    }

    .th-social-btn:hover {
        transform: translateY(-5px);
    }
}

/* ========================================= */
/* === MODERNÍ POČÍTADLO VÝPOČTŮ ===         */
/* ========================================= */
.th-counter-wrapper {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(249, 195, 67, 0.05);
    border: 1px solid rgba(249, 195, 67, 0.2);
    padding: 6px 15px;
    border-radius: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.th-counter-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.th-counter-text {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.th-counter-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: 900;
    color: #f9c343;
    text-shadow: 0 0 8px rgba(249, 195, 67, 0.6);
    letter-spacing: 1px;
    min-width: 70px;
    text-align: right;
    display: inline-block;
}

/* ========================================== */
/* PRO FUNKCE - BADGE A IKONY                 */
/* ========================================== */

/* Obal pro nadpis a badge vedle sebe */
.th-title-with-badge {
    display: flex;
    align-items: center;
}

/* Žlutý štítek PRO (sjednocený s ikonou) */
.th-pro-badge {
    background-color: #f9c343;
    color: #000000;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px 3px 6px; /* Zleva o chloupek menší padding kvůli ikoně */
    border-radius: 12px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Mezera mezi korunou a textem */
    letter-spacing: 0.5px;
    position: relative;
    cursor: help;
    text-transform: uppercase;
    line-height: 1;
}

/* Modifikátor pro PRO štítek uvnitř textu (např. v banneru) */
.th-pro-badge.th-inline {
    margin: 0 5px;
    cursor: default;
    vertical-align: middle;
    top: -1px;
}

/* Tooltip pro PRO štítek */
.th-pro-badge .th-tooltip-box {
    display: none;
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #444444;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    font-weight: normal;
    text-transform: none;
}

.th-pro-badge:hover .th-tooltip-box {
    display: block;
}

/* Třída pro zarovnání ikony uvnitř tlačítka */
.th-btn-icon-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* OPRAVA: Zmenšená mezera mezi prvky v tlačítku */
    flex-wrap: wrap; /* OPRAVA: Povolí zalomení prvků, pokud se nevejdou */
}

/* ========================================== */
/* NÁHLED PDF A PULZOVÁNÍ TLAČÍTKA            */
/* ========================================== */
@keyframes th-btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 195, 67, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(249, 195, 67, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 195, 67, 0); }
}

.th-pulse-active {
    animation: th-btn-pulse 3s infinite;
}

.th-pdf-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.th-pdf-col .th-btn-outline-yellow {
    width: auto;
}

.th-pdf-preview-link {
    color: #aaa;
    font-size: 13px;
    text-decoration: underline;
    transition: color 0.2s;
    z-index: 10;
    margin-top: 10px;
    display: inline-block;
}

.th-pdf-preview-link:hover {
    color: #fff;
}

/* Modal pro náhled PDF */
.th-pdf-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.th-pdf-preview-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.th-pdf-preview-close {
    position: absolute;
    top: -40px;
    right: 0;
    cursor: pointer;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

.th-pdf-preview-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
    object-fit: contain;
}

.th-pdf-preview-note {
    margin-top: 20px;
    color: #aaa;
    font-size: 14px;
    text-align: center;
}

/* ========================================== */
/* IKONA KÁVY PRO DONATE BLOKY                */
/* ========================================== */
.th-about-donate-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px; /* Odsazení od textu nadpisu */
}

.th-about-donate-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ================================================= */
/* === SEZNAM S FAJFKAMI PRO PROLOG (16px) ===       */
/* ================================================= */
.th-prolog-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.th-prolog-list li {
    position: relative !important;
    padding-left: 28px !important;
    color: #bbb !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Žlutá SVG fajfka */
.th-prolog-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9c343' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Bílé tučné nadpisy */
.th-prolog-list li strong {
    color: #fff !important;
    font-weight: 700 !important;
}

/* ========================================= */
/* === PRÁVNÍ STRÁNKY (GDPR, OBCHODNÍ PODMÍNKY) === */
/* ========================================= */
body .microsite-wrapper.th-legal-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.th-legal-content {
    color: #e6e6e6;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
}

.th-legal-content a {
    color: #f9c343;
    text-decoration: none;
}

.th-legal-content a:hover {
    text-decoration: underline;
}

.th-legal-content h1,
.th-legal-content h3 {
    color: #f9c343;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 40px;
}

.th-legal-content h4 {
    color: #ffffff;
    margin-top: 20px;
}

.th-legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: rgba(255, 255, 255, 0.05);
}

.th-legal-content td {
    border: 1px solid #444;
    padding: 12px;
}

.th-legal-content td:first-child {
    font-weight: bold;
    background-color: #222;
    width: 30%;
    color: #fff;
}

.th-legal-content ul {
    padding-left: 20px;
}

.th-legal-content li {
    margin-bottom: 10px;
}

.th-legal-content .op-toc {
    background-color: #222;
    padding: 20px;
    border-radius: 5px;
    border-left: 5px solid #f9c343;
    margin-bottom: 30px;
}

.th-legal-content .op-toc h3 {
    margin-top: 0;
    border: none;
    padding-bottom: 0;
}

.th-legal-content .op-important-box {
    background-color: rgba(249, 195, 67, 0.1);
    border: 1px solid #f9c343;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    color: #f9c343;
}

.th-legal-content .op-alert-box {
    background-color: rgba(255, 50, 50, 0.1);
    border: 1px solid #ff3333;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    color: #ff6666;
}

/* ========================================= */
/* === STYLY PRO STRIPE MODÁLNÍ OKNO ===     */
/* ========================================= */
.th-stripe-checkbox-label a {
    color: #f9c343 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.th-stripe-checkbox-label a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* ========================================= */
/* === INFO O PLATBĚ A IKONY KARET (MODAL) === */
/* ========================================= */
.th-stripe-payment-info {
    text-align: center;
    margin-top: 15px;
    font-size: 11px;
    color: #888;
    letter-spacing: 0.5px;
}

.th-stripe-payment-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

/* Tvar platební karty (rámeček) - ZVĚTŠENO */
.th-pay-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: default;
    padding: 0 6px;
    box-sizing: border-box;
}

/* Samotné oficiální logo uvnitř - ZVĚTŠENO */
.th-pay-card svg {
    height: 40px;
    width: auto;
    max-width: 100%;
    fill: #888; /* Výchozí tlumená barva */
    transition: fill 0.3s ease;
    display: block;
}

/* Hover efekt - karta se rozsvítí žlutě a poskočí */
.th-pay-card:hover {
    border-color: #f9c343;
    background: rgba(249, 195, 67, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(249, 195, 67, 0.15);
}

.th-pay-card:hover svg {
    fill: #f9c343;
}

/* ========================================= */
/* === OPRAVA: NÁKUPNÍ BLOK (LUXUSNÍ VZHLED) === */
/* ========================================= */
.th-pro-purchase-block {
    text-align: center !important;
    padding: 30px 20px !important;
}

.th-pro-btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* TOTO ZAJISTÍ ZALOMENÍ KLÍČE DOLŮ */
    justify-content: center !important;
    align-items: stretch !important; /* Tlačítka budou stejně vysoká */
    gap: 15px 20px !important;
    width: 100% !important;
}

.th-pro-btn-monthly, 
.th-pro-btn-yearly {
    width: 280px !important; /* Trochu širší, aby se vešel text */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Odkaz na licenční klíč se přesune na nový řádek pod tlačítka */
.license-key-wrapper {
    width: 100% !important; /* Vynutí zalomení na nový řádek */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 5px !important;
}

/* Zjemnění tlačítka pro zadání klíče (čistý luxusní text) */
.th-license-toggle-btn {
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    font-size: 13px !important;
    padding: 5px 15px !important;
    transition: color 0.3s ease !important;
}

.th-license-toggle-btn:hover {
    color: #f9c343 !important;
    background: transparent !important;
}

/* Na mobilu se to automaticky hodí pod sebe */
@media (max-width: 650px) {
    .th-pro-btn-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    .th-pro-btn-monthly, 
    .th-pro-btn-yearly {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* ========================================= */
/* === SPECIFIKA PRO DOMOVSKOU STRÁNKU (HUB) === */
/* ========================================= */
/* Zakulacení nákupního bloku do "pilulky" pouze na hlavní stránce, aby ladil s velkými tlačítky */
.hub-body .th-pro-purchase-block {
    border-radius: 40px !important;
    padding: 35px 30px !important;
}

.hub-body .th-pro-purchase-block::after {
    border-radius: 40px !important;
}