/*
 * compat.css — Tymczasowa warstwa kompatybilności UniCore → Tailwind
 * Zawiera definicje klas z szablonu Lexend używanych w nie zmigrowanych komponentach.
 * Ten plik powinien stopniowo się kurczyć w miarę migracji komponentów na klasy Tailwind.
 * USUNĄĆ po zakończeniu migracji (Krok 10).
 */

/* ── Fonts: Mabry Pro (body) + PolySans (headings) — matching theme-six ── */
@font-face {
  font-family: "PolySans";
  src: url('/css/fonts/PolySans-Normal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url('/css/fonts/PolySans-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ── Font: Mabry Pro (primary font matching Lexend template theme-six) ── */
@font-face {
  font-family: "Mabry Pro";
  src: url('/css/fonts/MabryPro-Regular.woff2') format('woff2'),
       url('/css/fonts/MabryPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mabry Pro";
  src: url('/css/fonts/MabryPro-Bold.woff2') format('woff2'),
       url('/css/fonts/MabryPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Layout ──────────────────────────────────────────────────── */
.panel { display: flow-root; position: relative; box-sizing: border-box }
.panel > :last-child { margin-bottom: 0 }
.section { display: flow-root; position: relative; box-sizing: border-box }
.section-outer, .section-inner { display: block }

.vstack { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch }
.hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch }
.cstack { display: inline-flex; justify-content: center; align-items: center }

/* ── Grid: row + child-cols ──────────────────────────────────── */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.row.col-match { flex-wrap: wrap }
.row.col-match > * { display: flex; flex-direction: column }
.row.col-match > * > * { flex: 1 }

.child-cols > * { flex: 1 }
.child-cols-1 > * { flex: 0 0 auto; width: 8.33333333% }
.child-cols-2 > * { flex: 0 0 auto; width: 16.66666667% }
.child-cols-3 > * { flex: 0 0 auto; width: 25% }
.child-cols-4 > * { flex: 0 0 auto; width: 33.33333333% }
.child-cols-5 > * { flex: 0 0 auto; width: 20% }
.child-cols-6 > * { flex: 0 0 auto; width: 50% }
.child-cols-12 > * { flex: 0 0 auto; width: 100% }

/* Responsive child-cols */
@media (min-width: 768px) {
  .md\:child-cols > * { flex: 1 }
  .md\:child-cols-3 > * { flex: 0 0 auto; width: 25% }
  .md\:child-cols-4 > * { flex: 0 0 auto; width: 33.33333333% }
  .md\:child-cols-6 > * { flex: 0 0 auto; width: 50% }
}
@media (min-width: 992px) {
  .lg\:child-cols > * { flex: 1 }
  .lg\:child-cols-3 > * { flex: 0 0 auto; width: 25% }
  .lg\:child-cols-4 > * { flex: 0 0 auto; width: 33.33333333% }
  .lg\:child-cols-6 > * { flex: 0 0 auto; width: 50% }
}
@media (min-width: 1200px) {
  .xl\:child-cols-3 > * { flex: 0 0 auto; width: 25% }
}

/* Column widths */
.col-4 { flex: 0 0 auto; width: 33.33333333% }
.col-6 { flex: 0 0 auto; width: 50% }
.col-8 { flex: 0 0 auto; width: 66.66666667% }
.col-12 { flex: 0 0 auto; width: 100% }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 auto; width: 33.33333333% }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667% }
  .col-md-6 { flex: 0 0 auto; width: 50% }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333% }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667% }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333% }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667% }
  .col-lg-6 { flex: 0 0 auto; width: 50% }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333% }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667% }
}

/* ── Container ───────────────────────────────────────────────── */
.container { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto }
@media (min-width: 576px) { .container { max-width: 540px } }
@media (min-width: 768px) { .container { max-width: 720px } }
@media (min-width: 992px) { .container { max-width: 960px } }
@media (min-width: 1200px) { .container { max-width: 1200px } }
@media (min-width: 1400px) { .container { max-width: 1320px } }
.max-w-xl { max-width: 1280px !important }
.max-w-lg { max-width: 1040px !important }
.container.container-expand { max-width: 100% }
.max-w-1440px { max-width: 1440px }

