/* =========================================================
   ASHRAF & SYAHIRA — WEDDING CARD
   FULL CSS FOR CURRENT INDEX.PHP
========================================================= */


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    overflow-y:hidden;

    font-family:'Montserrat',sans-serif;

    background:#e9e2de;
    color:#544944;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,
input,
textarea,
select{
    font:inherit;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible{
    outline:none;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
}

.hidden{
    display:none !important;
}

.no-scroll{
    overflow:hidden !important;
}


/* =========================================================
   FONT SYSTEM
========================================================= */

/* SCRIPT / WEDDING FONT */

.welcome-title,
.hero-subtitle,
.groom-name,
.bride-name,
.invite-title,
.family-card h2,
.family-card .couple-name,
.couple-and,
.section-title h2,
.dress-content h2,
.rsvp-section h2,
.wish-section h2,
.footer-brand{
    font-family:'Allura',cursive;
    font-weight:400;
}


/* =========================================================
   MAIN PAGE
========================================================= */

#home{
    position:relative;
    z-index:1;

    display:flex;
    justify-content:center;

    width:100%;
    min-height:100vh;
}

.main-wrapper{
    position:relative;
    z-index:1;

    width:100%;
    max-width:520px;
    min-height:100vh;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #fffdfb 0%,
            #fdf9f6 45%,
            #fffdfb 100%
        );

    box-shadow:
        0 0 45px rgba(76,54,46,.10);
}


/* PAPER TEXTURE */

.main-wrapper::before{
    content:"";

    position:absolute;
    z-index:0;
    inset:0;

    pointer-events:none;

    background:
        url("../assets/images/paper-texture.webp")
        center top / cover repeat-y;

    opacity:.045;
}


/* ALL MAIN CONTENT ABOVE BACKGROUND */

.main-wrapper > section,
.main-wrapper > footer,
.main-wrapper > .section-divider,
.main-wrapper > br{
    position:relative;
    z-index:2;
}


/* =========================================================
   BACKGROUND FLORAL
========================================================= */

.background-floral{
    position:absolute;
    z-index:1;

    pointer-events:none;
    user-select:none;

    opacity:.92;
}

.background-floral img{
    width:100%;
    height:auto;
}


/* TOP */

.floral-top-left{
    top:-15px;
    left:-20px;
    width:145px;
}

.floral-top-right{
    top:-15px;
    right:-20px;
    width:145px;
}


/* BOTTOM HERO */

.floral-bottom-left{
    top:500px;
    left:-25px;
    width:135px;
}

.floral-bottom-right{
    top:500px;
    right:-25px;
    width:135px;
}


/* =========================================================
   WELCOME SCREEN
========================================================= */

#welcome{
    position:fixed;
    z-index:10000;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,250,247,.90),
            rgba(252,242,238,.90)
        );
}


/* GLASS DOORS */

.welcome-panel{
    position:absolute;
    z-index:1;

    top:0;
    bottom:0;

    width:50%;

    background:
        rgba(255,255,255,.45);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:
        transform 1.1s cubic-bezier(.76,0,.24,1);
}

.welcome-panel.left{
    left:0;

    border-right:
        1px solid rgba(181,145,132,.18);
}

.welcome-panel.right{
    right:0;

    border-left:
        1px solid rgba(181,145,132,.18);
}


/* CENTER */

.welcome-center{
    position:absolute;
    z-index:5;
    inset:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:30px;
    text-align:center;
}

.center-line{
    position:absolute;
    z-index:0;

    top:0;
    bottom:0;
    left:50%;

    width:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            transparent,
            rgba(186,145,130,.18),
            transparent
        );
}


/* LOGO */

.welcome-logo{
    position:relative;
    z-index:5;

    width:155px;
    height:155px;

    object-fit:contain;

    cursor:pointer;

    animation:
        logoFloat 3s ease-in-out infinite;

    transition:
        transform .3s ease,
        opacity .25s ease;
}

.welcome-title{
    position:relative;
    z-index:5;

    margin-top:18px;

    font-size:46px;
    line-height:1;

    color:#b56f77;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.welcome-subtitle{
    position:relative;
    z-index:5;

    margin-top:13px;

    font-family:'Montserrat',sans-serif;
    font-size:10px;
    font-weight:500;

    line-height:1.6;
    letter-spacing:3px;

    text-transform:uppercase;

    color:#8a7770;

    animation:
        textBlink 1.5s ease-in-out infinite;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


@keyframes logoFloat{

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

    50%{
        transform:translateY(-8px);
    }
}

@keyframes textBlink{

    0%,
    100%{
        opacity:.35;
    }

    50%{
        opacity:1;
    }
}


/* OPENING */

#welcome.opening .left{
    transform:translateX(-110%);
}

#welcome.opening .right{
    transform:translateX(110%);
}

#welcome.opening .welcome-logo{
    opacity:0;
    transform:scale(.85);
    animation:none;
}

#welcome.opening .welcome-title,
#welcome.opening .welcome-subtitle{
    opacity:0;
    transform:translateY(10px);
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    z-index:2;

    min-height:650px;

    padding:
        28px
        28px
        55px;

    text-align:center;
}


/* BISMILLAH */

.bismillah{
    position:relative;
    z-index:3;
}

.bismillah img{
    width:175px;
    height:auto;

    margin:
        20px
        auto
        10px;
}


