/* Nasze dopiski do stylow starej strony (strona.css zostaje nietknieta). */

/* listy wyboru w formularzu: prawdziwy <select> jest niewidoczny (trzyma wartosc i obsluguje klawiature),
   a po kliknieciu w pole rozwija sie nasza lista w stylu strony */
.wy-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;appearance:none;font-size:16px}
[data-slot="trigger"]{cursor:pointer}
.wy-lista{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:30;padding:.35rem;border-radius:.9rem;background:#18181b;border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.6)}
.wy-opcja{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;border-radius:.6rem;font-size:.875rem;color:#e4e4e7;cursor:pointer}
.wy-opcja:hover,.wy-opcja[aria-selected="true"]{background:rgba(242,129,69,.16);color:#fff}
.wy-opcja[aria-selected="true"]::after{content:"✓";color:#f28145}

/* pole-pulapka na boty: czlowiek go nie widzi, wiec nie wypelni */
.wy-miod{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* komunikat po wyslaniu formularza */
#wy-status.wy-ok{color:#4ade80}
#wy-status.wy-blad{color:#f87171}

/* okna ze zdjeciami: na malym ekranie tresc przewija sie w oknie, zamiast wychodzic poza ekran */
.wy-okno{transition:opacity .2s ease-out}
.wy-okno>div{transition:opacity .2s ease-out,transform .2s ease-out}
.wy-okno-tresc{max-height:calc(100vh - 2rem);overflow-y:auto}

/* portfolio: strzalki i miniatury do przeskakiwania miedzy zdjeciami */
.wy-strzalka{position:absolute;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.2);transition:background .2s}
.wy-strzalka:hover{background:rgba(0,0,0,.85)}
.wy-strzalka-lewa{left:.75rem}
.wy-strzalka-prawa{right:.75rem}
.wy-licznik{position:absolute;right:.75rem;bottom:.75rem;padding:.15rem .6rem;border-radius:9999px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem}
[data-miniatura]{display:block;width:100%;cursor:pointer;opacity:.55;transition:opacity .2s}
[data-miniatura]:hover,[data-miniatura].wy-wybrana{opacity:1}
[data-miniatura].wy-wybrana{outline:2px solid #f28145;outline-offset:2px}
/* na telefonie nie ma najechania myszka, wiec podpis realizacji jest widoczny od razu */
@media (hover:none){
  [data-okno] .opacity-0{opacity:1}
  [data-okno] .translate-y-2{transform:none}
}

/* karuzela artykulow na stronie glownej */
.wy-karta-blog{flex:none;width:min(85vw,380px);scroll-snap-align:start}

/* najczestsze pytania */
.wy-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;list-style:none;border-radius:1rem}
.wy-faq summary::-webkit-details-marker{display:none}
.wy-faq summary::after{content:"+";flex:none;color:#f28145;font-size:1.5rem;font-weight:400;line-height:1;transition:transform .2s}
.wy-faq details[open] summary::after{transform:rotate(45deg)}
.wy-faq details p{padding:0 1.5rem 1.5rem}
.wy-faq summary:focus-visible{outline:2px solid #f28145;outline-offset:2px}

/* tresc artykulu na blogu i polityki prywatnosci */
.wy-artykul{font-size:1.125rem;line-height:1.75}
.wy-artykul p{margin:0 0 1.25em}
.wy-artykul h2{font-size:1.5rem;line-height:1.3;font-weight:700;color:#fafafa;margin:2em 0 .75em}
.wy-artykul h3{font-size:1.2rem;line-height:1.35;font-weight:600;color:#fafafa;margin:1.6em 0 .6em}
.wy-artykul ul,.wy-artykul ol{margin:0 0 1.25em;padding-left:1.4em}
.wy-artykul ul{list-style:disc}
.wy-artykul ol{list-style:decimal}
.wy-artykul li{margin:.4em 0}
.wy-artykul li::marker{color:#f28145}
.wy-artykul strong{color:#fafafa;font-weight:600}
.wy-artykul a{color:#f28145;text-decoration:underline;text-underline-offset:2px}
.wy-artykul.wy-drobny{font-size:1rem;line-height:1.7}
.wy-artykul.wy-drobny h2{font-size:1.25rem;margin-top:2.25em}

/* kroki "Jak to dziala": tytul nie wchodzi pod duzy numer w rogu karty */
.wy-krok-tytul{padding-right:3.25rem}
/* karty artykulow w karuzeli maja rowna wysokosc */
.wy-karta-blog>a{height:100%}

/* pakiet Personalizowany: lista drinkow do zaznaczenia (pola naleza do formularza na dole strony) */
#wy-drinki{scroll-margin-top:6rem}
.wy-drinki-siatka{display:grid;gap:1.25rem 1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.wy-drinki-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.wy-drinki-siatka{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wy-drink{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer}
.wy-drink input{appearance:none;flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;border:1.5px solid rgba(255,255,255,.35);border-radius:.3rem;background:transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
.wy-drink input:checked{border-color:#f28145;background:#f28145 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/80% no-repeat}
.wy-drink input:focus-visible{outline:2px solid #f28145;outline-offset:2px}
.wy-drink:hover input{border-color:#f28145}
.wy-drink-nazwa{display:block;font-weight:600;font-size:.9rem;color:#fafafa}
.wy-drink-opis{display:block;margin-top:.2rem;font-size:.72rem;line-height:1.45;color:rgba(250,250,250,.6)}