/* ============================================================
   ZAMIDOG - KOŠÍK
   1) Zelené tlačítko "Přidat do košíku" u doporučených produktů
   2) Béžový blok s dýškem (tři psi s mincemi) + animace
============================================================ */

/* ---------- 1) Doporučené produkty ---------- */
/* Každý doporučený produkt jako přehledná karta:
   obrázek vlevo, název a cena uprostřed, zelené tlačítko vpravo */
.zc-kosik-radek {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    margin: 0 0 8px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}
.zc-kosik-radek > label {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    /* Shoptet kreslí k zaškrtávacímu políčku vlastní čtvereček
       a odsazuje jím text. Tady ho úplně vypínáme. */
    padding-left: 0 !important;
    text-indent: 0 !important;
    background-image: none !important;
}
.zc-kosik-radek label::before,
.zc-kosik-radek label::after {
    display: none !important;
    content: none !important;
}

/* Obrázek je vždy stejně velký čtverec, ať texty začínají
   u všech řádků přesně na stejné svislici */
.zc-kosik-radek img {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    object-fit: contain !important;
    margin: 0 !important;
}
.zc-kosik-radek .zc-add-btn {
    margin-left: auto;
    flex: 0 0 auto;
}
/* ---- Přesné zarovnání řádků doplňku (fvDoplnek) ---- */
/* Schová se jen obal, ve kterém opravdu je zaškrtávací políčko.
   Právě on posouval text u každého řádku jinak. */
.zc-kosik-radek .header > span:has(input[type="checkbox"]),
.zc-kosik-radek span:has(> input[type="checkbox"]) {
    display: none !important;
}
.zc-kosik-radek .fvcontent {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.zc-kosik-radek .header {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 0 0 2px !important;
}
.zc-kosik-radek .fvDoplnek-text {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.zc-kosik-radek .fvDoplnek-description {
    margin: 0 !important;
}
.zc-kosik-radek img.fvDoplnek-product-image {
    margin: 0 14px 0 0 !important;
}

/* Textová část řádku si vezme zbytek místa a nesmrskne se */
.zc-kosik-radek > *:not(img):not(.zc-add-btn) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 240px !important;
}
/* Původní zaškrtávací políčko schováme, klikáme na něj přes tlačítko */
.zc-kosik-radek input[type="checkbox"].zc-skryty {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}
.zc-add-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #1a9d3c;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, transform .2s;
}
.zc-add-btn:hover {
    background: #157f31;
    transform: translateY(-1px);
}
.zc-add-btn.zc-hotovo {
    background: #0f6b28;
}

/* ---------- 2) Blok s dýškem (pruh s ikonkou, textem a částkami) ---------- */
#zc-dysko {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 10px 0 14px;
    padding: 16px 18px;
    background: #f7f0e6;
    border: 1px solid #e3d6c2;
    border-radius: 12px;
    box-sizing: border-box;
}
.zc-dysko-ikona {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.zc-dysko-ikona img {
    width: 52px !important;
    height: 52px !important;
    object-fit: cover !important;
    display: block;
    border-radius: 50%;
}
.zc-dysko-text {
    flex: 1 1 auto;
    min-width: 200px;
}
.zc-dysko-text b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2c2c2a;
    margin-bottom: 4px;
}
.zc-dysko-text p {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.45;
    color: #5a5a52;
}
.zc-dysko-castky {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 420px;
}
.zc-dysko-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd0ba;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #2c2c2a;
    cursor: pointer;
    transition: .2s;
}
.zc-dysko-btn img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    display: block;
}
.zc-dysko-btn:hover {
    border-color: #1a9d3c;
    color: #1a9d3c;
}
.zc-dysko-btn.zc-vybrano {
    background: #1a9d3c;
    border-color: #1a9d3c;
    color: #fff;
}
.zc-dysko-pozn {
    margin-top: 6px;
    font-size: 12px;
    color: #8a8a80;
    text-align: left;
}

