/* VIP-Menu — wersja pokazowa. Kremowe tło, złoto, czerń — jak na makiecie klienta. */
:root{
  --krem:#FAF7F0; --papier:#FFFDF8; --tusz:#17140F; --szary:#5B5447; --linia:#E4DCC9;
  --zloto:#C99A33; --zloto-jasne:#EED48A; --zloto-tekst:#7A5A14; --ziel:#2F6B3A; --czerw:#A3262A;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --cien:0 18px 50px -24px rgba(40,30,10,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{position:relative;margin:0;background:var(--krem);color:var(--tusz);font-family:var(--sans);font-size:16px;line-height:1.5;min-height:100svh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--zloto-tekst);outline-offset:3px}

/* tło: zdjęcie nakrytego stołu przygaszone kremem (jak na makiecie) */
.tlo{position:absolute;top:0;left:0;right:0;height:max(100svh,760px);z-index:-1;background:url(../img/tlo.jpg) center/cover no-repeat}
.tlo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,247,240,.80),rgba(250,247,240,.88) 70%,#FAF7F0)}

/* logo */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;background:var(--papier);padding:12px 16px 10px;border-radius:4px;box-shadow:var(--cien)}
.logo svg{width:92px;height:92px}
.logo span{font-weight:800;letter-spacing:.12em;font-size:14px}

/* wybór miasta — pudełko jak na makiecie „Łódź ▾” */
.miasto-pole{display:inline-flex;align-items:center;background:var(--papier);border:2px solid var(--tusz);border-radius:3px;box-shadow:var(--cien);position:relative}
.miasto-pole select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-weight:800;font-size:20px;padding:8px 52px 8px 18px;cursor:pointer}
.miasto-pole::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;border-left:2px solid var(--tusz);background:linear-gradient(45deg,transparent 45%,var(--tusz) 46% 54%,transparent 55%) no-repeat 11px 16px/7px 7px,linear-gradient(-45deg,transparent 45%,var(--tusz) 46% 54%,transparent 55%) no-repeat 17px 16px/7px 7px;pointer-events:none}

