/* @import
url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@400;500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');

/* ========================================================================== */
/* CUSTOM BOOTSTRAP CSS */
/* ========================================================================== */
:root {
--bs-success: #81B656; /* hijau */
--bs-warning: #8A502B; /* gold */
--bs-danger: #dc2626; /* merah */
--bs-info: #0284c7; /* biru muda */

--bs-primary-rgb: 160, 83, 55; /* dari #1e3a8a */
--bs-success-rgb: 116, 125, 78; /* dari #16a34a */
--bs-warning-rgb: 138, 80, 43; /* dari #eab308 */
--bs-danger-rgb: 237, 28, 36; /* dari #eab308 */
}

.btn-warning {
--bs-btn-color: #fff; /* teks dibikin putih karena warna gelap */
--bs-btn-bg: #8A502B;
--bs-btn-border-color: #8A502B;

--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #9f5a30; /* sedikit lebih terang */
--bs-btn-hover-border-color: #9f5a30;

--bs-btn-focus-shadow-rgb: 138, 80, 43;

--bs-btn-active-color: #fff;
--bs-btn-active-bg: #7a4626; /* sedikit lebih gelap */
--bs-btn-active-border-color: #7a4626;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #8A502B;
--bs-btn-disabled-border-color: #8A502B;
}

.btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: #81B656;
--bs-btn-border-color: #81B656;

--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #73a44d; /* sedikit lebih gelap */
--bs-btn-hover-border-color: #6b9848;

--bs-btn-focus-shadow-rgb: 129, 182, 86;

--bs-btn-active-color: #fff;
--bs-btn-active-bg: #6b9848; /* warna active */
--bs-btn-active-border-color: #648d44;

--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #81B656;
--bs-btn-disabled-border-color: #81B656;
}



.top-0 { top: 0% !important; }
.top-5 { top: 5% !important; }
.top-10 { top: 10% !important; }
.top-15 { top: 15% !important; }
.top-20 { top: 20% !important; }
.top-25 { top: 25% !important; }
.top-30 { top: 30% !important; }
.top-35 { top: 35% !important; }
.top-40 { top: 40% !important; }
.top-45 { top: 45% !important; }
.top-50 { top: 50% !important; }
.top-55 { top: 55% !important; }
.top-60 { top: 60% !important; }
.top-65 { top: 65% !important; }
.top-70 { top: 70% !important; }
.top-75 { top: 75% !important; }
.top-80 { top: 80% !important; }
.top-85 { top: 85% !important; }
.top-90 { top: 90% !important; }
.top-95 { top: 95% !important; }
.top-100 { top: 100% !important; }

