/* Booking Page Styles */

.booking-page {
    position: relative;
    min-height: 100vh;
    padding: 80px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(245, 240, 236, 0.92), rgba(249, 246, 242, 1));
    overflow: hidden;
}

/* Luxurious subtle SVG pattern behind content, tinted to theme copper */
.booking-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1200px 600px at 20% -10%, rgba(205, 130, 97, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(205, 130, 97, 0.08), transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgba(205,130,97,0.12)' stroke-width='1.2'%3E%3Cpath d='M120 10c25 35 25 70 0 105-25-35-25-70 0-105z'/%3E%3Cpath d='M120 125c25 35 25 70 0 105-25-35-25-70 0-105z'/%3E%3Cpath d='M10 120c35 25 70 25 105 0-35-25-70-25-105 0z'/%3E%3Cpath d='M125 120c35 25 70 25 105 0-35-25-70-25-105 0z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: auto, auto, 280px 280px;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    /* ensure background layer sits behind content */
}

/* ============================= */
/* Heritage & Luxury Showcase    */
/* ============================= */
.heritage-showcase {
    width: 100%;
    margin: 48px auto 0;
    max-width: 1280px;
    padding: 12px 0 56px;
}

.heritage-header {
    text-align: center;
    margin-bottom: 18px;
}

.heritage-heading {
    font-family: 'TAN - PEARL', var(--font-playfair-display), serif;
    font-size: clamp(32px, 5.2vw, 64px);
    color: var(--copper-primary);
    letter-spacing: .6px;
}

.heritage-subtitle {
    color: var(--text-dark);
    opacity: .85;
    margin-top: 6px;
}

/* Visual cards strip */
.heritage-visuals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 18px 0 26px;
}

.heritage-visuals .visual-card {
    position: relative;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    filter: saturate(0.92) contrast(1.02);
    transition: transform .25s ease, box-shadow .3s ease, filter .25s ease;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
    z-index: 1;
    /* sit above ::before background */
}

.heritage-visuals .visual-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
    filter: saturate(1.02);
}

.heritage-visuals .visual-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px 12px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}

/* Imagery using tasteful gradients + SVG textures as fallbacks */
.visual-card.kothi {
    background-image:
        linear-gradient(120deg, rgba(205, 130, 97, .25), rgba(0, 0, 0, .0)),
        url('https://r2imghtlak.mmtcdn.com/r2-mmt-htl-image/htl-imgs/202205171616408503-3c3e5a8adabe11ec86240a58a9feac02.jpg');
}

.visual-card.decor {
    background-image:
        linear-gradient(120deg, rgba(205, 130, 97, .22), rgba(0, 0, 0, .0)),
        url('https://cf.bstatic.com/xdata/images/hotel/max1024x768/428220712.jpg?k=e41df064b5084f9a36266a2176cd8b00787c801d0fbd602958a1b66f8034bde1&o=&hp=1');
}

.visual-card.garden {
    background-image:
        linear-gradient(120deg, rgba(205, 130, 97, .20), rgba(0, 0, 0, .0)),
        url('https://i.ibb.co/sG41v22/GARDEN-STONEBERRY.png');
}

.visual-card.nature {
    background-image:
        linear-gradient(120deg, rgba(205, 130, 97, .2), rgba(0, 0, 0, .0)),
        url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=1600&auto=format&fit=crop');
}

.visual-card.legacy {
    background-image:
        linear-gradient(120deg, rgba(205, 130, 97, .24), rgba(0, 0, 0, .0)),
        url('https://content.skyscnr.com/available/2203243510/2203243510_WxH.jpg');
}

/* Content grid */
.heritage-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 18px;
}

.heritage-block {
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
    transition: transform .25s ease, box-shadow .3s ease;
    position: relative;
    z-index: 1;
    /* sit above ::before background */
}

.heritage-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.heritage-block h3 {
    margin: 0 0 8px;
    font-family: var(--font-playfair-display);
    color: var(--text-dark);
}

.heritage-block p {
    margin: 0;
    line-height: 1.6;
}