/* ============ START ============ */
.gora{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px clamp(16px,4vw,48px) 0}
.gora-www{align-self:center;font-weight:700;letter-spacing:.04em;color:var(--szary);font-size:15px}
.start{min-height:calc(100svh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px 72px;position:relative}
.start h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,7vw,76px);line-height:1.02;margin:0 0 14px;letter-spacing:-.01em}
.start h1 em{font-style:italic;color:var(--zloto-tekst)}
.podtytul{max-width:34em;margin:0 auto 28px;color:var(--szary);font-size:17px}
.szukaj{display:flex;gap:10px;width:min(640px,100%);margin:0 auto}
.szukaj input{flex:1;min-width:0;height:60px;border:2px solid var(--tusz);border-radius:3px;background:var(--papier);padding:0 18px;font-size:18px;font-weight:600;box-shadow:var(--cien)}
.szukaj input::placeholder{color:#7A7263;font-weight:600}
.btn-szukaj{min-height:60px;padding:16px 26px;border:2px solid var(--ziel);background:var(--ziel);color:#fff;font-weight:800;font-size:18px;letter-spacing:.04em;border-radius:3px;cursor:pointer;box-shadow:var(--cien)}
.btn-szukaj:hover{background:#23552D}
.podpowiedzi{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0;font-size:14px;color:var(--szary);align-items:center}
.podpowiedzi button{border:1px solid var(--linia);background:var(--papier);border-radius:99px;padding:8px 16px;font-weight:700;cursor:pointer;color:var(--tusz)}
.podpowiedzi button:hover{border-color:var(--zloto);color:var(--zloto-tekst)}
.btn-rot{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:16px 28px;border:2px solid var(--zloto-jasne);background:var(--papier);font-size:clamp(19px,2.4vw,24px);font-weight:600;text-decoration:none;border-radius:3px;box-shadow:var(--cien);transition:border-color .2s,transform .2s}
.btn-rot:hover{border-color:var(--zloto);transform:translateY(-2px)}
.btn-rot svg{width:22px;height:22px}
.licznik{margin:22px 0 0;font-size:14px;font-weight:700;color:var(--szary);letter-spacing:.02em}
.start-marka{position:absolute;right:clamp(16px,4vw,48px);bottom:18px}

.wyniki{padding:8px clamp(16px,4vw,48px) 56px;max-width:1240px;margin:0 auto;scroll-margin-top:16px}
.wyniki h2{font-family:var(--serif);font-size:clamp(28px,4vw,40px);margin:0 0 18px}
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.karta{display:flex;flex-direction:column;background:var(--papier);border:1px solid var(--linia);border-radius:6px;overflow:hidden;text-decoration:none;box-shadow:var(--cien);transition:transform .2s}
.karta:hover{transform:translateY(-3px)}
.karta img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.karta-tresc{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.karta-danie{font-family:var(--serif);font-size:23px;font-weight:700;line-height:1.1}
.karta-rest{font-size:14px;color:var(--szary)}
.karta-cena{margin-top:auto;padding-top:8px;font-weight:800;font-size:18px}
.pusto{background:var(--papier);border:1px dashed var(--linia);padding:22px;border-radius:6px;color:var(--szary)}

/* ============ KARTA DANIA (układ 1:1 z makiety) ============ */
.scena{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,560px) minmax(150px,1fr);
  grid-template-areas:"logo gora miasto" "logo rest mapa" ". wejdz mapa" ". danie ." "lewo foto prawo" "adres dol cena" ". dol marka";
  column-gap:24px;row-gap:6px;padding:18px clamp(16px,3vw,40px) 18px;max-width:1280px;margin:0 auto;align-items:center}
.s-logo{grid-area:logo;justify-self:start;align-self:start}
.s-miasto{grid-area:miasto;justify-self:end;align-self:start}
.s-rest{grid-area:rest;text-align:center}
.s-rest h1{font-family:var(--serif);font-size:clamp(32px,4vw,46px);line-height:1.05;margin:0}
.wejdz{grid-area:wejdz;justify-self:center;display:inline-flex;align-items:flex-end;gap:10px;text-decoration:none;font-weight:800;font-size:17px}
.wejdz svg{width:64px;height:52px;transition:transform .2s}
.wejdz:hover svg{transform:scale(1.06)}
.s-mapa{grid-area:mapa;justify-self:end;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-weight:800;font-size:17px}
.s-mapa svg{width:104px;height:92px;border:3px solid var(--tusz);background:#EFE9DA;box-shadow:var(--cien)}
.s-danie{grid-area:danie;text-align:center}
.s-danie h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);line-height:1.05;margin:8px 0 4px}
.s-danie p{margin:0;font-size:clamp(16px,1.6vw,20px);font-weight:600;color:var(--szary)}
.s-foto{grid-area:foto;margin:0;justify-self:center;width:min(420px,44vh,100%);touch-action:none;user-select:none;-webkit-user-select:none;position:relative}
.s-foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:4px solid var(--zloto-jasne);box-shadow:0 26px 60px -26px rgba(40,30,10,.6);background:#fff}
.s-foto figcaption{text-align:center;font-size:13px;font-weight:700;color:var(--szary);margin-top:10px;letter-spacing:.02em}
.strzalka{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:16px;padding:6px;color:var(--tusz)}
.strzalka svg{width:66px;height:66px;transition:transform .2s}
.strzalka svg path{fill:rgba(255,253,248,.7);stroke:var(--tusz);stroke-width:3;stroke-linejoin:miter;transition:fill .2s}
.strzalka:hover svg path{fill:var(--zloto-jasne)}
.s-gora{grid-area:gora;justify-self:center}
.s-gora span:last-child{order:-1}
.s-dol{grid-area:dol;justify-self:center;align-self:start}
.s-lewo{grid-area:lewo;justify-self:end}
.s-prawo{grid-area:prawo;justify-self:start}
.s-lewo svg{transform:rotate(-90deg)} .s-prawo svg{transform:rotate(90deg)} .s-dol svg{transform:rotate(180deg)}
.s-lewo:hover svg{transform:rotate(-90deg) translateY(-4px)} .s-prawo:hover svg{transform:rotate(90deg) translateY(-4px)}
.s-gora:hover svg{transform:translateY(-4px)} .s-dol:hover svg{transform:rotate(180deg) translateY(-4px)}
.s-cena{grid-area:cena;justify-self:end;background:var(--papier);padding:10px 26px;font-weight:800;font-size:clamp(28px,3vw,40px);box-shadow:var(--cien);border-radius:3px;white-space:nowrap}
.s-adres{grid-area:adres;justify-self:start;margin:0;font-weight:800;font-size:clamp(18px,1.8vw,24px)}
.s-marka{grid-area:marka;justify-self:end;display:flex;align-items:center;gap:12px;background:var(--papier);padding:8px 16px 8px 8px;box-shadow:var(--cien);border-radius:3px}
.s-marka svg{width:58px;height:58px}
.s-marka span{font-weight:800;line-height:1.15}
.wskazowka{text-align:center;color:var(--szary);font-size:14px;margin:6px 16px 26px}
.scena-pusta{grid-column:1/-1;text-align:center;padding:60px 16px}

/* ============ PANEL ============ */
.panel-gora{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px clamp(16px,3vw,40px) 6px;max-width:1280px;margin:0 auto}
.panel-gora .logo{padding:8px 12px 6px}.panel-gora .logo svg{width:60px;height:60px}.panel-gora .logo span{font-size:12px}
.panel-gora h1{font-family:var(--serif);font-size:clamp(32px,4vw,44px);margin:0;flex:1}
.panel-gora a.wroc{font-weight:800;text-decoration:none;border-bottom:2px solid var(--zloto)}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px clamp(16px,3vw,40px) 40px;max-width:1280px;margin:0 auto;align-items:start}
.blok{background:rgba(255,253,248,.96);border:1px solid var(--linia);border-radius:8px;padding:22px clamp(16px,2.4vw,28px) 26px;box-shadow:var(--cien);min-width:0}
.blok h2{font-size:20px;margin:0 0 4px;font-weight:800}
.blok .opis-bloku{margin:0 0 18px;color:var(--szary);font-size:14px}
.pole{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.pole label{font-weight:800;font-size:14px}
.pole small{color:var(--szary);font-size:13px}
.pole input,.pole select,.pole textarea{border:1.5px solid #CFC5AE;border-radius:4px;background:#fff;padding:11px 12px;font-size:16px;width:100%;min-width:0}
.pole textarea{min-height:70px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--zloto-tekst);outline:none;box-shadow:0 0 0 3px rgba(201,154,51,.25)}
.pole.blad input,.pole.blad select,.pole.blad .foto-pole{border-color:var(--czerw)}
.pole .komunikat{color:var(--czerw);font-size:13px;font-weight:700;display:none}
.pole.blad .komunikat{display:block}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.foto-pole{display:flex;align-items:center;gap:14px;border:1.5px dashed #BFB396;border-radius:6px;padding:12px;background:#fff;cursor:pointer;position:relative}
.foto-pole.nad{border-color:var(--zloto);background:#FFF8E6}
.foto-pole input{position:absolute;inset:0;opacity:0;cursor:pointer}
.foto-pole .podglad{width:74px;height:74px;border-radius:4px;background:#F1ECE0 center/cover;flex:none;display:grid;place-items:center;color:var(--szary);font-size:26px}
.foto-pole b{display:block}
.foto-pole span{font-size:13px;color:var(--szary)}
.folder-info{font-size:13px;font-weight:700;color:var(--zloto-tekst);min-height:1em}
.btn-dodaj{width:100%;min-height:56px;padding:16px;border:2px solid var(--ziel);background:var(--ziel);color:#fff;font-weight:800;font-size:17px;letter-spacing:.05em;border-radius:4px;cursor:pointer;margin-top:6px}
.btn-dodaj:hover{background:#23552D}
.szukaj-panel{display:flex;gap:8px;margin-bottom:18px}
.szukaj-panel input{flex:1;min-width:0;border:1.5px solid #CFC5AE;border-radius:4px;padding:11px 12px;font-size:16px}
.szukaj-panel button{border:1.5px solid var(--tusz);background:var(--tusz);color:#fff;border-radius:4px;padding:10px 18px;font-weight:800;cursor:pointer}
.folder{border:1px solid var(--linia);border-radius:6px;margin-bottom:14px;overflow:hidden;background:#fff}
.folder h3{margin:0;padding:10px 14px;background:#F6F1E4;font-size:16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.folder h3 small{font-weight:600;color:var(--szary)}
.wiersz{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid #F0EADC}
.wiersz img{width:44px;height:44px;object-fit:cover;border-radius:3px}
.wiersz .nazwa{font-weight:700;font-size:15px;line-height:1.25}
.wiersz .nazwa small{display:block;color:var(--szary);font-weight:600}
.btn-male{border:1.5px solid var(--tusz);background:#fff;border-radius:4px;padding:8px 13px;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-male:hover{background:var(--tusz);color:#fff}
.btn-usun{border-color:var(--czerw);color:var(--czerw)}
.btn-usun:hover{background:var(--czerw);color:#fff}
.nota{font-size:13px;color:var(--szary);margin:16px 0 0;max-width:min(100%,50ch)}
.nota button{border:0;background:none;padding:0;font-weight:800;text-decoration:underline;cursor:pointer;color:var(--tusz)}

/* okno potwierdzenia */
.okno-tlo{position:fixed;inset:0;background:rgba(23,20,15,.55);display:grid;place-items:center;padding:16px;z-index:50}
.okno-tlo[hidden]{display:none}
.okno{background:var(--papier);border-radius:8px;padding:24px;max-width:420px;width:100%;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.okno h2{margin:0 0 8px;font-size:21px}
.okno p{margin:0 0 20px;color:var(--szary)}
.okno .przyciski{display:flex;gap:10px;justify-content:flex-end}
.okno .tak{background:var(--czerw);border-color:var(--czerw);color:#fff}

/* stopka i komunikat */
.stopka{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;padding:18px clamp(16px,3vw,40px) 26px;max-width:1280px;margin:0 auto;font-size:14px;color:var(--szary)}
.stopka a{font-weight:800;color:var(--tusz)}
.stopka p{margin:0}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--tusz);color:#fff;padding:12px 18px;border-radius:6px;font-weight:600;font-size:15px;max-width:calc(100% - 32px);box-shadow:0 16px 40px -12px rgba(0,0,0,.5);transition:opacity .25s,transform .25s;z-index:60}
.toast.widac{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--zloto-jasne);font-weight:800}

/* ============ TELEFON ============ */
@media (max-width:820px){
  .panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .gora{padding-top:14px}
  .gora-www{display:none}
  .logo{padding:8px 10px 6px}.logo svg{width:58px;height:58px}.logo span{font-size:11px}
  .miasto-pole select{font-size:17px;padding:7px 46px 7px 14px}
  .miasto-pole::after{width:32px;background-position:9px 14px,15px 14px}
  .start{min-height:calc(100svh - 110px);padding-bottom:96px}
  .szukaj{flex-direction:column}
  .szukaj input{height:54px;flex:none}.btn-szukaj{min-height:54px;padding:14px 26px;flex:none}
  .start-marka{display:none}
  .scena{grid-template-columns:1fr 1fr;grid-template-areas:"logo miasto" "rest rest" "wejdz mapa" "gora gora" "danie danie" "foto foto" "dol dol" "cena adres";column-gap:12px;row-gap:10px;padding-top:14px}
  .s-rest h1{font-size:30px}
  .wejdz,.s-mapa{justify-self:stretch;flex-direction:row;justify-content:center;align-items:center;gap:8px;background:var(--papier);border:2px solid var(--tusz);border-radius:3px;padding:6px 10px;font-size:16px}
  .wejdz svg{width:34px;height:28px}
  .s-mapa svg{width:34px;height:28px;border-width:2px;box-shadow:none}
  .strzalka{flex-direction:row;font-size:14px;gap:8px}
  .strzalka svg{width:30px;height:30px}
  .s-gora span:last-child{order:0}
  .s-foto{width:100%}
  .s-lewo,.s-prawo{grid-area:foto;align-self:center;position:relative;z-index:3;padding:0;margin:0 4px}
  .s-lewo{justify-self:start}.s-prawo{justify-self:end}
  .s-lewo span:last-child,.s-prawo span:last-child{display:none}
  .s-lewo svg,.s-prawo svg{width:46px;height:46px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
  .s-lewo svg path,.s-prawo svg path{fill:rgba(255,253,248,.92)}
  .s-foto figcaption{margin-top:8px}
  .s-cena{justify-self:start;padding:8px 18px}
  .s-adres{justify-self:end;text-align:right;font-size:17px}
  .s-marka{display:none}
  .dwa{grid-template-columns:1fr}
  .wiersz{grid-template-columns:44px minmax(0,1fr) auto;row-gap:6px}
  .wiersz .btn-usun{grid-column:3}
  .wiersz .btn-zobacz{grid-column:3;grid-row:1}
  .wiersz .btn-usun{grid-row:2}
  .wiersz img{grid-row:1/3}
  .wiersz .nazwa{grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}