/* =========================================================================
   PAULINA & MATEUSZ — ślubny motyw "jasne kolory"
   Custom hook style.css — ładowany automatycznie po style.min.css motywu,
   więc wszystkie poniższe reguły mają pierwszeństwo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PALETA — jasna, elegancka (kość słoniowa + pudrowy róż + różane złoto)
   Nadpisuje zmienne CSS wszystkich palet motywu (też ciemnych), dzięki
   czemu strona zawsze wygląda jasno, niezależnie od ustawienia palety.
   ------------------------------------------------------------------------- */
:root,
.palette-system:root,
.palette-blanco:root,
.palette-dark:root,
.palette-flickr:root,
.palette-imgur:root,
.palette-deviantart:root,
.palette-lush:root,
.palette-graffiti:root,
.palette-abstract:root,
.palette-cheers:root,
.palette-cmyk:root {
    color-scheme: light;
    --colorAccent: #b76e79;                /* różane złoto */
    --colorAccentStrong: #9f5b66;
    --colorBlue: #b76e79;
    --colorBlueHover: #9f5b66;
    --bodyBackground: #fdf9f4;             /* kość słoniowa */
    --bodyEmpty: #f4e9df;
    --bodySeparator: #ecdfd2;
    --bodyText: #4a423c;                    /* ciepły ciemny brąz */
    --bodyTextDisabled: #c9bcae;
    --bodyTextSubtle: #978a7c;
    --buttonAccentBackground: #b76e79;
    --buttonAccentHoverBackground: #a05a65;
    --buttonAccentHoverText: #ffffff;
    --buttonAccentText: #ffffff;
    --buttonDefaultBackground: #ffffff;
    --buttonDefaultBorder: #e8dccc;
    --buttonDefaultHoverBackground: #f6ece1;
    --buttonDefaultHoverBorder: #e8dccc;
    --buttonDefaultHoverText: #a95f6a;
    --buttonDefaultText: #4a423c;
    --inputBackground: #ffffff;
    --inputPlaceholderText: #b3a696;
    --inputText: #4a423c;
    --linkText: #a95f6a;
    --menuBackground: rgba(253, 249, 244, 0.92);
    --menuBorder: #ecdfd2;
    --menuItemHoverBackground: #b76e79;
    --menuItemHoverText: #ffffff;
    --menuItemText: #4a423c;
    --menuSeparator: #ecdfd2;
    --menuText: #4a423c;
    --modalBackground: #ffffff;
    --modalText: #4a423c;
    --topBarBackground: rgba(253, 249, 244, 0.9);
    --topBarText: #4a423c;
    --topSubBarBackground: #ffffff;
    --viewerBackground: #fdf9f4;
    --listItemText: #ffffff;
    --alertAccent: #c9a227;
    --alertBackground: #fdf3d7;
    --alertText: #5c4a1e;
}

/* -------------------------------------------------------------------------
   2. TYPOGRAPHIA — Cormorant Garamond (nagłówki) + Jost (tekst)
   ------------------------------------------------------------------------- */
html,
body {
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
.wedding-names {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

::selection {
    background: #b76e79;
    color: #ffffff;
}

/* Subtelna tekstura papieru na całej stronie (delikatne ziarno) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* -------------------------------------------------------------------------
   3. PASEK GÓRNY — logo tekstowe i delikatne cieniowanie
   ------------------------------------------------------------------------- */
.top-bar {
    box-shadow: 0 1px 0 rgba(74, 66, 60, 0.06);
}

/* Głębszy cień paska górnego po przewinięciu (klasy scroll-up/scroll-down dodaje JS) */
html.scroll-up .top-bar,
html.scroll-down .top-bar {
    box-shadow: 0 2px 16px rgba(74, 66, 60, 0.09);
}

/* Logo: chowamy obrazek (domyślne logo Chevereto) i pokazujemy elegancki napis */
.top-bar-logo img {
    display: none;
}

.top-bar-logo > a::after {
    content: 'Paulina & Mateusz';
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--topBarText);
}

/* Strona główna: ukrywamy zbędne elementy nawigacji — goście mają się skupić na zdjęciach */
body#index #top-bar-explore,
body#index #top-bar-random,
body#index [data-action="top-bar-search"],
body#index [data-action="top-bar-search-input"],
body#index li[data-nav="language"],
body#index li[data-nav="about"],
body#index li[data-nav="notices"],
body#index .top-bar-notifications,
body#index #top-bar-signin {
    display: none;
}

