/* ================================================
   Birthday Fun Theme – Digital Invitation
   ================================================ */

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --coral:       #FF6B6B;
    --accent-color: var(--coral);
    --yellow:      #FFD93D;
    --teal:        #4ECDC4;
    --purple:      #A66CFF;
    --dark:        #2D3436;
    --text:        #444;
    --muted:       #888;
    --bg:          #FFF8F0;
    --white:       #ffffff;
    --radius:      10px;
    --btn-radius:  999px;
    --ff-fun:      'Nunito', 'Comic Sans MS', cursive, sans-serif;
    --ff-serif:    'Playfair Display', Georgia, serif;
    --ff-sans:     'Lato', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
}

img { max-width: 100%; display: block; }
a  { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.bf-container         { max-width: 1100px; margin: 0 auto; padding: 0; }
.bf-container--narrow { max-width: 680px; }

/*
 * Alternating section backgrounds, computed from what actually renders rather
 * than hardcoded per section — any of these can be hidden by plan tier, the
 * section-visibility toggle, or missing data, and the rhythm still holds
 * because :nth-child only counts DOM nodes that actually exist.
 * To pin one specific section to a fixed color regardless of position, target
 * its own class with !important (e.g. `.bf-rsvp { background: var(--white) !important; }`).
 */
.bf-alt-sections > * {
    background: var(--bg);
}
.bf-alt-sections > *:nth-child(even) {
    background: var(--white);
}

.bf-section-title {
    font-family: var(--ff-fun);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--dark);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 800;
}
.bf-section-title::before {
    content: attr(data-emoji) ' ';
}

/* ---------- Hero ---------- */
.bf-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 1.5rem 6rem;
    background: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 40%, #4ECDC4 80%, #A66CFF 100%);
}

/* floating confetti dots */
.bf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 1px);
    background-size: 60px 60px, 30px 30px;
    background-position: 0 0, 15px 15px;
    pointer-events: none;
}

.bf-hero__grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    width: 100%;
}
.bf-hero__grid.bf-container { max-width: 1400px; }

/* ---------- Hero media (rainbow-ring photo frame) ---------- */
.bf-hero__media {
    position: relative;
    width: min(460px, 100%);
    margin: 0 auto;
}

.bf-hero__ring {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 10px;
    background: conic-gradient(from 180deg, var(--coral), var(--yellow), var(--teal), var(--purple), var(--coral));
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
}

.bf-hero__frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--white);
    border: 6px solid var(--white);
}

.bf-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.bf-hero__badge {
    position: absolute;
    top: -4px;
    right: 4%;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    font-size: 2.75rem;
    animation: bf-float 3.5s ease-in-out infinite;
    z-index: 2;
}

@keyframes bf-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ---------- Hero content (text column) ---------- */
.bf-hero__content {
    position: relative;
    z-index: 3;
}

.bf-hero__eyebrow {
    font-family: var(--ff-fun);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    margin-bottom: .5rem;
}

.bf-hero__name {
    font-family: var(--ff-fun);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 3px 4px 0 rgba(0,0,0,.15);
    line-height: 1.1;
    margin-bottom: .75rem;
}

.bf-hero__tagline {
    font-family: var(--ff-fun);
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: rgba(255,255,255,.95);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.bf-hero__date-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--ff-fun);
    font-weight: 800;
    font-size: .95rem;
    color: var(--dark);
    background: #fff;
    border-radius: var(--btn-radius);
    padding: .65rem 1.25rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    margin-bottom: .25rem;
}

.bf-hero__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.25rem;
}

.bf-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 2rem;
    padding: .45rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

@media (max-width: 820px) {
    .bf-hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bf-hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bf-hero__meta { justify-content: center; }
    .bf-hero__media {
        width: 80%;
        margin: 5rem auto 0;
    }
    .bf-hero__badge {
        width: 64px;
        height: 64px;
        top: 5rem;
        right: 10%;
    }
}

.bf-nav { display: none; }

/* Floating topbar */
.bf-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background .3s ease, backdrop-filter .3s ease;
}

/* Desktop only (mobile hides these links behind the hamburger toggle, which
   already has its own self-contained dark-blur backdrop — the bar itself
   stays transparent unconditionally there). Above the hamburger breakpoint
   the link row sits directly in the bar with no opaque panel of its own, so
   once scrolled past the hero onto a plain section (.bf-alt-sections'
   even-child white tint) the light link text would lose contrast against
   transparent — give the bar a solid/blurred background past the scroll
   threshold (.scrolled toggled by data-topbar in theme.js). */
