/* =========================================================================
   SaaS Master Layout Pipeline (v2026) - Part 1 of 3
   ========================================================================= */

/* 📌 CORE RESET & FONTS */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8fafc;
    color: #334155;
    scroll-behavior: smooth;
    min-height: 100vh;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* 🌌 AMBIENT WELLNESS BACKGROUND ILLUMINATION */
.glow-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 550px;
    background: radial-gradient(circle at top, rgba(99, 102, 241, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* 📦 MASTER SITE CONTAINER */
.site-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =========================================================================
   📌 FLOATING STICKY HEADER (Pouze jedna unifikovaná lišta na očích)
   ========================================================================= */
header.master-pro-header.style-floating-header {
    position: -webkit-sticky !important;
    position: sticky !important; /* Plovoucí stav hrdě drží při scrollování dolů */
    top: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

/* Brand Identity Row */
.hero-master-media-box {
    height: 36px;
    width: 36px;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 4px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-brand-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pro-brand-title-inline {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
    margin-left: 8px;
}

/* Navigation Links Anchor Cloud */
.pro-anchor-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-card-item {
    font-size: 0.825rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-card-item:hover {
    color: #6366f1;
    background-color: #f1f5f9;
}

/* CTA Card Item in Navbar */
.nav-card-item.pro-nav-cta-card {
    background-color: #0f172a;
    color: #ffffff !important;
    font-weight: 700;
    margin-left: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-card-item.pro-nav-cta-card:hover {
    background-color: #6366f1;
}

/* Quick Contacts in Header Settings */
.header-phone-quicklink-node, .header-email-quicklink-node {
    display: none; /* Skryto na malých mobilech, design slícován pro široké obrazovky */
}

@media (min-width: 1024px) {
    .header-phone-quicklink-node, .header-email-quicklink-node {
        display: block;
        margin-left: 16px;
    }
    .header-phone-anchor-link, .header-email-anchor-link {
        font-size: 0.8rem;
        font-weight: 700;
        color: #6366f1;
        text-decoration: none;
        background: #f0fdf4;
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid #dcfce7;
    }
}



/* =========================================================================
   SaaS Master Layout Pipeline (v2026) - Part 2 of 3
   ========================================================================= */

/* 🎯 ULTRA MODERNÍ INTEGRACE JEDNOSLOUPCOVÉHO KATALOGU */
main.catalog-integration-wrapper.pure-full-width-catalog-mode {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-top: 40px;
    margin-bottom: 60px;
}

.catalog-list-side.pure-full-width-side-axis {
    width: 100% !important;
    max-width: 100% !important;
}

/* 🖼️ HLAVNÍ PRODUKTOVÁ MŘÍŽKA - Roztažení karet z JSONu */
.catalog-list-side .stats-grid.fully-expanded-grid-axis {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

/* 🟢 STABILNÍ STRUKTURA TARIFNÍ KARTY (100% PŮVODNÍ STYLY) */
.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

/* Třída pro zvýraznění aktivní karty (Podpora tvého mostu) */
.stat-card.expanded {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px #6366f1, 0 10px 25px -5px rgba(99, 102, 241, 0.1);
}

/* Stavové štítky na kartách */
.card-status-badge-zone {
    margin-bottom: 16px;
}

.badge-pill {
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-catalog { background: #f0fdf4; color: #16a34a; }
.badge-booking { background: #eff6ff; color: #2563eb; }
.badge-shop { background: #faf5ff; color: #7c3aed; }
.badge-subscription { background: #e0f2fe; color: #0369a1; }
.badge-enquiry { background: #fff7ed; color: #ea580c; }

/* Vnitřní elementy produktů */
.item-image-container {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 16px;
}

.item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.item-price {
    font-size: 1.25rem;
    font-weight: 900;
    color: #4f46e5;
    display: block;
    margin-bottom: 12px;
}

.item-detail {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

/* ⚙️ PREVIEW PARAMETRŮ KONFIGURACE (Zobrazení matic a polí na kartě) */
.enquiry-static-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.preview-fields-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-field-row {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.preview-field-row:last-child {
    border: none;
    padding-bottom: 0;
}

.preview-field-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #334155;
}

.field-type-badge {
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
}

.preview-chips-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.preview-chip {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.preview-placeholder-line {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* Akční šipka lícovaná na tvůj most */
.select-indicator {
    width: 100%;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: auto;
}

.select-indicator:hover {
    background: #4f46e5;
}



/* =========================================================================
   SaaS Master Layout Pipeline (v2026) - Part 3 of 3
   ========================================================================= */

/* ⚡ ARCHITEKTURA BOČNÍHO VÝSUVNÉHO PANELU (SLIDE-OVER DRAWER) */
.catalog-detail-side {
    position: fixed !important;
    top: 0 !important;
    right: -420px !important; /* Výchozí bezpečné skrytí panelu úplně mimo obrazovku */
    width: 400px !important;
    max-width: 90% !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 10000 !important; /* Nadřazeno plovoucímu menu */
    box-shadow: -10px 0 30px -5px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important; /* Trvale v DOMu pro zachování funkčnosti imported JS */
}

/* 🔥 AUTOMATICKÝ SPOUŠTĚČ: Pokud je jakákoli karta .expanded a není to catalog, panel hladce vjede */
.catalog-integration-wrapper:has(article.stat-card.expanded:not([data-item-type="catalog"])) .catalog-detail-side {
    transform: translateX(-420px) !important;
}

.catalog-detail-side .detail-sticky-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* 🔄 INDEPENDENT SCROLL ZONE: Fixuje hlavičku pokladny a umožňuje hladké sjíždění e-shopu dolů */
.catalog-detail-side .detail-scroll-zone {
    flex: 1 !important;
    overflow-y: auto !important; /* Povolení nativního scrollování dlouhých formulářů */
    padding: 24px !important;
    padding-bottom: 80px !important; /* Bezpečný prostor pod checkout tlačítkem */
    box-sizing: border-box !important;
}

/* ✕ DESIGN ZAVÍRACÍHO KŘÍŽKU V ZÁHLAVÍ DRAWERU */
.drawer-close-action-btn {
    float: right;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawer-close-action-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.close-btn-icon {
    color: #ef4444; /* Červený vizuální akcent */
    font-weight: 900;
    font-size: 0.85rem;
}

.close-btn-text {
    color: #991b1b;
    font-size: 0.75rem;
    font-weight: 700;
}

/* 🏷️ SVISLE OTOČENÝ MINIMALISTICKÝ BOČNÍ PROUŽEK (FLOATING ACTION TAB) */
.drawer-reopen-side-tab {
    position: absolute !important;
    top: 50% !important;
    left: -40px !important; /* Vyčnívá z panelu přesně na okraj obrazovky */
    transform: translateY(-50%) rotate(-90deg) !important; /* Svislé otočení textu nahoru */
    transform-origin: right center !important;
    display: none; /* Skryto uvnitř zdi, dokud se neaktivuje stav minimalizace křížkem */
    align-items: center;
    gap: 8px;
    background: #0f172a !important; /* Tmavý luxusní kontrast */
    color: #ffffff !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 12px 12px 0 0 !important;
    cursor: pointer !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    z-index: 10005 !important;
}

.reopen-tab-icon {
    transform: rotate(90deg); /* Otočení ikony košíku zpět horizontálně */
    display: inline-block;
}

/* State Modifier: Když uživatel zavře panel křížkem, schová se za zeď, ale vytrčí ven boční proužek */
.catalog-detail-side.state-minimized-to-bar {
    transform: translateX(0px) !important; /* Panel odjede kompletně za hranu */
}

.catalog-detail-side.state-minimized-to-bar .drawer-reopen-side-tab {
    display: flex !important; /* Boční proužek okamžitě vyskočí na okraji webu */
}

/* 📄 VELKÝ IN-LINE PDF PROHLÍŽEČ PRO CENÍKY */
.pdf-interactive-container {
    position: relative;
    width: 100%;
    height: 750px;
    background-color: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    margin-top: 16px;
}

.pdf-object-frame, .pdf-iframe-fallback {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* 🔌 GEOGRAFICKÁ MŘÍŽKA PRO MAPY NAD KONTAKTEM */
.geo-maps-rendering-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    margin-top: 16px;
}

.map-iframe-container-node {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
    background-color: #f8fafc;
}

/* =========================================================================
   📌 ČTYŘSLOUUPCOVÁ ENTERPRISE PATIČKA (ŘÍZENÁ AUTOMATICKY Z JSONU)
   ========================================================================= */
.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding-top: 48px;
    padding-bottom: 32px;
    margin-top: 64px;
}

.footer-columns-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 40px !important;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-column-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.05em;
}

.footer-anchor-link, .footer-nav-link {
    color: #334155;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-anchor-link:hover, .footer-nav-link:hover {
    color: #4f46e5;
}

/* Logistické řádky doručení v patičce */
.footer-logistics-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-shipping-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.825rem;
    color: #334155;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.shipping-price-mini {
    margin-left: auto;
    font-weight: 800;
    color: #4f46e5;
}

.footer-legal-copy-text {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.6;
}





/* =========================================================================
   🎛️ UNIVERSAL SHADOW DOM INJECTION SHIELD - Vnitřní stabilizace pokladny
   ========================================================================= */

/* Vynutíme, aby se veškerý dynamický obsah uvnitř scrollovací zóny řadil striktně pod sebe */
.catalog-detail-side .detail-scroll-zone,
.catalog-detail-side multi-sale-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Automatické srovnání všech formulářových bloků a kontejnerů na plnou šířku Draweru */
.catalog-detail-side multi-sale-form div,
.catalog-detail-side multi-sale-form form {
    width: 100% !important;
    display: block;
    box-sizing: border-box !important;
}

/* Univerzální narovnání pro všechny typy textových polí, selectů a textareí z tvých JS skriptů */
.catalog-detail-side multi-sale-form input[type="text"],
.catalog-detail-side multi-sale-form input[type="date"],
.catalog-detail-side multi-sale-form input[type="number"],
.catalog-detail-side multi-sale-form select,
.catalog-detail-side multi-sale-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Úprava focus stavů pro políčka uvnitř bočního panelu */
.catalog-detail-side multi-sale-form input:focus,
.catalog-detail-side multi-sale-form select:focus,
.catalog-detail-side multi-sale-form textarea:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

/* Univerzální formátování popisků (Labelů) nad políčky */
.catalog-detail-side multi-sale-form label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* 💳 UNIFIKOVANÝ FINÁLNÍ CHECKOUT BUTTON (Zachytí jakékoli hlavní odesílací tlačítko ve widgetu) */
.catalog-detail-side multi-sale-form button,
.catalog-detail-side multi-sale-form input[type="submit"] {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #0f172a !important; /* Tmavý, vysoce profesionální kontrast */
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin-top: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1) !important;
}

.catalog-detail-side multi-sale-form button:hover,
.catalog-detail-side multi-sale-form input[type="submit"]:hover {
    background: #4f46e5 !important; /* Přechod do firemní indigo barvy při hoveru */
}

/* Vizuální ošetření chybových a úspěšných zpráv pod formulářem */
#responseMessage div {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
}



/* =========================================================================
   💪 HARD REINFORCED LOGO SIZE EXTENSION (Přebití dřívějších starých řádků)
   ========================================================================= */

/* Zvětšení samotného obalového boxu loga v plovoucím menu */
header.master-pro-header .hero-master-media-box {
    height: 58px !important; /* Vytaženo téměř na celou výšku 72px navbaru */
    width: auto !important;
    max-width: 200px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Nejsilnější možný kombinovaný selektor pro samotný tag obrázku */
header.master-pro-header .hero-master-media-box img#ui-hero-img.hero-brand-img {
    height: 100% !important; /* Obrázek striktně vyplní celou výšku 58px obalu */
    width: auto !important;
    max-height: 58px !important;
    min-height: 50px !important; /* Pojistka proti smrštění */
    object-fit: contain !important;
    display: block !important;
}

/* =========================================================================
   🖼️ RESPONSIVE AUTO-FILL GALLERY GRID (Vždy stejně velké obrázky)
   ========================================================================= */

/* Hlavní kontejner galerie: skládá vedle sebe tolik karet, kolik šířka dovolí */
.section-gallery .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; /* Tekutá mřížka */
    gap: 20px !important; /* Mezery mezi dlaždicemi */
    width: 100% !important;
    margin-top: 24px;
}

/* Samotná karta projektu / realizace */
.gallery-item-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

.gallery-item-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

/* 🔒 PEVNÝ RÁMEČEK PRO OBRÁZEK: Vynutí, aby byly všechny náhledy identické */
.gallery-img-wrapper {
    width: 100% !important;
    height: 180px !important; /* Fixní výška dlaždice - všechny budou stejně vysoké */
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
}

/* Samotný tag obrázku: Vyplní kontejner a inteligentně ořízne kraje bez deformace */
.gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 🌟 Klíčové: Zachová poměr stran a ořízne přebytek */
    object-position: center !important; /* Středový bod ořezu */
    display: block !important;
}

/* Popisek / Název projektu pod obrázkem */
.gallery-img-title {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin-top: 12px !important;
    line-height: 1.4 !important;
}




/* =========================================================================
   👤 SEKCE O NÁS - KOMPAKTNÍ POLOVIČNÍ VELIKOST OBRÁZKU
   ========================================================================= */

/* Flexibilní kontejner sekce O nás */
.section-about .about-flex-container {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
}

/* 📐 Zmenšení obalového boxu profilové fotky přesně na polovinu */
.section-about .about-image-container {
    flex: 0 0 40% !important; /* Šířka boxu snížena, aby text měl více prostoru */
    max-width: 450px !important; /* Maximální strop velikosti fotky */
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.section-about .about-image-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}

/* Roztažení textové části vedle zmenšeného obrázku */
.section-about .about-text-container {
    flex: 1 !important;
}


/* =========================================================================
   🖼️ POJISTKA VIDITELNOSTI POPISKŮ V GALERII
   ========================================================================= */
.gallery-item-card .gallery-img-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Vynucení tmavé, čitelné barvy textu */
    text-align: center !important;
    margin-top: 12px !important;
    min-height: 20px !important; /* Pojistka pro držení pozice */
}


/* =========================================================================
     👑 CHAMELEON SAAS - ULTRA-PREMIUM CONVERSION POPUP LAYOUT
     Architecture: Open Vertical Viewport Sheet (Zero Border Heavy Bottoms)
     ========================================================================= */

/* Ambientní full-screen překrytí s hlubokým rozostřením pozadí */
.modal-overlay-ambient-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(9, 13, 26, 0.7) !important; /* Hluboký temný SaaS tón */
    z-index: 999999 !important;
    display: none; /* Přepínáno přes JS (flex) */
    align-items: flex-start !important; /* Přirozený start odshora pro vertikální scrollování */
    justify-content: center !important;
    backdrop-filter: blur(20px) !important; /* Extrémně čisté filmové rozostření */
    -webkit-backdrop-filter: blur(20px) !important;
    overflow-y: auto !important; /* Celý layout přirozeně a čistě scrolluje */
    padding: 60px 20px !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
}

/* Velká předsazená karta – Otevřená, vzdušná, konverzně optimalizovaná */
.modal-presentation-container-fixed {
    position: relative !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 960px !important;
    height: auto !important;
    max-height: none !important; /* Úplné odstranění vnitřního škrcení */
    border-radius: 24px !important; /* Moderní soft okraje roku 2026 */
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) !important;
    padding: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    
    /* 👑 DOLE NEUZAVŘENÁ STRUKTURA: Žádný těžký spodní okraj, volný elegantní přechod */
    border-bottom: none !important;
    margin-bottom: 60px !important;
}

/* Fixní prémiový zavírací křížek – stále po ruce na stejném místě */
.close-presentation-trigger-fixed {
    position: fixed !important;
    top: 32px !important;
    right: 40px !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #64748b !important;
    cursor: pointer !important;
    line-height: 1 !important;
    user-select: none !important;
    z-index: 10000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    width: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.close-presentation-trigger-fixed:hover { 
    color: #0f172a !important; 
    transform: scale(1.05) rotate(90deg) !important; 
    background: #ffffff !important; 
}



/* =========================================================================
     👑 HIGH-CONVERSION TYPOGRAPHY & POLYMORPHIC SPLIT GRID
     ========================================================================= */

.popup-hero-header-fixed {
    margin-bottom: 32px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.popup-title-fixed {
    margin: 0 0 8px 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
}

.popup-price-tag-fixed {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important; /* Špičková SaaS fialová (Indigo) */
}

/* Konverzní split layout horní sekce */
.popup-grid-layout-fixed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
}

@media (min-width: 768px) {
    .popup-grid-layout-fixed {
        grid-template-columns: 38% 1fr !important; /* Přesný poměr pro vizuální těžiště */
        gap: 48px !important;
    }
}

.popup-image-wrapper-fixed {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02) !important;
}

.popup-img-fluid-fixed {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.popup-sub-detail-fixed {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 16px !important;
}

/* Nadpisy sekcí (Popis, Variantní Matice) */
.popup-section-title-fixed {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #64748b !important;
    margin: 40px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

/* Vzdušný, otevřený text popisu produktu */
.rich-text-typography-fixed {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
}
.rich-text-typography-fixed p {
    margin-bottom: 16px !important;
}

/* 👑 DOLE OTEVŘENÁ TABULKA VARIANT (Bez vnitřních tlustých linek) */
.popup-spec-table-fixed {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}
.popup-spec-table-fixed th {
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: left !important;
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
}
.popup-spec-table-fixed td {
    padding: 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Pouze jemná linka oddělení */
    color: #1e293b !important;
}
.popup-spec-table-fixed tr:last-child td {
    border-bottom: none !important; /* 👑 DOLE ÚPLNĚ OTEVŘENÉ A VOLNÉ */
}

/* Trust badge doručení */
#popup-shipping-trust-zone {
    margin-top: auto !important;
    padding-top: 16px !important;
}



/* =========================================================================
     👑 CHAMELEON SAAS - MASTER VISUAL ARCHITECTURE (PRODUCTION CORE)
     Architecture: Unified Fixed Popup Layer & Systemic Inline Grid Spanning
     ========================================================================= */

/* --- 1. SEKTOR: VELKÝ FIXNÍ PREZENTAČNÍ POPUP (PRO TLAČÍTKO DETAIL) --- */

/* Ambientní full-screen překrytí s hlubokým rozostřením pozadí celého webu */
.modal-overlay-ambient-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(9, 13, 26, 0.75) !important; /* Hluboký temný SaaS tón */
    z-index: 999999 !important;
    display: none; /* Přepínáno asynchronně přes JS na 'flex' */
    align-items: flex-start !important; /* Přirozený start odshora pro zdravé scrollování */
    justify-content: center !important;
    backdrop-filter: blur(20px) !important; /* Špičkové filmové rozostření scény */
    -webkit-backdrop-filter: blur(20px) !important;
    overflow-y: auto !important; /* Celé překrytí přirozeně a čistě scrolluje dolů */
    padding: 60px 20px !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
}

/* Velká předsazená karta popupu – Vzdušná, čistá, konverzně nekompromisní */
.modal-presentation-container-fixed {
    position: relative !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 960px !important;
    height: auto !important;
    max-height: none !important; /* Odstranění vnitřního škrcení výšky */
    border-radius: 24px !important; /* Moderní soft okraje roku 2026 */
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) !important;
    padding: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    
    /* 👑 DOLE NEUZAVŘENÁ STRUKTURA: Žádný těžký spodní okraj, volný přechod do ztracena */
    border-bottom: none !important;
    margin-bottom: 60px !important;
}

/* Plynulé filmové smrštění modálu do středu s lehkým rozmazáním při zavření */
.modal-presentation-container-fixed.shrink-collapse-animation {
    animation: modalShrinkToCard 0.3s cubic-bezier(0.76, 0, 0.24, 1) forwards !important;
}

@keyframes modalShrinkToCard {
    0% { transform: scale(1); opacity: 1; filter: blur(0); }
    100% { transform: scale(0.85); opacity: 0; filter: blur(10px); }
}

/* Fixní prémiový zavírací křížek modálu – stále na stejném místě na obrazovce */
.close-presentation-trigger-fixed {
    position: fixed !important;
    top: 32px !important;
    right: 40px !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #64748b !important;
    cursor: pointer !important;
    line-height: 1 !important;
    user-select: none !important;
    z-index: 10000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    width: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.close-presentation-trigger-fixed:hover { 
    color: #0f172a !important; 
    transform: scale(1.05) rotate(90deg) !important; 
    background: #ffffff !important; 
}

body.modal-blur-active { 
    overflow: hidden !important; /* Uzamkne scrollování hlavního webu v pozadí */
}

.popup-hero-header-fixed {
    margin-bottom: 32px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.popup-title-fixed {
    margin: 0 0 8px 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
}

.popup-price-tag-fixed {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important; /* Špičková digitální fialová */
}


/* --- 2. SEKTOR: HIGH-CONVERSION TYPOGRAPHY & SPLIT GRIDS --- */

.popup-grid-layout-fixed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
}

@media (min-width: 768px) {
    .popup-grid-layout-fixed {
        grid-template-columns: 38% 1fr !important; /* Poměr vizuálního těžiště */
        gap: 48px !important;
    }
}

.popup-image-wrapper-fixed {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

.popup-img-fluid-fixed {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.popup-sub-detail-fixed {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 16px !important;
}

.popup-section-title-fixed {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #64748b !important;
    margin: 40px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

.rich-text-typography-fixed {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
}

.popup-spec-table-fixed {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

.popup-spec-table-fixed th {
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: left !important;
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
}

.popup-spec-table-fixed td {
    padding: 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}

.popup-spec-table-fixed tr:last-child td {
    border-bottom: none !important; /* 👑 DOLE ÚPLNĚ OTEVŘENÉ A VOLNÉ */
}


/* --- 3. SEKTOR: SYSTEMATICKÉ INLINE ROZBALENÍ NÁKUPNÍHO WIDGETU DO KARTY --- */

/* Přizpůsobení karty produktu, když do ní uživatel vnoří widget (Zvolit program) */
.stat-card.expanded {
    grid-column: 1 / -1 !important; /* 👑 ROZTÁHNE KARTU PŘES CELOU ŠÍŘKU MŘÍŽKY */
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 40px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Přepis chování bočního panelu pokladny, když se fyzicky vnoří dovnitř karty */
.stat-card #ui-item-detailed-view.catalog-detail-side {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    
    /* 👑 KONTROLNÍ RANNÍ VZDUŠNOST: Žádné těžké krabice nebo neforemná pozadí */
    background: transparent !important; 
    border: none !important;
    border-top: 1px solid #f1f5f9 !important; /* Diskrétní, ultra jemná linka pod popisem */
    
    margin-top: 16px !important;
    padding: 24px 0 0 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    animation: inlineCheckoutSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Vnitřní sticky karta uvnitř vnořeného produktu */
.stat-card #ui-item-detailed-view .detail-sticky-card {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
}

/* Úplné zrušení vnitřních scrollbarů – formulář dýchá a expanduje dolů volně */
.stat-card #ui-item-detailed-view .detail-scroll-zone {
    overflow-y: visible !important;
    max-height: none !important;
    margin-top: 16px !important;
    padding-right: 0 !important;
}

/* Skrytí zavíracích tlačítek a reopen lišt v inline režimu (jsou nadbytečné) */
.stat-card #ui-item-detailed-view .drawer-close-action-btn,
#ui-drawer-reopen-bar.drawer-reopen-side-tab {
    display: none !important;
}

/* Plynulá animace rozevření inline pokladny pod vybranou položkou */
@keyframes inlineCheckoutSlideDown {
    0% { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.card-expanded-content-wrapper {
    width: 100% !important;
    display: block !important;
}



/* =========================================================================
     👑 CHAMELEON SAAS - MASTER VISUAL ARCHITECTURE (PRODUCTION CORE)
     Architecture: Unified Dual-Mode Overlay Sheet & Side-by-Side Split Grid
     ========================================================================= */

/* Ambientní full-screen překrytí s hlubokým rozostřením pozadí celého webu */
.modal-overlay-ambient-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(9, 13, 26, 0.75) !important; /* Hluboký temný SaaS tón */
    z-index: 999999 !important;
    display: none; /* Přepínáno asynchronně přes JS na 'flex' */
    align-items: center !important; /* Vycentrování na střed obrazovky */
    justify-content: center !important;
    backdrop-filter: blur(20px) !important; /* Špičkové filmové rozostření scény */
    -webkit-backdrop-filter: blur(20px) !important;
    overflow-y: auto !important; /* Celé překrytí přirozeně scrolluje při přetečení */
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
}

/* Velká předsazená karta popupu – Vzdušná, čistá, konverzně nekompromisní */
.modal-presentation-container-fixed {
    position: relative !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 1040px !important;
    height: auto !important;
    max-height: 90vh !important; /* Bezpečné ořezání vůči výšce monitoru s vnitřním scrollem */
    border-radius: 24px !important; /* Moderní soft okraje roku 2026 */
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.4) !important;
    padding: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    
    /* 👑 DOLE NEUZAVŘENÁ STRUKTURA: Žádný těžký spodní okraj, volný přechod do ztracena */
    border-bottom: none !important;
}

/* Plynulé filmové smrštění modálu do středu s lehkým rozmazáním při zavření */
.modal-presentation-container-fixed.shrink-collapse-animation {
    animation: modalLettersShrink 0.3s cubic-bezier(0.76, 0, 0.24, 1) forwards !important;
}

@keyframes modalLettersShrink {
    0% { transform: scale(1); opacity: 1; filter: blur(0); }
    100% { transform: scale(0.88); opacity: 0; filter: blur(12px); }
}

/* Fixní prémiový zavírací křížek modálu – stále na stejném místě na obrazovce */
.close-presentation-trigger-fixed {
    position: fixed !important;
    top: 32px !important;
    right: 40px !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #64748b !important;
    cursor: pointer !important;
    line-height: 1 !important;
    user-select: none !important;
    z-index: 10000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    width: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.close-presentation-trigger-fixed:hover { 
    color: #0f172a !important; 
    transform: scale(1.05) rotate(90deg) !important; 
    background: #ffffff !important; 
}

body.modal-blur-active { 
    overflow: hidden !important; /* Uzamkne scrollování hlavního webu v pozadí */
}



/* --- 2. SEKTOR: HIGH-CONVERSION TYPOGRAPHY & INTELLECTUAL GRIDS --- */

.popup-hero-header-fixed {
    margin-bottom: 32px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.popup-title-fixed {
    margin: 0 0 8px 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
}

.popup-price-tag-fixed {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important; /* Špičková digitální fialová */
}

/* Základní vnitřní tělo popupu */
.popup-content-interior-fixed {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* 👑 DUAL-MODE TRIGGER: Pokud JS zapne pokladní formulář, vnitřek se transformuje na luxusní dvousloupec */
.popup-content-interior-fixed:has(#ui-item-detailed-view[style*="display: block"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
}

@media (min-width: 840px) {
    .popup-content-interior-fixed:has(#ui-item-detailed-view[style*="display: block"]) {
        grid-template-columns: 50% 1fr !important; /* Dokonalá polovina monitoru: popis vlevo, formulář vpravo */
        align-items: start !important;
    }
}

.popup-grid-layout-fixed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

.popup-image-wrapper-fixed {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

.popup-img-fluid-fixed {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.popup-sub-detail-fixed {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 16px !important;
}

.popup-section-title-fixed {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #64748b !important;
    margin: 40px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

.rich-text-typography-fixed {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
}

.popup-spec-table-fixed {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

.popup-spec-table-fixed th {
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: left !important;
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
}

.popup-spec-table-fixed td {
    padding: 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
}

.popup-spec-table-fixed tr:last-child td {
    border-bottom: none !important; /* 👑 DOLE ÚPLNĚ OTEVŘENÉ A VOLNÉ */
}



/* --- 3. SEKTOR: VYNUCENÉ ZVIDITELNĚNÍ A PROFI STYLING INLINE POKLADNY --- */

/* 👑 ABSOLUTNÍ ODSTRANĚNÍ STOPKY: Pokud má panel třídu vnoření, vynutíme jeho viditelnost */
.stat-card #ui-item-detailed-view.catalog-detail-side,
#ui-master-product-popup #ui-item-detailed-view.catalog-detail-side {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    
    /* Zviditelnění prvku za každé situace */
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important;
    
    /* 👑 DOLE OTEVŘENÁ STRUKTURA S ULTRA JEMNÝM PŘECHODEM */
    background: transparent !important; 
    border: none !important;
    border-top: 1px solid #f1f5f9 !important; /* Diskrétní tenká linka pod popisem */
    margin-top: 16px !important;
    padding: 24px 0 0 0 !important;
    box-sizing: border-box !important;
    animation: inlineCheckoutSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Vnitřní sticky karta uvnitř produktu – uvolnění do prostoru */
#ui-item-detailed-view .detail-sticky-card {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
}

/* Úplné zrušení vnitřních scrollbarů – formulář dýchá a expanduje dolů volně */
#ui-item-detailed-view .detail-scroll-zone {
    overflow-y: visible !important;
    max-height: none !important;
    margin-top: 16px !important;
    padding-right: 0 !important;
}

/* 🎯 ULTRA-PROFI FORMULÁŘOVÁ TYPOGRAFIE (Oprava nečitelnosti obřích polí) */
#ui-item-detailed-view input[type="text"],
#ui-item-detailed-view input[type="email"],
#ui-item-detailed-view input[type="tel"],
#ui-item-detailed-view select,
#ui-item-detailed-view textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important; /* Menší, lidštější políčka */
    font-size: 14px !important;
    color: #0f172a !important;
    background-color: #f8fafc !important; /* Soft šedý podklad polí */
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

#ui-item-detailed-view input:focus,
#ui-item-detailed-view select:focus,
#ui-item-detailed-view textarea:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
}

/* Prodejní konverzní tlačítko dokončení objednávky */
#ui-item-detailed-view button[type="submit"],
#ui-item-detailed-view .form-submit-btn-fixed {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important; /* Výrazné konverzní SaaS tlačítko */
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3) !important;
    transition: all 0.2s ease !important;
    margin-top: 8px !important;
}

/* Skrytí nadbytečných zavíracích prvků a duplicitních nadpisů v inline režimu */
#ui-item-detailed-view .detail-card-header,
#ui-item-detailed-view .drawer-close-action-btn,
#ui-drawer-reopen-bar.drawer-reopen-side-tab {
    display: none !important;
}

/* Plynulá, moderní animace rozevření inline pokladny pod položkou */
@keyframes inlineCheckoutSlideDown {
    0% { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}



/* =========================================================================
     🎯 SYSTEMIC SIDEPANEL FORCE LIGHT: PROBUZENÍ PRAVÉHO WIDGETU
     ========================================================================= */

/* Pokud JS přepíše display na block, panel musí okamžitě vyjet z pravé strany */
#ui-item-detailed-view.catalog-detail-side[style*="display: block"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 460px !important; /* Luxusní šířka pro formuláře */
    height: 100vh !important;
    background-color: #ffffff !important;
    box-shadow: -15px 0 45px rgba(15, 23, 42, 0.15) !important;
    z-index: 99999 !important; /* Nad všemi prvky webu, těsně pod popupem */
    display: flex !important; /* Vynutíme flex pro vnitřní uspořádání */
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    padding: 32px !important;
}

/* Ošetření vnitřní sticky karty a scrollování pokladny */
#ui-item-detailed-view[style*="display: block"] .detail-sticky-card {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

#ui-item-detailed-view[style*="display: block"] .detail-scroll-zone {
    flex: 1 !important;
    overflow-y: auto !important; /* Umožní plynulé scrollování položek formuláře */
    margin-top: 16px !important;
}

/* Zobrazení tlačítka pro zavření bočního panelu */
#ui-item-detailed-view[style*="display: block"] .drawer-close-action-btn {
    display: flex !important;
    cursor: pointer !important;
}





/* =========================================================================
     👑 CHAMELEON SAAS - ULTRA-SLIM LATERAL CHEKOUT DESIGN (PRODUCTION)
     ========================================================================= */

/* Štíhlá, elegantní a responzivní boční linka pokladny */
#ui-item-detailed-view.catalog-detail-side[style*="display: block"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 380px !important; /* 👑 LUXUSNÍ ZÚŽENÁ ŠÍŘKA PRO ULTRA PREHLEDNOST */
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.95) !important; /* Poloprůhledné skleněné plátno */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: -10px 0 50px rgba(15, 23, 42, 0.12) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 28px !important;
    border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
    animation: sidebarSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Vnitřní dýchající uspořádání */
#ui-item-detailed-view[style*="display: block"] .detail-sticky-card {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#ui-item-detailed-view[style*="display: block"] .detail-scroll-zone {
    flex: 1 !important;
    overflow-y: auto !important;
    margin-top: 16px !important;
    padding-right: 4px !important;
}

/* ❌ PROFI ZAVÍRACÍ KŘÍŽEK: Výrazné, konverzní interaktivní tlačítko nahoře */
#ui-item-detailed-view[style*="display: block"] .drawer-close-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    background: #f1f5f9 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
    margin-bottom: -10px !important;
}
#ui-item-detailed-view[style*="display: block"] .drawer-close-action-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.05);
}

/* Skrytí duplicitních popisků zavírání pro čistý minimalismus */
#ui-item-detailed-view .close-btn-text,
#ui-item-detailed-view .detail-meta-label {
    display: none !important;
}

#ui-item-detailed-view .detail-heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 8px 0 4px 0 !important;
}

/* Animace elegantního bočního vyjetí linky zprava */
@keyframes sidebarSlideIn {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}



/* =========================================================================
     ✨ CHAMELEON SAAS - BENEFITS GRID & ENTERPRISE SECTION COHESION
     ========================================================================= */

/* 1. BENEFITY: Inteligentní řazení vedle sebe (Flex Cloud Wrapper) */
.benefits-grid {
    display: flex !important;
    flex-wrap: wrap !important; /* 👑 KLÍČOVÝ TAH: Skládají se vedle sebe, dokud se vejdou */
    gap: 24px !important;
    justify-content: center !important;
    margin-top: 32px !important;
}

/* Karta jednoho benefitu – vzdušná, responzivní, s pevným základem */
.benefit-card {
    flex: 1 1 280px !important; /* Automatické smršťování a natahování, minimální šířka 280px */
    max-width: 340px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.benefit-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
}

/* 2. SYSTÉMOVÉ ODDĚLENÍ SEKCI (Vzdušné konverzní předěly) */
.container.section-benefits,
.container.section-about,
.container.section-gallery,
.container.section-geo-maps {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    border-top: 1px solid #f1f5f9 !important; /* 👑 Čistá, diskrétní linka oddělující sekce */
    position: relative !important;
}

/* První sekce pod katalogem linku nepotřebuje */
main + .saas-custom-sections-container section:first-child,
main + .section-benefits {
    border-top: none !important;
    padding-top: 40px !important;
}

/* =========================================================================
     ✨ AI CHAT WIDGET – ULTRA-PREMIUM HIGH-CONVERSION SAAS STYLE
     Position: Fixed Lower Right Layer (Floating Interface)
     ========================================================================= */

/* Globální plovoucí kontejner celého chat widgetu */
#ai-chat-widget {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 340px !important; /* Štíhlý, kompaktní rozměr */
    background: rgba(255, 255, 255, 0.85) !important; /* Moderní mlžné sklo */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.15) !important;
    z-index: 99998 !important; /* Těsně pod úrovní velkých popupů a detailů */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 👑 REŽIM: ZAVŘENÁ BUBLINA (Kompaktní bar, který neruší, ale láká ke kliku) */
#ai-chat-widget.chat-widget-closed {
    height: 48px !important;
    cursor: pointer !important;
}
#ai-chat-widget.chat-widget-closed #chat-body {
    display: none !important; /* Skryje vnitřek logů a inputu */
}

