/*
Theme Name: Kanopi Kalong Booking
Author: Tommy Ng
Version: 1.0
Description: WordPress theme for Kanopi Kalong booking pages - loads main site CSS
*/
/* ==========================================================================
   WP-SPECIFIC OVERRIDES ONLY
   Main site CSS (main.css) is loaded first via functions.php
   Calendar CSS (kk2026.css) is loaded second
   This file only contains WordPress-specific adjustments
   ========================================================================== */
/* Remove flex layout from body - causes villa-selector-wrapper to fill viewport */
body.page-template-booking {
    display: block;
}

/* Disable fade-in animations for WP pages */
.page-template-booking section {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

/* Villa Selector Wrapper - full width bar below nav */
.villa-selector-wrapper {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: rgba(21, 20, 17, .5);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    z-index: 100;
}

.villa-selector-wrapper .container {
    max-width: 1024px;
    padding: 0 1rem;
    margin: 0 auto;
}

.villa-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.villa-selector label {
    color: var(--light3);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.villa-selector select {
    background: var(--dark2);
    color: var(--light2);
    border: 2px solid var(--light4);
    border-radius: 6px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: "Bitter", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23b9beaa" d="M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    min-width: 140px;
}

.villa-selector select:hover {
    background-color: var(--dark);
    border-color: var(--ac);
}

.villa-selector select:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px rgba(95, 126, 93, 0.2);
}

/* Adjust main content padding - roughly 60px nav + 50px villa selector */
.page-template-booking main {
    padding-top: 110px;
}

.page-template-default main{
    padding-top: 60px;
}

footer {
    margin-top: 0;
}

.admin-bar nav {
    position: absolute;
    top: 31px
}

.admin-bar .villa-selector-wrapper {
    position: absolute;
    top: 91px
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .admin-bar nav {
        top: 45px
    }

    .admin-bar .villa-selector-wrapper {
        top: 105px
    }

    /* On mobile: move villa selector to bottom as fixed bar */
    .villa-selector-wrapper {
        height: auto;
        padding: 1rem;
        z-index: 100;
    }

    .villa-selector-wrapper .container {
        max-width: 100%;
        padding: 0;
    }

    .villa-selector {
        justify-content: center;
    }

    .villa-selector select {
        min-width: 200px;
    }
}

@media screen and (min-width: 768px) {
    .smaller>* {
        font-size: 90%;
        opacity: .95
    }
}

.book-info {
    gap: .6875rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--dark2);
    margin-bottom: 2rem;
}

.book-info .card {
    background-color: var(--dark4);
}

.book-info .card h3 {
    margin-bottom: 0;
}