/* ============================================================
   Kasaya.ph — Global Decorations
   Dividers, accents, badges, ornamental elements.
   Colors come from var(--t-*) — no hardcoded values.
   ============================================================ */

/* ── Divider base ────────────────────────────────────────────── */
/* inv-rule-dot text is always "✦" in HTML — CSS overrides it   */
.inv-rule-line {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .35;
}

.inv-rule-dot {
    padding: 0 8px;
    font-size: 10px;
    opacity: .75;
}

/* ── Style 1: Floral — ❀ ✦ ❀ ──────────────────────────────── */
.divider-floral {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 16px 0;
    color: var(--t-primary);
}
    .divider-floral .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 10px;
    }

        .divider-floral .inv-rule-dot::before {
            content: "❀ ✦ ❀";
            font-size: var(--div-dot-size, 11px);
        }

/* ── Style 2: Rule — ─ ✦ ─ ─────────────────────────────────── */
.divider-rule {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 12px 0;
    color: var(--t-primary);
}

    .divider-rule .inv-rule-dot {
        font-size: 9px;
        padding: 0 10px;
    }

        .divider-rule .inv-rule-dot::before {
            content: "✦";
            font-size: var(--div-dot-size, 9px);
        }

/* ── Style 3: Line only ─────────────────────────────────────── */
.divider-line {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 16px 0;
    color: var(--t-primary);
}

    .divider-line .inv-rule-dot {
        display: none;
    }

/* ── Style 4: Double ═══ ════ ═══ ──────────────────────────── */
.divider-double {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 16px 0;
}

    .divider-double::before,
    .divider-double::after {
        content: '';
        display: block;
        height: 1px;
        background: var(--t-primary);
        opacity: .35;
    }

    .divider-double .inv-rule-line,
    .divider-double .inv-rule-dot {
        display: none;
    }

/* ── Style 5: Dots — · · · ─────────────────────────────────── */
.divider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-dots .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 10px;
        opacity: .8;
    }

        .divider-dots .inv-rule-dot::before {
            content: "· · · · ·";
            font-size: var(--div-dot-size, 18px);
        }

/* ── Style 6: Diamond — ─◇─ ────────────────────────────────── */
.divider-diamond {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-diamond .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 10px;
        opacity: .8;
    }

        .divider-diamond .inv-rule-dot::before {
            content: "◇";
            font-size: var(--div-dot-size, 15px);
        }

/* ── Style 7: Stars — ✦ ✦ ✦ ─────────────────────────────────── */
.divider-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-stars .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 10px;
    }

        .divider-stars .inv-rule-dot::before {
            content: "✦ ✦ ✦";
            font-size: var(--div-dot-size, 11px);
        }

/* ── Style 8: Leaf — ❧ ─────────────────────────────────────── */
.divider-leaf {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-leaf .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 10px;
        line-height: 1;
    }

        .divider-leaf .inv-rule-dot::before {
            content: "❧";
            font-size: calc(var(--div-dot-size, 10px) * 1.8);
        }

