.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color:var(--invitation-bg);
}
.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font: 14px arial;
    color: var(--counter-bg);
}
.bg-navigation{
    background-color: var(--invitation-bg);
}
#modalInvitation .modal-content{
    background-color: var(--invitation-bg);
}
html body{
    /* background-color: var(--bs-primary); */
    font-family: 'Baskervville', serif;
    background: url(watercolor-4.webp), url(watercolor-3.webp);
    /* Dulu "contain" membuat keduanya fills seluruh tinggi viewport, sehingga
       watercolor-3 yang rasionya lebar melebar sampai 1778px di layar 1920px dan
       menabrak watercolor-4 (tabrakan 659x1080px). Ukuran min(45vw,60vh) dipakai:
       - 2 x 45vw = 90vw < 100vw, jadi keduanya selalu terpisah, tidak pernah tabrakan
       - 60vh membuat tinggi watercolor-4 = lebar/0.742 -> 81vh, masih di dalam layar
       - lebar keduanya sama -> skala ornamen identik, terlihat selaras */
    background-size: min(45vw, 60vh) auto, min(45vw, 60vh) auto;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, bottom left;
    background-attachment: fixed;
}
.font-title{
    font-family: 'Great Vibes', cursive;
}
#cover .title, #modalInvitation .title{
    font-size: 32px !important;
}
.badge-countdown{
    background-color: var(--bs-primary);
}
.splide__arrow {
    background: var(--bs-primary);
}
.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active, .splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    border: 3px solid var(--bs-primary);
}
.splide__arrow svg {
    fill: var(--bs-primary-light);
}
.form-control.form-control-solid {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light);
    /* color: var(--); */
    transition: color 0.2s ease, background-color 0.2s ease;
}
.dropdown.show > .form-control.form-control-solid, .form-control.form-control-solid:active, .form-control.form-control-solid.active, .form-control.form-control-solid:focus, .form-control.form-control-solid.focus {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light);
    /* color: var(--bs-primary-light); */
}
#kt_content{
    background: url(flower-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
}
.card-transparant{
    background-color: rgba(255, 255, 255, .8);
    border-radius: 30px;
    margin-top: 100px;
    margin-bottom: 100px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 30%);
}
.bg-avatar .symbol{
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 30%);
    border: 7px solid var(--bs-primary);
}

/* Foto mempelai: bingkai wreath emas, selaras template Tradisional Jawa. */
.bg-avatar .bp-frame{
    --bp-size: 190px;
    position: relative;
    width: var(--bp-size);
    height: var(--bp-size);
    margin: 0 auto;
    isolation: isolate;
    flex-shrink: 0;
}
.bg-avatar .bp-photo{
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at 35% 28%, #fff, #e8eef8);
    /* Foto dipotong mengikuti kontur lubang wreath supaya menempel penuh
       ke bingkai (tidak ada ruang kosong di tepi dalam ornamen). */
    -webkit-mask-image: url(ornamen-botanical-emas-mask.png);
    mask-image: url(ornamen-botanical-emas-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.bg-avatar .bp-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bg-avatar .bp-orn{
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
@media (max-width: 400px){
    .bg-avatar .bp-frame{ --bp-size: 172px; }
}
.bg-primary-light {
    background-color: var(--bs-primary-light);
}

#mitra-container{
    background-color: rgba(255, 255, 255, .8);
    border-radius: 30px;
    margin-bottom: 100px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
}

#limited-event{
    background-color: rgba(75, 107, 153, 0.05);
    border-color: var(--bs-primary) !important;
}

#schedule .sparator-line {
    border-bottom: 1px dashed var(--bs-primary) !important;
}

/* Watercolor di modal dikecilkan KHUSUS layar HP (<=575px) agar tidak
   mendominasi dan terlihat matching. Desktop/tablet tetap 500px.
   Kalau masih kebesaran/kekecilan, ubah angka 60% atau 260px ini saja. */
@media (max-width: 575.98px) {
    .wc-modal {
        width: 45% !important;
        max-width: 260px !important;
    }
    /* Corner di modal juga dikecilkan di HP dengan proporsi yang sama seperti
       desktop (corner = 70% dari watercolor: 350px/500px). 32% x wadah HP
       menghasilkan rasio yang identik dengan tampilan desktop. */
    .corner-modal {
        width: 32% !important;
        max-width: 182px !important;
    }
}