/* UNDANGAN */

.hero-title{
    position:relative;
    z-index:3;

    margin-top:8px;

    font-size:28px;
    line-height:1;

    color:#786c67;
}


/* WALIMATUL URUS */

.hero-subtitle{
    position:relative;
    z-index:3;

    margin-top:3px;
    margin-bottom:15px;

    font-size:35px;
    line-height:1.1;

    color:#b86b73;
}


/* =========================================================
   COUPLE PHOTO
========================================================= */

.couple-photo{
    position:relative;
    z-index:3;

    display:flex;
    justify-content:center;

    margin-top:8px;
    margin-bottom:8px;
}

.photo-frame{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:260px;
    height:215px;
}

.photo-ring{
    position:relative;
    z-index:2;

    width:185px;
    height:185px;

    padding:3px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #d8b189,
            #fffaf6,
            #d8b189
        );

    box-shadow:
        0 12px 30px rgba(92,62,50,.12);
}

.photo-ring img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border:
        5px solid #fff;

    border-radius:50%;
}


/* FLOWER ON PHOTO */

.floral{
    position:absolute;

    pointer-events:none;
    user-select:none;
}

.floral-right{
    z-index:4;

    right:12px;
    bottom:0;

    width:135px;
    height:auto;
}


/* =========================================================
   SHORT COUPLE NAME
========================================================= */

.hero .couple-name{
    position:relative;
    z-index:4;

    text-align:center;
}

.groom-name,
.bride-name{
    margin:0;

    font-size:45px;
    line-height:.95;

    color:#b86b73;
}

.groom-name{
    margin-top:-4px;
}

.and{
    margin:
        -4px
        0
        -3px;

    font-size:34px;
    line-height:1;

    color:#a27a6e;
}

.bride-name{
    margin-bottom:16px;
}


/* =========================================================
   HERO EVENT DATE
========================================================= */

.hero > .event-date{
    position:relative;
    z-index:3;

    margin-top:34px;
}

.hero > .event-date .event-date,
#eventDate{
    margin:0;

    font-family:'Montserrat',sans-serif;

    font-size:12px;
    font-weight:600;

    line-height:1.6;
    letter-spacing:2px;

    text-transform:uppercase;

    color:#665a55;
}


/* =========================================================
   QUOTE
========================================================= */

.quote{
    position:relative;
    z-index:3;

    max-width:360px;

    margin:
        14px
        auto
        0;
}

.quote p{
    font-size:12px;
    font-weight:400;

    line-height:1.8;

    color:#645955;
}

.quote span{
    display:block;

    margin-top:5px;

    font-size:11px;
    font-weight:600;

    color:#8f736a;
}


/* =========================================================
   SECTION DIVIDER
========================================================= */

.section-divider{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin:
        10px
        auto
        20px;

    padding:
        0
        28px;
}

.section-divider img{
    width:100%;
    max-width:275px;
    height:auto;

    object-fit:contain;
}


/* =========================================================
   INVITATION SECTION
========================================================= */

.invitation-section{
    position:relative;
    z-index:2;

    padding:
        15px
        28px
        45px;

    text-align:center;
}

.family-section{
    position:relative;
    z-index:2;

    width:100%;
}

.invite-label{
    margin-top:5px;
    font-size:17px;
    line-height:1.1;

    color:#6d5a52;
}

.invite-title{
    margin:
        5px
        0
        20px;

    font-size:44px;
    line-height:1;

    color:#b86b73;
}


/* =========================================================
   FAMILY CARD
========================================================= */

.family-card{
    position:relative;
    z-index:3;

    width:100%;

    margin:
        15px
        auto;

    padding:
        24px
        22px;

    overflow:hidden;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid rgba(216,192,183,.55);

    border-radius:22px;

    box-shadow:
        0 8px 24px rgba(80,54,44,.055);

    text-align:center;
}

.family-card::after{
    content:"";

    position:absolute;
    z-index:0;

    right:-8px;
    bottom:-8px;

    width:95px;
    height:95px;

    background:
        url("../assets/images/floral-bottom-right.webp")
        right bottom / contain no-repeat;

    opacity:.20;

    pointer-events:none;
}

.family-side{
    position:relative;
    z-index:2;

    width:100%;
}

.family-card h4{
    font-size:10px;
    line-height:1.1;

    color:#6b4f45;
}

.family-card h3{
    font-size:15px;
    line-height:1.25;

    color:#a8666e;
}


/* FULL COUPLE NAMES */

.family-card .couple-name{
    position:relative;
    z-index:2;

    margin:0;

    font-size:36px;
    line-height:1.05;

    color:#b86b73;
}

.family-card .bin,
.bin{
    position:relative;
    z-index:2;

    margin:
        4px
        0
        8px;

    font-family:'Montserrat',sans-serif;

    font-size:10px;
    font-weight:500;

    line-height:1.5;
    letter-spacing:1px;

    color:#796a64;
}

.couple-and{
    position:relative;
    z-index:2;

    margin:
        4px
        0;

    font-size:31px;
    line-height:1;

    color:#9c766a;
}


/* INVITATION FLOWER */

.family-vine{
    position:absolute;
    z-index:2;
    width:150px;
    height:auto;
    margin:-140px -50px 0
    
}


/* INVITATION TEXT */