/* 👑 REŽIM: OTEVŘENÝ CHAT PANEL */
#ai-chat-widget.chat-widget-open {
    height: 450px !important; /* Plná výška konverzace */
}

/* Hlavička widgetu – SaaS Indigo gradient s pulzující ikonou */
#chat-header {
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.chat-icon {
    animation: chatPulse 2s infinite !important;
}

@keyframes chatPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Vnitřní tělo konverzace */
#chat-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Logy zpráv se samostatným plynulým scrollováním */
#chat-logs {
    flex: 1 !important;
    padding: 16px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

/* Styl jednotlivých bublin zpráv */
.msg {
    max-width: 85% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* Zpráva od AI asistenta – Čistá, soft šedá */
.msg-ai {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    align-self: flex-start !important;
    border-top-left-radius: 2px !important;
}

/* Zpráva od uživatele – SaaS Indigo */
.msg-user {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    align-self: flex-end !important;
    border-top-right-radius: 2px !important;
}

/* Spodní zadávací zóna inputu */
.chat-input-area {
    padding: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

#chat-user-input {
    flex: 1 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background: #f8fafc !important;
    outline: none !important;
    box-sizing: border-box !important;
}
#chat-user-input:focus {
    border-color: #4f46e5 !important;
    background: #ffffff !important;
}

