/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after {
    font-family: 'Tajawal', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .section-title, .font-display {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* ========================================
   DatePicker Fix
   ======================================== */
.react-datepicker-popper {
    z-index: 9999 !important;
}

.react-datepicker-wrapper {
    width: 100%;
}

.react-datepicker__day-names {
    display: flex !important;
    justify-content: space-around !important;
    gap: 4px !important;
    padding: 8px 4px !important;
}

.react-datepicker__day-name {
    width: 36px !important;
    margin: 0 2px !important;
    text-align: center !important;
    font-size: 12px !important;
}

.react-datepicker__week {
    display: flex !important;
    justify-content: space-around !important;
}

.react-datepicker__day {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    margin: 2px !important;
    text-align: center !important;
}

.react-datepicker__month-container {
    width: 280px !important;
}

.react-datepicker {
    font-family: 'Tajawal', sans-serif !important;
}

/* ========================================
   Guest Picker Dropdown Fix - مهم جداً
   ======================================== */
.z-50 {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Make the booking form container NOT clip */
.bg-white.shadow-xl.rounded-2xl,
.bg-white.shadow-xl,
.bg-white.rounded-2xl,
form.space-y-6,
.grid.lg\:grid-cols-5,
.grid.md\:grid-cols-2 {
    overflow: visible !important;
}

/* Parent sections must allow overflow */
section:has(.z-50),
div:has(.z-50) {
    overflow: visible !important;
}

/* The specific booking bar on homepage */
.container.mx-auto.px-4 > .bg-white {
    overflow: visible !important;
}

/* ========================================
   Hero Section Fix
   ======================================== */
section .text-5xl,
section .text-7xl,
section .text-8xl,
.text-5xl.font-display,
.text-7xl.font-display,
.text-8xl.font-display {
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
}

[dir="rtl"] .text-5xl,
[dir="rtl"] .text-7xl,
[dir="rtl"] .text-8xl {
    line-height: 1.4 !important;
}

section .text-lg.tracking-\[0\.3em\],
section .text-xl.tracking-\[0\.3em\] {
    margin-bottom: 16px !important;
}

section h1 span.block {
    display: block !important;
    margin-bottom: 8px !important;
}

/* ========================================
   Swiper Gallery Fix
   ======================================== */
.swiper {
    overflow: hidden !important;
    position: relative !important;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    color: #1a1a2e !important;
    z-index: 10 !important;
}

.swiper-button-next {
    right: 10px !important;
    left: auto !important;
}

.swiper-button-prev {
    left: 10px !important;
    right: auto !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: bold !important;
}

.thumbs-swiper {
    margin-top: 10px !important;
    overflow: hidden !important;
}

.thumbs-swiper .swiper-slide {
    opacity: 0.6 !important;
    cursor: pointer !important;
}

.thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1 !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 4px !important;
}

/* ========================================
   Booking Page Fixes
   ======================================== */
.sticky.top-32,
.lg\:col-span-1 .sticky {
    overflow: hidden !important;
}

.lg\:col-span-1 .bg-white.shadow-lg {
    overflow: hidden !important;
}

.lg\:col-span-2 {
    overflow: visible !important;
}

/* ========================================
   Form Fields Fix
   ======================================== */
.label-luxury {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.input-luxury {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    background: #fff !important;
}

.input-luxury:focus {
    outline: none !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

select.input-luxury {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 20px !important;
    padding-left: 40px !important;
}

/* ========================================
   Filter Section
   ======================================== */
section.sticky.top-20 {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    padding: 16px 0 !important;
}

section.sticky .flex-wrap {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

section.sticky select {
    min-width: 160px !important;
    padding: 10px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* ========================================
   Body
   ======================================== */
body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ========================================
   Nights Badge Fix - إصلاح عدد الليالي
   ======================================== */

/* Position the nights text absolutely so it doesn't affect layout */
.grid.lg\:grid-cols-5 > div:nth-child(2) {
    position: relative !important;
}

.grid.lg\:grid-cols-5 > div:nth-child(2) > p.text-hotel-accent {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 12px !important;
    background: #D4AF37 !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* Align all booking form items */
.grid.lg\:grid-cols-5 {
    align-items: flex-end !important;
}

.grid.lg\:grid-cols-5 > div {
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   Date Picker Overflow Fix
   ======================================== */

/* Allow overflow on booking form container */
.bg-white.shadow-xl,
.bg-white.rounded-2xl,
.bg-white.shadow-xl.rounded-2xl,
form.space-y-6,
.grid.lg\:grid-cols-5,
.container.mx-auto {
    overflow: visible !important;
}

/* Date picker popper should be on top */
.react-datepicker-popper {
    z-index: 99999 !important;
}

/* The booking bar section */
section + .relative,
.py-16 + div,
.container > .bg-white {
    overflow: visible !important;
}

/* All parent elements up to body */
main, 
section,
.min-h-screen {
    overflow: visible !important;
}

/* Only body should scroll */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ========================================
   Booking Page Sidebar Fix
   ======================================== */

/* Keep sidebar contained */
.lg\:col-span-1 > div,
.sticky.top-32 {
    overflow: hidden !important;
}

/* The summary card specifically */
.lg\:col-span-1 .bg-white.shadow-lg,
.lg\:col-span-1 .bg-white.p-6 {
    overflow: hidden !important;
}

/* Image in summary should be contained */
.lg\:col-span-1 img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   Saudi Riyal New Symbol
   ======================================== */

.sar-symbol::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='currentColor' d='M70 15v30H45V15h10v10h15V15h-10V5H30v10H20v10h10v30H20v10h10v10h10V65h15v10h10V65h15v10h10V65H70V55h10V45H70V15zM45 45H35V35h10v10zm15 10H45V45h15v10z'/%3E%3Cpath fill='currentColor' d='M80 85H15v10h65V85z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 4px;
}

/* ========================================
   Hero Text Fix - IMPORTANT
   ======================================== */

/* Hero main heading */
.text-5xl.font-display,
.text-7xl.font-display,
.text-8xl.font-display,
h1.text-5xl,
h1.text-7xl,
h1.text-8xl,
.md\:text-7xl,
.lg\:text-8xl {
    line-height: 1.2 !important;
}

/* Hero section h1 specifically */
section h1 {
    line-height: 1.3 !important;
}

section h1 span {
    display: block !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

/* The gold "Hotel" text */
.text-hotel-accent {
    display: block !important;
    margin-top: 10px !important;
}