.invite-text{
    position:relative;
    z-index:3;

    max-width:390px;

    margin:
        0
        auto
        22px;

    font-family:'Montserrat',sans-serif;

    font-size:12px;

    line-height:1.9;

    color:#625651;
}

.invite-text b,
.invite-text strong{
    font-weight:600;

    color:#9b6667;
}


/* =========================================================
   GENERAL SECTION TITLE
========================================================= */

.section-title{
    position:relative;
    z-index:2;

    margin-bottom:28px;

    text-align:center;
}

.section-title h2{
    margin:0;

    font-size:43px;
    line-height:1;

    color:#b86b73;
}

.section-title p{
    margin-top:9px;

    font-family:'Montserrat',sans-serif;

    font-size:9px;
    font-weight:500;

    letter-spacing:2.4px;
    line-height:1.5;

    text-transform:uppercase;

    color:#8c7b74;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-section{
    position:relative;
    z-index:2;

    padding:
        25px
        28px
        55px;

    text-align:center;
}

.countdown{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    width:100%;
}

.count-item{
    min-width:0;

    padding:
        18px
        5px;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid rgba(221,200,191,.55);

    border-radius:18px;

    box-shadow:
        0 8px 22px rgba(80,54,44,.06);
}

.count-number{
    font-size:37px;
    font-weight:400;

    line-height:1;

    color:#b86b73;
}

.count-label{
    margin-top:7px;

    font-size:9px;
    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#80716b;
}


/* =========================================================
   EVENT INFORMATION
========================================================= */

.main-wrapper > .event-info{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    gap:12px;

    width:100%;

    margin:0;

    padding:
        0
        28px
        18px;
}

.info-card{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:15px;

    min-height:90px;

    padding:
        17px
        18px;

    overflow:hidden;

    background:#fff;

    border:
        1px solid rgba(224,207,199,.65);

    border-radius:20px;

    box-shadow:
        0 6px 18px rgba(72,50,42,.05);
}

.info-card::after{
    content:"";

    position:absolute;
    z-index:0;

    right:-5px;
    bottom:-8px;

    width:88px;
    height:88px;

    background:
        url("../assets/images/floral-bottom-right.webp")
        right bottom / contain no-repeat;

    opacity:.20;

    pointer-events:none;
}

.info-icon{
    position:relative;
    z-index:2;

    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:50px;
    height:50px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #fff8f6,
            #f8ece8
        );

    color:#b86b73;

    font-size:20px;
}

.info-content{
    position:relative;
    z-index:2;

    flex:1;
    min-width:0;

    text-align:left;
}

.info-content p{
    margin:0;

    font-size:11px;
    font-weight:500;

    line-height:1.6;

    color:#665a55;

    overflow-wrap:anywhere;
}


/* =========================================================
   DRESS CODE
========================================================= */

.dress-section{
    position:relative;
    z-index:2;

    padding:
        0
        28px
        45px;
}

.dress-card{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:15px;

    width:100%;
    min-height:100px;

    padding:
        18px;

    overflow:hidden;

    background:#fff;

    border:
        1px solid rgba(224,207,199,.65);

    border-radius:20px;

    box-shadow:
        0 6px 18px rgba(72,50,42,.05);
}

.dress-card::after{
    content:"";

    position:absolute;
    z-index:0;

    right:-5px;
    bottom:-8px;

    width:95px;
    height:95px;

    background:
        url("../assets/images/floral-bottom-right.webp")
        right bottom / contain no-repeat;

    opacity:.22;

    pointer-events:none;
}

.dress-icon{
    position:relative;
    z-index:2;

    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:50px;
    height:50px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #fff8f6,
            #f8ece8
        );

    color:#b86b73;

    font-size:20px;
}

.dress-content{
    position:relative;
    z-index:2;

    flex:1;
    min-width:0;

    padding-right:42px;

    text-align:left;
}

.dress-content h2{
    margin-bottom:3px;

    font-size:30px;
    line-height:1;

    color:#b86b73;
}

.dress-text{
    font-size:11px;

    line-height:1.65;

    color:#665a55;
}

.dress-text b,
.dress-text strong{
    color:#a85f67;
    font-weight:600;
}

/* =========================================================
   TENTATIVE CARD
========================================================= */

.tentative-section{
    position:relative;
    z-index:2;

    padding:30px 18px 55px;
}


/* CARD */

.tentative-list{
    position:relative;

    width:100%;
    max-width:330px;

    margin:25px auto 0;
    padding:28px 20px 18px;

    background:rgba(255,255,255,.82);

    border:1px solid rgba(190,150,140,.25);
    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(110,75,65,.07);

    overflow:hidden;
}


/* subtle flower glow dalam card */

.tentative-list::after{
    content:"";

    position:absolute;
    width:130px;
    height:auto;

    right:-50px;
    bottom:-55px;

    border-radius:50%;

    background:
        url("../assets/images/floral-bottom-right.webp")
        right bottom / contain no-repeat;

    pointer-events:none;
}



/* EACH ROW */

.tentative-row{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:62px 42px 1fr;

    align-items:stretch;

    min-height:78px;
}


/* TIME */

.tentative-time{
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;

    padding:10px 10px 0 0;

    font-family:'Montserrat',sans-serif;

    font-size:8px;
    font-weight:600;

    letter-spacing:.2px;

    color:#8c7168;
}


/* CENTER LINE */

.tentative-line{
    position:relative;

    display:flex;
    justify-content:center;
}