/* ── Style 9: Crown — ♛ ─────────────────────────────────────── */
.divider-crown {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-crown .inv-rule-dot {
        font-size: 0; /* hide hardcoded ✦ */
        padding: 0 12px;
    }

        .divider-crown .inv-rule-dot::before {
            content: "♛";
            font-size: calc(var(--div-dot-size, 10px) * 1.4);
        }

/* ── Style 10: Wave — gradient fade ────────────────────────── */
.divider-wave {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 14px 0;
    color: var(--t-primary);
}

    .divider-wave .inv-rule-line {
        height: 2px;
        background: linear-gradient( 90deg, transparent 0%, var(--t-primary) 20%, var(--t-primary) 80%, transparent 100% );
        opacity: .4;
        border-radius: 2px;
    }

    .divider-wave .inv-rule-dot {
        display: none;
    }

/* ── Accent: floral ─────────────────────────────────────────── */
.accent-floral {
    display: block;
    font-size: 12px;
    letter-spacing: 7px;
    text-align: center;
    margin-bottom: 14px;
}

/* ── Accent: geometric ──────────────────────────────────────── */
.accent-geometric {
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: .4;
    margin: 12px auto;
}

/* ── Badge: square outline ──────────────────────────────────── */
.badge-square {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 1px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Badge: pill ────────────────────────────────────────────── */
.badge-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── Date badge ─────────────────────────────────────────────── */
.inv-date-badge {
    padding: 3px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content; /* ← shrinks to content, like inline-flex */
    align-self: center;
    align-items: center;
    margin: 0 auto;
    border: 1px solid var(--t-secondary);
    opacity: .85;
}

    .inv-date-badge .inv-date-day {
        font-size: 9px;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

    .inv-date-badge .inv-date-full {
        font-size: 16px;
        letter-spacing: .04em;
    }

/* ── Color swatches ─────────────────────────────────────────── */
.inv-swatch-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

/* ── Avatar initials ────────────────────────────────────────── */
.inv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    margin: 0 auto 8px;
}

/* ── RSVP success ───────────────────────────────────────────── */
.inv-rsvp-success {
    text-align: center;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.inv-rsvp-success-icon {
    font-size: 48px;
}

/* ── Scroll hint ────────────────────────────────────────────── */
.inv-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: .4;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.inv-scroll-arrow {
    animation: invBounce 2s ease-in-out infinite;
    font-size: 14px;
}

@keyframes invBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* ── Closing section ─────────────────────────────────────────── */
.inv-closing {
    position: relative;
    overflow: hidden;
    padding: 60px 24px;
}

.inv-closing--animated {
    animation: invClosingFadeIn .8s ease both;
}

@keyframes invClosingFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Floating petals ─────────────────────────────────────────── */
.inv-closing-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.inv-petal {
    position: absolute;
    font-size: 14px;
    opacity: .12;
    color: var(--t-primary);
    animation: invPetalFloat linear infinite;
}

.inv-petal-1 {
    left: 8%;
    animation-duration: 8s;
    animation-delay: 0s;
    top: 10%;
}

.inv-petal-2 {
    left: 25%;
    animation-duration: 10s;
    animation-delay: 2s;
    top: 20%;
}

.inv-petal-3 {
    left: 60%;
    animation-duration: 7s;
    animation-delay: 1s;
    top: 5%;
}

.inv-petal-4 {
    left: 80%;
    animation-duration: 11s;
    animation-delay: 3s;
    top: 30%;
}

.inv-petal-5 {
    left: 45%;
    animation-duration: 9s;
    animation-delay: 1.5s;
    top: 15%;
}

@keyframes invPetalFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: .12;
    }

    50% {
        transform: translateY(40px) rotate(180deg);
        opacity: .06;
    }

    100% {
        transform: translateY(0) rotate(360deg);
        opacity: .12;
    }
}

/* ── Body ────────────────────────────────────────────────────── */
.inv-closing-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ── Accent top ──────────────────────────────────────────────── */
.inv-closing-accent-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-closing-ornament {
    font-size: 16px;
    opacity: .6;
    animation: invOrnamentPulse 3s ease-in-out infinite;
}

.inv-closing-ornament--center {
    font-size: 22px;
    opacity: 1;
    animation-delay: .5s;
}

@keyframes invOrnamentPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ── Verse ───────────────────────────────────────────────────── */
.inv-closing-verse-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.inv-closing-verse {
    font-style: italic;
    max-width: 300px;
    text-align: center;
    line-height: 1.85;
    opacity: .9;
    color: var(--t-body-text);
    margin: 0;
}

.inv-closing-ref {
    margin: 0;
    letter-spacing: .04em;
}

/* ── Divider ─────────────────────────────────────────────────── */
.inv-closing-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 180px;
}

.inv-closing-line {
    flex: 1;
    height: 1px;
    background: var(--t-border);
    opacity: .5;
}

.inv-closing-diamond {
    font-size: 10px;
    color: var(--t-primary);
    animation: invDiamondSpin 6s linear infinite;
}

@keyframes invDiamondSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ── Names ───────────────────────────────────────────────────── */
.inv-closing-names {
    text-align: center;
    margin: 0;
    letter-spacing: .04em;
}

/* ── Date ────────────────────────────────────────────────────── */
.inv-closing-date {
    margin: 0;
    opacity: .65;
    text-align: center;
}

/* ── Hashtag ─────────────────────────────────────────────────── */
.inv-closing-hashtag {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    padding: 5px 16px;
    border: 1px solid;
    border-radius: 20px;
    margin-top: 4px;
}

/* ── Seal ────────────────────────────────────────────────────── */
.inv-closing-seal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    animation: invSealPulse 3s ease-in-out infinite;
}

.inv-closing-seal-inner {
    font-size: 18px;
    animation: invDiamondSpin 8s linear infinite;
}

@keyframes invSealPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--t-primary), 0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(196,139,159,.12);
    }
}