body {

  background: linear-gradient(to bottom, #fbfaf7 0%, var(--bg) 100%);

}



/* ===== HEADER ===== */



.topbar {

  background: rgba(255, 255, 255, 0.78);

  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--line);

}



.brand img {

  width: 84px;

  object-fit: contain;

}



.top-links {

  color: var(--muted);

  font-size: 0.92rem;

}



.top-links span,

.top-links a {

  cursor: pointer;

  transition: opacity var(--transition-fast);

}



.top-links span:hover,

.top-links a:hover {

  opacity: 0.65;

}



.main-nav {

  padding-top: 0.5rem;

  padding-bottom: 0.9rem;

}



.nav-item-custom {

  position: relative;

  margin-right: 2rem;

  padding-bottom: 6px;

  background-color: #1d3557;

  cursor: pointer;

  transition: opacity var(--transition-fast);

}



.nav-bar-custom {

  background-color: #1d3557;

}



.nav-item-custom:hover {

  opacity: 0.65;

}



.nav-item-custom.active {

  font-weight: 700;

}



.nav-item-custom.active::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 100%;

  height: 2px;

  border-radius: 2px;

}



/* ===== HERO ===== */



.hero-card {

  position: relative;

  overflow: hidden;

  padding: 34px 28px 22px;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));

  border: 1px solid var(--line);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

}



.hero-card::after {

  content: "";

  position: absolute;

  top: -60px;

  right: -60px;

  width: 220px;

  height: 220px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 70%);

  pointer-events: none;

}



.eyebrow {

  display: inline-block;

  margin-bottom: 18px;

  padding: 8px 12px;

  font-size: 0.82rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted);

  background: var(--bg-soft);

  border: 1px solid var(--line);

  border-radius: 999px;

}



.hero h1 {

  margin: 0 0 14px;

  font-size: clamp(2rem, 4vw, 4rem);

  line-height: 1.02;

  letter-spacing: -0.03em;

}



.lead-custom {

  display: flex;

  flex-direction: column;

  color: #4d4943;

}



.hero-side {

  padding: 20px;

  border: 1px solid var(--line);

  border-radius: 22px;

}



.hero-side-title {

  margin: 0 0 12px;

  font-size: 1rem;

  font-weight: 700;

}



.hero-side p {

  margin: 0;

  font-size: 0.96rem;

  line-height: 1.6;

  color: var(--muted);

}



/* ===== PANELS / CARDS ===== */



.content-panel {

  display: none;

  animation: fadeIn 0.25s ease;

}



.content-panel.active {

  display: block;

}





.card-custom {

  width: flex;

  height: 100%;

  padding: 24px;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



.card-custom h2 {

  margin: 0 0 12px;

  font-size: 1.55rem;

  letter-spacing: -0.02em;

}



.card-custom p {

  margin: 0;

  line-height: 1.7;

  color: #4d4943;

}



.status-box {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 16px;

}



.status-pill {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  width: fit-content;

  padding: 10px 14px;

  font-size: 0.92rem;

  color: var(--muted);

  background: var(--bg-soft);

  border: 1px solid var(--line);

  border-radius: 999px;

}



.status-pill::before {

  content: "";

  display: inline-block;

  width: 9px;

  height: 9px;

  background: var(--success);

  border-radius: 50%;

}



.notes {

  margin-top: 16px;

  padding-top: 16px;

  font-size: 0.95rem;

  line-height: 1.7;

  color: var(--muted);

  border-top: 1px solid var(--line-soft);

}



.no-border {

  margin-top: 0;

  padding-top: 0;

  border-top: 0;

}



/* ===== FLAGS ===== */



.flags {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 8px;

}



.flag-card {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 170px;

  padding: 12px 14px;

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 16px;

  transition: transform var(--transition-fast), box-shadow var(--transition-fast);

}



.flag-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

}



.flag-card img {

  width: 38px;

  height: 28px;

  object-fit: cover;

  border: 1px solid #e9e4db;

  border-radius: 6px;

}



.flag-label {

  display: flex;

  flex-direction: column;

  line-height: 1.2;

}



.flag-label strong {

  font-size: 0.96rem;

}



.flag-label span {

  margin-top: 2px;

  font-size: 0.86rem;

  color: var(--muted);

}



/* ===== BOOKING SIDEBAR ===== */



.booking-chip {

  display: inline-flex;

  align-items: center;

  gap: 10px;

}



.booking-chip img {

  width: 16px;

  height: 11px;

  object-fit: cover;

  border: 1px solid rgba(0, 0, 0, 0.12);

  border-radius: 2px;

  opacity: 0.9;

}



.booking-chip.active {

  background: var(--accent);

  border-color: var(--accent);

  color: #fff;

}



.booking-chip.en.active {

  background: var(--lang-en);

  border-color: var(--lang-en);

}



.booking-chip.de.active {

  background: var(--lang-de);

  border-color: var(--lang-de);

}



.booking-summary {

  color: #4d4943;

  line-height: 1.6;

  border-left: 4px solid var(--accent);

}



.interest-honeypot {

  /* Był: position:absolute; left:-9999px. Odległy box liczył się do scrollable
     overflow modal-body (modal-dialog-scrollable ustawia overflow-y:auto, co per
     spec CSS wymusza też overflow-x:auto) → boczny scroll w modalach. clip
     zamiast offsetu daje ten sam efekt (niewidoczne, bez wpływu na layout). */

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

  opacity: 0;

  pointer-events: none;

}

.booking-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 20px;

}



