/* =====================================================
   POPUP OVERLAY
===================================================== */

.popup-overlay {

    pointer-events:auto;

    position: absolute;

    inset: 0;

    z-index: var(--z-popup);

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding:

        var(--popup-top)

        var(--popup-margin-x)

        var(--popup-margin-bottom);

}

/* =====================================================
   WINDOW
===================================================== */

.popup-window {

    position: relative;

    /* width: 100%;

    height: 100%; */

    width: clamp(280px, 100%, 500px);
    height: clamp(300px, 100%, 1000px);

    display: flex;

    flex-direction: column;

    background: var(--popup-background);

    border:

        var(--popup-border-width)

        solid

        var(--popup-border-color);

    border-radius: var(--popup-radius);

    transform: scale(.5);

    opacity: 0;

    transition:

        transform var(--transition-normal) var(--ease),

        opacity var(--transition-normal) var(--ease);

}

.popup-window.open {

    transform: scale(1);

    opacity: var(--popup-opacity);

}

/* =====================================================
   HEADER
===================================================== */

.popup-header {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: clamp(20px, 5vw, 30px) 20px 10px 20px;

    flex-shrink: 0;

}

/* =====================================================
   TITLE
===================================================== */

.popup-title {

    font-size: clamp(2rem, 6vw, 3rem);;

    font-weight: bold;

    font-family: 'Dancing Script', cursive; 
    text-align: center;
    color: rgb(88, 67, 20);

}

/* =====================================================
   CLOSE
===================================================== */

.popup-close {

    position: absolute;

    top: -15px;

    right: -15px;

    width: var(--x-icon-size);

    aspect-ratio: 1;

    cursor: pointer;

    transition:

        transform var(--transition-fast);

}

@media (hover: hover) {
    .popup-close:hover {
        transform: scale(1.05);
    }
}

.popup-close:active {
    transform: scale(0.9) !important;
    filter: brightness(1.5);
}

/* =====================================================
   CONTENT
===================================================== */

.popup-content {

    flex: 1;

    overflow-y: auto;

    padding: clamp(2px, 2vw, 3px) 20px 20px 20px; /* Atas 5px, Kanan 20px, Bawah 20px, Kiri 20px */

}

/* =====================================================
   CUSTOM SCROLLBAR UNTUK POPUP
===================================================== */

/* 1. Mengatur lebar/ukuran keseluruhan scrollbar */
.popup-content::-webkit-scrollbar {
    width: 8px; /* Dibuat lebih tipis agar elegan */
}

/* 2. Track (Jalur tempat scrollbar bergerak) */
.popup-content::-webkit-scrollbar-track {
    background: transparent; /* Dibuat transparan menyatu dengan background popup */
    border-radius: 10px;
    margin-block: 10px; /* Memberi jarak agar scrollbar tidak mentok ke atas/bawah */
}

/* 3. Thumb (Batang besi/pegangan yang bisa ditarik) */
.popup-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 153, 255, 0.5); /* Warna biru abu-abu transparan */
    border-radius: 10px; /* Ujungnya dibuat melengkung */
    
    /* Memberi efek border putih tipis agar terlihat seperti pil/kapsul mengambang */
    border: 2px solid transparent; 
    background-clip: padding-box;
}

/* 4. Efek saat batang scrollbar disorot kursor mouse */
.popup-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(86, 105, 118, 0.8); /* Warnanya jadi lebih jelas/gelap saat disentuh */
}

/* --- TAMBAHAN UNTUK FIREFOX --- */
/* Firefox menggunakan aturan penulisan yang berbeda */
.popup-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 105, 118, 0.5) transparent;
}

/* =====================================================
   TENTANG KITA (ABOUT US)
===================================================== */

.about-quote {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: #584314; /* Menyamakan dengan warna tema teks */
    font-size: clamp(0.85rem, 2.5vw, 1rem); /* Ukuran teks responsif */
    line-height: 1.6;
    margin-bottom: 20px; /* Memberikan jarak dengan profil di bawahnya */
    padding: 0 10px; /* Memberikan sedikit ruang bernapas di kiri dan kanan */
}

.about-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antara profil pria dan wanita */
    margin-top: 20px;
    padding-bottom: 20px;
}

/* Tata letak Kiri-Kanan */
.profile-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Tata letak Kanan-Kiri (untuk profil kedua) */
.profile-row.reverse {
    flex-direction: row-reverse;
}