/* ---------- Animace psů po kliknutí ---------- */
.zc-dysko-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0,.25);
    animation: zc-fade .3s ease;
    pointer-events: none;
}
.zc-dysko-overlay img {
    width: min(70vw, 420px);
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.25));
}
.zc-dysko-diky {
    margin-top: 14px;
    padding: 12px 26px;
    background: #fff;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 700;
    color: #2c2c2a;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    text-align: center;
}
/* 30 Kč - dalmatin vrtí */
.zc-anim-vrti img {
    animation: zc-vrti .45s ease-in-out 4;
    transform-origin: bottom center;
}
/* 50 Kč - retrívr skáče */
.zc-anim-skace img {
    animation: zc-skace .55s ease-in-out 3;
}
/* 100 Kč - border olizuje obrazovku */
.zc-anim-olizuje img {
    animation: zc-olizuje .8s ease-in-out 2;
    transform-origin: center bottom;
}
@keyframes zc-vrti {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}
@keyframes zc-skace {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-60px) scale(1.04); }
    60% { transform: translateY(-40px) scale(1.02); }
}
@keyframes zc-olizuje {
    0%, 100% { transform: scale(1) rotate(0); }
    45% { transform: scale(1.25) rotate(-3deg); }
    70% { transform: scale(1.18) rotate(3deg); }
}
@keyframes zc-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.zc-dysko-overlay.zc-konec {
    opacity: 0;
    transition: opacity .4s;
}
/* ---- Efekty u jednotlivých psů ---- */

/* 30 Kč - dalmatin: černobílé tečky a konfety */
.zc-tecka {
    position: absolute;
    border-radius: 50%;
    animation: zc-tecky 1.8s ease-out forwards;
}
.zc-tecka--cerna {
    background: #1b1b1b;
}
.zc-tecka--bila {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
@keyframes zc-tecky {
    0% { opacity: 0; transform: translateY(0) scale(.4) rotate(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-230px) scale(1.15) rotate(220deg); }
}

/* 50 Kč - retrívr: stříkance bahna */
.zc-bahno {
    position: absolute;
    background: #6b4a2b;
    border-radius: 50% 45% 55% 50%;
    animation: zc-bahno 1.5s cubic-bezier(.3,.7,.5,1) forwards;
}
@keyframes zc-bahno {
    0% { opacity: 0; transform: translate(0, 0) scale(.5); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--zc-x, 80px), 180px) scale(1.1) rotate(90deg); }
}

/* 100 Kč - border kolie: kapající sliny */
.zc-slina {
    position: absolute;
    width: 10px;
    background: linear-gradient(180deg, rgba(210,235,250,.95), rgba(170,215,240,.75));
    border-radius: 50% 50% 60% 60% / 30% 30% 80% 80%;
    animation: zc-sliny 1.7s ease-in forwards;
}
@keyframes zc-sliny {
    0% { opacity: 0; transform: translateY(0) scaleY(.5); }
    20% { opacity: 1; transform: translateY(20px) scaleY(1); }
    100% { opacity: 0; transform: translateY(240px) scaleY(1.5); }
}

@media (max-width: 768px) {
    #zc-dysko {
        flex-wrap: wrap;
        padding: 14px;
    }
    .zc-dysko-castky {
        max-width: 100%;
        width: 100%;
    }
    .zc-dysko-btn {
        flex: 1 1 calc(50% - 8px);
        padding: 10px 8px;
    }
    .zc-add-btn {
        padding: 9px 16px;
        font-size: 13px;
    }
    /* Na mobilu tlačítko přes celou šířku pod názvem */
    .zc-kosik-radek {
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
    }
    .zc-kosik-radek .zc-add-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }
}

/* ============================================================
   ŘÁDEK "DORUČENÍ MOŽNÉ DO" V KOŠÍKU
   Stejný styl jako na detailu produktu
============================================================ */
.zc-doruceni {
    font-size: 16px;
}
.zc-dor-popis {
    font-weight: 700;
    color: #2c2c2a;
}
.zc-dor-datum {
    font-weight: 700;
    color: #2E7D32;
}

/* ============================================================
   NADPIS "DÁRKY A SLEVY"
   Schovaný vždy - políčko na slevový kupón zůstává vidět.
   Třídu přidává zamidog-kosik.js
============================================================ */
.zc-darky-nadpis,
.zc-darky-nadpis.zc-videt {
    display: none !important;
}

/* ============================================================
   TLAČÍTKO "PŘIDAT SLEVOVÝ KUPÓN"
   Po najetí myší černalo i s textem - text zůstane bílý
============================================================ */
body.type-cart .discount-coupon button:hover,
body.type-cart .discount-coupon .btn:hover,
body.type-cart [class*="coupon"] button:hover,
body.type-cart [class*="coupon"] .btn:hover,
body.type-cart [class*="kupon"] button:hover,
body.type-cart [class*="kupon"] .btn:hover {
    color: #fff !important;
}
body.type-cart .discount-coupon button:hover svg,
body.type-cart [class*="coupon"] button:hover svg {
    fill: #fff !important;
    stroke: #fff !important;
}