.booking-subtitle {

  color: var(--muted);

  line-height: 1.6;

}



.booking-filter-trigger svg {

  flex: 0 0 auto;

}



.booking-filters-panel {

  --bs-offcanvas-width: min(420px, 92vw);

}



.booking-filters-panel .offcanvas-header {

  padding: 20px 24px 16px;

  border-bottom: 1px solid var(--line-soft);

}



.booking-filters-panel .offcanvas-title {

  font-size: 1.1rem;

  font-weight: 700;

}



.booking-filters-panel .offcanvas-body {

  padding: 22px 24px 28px;

}



.booking-header .week-nav {

  display: none;

}



/* ===== WEEK NAV ===== */



.week-nav {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}



.week-nav-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 999px;

  color: #3a342e;

  font-size: 1.5rem;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  transition: background var(--transition-fast);

}



.week-nav-btn:hover {

  background: #f7f3ed;

}



.calendar-badge {

  padding: 7px 12px;

  white-space: nowrap;

  font-size: 0.86rem;

  color: var(--muted);

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 999px;

}



/* ===== WEEK BOARD ===== */



.week-calendar-board {

  display: grid;

  grid-template-columns: repeat(6, minmax(180px, 1fr));

  gap: 16px;

  overflow-x: auto;

  padding-bottom: 6px;

}



.week-column {

  min-width: 180px;

  overflow: hidden;

  background: linear-gradient(180deg, #fff, #fcfaf7);

  border: 1px solid var(--line);

  border-radius: 18px;

}



.week-column-header {

  padding: 16px 14px;

  background: #fbf8f3;

  border-bottom: 1px solid var(--line-soft);

}



.week-column-day {

  margin: 0;

  font-size: 1rem;

  font-weight: 700;

}



.week-column-date {

  margin: 4px 0 0;

  font-size: 0.88rem;

  color: var(--muted);

}



.week-column-body {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 12px;

}



.week-column-empty {

  padding: 18px 10px;

  text-align: center;

  font-size: 0.9rem;

  color: var(--muted);

  background: #fcfaf7;

  border: 1px dashed var(--line);

  border-radius: 14px;

}



/* ===== WEEK SLOT CARD ===== */



.week-card {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 12px;

  background: #fff;

  border: 1px solid #ebe4d9;

  border-radius: 16px;

  box-shadow: var(--shadow-soft);

}



.week-card-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

}



.week-card-time {

  font-size: 0.98rem;

  font-weight: 700;

  color: #1f1f1f;

}



.week-card-price {

  white-space: nowrap;

  font-size: 0.9rem;

  font-weight: 700;

}



.week-card-teacher {

  font-weight: 700;

  line-height: 1.3;

}



.week-card-meta {

  font-size: 0.88rem;

  line-height: 1.5;

  color: var(--muted);

}



.week-card-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.week-card-tag {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.week-card-tag img {

  width: 16px;

  height: 11px;

  object-fit: cover;

  border: 1px solid rgba(0, 0, 0, 0.1);

  border-radius: 2px;

}



.week-card-btn {

  width: 100%;

  padding: 9px 14px;

  background: var(--accent);

  border: 1px solid var(--accent);

  border-radius: 999px;

  color: #fff;

  font-size: 0.88rem;

  cursor: pointer;

  transition: opacity var(--transition-fast);

}



.week-card-btn:hover {

  opacity: 0.88;

}



.week-card.en {

  background: var(--lang-en-soft);

  border-left: 4px solid var(--lang-en);

}



.week-card.de {

  background: var(--lang-de-soft);

  border-left: 4px solid var(--lang-de);

}



.week-card-tag.en {

  color: var(--lang-en);

  background: var(--lang-en-soft);

  border-color: var(--lang-en);

}



.week-card-tag.de {

  color: var(--lang-de);

  background: var(--lang-de-soft);

  border-color: var(--lang-de);

}



/* ===== NOTICE ===== */



.booking-notice {

  margin-bottom: 18px;

  padding: 16px 18px;

  background: #f8f4ee;

  border: 1px solid #d7cfc2;

  border-radius: 16px;

  color: #3d3934;

  line-height: 1.7;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);

}





/* ===== FOOTER ===== */



footer {

  margin-top: 3rem;

  background: rgba(255, 255, 255, 0.75);

  border-top: 1px solid var(--line);

}



.footer-brand {

  font-size: 0.95rem;

  color: var(--muted);

}



.footer-contact {

  font-size: 0.98rem;

}



.footer-contact a:hover {

  text-decoration: underline;

}



/* ===== ANIMATIONS ===== */



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(4px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ===== RESPONSIVE ===== */



@media (max-width: 1200px) {

  .week-calendar-board {

    grid-template-columns: repeat(3, minmax(180px, 1fr));

  }

}



@media (max-width: 768px) {



  .week-calendar-board {

    grid-template-columns: repeat(2, minmax(180px, 1fr));

  }



  .booking-header {

    align-items: flex-start;

  }



  .brand img {

    width: 144px;

  }

}





@media (max-width: 576px) {



  .brand img {

    width: 136px;

  }



  .nav-item-custom {

    display: block;

    margin-right: 1.5rem;

  }



  .top-links {

    font-size: 0.88rem;

  }



  .hero-card {

    padding: 24px 18px 18px;

  }



  .card-custom {

    padding: 18px;

  }

.week-calendar-board {

    grid-template-columns: 1fr;

  }



  .booking-filters-panel {

    --bs-offcanvas-width: min(100vw, 420px);

  }



}