/* ===========================================
   PesOliver.cz — vlastní styly
   Soubor sloučený ze záhlaví + zápatí editoru
   =========================================== */

/* --- Varianty produktu (radio buttony — fallback) --- */
.variant-radio {
  display: inline-flex;
  align-items: center;
  margin: 5px;
  border: 1px solid #ccc;
  padding: 6px 12px;
  cursor: pointer;
  gap: 5px;
}
.variant-radio:hover {background-color:#f7f7f9;transition: background-color 0.3s ease;}
span.variant-radio.active {color:white !important;background-color:#24a800;}

/* --- Varianty produktu — kompaktní karty (nový design) --- */
/* Design: Source Sans 3, border-radius 0, 1px bordery, #1e1e1c text */

/* Kontejner karet — grid, 2 sloupce na desktopu, 1 na mobilu */
.variant-karty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 4px 0;
    max-width: 50%;
}

@media (max-width: 767px) {
    .variant-karty {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* Jednotlivá karta varianty */
.variant-karta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background: #fff;
    box-sizing: border-box;
}

.variant-karta:hover {
    border-color: #999;
    background: #f7f7f9;
}

.variant-karta.active {
    border: 2px solid #24a800;
    padding: 6px 11px;
    background: #fff;
}

/* Velikost — tučně, fixní šířka pro zarovnání */
.variant-karta-velikost {
    font-weight: 600;
    font-size: 14px;
    color: #1e1e1c;
    min-width: 28px;
}

/* Rozměry — normální váha, doplňková info */
.variant-karta-rozmery {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    white-space: nowrap;
}

/* Cena — vpravo */
.variant-karta-cena {
    font-size: 14px;
    font-weight: 600;
    color: #1e1e1c;
    margin-left: auto;
    white-space: nowrap;
}

/* Indikátor dostupnosti — malá tečka */
.variant-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.variant-dot--skladem {
    background: #24a800;
}

.variant-dot--objednavka {
    background: #ccc;
}

/* Legenda dostupnosti pod kartami — celá šířka gridu */
.variant-legenda {
    grid-column: 1 / -1;
    display: flex;
    gap: 16px;
    margin: 2px 0 0;
    font-size: 12px;
    color: #666;
}

.variant-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.variant-legenda .variant-dot {
    width: 14px;
    height: 14px;
}

.variant-legenda-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Tooltip otazníček v legendě — dostatečně velký pro klik na mobilu */
.variant-legenda-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.variant-legenda-info:hover {
    background: #ccc;
    color: #333;
}

.variant-legenda-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: normal;
    width: 240px;
    z-index: 100;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    text-align: left;
}

.variant-legenda-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

/* Desktop: hover */
.variant-legenda-info:hover .variant-legenda-tooltip {
    display: block;
}

/* Mobil: klik */
.variant-legenda-info.variant-legenda-info--open .variant-legenda-tooltip {
    display: block;
}

@media (max-width: 767px) {
    .variant-legenda-tooltip {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - 48px);
        max-width: 300px;
        font-size: 13px;
        z-index: 1000;
    }
    .variant-legenda-tooltip::after {
        display: none;
    }
}

/* --- Skrytí krátkého popisu na detailu produktu --- */
div.p-short-description {display:none !important;}