/* vertical line */

.tentative-line::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:1px;

    transform:translateX(-50%);

    background:rgba(190,110,120,.25);
}


/* start line */

.tentative-row:first-child .tentative-line::before{
    top:16px;
}


/* stop line */

.tentative-row:last-child .tentative-line::before{
    bottom:calc(100% - 17px);
}


/* ICON */

.tentative-icon{
    position:relative;
    z-index:3;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(190,110,120,.35);

    background:#fffaf8;

    color:#c87982;

    box-shadow:
        0 3px 10px rgba(150,90,100,.08);
}


.tentative-icon i{
    font-size:11px;
}


/* TITLE */

.tentative-info{
    display:flex;
    align-items:flex-start;
    padding:5px 0 15px 12px;
    font-size:15px;
    font-weight:400;
    line-height:1.15;
    color:#79594f;
}


/* remove extra space last row */

.tentative-row:last-child{
    min-height:52px;
}

.tentative-row:last-child .tentative-info{
    padding-bottom:0;
}


/* MOBILE */

@media(max-width:390px){

    .tentative-section{
        padding-left:15px;
        padding-right:15px;
    }

    .tentative-list{
        width:100%;
        max-width:330px;

        padding:
            26px
            15px
            20px;
    }

    .tentative-row{
        grid-template-columns:60px 40px 1fr;
    }

    .tentative-info{
        font-size:15px;
    }
}

/* =========================================================
   RSVP SECTION
========================================================= */

.rsvp-section{
    position:relative;
    z-index:2;

    padding:
        30px
        28px
        55px;

    text-align:center;
}

.rsvp-section > h2{
    margin-bottom:8px;

    font-size:43px;
    line-height:1;

    color:#b86b73;
}

.rsvp-desc{
    max-width:360px;

    margin:
        0
        auto
        22px;

    font-size:11px;

    line-height:1.8;

    color:#6c5f59;
}

.rsvp-deadline {
    text-align: center;
}

.rsvp-deadline p{
    font-size:10px;
    color:#6c5f59;
    
}

.rsvp-desc b,
.rsvp-desc strong{
    color:#b86b73;
    font-weight:600;
}


/* RSVP BUTTON */

.rsvp-btn,
.rsvp-button{
    width:100%;
    max-width:340px;

    min-height:62px;

    margin:auto;

    padding:
        12px
        22px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    border:none;
    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #c97c84,
            #b86b73
        );

    color:#fff;

    cursor:pointer;

    box-shadow:
        0 10px 24px rgba(184,107,115,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.rsvp-btn:active,
.rsvp-button:active{
    transform:scale(.98);
}

.rsvp-btn > i,
.rsvp-button > i{
    flex-shrink:0;

    font-size:21px;
}

.rsvp-btn > div,
.rsvp-btn > span,
.rsvp-button > div,
.rsvp-button > span{
    display:flex;
    flex-direction:column;

    text-align:left;
}

.rsvp-btn strong,
.rsvp-btn b,
.rsvp-button strong,
.rsvp-button b{
    font-size:12px;
    font-weight:600;

    letter-spacing:.7px;
}

.rsvp-btn small,
.rsvp-button small{
    margin-top:2px;

    font-size:9px;

    opacity:.88;
}


/* =========================================================
   ATTENDANCE
========================================================= */

.attendance{
    margin-top:45px;
}

.attendance h3{
    margin-bottom:18px;
    font-size:20px;
    line-height:1;
    color:#9f6c67;
}

.attendance-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}

.attendance-card{
    padding:
        18px
        10px;

    background:#fff;

    border:
        1px solid rgba(224,207,199,.65);

    border-radius:19px;

    box-shadow:
        0 7px 20px rgba(72,50,42,.05);
}

.attendance-card i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:45px;
    height:45px;

    margin:
        0
        auto
        9px;

    border-radius:50%;

    background:#faf4f1;

    font-size:17px;
}

.attendance-card.hadir i{
    color:#7e9b76;
}

.attendance-card.tidak i{
    color:#bd7373;
}

.attendance-card span{
    display:block;
    font-size:38px;
    line-height:1;
    color:#704f45;
}

.attendance-card small{
    display:block;
    margin-top:4px;
    font-size:8px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:#82736d;
}


/* =========================================================
   WISH SECTION
========================================================= */

.wish-section{
    position:relative;
    z-index:2;

    padding:
        25px
        28px
        80px;

    text-align:center;
}

.wish-section > h2{
    font-size:43px;
    line-height:1;

    color:#b86b73;
}

.wish-section > p{
    max-width:350px;

    margin:
        8px
        auto
        25px;

    font-size:11px;

    line-height:1.8;

    color:#6e625c;
}

.wish-container{
    display:flex;
    flex-direction:column;

    gap:12px;

    width:100%;
}

.wish-card{
    position:relative;
    z-index:2;

    width:100%;

    padding:
        20px
        22px;

    overflow:hidden;

    text-align:left;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fdfaf8
        );

    border:
        1px solid rgba(224,207,199,.65);

    border-radius:20px;

    box-shadow:
        0 7px 20px rgba(72,50,42,.05);
}

.wish-card::before{
    content:"❝";

    position:absolute;
    z-index:0;

    top:0;
    right:13px;

    font-family:Georgia,serif;

    font-size:55px;

    color:rgba(184,107,115,.08);
}

