@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --primary-color: #1d4ed8;    /* Tailwind blue-700 */
  --secondary-color: #2563eb;  /* Tailwind blue-600 */
  --text-dark: #1f2937;        /* Tailwind gray-800 */
  --text-light: #ffffff;
  --bg-light: #f9fafb;
  --bg-header: #ffffff;
  --bg-footer: #f9fafb;
}

/* =====================
   GLOBALNE USTAWIENIA
   ===================== */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* PŁYNNE PRZEJŚCIA DLA WSZYSTKICH ELEMENTÓW */
* {
  transition: all 0.3s ease;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* =====================
   GÓRNY PASEK INFORMACYJNY
   ===================== */
/* selektor dostosowany do divu z klasami Tailwind: bg-gray-100 text-gray-600 text-sm py-1 */
div.bg-gray-100.text-gray-600.text-sm.py-1 {
  background-color: #ffffff; /* override, by pierwszy wiersz był biały */
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
  font-size: 0.875rem; /* 14px */
  color: #6b7280; /* gray-500 */
}
div.bg-gray-100.text-gray-600.text-sm.py-1 .flex {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4px */
}
div.bg-gray-100.text-gray-600.text-sm.py-1 svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
div.bg-gray-100.text-gray-600.text-sm.py-1 a svg {
  color: #6b7280; /* gray-500 */
}
div.bg-gray-100.text-gray-600.text-sm.py-1 a:hover svg {
  color: var(--primary-color);
}

/* =====================
   NAGŁÓWEK I MENU
   ===================== */
/* header sam w sobie już ma Tailwindowe klasy sticky/top/z-index , tylko uzupełniamy warstwy */
header {
  background-color: var(--bg-header);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* lekki cień */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* kontener wewnątrz header jest .container.mx-auto.flex itd. Uzupełniamy tylko padding */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem; /* 16px */
}

/* Logo */
header .container img {
  height: 48px;
  object-fit: contain;
}

/* MENU DESKTOP 
   – w HTML jest: <nav class="hidden lg:flex space-x-8 font-medium"> */
header nav.hidden.lg\\:flex {
  display: flex;
  gap: 2rem; /* 32px */
  font-weight: 600;
}
header nav.hidden.lg\\:flex a {
  position: relative;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 1rem; /* 16px */
}
header nav.hidden.lg\\:flex a:hover {
  color: var(--primary-color);
}
header nav.hidden.lg\\:flex a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
header nav.hidden.lg\\:flex a:hover::after {
  width: 60%;
}

/* IKONKA KOSZYKA – w HTML jest <a href="koszyk.html" class="relative hover:text-blue-600"> */
header a.relative.hover\\:text-blue-600 {
  position: relative;
  color: #6b7280; /* gray-500 */
}
header a.relative.hover\\:text-blue-600 svg {
  width: 24px;
  height: 24px;
}
header a.relative.hover\\:text-blue-600:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}
header a.relative.hover\\:text-blue-600 span#cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444; /* red-500 */
  color: #ffffff;
  font-size: 0.75rem; /* 12px */
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRZYCISK MOBILE MENU – w HTML: <button id="mobile-menu-btn" class="lg:hidden hover:text-blue-600"> */
#mobile-menu-btn {
  display: none; /* pokażemy tylko poniżej 768px */
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280; /* gray-500 */
}
#mobile-menu-btn svg {
  width: 24px;
  height: 24px;
}
#mobile-menu-btn:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

/* MENU MOBILNE (NA TELEFONIE) – w HTML: <nav id="mobile-menu" class="bg-white lg:hidden hidden"> */
#mobile-menu {
  display: none;
  background: var(--bg-header);
}
#mobile-menu a {
  display: block;
  padding: 0.75rem 1rem; /* 12px 16px */
  color: var(--text-dark);
  text-decoration: none;
}
#mobile-menu a:hover {
  background: #f3f4f6; /* gray-100 */
  color: var(--primary-color);
}

/* MOBILE BREAKPOINT */
@media (max-width: 768px) {
  /* chowamy desktopowe nav */
  nav.hidden.lg\\:flex {
    display: none;
  }
  /* pokazujemy button */
  #mobile-menu-btn {
    display: block;
  }
  /* klasę .active dodaje JS, aby menu się rozwinęło */
  #mobile-menu.active {
    display: block;
  }
}

/* =====================
   HERO SECTION
   ===================== */