/* BOTTOM */
.bottom-0 { bottom: 0% !important; }
.bottom-5 { bottom: 5% !important; }
.bottom-10 { bottom: 10% !important; }
.bottom-15 { bottom: 15% !important; }
.bottom-20 { bottom: 20% !important; }
.bottom-25 { bottom: 25% !important; }
.bottom-30 { bottom: 30% !important; }
.bottom-35 { bottom: 35% !important; }
.bottom-40 { bottom: 40% !important; }
.bottom-45 { bottom: 45% !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-55 { bottom: 55% !important; }
.bottom-60 { bottom: 60% !important; }
.bottom-65 { bottom: 65% !important; }
.bottom-70 { bottom: 70% !important; }
.bottom-75 { bottom: 75% !important; }
.bottom-80 { bottom: 80% !important; }
.bottom-85 { bottom: 85% !important; }
.bottom-90 { bottom: 90% !important; }
.bottom-95 { bottom: 95% !important; }
.bottom-100 { bottom: 100% !important; }

/* START (kiri) */
.start-0 { left: 0% !important; }
.start-5 { left: 5% !important; }
.start-10 { left: 10% !important; }
.start-15 { left: 15% !important; }
.start-20 { left: 20% !important; }
.start-25 { left: 25% !important; }
.start-30 { left: 30% !important; }
.start-35 { left: 35% !important; }
.start-40 { left: 40% !important; }
.start-45 { left: 45% !important; }
.start-50 { left: 50% !important; }
.start-55 { left: 55% !important; }
.start-60 { left: 60% !important; }
.start-65 { left: 65% !important; }
.start-70 { left: 70% !important; }
.start-75 { left: 75% !important; }
.start-80 { left: 80% !important; }
.start-85 { left: 85% !important; }
.start-90 { left: 90% !important; }
.start-95 { left: 95% !important; }
.start-100 { left: 100% !important; }

/* END (kanan) */
.end-0 { right: 0% !important; }
.end-5 { right: 5% !important; }
.end-10 { right: 10% !important; }
.end-15 { right: 15% !important; }
.end-20 { right: 20% !important; }
.end-25 { right: 25% !important; }
.end-30 { right: 30% !important; }
.end-35 { right: 35% !important; }
.end-40 { right: 40% !important; }
.end-45 { right: 45% !important; }
.end-50 { right: 50% !important; }
.end-55 { right: 55% !important; }
.end-60 { right: 60% !important; }
.end-65 { right: 65% !important; }
.end-70 { right: 70% !important; }
.end-75 { right: 75% !important; }
.end-80 { right: 80% !important; }
.end-85 { right: 85% !important; }
.end-90 { right: 90% !important; }
.end-95 { right: 95% !important; }
.end-100 { right: 100% !important; }

/* ========================================================================== */
/* BODY CSS */
/* ========================================================================== */

body {
font-family: 'Lateef', serif;
background-color: #ffffff; /* Ganti dari #f9fafb ke gelap */
color: #ffffff;
overflow-x: hidden;
margin: 0;
padding: 0;
}
html{
overflow-x: hidden;
}

/* ========================================================================== */
/* ANIMASI TRANSISI HALAMAN */
/* ========================================================================== */

/* Hero section disembunyikan dulu, nanti dimunculkan dengan animasi */
.hero-section {
opacity: 0;
will-change: transform, opacity;
}

#page-transition {
will-change: opacity;
}

/* Animasi hover untuk button navigasi */
.btn-switch a {
transition: all 0.4s ease;
cursor: pointer;
will-change: transform, opacity;
}

.btn-switch a .btn {
transition: all 0.4s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
will-change: transform;
}

.btn-switch a:hover .btn {
box-shadow: 0 8px 25px rgba(129, 182, 86, 0.4);
}

.btn-switch a .fas {
transition: all 0.4s ease;
will-change: transform;
}
/* ========================================================================== */
/* BAGIAN CAROUSEL HEADER*/
/* ========================================================================== */



.carousel-indicators {
flex-direction: column;
align-items: flex-end;
justify-content: center;
margin: 0;
right: 3%;
left: auto;
bottom: auto;
top: 60%;
transform: translateY(-50%);
width: auto;
}

.carousel-indicators [data-bs-target] {
width: auto;
height: auto;
background: transparent;
border: none;
opacity: 1;
text-indent: 0;
margin: 3px 0;
position: relative;
transition: all 0.3s ease;
}

.carousel-indicators [data-bs-target]::before {
content: attr(data-number);
display: block;
color: white;
font-size: 2.5rem;
transition: all 0.3s ease;
text-align: right;
padding-right: 10px;
}

.carousel-indicators [data-bs-target]::after {
content: '';
position: absolute;
right: 0;
top: 100%;
transform: translateY(-50%);
width: 80px;
height: 1px;
background-color: white;
opacity: 0;
transition: all 0.3s ease;
}

.carousel-indicators [data-bs-target].active::before {
font-size: 3.5rem;
}

.carousel-indicators [data-bs-target].active::after {
opacity: 1;
}

/* ========================================================================== */
/* CAROUSEL OWL CAROUSEL BAGIAN BALLROOM */
/* ========================================================================== */

.balroom-carousel .owl-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
transition: all .5s ease !important;
}

.balroom-carousel .owl-dot span {
width: 12px;
height: 12px;
background: #ffffff;
display: block;
border-radius: 50%;

/* TRANSISI SMOOTH */
transition: all .35s ease !important;
}