/* Przycisk "Wrzuć" na stronie głównej — różowa pigułka */
body#index li[data-nav="upload"] {
    margin-inline-start: 6px;
}

body#index li[data-nav="upload"] a.top-btn-text {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-top: 9px;
    padding: 0 18px;
    background: #b76e79;
    color: #ffffff;
    border-radius: 100px;
    font-size: 0.92rem;
    transition: background 200ms ease;
}

body#index li[data-nav="upload"] a.top-btn-text .icon {
    line-height: 32px;
    font-size: 0.9rem;
    width: 1.2em;
}

body#index li[data-nav="upload"] a.top-btn-text:hover {
    background: #a05a65;
    color: #ffffff;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. STRONA GŁÓWNA — sekcja powitalna (hero)
   ------------------------------------------------------------------------- */
#wedding-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 50px);
    text-align: center;
    padding: calc(50px + 4vh) 20px 6vh;
    background:
        radial-gradient(1200px 620px at 12% -10%, #fbe9e4 0%, rgba(251, 233, 228, 0) 60%),
        radial-gradient(1000px 520px at 92% 112%, #f7ecd9 0%, rgba(247, 236, 217, 0) 55%),
        radial-gradient(900px 480px at 50% 118%, #f6e3c8 0%, rgba(246, 227, 200, 0) 60%),
        radial-gradient(700px 380px at 85% -5%, #f9e9d8 0%, rgba(249, 233, 216, 0) 55%),
        #fdf9f4;
    overflow: hidden;
}

/* Duży, ledwo widoczny pierścień za treścią hero (róż + złoto) */
#wedding-hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vw, 860px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(183, 110, 121, 0.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 24px rgba(183, 110, 121, 0.04),
        0 0 0 25px rgba(201, 169, 119, 0.16);
    pointer-events: none;
}

/* Fala na dole hero — płynne przejście do białej sekcji galerii */
#wedding-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 70px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2080'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,45%20C180,85%20360,5%20540,25%20C720,45%20900,75%201080,55%20C1260,35%201350,20%201440,30%20L1440,80%20L0,80%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    pointer-events: none;
}

/* Gdy nie ma sekcji galerii (styl strony głównej inny niż Split), fala jest zbędna */
.wedding-no-listing #wedding-hero::after {
    opacity: 0;
}

.wedding-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

#wedding-hero .wedding-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

/* Dwa pierścienie z sercem — delikatna dekoracja */
.wedding-hero-ring {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
}

.wedding-hero-ring .ring-outer {
    position: absolute;
    inset: -7px;
    border: 1px solid #d9b98c; /* złoto */
    border-radius: 50%;
}

.wedding-hero-ring .ring-inner {
    position: absolute;
    inset: 0;
    border: 2px solid #b76e79;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b76e79;
    font-size: 18px;
    line-height: 1;
}

.wedding-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 10px;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #a95f6a;
}

.wedding-eyebrow::before,
.wedding-eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: #d9b98c; /* złoto */
}

/* Miejsce ślubu — linijka pod datą (ukryta, gdy pusta) */
.wedding-place {
    margin: 0 0 18px;
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #978a7c;
}

.wedding-place .fa-heart {
    font-size: 0.7em;
    color: #d9a8a0;
    margin: 0 10px;
}

.wedding-names {
    margin: 0;
    font-size: clamp(1.9rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1.05;
    color: #4a423c;
    white-space: nowrap;
}

/* Imiona z gałązkami eukaliptusa po bokach — gałązki są pozycjonowane
   niezależnie (absolute), więc nie rozpychają hero w pionie */
.wedding-names-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: clamp(44px, 5vw, 84px); /* rezerwa na gałązki po bokach */
}

.wedding-branch {
    position: absolute;
    top: 50%;
    width: clamp(28px, 3.5vw, 56px);
    height: auto;
    pointer-events: none;
}

