@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Modern+Antiqua&family=Plus+Jakarta+Sans:wght@400;600;700&family=Waterfall&display=swap');

.invitation-body.ii-engine {
    margin: 0;
    background: var(--ii-body-bg);
    font-family: var(--ii-font-body);
    color: var(--ii-text);
    -webkit-font-smoothing: antialiased;
}

.ii-app {
    max-width: 440px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--ii-bg);
    position: relative;
    overflow-x: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,.25);
}

/* Loader */
.ii-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ii-body-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ii-text-light);
    transition: opacity .4s, visibility .4s;
}
.ii-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.ii-loader-ring {
    width: 48px; height: 48px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: var(--ii-primary);
    border-radius: 50%;
    animation: ii-spin .8s linear infinite;
    margin-bottom: 1rem;
}
@keyframes ii-spin { to { transform: rotate(360deg); } }

/* Cover / Opening */
.ii-cover {
    position: fixed;
    inset: 0;
    z-index: 900;
    max-width: 440px;
    margin: 0 auto;
    background: var(--ii-body-bg) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ii-text-light);
    transition: opacity .6s, transform .6s;
}
.ii-cover.hide { opacity: 0; pointer-events: none; transform: translateY(-20px); }
.ii-cover-inner { padding: 2rem 1.5rem; width: 100%; }
.ii-cover-label {
    font-family: var(--ii-font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .75rem;
    opacity: .85;
}
.ii-cover-couple {
    font-family: var(--ii-font-accent);
    font-size: clamp(2.5rem, 12vw, 3.5rem);
    font-weight: 400;
    line-height: 1.2;
    margin: .5rem 0 1.5rem;
}
.ii-cover-couple em { font-style: normal; font-size: .6em; opacity: .8; display: block; margin: .25rem 0; }
.ii-guest-box {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 auto 1.5rem;
    max-width: 320px;
    font-size: .9rem;
}
.ii-guest-name { font-size: 1.15rem; font-weight: 700; margin: .35rem 0; }
.ii-open-btn {
    background: var(--ii-primary);
    color: #fff;
    border: none;
    padding: .85rem 2rem;
    border-radius: 999px;
    font-family: var(--ii-font-body);
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    animation: ii-pulse 2s ease-in-out infinite;
}
@keyframes ii-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.ii-scroll-hint {
    margin-top: 2rem;
    font-size: .75rem;
    opacity: .7;
    animation: ii-bounce 2s ease infinite;
}
.ii-scroll-hint span { display: block; letter-spacing: .15em; text-transform: uppercase; }
@keyframes ii-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Ornaments (Black-Java style) */
.ii-orn {
    position: absolute;
    width: 60px; height: 60px;
    border: 2px solid var(--ii-primary);
    opacity: .7;
}
.ii-orn.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.ii-orn.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.ii-orn.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.ii-orn.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

/* Main */
.ii-main { display: none; padding-bottom: 80px; }
.ii-main.open { display: block; }

/* Hero */
.ii-hero { position: relative; min-height: 280px; overflow: hidden; }
.ii-hero-photo, .ii-carousel-slide {
    position: absolute; inset: 0;
    background: center/cover no-repeat;
}
.ii-carousel { position: absolute; inset: 0; }
.ii-carousel-slide { opacity: 0; transition: opacity 1s; }
.ii-carousel-slide.active { opacity: 1; }
.ii-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    background: linear-gradient(180deg, transparent, var(--ii-bg));
    color: var(--ii-text);
}
.ii-hero-label { letter-spacing: .2em; font-size: .7rem; text-transform: uppercase; opacity: .7; }
.ii-hero-couple {
    font-family: var(--ii-font-heading);
    font-size: 1.75rem;
    margin: .5rem 0 1rem;
}
.ii-countdown {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ii-countdown div {
    background: var(--ii-section-bg);
    border: 1px solid color-mix(in srgb, var(--ii-primary) 30%, transparent);
    border-radius: 10px;
    padding: .5rem .65rem;
    min-width: 58px;
}
.ii-countdown strong { display: block; font-size: 1.25rem; color: var(--ii-primary); }
.ii-countdown small { font-size: .65rem; text-transform: uppercase; opacity: .7; }

/* Sections */
.ii-box { padding: 1.25rem 1rem; }
.ii-box-inner {
    background: var(--ii-section-bg);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    border: 1px solid color-mix(in srgb, var(--ii-primary) 12%, transparent);
}
.ii-title {
    font-family: var(--ii-font-heading);
    text-align: center;
    font-size: 1.35rem;
    margin: 0 0 .75rem;
    color: var(--ii-text);
}
/* divider → see indoinvite-deco.css */
.ii-text { text-align: center; line-height: 1.8; font-size: .95rem; }

/* Couple */
.ii-couple { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ii-couple-card { text-align: center; max-width: 280px; }
.ii-couple-photo {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ii-primary);
    margin: 0 auto .75rem;
}
.ii-nickname { font-family: var(--ii-font-accent); font-size: 1.5rem; color: var(--ii-primary); margin: 0 0 .5rem; }
.ii-amp { font-family: var(--ii-font-accent); font-size: 2rem; color: var(--ii-primary); }
.ii-ig { color: var(--ii-primary); font-size: .85rem; }

/* Events */
.ii-events { display: grid; gap: 1rem; }
.ii-event-card {
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ii-primary) 8%, var(--ii-section-bg));
}
.ii-event-card h3 { color: var(--ii-primary); margin: 0 0 .5rem; font-size: 1rem; }