.balroom-carousel .owl-dot.active span {
background-color: #81B656 !important;
width: 48px;
height: 14px;
border-radius: 10px; /* biar lebih smooth bentuknya */
}



/* ========================================================================== */
/* SCROLL BAR CSS */
/* ========================================================================== */

/* width */
::-webkit-scrollbar {
width: 2px; /* TIPIS */
}

/* background scrollbar */
::-webkit-scrollbar-track {
background: black;
}

/* handle */
::-webkit-scrollbar-thumb {
background: #31a300; /* warna abu modern */
border-radius: 10px; /* rounded */
}

/* hover */
::-webkit-scrollbar-thumb:hover {
background: #3b9415;
}



/* ========================================================================== */
/* BAGIAN YOUTUBE ATAU BUTTON PULSE */
/* ========================================================================== */


.pulsating-play-btn {
width: 94px;
height: 94px;
background: radial-gradient(rgb(116, 125, 78) 50%, color-mix(in srgb, rgb(116, 125, 78), transparent 75%) 52%);
border-radius: 50%;
display: block;
position: relative;
overflow: hidden;
}

.pulsating-play-btn:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
animation-delay: 0s;
animation: pulsate-play-btn 2s;
animation-direction: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid color-mix(in srgb, rgb(116, 125, 78), transparent 30%);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 100;
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border: none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 200;
animation: none;
border-radius: 0;
}

.pulsating-play-btn:hover:after {
border-left: 15px solid rgb(116, 125, 78);
transform: scale(20);
}

.line {
height: 1px;
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
}

.title-resto {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 400;
letter-spacing: 2px;
color: #ffffff;
text-transform: capitalize;
}

/* Responsive */
@media (max-width: 768px) {

.title-resto {
font-size: 1.5rem;
letter-spacing: 1px;
}
}

@media (max-width: 576px) {

.title-resto {
font-size: 1.2rem;
}

.line {
height: 0.5px;
}
}



/* ========================================================================== */
/* CUSTOM BUTTON CAROUSEL MAKANAN DAN MINUMAN */
/* ========================================================================== */
.custom-arrow {
width: 40px; /* ukuran lingkaran */
height: 40px;
border: 2px solid #A05337; /* outline coklat */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: transparent; /* tidak ada background */
cursor: pointer;
z-index: 10;
transition: 0.3s ease;
}

.custom-arrow i {
color: #A05337; /* warna icon coklat */
font-size: 20px;
}

.custom-arrow:hover {
transform: scale(1.1); /* efek hover halus */
}

/* ========================================================================== */
/* Filter RUANGAN */
/* ========================================================================== */
.room-filter-buttons .filter-btn {
background: transparent !important;
border: none !important;
color: #000;
font-weight: 500;
padding: 8px 18px;
font-size: 28px;
transition: all 0.25s ease;
}

/* Hover elegan */
.room-filter-buttons .filter-btn:hover {
color: #8B4C28;
transform: translateY(-2px);
}

/* Aktif */
.room-filter-buttons .filter-btn.active {
color: #8B4C28 !important;
font-weight: 600;
}


/* ========================================================================== */
/* MODAL TIPE RUANGAN */
/* ========================================================================== */
.room-card {
position: relative;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: 0.25s;
}

/* BORDER COKLAT SAAT ACTIVE */
.room-card.active {
outline: 4px solid #A55E2B;
}

/* GAMBAR */
.room-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}

/* OVERLAY GELAP (DEFAULT ADA) */
.room-card::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35); /* overlay gelap tipis */
transition: 0.25s;
}

/* ACTIVE → OVERLAY MENGHILANG */
.room-card.active::after {
background: rgba(0,0,0,0);
}

/* LABEL TEXT */
.room-label {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
color: white;
font-weight: 500;
z-index: 200;
}
.room-label div {
line-height: 1.3;
}


.quantity-box {
display: none;
margin-top: 10px;
text-align: center;
}
.quantity-box button {
width: 35px;
height: 35px;
border-radius: 50%;
}

