/* ========================================
   MOTYW — GALA FIRMOWA: GRANAT, KOŚĆ SŁONIOWA, SREBRO
   Tu zmieniasz kolory, czcionki i wygląd kart.
   Szkielet strony (układ, okna, formularze) jest w css/baza.css.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ---- PALETA ---- */
:root {
    --atrament:  #0d1726;   /* tło */
    --granat:    #15253b;
    --granat-2:  #1d314d;
    --kosc:      #f3efe8;   /* jasne karty, tekst */
    --srebro:    #c3cbd6;   /* linie, akcent */
    --stal:      #8fa7bf;

    --font-display: 'Bodoni Moda', serif;
    --font-body:    'Manrope', sans-serif;
    --display-weight: 400;

    --bg: var(--atrament);
    --bg-open:
        radial-gradient(ellipse at 50% -20%, rgba(143, 167, 191, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, var(--atrament), #0a121e);
    --bg-envelope: radial-gradient(ellipse at 50% 40%, #1b2e48 0%, var(--atrament) 70%);
    --ink: var(--kosc);
    --accent: var(--srebro);
    --shadow: 0, 0, 0;

    --card-bg: linear-gradient(165deg, var(--granat-2), var(--granat) 60%);
    --card-ink: var(--kosc);
    --card-accent: var(--srebro);
    --card-line: rgba(195, 203, 214, 0.5);
    --card-radius: 2px;

    --btn-bg: var(--kosc);
    --btn-ink: var(--atrament);
    --btn-shadow: none;

    --ui-bg: rgba(13, 23, 38, 0.82);
    --ui-ink: var(--kosc);
    --ui-accent: var(--kosc);
    --ui-border: 1px solid rgba(195, 203, 214, 0.35);
    --ui-radius: 4px;

    --panel-bg: #111e31;
    --panel-ink: var(--kosc);
    --panel-radius: 6px;
    --panel-border: 1px solid rgba(195, 203, 214, 0.25);
    --field-bg: rgba(243, 239, 232, 0.05);
    --field-border: rgba(195, 203, 214, 0.25);
    --field-radius: 3px;
    --focus-ring: rgba(195, 203, 214, 0.2);
    --overlay: rgba(5, 9, 16, 0.75);
    --map-filter: grayscale(1) invert(0.92) contrast(0.9);

    --deco-opacity: 0.35;
}

/* ========================================
   EKRAN Z KOPERTĄ
   ======================================== */

.deco-frame {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(195, 203, 214, 0.22);
    pointer-events: none;
}
.deco-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(195, 203, 214, 0.12);
}

.env-fan {
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: min(820px, 150vw);
    transform: translateX(-50%);
    opacity: 0.18;
    pointer-events: none;
}

.envelope-intro .intro-kicker {
    font-size: 0.72rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--stal);
}

.envelope-intro .intro-name {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 400;
    letter-spacing: 12px;
    text-transform: uppercase;
    margin: 0.6rem 0 0.4rem;
    padding-left: 12px;
}

.envelope-intro .intro-date {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--srebro);
}

.envelope {
    /* koperta: kolory papieru, podszewki i pieczęci */
    --env-paper:   #1c304c;
    --env-paper-2: #111f33;
    --env-edge:    rgba(195, 203, 214, 0.45);
    --env-liner:   #0d1726;
    --env-liner-2: rgba(195, 203, 214, 0.45);
    --env-seal:    #c3cbd6;
    --env-seal-2:  #6c7888;
    --env-seal-3:  #ffffff;
    --env-seal-ink:#394556;
    --env-letter:  #f3efe8;
    --env-ink:     #e6e9ee;
    --seal-font:   var(--font-display);
}
.env-letter { font-family: var(--font-display); color: var(--atrament); letter-spacing: 4px; font-size: clamp(0.9rem, 4vw, 1.4rem); padding-top: 9%; }
.env-address { font-family: var(--font-display); font-style: italic; }

.tap-text { color: var(--stal); letter-spacing: 5px; }

/* ========================================
   KARTY
   ======================================== */

.card::before {
    content: '';
    position: absolute;
    inset: 4.5cqw;
    border: 0.25cqw solid var(--card-line);
    pointer-events: none;
}
.card.has-img::before { display: none; }