/* ── Gap ─────────────────────────────────────────────────────── */
/* UWAGA: gap w UniCore ma inną skalę niż Tailwind!
   UniCore: gap-1=0.5rem, gap-2=1rem, gap-3=1.5rem
   Tailwind: gap-1=0.25rem, gap-2=0.5rem, gap-3=0.75rem
   Nie używamy !important żeby nie nadpisywać klas Tailwind w tw_ plikach.
   Elementy UniCore nie mają konkurujących klas Tailwind więc te wartości zadziałają. */
.gap-0 { gap: 0 }
.gap-narrow { gap: 0.25rem }
.gap-1 { gap: 0.5rem }
.gap-2 { gap: 1rem }
.gap-3 { gap: 1.5rem }
.gap-4 { gap: 2rem }
.gap-5 { gap: 2.5rem }
.gap-6 { gap: 3rem }
.gap-7 { gap: 3.5rem }
.gap-8 { gap: 4rem }
.gap-9 { gap: 4.5rem }

/* Responsive gaps (g-* for row gutters) */
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0 }
.g-1 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem }
.g-2 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem }
.g-3 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem }
.g-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem }
.g-5 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem }
.gy-2 { --bs-gutter-y: 1rem }
.gy-4 { --bs-gutter-y: 2rem }
.gx-5 { --bs-gutter-x: 2.5rem }
@media (min-width: 768px) { .md\:g-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem } }
@media (min-width: 992px) {
  .lg\:g-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem }
  .lg\:g-5 { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem }
  .lg\:gy-0 { --bs-gutter-y: 0 }
}

/* ── Typography: headings ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: inherit;
}
/* Base sizes for semantic heading elements (overridden by .h* utility classes below) */
h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.06rem }
h2 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.05rem }
h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.03rem }
h4 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02rem }
h5 { font-size: 1.125rem; line-height: 1.4 }
h6 { font-size: 1rem; line-height: 1.5 }
/* Utility classes — override semantic sizes with !important */
.h1 { font-size: 3rem !important; line-height: 1.1 !important; letter-spacing: -0.09rem !important }
.h2 { font-size: 2.5rem !important; line-height: 1.1 !important; letter-spacing: -0.06rem !important }
.h3 { font-size: 2rem !important; line-height: 1.1 !important; letter-spacing: -0.0525rem !important }
.h4 { font-size: 1.5rem !important; line-height: 1.2 !important; letter-spacing: -0.045rem !important }
.h5 { font-size: 1.25rem !important; line-height: 1.2 !important; letter-spacing: -0.03rem !important }
.h6 { font-size: 1.125rem !important; line-height: 1.2 !important; letter-spacing: -0.03rem !important }

/* Responsive headings */
@media (min-width: 576px) {
  .sm\:h1 { font-size: 3rem !important; line-height: 1.1 !important }
  .sm\:h2 { font-size: 2.5rem !important; line-height: 1.1 !important }
  .sm\:h3 { font-size: 2rem !important; line-height: 1.1 !important }
}
@media (min-width: 992px) {
  .lg\:h1 { font-size: 3rem !important; line-height: 1.1 !important }
  .lg\:h2 { font-size: 2.5rem !important; line-height: 1.1 !important }
  .lg\:h3 { font-size: 2rem !important; line-height: 1.1 !important }
  .lg\:h4 { font-size: 1.5rem !important; line-height: 1.2 !important }
  .lg\:h5 { font-size: 1.25rem !important; line-height: 1.2 !important }
  .lg\:h6 { font-size: 1.125rem !important; line-height: 1.2 !important }
}
@media (min-width: 1200px) {
  .xl\:h1 { font-size: 3rem !important; line-height: 1.1 !important }
  .xl\:h2 { font-size: 2.5rem !important; line-height: 1.1 !important }
}