/* ========================================================================== */
/* CSS TANGGAL */
/* ========================================================================== */

/* Custom styling untuk daterangepicker */
.daterangepicker {
border: 2px solid blue !important;
font-family: inherit;
color: #000;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
border-radius: 8px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
background-color: blue !important;
}

.daterangepicker .ranges li.active {
background-color: blue !important;
}

.daterangepicker .drp-buttons .btn-primary {
background-color: #8A502B !important;
border-color: #8A502B !important;
color: #ffffff !important;
}


/* ========================================================================== */
/* NAVBAR */
/* ========================================================================== */

/* NAVBAR LINK */
.custom-navbar .nav-link {
position: relative;
color: #ffffff;
transition: 0.3s ease;
padding-bottom: 4px;
text-shadow: 0 0 0 transparent;
}

/* Underline Emas */
.custom-navbar .nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background: #81B656; /* gold */
transition: width 0.35s ease;
border-radius: 20px;
}

/* Hover Text: Gold + Glow */
.custom-navbar .nav-link:hover {
color: #81B656; /* gold hotel */
text-shadow: 0 0 6px rgb(129, 182, 86),
0 0 12px rgb(129, 182, 86);
}

/* Underline muncul */
.custom-navbar .nav-link:hover::after {
width: 100%;
}

/* Active State */
.custom-navbar .nav-link.active {
color: #81B656;
text-shadow: 0 0 6px rgb(129, 182, 86),
0 0 12px rgb(129, 182, 86);
}

.custom-navbar .nav-link.active::after {
width: 100%;
}

