:root {
    --black-dark: #2C3E50; /* abu gelap kebiruan elegan */
    --black-dark-hover: #3B4A5A; /* lebih terang saat hover */
    --white-pure: #FFFFFF; /* putih murni */
    --gray-overlay: #2c3e5077; /* abu transparan lembut */
    --gray-light: #DDE4EA; /* abu muda kebiruan */
    --gray-dark-text: #34495E; /* abu tua biru untuk teks */
    --gray-dark-line: #AAB7C4; /* garis abu silver */
    --gray-text-rsvp: #C0A060; /* emas lembut (champagne gold) */
    --bg-white-transparent: #ffffffcc; /* putih transparan */
    --color-white-transparent: #ffffffb3; /* putih soft transparan */
    --aliceblue: #ECF2F8; /* biru putih lembut */

    --form-padding: 12px 16px;
    --form-border-radius: 8px;
    --form-border-color: #BDC3C7; /* abu silver */
    --form-border-focus: #2C3E50; /* biru gelap elegan */
    --input-bg: #FFFFFF; /* putih bersih */
}


/* ========== BEGIN STYLES ========== */
nav#menu-navigation {
    background-color: var(--aliceblue);
}

.main-right {
    width: 500px;
    position: fixed;
    right: 0;
    overflow: hidden;
    padding: 0;
    /* z-index: 1 !important; */
    background-color: var(--aliceblue);
    height: 100vh !important;
}

.main-right img.background {
    width: 100%;
    height: 100vh !important;
    object-fit: cover;
    object-position: center center;
    z-index: -1 !important;
    position: absolute;
    filter: brightness(75%);
    -webkit-filter: brightness(75%);
}

.main-right img.bird {
    width: 100%;
    position: absolute;
    top: 20px;
    z-index: 1 !important;
    opacity: 0.4;
}


#menu-navigation .btn {
    background-color: var(--black-dark);
    color: var(--white-pure);
}

#menu-navigation .btn:hover {
    background-color: var(--black-dark-hover);
    color: var(--white-pure);
}

@media screen and (max-width: 500px) {
    .main-right img,
    .main-right {
        width: 100vw;
    }
}

#main {
    background-color: transparent !important;
}

.bg-light {
    background-color: transparent !important;
}

#playPauseBtn {
    background-color: var(--black-dark);
    color: var(--white-pure);
}

#playPauseBtn:hover {
    background-color: var(--black-dark-hover);
    color: var(--white-pure);
}

.box-frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-frame .frame {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translateX(-50%) translateY(-50%);
    width: 230px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

.box-frame .photo {
    border-radius: 40%;
    width: 160px;
    height: 210px;
    object-fit: cover;
    object-position: center center;
    -webkit-border-radius: 40%;
    -moz-border-radius: 40%;
    -ms-border-radius: 40%;
    -o-border-radius: 40%;
}

/* Frist Layer */
#frist-layer {
    position: relative;
    background-size: cover;
    background-position: center;
}

#frist-layer h2 {
    font-family: 'Playfair Display';
}

#frist-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(50%);
    z-index: 1;
}

#frist-layer .the-box {
    position: relative;
    z-index: 2;
    border: none !important;
    background-color: transparent !important;
}

#frist-layer .the-box .box-invitation .tiny-text {
    font-size: 10px !important;
}

#frist-layer .btn-success {
    background-color: var(--white-pure) !important;
    color: var(--black-dark) !important;
    border: none !important;
}

/* opening section */
#opening h1 {
    color: var(--white-pure);
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: 35px;
}

#opening h2 {
    font-family: 'Cinzel';
}

#opening .the-box-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90vh;
}

#opening .the-date {
    font-size: 16px;
    font-weight: 500;
    color: var(--white-pure);
}

#opening .countdown .the-box {
    background-color: transparent;
    color: var(--white-pure);
    font-family: 'Lobster';
}

#opening .countdown .the-box span {
    font-size: 24px;
    font-weight: 400;
}

#opening .btn-light {
    background-color: transparent !important;
    color: var(--white-pure) !important;
    border: none !important;
    border-bottom: 1.4px solid var(--black-dark) !important;
}

#opening .btn-light:hover {
    background-color: var(--black-dark) !important;
    color: var(--white-pure) !important;
}

#opening .box-frame .mariposa{
    position: absolute;
    bottom: 20px;
    right: 70px;
    width: 30px;
}

#bride .box-frame .butterfly-1{
    position: absolute;
    bottom: 30px;
    right: 70px;
    width: 30px;
}
#bride .box-frame .butterfly-2{
    position: absolute;
    bottom: 30px;
    left: 70px;
    width: 30px;
}

#bride h2 {
    color: var(--white-pure);
    font-size: 30px;
    font-family: 'Cinzel';
    font-weight: 500;
}

#bride p {
    color: var(--bg-white-transparent);
}

#bride .btn {
    color: var(--white-pure);
    background-color: var(--black-dark);
    border-color: var(--black-dark);
}

#bride .btn:hover {
    border-color: var(--black-dark);
    background-color: var(--black-dark);
    color: var(--aliceblue);
}