/* Timeline */
.ii-timeline { position: relative; padding-left: 1.5rem; }
.ii-timeline::before {
    content: '';
    position: absolute; left: 6px; top: 0; bottom: 0;
    width: 2px; background: var(--ii-primary);
    opacity: .3;
}
.ii-timeline-item { position: relative; margin-bottom: 1.25rem; }
.ii-timeline-dot {
    position: absolute; left: -1.5rem; top: .35rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ii-primary);
}

/* Gallery */
.ii-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.ii-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Quote */
.ii-box-quote .ii-quote { font-style: italic; text-align: center; font-size: 1rem; line-height: 1.7; }
.ii-quote-src { text-align: center; margin-top: .75rem; font-size: .85rem; opacity: .7; }

/* Maps link card */
.maps-link-card {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--ii-primary) 40%, transparent);
    background: color-mix(in srgb, var(--ii-primary) 6%, var(--ii-section-bg));
    text-align: center;
    cursor: pointer;
}
.maps-link-icon { font-size: 1.5rem; display: block; margin-bottom: .35rem; }
.maps-link-text small { display: block; font-size: .75rem; opacity: .65; }
.maps-link-url { font-size: .85rem; word-break: break-all; color: var(--ii-primary); }
.maps-link-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; flex-wrap: wrap; }
.maps-copy-btn, .maps-open-btn {
    padding: .5rem 1rem; border-radius: 999px; font-size: .8rem; border: none; cursor: pointer; text-decoration: none;
}
.maps-copy-btn { background: var(--ii-primary); color: #fff; }
.maps-open-btn { background: var(--ii-section-bg); color: var(--ii-primary); border: 1px solid var(--ii-primary); }
.maps-copy-hint { font-size: .7rem; opacity: .55; margin-top: .5rem; }
.maps-link-card.copied .maps-copy-hint { color: #16a34a; opacity: 1; }

/* Video */
.ii-video { margin-top: 1rem; border-radius: 12px; overflow: hidden; }
.ii-video iframe { width: 100%; height: 220px; border: 0; }

/* Forms */
.ii-rsvp-form { display: grid; gap: .65rem; margin-top: 1rem; }
.ii-rsvp-form label { font-size: .8rem; font-weight: 600; }
.ii-rsvp-form input, .ii-rsvp-form select, .ii-rsvp-form textarea {
    width: 100%; padding: .6rem .75rem;
    border: 1px solid #ddd; border-radius: 8px;
    font-family: inherit; font-size: .9rem;
}
.ii-btn {
    display: inline-block;
    background: var(--ii-primary);
    color: #fff !important;
    border: none;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    margin-top: .5rem;
}
.ii-rsvp-list { margin-top: 1.25rem; }
.ii-rsvp-item {
    padding: .75rem;
    border-bottom: 1px solid #eee;
    font-size: .9rem;
}

/* Gift */
.ii-gift-list { display: grid; gap: .75rem; margin-top: 1rem; }
.ii-gift-card {
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    background: color-mix(in srgb, var(--ii-primary) 6%, var(--ii-section-bg));
    cursor: pointer;
    border: 1px dashed color-mix(in srgb, var(--ii-primary) 40%, transparent);
}
.ii-gift-card code { display: block; font-size: 1.1rem; margin: .5rem 0; letter-spacing: .05em; }
.copy-hint { font-size: .75rem; opacity: .6; }

/* Protocol */
.ii-protocol { padding-left: 1.25rem; line-height: 1.8; font-size: .9rem; }

/* Thanks */
.ii-thanks { text-align: center; }
.ii-credit { margin-top: 1.5rem; font-size: .75rem; opacity: .5; }

/* Bottom nav */
.ii-bottom-nav {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 440px;
    display: flex;
    justify-content: space-around;
    background: var(--ii-section-bg);
    border-top: 1px solid color-mix(in srgb, var(--ii-primary) 20%, transparent);
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
    z-index: 800;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.ii-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: .35rem;
    font-size: .6rem;
    color: var(--ii-text);
    opacity: .65;
    cursor: pointer;
    transition: opacity .2s, color .2s;
}
.ii-bottom-nav button svg { width: 22px; height: 22px; }
.ii-bottom-nav button.active,
.ii-bottom-nav button:hover { opacity: 1; color: var(--ii-primary); }
.ii-bottom-nav button.ii-autoscroll-on { color: var(--ii-primary); opacity: 1; }

@media (min-width: 441px) {
    .ii-cover { left: 50%; transform: translateX(-50%); width: 440px; }
    .ii-cover.hide { transform: translateX(-50%) translateY(-20px); }
}