/* === HOVER TRIGGER === */
.dropdown-hover:hover > .dropdown-menu {
display: block;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

/* === BASE DROPDOWN === */
.dropdown-menu {
display: block; /* penting untuk animasi */
opacity: 0;
position: absolute;
pointer-events: none;
transform: translateY(15px);
transition: all 0.35s ease;
background-color: #81B656;
border: none;
z-index: 3;
border-radius: 12px;
padding: 10px 0;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.dropdown-toggle {
display: block;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
font-size: var(--bs-nav-link-font-size);
font-weight: var(--bs-nav-link-font-weight);
color: var(--bs-nav-link-color);
text-decoration: none;
background: 0 0;
border: 0;
position: relative;
transition: 0.3s ease;
padding-bottom: 4px;
text-shadow: 0 0 0 transparent;
}
.dropdown-toggle::after {
display: none !important;
}


/* === ITEM STYLE === */
.dropdown-item {
color: #fff;
font-size: 16px;
padding: 10px 20px;
transition: all .25s ease;
}

/* === HOVER ITEM === */
.dropdown-item:hover {
background-color: rgba(255,255,255,0.2);
color: #fff;
padding-left: 26px;
}

/* === DIVIDER === */
.dropdown-divider {
border-color: rgba(255,255,255,0.4);
}

/* === CARET COLOR === */
/* === CARET COLOR === */
.nav-link.dropdown-toggle::after {
border-top-color: #81B656;
}



/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
z-index: 9999;
display: none;
overflow-y: auto;
}

.mobile-menu-content {
position: relative;
min-height: 100vh;
padding: 80px 30px 40px;
}

.close-menu {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
border: none;
color: #81B656;
font-size: 2.5rem;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10000;
}

.close-menu:hover {
transform: rotate(90deg);
color: #fff;
}

.mobile-menu-links {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 60px;
}

.mobile-nav-link {
color: #ffffff;
text-decoration: none;
font-size: 2rem;
font-weight: 500;
padding: 20px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(-30px);
}

.mobile-nav-link:hover {
color: #81B656;
padding-left: 25px;
text-shadow: 0 0 10px rgba(129, 182, 86, 0.5);
}

/* === MOBILE FACILITIES DROPDOWN === */
.mobile-facilities {
width: 100%;
}

/* Toggle Button */
.mobile-dropdown-toggle {
width: 100%;
background: transparent;
border: none;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}

/* Chevron Icon */
.mobile-dropdown-toggle i {
transition: transform 0.4s ease;
color: #81B656;
}

/* Submenu Container */
.mobile-dropdown {
max-height: 0;
overflow: hidden;
transition: all 0.5s ease;
padding-left: 10px;
}

/* Submenu Open */
.mobile-facilities.active .mobile-dropdown {
max-height: 500px;
margin-top: 10px;
}

/* Rotate Icon */
.mobile-facilities.active .mobile-dropdown-toggle i {
transform: rotate(180deg);
}

/* Sub Links */
.mobile-sub-link {
display: block;
color: #ffffff;
text-decoration: none;
font-size: 1.6rem;
padding: 14px 20px;
margin-left: 10px;
border-left: 2px solid rgba(129, 182, 86, 0.4);
transition: all 0.3s ease;
}

/* Hover Effect */
.mobile-sub-link:hover {
color: #81B656;
padding-left: 28px;
text-shadow: 0 0 8px rgba(129, 182, 86, 0.6);
}


.mobile-menu-footer {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hamburger Button Style */
.custom-navbar .fa-bars-staggered {
transition: all 0.3s ease;
}

.custom-navbar a:has(.fa-bars-staggered):hover i {
transform: scale(1.1);
filter: drop-shadow(0 0 8px #81B656);
}





/* ========================================================================== */
/* CSS untuk MODAL PROFILE */
/* ========================================================================== */

/* Profile Review Modal - Simple & Responsive */
.profile-review-modal .modal-content {
border-radius: 20px;
border: none;
}

.profile-review-header {
background: linear-gradient(135deg, #8A502B 0%, #6d3f22 100%);
color: white;
}

.profile-review-avatar {
border: 4px solid white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.profile-review-badge {
background: #81B656;
border: 3px solid white;
}

.info-card {
background: white;
border-radius: 12px;
border-left: 4px solid #8A502B;
transition: transform 0.3s ease;
}

.info-card:hover {
transform: translateY(-3px);
}

.info-card-title {
color: #8A502B;
font-weight: 600;
font-size: 0.85rem;
}

.info-card-icon {
background: linear-gradient(135deg, #8A502B 0%, #6d3f22 100%);
color: white;
border-radius: 8px;
}

.gender-badge.male {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
}

.gender-badge.female {
background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
color: white;
}

.address-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
border-radius: 12px;
}

.stat-icon {
background: linear-gradient(135deg, #8A502B 0%, #6d3f22 100%);
color: white;
border-radius: 50%;
}

.stat-value {
color: #8A502B;
}

.btn-edit-profile {
background: linear-gradient(135deg, #81B656 0%, #6a9645 100%);
color: white;
border: none;
transition: all 0.3s ease;
}

.btn-edit-profile:hover {
background: linear-gradient(135deg, #6a9645 0%, #5a8035 100%);
transform: translateY(-2px);
}

.btn-logout {
background: transparent;
color: #8A502B;
border: 2px solid #8A502B;
transition: all 0.3s ease;
}

.btn-logout:hover {
background: #8A502B;
color: white;
}

.verified-badge {
background: #81B656;
color: white;
}


.drop-photo-elegant {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px dashed #8A502B;
    background-color: #fff8e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: 0.3s;
}

.drop-photo-elegant:hover {
    background-color: #8a350082;
}

.drop-photo-elegant.has-image .upload-inner {
    display: none;
}

.gender-pill {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 50px;
    border: 2px solid #8A502B; 
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

input:checked + .gender-pill {
    background: #ff620089;
    color: #000;
}
.delete-photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(138, 80, 43, .65), rgba(138, 80, 43, 1));
    color: #fff;
    text-align: center;
    font-size: 12px;
    cursor: pointer;

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

    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.drop-photo-elegant.has-image:hover .delete-photo {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.form-control:focus {
    border-color: var(--warning);
    box-shadow: 0 0 0 .2rem rgba(138, 80, 43, .25);
}

.link-register {
    color: #8A502B;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.link-register:hover {
    color: #81B656;
    text-decoration: underline;
}