/* Display sizes */
.display-1 { font-size: 8rem !important; line-height: 1 !important }
.display-2 { font-size: 6rem !important; line-height: 1 !important }
.display-3 { font-size: 5rem !important; line-height: 1 !important }
.display-4 { font-size: 4.5rem !important; line-height: 1 !important }
.display-5 { font-size: 4rem !important; line-height: 1 !important }
.display-6 { font-size: 3.25rem !important; line-height: 1 !important }
@media (min-width: 992px) {
  .lg\:display-5 { font-size: 4rem !important; line-height: 1 !important }
  .lg\:display-6 { font-size: 3.25rem !important; line-height: 1 !important }
}
@media (min-width: 1200px) {
  .xl\:display-5 { font-size: 4rem !important; line-height: 1 !important }
  .xl\:display-6 { font-size: 3.25rem !important; line-height: 1 !important }
}

/* ── Typography: font sizes ──────────────────────────────────── */
.fs-4 { font-size: 1.25rem !important }
.fs-5 { font-size: 1.125rem !important }
.fs-6 { font-size: 1rem !important }
.fs-7 { font-size: 0.875rem !important }
.fs-8 { font-size: 0.75rem !important }
@media (min-width: 992px) {
  .lg\:fs-4 { font-size: 1.25rem !important }
  .lg\:fs-5 { font-size: 1.125rem !important }
  .lg\:fs-6 { font-size: 1rem !important }
}
@media (min-width: 1200px) {
  .xl\:fs-4 { font-size: 1.25rem !important }
  .xl\:fs-5 { font-size: 1.125rem !important }
}

/* ── Typography: font weight ─────────────────────────────────── */
.fw-light { font-weight: 300 !important }
.fw-normal { font-weight: 400 !important }
.fw-medium { font-weight: 500 !important }
.fw-semibold { font-weight: 600 !important }
.fw-bold { font-weight: 700 !important }
.fw-bolder { font-weight: 800 !important }