.card.t-kosc {
    --card-bg: linear-gradient(170deg, #f7f4ee, #ece6dc);
    --card-ink: var(--atrament);
    --card-accent: #52657d;
    --card-line: rgba(13, 23, 38, 0.3);
    --btn-bg: var(--atrament);
    --btn-ink: var(--kosc);
}

.card-inner { padding: 12cqw 10cqw; }

.c-kicker { font-size: 2.7cqw; letter-spacing: 1.3cqw; font-weight: 600; }
.c-h { font-size: 9cqw; }
.c-text { font-weight: 300; }
.c-text b { font-weight: 600; }
.c-rule { width: 12cqw; }

.card-btn {
    border-radius: 0.8cqw;
    letter-spacing: 0.5cqw;
    text-transform: uppercase;
    font-size: 2.9cqw;
    padding: 3cqw 5.5cqw;
}

.c-timeline { gap: 0; }
.c-timeline li {
    padding: 2.3cqw 0;
    border-top: 0.2cqw solid var(--card-line);
    font-weight: 300;
    font-size: 3.5cqw;
}
.c-timeline li:last-child { border-bottom: 0.2cqw solid var(--card-line); }
.c-timeline time { font-family: var(--font-display); font-size: 4.2cqw; font-weight: 500; color: var(--card-ink); }

.c-icon { width: 14cqw; height: 14cqw; color: var(--card-accent); }

/* ---- karta tytułowa ---- */

.card-title .card-inner { gap: 1.5cqw; }

.monogram {
    width: 17cqw;
    aspect-ratio: 1;
    border: 0.3cqw solid var(--srebro);
    transform: rotate(45deg);
    display: grid;
    place-items: center;
    margin-bottom: 5cqw;
}
.monogram span {
    transform: rotate(-45deg);
    font-family: var(--font-display);
    font-size: 8cqw;
}

.title-company {
    font-size: 3.4cqw;
    letter-spacing: 2.4cqw;
    text-transform: uppercase;
    padding-left: 2.4cqw;
    color: var(--srebro);
}

.title-15 {
    font-family: var(--font-display);
    font-size: 44cqw;
    line-height: 0.85;
    font-weight: 400;
    background: linear-gradient(180deg, #ffffff 0%, #c3cbd6 55%, #7f8a99 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.title-lat {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 7cqw;
    margin-top: -2cqw;
}

.title-gala {
    font-size: 3cqw;
    letter-spacing: 1.6cqw;
    text-transform: uppercase;
    margin-top: 4cqw;
    padding-left: 1.6cqw;
}

.title-date {
    position: absolute;
    left: 10cqw;
    right: 10cqw;
    bottom: 10cqw;
    display: flex;
    justify-content: space-between;
    font-size: 2.8cqw;
    letter-spacing: 0.8cqw;
    color: var(--srebro);
}

/* ---- dress code ---- */

.dress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4cqw;
    width: 100%;
    margin-top: 3cqw;
    text-align: left;
}
.dress b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 4.6cqw; margin-bottom: 1cqw; }
.dress p { font-size: 3.1cqw; line-height: 1.5; font-weight: 300; }

.tone { display: flex; gap: 2cqw; justify-content: center; margin-top: 4cqw; }
.tone i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--c); border: 0.3cqw solid rgba(13, 23, 38, 0.2); }

/* ---- kontakt ---- */

.contact { font-size: 3.5cqw; line-height: 1.6; font-weight: 300; }
.contact b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 5.4cqw; }
.contact a { color: inherit; }

/* ---- zakończenie ---- */

.closing .closing-big {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.3;
}
.closing .closing-big em { color: var(--srebro); }
.closing p.signature {
    margin-top: 1rem;
    font-size: 0.75rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--stal);
}

/* ---- dekoracje ---- */

.deco { width: 240px; }

/* ---- okna ---- */

.sheet-kicker { color: var(--stal); letter-spacing: 4px; }
.sheet-title { font-size: 2.2rem; }
.btn { border-radius: 3px; text-transform: uppercase; letter-spacing: 2px; font-size: 0.82rem; }
.f-choice > span { border-radius: 3px; }
.map-tabs button { border-radius: 3px; }
.countdown-title { font-size: 0.65rem; letter-spacing: 4px; text-transform: uppercase; font-family: var(--font-body); color: var(--stal); }
.countdown-item b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; }
.music-toggle { border-radius: 4px; }
select.f-input option { background: #111e31; }
.f-input { color-scheme: dark; }

@media (max-width: 768px) {
    .envelope-intro .intro-name { font-size: 2.3rem; letter-spacing: 8px; }
    .deco-frame { inset: 12px; }
    .closing .closing-big { font-size: 1.5rem; }
    .countdown-item b { font-size: 1.2rem; }
    .countdown-title { font-size: 0.5rem; }
}