.wedding-branch:not(.is-right) {
    left: clamp(6px, 1vw, 14px);
    transform: translateY(-50%);
}

.wedding-branch.is-right {
    right: clamp(6px, 1vw, 14px);
    transform: translateY(-50%) scaleX(-1);
}

.wedding-names .amp {
    font-family: 'Dancing Script', 'Great Vibes', cursive;
    font-size: 1.12em;
    font-style: normal;
    font-weight: 600;
    color: #b76e79;
    padding: 0 0.08em;
    line-height: 1;
}

/* Ozdobny separator z sercem */
.wedding-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 420px;
    margin: 12px auto 0;
    color: #d9a8a0;
    font-size: 0.85rem;
}

.wedding-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d9b98c, transparent); /* złoto */
}

.wedding-intro {
    max-width: 620px;
    margin: 12px auto 0;
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    font-weight: 300;
    line-height: 1.65;
    color: #6b5d4f;
}

.wedding-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

/* Przyciski w hero — duże, w kształcie pigułki */
#wedding-hero .btn {
    height: 46px;
    line-height: 46px;
    padding: 0 1.9em;
    font-size: 1.05rem;
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(183, 110, 121, 0.22);
}

#wedding-hero .btn.accent:hover {
    box-shadow: 0 6px 18px rgba(183, 110, 121, 0.32);
}

.wedding-btn-ghost {
    background: #ffffff;
    border: 1px solid #d9b98c; /* złota obwódka */
    color: #a95f6a;
    box-shadow: none;
}

#wedding-hero .btn.wedding-btn-ghost {
    box-shadow: 0 4px 14px rgba(74, 66, 60, 0.08);
}

.wedding-btn-ghost:hover {
    background: #f6ece1;
    color: #8f4f59;
    text-decoration: none;
}

.wedding-note {
    margin: 20px auto 0;
    font-size: 0.9rem;
    color: #978a7c;
}

/* Delikatne pojawianie się elementów hero */
@keyframes weddingFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#wedding-hero .wedding-container > * {
    animation: weddingFadeUp 0.7s ease both;
}

#wedding-hero .wedding-container > *:nth-child(2) { animation-delay: 0.08s; }
#wedding-hero .wedding-container > *:nth-child(3) { animation-delay: 0.16s; }
#wedding-hero .wedding-container > *:nth-child(4) { animation-delay: 0.24s; }
#wedding-hero .wedding-container > *:nth-child(5) { animation-delay: 0.32s; }
#wedding-hero .wedding-container > *:nth-child(6) { animation-delay: 0.4s; }
#wedding-hero .wedding-container > *:nth-child(7) { animation-delay: 0.48s; }

/* -------------------------------------------------------------------------
   5. STRONA GŁÓWNA — galeria zdjęć
   ------------------------------------------------------------------------- */