/* Odesílací šipka */
#chat-send-btn {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    transition: background 0.15s ease !important;
}
#chat-send-btn:hover {
    background: #4338ca !important;
}




/* =========================================================================
     👑 CHAMELEON SAAS - ULTRA-PREMIUM OPEN PREVIEW OVERLAY
     Architecture: Borderless Floating Sheet with Zero Bottom Constrain
     ========================================================================= */

/* Ambientní pozadí přes celou obrazovku s filmovým rozostřením */
.modal-overlay-ambient-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(9, 13, 26, 0.7) !important; /* Hluboký digitální SaaS tón */
    z-index: 999999 !important;
    display: none; /* Řízeno přes JS */
    align-items: flex-start !important; /* Přirozený začátek odshora pro volný scroll */
    justify-content: center !important;
    backdrop-filter: blur(20px) !important; /* Maximálně čistá mlha v pozadí */
    -webkit-backdrop-filter: blur(20px) !important;
    overflow-y: auto !important; /* Přirozený, čistý scroll celého okna */
    padding: 60px 20px !important;
    box-sizing: border-box !important;
}

/* 👑 VELKÁ PŘEDSAZENÁ KARTA – DOLE NEUZAVŘENÁ A MAXIMÁLNĚ PROSTORNÁ */
.modal-presentation-container-fixed {
    position: relative !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 960px !important;
    height: auto !important;
    max-height: none !important; /* Absolutní stopka vnitřnímu uřezávání výšky */
    border-radius: 24px !important;
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) !important;
    padding: 48px 48px 12px 48px !important; /* Uvolněné spodní dýchání */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    
    /* 👑 Klíčový prvek: Karta nemá spodní ohraničení, volně dýchá do prostoru */
    border-bottom: none !important;
    margin-bottom: 60px !important;
}

