/* Sanchita Hotel & Restaurant — Pixel-Perfect Custom Styling */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Caveat:wght@400;600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
    --color-green-deep: #003D32;
    --color-green-dark: #062B25;
    --color-ivory: #FFF9F0;
    --color-sand: #F3E8D8;
    --color-terracotta: #C65327;
    --color-burnt-orange: #A94320;
    --color-champagne: #E8C79A;
    --color-text-main: #17221E;
    --color-text-muted: #625D55;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text-main);
    background-color: #FFFFFF;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', Georgia, Cambria, "Times New Roman", serif;
}

.font-script {
    font-family: 'Alex Brush', 'Caveat', cursive;
}

.font-handwriting {
    font-family: 'Caveat', 'Alex Brush', cursive;
}

/* Color Utilities */
.bg-brand-deep { background-color: var(--color-green-deep); }
.bg-brand-dark { background-color: var(--color-green-dark); }
.bg-brand-ivory { background-color: var(--color-ivory); }
.bg-brand-sand { background-color: var(--color-sand); }
.bg-brand-terracotta { background-color: var(--color-terracotta); }
.bg-brand-terracotta:hover { background-color: var(--color-burnt-orange); }

.text-brand-deep { color: var(--color-green-deep); }
.text-brand-dark { color: var(--color-green-dark); }
.text-brand-terracotta { color: var(--color-terracotta); }
.text-brand-sand { color: var(--color-sand); }
.text-brand-champagne { color: var(--color-champagne); }
.text-brand-muted { color: var(--color-text-muted); }

.border-brand-sand { border-color: var(--color-sand); }
.border-brand-terracotta { border-color: var(--color-terracotta); }

/* Booking Bar Luxury Floating Shadow */
.booking-bar-shadow {
    box-shadow: 0 20px 45px -10px rgba(6, 43, 37, 0.22), 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Room & Card Transitions */
.room-card-hover {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.room-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -5px rgba(0, 61, 50, 0.15);
}

/* Lightbox Modal */
#lightboxModal {
    transition: opacity 0.25s ease-in-out;
}
#lightboxModal.hidden {
    display: none;
    opacity: 0;
}
#lightboxModal:not(.hidden) {
    display: flex;
    opacity: 1;
}

/* Hero Carousel */
.hero-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Image zoom effect on hover */
.zoom-effect {
    overflow: hidden;
}
.zoom-effect img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-effect:hover img {
    transform: scale(1.06);
}

/* Tropical Leaf Watermark Background for Sections */
.bg-tropical-leaf {
    background-image: 
        radial-gradient(circle at 5% 20%, rgba(0, 61, 50, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 95% 80%, rgba(0, 61, 50, 0.04) 0%, transparent 40%);
}

.bg-tropical-leaf-dark {
    background-image: 
        radial-gradient(circle at 0% 10%, rgba(0, 200, 150, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 100% 90%, rgba(0, 200, 150, 0.06) 0%, transparent 50%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F3E8D8;
}
::-webkit-scrollbar-thumb {
    background: #003D32;
    border-radius: 4px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================================
   SANCHITA BOTANICAL DECORATION SYSTEM
   Art-directed luxury resort tropical foliage
   ======================================================== */
.botanical-decor,
.tropical-corner-leaf-wrapper {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    overflow: visible;
    line-height: 0;
}

.botanical-decor img,
.tropical-corner-leaf-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(1, 27, 14, 0.08));
    transform-origin: 0% 0%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.botanical-decor--tl {
    top: 0;
    left: 0;
}
.botanical-decor--tl img {
    --leaf-base-transform: none;
    transform: none;
    transform-origin: 0% 0%;
}

.botanical-decor--tr {
    top: 0;
    right: 0;
}
.botanical-decor--tr img {
    --leaf-base-transform: scaleX(-1);
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

.botanical-decor--bl {
    bottom: 0;
    left: 0;
}
.botanical-decor--bl img {
    --leaf-base-transform: scaleY(-1);
    transform: scaleY(-1);
    transform-origin: 50% 50%;
}

.botanical-decor--br {
    bottom: 0;
    right: 0;
}
.botanical-decor--br img {
    --leaf-base-transform: scale(-1, -1);
    transform: scale(-1, -1);
    transform-origin: 50% 50%;
}

/* Responsive Proportional Sizes */
.botanical-decor--sm {
    width: clamp(65px, 8vw, 105px);
}
.botanical-decor--md {
    width: clamp(85px, 12vw, 145px);
}
.botanical-decor--lg {
    width: clamp(110px, 16vw, 195px);
}
.botanical-decor--xl {
    width: clamp(130px, 20vw, 235px);
}

/* Luxury Gold Variant Shadow Tuning */
.botanical-decor--gold img {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.38));
}

/* Subtle Organic Sway Animation (Respects Reduced Motion) */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .botanical-decor--sway img,
    .tropical-corner-leaf-wrapper.sway-effect img {
        animation: subtleBotanicalSway 10s ease-in-out infinite alternate;
    }
}

@keyframes subtleBotanicalSway {
    0% { transform: var(--leaf-base-transform, none) rotate(0deg); }
    50% { transform: var(--leaf-base-transform, none) rotate(0.6deg) scale(1.008); }
    100% { transform: var(--leaf-base-transform, none) rotate(-0.5deg) scale(0.995); }
}

.botanical-decor--tr.botanical-decor--sway img {
    --leaf-base-transform: scaleX(-1);
}
.botanical-decor--bl.botanical-decor--sway img {
    --leaf-base-transform: scaleY(-1);
}
.botanical-decor--br.botanical-decor--sway img {
    --leaf-base-transform: scale(-1, -1);
}

/* Scrollbar hiding for swipeable mobile containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}