/* ============================================================
   components.css — komponenty wielokrotnego użytku
   (przyciski, tagi, akordeon FAQ, pola formularza, pasek mobilny)
   ============================================================ */

/* --- przyciski --- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-semi);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border:none;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-pink{background:var(--pink);color:#fff;padding:16px 30px;font-size:clamp(14px,1.6vw,16px);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 14px 40px rgba(255,26,107,.4)}
.btn-ghost{background:transparent;color:var(--text);padding:16px 26px;font-size:clamp(14px,1.6vw,16px);
  border:1px solid var(--line2)}
.btn-outline{background:transparent;color:#fff;padding:15px;border:1px solid var(--line2);
  font-size:14px;justify-content:center;width:100%}

/* --- tagi / chipy --- */
.chip{padding:10px 16px;border:1px solid var(--line2);font:700 13px/1 var(--f-semi);letter-spacing:.08em;color:#dfe3ec}

/* --- akordeon FAQ --- */
.acc{background:var(--card);border:1px solid var(--line);padding:20px 26px}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:700 clamp(16px,2vw,19px) var(--f-semi);color:#fff}
.acc>summary::-webkit-details-marker{display:none}
.acc .plus{color:var(--pink);font-size:26px;line-height:1;transition:transform .25s}
.acc[open] .plus{transform:rotate(45deg)}
.acc p{margin:14px 0 0;font:500 15px/1.6 var(--f-body);color:#aab2c4}

/* --- formularz --- */
.form{background:linear-gradient(#11151f,#0d1119);border:1px solid var(--line2);padding:clamp(26px,3vw,38px)}
.form h3{margin:0 0 24px;font:800 clamp(16px,2vw,18px) var(--f-semi);letter-spacing:.04em;color:#fff}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field label{display:block;font:600 12px var(--f-body);letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:var(--ink);
  border:1px solid var(--line2);color:#fff;font:500 15px var(--f-body);outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink)}
.field textarea{min-height:110px;resize:vertical}
.form .btn-pink{width:100%;justify-content:center;margin-top:6px}
.form .ok{display:none;margin-top:16px;padding:14px 16px;background:rgba(255,26,107,.12);
  border:1px solid var(--pink);font:600 14px var(--f-body);color:#ffd0e2;text-align:center}
.form.sent .ok{display:block}

/* --- karta cennika --- */
.price{background:var(--card);border:1px solid var(--line);padding:clamp(28px,3vw,40px) clamp(24px,2.5vw,34px);
  display:flex;flex-direction:column}
.price.feat{background:linear-gradient(#160b14,#10141f);border-color:var(--pink);position:relative;
  box-shadow:0 30px 80px rgba(255,26,107,.18)}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:7px 16px;
  background:var(--pink);font:800 11px/1 var(--f-semi);letter-spacing:.14em;color:#fff;white-space:nowrap}
.price .name{font:800 15px/1 var(--f-semi);letter-spacing:.2em;color:var(--muted)}
.price.feat .name{color:var(--pink)}
.price .amt{margin:22px 0 6px;font-family:var(--f-cond);font-style:italic;font-weight:900;
  font-size:clamp(48px,6vw,64px);line-height:.85}
.price .amt i{font-style:normal;font-size:.38em;color:var(--muted)}
.price .sub{font:600 14px var(--f-body);color:var(--muted);margin-bottom:24px}
.price .hr{height:1px;background:var(--line);margin-bottom:22px}
.price.feat .hr{background:rgba(255,26,107,.3)}
.price ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.price li{font:500 15px var(--f-body);color:#cdd3df}
.price li.off{color:var(--muted2)}

/* --- karta opinii --- */
.review{background:var(--card);border:1px solid var(--line);padding:30px}
.review .stars{color:var(--pink);font-size:15px;letter-spacing:.1em;margin-bottom:16px}
.review p{margin:0 0 22px;font:500 16px/1.6 var(--f-body);color:#dfe3ec}
.review .who{display:flex;align-items:center;gap:12px}
.review .av{width:42px;height:42px;border-radius:50%;background:#1c2233;display:flex;align-items:center;justify-content:center;
  font:800 15px var(--f-semi);color:var(--pink);flex:none}
.review .who b{display:block;font:700 15px var(--f-semi);color:#fff}
.review .who span{font:500 13px var(--f-body);color:var(--muted)}

/* --- kafelki galerii --- */
.tile{position:relative;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;
  background:repeating-linear-gradient(135deg,#12151f 0 12px,#0e111a 12px 24px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(.85) brightness(.78) contrast(1.04);transition:transform .6s ease,filter .5s ease}
.tile:not(.video)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s ease;
  background:repeating-linear-gradient(122deg,rgba(255,26,107,.04) 0 18px,transparent 18px 50px),
             linear-gradient(135deg,rgba(255,26,107,.05),rgba(255,26,107,.01)),
             repeating-linear-gradient(122deg,rgba(9,12,20,.07) 0 30px,rgba(16,20,31,.03) 30px 60px);
  animation:tileTex 7s linear infinite}
.tile:not(.video):hover::after{opacity:0}
.tile:hover img{transform:scale(1.05);filter:none}
.tile .ph{font:600 11px ui-monospace,monospace;color:var(--muted2)}
.tile.video{grid-row:span 2}
.tile.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(.6) saturate(.7) brightness(.78) contrast(1.04);transition:filter .5s ease}
.tile.video:hover video{filter:none}
.tile.video .play{width:70px;height:70px;border-radius:50%;background:var(--pink);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:24px;box-shadow:0 0 0 10px rgba(255,26,107,.18);animation:pulse 2s ease-in-out infinite;z-index:2}
.tile.video .cap{position:absolute;bottom:16px;left:18px;font:600 12px ui-monospace,monospace;color:#c8cede;z-index:2}
.tile.video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s ease;
  background:repeating-linear-gradient(122deg,rgba(255,26,107,.04) 0 18px,transparent 18px 50px),
             linear-gradient(135deg,rgba(255,26,107,.05),rgba(255,26,107,.01)),
             repeating-linear-gradient(122deg,rgba(9,12,20,.06) 0 30px,rgba(16,20,31,.03) 30px 60px);
  animation:tileTex 8s linear infinite}
.tile.video:hover::after{opacity:0}
@keyframes tileTex{0%{background-position:0 0,0 0,0 0}100%{background-position:50px 0,0 0,60px 0}}

/* --- pełnoekranowa galeria (lightbox) --- */
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(5,7,13,.93);backdrop-filter:blur(12px)}
.lightbox.open{display:flex}
.lb-stage{max-width:88vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:88vw;max-height:82vh;object-fit:contain;
  border:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 4px rgba(255,26,107,.12)}
.lb-btn{position:absolute;border:1px solid var(--line2);background:rgba(11,14,23,.65);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;backdrop-filter:blur(6px)}
.lb-btn:hover{border-color:var(--pink);color:var(--pink)}
.lb-close{top:22px;right:24px;width:46px;height:46px;border-radius:50%;font-size:19px}
.lb-full{top:22px;left:24px;width:46px;height:46px;border-radius:50%;font-size:19px}
.lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;font-size:30px;line-height:1}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font:700 13px var(--f-semi);letter-spacing:.16em;color:#c8cede}
@media (max-width:768px){
  .lb-nav{width:44px;height:44px;font-size:24px}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-stage img,.lb-stage video{max-width:94vw}
}

/* --- karty informacyjne kontaktu --- */
.info{background:var(--card);border:1px solid var(--line);padding:20px}
.info .l{font:600 12px var(--f-body);letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.info .b{font:700 16px/1.35 var(--f-semi);color:#fff}
.info .b.pink{color:var(--pink)}
.info a.maplink{display:inline-block;text-decoration:none;transition:color .2s}
.info a.maplink:hover{color:var(--pink)}
.hours{background:var(--card);border:1px solid var(--line);padding:20px 22px}
.hours .l{font:600 12px var(--f-body);letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.hours .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.hours .row:last-child{border-bottom:none}
.hours .row span{font:600 15px var(--f-body);color:#cdd3df}
.hours .row b{font:800 15px var(--f-semi);color:#fff}
.hours .row b.pink{color:var(--pink)}
.map{position:relative;border:1px solid var(--line);overflow:hidden;height:200px;background:#0b0e17;box-shadow:inset 0 0 0 1px rgba(255,26,107,.2)}
.map iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) grayscale(.35) brightness(1.05) contrast(.95)}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 50% 0%,rgba(255,26,107,.12),transparent 60%)}

/* --- współdzielone animacje komponentów --- */
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}