/* --- AREA FRAME & FOTO --- */
.gallery-wrapper {
    position: relative; /* Penting agar elemen di dalamnya bisa ditumpuk */
    width: clamp(150px, 35vw, 220px); /* Ukuran bingkai responsif */
    aspect-ratio: 1 / 1; /* Asumsi frame berbentuk persegi */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Foto (Layer Bawah) */
.gallery-photo {
    position: absolute;
    width: 80%; /* Sesuaikan persentase ini agar pas dengan lubang frame */
    height: 80%;
    object-fit: cover;
    border-radius: 50%; /* Jika lubang framenya bulat */
    z-index: 1;
    
    /* Animasi transisi */
    opacity: 0;
    transition: opacity var(--transition-normal) var(--ease);
}

.gallery-photo.active {
    opacity: 1;
    z-index: 2;
}

/* Frame (Layer Tengah) */
.gallery-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    pointer-events: none; /* Agar tidak menghalangi klik */
}

/* Tombol (Layer Atas) */
.gallery-btn {
    position: absolute;
    top: 85%;
    transform: translateY(-50%);
    width: clamp(20px, 5vw, 25px); /* Ukuran tombol responsif */
    cursor: pointer;
    z-index: 4;
    transition: transform var(--transition-fast) var(--ease);
}

/* Posisi Tombol Kiri dan Kanan */
.gallery-btn.prev {
    left: 0px; /* Sesuaikan jika ingin lebih ke luar/ke dalam frame */
}

.gallery-btn.next {
    right: 0px; /* Sesuaikan jika ingin lebih ke luar/ke dalam frame */
}

@media (hover: hover) {
    .gallery-btn:hover {
        transform: translateY(-50%) scale(1.1);
    }
}
.gallery-btn:active {
    transform: translateY(-50%) scale(0.9) !important;
}

/* --- AREA TEKS --- */
.profile-text {
    font-family: 'Raleway', sans-serif;
    color: #584314; /* Samakan dengan warna tema popup sebelumnya */
    flex: 1;
    text-align: center;
}

.profile-name {
    font-family: 'Dancing Script', cursive; 
    
    font-size: clamp(1.5rem, 4vw, 2.2rem); /* Ukuran font sedikit dibesarkan */
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
}

.profile-desc {
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    line-height: 1.5;
}

/* Responsif untuk HP (Tumpuk atas-bawah alih-alih kiri-kanan) */
@media (max-width: 480px) {
    .profile-row, .profile-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* =====================================================
   TABEL RUNDOWN
===================================================== */

.rundown-table-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 30px;
}

.rundown-table {
    width: 90%;
    max-width: 400px;
    border-collapse: collapse;
    font-family: 'Raleway', sans-serif;
    color: #584314;
    font-size: clamp(0.85rem, 2vw, 1rem);
    text-align: center;
}

.rundown-table th, 
.rundown-table td {
    border: 1px solid rgba(88, 67, 20, 0.4);
    padding: 8px 10px;
}

.rundown-table th {
    font-family: 'Playpen Sans Deva', cursive;
    font-weight: bold;
    background-color: rgba(20, 64, 74, 0.495); /* Memberi sedikit warna latar pada header */
}

.rundown-table td {
    background-color: #fffff3;
}

/* Mengatur lebar kolom agar proporsional */
.rundown-table th:nth-child(1) {
    width: 10%;
}
.rundown-table th:nth-child(2) {
    width: 35%;
}
.rundown-table th:nth-child(3) {
    width: 55%;
}

/* =====================================================
   EVENT DETAILS (WAKTU & TEMPAT)
===================================================== */

.event-details {
    /* Ganti dengan font serif pilihanmu dari Google Fonts */
    /* font-family: 'Playfair Display', serif;  */
    font-family: 'Raleway'; 
    
    /* Warna teks biru keabu-abuan mirip gambar */
    color: #584314; 
    text-align: center;
    margin-top: 10px;
}

/* --- TATA LETAK 3 KOLOM TANGGAL --- */
.date-time-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px; /* Jarak antar kolom */
    margin-bottom: 30px;
}

/* Kolom Kiri & Kanan (Ada garisnya) */
.dt-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(90px, 12vw, 130px); /* Lebar garis menyesuaikan layar */
}

/* Garis atas dan bawah teks */
.dt-side .line {
    width: 100%;
    height: 1px;
    background-color: #584314;
    margin: 12px 0;
}

.dt-side .dt-text {
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    letter-spacing: 2px;
}