#wedding-gallery {
    background:
        radial-gradient(900px 420px at 8% 0%, rgba(251, 233, 228, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(900px 420px at 92% 100%, rgba(247, 236, 217, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
        #ffffff;
    padding: 72px 0 64px;
}

#wedding-gallery .wedding-container,
#wedding-howto .wedding-container {
    text-align: center;
}

.wedding-section-title {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    color: #4a423c;
}

.wedding-section-sub {
    margin: 0 0 38px;
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #978a7c;
}

.wedding-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Elementy listy generowane przez Chevereto (.list-item) — układamy sami */
.wedding-gallery-grid .list-item {
    display: block;
    width: calc(33.333% - 10px);
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

.wedding-gallery-grid .list-item-image {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.wedding-gallery-grid .image-container {
    border-radius: 12px;
    overflow: hidden;
}

.wedding-gallery-grid .list-item:hover .image-container {
    transform: scale(1.025);
}

/* Miękki gradient u dołu kafelka — czytelność podpisów przy hover */
.wedding-gallery-grid .list-item-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(74, 66, 60, 0.34), rgba(74, 66, 60, 0) 42%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.wedding-gallery-grid .list-item:hover .list-item-image::after {
    opacity: 1;
}

/* Na telefonach gradient jest stały (brak hovera) */
.phone .wedding-gallery-grid .list-item-image::after,
.phablet .wedding-gallery-grid .list-item-image::after {
    opacity: 0.65;
}

.wedding-gallery-grid .list-item-desc {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.wedding-gallery-more {
    margin-top: 38px;
    text-align: center;
}

.wedding-gallery-more .btn {
    height: 44px;
    line-height: 44px;
    padding: 0 1.8em;
    border-radius: 100px;
}

/* -------------------------------------------------------------------------
   6. STRONA GŁÓWNA — "jak dodać zdjęcia" (3 kroki)
   ------------------------------------------------------------------------- */
#wedding-howto {
    padding: 72px 0 84px;
}

.wedding-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
}

.wedding-step {
    flex: 1 1 240px;
    max-width: 330px;
    padding: 42px 24px 32px;
    background: #ffffff;
    border: 1px solid #e9d9c0; /* złotawy obrys */
    border-radius: 150px 150px 18px 18px; /* łuk weselny */
    box-shadow: 0 6px 24px rgba(74, 66, 60, 0.05);
}

.wedding-step .step-num {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(160deg, #f8ebe6 0%, #f0d9cf 100%);
    box-shadow: inset 0 0 0 1px rgba(183, 110, 121, 0.12);
    color: #a95f6a;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 44px;
}

.wedding-step p {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.65;
    color: #6b5d4f;
}

.wedding-step strong {
    font-weight: 500;
    color: #4a423c;
}

/* -------------------------------------------------------------------------
   7. STOPKA — całkowicie ukryta (wersja ślubna)
   Strona kończy się sekcją podziękowania; stopka motywu jest zbędna.
   Uwaga: darmowa licencja Chevereto wymaga podpisu „Powered by Chevereto”
   — po zakupie licencji Lite/Lite+ nie ma to znaczenia.
   ------------------------------------------------------------------------- */
.footer {
    display: none;
}

/* -------------------------------------------------------------------------
   8. Drobne poprawki globalne — spójny, jasny wygląd w całym serwisie
   ------------------------------------------------------------------------- */
/* Karty listingu poza stroną główną (np. eksploracja, albumy) */
.content-listing .list-item {
    border-radius: 10px;
    overflow: hidden;
}

/* Przyciski premium — delikatniejsze zaokrąglenie, gładkie przejścia */
.btn {
    border-radius: 8px;
    transition: transform 160ms ease, box-shadow 300ms ease, filter 200ms ease;
}

/* Przycisk akcentowy: gradient różu + połysk przy najechaniu */
.btn.accent {
    background: linear-gradient(135deg, #c28791 0%, #b76e79 55%, #a35f6a 100%);
    box-shadow: 0 4px 14px rgba(183, 110, 121, 0.25);
    position: relative;
    overflow: hidden;
}

.btn.accent:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(183, 110, 121, 0.35);
}

.btn.accent::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn.accent:hover::after {
    left: 130%;
}

/* Modale i pola formularzy — jasne tło już mamy przez zmienne; dodajemy obramowania */
.input-focus,
html:not(.safari) select:focus,
input.search:focus,
input:focus,
textarea:focus {
    border-color: #d9a8a0;
}

/* Responsywność galerii */
@media (max-width: 900px) {
    .wedding-gallery-grid .list-item {
        width: calc(50% - 7px);
    }
}

/* Na wąskich ekranach gałązki znikają, żeby nie ściskać imion */
@media (max-width: 720px) {
    .wedding-branch {
        display: none;
    }
}

@media (max-width: 560px) {
    .wedding-gallery-grid .list-item {
        width: 100%;
    }

    .top-bar-logo > a::after {
        font-size: 1.1em;
    }

    #wedding-hero {
        padding-top: calc(50px + 3vh);
        padding-bottom: 5vh;
    }

    .wedding-actions .btn {
        width: 100%;
        max-width: 360px;
        height: auto;
        min-height: 48px;
        line-height: 1.35;
        padding: 12px 1.4em;
        font-size: 0.98rem;
    }

    #wedding-close .wedding-container {
        padding: 40px 18px 46px;
        outline-offset: 6px;
    }
}

/* -------------------------------------------------------------------------
   9. ULEPSZENIA WIZUALNE — wersja 2
   ------------------------------------------------------------------------- */

/* Ozdobny separator serca nad tytułami sekcji — złote linie + listki */
.wedding-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 220px;
    margin: 0 auto 18px;
    color: #d9a8a0;
    font-size: 0.8rem;
}

.wedding-ornament span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d9b98c, transparent); /* złoto */
}