/* Nadpisy sekcí (Popis, Variantní matice) */
.popup-section-title-fixed {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #64748b !important;
    margin: 44px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 👑 ODSHORA DOLŮ OTEVŘENÁ MATICE VARIANT (Zcela bez spodní uzavírací linky) */
.popup-spec-table-fixed {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

.popup-spec-table-fixed th {
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: left !important;
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
}

.popup-spec-table-fixed td {
    padding: 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Pouze vnitřní oddělovací linky */
    color: #1e293b !important;
}

/* 👑 Odstranění úplně poslední dělící linky – obsah volně dýchá ze spodní hrany */
.popup-spec-table-fixed tr:last-child td {
    border-bottom: none !important;
}

/* Fixní prémiové křížko, které visí v prostoru mimo tělo karty */
.close-presentation-trigger-fixed {
    position: fixed !important;
    top: 32px !important;
    right: 40px !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    z-index: 10000000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    width: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.close-presentation-trigger-fixed:hover { 
    color: #0f172a !important; 
    transform: scale(1.05) rotate(90deg) !important;
    background: #ffffff !important;
}







/* ==========================================================================
   🔌 PREMIUM SAAS GEO HUB - CORE STYLING SHEET
   ========================================================================== */
.saas-geo-hub {
    width: 100%;
    padding: 5rem 1.5rem;
    background-color: #f8fafc; /* Ultračisté, světlé pozadí pozadí sekce */
    box-sizing: border-box;
}

.saas-geo-container {
    max-width: 1200px;
    margin: 0 auto;
}

.saas-geo-grid {
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

/* Tablet & Desktop asymetrické rozvržení (380px sidebar, zbytek rigidní mapa) */
@media (min-width: 992px) {
    .saas-geo-grid {
        grid-template-columns: 380px 1fr;
    }
}

/* --- LEVÝ PANEL (SIDEBAR) --- */
.saas-geo-sidebar {
    padding: 2.5rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 992px) {
    .saas-geo-sidebar {
        border-bottom: none;
        border-right: 1px solid #e2e8f0;
        height: 650px; /* Fixní rigidní výška pro dokonalé zarovnání s mapou */
        overflow-y: auto; /* Pojistka pro obrovské množství adres */
    }
}

.saas-geo-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.saas-geo-main-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 2rem 0;
}

.saas-geo-blocks-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Komponentový blok informací */
.saas-geo-info-block {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.saas-geo-icon {
    font-size: 1.25rem;
    line-height: 1;
    padding-top: 0.2rem;
}

.saas-geo-block-content {
    flex: 1;
}

.saas-geo-block-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin: 0 0 0.35rem 0;
}

.saas-geo-block-text {
    font-size: 0.937rem;
    color: #334155;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.saas-geo-link-wrapper {
    margin: 0 0 0.25rem 0;
    font-size: 0.937rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.saas-geo-link-tag {
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.saas-geo-interactive-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.saas-geo-interactive-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ⏱️ MATICE OTEVÍRACÍ DOBY */
.saas-geo-hours-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 12px;
    margin-top: 0.5rem;
    border: 1px solid #f1f5f9;
}

.saas-geo-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.812rem;
    color: #475569;
}

.saas-geo-hours-row span {
    font-weight: 500;
}

.saas-geo-hours-row strong {
    color: #0f172a;
    font-weight: 600;
}

.saas-geo-hours-row.status-weekend strong {
    color: #94a3b8;
    font-weight: 500;
}

/* 🚗 AKČNÍ CTA BUTTONY */
.saas-geo-cta-group {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.saas-geo-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.saas-geo-btn.btn-google-maps {
    background-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.saas-geo-btn.btn-google-maps:hover {
    background-color: #1e293b;
    transform: translateY(-1px);
}

.saas-geo-btn.btn-mapy-cz {
    background-color: #ffffff;
    color: #e11d48;
    border: 1px solid #f43f5e;
}

.saas-geo-btn.btn-mapy-cz:hover {
    background-color: #fff1f2;
    transform: translateY(-1px);
}

/* --- MAPOVÝ VIEWPORT --- */
.saas-geo-viewport {
    width: 100%;
    min-height: 400px;
    background: #e2e8f0;
}

@media (min-width: 992px) {
    .saas-geo-viewport {
        height: 650px; /* Perfektní lícování 1:1 se sidebarem */
    }
}

.saas-geo-iframe-container {
    width: 100%;
    height: 100%;
}

.saas-geo-native-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}



/* ==========================================================================
   🌐 SAMOSTATNÝ SEKČNÍ ODDĚLOVAČ (Čistá CSS Lineární Geometrie)
   ========================================================================== */
.section-divider {
    display: block;
    width: 100%;
    height: 40px; /* Výška přechodové linie */
    position: relative;
    z-index: 5;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    /* Vykreslení čistého šikmého přechodu z bílé do šedé (#f8fafc) bez použití obrázků */
    background: linear-gradient(to bottom right, #ffffff 49.9%, #f8fafc 50%);
}

/* 🎨 OTOČENÝ SMĚR: Pokud přecházíte z ŠEDÉ (#f8fafc) sekce zpět dolů do BÍLÉ (#ffffff) */
.section-divider.to-white {
    /* Vykreslení opačného sklonu z šedé zpět do bílé */
    background: linear-gradient(to bottom left, #f8fafc 49.9%, #ffffff 50%);
}