.box-frame .flowers {
    width: 250px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.box-frame .flower-1,
.box-frame .flower-2,
.box-frame .flower-3,
.box-frame .flower-4 {
    position: absolute;
    transform-origin: center bottom;
    animation: flowerSwingSmooth 10s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
    -webkit-animation: flowerSwingSmooth 10s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

.box-frame .flower-1 {
    width: 28px;
    left: 38px;
    bottom: 60px;
    animation-delay: 500ms;
}

.box-frame .flower-2 {
    width: 40px;
    left: 17px;
    bottom: 60px;
}

.box-frame .flower-3 {
    width: 40px;
    right: 10px;
    bottom: 60px;
}

.box-frame .flower-4 {
    width: 80px;
    right: 10px;
    bottom: 60px;
}

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

    20% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    80% {
        transform: rotate(2deg);
    }

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


/* the-doa section */
#the-doa .the-box {
    background-color: var(--gray-overlay);
    color: var(--white-pure);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

    background-image:
        url('dusk.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}


#save-date {
    background-color: var(--color-white-transparent);
}

#save-date .main-frame {
    position: absolute;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

#save-date .countdown .the-box {
    background-color: transparent !important;
}

#save-date .date {
    font-size: 20px;
    font-family: "ABeeZee";
    color: var(--black-dark);
}

#save-date .btn {
    background-color: var(--black-dark);
    border-color: var(--black-dark);
}

#save-date .btn:hover {
    background-color: var(--black-dark-hover);
    border-color: var(--black-dark-hover);
}


/* event section */
.background-theme {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

#event .card {
    text-align: center;
    background-color: var(--bg-white-transparent);
    font-family: "ABeeZee";
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(238, 238, 238, 0.4)), url('main-bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 2px solid var(--gray-overlay) !important;
    color: var(--black-dark);
    border-radius: 180px;
    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    -ms-border-radius: 180px;
    -o-border-radius: 180px;
}

#event .card-body {
    padding: 180px 0;
}

#event .text-opening {
    font-family: "poppins";
    font-weight: 400;
    color: var(--black-dark);
}

#event .btn {
    background-color: var(--black-dark);
    border-color: var(--black-dark);
    color: var(--white-pure);
}

#event .btn:hover {
    background-color: var(--black-dark-hover);
    border-color: var(--black-dark-hover);
}

/* mini-maps section */
#mini-maps h2 {
    font-family: "ABeeZee";
}

/* the-gallery section */
#the-gallery h2 {
    font-family: "ABeeZee";
}

#the-gallery img,
#the-gallery iframe {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border: 1.4px solid var(--white-pure);
}

/* love-story section */
#love-story h2 {
    font-family: "ABeeZee";
    color: var(--black-darkflower-1);
}

#love-story .card {
    background-color: var(--bg-white-transparent);
    color: var(--black-dark);
    border: 1.4px solid var(--gray-overlay);
    font-family: "ABeeZee";
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(238, 238, 238, 0.4)), url('main-bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px 0;
    border-radius: 180px;
    -webkit-border-radius: 180px;
    -moz-border-radius: 180px;
    -ms-border-radius: 180px;
    -o-border-radius: 180px;
}

.bg-white-custom {
    background-color: var(--bg-white-transparent);
}

#bank h2 {
    font-family: "ABeeZee";
}

/* === RSVP Section === */
#rsvp .card {
    background-color: var(--bg-white-transparent) !important;
    font-family: "ABeeZee";
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

#rsvp h3 {
    color: var(--black-dark);
    font-size: 1.75rem;
    font-weight: bold;
}

#rsvp label {
    color: var(--gray-dark-text) !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
}

#rsvp small {
    color: var(--gray-dark-text) !important;
    font-size: 0.85rem;
}

#rsvp .text-danger {
    color: var(--gray-text-rsvp) !important;
    font-size: 0.875rem;
}

#rsvp input,
#rsvp select {
    background-color: var(--input-bg);
    padding: var(--form-padding);
    border-radius: var(--form-border-radius);
    border: 1px solid var(--form-border-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#rsvp input:focus,
#rsvp select:focus {
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px rgba(31, 59, 47, 0.2);
    outline: none;
}

/* === Chat Room Section === */
#chat-room .card {
    background-color: var(--bg-white-transparent) !important;
    font-family: "ABeeZee";
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

#chat-room h2 {
    color: var(--black-dark);
    font-size: 1.75rem;
    font-weight: bold;
}

#chat-room label {
    color: var(--gray-dark-text) !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
}

#chat-room small {
    color: var(--gray-dark-text) !important;
    font-size: 0.85rem;
}

#chat-room .text-danger {
    color: var(--gray-text-rsvp) !important;
    font-size: 0.875rem;
}

#chat-room input,
#chat-room select,
#chat-room textarea {
    background-color: var(--input-bg);
    padding: var(--form-padding);
    border-radius: var(--form-border-radius);
    border: 1px solid var(--form-border-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#chat-room input:focus,
#chat-room select:focus,
#chat-room textarea:focus {
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px rgba(31, 59, 47, 0.2);
    outline: none;
}

#chat-room .the-chat {
    background-color: var(--black-dark) !important;
    color: var(--white-pure) !important;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* === Buttons === */
#rsvp button,
#chat-room button {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
}

#rsvp button:hover,
#chat-room button:hover {
    filter: brightness(1.05);
}

#rsvp button:disabled,
#chat-room button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* closing section */
#closing {
    font-family: "Gentium Book Plus";
    color: var(--black-dark);
}

#closing h2 {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: 35px;
    color: var(--black-dark);
}

#closing h3 {
    font-family: 'Cinzel';
    color: var(--black-dark-hover);
}

/* ========== END STYLES ========== */