.wish-card::after{
    content:"";

    position:absolute;
    z-index:0;

    right:-4px;
    bottom:-4px;

    width:70px;
    height:70px;

    background:
        url("../assets/images/floral-bottom-right.webp")
        right bottom / contain no-repeat;

    opacity:.15;
}

.wish-text{
    position:relative;
    z-index:2;

    font-size:15px;

    line-height:1.8;

    color:#625650;
}

.wish-name{
    position:relative;
    z-index:2;
    margin-top:11px;
    font-size:10px;
    line-height:1;
    color:#b86b73;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
    position:relative;
    z-index:2;

    padding:
        45px
        25px
        120px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,253,251,0),
            rgba(244,234,228,.80)
        );
}

.footer-divider{
    width:55px;
    height:1px;

    margin:
        0
        auto
        18px;

    background:#c9aaa0;
}

.footer-made{
    margin-bottom:4px;

    font-size:8px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#9b8981;
}

.footer-brand{
    display:inline-block;

    font-size:25px;
    line-height:1.1;

    text-decoration:none;

    color:#a8646c;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav{
    position:fixed;
    z-index:8000;

    left:50%;
    bottom:
        max(
            12px,
            env(safe-area-inset-bottom)
        );

    transform:
        translate(-50%,130%);

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    width:calc(100% - 28px);
    max-width:490px;
    height:68px;

    padding:6px;

    overflow:hidden;

    background:
        rgba(255,255,255,.93);

    border:
        1px solid rgba(224,207,199,.70);

    border-radius:38px;

    box-shadow:
        0 10px 32px rgba(67,46,39,.13);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    opacity:0;
    pointer-events:none;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
}

.bottom-nav.show{
    transform:
        translate(-50%,0);

    opacity:1;
    pointer-events:auto;
}

.bottom-nav button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:4px;

    min-width:0;

    border:none;
    border-radius:25px;

    background:transparent;

    color:#936f64;

    cursor:pointer;
}

.bottom-nav button:active{
    background:#f9efeb;
}

.bottom-nav i{
    font-size:18px;
}

.bottom-nav span{
    font-size:8px;
    font-weight:600;

    letter-spacing:.3px;
}


/* =========================================================
   MODAL BACKDROP
========================================================= */

.modal{
    position:fixed;
    z-index:9000;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        18px
        14px;

    background:
        rgba(48,36,32,.48);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* =========================================================
   MODAL SHEET
========================================================= */

.modal-sheet{
    position:relative;
    z-index:1;

    width:100%;
    max-width:470px;

    max-height:
        calc(100dvh - 36px);

    padding:
        28px
        22px
        24px;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    background:#fffdfb;

    border:
        1px solid rgba(229,214,206,.8);

    border-radius:26px;

    box-shadow:
        0 24px 60px rgba(45,30,25,.22);

    animation:
        modalPop .28s ease;
}

@keyframes modalPop{

    from{
        opacity:0;
        transform:
            translateY(12px)
            scale(.97);
    }

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


/* MODAL HANDLE */

.modal-sheet::before{
    content:"";

    position:absolute;

    top:9px;
    left:50%;

    width:45px;
    height:4px;

    transform:translateX(-50%);

    border-radius:20px;

    background:#dccbc4;
}


/* SCROLLBAR */

.modal-sheet::-webkit-scrollbar{
    width:4px;
}

.modal-sheet::-webkit-scrollbar-thumb{
    border-radius:10px;

    background:#d4bdb4;
}


/* CLOSE */

.calendar-close,
.modal-close{
    position:absolute;
    z-index:10;

    top:15px;
    right:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border:
        1px solid rgba(222,205,197,.7);

    border-radius:50%;

    background:#fff;

    color:#ad6870;

    font-size:15px;

    cursor:pointer;

    box-shadow:
        0 4px 12px rgba(65,44,37,.06);
}


/* MODAL TITLE */

.contact-title{
    margin:13px 45px 14px;
    text-align:center;
    font-size:25px;
    line-height:1;
    color:#b86b73;
}

.modal-sheet hr{
    height:1px;
    border:0;
    background:#eee1dc;
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar-box{
    width:100%;
    padding:16px 14px 18px;
    background:#fff;
    border:1px solid #eaded9;
    border-radius:19px;
}

/* MONTH */
.calendar-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
}

#calendarMonth{
    font-size:13px;
    font-weight:600;
    color:#665a55;
    text-align:center;
}


/* =========================================================
   WEEKDAY
========================================================= */

.calendar-weekdays{
    width:100%;
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    align-items:center;
    margin-bottom:8px;
}

.calendar-weekdays span{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;

    font-size:9px;
    font-weight:600;
    line-height:1;
    color:#9b8b84;

    text-align:center;
}


/* =========================================================
   DATE GRID
========================================================= */

.calendar-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    grid-auto-rows:30px;
    align-items:center;
}

.calendar-day{
    width:30px;
    height:30px;

    justify-self:center;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
    font-weight:500;
    line-height:1;

    color:#665a55;
    text-align:center;

    border-radius:50%;
}

.calendar-day.empty{
    visibility:hidden;
}


/* TARIKH MAJLIS */
.calendar-day.event-day{
    background:#cb7b83;
    color:#fff;
    font-weight:700;

    box-shadow:
        0 5px 12px rgba(203,123,131,.25);
}