/* Listki eukaliptusa po bokach serduszka */
.wedding-ornament i {
    position: relative;
}

.wedding-ornament i::before,
.wedding-ornament i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 22px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M12 2 C 20 12, 22 26, 12 42 C 2 26, 4 12, 12 2 Z' fill='%239aa78f'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wedding-ornament i::before {
    inset-inline-end: calc(100% + 7px);
}

.wedding-ornament i::after {
    inset-inline-start: calc(100% + 7px);
    transform: translateY(-50%) scaleX(-1);
}

/* Ładniejsze łamanie długich nagłówków */
.wedding-section-title {
    text-wrap: balance;
}

/* Kafelki galerii — unoszenie i cień po najechaniu */
.wedding-gallery-grid .list-item {
    transition: box-shadow 300ms ease, transform 300ms ease;
    box-shadow: 0 2px 10px rgba(74, 66, 60, 0.07);
}

.wedding-gallery-grid .list-item:hover {
    box-shadow: 0 14px 34px rgba(74, 66, 60, 0.16);
}

/* Pusta galeria — ramka w kształcie pustej ramki na zdjęcie */
#wedding-gallery-empty {
    background: #ffffff;
    padding: 30px 0 70px;
    text-align: center;
}

#wedding-gallery-empty .empty-frame {
    max-width: 440px;
    margin: 0 auto;
    padding: 46px 30px;
    border: 2px dashed #d9b98c; /* złoto */
    border-radius: 20px;
}

#wedding-gallery-empty .empty-icon {
    font-size: 56px;
    color: #d9a8a0;
    margin-bottom: 14px;
}

#wedding-gallery-empty p {
    margin: 0 0 22px;
    color: #6b5d4f;
    font-weight: 300;
}

#wedding-gallery-empty .btn {
    height: 44px;
    line-height: 44px;
    padding: 0 1.8em;
    border-radius: 100px;
}

/* Sekcja „jak dodać zdjęcia” — miękkie przejście z białej galerii */
#wedding-howto {
    padding: 72px 0 84px;
    background: linear-gradient(#ffffff 0, #fdf9f4 160px);
}

.wedding-no-listing #wedding-howto {
    background: #fdf9f4;
}

/* Karty kroków — delikatne unoszenie po najechaniu */
.wedding-step {
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.wedding-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(74, 66, 60, 0.1);
}

/* Sekcja podziękowania — wielki finał z gradientem i płynącymi serduszkami */
#wedding-close {
    position: relative;
    overflow: hidden;
    padding: 90px 0 110px;
    text-align: center;
    background: linear-gradient(180deg, #fdf9f4 0%, #fbe9e4 100%);
}

/* Elegancka ramka wokół treści finału (podwójny obrys) */
#wedding-close .wedding-container {
    border: 1px solid #ecdcc4;
    outline: 1px solid rgba(201, 169, 119, 0.28);
    outline-offset: 10px;
    border-radius: 22px;
    padding: 60px 30px 66px;
    background: rgba(255, 255, 255, 0.45);
}

/* Fala na dole finału usunięta — tło różowe schodzi do samego dołu strony */

#wedding-close .wedding-section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

#wedding-close p {
    max-width: 540px;
    margin: 0 auto;
    color: #6b5d4f;
    font-weight: 300;
    line-height: 1.7;
}

#wedding-close .wedding-signature {
    margin-top: 26px;
    font-family: 'Whisper', 'Great Vibes', 'Dancing Script', cursive;
    font-size: clamp(2.7rem, 6vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    color: #3d362f;
    white-space: nowrap;
}

#wedding-close .wedding-signature span {
    color: #b76e79;
}

#wedding-close .wedding-signature .fa-heart {
    font-size: 0.55em;
    color: #d9a8a0;
    margin-inline-start: 8px;
}