/* ── Typography: text utilities ──────────────────────────────── */
.text-none { text-decoration: none !important }
.text-muted { color: #6c757d !important }
.text-dark { color: #212529 !important }
.text-inherit { color: currentColor !important }
.text-unset { text-transform: none !important }
.ls-0 { letter-spacing: 0 !important }
.text-uppercase { text-transform: uppercase !important }

/* ── Navigation lists ────────────────────────────────────────── */
.nav-y {
  display: flex; flex-wrap: wrap; flex-direction: column;
  gap: 0.25rem; list-style: none; margin: 0; padding: 0;
}
.nav-y > *, .nav-y > * > * { display: flex; align-items: center; gap: 0.25rem }
.nav-y a { text-decoration: none; color: inherit; transition: opacity 200ms ease }
.nav-y a:hover { opacity: 1 !important }

.nav-x {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
.nav-x > *, .nav-x > * > * { display: flex; align-items: center; gap: 0.5rem }

/* ── Display utilities ───────────────────────────────────────── */
.d-none { display: none !important }
.d-block { display: block !important }
.d-flex { display: flex !important }
.d-inline-flex { display: inline-flex !important }
.d-inline-block { display: inline-block !important }
@media (min-width: 576px) {
  .sm\:d-none { display: none !important }
  .sm\:d-block { display: block !important }
  .sm\:d-flex { display: flex !important }
}
@media (min-width: 768px) {
  .md\:d-none { display: none !important }
  .md\:d-block { display: block !important }
  .md\:d-flex { display: flex !important }
}
@media (min-width: 992px) {
  .lg\:d-none { display: none !important }
  .lg\:d-block { display: block !important }
  .lg\:d-flex { display: flex !important }
  .lg\:d-inline-flex { display: inline-flex !important }
}
@media (min-width: 1200px) {
  .xl\:d-none { display: none !important }
  .xl\:d-block { display: block !important }
  .xl\:d-flex { display: flex !important }
}

/* ── Flexbox alignment ───────────────────────────────────────── */
.items-start { align-items: flex-start !important }
.items-center { align-items: center !important }
.items-end { align-items: flex-end !important }
.justify-start { justify-content: flex-start !important }
.justify-center { justify-content: center !important }
.justify-between { justify-content: space-between !important }
.justify-end { justify-content: flex-end !important }
@media (min-width: 992px) {
  .lg\:justify-start { justify-content: flex-start !important }
  .lg\:justify-between { justify-content: space-between !important }
  .lg\:justify-end { justify-content: flex-end !important }
  .lg\:items-start { align-items: flex-start !important }
}

/* ── Spacing (padding/margin) ────────────────────────────────── */
/* UWAGA: padding/margin w UniCore ma inną skalę niż Tailwind!
   UniCore: p-3=1rem, p-4=1.5rem, p-5=3rem
   Tailwind: p-3=0.75rem, p-4=1rem, p-5=1.25rem
   Nie używamy !important żeby nie nadpisywać klas Tailwind w tw_ plikach. */
.p-0 { padding: 0 }
.p-1 { padding: 0.25rem }
.p-2 { padding: 0.5rem }
.p-3 { padding: 1rem }
.p-4 { padding: 1.5rem }
.p-5 { padding: 3rem }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
.py-3 { padding-top: 1rem; padding-bottom: 1rem }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem }
.py-5 { padding-top: 3rem; padding-bottom: 3rem }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
.px-3 { padding-left: 1rem; padding-right: 1rem }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem }
.pt-3 { padding-top: 1rem }
.pt-4 { padding-top: 1.5rem }
.pt-6 { padding-top: 3rem }
.pt-8 { padding-top: 4rem }
.pb-2 { padding-bottom: 0.5rem }
.pb-4 { padding-bottom: 1.5rem }
.pb-6 { padding-bottom: 3rem }
.pb-8 { padding-bottom: 4rem }
@media (min-width: 576px) {
  .sm\:py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem }
  .sm\:py-6 { padding-top: 3rem; padding-bottom: 3rem }
  .sm\:pb-6 { padding-bottom: 3rem }
  .sm\:pb-8 { padding-bottom: 4rem }
}
@media (min-width: 992px) {
  .lg\:p-4 { padding: 1.5rem }
  .lg\:p-5 { padding: 3rem }
  .lg\:py-6 { padding-top: 3rem; padding-bottom: 3rem }
  .lg\:py-8 { padding-top: 4rem; padding-bottom: 4rem }
  .lg\:pt-6 { padding-top: 3rem }
  .lg\:pt-8 { padding-top: 4rem }
  .lg\:pb-8 { padding-bottom: 4rem }
}
@media (min-width: 1200px) {
  .xl\:p-4 { padding: 1.5rem }
  .xl\:p-5 { padding: 3rem }
  .xl\:py-6 { padding-top: 3rem; padding-bottom: 3rem }
  .xl\:py-8 { padding-top: 4rem; padding-bottom: 4rem }
  .xl\:py-9 { padding-top: 4.5rem; padding-bottom: 4.5rem }
  .xl\:pb-8 { padding-bottom: 4rem }
}

.m-0 { margin: 0 }
.m-auto { margin: auto }
.mt-1 { margin-top: 0.25rem }
.mt-2 { margin-top: 0.5rem }
.mt-3 { margin-top: 1rem }
.mt-4 { margin-top: 1.5rem }
.mt-auto { margin-top: auto }
.mb-1 { margin-bottom: 0.25rem }
.mb-2 { margin-bottom: 0.5rem }
.mb-3 { margin-bottom: 1rem }
.mb-4 { margin-bottom: 1.5rem }
.mb-narrow { margin-bottom: 0.25rem }
.mt-nnarrow { margin-top: -0.25rem }
.mx-auto { margin-left: auto; margin-right: auto }
.ms-auto { margin-left: auto }
@media (min-width: 576px) {
  .sm\:mt-4 { margin-top: 1.5rem }
}
@media (min-width: 992px) {
  .lg\:mt-4 { margin-top: 1.5rem }
}
.ltr\:pe-8 { padding-right: 4rem !important }
.ltr\:ms-2 { margin-left: 0.5rem !important }
.ltr\:ms-4 { margin-left: 1.5rem !important }
.ltr\:xl\:ms-4 { margin-left: 1.5rem !important }
.ltr\:pe-4 { padding-right: 1.5rem !important }
.rtl\:ps-8 { padding-left: 4rem !important }
.rtl\:me-2 { margin-right: 0.5rem !important }
.rtl\:xl\:me-4 { margin-right: 1.5rem !important }
.rtl\:ps-4 { padding-left: 1.5rem !important }
.pe-4 { padding-right: 1.5rem !important }
.ps-4 { padding-left: 1.5rem !important }
@media (min-width: 768px) {
  .md\:p-4 { padding: 1.5rem !important }
  .md\:p-5 { padding: 3rem !important }
  .ltr\:md\:pe-8 { padding-right: 4rem !important }
}