/* =========================================================
   EVENT INFO
========================================================= */

.event-info{
    width:100%;
    text-align:center;
    padding:16px 5px 12px;
}

.event-info h3{
    margin:0;
    font-family: 'Allura', cursive;
    font-size:28px;
    font-weight:500;
    color:#c8757e;
}

.event-info p{
    margin:0;
    font-size:10px;
    color:#8a7d77;
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media(max-width:380px){

    .calendar-box{
        padding:14px 10px 16px;
    }

    .calendar-weekdays span{
        font-size:8px;
    }

    .calendar-grid{
        grid-auto-rows:28px;
    }

    .calendar-day{
        width:28px;
        height:28px;
        font-size:9px;
    }
}


/* =========================================================
   CALENDAR / LOCATION BUTTON
========================================================= */

.calendar-actions,
.location-buttons{
    display:flex;
    flex-direction:column;

    gap:10px;

    margin-top:18px;
}

.calendar-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    width:100%;
    min-height:48px;

    padding:
        12px
        16px;

    border:none;
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #c77b83,
            #b86b73
        );

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:10px;
    font-weight:600;

    line-height:1.4;

    text-align:center;
    text-decoration:none;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(184,107,115,.20);
}

.calendar-btn i{
    flex-shrink:0;

    font-size:17px;
}


/* =========================================================
   RSVP FORM
========================================================= */

#rsvpForm{
    width:100%;
}

#rsvpForm input,
#rsvpForm textarea{
    display:block;

    width:100%;

    margin-bottom:12px;

    padding:
        14px
        15px;

    border:
        1px solid #e5d8d2;

    border-radius:15px;

    background:#fff;

    color:#5e514c;

    font-family:'Montserrat',sans-serif;

    font-size:12px;

    box-shadow:
        0 4px 12px rgba(70,49,42,.025);

    outline:none;
}

#rsvpForm input{
    min-height:50px;
}

#rsvpForm textarea{
    min-height:110px;

    resize:none;

    line-height:1.7;
}

#rsvpForm input::placeholder,
#rsvpForm textarea::placeholder{
    color:#a5948c;
}

#rsvpForm input:focus,
#rsvpForm textarea:focus{
    border-color:#c9978f;

    box-shadow:
        0 0 0 3px rgba(190,127,119,.09);
}


/* =========================================================
   ATTENDANCE FIELDS
========================================================= */

#attendanceFields{
    display:none;

    width:100%;

    margin:0;
}

#attendanceFields.show{
    display:block;
}


/* =========================================================
   CHOICES.JS
========================================================= */

.choices{
    width:100%;

    margin-bottom:12px;
}

.choices__inner{
    width:100% !important;
    min-height:50px !important;

    padding:
        13px
        15px !important;

    border:
        1px solid #e5d8d2 !important;

    border-radius:
        15px !important;

    background:
        #fff !important;

    font-family:
        'Montserrat',
        sans-serif !important;

    font-size:
        12px !important;

    color:
        #5e514c !important;

    box-shadow:
        0 4px 12px rgba(70,49,42,.025);
}

.choices__list--single{
    padding:0 !important;
}

.choices__list--single
.choices__item{
    color:#5e514c !important;
}

.choices__placeholder,
.choices__item--placeholder{
    color:#a5948c !important;

    opacity:1 !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded]{
    z-index:9500 !important;

    margin-top:5px !important;

    overflow:hidden;

    border:
        1px solid #e5d8d2 !important;

    border-radius:
        14px !important;

    background:
        #fff !important;

    box-shadow:
        0 10px 25px rgba(65,45,38,.10);
}

.choices__item--choice{
    padding:
        12px
        14px !important;

    font-size:
        11px !important;

    color:
        #5e514c !important;
}

.choices__item--choice.is-highlighted{
    background:
        #faf2ef !important;
}

.choices.is-focused
.choices__inner,
.choices.is-open
.choices__inner{
    border-color:
        #c9978f !important;

    box-shadow:
        0 0 0 3px rgba(190,127,119,.09);
}


/* =========================================================
   RSVP SUBMIT
========================================================= */

.btn-submit{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    width:100%;
    min-height:52px;

    margin-top:5px;

    border:none;
    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #c97c84,
            #b86b73
        );

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:12px;
    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(184,107,115,.22);
}

.btn-submit:active{
    transform:scale(.985);
}

.btn-submit:disabled{
    opacity:.65;
    cursor:not-allowed;
}

#rsvpPopupDescription{
    line-height:1.7;

    color:#746660;
}

#msg{
    margin-top:10px;

    text-align:center;

    font-size:11px;
    font-weight:600;

    color:#78936f;
}


/* =========================================================
   LOCATION POPUP
========================================================= */

.location-pin{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:18px auto 12px;
}

.location-pin-icon{
    font-size:36px;
    line-height:1;
    color:#c97982;
    animation:locationBounce 2s ease-in-out infinite;
}

.location-pin-shadow{
    display:block;
    width:30px;
    height:7px;
    margin-top:5px;
    border-radius:50%;
    background:rgba(201,121,130,.17);
}

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

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


/* MAP */

.location-map{
    position:relative;

    width:100%;
    height:145px;

    margin:0 auto 16px;

    overflow:hidden;

    border-radius:18px;
    border:1px solid #eaded9;

    background:#f8f3f1;
}

.location-map iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}