/* --- Obecné úpravy --- */
p a {text-decoration:underline;}
.votes-wrap .votes-wrap {padding-left: 65px;}
span.availability-amount {display:none !important;}
.social-buttons-wrapper {display:none !important;}
.footer-banners, .middle-banners-wrapper, .next-to-carousel-banners {flex-wrap:inherit;}
#navigation ul.menu-level-1>li>a {padding: 0 10px !important;}
.product-top .detail-parameters {margin-top: 0px; margin-bottom:0px;}
.product-top .p-detail-info .flags {margin-bottom: 0px;}
.type-detail .shp-tabs-wrapper .shp-tabs-row {margin: 10px 0 0;}
.type-detail .shp-tabs-holder {background-color:#f7f7f9;}
.type-detail .shp-tabs-wrapper .extended-description {max-width:320px;border-left: 1px solid #f1f1f1;}
.product-top .price-line {background-color:#f7f7f9;padding:8px 15px;border:1px solid #e4e4e4;}
.product-top .detail-parameters td select {background-color:#dcffe1;border:1px solid #e4e4e4;color:black;font-weight:600 !important;}
.products-block.products .product .flags.flags-extra .flag span {color:white !important;}
span.flag.flag-10--sleva-s-kodem-sleva10 {color:white !important;}
span.flag.flag-sleva-10--s-kodem-black {color:white !important;}
ul.menu-level-3 {display: none !important;}
.products-inline.products .product {background-color:white;border:1px solid #e4e4e4;}
ul#p-detail-tabs {border:1px solid #e4e4e4;}
.product-top .quantity {border:1px solid #e4e4e4;}
span.decrease {border:1px solid #e4e4e4;}
.quantity .increase {height:42px;}
.quantity .decrease {height:42px;}
.category-header {background-color:#f7f7f9;border:1px solid #e4e4e4;}

.type-detail .benefitBanner {margin:0px 0 0;}
#navigation ul.menu-level-1>li>a {padding:0 15px;}
.product-top .p-detail-info>div:not([class]) {display:none;}
span.flag.flag-nejprodavanejsi {color:white !important;}
.flags .flag.flag-action {background-color:#ff5959 !important;color:white;}
.flags-extra .flag.flag.flag-discount, .p-image-wrapper .flags-extra .flag.flag.flag-discount {background-color:#ff5959 !important;color:white !important;}
.products-inline.products {background-color:white;}
div.button-wrapper {padding-bottom:10px;}
.products-block.products .product .flags.flags-default {font-size:1.2em;}
span.flag.flag-custom1 {color:white !important;}
a.project-phone:after {content:" "}
#content-wrapper {background-color:white;padding-top:10px;}

/* --- Zvýraznění položek menu --- */
.menu-item-693.ext {background-color:#f5f5f5;padding-left:10px;}
.menu-item-708.ext {background-color:#f5f5f5;}
.menu-item-780 {background-color:#f5f5f5;}
.menu-item-744 {background-color:#f5f5f5;}
.menu-item-747 {background-color:#f5f5f5;}
.menu-item-774 {background-color:#f5f5f5;}
.menu-item-809.ext {background-color:#f5f5f5;}
.menu-item-1257 {background-color:#f5f5f5;}
.menu-item-1276 {background-color:#f5f5f5;}
.menu-item-1295 {background-color:#f5f5f5;}
.menu-item-1263 {background-color:#ffce1f;}
.menu-item-1298 {background-color:#ffce1f;}
.menu-item-1304 {background-color:black;}
#navigation ul.menu-level-1>li:first-child a {color:black;}

/* menu-level-3 duplicitní pravidlo odstraněno — viz řádek výše */
.site-msg.information {
    color: white;
    background: #009901;}

.icodet img {width:90px;display:inline-block;}
.dalsibarvy {padding:20px 0;}
.button1 {padding:15px 15px;border:1px solid #e4e4e4;font-weight:400;font-family:"Source Sans 3";font-size:14px;height:20px;letter-spacing:0.5px}
.grey {background-color:#f5f5f5;}

/* --- Responsive: tablet --- */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    #header .search {
        height: 70px;
        width: 270px;
    }
}

/* --- Responsive: mobil --- */
@media only screen and (max-width: 767px) {
    #header .header-top .dropdown {
        top: 0px !important;
        right: 60px;
        display: inline !important;
        border-left: 0px;
        float:right;
    }

    .site-msg.information .close, div.message.notice-message .close {
    background-size:40px;
    }
    #header .header-top .dropdown>span {
    	display:none;
    }

    #header .header-top .dropdown button {
    	top:14px;
    }
    .dropdown-menu {
    	right:-10px;
      min-width:80px;
      font-size:18px;
      top:58px;
    }

    #navigation ul.menu-level-1>li>a {
    	padding: 6px 10px !important;
      font-size:24px;
    }

    #navigation li a {
    	font-size:24px;
    }
}

@media (max-width: 600px) {
    .type-detail .shp-tabs-wrapper .extended-description {max-width:480px;border-left: 0px;}
    .menu-item-693.ext {padding-left:0px;}
    ul.menu-level-3 {display:block;}
    #navigation ul.menu-level-1>li .menu-level-2 li.has-third-level.clicked>div {position:relative;}
}

/* --- Akční odpočet (countdown) --- */
.product-countdown {
    font-size: 1rem;
    color: #ffffff !important;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: black;
    padding: 8px 15px;
    border: 1px solid #e4e4e4;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-weight: 400 !important;
}

/* --- Kopírovatelný slevový kód --- */
.copy-code {
    cursor: pointer;
    color: #ffffff;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Tooltip styling ZAKOMENTOVÁNO
.tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}*/

/* --- Notifikace po zkopírování --- */
.copy-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* --- Propojení produktů (barevné varianty) --- */
.propojeni-kontejner {
    margin: 12px 0;
}

.propojeni-produktu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 6px;
}

.propojeni-label-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.propojeni-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.propojeni-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.propojeni-info:hover {
    background: #ccc;
    color: #333;
}

.propojeni-info .propojeni-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: normal;
    width: 240px;
    z-index: 100;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    text-align: left;
}

.propojeni-info .propojeni-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

/* Desktop: hover */
.propojeni-info:hover .propojeni-tooltip {
    display: block;
}

/* Mobil: kliknutím (JS přidává třídu) */
.propojeni-info.propojeni-info--open .propojeni-tooltip {
    display: block;
}

/* Mobil: tooltip nesmí utéct mimo viewport */
@media (max-width: 767px) {
    .propojeni-info .propojeni-tooltip {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - 48px);
        max-width: 300px;
        font-size: 14px;
        z-index: 1000;
    }
    .propojeni-info .propojeni-tooltip::after {
        display: none;
    }
}

.propojeni-kolecka {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.propojeni-kolecko {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e4e4e4;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.propojeni-kolecko:hover {
    transform: scale(1.15);
    border-color: #999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.propojeni-kolecko.active {
    border-color: #24a800;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(36, 168, 0, 0.3);
    cursor: default;
}

/* Tlačítko "+N" pro rozbalení dalších barev */
.propojeni-vice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 2px solid #e4e4e4;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    user-select: none;
}

.propojeni-vice:hover {
    background: #e0e0e0;
    border-color: #999;
    transform: scale(1.15);
}

.propojeni-vice--open {
    background: #e8e8e8;
    border-color: #999;
}

/* Skryté kolečka — defaultně schované, po rozbalení na novém řádku */
.propojeni-skryte {
    display: none;
    flex-basis: 100%;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
    flex-wrap: wrap;
}

/* Po rozbalení: zobrazit jako flex na celé šířce (nový řádek) */
.propojeni-skryte--open {
    display: flex;
}