.amenities-list,
.stays-list {
    margin: 0;
    padding-left: 18px;
}

.amenities-list li,
.stays-list li {
    margin: 6px 0;
}

.amenities-list .icon {
    margin-right: 6px;
}

/* Decorative Bengali motif */
.bengali-motif {
    margin-top: 26px;
    height: 56px;
    background:
        radial-gradient(circle at 12.5% 50%, rgba(245, 191, 168, 0.28) 0 6px, transparent 3px),
        radial-gradient(circle at 37.5% 50%, rgba(245, 191, 168, 0.28) 0 6px, transparent 3px),
        radial-gradient(circle at 62.5% 50%, rgba(245, 191, 168, 0.28) 0 6px, transparent 3px),
        radial-gradient(circle at 87.5% 50%, rgba(245, 191, 168, 0.28) 0 6px, transparent 3px);
    background-size: 25% 100%;
}

.booking-page .booking-header {
    text-align: center;
    margin-bottom: 18px;
}

.booking-page .booking-header .title {
    font-family: 'TAN - PEARL', var(--font-playfair-display), serif;
    color: var(--copper-primary);
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0.5px;
}

.booking-page .booking-header .subtitle {
    font-family: var(--font-montserrat);
    color: var(--text-dark);
    opacity: 0.8;
    margin-top: 6px;
}

/* Card reuses glassmorphism from hero overlay with tweaks */
.booking-page .booking-overlay {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 960px;
    margin: 16px auto 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
    z-index: 1;
    /* sit above ::before background */
}

/* Form layout - start from desktop and collapse down */
.booking-page .booking-form {
    /* Give adults/children columns equal width so counters align and have room */
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1.2fr;
}

/* Prevent grid items from enforcing content-based minimums that cause overflow */
.booking-page .booking-form .form-field {
    min-width: 0;
}

/* Make contact fields align nicely on desktop */
.booking-page .booking-form .field-name,
.booking-page .booking-form .field-mobile,
.booking-page .booking-form .field-email {
    grid-column: span 2;
}

/* Center the confirm button section on desktop */
.booking-page .booking-form .field-submit {
    grid-column: 1 / -1;
    justify-self: center;
}

/* Ensure counters are comfortably sized on desktop */
.booking-page .booking-form .field-adults,
.booking-page .booking-form .field-children {
    width: 102%;
}

.booking-page .booking-form .counter {
    grid-template-columns: 44px 1fr 44px;
}

.booking-page .booking-form .counter-btn {
    width: 44px;
    height: 48px;
    font-size: 18px;
}

/* Ensure new input types match existing control styles */
.booking-page .booking-form input[type="text"],
.booking-page .booking-form input[type="tel"],
.booking-page .booking-form input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
    font: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) inset;
    min-height: 44px;
}

/* Tablet */
@media (max-width: 1024px) {
    .booking-page .booking-form {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .booking-page .booking-form .field-adults,
    .booking-page .booking-form .field-children {
        grid-column: span 2;
    }

    .booking-page .booking-form .field-name,
    .booking-page .booking-form .field-mobile,
    .booking-page .booking-form .field-email {
        grid-column: span 2;
    }

    /* Keep button centered but full width on tablet */
    .booking-page .booking-form .field-submit {
        grid-column: span 4;
        justify-self: center;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .booking-page {
        padding: 64px 14px;
    }

    .booking-page .booking-overlay {
        max-width: calc(100% - 28px);
    }

    .booking-page .booking-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .booking-page .booking-form .field-submit {
        grid-column: auto;
        justify-self: stretch;
    }
}

/* Small phones */
@media (max-width: 425px) {
    .booking-page {
        padding: 56px 12px;
    }

    .booking-page .booking-overlay {
        max-width: calc(100% - 20px);
    }
}

/* Responsive tweaks for heritage section */
@media (max-width: 1200px) {
    .heritage-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .heritage-visuals {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .heritage-visuals {
        grid-template-columns: repeat(2, 1fr);
    }

    .heritage-grid {
        grid-template-columns: 1fr;
    }
}