/* ── Colors ──────────────────────────────────────────────────── */
.text-primary { color: #2e3fb1 !important }
.text-secondary { color: #E4EEFA !important }
.text-white { color: #fff !important }
.bg-primary { background-color: #2e3fb1 !important }
.bg-primary-100 { background-color: #d5d9ef !important }
.bg-secondary { background-color: #E4EEFA !important }
.bg-white { background-color: #fff !important }
.bg-gray-25 { background-color: #fafafa !important }
.bg-gray-600 { background-color: #6b7280 !important }
.bg-transparent { background-color: transparent !important }
.border-top { border-top: 1px solid #dee2e6 !important }
.border-0 { border: 0 !important }
.border { border: 1px solid #dee2e6 !important }

/* Opacity */
.opacity-60 { opacity: 0.6 !important }
.opacity-70 { opacity: 0.7 !important }
.text-opacity-50 { opacity: 0.5 }
.text-opacity-70 { opacity: 0.7 }
.bg-opacity-5 { --tw-bg-opacity: 0.05 }

/* ── Border radius ───────────────────────────────────────────── */
.rounded { border-radius: 0.25rem !important }
.rounded-1 { border-radius: 4px !important }
.rounded-1-5 { border-radius: 12px !important }
.rounded-2 { border-radius: 16px !important }
.rounded-default { border-radius: 8px !important }
.rounded-circle { border-radius: 50% !important }
.rounded-pill { border-radius: 9999px !important }
.rounded-0 { border-radius: 0 !important }

/* ── Shadows ─────────────────────────────────────────────────── */
.shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important }

/* ── Icons ───────────────────────────────────────────────────── */
.icon { display: inline-flex; align-items: center; justify-content: center }
.icon-1 { width: 20px !important; height: 20px !important; font-size: 20px !important }
.icon-2 { width: 24px !important; height: 24px !important; font-size: 24px !important }
.icon-3 { width: 32px !important; height: 32px !important; font-size: 32px !important }

/* ── Misc utilities ──────────────────────────────────────────── */
.overflow-hidden { overflow: hidden }
.position-relative { position: relative }
.position-fixed { position: fixed }
.text-center { text-align: center }
.text-decoration-underline { text-decoration: underline }
.w-100 { width: 100% !important }
.h-100 { height: 100% !important }
.w-32px { width: 32px !important }
.h-32px { height: 32px !important }
.w-40px { width: 40px !important }
.h-40px { height: 40px !important }
.w-64px { width: 64px !important }
.h-64px { height: 64px !important }
.min-h-64px { min-height: 64px !important }
@media (min-width: 992px) { .lg\:min-h-80px { min-height: 80px !important } }
.min-h-250px { min-height: 250px }
@media (min-width: 768px) { .md\:min-h-250px { min-height: 250px } }
.max-h-200 { max-height: 200px }
.z-1 { z-index: 1 }
.z-99 { z-index: 99 }
.z-999 { z-index: 999 }
.end-0 { right: 0 }
.bottom-0 { bottom: 0 }

/* Lazy images */
.lazy-img { opacity: 0; transition: opacity 0.3s }
.lazy-img[src]:not([src$="lazy.svg"]) { opacity: 1 }

/* ── Buttons (Bootstrap-compatible) ──────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; text-decoration: none; text-align: center;
  vertical-align: middle; cursor: pointer; user-select: none;
  border: 1px solid transparent; padding: 0.5rem 1rem;
  font-size: 1rem; border-radius: 8px;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.875rem }
.btn-md { padding: 0.625rem 1.25rem }
.btn-primary { background-color: #2e3fb1; border-color: #2e3fb1; color: #fff }
.btn-primary:hover { background-color: #25329a; border-color: #25329a; color: #fff }
.btn-outline-primary { color: #2e3fb1; border-color: #2e3fb1; background-color: transparent }
.btn-outline-primary:hover { background-color: #2e3fb1; color: #fff }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; background-color: transparent }
.btn-light { background-color: #f8f9fa; border-color: #f8f9fa; color: #212529 }
.btn-link { background-color: transparent; border-color: transparent; color: #2e3fb1; text-decoration: underline }

/* ── Dark mode compat ────────────────────────────────────────── */
.dark\:bg-gray-900 { }
.dark\:bg-gray-800 { }
.dark\:bg-gray-300 { }
.dark\:text-white { }
.dark\:bg-opacity-15 { }
/* Dark mode classes are no-ops until dark mode is implemented */

/* ── Transitions / animations ────────────────────────────────── */
.transition-all { transition: all 150ms ease }
.duration-150 { transition-duration: 150ms }
.hover\:scale-105:hover { transform: scale(1.05) }
.hover\:rotate-90:hover { transform: rotate(90deg) }
.hover\:bg-gray-600:hover { background-color: rgba(107, 114, 128, 0.05) }
.hover\:bg-opacity-5:hover { --tw-bg-opacity: 0.05 }

/* ── Media cover for images ──────────────────────────────────── */
.media-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
.image { max-width: 100%; height: auto }

/* ── Ratio boxes ─────────────────────────────────────────────── */
.ratio { position: relative; width: 100% }
.ratio::before { display: block; content: "" }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.ratio-1x1::before { padding-top: 100% }
.ratio-16x9::before { padding-top: 56.25% }
.ratio-4x3::before { padding-top: 75% }

/* ── Accordion (compat for uc-accordion — will be replaced by <details>) ── */
.uc-accordion { display: flex; flex-direction: column }
.uc-accordion-content { display: none; overflow: hidden }
.uc-accordion .uc-open .uc-accordion-content { display: block }
.uc-accordion-title { cursor: pointer; position: relative }

/* ── Featured image ──────────────────────────────────────────── */
.featured-image { position: relative; overflow: hidden }

/* ── Responsive hstack/vstack ────────────────────────────────── */
@media (min-width: 576px) {
  .sm\:hstack { display: flex; flex-direction: row; align-items: center }
}
@media (min-width: 992px) {
  .lg\:hstack { display: flex; flex-direction: row; align-items: center }
  .lg\:vstack { display: flex; flex-direction: column }
}

/* ── Form elements (Bootstrap compat) ────────────────────────── */
.form-control {
  display: block; width: 100%; padding: 0.375rem 0.75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #212529; background-color: #fff;
  border: 1px solid #dee2e6; border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
  color: #212529; background-color: #fff;
  border-color: #86b7fe; outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(46, 63, 177, 0.25);
}
.form-label { margin-bottom: 0.5rem; display: inline-block }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem }
.form-check-input { float: left; margin-left: -1.5em; width: 1em; height: 1em }
.form-check-label { cursor: pointer }
.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545 }
.was-validated .form-control:invalid ~ .invalid-feedback { display: block }

/* ── Modal (Bootstrap compat for freebies) ───────────────────── */
.modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0 }
.modal.show { display: block }
.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem) }
.modal-xl { max-width: 1140px }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; border-radius: 0.5rem; outline: 0 }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem }
.modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6 }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000 }
.modal-backdrop.show { opacity: 0.5 }
.fade { transition: opacity .15s linear }
.fade:not(.show) { opacity: 0 }
@media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px } }

