/* Animowane potwierdzenie zamówienia */
.order-confirmation {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15,22,25,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.5s;
}
.order-confirmation-inner {
  background: rgba(34, 54, 64, 0.98);
  border-radius: 18px;
  padding: 40px 32px 32px 32px;
  box-shadow: 0 8px 32px 0 rgba(102,223,255,0.18);
  text-align: center;
  animation: popIn 0.6s cubic-bezier(.68,-0.55,.27,1.55);
}
.order-confirmation svg {
  margin-bottom: 18px;
  animation: tickPop 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
.order-confirmation-text {
  color: var(--accent);
  font-size: 1.3em;
  font-weight: 700;
  margin-top: 8px;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0; }
  80% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes tickPop {
  0% { transform: scale(0.5) rotate(-30deg); opacity: 0; }
  80% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
/* Mało widoczny link do regulaminu */
.footer-legal-link {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 0.95em;
  opacity: 0.55;
  margin-top: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-legal-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}
/* Przycisk powrotu w prawym górnym rogu formularza zamówienia */
.order-cancel-top {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 10;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #032;
  border: none;
  padding: 8px 18px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 1.1em;
  box-shadow: 0 2px 8px rgba(102,223,255,0.18);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.order-cancel-top:hover {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: 0 4px 16px rgba(102,223,255,0.28);
}
.order {
  position: relative;
}
:root{
  --bg:#0b0f12;
  --panel:#0f1619;
  --muted:#9aa6ad;
  --accent:#66dfff;
  --accent-2:#78bfff;
  --glass:rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
/* Use the hero photo as a subtle page background (cover, centered, fixed)
  and keep the original gradient overlay for contrast. Image path is
  relative to this CSS file: ../img/ice-hero.jpg */
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background-image: linear-gradient(180deg, rgba(7,16,21,0.55), rgba(7,16,21,0.65)), url("../img/ice-hero.jpg"); background-size:cover; background-position:center; background-attachment:fixed; color:#e6f6fb; min-height:100vh; display:flex; flex-direction:column}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:20px;margin:0}
.header-controls{display:flex;align-items:center;gap:10px}
.nav-tabs{display:flex;gap:10px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px}
.nav-link:hover{color:#e6f6fb;background:rgba(255,255,255,0.03)}
.anim-toggle{padding:6px 10px;font-size:13px;border-radius:8px}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#032; border:none;padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600}
.cta:hover{transform:translateY(-2px)}
.muted{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03);padding:8px 12px;border-radius:8px}
.hero{padding:48px 26px;display:flex;justify-content:center}
.hero-inner{max-width:980px;text-align:center}
.hero h2{font-size:28px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 18px}
.illustration{height:140px;display:flex;align-items:center;justify-content:center}
.illustration img#hero-img{max-width:100%;height:140px;object-fit:cover;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}
.how{padding:8px 26px;color:var(--muted)}
.order .how{padding:0;margin-bottom:12px}
.pricing{padding:0 26px 8px;color:var(--muted);display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:20px;opacity:0;transition:opacity 0.5s ease-in-out}
.pricing:not(.pricing-hidden){opacity:1}
.price-item{
  position:relative;
  display:inline-block;
  margin:12px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 8px 32px 0 rgba(102,223,255,0.18), 0 2px 8px 0 rgba(0,0,0,0.18);
  border:3px solid;
  border-image:linear-gradient(120deg, var(--accent), var(--accent-2), #fff 80%) 1;
  background:rgba(15,22,25,0.92);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.price-item:hover {
  transform:scale(1.045) rotate(-1deg);
  box-shadow:0 16px 48px 0 rgba(102,223,255,0.28), 0 4px 16px 0 rgba(0,0,0,0.22);
  z-index:2;
}
.price-item img{
  width:260px;
  height:200px;
  object-fit:cover;
  display:block;
  opacity:0.93;
  border-radius:18px 18px 12px 12px;
  box-shadow:0 4px 24px 0 rgba(102,223,255,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.10);
  transition:box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}
.price-item:hover img {
  opacity:1;
  box-shadow:0 8px 32px 0 rgba(102,223,255,0.18), 0 2px 8px 0 rgba(0,0,0,0.18);
}
.price-item p{
  text-align:center;
  margin:14px 0 0;
  color:var(--accent);
  font-weight:700;
  font-size:1.25em;
  letter-spacing:0.5px;
  text-shadow:0 2px 8px rgba(102,223,255,0.10);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.price-overlay{
  position:absolute;
  bottom:14px;
  right:14px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#032;
  padding:7px 16px;
  border-radius:8px;
  font-weight:900;
  font-size:1.1em;
  box-shadow:0 2px 8px rgba(102,223,255,0.18);
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
  transform:translateY(10px) scale(0.98);
}
.price-item:hover .price-overlay{
  opacity:1;
  transform:translateY(0) scale(1.04);
}
.price-item:hover .price-overlay{opacity:1}
.order{padding:18px 26px;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);transform:translateY(100%) scale(0.9);opacity:0;transition:transform 0.7s cubic-bezier(0.4,0,0.2,1),opacity 0.7s cubic-bezier(0.4,0,0.2,1);z-index:1000;overflow-y:auto}
.order:not(.order-hidden){transform:translateY(0) scale(1);opacity:1}
.hidden{display:none}
form{max-width:940px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
fieldset{border:none;padding:0;margin:0 0 12px}
label{display:block;margin:8px 0;color:#d7f6ff}
input[type='text'],input[type='email'],input[type='tel'],input[type='number'],textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:var(--panel);color:inherit}
.map{height:320px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);margin-top:8px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:8px}
.map-status{color:var(--muted);margin-top:6px}
.send-status{margin-top:12px;color:var(--muted);padding:12px;background:rgba(255,107,107,0.1);border-radius:8px;border-left:3px solid #ff6b6b}
.send-status ul{margin:8px 0;padding-left:20px}
.field-error{display:block;color:#ff6b6b;font-size:0.9em;margin-top:4px}
input:invalid:not(:placeholder-shown),textarea:invalid:not(:placeholder-shown){border-color:#ff6b6b}
input:valid:not(:placeholder-shown),textarea:valid:not(:placeholder-shown){border-color:rgba(102,223,255,0.4)}
footer{margin-top:auto;padding:18px 26px;color:var(--muted);font-size:14px;border-top:1px solid rgba(255,255,255,0.02)}
@media (max-width:720px){
  .hero h2{font-size:20px}
  .site-header{padding:12px}
  .hero{padding:24px 12px}
  .map{height:240px}
  .illustration img#hero-img{height:120px}
}

/* Delikatne przyciemnienie obrazu hero (overlay) */
.illustration{position:relative}
.illustration img#hero-img{display:block;border:0;box-shadow:none}

/* Animated ice-cube logo in header */
.ice-logo{width:48px;height:48px;display:flex;align-items:center}
.ice-logo svg{width:48px;height:48px;display:block}
.ice-logo .cube{transform-origin:center; /* center for nicer scale */
  /* mocniejsza animacja: unoszenie, obrót i delikatne powiększenie */
  animation:iceFloat 2.6s ease-in-out infinite, iceWobble 5s ease-in-out infinite, icePulse 4s ease-in-out infinite;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,0.14));
  stroke-width:1.2px; stroke-opacity:0.8;
}
.ice-logo .cube:nth-of-type(1){animation-delay:0s}
.ice-logo .cube:nth-of-type(2){animation-delay:0.12s}
.ice-logo .cube:nth-of-type(3){animation-delay:0.24s}

/* highlights (shine) glint animation */
.ice-logo .shine{transform-origin:center; animation:glint 2.2s linear infinite; opacity:0.85}

@keyframes iceFloat{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-8px) rotate(6deg) scale(1.04)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes iceWobble{
  0%{filter:drop-shadow(0 4px 4px rgba(0,0,0,0.08))}
  50%{filter:drop-shadow(0 12px 10px rgba(0,0,0,0.14))}
  100%{filter:drop-shadow(0 4px 4px rgba(0,0,0,0.08))}
}
@keyframes icePulse{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  40%{transform:translateY(-3px) rotate(2deg) scale(1.03)}
  60%{transform:translateY(-6px) rotate(4deg) scale(1.06)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes glint{
  0%{opacity:0.4; transform:translateX(-2px) scale(0.98)}
  50%{opacity:1; transform:translateX(2px) scale(1.04)}
  100%{opacity:0.4; transform:translateX(-2px) scale(0.98)}
}

/* accessibility: users who prefer reduced motion get static logo */
@media (prefers-reduced-motion: reduce){
  .ice-logo .cube, .ice-logo .shine{animation:none !important; transform:none !important}
}

/* paused state when user disables logo animation */
body.logo-anim-paused .ice-logo .cube,
body.logo-anim-paused .ice-logo .shine,
body.logo-anim-paused .ice-logo .orbit,
body.logo-anim-paused .ice-logo .orbiter{
  animation-play-state:paused !important;
}

/* Slightly reduce motion on very small screens */
@media (max-width:420px){
  .ice-logo .cube{animation-duration:3s,6s,5s}
  .ice-logo .shine{animation-duration:2.8s}
}

/* orbit (kręcenie się kostek) */
.ice-logo .orbit{transform-origin:50% 50%; animation:orbit 6s linear infinite}
.ice-logo .orbiter{transform-origin:center; /* obiekt obraca się wokół własnego środka aby skompensować obrót orbit */
  animation:counterOrbit 6s linear infinite;}

@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counterOrbit{to{transform:rotate(-360deg)}}

@media (prefers-reduced-motion: reduce){
  .ice-logo .orbit, .ice-logo .orbiter{animation:none !important; transform:none !important}
}

/* On wider screens, hide the inline hero <img> and rely on the
   page background so the photo feels like the page background. Keep
   the inline image visible on small screens (mobile) for bandwidth
   and layout reasons. */
@media (min-width:720px){
  .illustration img#hero-img{display:none}
  /* keep hero section transparent so background shows through */
  .hero{background:transparent}
}