/* Kolom Tengah (Angka Besar) */
.dt-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dt-center .day {
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.9;
}

.dt-center .month {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    letter-spacing: 3px;
}

/* --- TATA LETAK ALAMAT --- */
.address-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.venue-name {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    letter-spacing: 4px; /* Memberi jarak antar huruf */
}

.venue-address {
    font-style: italic; /* Membuat teks miring (Rosewood Lane) */
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    line-height: 1.5;
}

/* =====================================================
   MINI MAP (WAKTU & TEMPAT)
===================================================== */

.map-container {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

/* Menggantikan .map-link yang lama */
.map-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 450px;
}

/* Kotak frame petanya */
.map-wrapper {
    position: relative;
    width: 100%;
    height: clamp(250px, 25vh, 350px); 
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #566976; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Transisi transform dihapus karena petanya tidak akan membesar/mengecil lagi saat ditekan */
}

.map-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* HAPUS/JANGAN MASUKKAN LAGI class .map-click-catcher */

/* Tombol Teks di bawah peta (sekarang menjadi tombol utama) */
.map-text {
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight: bold;
    font-family: "Playpen Sans Deva", sans-serif; 
    background-color: #566976;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 99px; 
    letter-spacing: 1px;
    text-decoration: none; /* Penting: agar teks link tidak memiliki garis bawah */
    transition: transform var(--transition-fast) var(--ease), 
                background-color var(--transition-fast);
}

/* --- EFEK HOVER (Hanya untuk tombol di PC/Laptop) --- */
@media (hover: hover) {
    .map-text:hover {
        background-color: #3e4c56; 
        transform: scale(1.05);
    }
}

/* --- EFEK DITEKAN (Berlaku di HP dan PC, hanya untuk tombol) --- */
.map-text:active {
    transform: scale(0.95) !important;
}

.closing-image-container {
    display: flex;
    justify-content: center; /* Meratakan ke tengah */
    align-items: center;
    margin-top: 40px; /* Jarak yang cukup dari tombol Maps */
    padding-bottom: 20px;
    width: 100%;
}

.closing-image {
    width: clamp(220px, 65vw, 300px); 
    height: auto; /* Mempertahankan rasio aspek 544x504px */
    object-fit: contain;
}

/* =====================================================
   UCAPAN
===================================================== */

/*
 * Saat halaman Ucapan aktif, popup utama tidak ikut scroll.
 * Scroll hanya berada pada .wishes-chat dan textarea.
 */
.popup-content.ucapan-mode {

    min-height: 0;

    display: flex;

    overflow: scroll; /* edit */

}

.wishes-page {

    width: 100%;
    min-height: 0;

    flex: 1;

    display: grid;

    grid-template-rows:
        minmax(150px, 1fr)
        auto;

    gap: 16px;

    color: #584314;

}

/* =====================================================
   RUNDOWN (COMING SOON)
===================================================== */

.coming-soon-container {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Memastikan teks dan gambar berada di tengah (center) */
    justify-content: center;
    margin-top: 20px;
    gap: 20px; /* Jarak antara teks dan gambar */
    padding-bottom: 20px;
}

.coming-soon-text {
    font-family: 'Raleway', sans-serif;
    font-style: italic; /* Membuat teks menjadi miring */
    color: #584314; /* Menggunakan warna teks yang senada dengan popup */
    font-size: clamp(1rem, 3vw, 1.2rem); 
    text-align: center;
}

.coming-soon-img {
    /* clamp(Ukuran_Terkecil_HP, Ukuran_Dinamis, Ukuran_Terbesar_PC) */
    width: clamp(230px, 40vw, 300px); 
    height: auto; /* Agar proporsi gambar tidak gepeng */
    object-fit: contain;
}

/* =====================================================
   UCAPAN — CHAT WINDOW
===================================================== */

.wishes-chat {

    min-height: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

    overflow-y: auto;

    overscroll-behavior: contain;

    padding: 18px;

    border:
        3px solid
        rgba(86, 105, 118, 0.65);

    border-radius: 24px;

    background:
        rgba(255, 250, 230, 0.82);

    box-shadow:
        inset
        0
        0
        0
        2px
        rgba(255, 255, 255, 0.35);

}

.wishes-empty {

    margin: auto;

    padding: 20px;

    text-align: center;

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    opacity: 0.7;

}