/* PIN ATAS MAP */

.map-pin{
    position:absolute;
    z-index:5;

    top:50%;
    left:50%;

    transform:translate(-50%,-100%);

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:#c97982;
    font-size:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.18);

    pointer-events:none;
}


/* VENUE */

.location-details{
    text-align:center;
    padding:0 8px;
    margin-bottom:17px;
}

.location-details h3{
    margin:0 0 6px;
    font-size:20px;
    font-weight:400;

    color:#c97982;
}

.location-details p{
    margin:0;

    font-size:10px;
    line-height:1.5;

    color:#665a55;
}


/* BUTTON */

.location-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.location-btn{
    width:100%;
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:15px;

    background:#c97982;
    color:#fff;

    font-size:10px;
    font-weight:600;

    text-decoration:none;

    box-shadow:0 7px 18px rgba(201,121,130,.18);
}

.location-btn i{
    font-size:15px;
}


/* =========================================================
   CONTACT MODAL
========================================================= */

#contactList{
    display:flex;
    flex-direction:column;

    gap:0;

    width:100%;

    margin-top:10px;
}

.contact-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    width:100%;
    padding:15px 3px;
    border-bottom:1px solid #eee2dd;
}

.contact-item:last-child{
    border-bottom:0;
}

.contact-item > span{
    flex:1;
    min-width:0;
    font-size:15px;
    line-height:1.1;
    color:#8f6258;
}

.contact-actions{
    flex-shrink:0;

    display:flex;

    gap:8px;
}

.contact-actions a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#f8efec;

    color:#b86b73;

    text-decoration:none;
}

.contact-actions a:last-child{
    background:#eaf8ef;

    color:#25a95a;
}


/* =========================================================
   SWEETALERT
========================================================= */

.swal2-container{
    z-index:12000 !important;
}

.wedding-alert{
    width:
        min(90vw,390px) !important;

    padding:
        20px !important;

    border:
        1px solid rgba(222,205,197,.65) !important;

    border-radius:
        25px !important;

    background:
        #fffdfb !important;

    box-shadow:
        0 22px 55px rgba(72,49,41,.18) !important;
}

.wedding-alert-title{
    padding-top:
        8px !important;

    font-family:
        'Allura',
        cursive !important;

    font-size:
        37px !important;

    font-weight:
        400 !important;

    color:
        #b86b73 !important;
}

.swal-message{
    font-family:
        'Montserrat',
        sans-serif;

    font-size:11px;

    line-height:1.8;

    color:#6c5f59;
}

.wedding-alert-btn{
    min-width:100px;

    border-radius:
        50px !important;

    font-family:
        'Montserrat',
        sans-serif !important;

    font-size:
        11px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   CONFETTI / PETALS
========================================================= */

#confetti-container{
    position:fixed;
    z-index:7000;

    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.petal{
    position:absolute;

    top:-60px;

    pointer-events:none;

    animation:
        petalFall linear forwards;
}

.petal img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none;
}

@keyframes petalFall{

    0%{
        transform:
            translate3d(0,-60px,0)
            rotate(0deg);

        opacity:0;
    }

    8%{
        opacity:1;
    }

    90%{
        opacity:.85;
    }

    100%{
        transform:
            translate3d(
                var(--drift),
                calc(100vh + 100px),
                0
            )
            rotate(var(--rotate));

        opacity:0;
    }
}


/* =========================================================
   MUSIC PLAYER
========================================================= */

.music-player{
    position:fixed;
    z-index:7500;

    top:
        max(
            10px,
            env(safe-area-inset-top)
        );

    left:50%;

    transform:translateX(-50%);
}

.music-player[hidden]{
    display:none !important;
}

.music-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:32px;

    padding:0;

    border:
        1px solid rgba(220,202,194,.65);

    border-radius:50px;

    background:
        rgba(255,253,251,.90);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 5px 18px rgba(65,44,34,.09);

    cursor:pointer;
}

.music-bars{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:2px;
}

.music-bars i{
    display:block;

    width:2px;
    height:7px;

    border-radius:4px;

    background:#986d61;
}

.music-toggle.playing
.music-bars i:nth-child(1){
    animation:musicBar .7s infinite alternate;
}

.music-toggle.playing
.music-bars i:nth-child(2){
    animation:musicBar .5s infinite alternate;
}

.music-toggle.playing
.music-bars i:nth-child(3){
    animation:musicBar .9s infinite alternate;
}

.music-toggle.playing
.music-bars i:nth-child(4){
    animation:musicBar .6s infinite alternate;
}

.music-toggle.playing
.music-bars i:nth-child(5){
    animation:musicBar .8s infinite alternate;
}

@keyframes musicBar{

    from{
        height:4px;
    }

    to{
        height:15px;
    }
}


/* =========================================================
   MOBILE — 520PX
========================================================= */