/* ── Alert (for freebies form messages) ──────────────────────── */
.alert { position: relative; padding: 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.375rem }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7 }

/* ── Spinner (for freebies form) ─────────────────────────────── */
.spinner-border {
  display: inline-block; width: 2rem; height: 2rem;
  vertical-align: -0.125em; border: 0.25em solid currentcolor;
  border-right-color: transparent; border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em }
@keyframes spinner-border { to { transform: rotate(360deg) } }

/* ── Additional missing utilities ─────────────────────────────── */

/* Flex utilities used in index.php */
.flex-nowrap { flex-wrap: nowrap !important }
.flex-shrink-0 { flex-shrink: 0 !important }
.align-items-center { align-items: center !important }
.justify-content-center { justify-content: center !important }
.d-inline { display: inline !important }
.text-start { text-align: left !important }
.w-fit { width: fit-content !important }
.w-auto { width: auto !important }
.object-contain { object-fit: contain }

/* Badge */
.badge { display: inline-block; padding: 0.25em 0.5em; font-size: 0.75rem; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.375rem }

/* Responsive sm: column widths */
@media (min-width: 576px) {
  .sm\:col-8 { flex: 0 0 auto; width: 66.66666667% }
  .sm\:col-auto { flex: 0 0 auto; width: auto }
  .sm\:child-cols-6 > * { flex: 0 0 auto; width: 50% }
  .sm\:w-550px { width: 550px }
  .sm\:h-600px { height: 600px }
}