@media (min-width: 601px) {
    .bf-topbar.scrolled {
        background: color-mix(in srgb, var(--dark) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.bf-topbar__links {
    display: flex;
    gap: 1.25rem;
}
.bf-topbar__links a {
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    transition: color .2s;
}
.bf-topbar__links a:hover { color: #fff; text-decoration: none; }

.bf-topbar__toggle { display: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, just positioned here at opposite bottom
   corners, at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

@media (max-width: 600px) {
    /* .bf-topbar is space-between (brand left, toggle right) on desktop — pin the
       toggle to the left instead on mobile, matching baptism-gentle. order:-1
       moves it before the (opacity:0-until-scrolled) brand in visual order. */
    .bf-topbar { justify-content: flex-start; }
    .bf-topbar__toggle { order: -1; }

    .bf-topbar__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1.5px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(45,52,54,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .bf-topbar__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: var(--yellow);
        transition: transform .25s ease, opacity .2s ease;
    }
    .bf-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .bf-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .bf-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .bf-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(45,52,54,.97);
        border: 1px solid rgba(255,217,61,.25);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .bf-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .bf-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: rgba(255,255,255,.85);
    }
    .bf-topbar__links a:hover {
        background: rgba(255,217,61,.12);
        color: var(--yellow);
    }

}

/* ---------- Countdown ---------- */
.bf-countdown {
    background: var(--white);
    padding: 5rem 1.5rem;
    border-top: 6px solid var(--yellow);
}

.bf-audio {
    padding: 5rem 1.5rem;
}

.bf-countdown__timer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.bf-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, var(--coral), #ff8e8e);
    border-radius: var(--radius);
    padding: 1.2rem 1.8rem;
    min-width: 80px;
    box-shadow: 0 4px 15px rgba(255,107,107,.35);
}

.bf-countdown__number {
    font-family: var(--ff-fun);
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.bf-countdown__label {
    font-family: var(--ff-fun);
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .3rem;
}

/* ---------- Details ---------- */
.bf-details {
    padding: 5rem 1.5rem;
    background: var(--bg);
}

.bf-details__description {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    color: var(--text);
}

.bf-details__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}

.bf-details__card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border-top: 4px solid var(--yellow);
    transition: transform .2s;
}

.bf-details__card:hover { transform: translateY(-4px); }

.bf-details__icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}

.bf-details__card h3 {
    font-family: var(--ff-fun);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .4rem;
}

.bf-details__card p {
    font-size: .9rem;
    color: var(--muted);
}

.bf-details__qr {
    width: 80px;
    height: 80px;
    margin: .5rem auto 0;
    border-radius: 6px;
}

/* ---------- Program / Timeline ---------- */
.bf-program {
    padding: 5rem 1.5rem;
}

.bf-timeline { margin-top: 1rem; }

.bf-timeline__item {
    display: grid;
    grid-template-columns: 80px 20px 1fr;
    gap: 0 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.bf-timeline__time {
    font-family: var(--ff-fun);
    font-weight: 800;
    font-size: .9rem;
    color: var(--coral);
    text-align: right;
    padding-top: .15rem;
}

.bf-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--yellow);
    border: 3px solid var(--coral);
    margin-top: .25rem;
    position: relative;
}

.bf-timeline__dot::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: #eee;
    bottom: -1.5rem;
    height: calc(100% + 1.5rem + 14px);
}

.bf-timeline__item:last-child .bf-timeline__dot::after { display: none; }

.bf-timeline__label {
    font-family: var(--ff-fun);
    font-weight: 700;
    font-size: .95rem;
    color: var(--dark);
}

.bf-timeline__location {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-top: .15rem;
}

/* ---------- Poem / Message ---------- */
.bf-poem {
    padding: 5rem 1.5rem;
    text-align: center;
}

.bf-poem__text {
    font-size: 1.1rem;
    line-height: 2;
    white-space: pre-line;
    color: var(--dark);
}

.bf-poem__emoji {
    margin-top: 1rem;
    font-size: 1.75rem;
    opacity: .5;
    line-height: 1;
}

/* ---------- Our Story ----------
   Story sits between poem and gallery but only renders when milestones
   exist (rare for a birthday event) — matched to gallery's tone so the
   common poem->gallery adjacency (no story) still alternates correctly. */
.bf-story {
    padding: 5rem 1.5rem;
    text-align: center;
}

