/**
 * tailwind promo banner 
 */

/* ---------- Podstawowe kolory i resety ---------- */
.bg-red-500 { background-color: #ef4444; }
.text-white { color: #ffffff; }
.font-bold { font-weight: 700; }
.leading-\[1\.2\], .leading-\[1\.2\] { line-height: 1.2; }

/* ---------- Pozycjonowanie i rozmiary ---------- */
.fixed { position: fixed; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.w-full { width: 100%; }

/* escape for z-[31] */
.z-\[31\] { z-index: 31; }

/* padding y */
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* ---------- Typografia (escape for bracket classes) ---------- */
/* text-[1.5rem] */
.text-\[1\.5rem\] { font-size: 1.5rem; line-height: 1.2; }
/* text-[0.875rem] */
.text-\[0\.875rem\] { font-size: .875rem; line-height: 1.2; }


/* lg:max-w-[78.3125rem] -> 78.3125rem * 16 = 1253px */
@media (min-width: 1024px) {
  .lg\:max-w-\[78\.3125rem\] { max-width: 1253px; }
}

/* ---------- Flex / alignment / direction ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }

/* escape for lg:flex-row and lg:justify-between and lg:items-end and lg:text-left */
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:text-left { text-align: left; }
}

/* md flex-row and md:items-end */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:text-\[2rem\] { font-size: 2rem; line-height: 1.1; }
  .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* max-lg helpers (<=1023px) */
@media (max-width: 1023px) {
  .max-lg\:text-center { text-align: center; }

  /* klasa generowana Tailwind: max-lg:[&_p]:hidden
     selektor ukrywa <p> wewnątrz elementu przy max-lg */
  .max-lg\:\[\&\_p\]\:hidden p { display: none; }
}


/* leading */
.leading-\[1\.2\] { line-height: 1.2; }

/* md:text-[2rem] handled above */

/* ---------- Button (prosty styl, dopasuj do projektu) ---------- */
.btn {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: .375rem;
  text-decoration: none;
  font-weight: 600;
}
.btn-white-alt {
  background: #ffffff;
  color: #ef4444;
  border: 1px solid rgba(0,0,0,.05);
}

/* margin top */
.mt-4 { margin-top: 1rem; }

/* ---------- Countdown wrapper specifics ---------- */
.relative { position: relative; }
.justify-center { justify-content: center; }

/* mobile default for countdown block: flex-col + center */
#countdown-promotion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}

/* landing variant: flex-col mt-2 */
.mt-2 { margin-top: .5rem; }

/* md variant for non-landing: switch to row at md */
@media (min-width: 768px) {
  .md\:flex-row#countdown-promotion,
  .md\:flex-row #countdown-promotion {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* lg landing items end */
@media (min-width: 1024px) {
  .lg\:items-end#countdown-promotion,
  .lg\:items-end #countdown-promotion {
    align-items: flex-end;
  }
  .lg\:mt-0 { margin-top: 0; }
}

/* countdown numbers */
.js-days, .js-hours, .js-minutes, .js-seconds {
  font-size: 1.5rem; /* text-[1.5rem] */
  font-weight: 700;
  display: inline-block;
  min-width: 2.2ch;
  text-align: center;
}

/* small label container */
.countdown-labels { font-size: .875rem; line-height: 1.2; }

/* ---------- Loader (spinner) ---------- */
.js-section-countdown-promotion-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease;
  background: rgba(239,68,68,1); /* same red background */
  z-index: 10;
}

/* spinner sizes (h-5 w-5, -ml-1 mr-3) */
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.-ml-1 { margin-left: -0.25rem; }
.mr-3 { margin-right: .75rem; }

/* animate spin */
@keyframes tw-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: tw-spin 1s linear infinite; }

/* ---------- Utility: text-center ---------- */
.text-center { text-align: center; }

/* ---------- Helper: container layout adjustments for landing ---------- */
@media (min-width: 1024px) {
  /* apply lg:max-w and left/right auto */
  .container.lg\:max-w-\[78\.3125rem\] { margin-left: auto; margin-right: auto; }
}

/* ---------- Specific combos used in markup ---------- */
/* When aside has landing classes (fixed bottom etc.) its container should be row on large screens */
.js-section-countdown-promotion.fixed .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .js-section-countdown-promotion.fixed .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* small visual tweaks so text is readable on red bg */
.js-section-countdown-promotion h2 { color: #fff; margin: 0; }
.js-section-countdown-promotion strong { display: inline-block; margin-right: .5rem; color: #fff; }

/* fallback: ensure promo removed overlay not visible when loader hidden */
.js-section-countdown-promotion-loader[hidden] { display: none !important; opacity: 0; pointer-events: none; }

.opacity-0 {
    opacity: 0;
}

.js-section-countdown-promotion h2 {
    font-family: "Playfair Display", Sans-serif;
}