/* Płynące serduszka w finale */
.close-heart {
    position: absolute;
    bottom: -40px;
    font-size: 18px;
    color: #e3bdb2;
    opacity: 0;
    pointer-events: none;
    animation: closeHeartUp 10s linear infinite;
}

.close-heart.h1 { inset-inline-start: 12%; animation-duration: 11s; animation-delay: 0s; }
.close-heart.h2 { inset-inline-start: 50%; font-size: 14px; animation-duration: 9s; animation-delay: 3s; }
.close-heart.h3 { inset-inline-start: 84%; font-size: 22px; animation-duration: 12s; animation-delay: 6s; }

@keyframes closeHeartUp {
    0%   { transform: translateY(0) translateX(0) rotate(-8deg) scale(0.8); opacity: 0; }
    10%  { opacity: 0.5; }
    50%  { transform: translateY(-220px) translateX(16px) rotate(10deg) scale(1); opacity: 0.3; }
    90%  { opacity: 0.15; }
    100% { transform: translateY(-440px) translateX(-10px) rotate(-6deg) scale(0.9); opacity: 0; }
}

/* Przyciski — delikatne „wciśnięcie” i widoczny fokus */
.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible,
a:focus-visible {
    outline: 2px solid #b76e79;
    outline-offset: 3px;
}

/* Płynne przewijanie + szacunek dla preferencji ruchu */
html {
    scroll-behavior: smooth;
}

/* Sekcje przewijane kotwicą nie chowają się pod stałym paskiem górnym */
#wedding-gallery,
#wedding-gallery-empty,
#wedding-howto,
#wedding-close {
    scroll-margin-top: 60px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #wedding-hero .wedding-container > *,
    .wedding-gallery-grid .list-item,
    .wedding-step,
    .btn,
    .close-heart {
        animation: none !important;
        transition: none !important;
    }

    .close-heart {
        opacity: 0 !important;
    }
}

/* Subtelny pasek przewijania */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f4e9df;
}

::-webkit-scrollbar-thumb {
    background: #d9b8ae;
    border-radius: 100px;
    border: 2px solid #f4e9df;
}

::-webkit-scrollbar-thumb:hover {
    background: #b76e79;
}

/* -------------------------------------------------------------------------
   10. STRONA UPLOADU (/upload) — poprawka układu uploadera
   Domyślny motyw kotwiczy uploader do dołu ekranu (bottom: 0) z z-index: 0,
   przez co stopka jest widoczna nad opcjami wrzucania, a górna część
   kolejki bywa ucinana. Rozpinamy box pod paskiem górnym i kładziemy go
   nad treścią strony.
   ------------------------------------------------------------------------- */
#upload #anywhere-upload {
    top: 50px;          /* zaczyna się pod paskiem górnym */
    bottom: 0;          /* i kończy przy dolnej krawędzi ekranu */
    height: auto;
    padding-top: 0;
    z-index: 200;       /* nad treścią strony (i stopką) */
}

/* Stopka „Powered by Chevereto” jest zbędna na ekranie wrzucania */
body#upload .footer {
    display: none;
}

/* -------------------------------------------------------------------------
   11. UPLOADER — ukryte zbędne pola (ślubny minimalizm)
   Goście wrzucają zdjęcia bez opcji: tagi, album, automatyczne kasowanie
   i flagowanie NSFW. Pole „Category” zostaje (można dołożyć do listy).
   ------------------------------------------------------------------------- */
#anywhere-upload .input-label:has([name="upload-tags"]),
#anywhere-upload .input-label:has([name="upload-album-id"]),
#anywhere-upload .input-label:has([name="upload-expiration"]),
#anywhere-upload .margin-20:has([name="upload-nsfw"]),
#anywhere-upload .input-label:has([name="form-tags"]) {
    display: none;
}

/* Ekran sukcesu uploadera — ślubny komunikat z przyciskiem do galerii */
.wedding-upload-done p {
    margin: 0 auto 20px;
    max-width: 480px;
    font-weight: 300;
}

.wedding-upload-done .btn {
    border-radius: 100px;
}