.elementor-4047 .elementor-element.elementor-element-e6a64a2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4047 .elementor-element.elementor-element-403733f3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-2128a26a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-6e0bb8cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-302569f0{--display:flex;--margin-top:-200px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:1;}.elementor-4047 .elementor-element.elementor-element-45aa901d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-4ba0b282{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-f7eb7f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:2;}.elementor-4047 .elementor-element.elementor-element-751695ce{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:3;}.elementor-4047 .elementor-element.elementor-element-cd821d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4047 .elementor-element.elementor-element-8f1c682{margin:-120px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4047 .elementor-element.elementor-element-7f5b95e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--z-index:4;}.elementor-4047 .elementor-element.elementor-element-13a92acc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:5;}.elementor-4047 .elementor-element.elementor-element-76e52a22{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:6;}.elementor-4047 .elementor-element.elementor-element-41510bd2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:7;}.elementor-4047 .elementor-element.elementor-element-482bd147{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4047 .elementor-element.elementor-element-70c46708{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:8;}.elementor-4047 .elementor-element.elementor-element-60d763de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:8;}.elementor-4047 .elementor-element.elementor-element-46b16ffc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:9;}.elementor-4047 .elementor-element.elementor-element-7f33a68a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:10;}.elementor-4047 .elementor-element.elementor-element-7ec9561f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:11;}.elementor-4047 .elementor-element.elementor-element-2c776141{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:12;}.elementor-4047 .elementor-element.elementor-element-17333c77{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:12;}.elementor-4047 .elementor-element.elementor-element-3df88c7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--z-index:13;}.elementor-4047 .elementor-element.elementor-element-ab910e5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:14;}.elementor-4047 .elementor-element.elementor-element-44afdbbd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4047 .elementor-element.elementor-element-5c44247d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:15;}.elementor-4047 .elementor-element.elementor-element-3d322d8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:16;}.elementor-4047 .elementor-element.elementor-element-3ee71547{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:17;}.elementor-4047 .elementor-element.elementor-element-21848c06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:18;}.elementor-4047 .elementor-element.elementor-element-63264a75{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:19;}.elementor-4047 .elementor-element.elementor-element-dd20e16{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-4047 .elementor-element.elementor-element-302569f0{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4047 .elementor-element.elementor-element-41510bd2{--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4047 .elementor-element.elementor-element-ab910e5{--margin-top:-250px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4047 .elementor-element.elementor-element-63264a75{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-4047 .elementor-element.elementor-element-302569f0{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-f7eb7f2{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-751695ce{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-7f5b95e7{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-13a92acc{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-76e52a22{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-70c46708{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-46b16ffc{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-7f33a68a{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-7ec9561f{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-2c776141{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-17333c77{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-3df88c7c{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-5c44247d{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-3d322d8{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-3ee71547{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-21848c06{--content-width:100vw;}.elementor-4047 .elementor-element.elementor-element-63264a75{--content-width:100vw;}}/* Start custom CSS *//* ================================================================
   MASTER CSS — UNIWERSALNY SZABLON ŚLUBNY
   ANM Collective © 2026
   
   INSTRUKCJA:
   - Ten plik zawiera WSZYSTKIE klasy używane we wszystkich sekcjach
   - Zmiana motywu = zmiana tylko :root (lub użycie przełącznika motywów)
   - Motyw domyślny = Gipsówka (szałwiowo-zielony)
   - Aby zmienić motyw: podmień wartości w :root poniżej
   ================================================================ */

/* ================================================================
   💙  MOTYW: HORTENSJA
   Głęboki granat, stalowy błękit, złoto ciepłe, biel nieba
   ================================================================ */
:root {
  /* GŁÓWNA PALETA */
  --c-dark:        #1a3550;
  --c-medium:      #2d5078;
  --c-accent:      #4a7aaa;
  --c-gold:        #c9a227;
  --c-cream:       #eef6fc;
  --c-light:       #d0e8f5;
  --c-sage-equiv:  #4a7aaa;
  --white-clean:   #ffffff;

  /* TŁO */
  --bg-main-grad:  radial-gradient(ellipse at 50% 40%, #f5fbff 0%, #dff0fb 55%, #4a7aaa 100%);

  /* PRZEZROCZYSTOŚCI */
  --bg-card:        rgba(220, 238, 251, 0.85);
  --bg-card-solid:  rgba(220, 238, 251, 0.97);
  --bg-overlay:     rgba(26, 53, 80, 0.04);
  --bg-hover:       rgba(26, 53, 80, 0.07);

  /* RAMKI */
  --border-main:    rgba(26, 53, 80, 0.15);
  --border-light:   rgba(26, 53, 80, 0.08);
  --border-medium:  rgba(26, 53, 80, 0.22);

  /* CIENIE */
  --shadow-soft:    0 20px 50px rgba(26, 53, 80, 0.08);
  --shadow-card:    0 30px 60px rgba(26, 53, 80, 0.10);
  --shadow-heavy:   0 40px 80px rgba(26, 53, 80, 0.12);

  /* TYPOGRAFIA */
  --font-display:  'Angella White', cursive;
  --font-serif:    'Playfair Display', serif;
  --font-body:     'Cormorant Garamond', serif;

  /* LUXE REGISTRY */
  --lr-dark:          #1a3550;
  --lr-medium:        #2d5078;
  --lr-cream:         #eef6fc;
  --lr-accent:        #4a7aaa;
  --lr-bg-card:       rgba(220, 238, 251, 0.70);
  --lr-bg-card-solid: rgba(220, 238, 251, 0.97);
  --lr-bg-hover:      rgba(26, 53, 80, 0.07);
  --lr-border-light:  rgba(26, 53, 80, 0.12);
  --lr-border-main:   rgba(26, 53, 80, 0.22);
  --lr-border-medium: rgba(26, 53, 80, 0.35);
  --lr-shadow-card:   0 20px 60px rgba(26, 53, 80, 0.18);
  --lr-overlay-reserved:  rgba(26, 53, 80, 0.55);
  --lr-overlay-hover:     rgba(16, 36, 56, 0.30);
  --lr-overlay-backdrop:  rgba(16, 36, 56, 0.65);
  --lr-overlay-lightbox:  rgba(8, 18, 28, 0.95);
  --lr-badge-bg:          rgba(26, 53, 80, 0.75);
  --lr-color-reserved:    #a05050;
  --lr-color-available:   #2d5078;

  /* HERO MOBILE */
  --hero-mobile-brightness:    0.28;    /* błękit = nieco jaśniej żeby niebieskość oddychała */
  --hero-mobile-vignette:      rgba(26, 53, 80, 0.65);
  --hero-timer-bg-mobile:      rgba(26, 53, 80, 0.30);
  --hero-timer-border-mobile:  rgba(201, 162, 39, 0.25);
}
/* TŁO — wklej do widgetu HTML z tłem (podmień cloud-img) */
/*
  #global-wedding-bg {
    background: radial-gradient(ellipse at 50% 40%, #f5fbff 0%, #dff0fb 55%, #4a7aaa 100%);
  }
  #cloud-layer, #liquid-layer {
    background-image: url('https://anmcollective.fun/wp-content/uploads/2026/02/dqefeqfefef.png');
  }
*/





/* ================================================================
   2. PODPIĘCIE ZMIENNYCH LR → MASTER
   ================================================================ */
#luxe-registry,
#lr-iban-modal,
#lr-pay-modal,
#lr-form-modal,
#lr-lightbox {
  --c-dark:        var(--lr-dark);
  --c-medium:      var(--lr-medium);
  --c-cream:       var(--lr-cream);
  --bg-card:       var(--lr-bg-card);
  --bg-card-solid: var(--lr-bg-card-solid);
  --bg-hover:      var(--lr-bg-hover);
  --border-light:  var(--lr-border-light);
  --border-main:   var(--lr-border-main);
  --border-medium: var(--lr-border-medium);
  --shadow-card:   var(--lr-shadow-card);
}


/* ================================================================
   3. FUNDAMENTY
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg-main-grad) !important;
  background-color: var(--c-cream) !important;
  color: var(--c-dark);
  font-family: var(--font-serif);
}


/* ================================================================
   4. TYPOGRAFIA GLOBALNA
   ================================================================ */

/* Czcionka ozdobna — tytuły sekcji (kolor tematyczny) */
.wedding-font {
  font-family: var(--font-display) !important;
  color: var(--c-dark) !important;
  font-weight: 600 !important;
  line-height: 1.1;
}

/* WAŻNE: Biała wersja wedding-font — do użytku na ciemnym tle (intro, hero) */
/* Dodaj tę klasę OBOK .wedding-font gdy element jest na ciemnym tle         */
.wedding-font-white {
  font-family: var(--font-display) !important;
  color: var(--white-clean) !important;
  font-weight: 600 !important;
  line-height: 1.1;
}

/* Tytuły sekcji */
.kg-title, .atq-title, .k-title, .d-title, .km-title,
.m-main-title, .ww-title, .h-title, .intro-section-title {
  font-family: var(--font-display) !important;
  color: var(--c-dark) !important;
}

/* Wersja tytułu na ciemnym tle (np. stopka, intro) */
.kg-title-white, .section-title-white {
  font-family: var(--font-display) !important;
  color: var(--white-clean) !important;
}

/* Duże tytuły */
.d-title {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.9;
  margin: 15px 0;
}

.parents-main-title {
  font-size: clamp(5.5rem, 8vw, 10rem) !important;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* Podtytuły */
.k-subtitle, .d-subtitle, .km-subtitle, .kids-intro-text,
.capsule-description, .ww-desc, .witness-desc {
  color: var(--c-dark) !important;
  font-family: var(--font-serif);
  line-height: 1.7;
}

.d-subtitle {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-medium) !important;
}

/* Etykiety (złote, uppercase) */
.rsvp-label, .k-tag, .d-tag, .km-tag, .lr-eyebrow,
.ww-label, .m-upper-label, .h-eyebrow, .section-eyebrow,
.intro-eyebrow, .hero-eyebrow {
  font-family: var(--font-serif) !important;
  color: var(--c-gold) !important;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Paragraf globalny */
p {
  color: var(--c-dark);
  font-family: var(--font-serif);
  line-height: 1.7;
}


/* ================================================================
   5. DIVIDERY
   ================================================================ */

/* Divider na jasnym tle strony */
.wedding-divider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  width: 100%;
}
.wedding-divider .divider-line {
  height: 1px;
  flex: 1;
  background: var(--c-dark) !important;
  opacity: 0.25;
}
.wedding-divider .divider-ornament {
  font-family: var(--font-display) !important;
  color: var(--c-dark) !important;
  font-size: 1.4rem;
  line-height: 1;
}

/* Divider wyśrodkowany */
.wedding-divider-c {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  margin: 20px auto !important;
  width: 100% !important;
}
.divider-line-c {
  height: 1px !important;
  flex: 0 0 80px !important;
  background: var(--c-dark) !important;
  opacity: 0.4 !important;
}
.divider-ornament-c {
  font-family: var(--font-display) !important;
  color: var(--c-dark) !important;
  font-size: 1.8rem !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

/* Divider na CIEMNYM tle (stopka, intro, hero, intro-wrapper) */
.divider-on-dark .divider-line,
.divider-on-dark .divider-line-c {
  background: var(--white-clean) !important;
  opacity: 0.45 !important;
}
.divider-on-dark .divider-ornament,
.divider-on-dark .divider-ornament-c {
  color: var(--c-gold) !important;
  opacity: 1 !important;
}


/* ================================================================
   6. INTRO — ekran powitalny z gwiazdkami
   Tło = var(--c-medium), teksty = białe, przycisk = biały outline
   ================================================================ */

#wedding-intro-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999999;
  background-color: var(--c-medium);   /* ← zmienia się z rootem */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: background-color 0s; /* bez animacji na zmianę motywu */
}

#wedding-intro-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}

.intro-paper-overlay {
  position: absolute;
  inset: 0;
  background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
}

/* Napisy intro — zawsze białe niezależnie od motywu */
.intro-names,
.names,
#wedding-intro-wrapper h1,
#wedding-intro-wrapper .names {
  font-family: var(--font-display) !important;
  font-size: clamp(3.5rem, 15vw, 8rem);
  color: var(--white-clean) !important;  /* ZAWSZE biały */
  margin: 0;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
  line-height: 1.1;
  z-index: 10;
}

.intro-date,
.date,
#wedding-intro-wrapper .date {
  font-family: var(--font-serif) !important;
  color: var(--white-clean) !important;  /* ZAWSZE biały */
  letter-spacing: 6px;
  margin-top: 0;
  margin-bottom: clamp(2rem, 8vh, 3.5rem);
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.75;
  z-index: 10;
}

.intro-eyebrow {
  color: var(--c-gold) !important;  /* złoto — zmienia się z rootem */
  letter-spacing: 8px;
  font-size: 0.68rem;
  opacity: 0.9;
  margin-bottom: 14px;
  z-index: 10;
}

/* Przycisk START — zawsze biały outline na ciemnym tle intro */
#btn-start {
  pointer-events: auto;
  padding: 16px 50px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: var(--white-clean) !important;
  font-family: var(--font-serif) !important;
  font-size: 0.85rem;
  cursor: pointer;
  letter-spacing: 4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border-radius: 50px;
  transition: all 0.5s ease;
  z-index: 10;
}
#btn-start:hover {
  background: var(--white-clean) !important;
  color: var(--c-medium) !important;  /* tekst w kolorze tła intro */
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Link do panelu w intro */
#btn-panel {
  pointer-events: auto;
  color: var(--white-clean) !important;
  font-family: var(--font-serif) !important;
  opacity: 0.5;
  text-decoration: none;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: 0.4s;
  font-size: 0.7rem;
  display: inline-block;
  margin-top: 25px;
  z-index: 10;
}
#btn-panel:hover { opacity: 1; letter-spacing: 5px; }

#canvas-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
#intro-content {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  width: 100%;
}


/* ================================================================
   7. HERO — sekcja po intro
   ================================================================ */

.hero-mask-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.immersive-hero {
  position: relative;
  width: 40vw;
  height: 40vw;
  border-radius: 20px;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  will-change: width, height, border-radius, opacity;
  box-shadow: 0 50px 100px rgba(58, 71, 57, 0.2);
}

@media (max-width: 768px) {
  .immersive-hero {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

.hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gsap-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6) saturate(0.8) sepia(0.2);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 5%, rgba(45, 56, 44, 0.1) 100%);
  z-index: 3;
}

.hero-photo {
  position: absolute;
  z-index: 5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  border: 4px solid var(--white-clean);
  opacity: 0;
}
.photo-1 { width: 18vw; height: 28vh; left: 6%; bottom: 12%; rotate: -2deg; }
.photo-2 { width: 14vw; height: 38vh; right: 8%; top: 10%; rotate: 3deg; }

.hero-center-content {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  padding: 0 20px;
  width: 100%;
}

/* Napisy hero — zawsze białe (są na ciemnym zdjęciu) */
.hero-invitation-text {
  font-family: var(--font-serif) !important;
  color: var(--white-clean) !important;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 1.1rem;
  margin-bottom: 10px;
  opacity: 0.9;
}

.hero-info-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
}
.info-label {
  font-family: var(--font-serif) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
  margin-bottom: 5px;
  color: var(--white-clean) !important;
}
.info-val {
  font-family: var(--font-serif) !important;
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  color: var(--white-clean) !important;
}
.info-sub {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.85;
  color: var(--white-clean) !important;
}
.info-sep { font-size: 1.2rem; color: var(--white-clean) !important; }

/* Countdown timer w hero */
.hero-countdown { text-align: center; }
.timer-label {
  font-family: var(--font-serif) !important;
  letter-spacing: 5px;
  font-size: 0.65rem;
  color: var(--white-clean) !important;
  opacity: 0.7;
  margin-bottom: 12px;
}
.timer-grid {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 30px;
  border-radius: 60px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  justify-content: center;
  margin: 0 auto;
}
.timer-unit span {
  font-family: var(--font-serif) !important;
  font-size: 1.8rem;
  color: var(--white-clean) !important;
  line-height: 1;
}
.timer-unit label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white-clean) !important;
  margin-top: 5px;
  opacity: 0.8;
  display: block;
}
.timer-sep { color: var(--c-gold) !important; font-size: 0.8rem; margin-bottom: 10px; }

@media (max-width: 768px) {
  .hero-photo { display: none; }
  .hero-info-grid { flex-direction: column; gap: 20px; }
  .info-sep { display: none; }
  .info-val { font-size: 1.2rem; }
  .info-sub { font-size: 1rem; }
}


/* ================================================================
   8. PRZYCISKI
   ================================================================ */

/* Główny przycisk — kolor tematyczny */
.atq-btn, .lr-btn-solid, .ww-btn, .nav-button-premium,
.m-submit-btn-premium, .ff-btn-submit, .presence-btn-confirm,
.k-btn-primary, .km-tab.active {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
  border: 1px solid var(--c-medium) !important;
  font-family: var(--font-serif) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.4s ease;
  cursor: pointer;
}
.atq-btn:hover, .lr-btn-solid:hover, .ww-btn:hover,
.nav-button-premium:hover, .m-submit-btn-premium:hover,
.ff-btn-submit:hover, .k-btn-primary:hover {
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  box-shadow: 0 10px 30px rgba(58, 71, 57, 0.25) !important;
  transform: translateY(-2px);
}

/* Przycisk outline */
.lr-btn-outline, .presence-btn, .km-tab, .ww-filter, .atq-opt,
.k-btn-outline {
  color: var(--c-dark) !important;
  border-color: var(--border-medium) !important;
  background: transparent !important;
  font-family: var(--font-serif) !important;
  transition: all 0.3s ease;
  cursor: pointer;
}
.lr-btn-outline:hover, .atq-opt:hover, .k-btn-outline:hover {
  background: var(--bg-hover) !important;
}

/* Aktywny tab / filtr */
.ww-filter.active, .km-tab.active {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
  border-color: var(--c-medium) !important;
}


/* ================================================================
   9. FORMULARZE
   ================================================================ */
input, textarea, select {
  border-bottom-color: var(--border-medium) !important;
  color: var(--c-dark) !important;
  font-family: var(--font-serif) !important;
  background: transparent;
}
input:focus, textarea:focus, select:focus {
  border-bottom-color: var(--c-gold) !important;
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--c-sage-equiv) !important;
  opacity: 0.6;
}
label {
  color: var(--c-dark) !important;
  font-family: var(--font-serif) !important;
}


/* ================================================================
   10. KARTY / SEKCJE
   ================================================================ */

/* Ogólna karta ze szkłem */
.glass-card, .wedding-card, .k-card, .d-card, .atq-card,
.ww-card, .km-card, .timeline-item, .info-box-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  transition: all 0.35s ease;
}
.glass-card:hover, .wedding-card:hover {
  background: var(--bg-card-solid) !important;
  box-shadow: var(--shadow-card);
}

/* Karta z pełnym tłem */
.solid-card, .modal-card {
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-main) !important;
  border-radius: 20px;
}


/* ================================================================
   11. PANEL BOCZNY (floating)
   ================================================================ */
.floating-side-panel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--c-medium) !important;
  opacity: 0.92;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 25px 12px 25px 8px;
  border: 1px solid var(--border-medium);
  border-left: none;
  border-radius: 0 20px 20px 0;
  color: var(--white-clean) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--shadow-soft);
  animation: wanderLeft 4s ease-in-out infinite;
}
.floating-side-panel .panel-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-serif) !important;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  color: var(--white-clean) !important;
}
.floating-side-panel:hover {
  background: var(--c-dark) !important;
  padding-left: 25px;
  border-color: var(--c-gold);
}
@keyframes wanderLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%       { transform: translateY(-50%) translateX(10px); }
}
@media screen and (max-width: 480px) {
  .floating-side-panel { padding: 15px 8px 15px 5px; }
  .floating-side-panel .panel-text { font-size: 9px; letter-spacing: 2px; }
}


/* ================================================================
   12. STOPKA
   ================================================================ */
.wedding-footer, footer.wedding-footer, .site-footer {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
}
.wedding-footer p, .wedding-footer a,
.footer-text, .footer-link {
  color: var(--white-clean) !important;
  font-family: var(--font-serif) !important;
}
.footer-title {
  font-family: var(--font-display) !important;
  color: var(--white-clean) !important;
}
.footer-nav a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.75rem;
  transition: 0.3s;
}
.footer-nav a:hover { color: var(--white-clean) !important; }


/* ================================================================
   13. SEKCJA QUIZ (atq)
   ================================================================ */
.atq-wrapper { background: var(--bg-card) !important; }
.atq-title { color: var(--c-dark) !important; }
.atq-progress-fill { background: var(--c-medium) !important; }
.atq-opt {
  border: 1px solid var(--border-medium) !important;
  color: var(--c-dark) !important;
}
.atq-opt.correct { background: rgba(58,71,57,0.15) !important; border-color: var(--c-medium) !important; }
.atq-opt.wrong   { background: rgba(160,80,80,0.12) !important; border-color: #a05050 !important; }


/* ================================================================
   14. SEKCJA RSVP
   ================================================================ */
.rsvp-section, .rsvp-wrapper { background: var(--bg-card) !important; }
.rsvp-label { color: var(--c-gold) !important; }
.rsvp-title { color: var(--c-dark) !important; font-family: var(--font-display) !important; }
.presence-btn {
  border: 1px solid var(--border-medium) !important;
  color: var(--c-dark) !important;
  background: transparent !important;
}
.presence-btn.selected, .presence-btn:hover {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
  border-color: var(--c-medium) !important;
}


/* ================================================================
   15. SEKCJA MAPA / DOJAZD (k = Kierunek)
   ================================================================ */
.k-wrapper, .k-modal-content, .map-modal-overlay { }
.k-title { color: var(--c-dark) !important; font-family: var(--font-display) !important; }
.k-tag   { color: var(--c-gold) !important; }
.k-modal-content {
  background: var(--c-cream) !important;
  border: 1px solid var(--c-gold);
  border-radius: 20px;
}
.map-modal-overlay { background: rgba(14, 18, 13, 0.92) !important; }


/* ================================================================
   16. SEKCJA DRESS CODE (d)
   ================================================================ */
.d-title { color: var(--c-dark) !important; }
.d-tag   { color: var(--c-gold) !important; }
.d-swatch-label { color: var(--c-dark) !important; }
.d-swatch-active { box-shadow: 0 0 0 3px var(--c-gold) !important; }


/* ================================================================
   17. MENU (km)
   ================================================================ */
.km-title  { color: var(--c-dark) !important; }
.km-tag    { color: var(--c-gold) !important; }
.km-tab {
  border: 1px solid var(--border-medium) !important;
  color: var(--c-dark) !important;
  background: transparent !important;
}
.km-tab.active {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
  border-color: var(--c-medium) !important;
}
.km-dish-name    { color: var(--c-dark) !important; }
.km-dish-desc    { color: var(--c-sage-equiv) !important; }
.km-subtitle     { color: var(--c-dark) !important; }


/* ================================================================
   18. SEKCJA MUZYKA (m)
   ================================================================ */
.m-main-title { color: var(--c-dark) !important; }
.m-upper-label { color: var(--c-gold) !important; }
.m-submit-btn-premium {
  background: var(--c-medium) !important;
  border-color: var(--c-medium) !important;
  color: var(--white-clean) !important;
}
.m-preview-wrapper { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.m-note-card  { background: var(--bg-card-solid) !important; border-color: var(--border-light) !important; }


/* ================================================================
   19. SEKCJA WEDDING WALL (ww) — galeria / ściana wspomnień
   ================================================================ */
.ww-title  { color: var(--c-dark) !important; }
.ww-label  { color: var(--c-gold) !important; }
.ww-desc   { color: var(--c-dark) !important; }
.ww-btn    { background: var(--c-medium) !important; border-color: var(--c-medium) !important; color: var(--white-clean) !important; }
.ww-filter {
  border: 1px solid var(--border-medium) !important;
  color: var(--c-dark) !important;
  background: transparent !important;
}
.ww-filter.active {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
  border-color: var(--c-medium) !important;
}
#ww-lightbox { background: rgba(14, 18, 13, 0.95) !important; }


/* ================================================================
   20. LUXE REGISTRY — lista prezentów
   ================================================================ */
.lr-eyebrow { color: var(--c-gold) !important; }
.lr-gift-num {
  background: var(--c-gold) !important;
  color: var(--white-clean) !important;
}
.lr-btn-solid {
  background: var(--c-medium) !important;
  border-color: var(--c-medium) !important;
  color: var(--white-clean) !important;
}
.lr-btn-outline {
  color: var(--c-dark) !important;
  border-color: var(--lr-border-medium) !important;
  background: transparent !important;
}
.lr-btn-outline:hover { background: var(--lr-bg-hover) !important; }
.lr-modal-box {
  background: var(--lr-bg-card-solid) !important;
  border: 1px solid var(--c-gold) !important;
  border-radius: 20px;
}


/* ================================================================
   21. KAPSUŁKA CZASU (capsule)
   ================================================================ */
.capsule-title       { color: var(--c-dark) !important; font-family: var(--font-display) !important; }
.capsule-description { color: var(--c-dark) !important; }
.capsule-label       { color: var(--c-gold) !important; }
.capsule-select {
  border: 1px solid var(--border-medium) !important;
  color: var(--c-dark) !important;
  background: var(--bg-card) !important;
  border-radius: 10px;
  padding: 8px 14px;
}


/* ================================================================
   22. HARMONOGRAM (timeline)
   ================================================================ */
.timeline-dot   { background: var(--c-medium) !important; border-color: var(--c-gold) !important; }
.timeline-time  { color: var(--c-gold) !important; font-family: var(--font-serif) !important; }
.timeline-title { color: var(--c-dark) !important; font-family: var(--font-display) !important; }
.timeline-desc  { color: var(--c-sage-equiv) !important; }
.timeline-line  { background: var(--border-main) !important; }


/* ================================================================
   23. LIGHTBOXY I MODALE (ogólne)
   ================================================================ */
.modal-overlay, .lightbox-overlay {
  background: rgba(14, 18, 13, 0.92) !important;
}
.modal-box, .modal-content {
  background: var(--c-cream) !important;
  border: 1px solid var(--border-main);
  border-radius: 24px;
}
.modal-title {
  font-family: var(--font-display) !important;
  color: var(--c-dark) !important;
}
.modal-close {
  color: var(--c-dark) !important;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  opacity: 0.5;
  transition: 0.2s;
}
.modal-close:hover { opacity: 1; }


/* ================================================================
   24. SCROLLBAR DEKORACYJNA (opcjonalna)
   ================================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-cream); }
::-webkit-scrollbar-thumb {
  background: var(--c-light);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-medium); }


/* ================================================================
   25. SEKCJA PRZEWIŃ (ticker tape)
   ================================================================ */
.ticker-wrapper, .scroll-ticker {
  background: var(--c-medium) !important;
  color: var(--white-clean) !important;
}
.ticker-text, .scroll-text {
  font-family: var(--font-serif) !important;
  color: var(--white-clean) !important;
}
.ticker-sep { color: var(--c-gold) !important; }


/* ================================================================
   26. SEKCJA RODZICE / WITNESSES
   ================================================================ */
.parents-section { background: var(--bg-card) !important; }
.parents-main-title { color: var(--c-dark) !important; }
.witness-name { color: var(--c-dark) !important; font-family: var(--font-display) !important; }
.witness-role { color: var(--c-gold) !important; letter-spacing: 4px; text-transform: uppercase; font-size: 0.7rem; }
.witness-desc { color: var(--c-sage-equiv) !important; }
.witness-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 16px;
  transition: all 0.3s;
}
.witness-card:hover {
  background: var(--bg-card-solid) !important;
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}


/* ================================================================
   27. KIDS SECTION
   ================================================================ */
.kids-intro-text { color: var(--c-dark) !important; }
.kids-icon       { color: var(--c-medium) !important; }
.kids-title      { color: var(--c-dark) !important; font-family: var(--font-display) !important; }


/* ================================================================
   28. RESPONSYWNOŚĆ GLOBALNA
   ================================================================ */
@media (max-width: 768px) {
  .d-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .parents-main-title { font-size: clamp(3.5rem, 12vw, 7rem) !important; }
  .hero-info-grid { flex-direction: column; gap: 20px; }
  .hero-photo { display: none; }
  .floating-side-panel { display: none; } /* ukryj panel boczny na mobile */
}

/* ================================================================
   29. HERO — CZYTELNOŚĆ NA MOBILE
   
   Każdy motyw definiuje własną zmienną --hero-mobile-brightness
   która steruje przyciemnieniem zdjęcia w tle na telefonie.
   Dzięki temu jasne motywy (Hortensja, Róża) i ciemne (Peonia,
   Gipsówka) wyglądają spójnie — napisy zawsze białe na ciemnym tle.
   
   Wartości w rootach poszczególnych motywów:
   • Peonia:    --hero-mobile-brightness: 0.22  (czekolada = ciemne)
   • Gipsówka:  --hero-mobile-brightness: 0.24  (zieleń = ciemne)
   • Hortensja: --hero-mobile-brightness: 0.28  (błękit = trochę jaśniej)
   • Róża:      --hero-mobile-brightness: 0.20  (bordo = najciemniej)
   ================================================================ */

/* Domyślna wartość — nadpisywana przez każdy root motywu */
:root {
  --hero-mobile-brightness: 0.24;
  --hero-mobile-vignette:   rgba(0, 0, 0, 0.60);
  --hero-timer-bg-mobile:   rgba(0, 0, 0, 0.22);
  --hero-timer-border-mobile: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {

  .hero-mask-wrapper {
    background: var(--c-cream) !important;
  }

  /* Przyciemnienie z roota — każdy motyw ma własną wartość */
  .gsap-bg-img {
    filter: brightness(var(--hero-mobile-brightness)) saturate(0.6) !important;
  }

  .hero-vignette {
    background: radial-gradient(
      circle, transparent 0%,
      var(--hero-mobile-vignette) 100%
    ) !important;
  }

  /* Wszystkie teksty w hero — białe na przyciemnionym zdjęciu */
  .hero-invitation-text,
  .info-label,
  .info-val,
  .info-sub,
  .info-sep,
  .timer-label,
  .timer-unit span,
  .timer-unit label {
    color: var(--white-clean) !important;
  }

  .immersive-hero .wedding-font,
  .immersive-hero .gsap-title {
    color: var(--white-clean) !important;
  }

  /* Separator licznika — złoty z roota */
  .timer-sep {
    color: var(--c-gold) !important;
  }

  /* Timer pill — z roota motywu */
  .timer-grid {
    background: var(--hero-timer-bg-mobile) !important;
    border-color: var(--hero-timer-border-mobile) !important;
  }
}

@media (max-width: 600px) {
  .lr-dream-img-wrap,
  .lr-gift-img-wrap {
    height: 110px !important; 
  }
}/* End custom CSS */