/* w HTML jest <section class="relative bg-cover bg-no-repeat bg-center h-screen" …> */
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen {
  position: relative;
  background-image: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  height: 60vh;

  background-image-podstrony: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  height: 30vh;
}
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
/* treść w sekcji hero ma w HTML klasę: <div class="container mx-auto relative z-10 flex flex-col items-center justify-center h-full …"> */
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen .container.relative.z-10 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem; /* 16px */
}
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen h3 {
  font-size: 1rem; /* 14px */
  color: #fbbf24; /* amber-400 */
  margin-bottom: 0.5rem; /* 8px */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen h1 {
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 1rem; /* 16px */
  line-height: 1.2;
}
@media (min-width: 768px) {
  section.relative.bg-cover.bg-no-repeat.bg-center.h-screen h1 {
    font-size: 4rem; /* 64px */
  }
}
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen p {
  font-size: 1rem; /* 16px */
  color: #e5e7eb; /* gray-200 */
  margin-bottom: 1.5rem; /* 24px */
}
section.relative.bg-cover.bg-no-repeat.bg-center.h-screen .border.border-white.text-white.py-3.px-6.rounded:hover {
  background-color: var(--text-light);
  color: var(--text-dark);
}

/* =====================
   USŁUGI (SERVICES) SECTION
   ===================== */
/* w HTML: <section class="container mx-auto py-16 px-4">, nagłówek <h2 class="text-3xl font-semibold text-center mb-12"> */
section.container.mx-auto.py-16.px-4 h2.text-3xl.font-semibold.text-center.mb-12 {
  /* lack of background: użyjemy domyślnie var(--bg-light) */
  color: var(--text-dark);
}
/* Karty usług mają klasę reveal i są w <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> */
section.container.mx-auto.py-16.px-4 .grid.grid-cols-1.md\\:grid-cols-3.gap-8 > div {
  background-color: #ffffff;
  border-radius: 0.5rem; /* 8px */
  padding: 2rem; /* 32px */
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
section.container.mx-auto.py-16.px-4 .grid.grid-cols-1.md\\:grid-cols-3.gap-8 > div:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
section.container.mx-auto.py-16.px-4 .grid.grid-cols-1.md\\:grid-cols-3.gap-8 svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem; /* 16px */
  color: var(--secondary-color);
}
section.container.mx-auto.py-16.px-4 .grid.grid-cols-1.md\\:grid-cols-3.gap-8 h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  margin-bottom: 0.75rem; /* 12px */
  color: var(--text-dark);
}
section.container.mx-auto.py-16.px-4 .grid.grid-cols-1.md\\:grid-cols-3.gap-8 p {
  font-size: 0.9375rem; /* 15px */
  color: #6b7280; /* gray-500 */
}

/* =====================
   O NAS (ABOUT) PREVIEW
   ===================== */