.wish-bubble {

    position: relative;

    width: fit-content;
    max-width: min(88%, 390px);

    align-self: flex-start;

    padding:
        13px
        17px
        15px;

    border:
        2px solid
        rgba(86, 105, 118, 0.6);

    border-radius:
        20px
        20px
        20px
        7px;

    background:
        rgba(255, 255, 255, 0.9);

    box-shadow:
        0
        4px
        10px
        rgba(0, 0, 0, 0.08);

}

.wish-bubble::after {

    content: "";

    position: absolute;

    left: 16px;
    bottom: -10px;

    width: 18px;
    height: 18px;

    border-left:
        2px solid
        rgba(86, 105, 118, 0.6);

    border-bottom:
        2px solid
        rgba(86, 105, 118, 0.6);

    background:
        rgba(255, 255, 255, 0.9);

    transform:
        skewY(-35deg)
        rotate(-18deg);

}

.wish-bubble-name {

    position: relative;

    z-index: 1;

    margin-bottom: 5px;

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    font-size:
        clamp(
            0.8rem,
            1.8vw,
            1rem
        );

    font-weight: 700;

}

.wish-bubble-text {

    position: relative;

    z-index: 1;

    margin: 0;

    font-family:
        "Chilanka",
        cursive;

    font-size:
        clamp(
            0.9rem,
            2vw,
            1.08rem
        );

    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

}

/* =====================================================
   UCAPAN — FORM
===================================================== */

.wishes-form {

    display: grid;

    gap: 11px;

}

.wishes-name-row {

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 220px);

    justify-content: center;

    align-items: center;

    gap: 12px;

}

.wishes-label {

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    font-size:
        clamp(
            0.9rem,
            2vw,
            1.05rem
        );

    font-weight: 700;

}

.wishes-name-input,
.wishes-message-input {

    width: 100%;

    border:
        2px solid
        transparent;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.95);

    color: #584314;

    outline: none;

    transition:
        border-color
            var(--transition-fast)
            var(--ease),

        box-shadow
            var(--transition-fast)
            var(--ease);

}

.wishes-name-input {

    height: 46px;

    padding:
        8px
        14px;

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    font-size: 0.95rem;

}

.wishes-message-input {

    min-height: 125px;
    max-height: 180px;

    padding: 14px 16px;

    resize: none;

    overflow-y: auto;

    font-family:
        "Chilanka",
        cursive;

    font-size:
        clamp(
            0.95rem,
            2vw,
            1.08rem
        );

    line-height: 1.45;

}

.wishes-message-input::placeholder {

    color:
        rgba(
            88,
            67,
            20,
            0.55
        );

}

.wishes-name-input:focus,
.wishes-message-input:focus {

    border-color:
        rgba(
            86,
            105,
            118,
            0.8
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            86,
            105,
            118,
            0.15
        );

}

.wishes-submit {

    justify-self: center;

    min-width: 150px;

    padding:
        10px
        28px;

    border:
        3px solid
        rgba(86, 105, 118, 0.55);

    border-radius: 999px;

    background: #c8c1ae;

    color:
        rgba(
            88,
            67,
            20,
            0.55
        );

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    font-size: 1rem;
    font-weight: 800;

    letter-spacing: 2px;

    cursor: not-allowed;

    transform: scale(1);

    transition:
        transform
            var(--transition-fast)
            var(--ease),

        filter
            var(--transition-fast)
            var(--ease),

        background-color
            var(--transition-fast)
            var(--ease),

        color
            var(--transition-fast)
            var(--ease);

}

/*
 * Warna tombol aktif.
 * Edit background/color/border-color di sini.
 */
.wishes-submit.is-ready:not(:disabled) {

    border-color: #80501f;

    background: #f0a844;

    color: #4a2c11;

    cursor: pointer;

}

@media (hover: hover) {

    .wishes-submit.is-ready:not(:disabled):hover {

        transform: scale(1.05);

        filter: brightness(1.08);

    }

}

.wishes-submit.is-ready:not(:disabled):active {

    transform: scale(0.95);

}

/* =====================================================
   UCAPAN — SCROLLBAR
===================================================== */

.wishes-chat::-webkit-scrollbar,
.wishes-message-input::-webkit-scrollbar {

    width: 8px;

}

.wishes-chat::-webkit-scrollbar-track,
.wishes-message-input::-webkit-scrollbar-track {

    margin-block: 10px;

    border-radius: 10px;

    background: transparent;

}