@media(max-width:520px){

    body{
        background:#fffdfb;
    }

    .main-wrapper{
        max-width:none;

        box-shadow:none;
    }


    /* FLORAL */

    .floral-top-left{
        top:-10px;
        left:-17px;

        width:125px;
    }

    .floral-top-right{
        top:-10px;
        right:-17px;

        width:125px;
    }

    .floral-bottom-left{
        top:500px;
        left:-20px;

        width:115px;
    }

    .floral-bottom-right{
        top:500px;
        right:-20px;

        width:115px;
    }


    /* HERO */

    .hero{
        min-height:630px;

        padding:
            25px
            22px
            45px;
    }

    .bismillah img{
        width:160px;

        margin-top:20px;
    }

    .hero-title{
        font-size:26px;
    }

    .hero-subtitle{
        font-size:33px;
    }

    .photo-frame{
        width:235px;
        height:205px;
    }

    .photo-ring{
        width:172px;
        height:172px;
    }

    .floral-right{
        right:8px;
        bottom:0;

        width:122px;
    }

    .groom-name,
    .bride-name{
        font-size:42px;
    }

    .and{
        font-size:31px;
    }


    /* SECTIONS */

    .invitation-section,
    .countdown-section,
    .main-wrapper > .event-info,
    .dress-section,
    .rsvp-section,
    .wish-section{
        padding-left:22px;
        padding-right:22px;
    }

    .tentative-section{
        padding-left:28px;
        padding-right:28px;
    }

    .section-divider{
        padding-left:22px;
        padding-right:22px;
    }


    /* FAMILY */

    .invite-title{
        font-size:41px;
    }

    .family-card .couple-name{
        font-size:34px;
    }


    /* TITLE */

    .section-title h2,
    .rsvp-section > h2,
    .wish-section > h2{
        font-size:40px;
    }


    /* NAV */

    .bottom-nav{
        width:
            calc(100% - 20px);

        max-width:500px;
    }
}


/* =========================================================
   IPHONE SE / SMALL PHONE
========================================================= */

@media(max-width:390px){

    .welcome-logo{
        width:140px;
        height:140px;
    }

    .welcome-title{
        font-size:41px;
    }


    /* HERO */

    .hero{
        min-height:610px;

        padding-left:18px;
        padding-right:18px;
    }

    .bismillah img{
        width:150px;
    }

    .photo-frame{
        width:220px;
        height:195px;
    }

    .photo-ring{
        width:162px;
        height:162px;
    }

    .floral-right{
        width:112px;
    }

    .groom-name,
    .bride-name{
        font-size:39px;
    }

    .hero > .event-date{
        margin-top:28px;
    }


    /* SECTIONS */

    .invitation-section,
    .countdown-section,
    .main-wrapper > .event-info,
    .dress-section,
    .rsvp-section,
    .wish-section{
        padding-left:18px;
        padding-right:18px;
    }

    .tentative-section{
        padding-left:22px;
        padding-right:22px;
    }

    .section-divider{
        padding-left:18px;
        padding-right:18px;
    }


    /* COUNTDOWN */

    .countdown{
        gap:6px;
    }

    .count-item{
        padding:
            15px
            3px;

        border-radius:15px;
    }

    .count-number{
        font-size:32px;
    }

    .count-label{
        font-size:8px;
    }


    /* TENTATIVE */

    .tentative-row{
        grid-template-columns:
            70px
            24px
            1fr;
    }

    .tentative-time{
        padding-right:9px;

        font-size:9px;
    }

    .tentative-info{
        padding-left:10px;
        font-size:15px;
    }


    /* MODAL */

    .modal{
        padding:10px;
    }

    .modal-sheet{
        max-height:
            calc(100dvh - 20px);

        padding:
            26px
            18px
            22px;

        border-radius:23px;
    }

    .contact-title{
        font-size:25px;
    }

    .calendar-grid{
        gap:4px;
    }

    .calendar-grid div{
        height:26px;
    }


    /* NAV */

    .bottom-nav{
        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );

        height:64px;
    }

    .bottom-nav i{
        font-size:17px;
    }

    .bottom-nav span{
        font-size:7.5px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media(max-width:340px){

    .groom-name,
    .bride-name{
        font-size:36px;
    }

    .hero-subtitle{
        font-size:30px;
    }

    .photo-ring{
        width:155px;
        height:155px;
    }

    .family-card .couple-name{
        font-size:30px;
    }

    .section-title h2,
    .rsvp-section > h2,
    .wish-section > h2{
        font-size:37px;
    }

    .info-icon,
    .dress-icon{
        flex-basis:44px;

        width:44px;
        height:44px;
    }

    .dress-content{
        padding-right:25px;
    }
}

/* =========================================================
   BOTTOM NAV - CENTER + SLIDE SHOW/HIDE
========================================================= */

.bottom-nav{
    position: fixed;

    left: 50%;
    bottom: 10px;

    transform: translateX(-50%) translateY(0);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;

    z-index: 9999;

    opacity: 1;
    will-change: transform;
}


/* HIDE - turun ke bawah */
.bottom-nav.nav-hidden{
    transform:
        translateX(-50%)
        translateY(calc(100% + 40px));

    opacity: 0;
    pointer-events: none;
}


/* SHOW - naik balik */
.bottom-nav.nav-visible{
    transform:
        translateX(-50%)
        translateY(0);

    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   RSVP FORM - CONSISTENT SPACING
========================================= */

#rsvpForm{
    width:100%;
}

#rsvpForm input,
#rsvpForm textarea,
#rsvpForm .choices{
    margin-bottom:12px !important;
}

#attendanceFields{
    width:100%;
    margin:0 !important;
}

#attendanceFields .choices{
    margin-bottom:12px !important;
}

#rsvpForm textarea{
    display:block;
    margin-top:0 !important;
    margin-bottom:12px !important;
}

.parent-note {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    opacity: 0.75;
}