/* ---------- Gallery / Guest Wall ---------- */
.bf-gallery {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bf-guest-wall {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bf-gallery-upload {
    padding: 5rem 1.5rem;
    text-align: center;
}

/* No card here — same borderless layout as RSVP in this theme, same width. */
.bf-gallery-upload .gu-form {
    max-width: 620px;
    padding: 0 1.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Dress Code / Good to Know ---------- */
.bf-dress-code {
    padding: 5rem 1.5rem;
    text-align: center;
}
.bf-good-to-know {
    padding: 5rem 1.5rem;
    text-align: center;
}

/* ---------- Closing ---------- */
.bf-closing {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.bf-closing p {
    font-style: italic;
    font-size: .95rem;
    color: var(--dark);
    opacity: .55;
    margin: 0;
}

/* ---------- Map ---------- */
.bf-location {
    padding: 5rem 1.5rem;
}

.bf-location__address {
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.bf-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: var(--radius);
    display: block;
}

/* ---------- RSVP ---------- */
/* Pinned to its own gradient rather than joining the alternation. */
.bf-rsvp {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff3fa 100%) !important;
}

.bf-rsvp__subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.bf-alert--success {
    background: #d1fae5;
    color: #065f46;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.bf-form { max-width: 560px; margin: 0 auto; }

.bf-form__group {
    margin-bottom: 1.25rem;
}

.bf-form__group label {
    display: block;
    font-family: var(--ff-fun);
    font-weight: 700;
    font-size: .85rem;
    color: var(--dark);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bf-form__group input,
.bf-form__group select,
.bf-form__group textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
    font-family: var(--ff-sans);
    font-size: .95rem;
    color: var(--text);
    background: var(--white);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.bf-form__group input:focus,
.bf-form__group select:focus,
.bf-form__group textarea:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(255,107,107,.15);
}

.bf-form__group--checkbox {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.bf-form__group--checkbox input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.bf-form__group--checkbox label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: .95rem;
}

.bf-form__error {
    display: block;
    color: var(--coral);
    font-size: .82rem;
    margin-top: .3rem;
}

.bf-btn {
    display: block;
    width: 100%;
    padding: .9rem 2rem;
    background: linear-gradient(135deg, var(--coral), #ff8e53);
    color: #fff;
    font-family: var(--ff-fun);
    font-weight: 900;
    font-size: 1.1rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 15px rgba(255,107,107,.4);
    letter-spacing: .03em;
    margin-top: .5rem;
}

.bf-location .bf-btn { display: inline-block; width: auto; margin-top: 1.5rem; }
.bf-album { padding: 5rem 1.5rem; text-align: center; }
.bf-album__text { opacity: .65; margin-bottom: 2rem; }
.bf-timeline__location a { margin-left: .4em; opacity: .7; font-size: .85em; color: inherit; }

.bf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(255,107,107,.5);
}

/* ---------- Footer ---------- */
.bf-footer {
    background: var(--dark);
    color: rgba(255,255,255,.6);
    text-align: center;
    padding: 2.5rem 1.5rem;
    font-size: .9rem;
}

.bf-footer p { margin-bottom: .35rem; }

.bf-footer a {
    color: var(--yellow);
}
.bf-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 13rem;
    margin: 0 auto 1rem;
    color: rgba(255,255,255,.5);
}
.bf-footer__ornament-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor); }
.bf-footer__ornament-line:last-child { background: linear-gradient(to left, transparent, currentColor); }
.bf-footer__ornament-mark { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.bf-footer__signoff { max-width: 24rem; margin: 0 auto 1.5rem; opacity: .8; }
.bf-footer__cal {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    color: #fff !important;
}
.bf-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 500px) {
    /* nowrap + scroll fallback guarantees all 4 units stay on one row down to
       360px, instead of flex-wrap letting them fall to a 2x2 block once
       their min-width no longer fits. */
    .bf-countdown__timer {
        gap: .5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bf-countdown__timer::-webkit-scrollbar { display: none; }
    .bf-countdown__unit {
        padding: .9rem 1.2rem;
        min-width: 60px;
        flex-shrink: 0;
    }

    .bf-countdown__number { font-size: 2rem; }
}

/* Standardized horizontal gutter across every content section on mobile
   (padding-x: 1rem), matching wedding-romantic-bloom's convention — several
   sections here otherwise use a wider desktop-only gutter (1.25rem/1.5rem)
   that just eats into already-limited mobile width. Appended at the very end
   of the file (not folded into an earlier @media block) so equal-specificity
   source order guarantees this wins over each section's own base padding
   rule, which is declared later in the file than this file's other,
   topbar-only 600px media query. */
@media (max-width: 600px) {
.bf-hero,
.bf-countdown,
.bf-details,
.bf-program,
.bf-poem,
.bf-story,
.bf-gallery,
.bf-guest-wall,
.bf-gallery-upload,
.bf-dress-code,
.bf-good-to-know,
.bf-closing,
.bf-location,
.bf-rsvp,
.bf-album,
.bf-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}