/* Responsive lg: column widths */
@media (min-width: 992px) {
  .lg\:col-5 { flex: 0 0 auto; width: 41.66666667% }
  .lg\:col-3 { flex: 0 0 auto; width: 25% }
  .lg\:w-450px { width: 450px }
  .lg\:h-500px { height: 500px }
  .lg\:text-start { text-align: left !important }
}

/* Responsive xl: */
@media (min-width: 1200px) {
  .xl\:max-w-lg { max-width: 1040px !important }
  .xl\:me-4 { margin-right: 1.5rem !important }
  .xl\:w-600px { width: 600px }
  .xl\:h-650px { height: 650px }
  .xl\:mb-2 { margin-bottom: 0.5rem !important }
  .xl\:mt-4 { margin-top: 1.5rem !important }
  .xl\:child-cols-4 > * { flex: 0 0 auto; width: 33.33333333% }
}

/* Fixed-size utilities used in hero/buttons */
.h-48px { height: 48px !important }
.border-2 { border-width: 2px !important }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important }

/* Icon narrow */
.icon-narrow { display: inline-flex; align-items: center }

/* Responsive padding pt-9, xl:pt-10 */
.pt-9 { padding-top: 4.5rem !important }
@media (min-width: 1200px) { .xl\:pt-10 { padding-top: 5rem !important } }
@media (min-width: 1200px) { .xl\:pb-9 { padding-bottom: 4.5rem !important } }

/* responsive gap */
@media (min-width: 992px) {
  .lg\:gap-0 { gap: 0 !important }
  .lg\:gap-2 { gap: 1rem !important }
  .lg\:gap-3 { gap: 1.5rem !important }
  .lg\:gap-4 { gap: 2rem !important }
  .lg\:gap-6 { gap: 3rem !important }
}
@media (min-width: 1200px) {
  .xl\:gap-3 { gap: 1.5rem !important }
  .xl\:gap-4 { gap: 2rem !important }
  .xl\:gap-6 { gap: 3rem !important }
  .xl\:gap-8 { gap: 4rem !important }
}

/* Responsive rounding */
@media (min-width: 992px) {
  .lg\:rounded-2 { border-radius: 16px !important }
}
.rounded-3 { border-radius: 24px !important }

/* Features section specific */
.features-items { }
.features-item { }
.title { }

/* RTL/LTR text alignment */
.rtl\:lg\:text-end { }
.rtl\:rotate-180 { }

/* Position cover */
.position-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

/* Background gradient from/to (not handled by Tailwind CDN because compat classes use non-tw names) */
.bg-gradient-to-t { background: linear-gradient(to top, var(--tw-gradient-stops, #E4EEFA, #ffffff)) }
.from-secondary { --tw-gradient-from: #E4EEFA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #fff) }
.to-white { --tw-gradient-to: #fff }

/* px-8 */
.px-8 { padding-left: 4rem !important; padding-right: 4rem !important }

/* Additional spacing missing */
.mb-1 { margin-bottom: 0.25rem !important }
.mb-5 { margin-bottom: 3rem !important }
.mt-5 { margin-top: 3rem !important }
.me-2 { margin-right: 0.5rem !important }
.ms-2 { margin-left: 0.5rem !important }

/* shadow-lg */
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important }

/* Responsive flex direction */
@media (min-width: 768px) {
  .md\:hstack { display: flex; flex-direction: row; align-items: center }
}

/* col-md-6 already defined above, add align-items for row */
.align-items-center { align-items: center !important }