.wishes-chat::-webkit-scrollbar-thumb,
.wishes-message-input::-webkit-scrollbar-thumb {

    border:
        2px solid
        transparent;

    border-radius: 10px;

    background-color:
        rgba(
            0,
            153,
            255,
            0.5
        );

    background-clip:
        padding-box;

}

.wishes-chat::-webkit-scrollbar-thumb:hover,
.wishes-message-input::-webkit-scrollbar-thumb:hover {

    background-color:
        rgba(
            86,
            105,
            118,
            0.8
        );

}

.wishes-chat,
.wishes-message-input {

    scrollbar-width: thin;

    scrollbar-color:
        rgba(
            86,
            105,
            118,
            0.5
        )
        transparent;

}

/* =====================================================
   UCAPAN — RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .wishes-page {

        grid-template-rows:
            minmax(130px, 1fr)
            auto;

        gap: 12px;

    }

    .wishes-chat {

        gap: 12px;

        padding: 14px;

        border-radius: 19px;

    }

    .wish-bubble {

        max-width: 92%;

        padding:
            11px
            14px
            13px;

    }

    .wishes-name-row {

        grid-template-columns:
            auto
            minmax(0, 190px);

        gap: 8px;

    }

    .wishes-name-input {

        height: 40px;

    }

    .wishes-message-input {

        min-height: 105px;
        max-height: 145px;

    }

    .wishes-submit {

        min-width: 130px;

        padding:
            8px
            23px;

        font-size: 0.9rem;

    }

}

/* Status loading, kosong, dan error di dalam window chat. */
.wishes-status {

    margin: auto;

    padding: 20px;

    text-align: center;

    font-family:
        "Playpen Sans Deva",
        "Playpen Sans",
        cursive;

    line-height: 1.45;

    opacity: 0.75;

}

.wishes-status.is-error {

    color: #9b2c2c;

    opacity: 1;

}

/* =====================================================
   INFORMASI
===================================================== */

.info-container {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Jarak antar bagian (nomor 1, 2, 3, dst) */
    padding-bottom: 20px;
    font-family: 'Raleway', sans-serif;
    color: #584314;
    margin-top: 20px;
}



.info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-number {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: bold;
    margin-bottom: 8px;
}

.info-number.center {
    text-align: center;
}

/* --- Grid untuk Dresscode Keluarga --- */
.dresscode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dresscode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* --- Layout Baris Umum (Gambar & Teks) --- */
.info-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Membalik urutan menjadi Teks di Kiri, Gambar di Kanan */
.info-row.reverse {
    flex-direction: row-reverse;
}

/* Khusus untuk baris dresscode tamu agar lebih rapi */
.tamu-row {
    justify-content: center;
    padding: 0 5%;
    gap: 10px;
}

.info-img-wrapper {
    flex-shrink: 0;
    width: clamp(120px, 30vw, 180px); /* Ukuran gambar responsif */
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-img-wrapper img,
.dresscode-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px; /* Opsional: memberi sedikit lengkungan di ujung gambar */
}

.info-text-wrapper {
    flex: 1;
    text-align: center;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.5;
}

.info-disclaimer {
    font-style: italic;
    text-align: center;
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    opacity: 0.8;
    margin-top: 10px;
}

/* =====================================================
   INFORMASI - RESPONSIVE (HP)
===================================================== */
@media (max-width: 576px) {
    /* Ubah dari Kiri-Kanan menjadi Atas-Bawah */
    .info-row,
    .info-row.reverse {
        flex-direction: column;
        text-align: center;
    }

    /* Dresscode keluarga ikut menjadi atas-bawah di layar HP */
    .dresscode-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tamu-row {
        padding: 0; /* Mengembalikan dinding ke ukuran normal saat di HP */
    }

    .info-img-wrapper {
        width: clamp(160px, 50vw, 220px); /* Gambar sedikit dibesarkan di HP agar jelas */
    }
}

/* --- Class Khusus untuk Mengecilkan Gambar --- */
.img-small {
    width: clamp(170px, 30vw, 195px) !important; 
    height: auto;
    margin: 0 auto;
}

.img-shoes {
    width: 80% !important;     
    margin: 0 auto;
}

.img-no {
    width: 118% !important;     
    margin: 0 auto;
}

.img-kartu {
    width: 110% !important; /* Ubah angka 115% menjadi lebih besar/kecil sesuai selera */
    margin: 0 auto;
}

.info-container .dresscode-grid .dresscode-item p {
    font-size: clamp(0.9rem, 2vw, 1rem); /* Ukuran ini lebih kecil dari standar */
}