/* <section class="bg-gray-50 py-16 px-4">, wewnątrz: <h2 class="text-3xl font-semibold text-center mb-6 reveal"> */
section.bg-gray-50.py-16.px-4 h2.text-3xl.font-semibold.text-center.mb-6.reveal {
  color: var(--text-dark);
}
/* akapity w <div class="max-w-3xl mx-auto text-gray-700 reveal delay-100"> */
section.bg-gray-50.py-16.px-4 .max-w-3xl.mx-auto.text-gray-700.reveal.delay-100 p {
  color: #374151; /* gray-700 */
  margin-bottom: 1rem;
}
section.bg-gray-50.py-16.px-4 .btn-animate {
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
section.bg-gray-50.py-16.px-4 .btn-animate:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =====================
   CENNIK PREVIEW
   ===================== */
/* <section class="container mx-auto py-16 px-4">, tabela wewnątrz div.reveal.delay-100 */
section.container.mx-auto.py-16.px-4 table.min-w-full.bg-white.shadow-md.rounded-lg.overflow-hidden {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem; /* 15px */
}
section.container.mx-auto.py-16.px-4 table.min-w-full.bg-white.shadow-md.rounded-lg.overflow-hidden th,
section.container.mx-auto.py-16.px-4 table.min-w-full.bg-white.shadow-md.rounded-lg.overflow-hidden td {
  padding: 0.75rem; /* 12px */
  text-align: left;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
section.container.mx-auto.py-16.px-4 table.min-w-full.bg-white.shadow-md.rounded-lg.overflow-hidden thead {
  background-color: #f3f4f6; /* gray-100 */
}
section.container.mx-auto.py-16.px-4 table.min-w-full.bg-white.shadow-md.rounded-lg.overflow-hidden tbody tr:nth-child(even) {
  background-color: #f9fafb; /* gray-50 */
}
section.container.mx-auto.py-16.px-4 a.btn-animate {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
section.container.mx-auto.py-16.px-4 a.btn-animate:hover {
  background-color: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =====================
   KONTAKT PREVIEW
   ===================== */
/* sekcja: <section class="bg-gray-50 py-16 px-4">, wewnątrz grid */
section.bg-gray-50.py-16.px-4 form#contact-form-preview {
  background-color: #ffffff;
  border-radius: 0.5rem; /* 8px */
  padding: 2rem; /* 32px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
section.bg-gray-50.py-16.px-4 form#contact-form-preview label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem; /* 8px */
}
section.bg-gray-50.py-16.px-4 form#contact-form-preview input,
section.bg-gray-50.py-16.px-4 form#contact-form-preview textarea {
  background-color: #ffffff;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* 6px */
  width: 100%;
  padding: 0.5rem 0.75rem; /* 8px 12px */
  font-size: 1rem; /* 16px */
  outline: none;
}
section.bg-gray-50.py-16.px-4 form#contact-form-preview input:focus,
section.bg-gray-50.py-16.px-4 form#contact-form-preview textarea:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
section.bg-gray-50.py-16.px-4 form#contact-form-preview button[type="submit"] {
  background-color: var(--primary-color);
  color: #ffffff;
  font-weight: 600;
  padding: 0.5rem 1rem; /* 8px 16px */
  border: none;
  border-radius: 0.375rem; /* 6px */
}
section.bg-gray-50.py-16.px-4 form#contact-form-preview button[type="submit"]:hover {
  background-color: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* dane kontaktowe obok formularza */
section.bg-gray-50.py-16.px-4 div.bg-white.p-6.rounded-lg.shadow-md {
  background-color: #ffffff;
  border-radius: 0.5rem; /* 8px */
  padding: 2rem; /* 32px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
section.bg-gray-50.py-16.px-4 div.bg-white.p-6.rounded-lg.shadow-md h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  margin-bottom: 1rem; /* 16px */
  color: var(--text-dark);
}
section.bg-gray-50.py-16.px-4 div.bg-white.p-6.rounded-lg.shadow-md p {
  margin-bottom: 0.5rem; /* 8px */
  color: #374151; /* gray-700 */
}

/* =====================
   STOPKA (FOOTER)
   ===================== */
/* <footer class="bg-gray-100 py-8"> */
footer.bg-gray-100.py-8 {
  background-color: var(--bg-footer);
  padding: 2rem 1rem; /* 32px 16px */
  text-align: center;
  font-size: 0.875rem; /* 14px */
  color: #6b7280; /* gray-500 */
}
footer.bg-gray-100.py-8 h3,
footer.bg-gray-100.py-8 h4 {
  color: var(--text-dark);
  margin-bottom: 0.5rem; /* 8px */
}
footer.bg-gray-100.py-8 p {
  margin-bottom: 0.25rem; /* 4px */
}

/* =====================
   SCROLL REVEAL ANIMACJE
   ===================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  /* Gdy klasa .active zostanie dodana, element "odfrunie" i się pojawi */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Gdy element jest widoczny w oknie, dodajemy mu .active */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Jeśli chcesz wstawić delaya dla niektórych kart,
   użyj dodatkowych klas: */
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }
.reveal.delay-400 { transition-delay: 0.4s; }
.reveal.delay-500 { transition-delay: 0.5s; }

/* ============================
   Sekcja: animacja podkreślenia
   ============================ */
.animacja {
  position: relative;
  transition: color 0.2s ease-in-out;
}

.animacja::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;                /* 4px poniżej tekstu */
  left: 50%;                       /* punkt startowy: środek rodzica */
  transform: translateX(-50%);     /* przesunięcie, aby środek pseudo‐elementu był w środku tekstu */
  height: 2px;                     /* grubość linii */
  background-color: #2563eb;       /* odpowiada Tailwindowi blue-600 */
  width: 0;                        /* na początku niewidoczna (0%) */
  transition: width 0.3s ease-out;
}

.animacja:hover {
  color: #2563eb;                  /* zmiana koloru tekstu na blue-600 przy hover */
}

.animacja:hover::after {
  width: 75%;                      /* rozszerza się do 75% szerokości rodzica */
}

.details-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.details-list li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #374151;
}
.details-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #2563eb;
  font-size: 1.25rem;
  opacity: 0.8;
}

.price-btn {
  margin-top: 18px;
  background: linear-gradient(90deg, #ff2c3c 60%, #d70017 100%);
  color: #fff;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  font-size: 1.13em;
  padding: 16px 38px;
  cursor: pointer;
  box-shadow: 0 2px 14px #ff738c55;
  transition: background 0.19s, transform 0.14s;
  letter-spacing: 1px;
}
.price-btn:hover {
  background: linear-gradient(90deg, #d70017 60%, #ff2c3c 100%);
  transform: scale(1.05);
}