/* Add to your CSS imports */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

.booking-modal-header .form-title, 
.calendar-card h3,
.booking-step-title {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
    color: #1a4d2e; /* Darker green for text */
}

:root {
  /* Primary Brand Color - A rich, premium green */
  --primary: #2d6a4f; 
  /* Accent/Action Color - Bright, inviting green */
  --accent: #6ab874; 
  /* Highlight - A warm sand/gold for hover states (Luxury feel) */
  --highlight: #e9c46a; 
  /* Background - Soft off-white, not harsh white */
  --bg-soft: #f8fdf9; 
  /* Text Colors */
  --text-dark: #1b4332;
  --text-light: #f3f3f3;
}

/* Animation Keyframes */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Add the slow zoom effect */
  animation: kenBurns 15s ease-in-out infinite alternate;
}

/* Add a gradient overlay so text pops */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%);
  pointer-events: none;
}

/* ===========================
   RESET + BASE
=========================== */
* {
  box-sizing: border-box;
}
body {
    margin: 0;
    /* Animated Gradient: Deep Green -> Soft Sand -> Light Blue */
    background: linear-gradient(-45deg, #1b4332, #2d6a4f, #e9c46a, #a8dadc);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    /* Ensure content is always readable */
    color: #222;
    min-height: 100vh;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    background: url('/cdms/casadaisy/uploads/subtle-leaves-bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}

/* Apply Glassmorphism to containers */
.calendar-card, .booking-modal-content, .guest-wrap .left {
    background: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    backdrop-filter: blur(12px); /* The Blur Effect */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Softer, colored shadow */
}

/* 1. Pulse Animation for the "Book" button */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(106, 184, 116, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(106, 184, 116, 0); }
    100% { box-shadow: 0 0 0 0 rgba(106, 184, 116, 0); }
}

#payment-button {
    animation: pulse-green 2s infinite; /*Subtle pulse to draw attention*/
}

/* 2. Lift Cards on Hover */
.tab:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(106, 184, 116, 0.2);
}

/* 3. Smooth Input Focus */
input:focus, select:focus {
    transform: scale(1.01);
    border-color: var(--accent);
    box-shadow: 0 4px 15px rgba(106, 184, 116, 0.15);
}

/* Make available dates look like buttons */
.flatpickr-day:not(.flatpickr-disabled):not(.today) {
    background: #f8fff9;
    border: 1px solid #e0e0e0;
    margin: 3px 0; /* Add spacing between dates */
    border-radius: 8px !important; /* Softer edges */
    transition: all 0.2s;
}

.flatpickr-day:not(.flatpickr-disabled):not(.today):hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
    transform: scale(1.1); /* Pop effect */
}


/* ===========================
   ADMIN STYLES (Unchanged)
=========================== */
.wrap {
  max-width: 1100px;
  margin: 18px auto;
  padding: 12px;
}
header h1 {
  margin: 0 0 12px;
}
.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.controls input {
  flex: 1;
  padding: 10px;
  border: 1px solid #36bb41;
  border-radius: 6px;
}
.controls button {
  padding: 10px 14px;
  border: none;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.controls button:hover {
  background: #0d5817;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
td img {
  max-width: 120px;
  height: auto;
  border-radius: 6px;
}

/* ===========================
   ADMIN MODAL (Unchanged)
=========================== */
/* Updated Modal Overlay - NO BLUR for performance */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  
  /* Use a darker solid color instead of blur */
  background: rgba(0, 0, 0, 0.7); 
  
  /* REMOVE THESE LINES causing the lag: */
  /* backdrop-filter: blur(3px); */
  /* -webkit-backdrop-filter: blur(3px); */
  
  padding: 10px;
  z-index: 1001; 
  
  /* Optional: faster fade in */
  transition: opacity 0.2s ease;
}

/* Ensure the modal content is solid white */
.modal-inner {
  background: #ffffff; /* Ensure this is solid, not rgba */
  padding: 24px 28px;
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  
  /* Use a simpler shadow */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  
  animation: fadeIn 0.2s ease-in-out;
}
.modal-inner h2 {
  margin: 0 0 15px;
  text-align: center;
  color: var(--accent);
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 8px;
  font-size: 22px;
}
#frm label {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
  font-weight: 600;
  color: #333;
}
#frm input[type="text"],
#frm input[type="file"],
#frm select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#frm input:focus,
#frm select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(43,122,120,0.3);
}
.preview {
  margin-top: 10px;
  text-align: center;
}
.preview img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.modal-actions button {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
#saveBtn {
  background: var(--accent);
  color: white;
}
#saveBtn:hover {
  background: #6ab874;
}
#cancelBtn {
  background: #ddd;
  color: #333;
}
#cancelBtn:hover {
  background: #ccc;
}

@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.9);}
  to {opacity: 1; transform: scale(1);}
}

/* Add a helpful prompt above the calendar via CSS */
.calendar-card {
    position: relative;
    border-top: 5px solid var(--accent); /* Adds a green accent bar at top */
}

/* Make the 'Available' dates sparkle slightly */
.flatpickr-day:not(.flatpickr-disabled):not(.today) {
    background: #ffffff;
    border: 1px solid #eee;
    font-weight: 600;
    color: #1a4d2e;
}

/* When hovering an available date, make it inviting */
.flatpickr-day:not(.flatpickr-disabled):not(.today):hover {
    background: #febf5e !important; /* Gold hover */
    color: #fff !important;
    border-color: #febf5e !important;
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(254, 191, 94, 0.4);
    z-index: 10;
}
/* ===========================
   GUEST SIDE (NEW DESIGN)
=========================== */
.guest-wrap {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 24px;
}

.guest-wrap header h1 {
  font-family: "Great Vibes", cursive; /* Uses your imported font */
  font-size: 42px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 30px;
  font-weight: 400;
}

/* --- Tabs (New Minimalist Design) --- */
.tabs {
    gap: 15px;
}

.tab {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid rgba(0,0,0,0.05);
    font-family: 'Playfair Display', serif; /* Elegant font */
    font-size: 16px;
    padding: 12px 28px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.tab:hover {
    transform: translateY(-3px);
    color: var(--primary);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Lift effect */
    border-color: var(--primary);
}

.tab.active {
    background: var(--primary); /* Deep Green */
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.3); /* Green Glow */
}

/* --- Layout (New Minimalist Design) --- */
.split {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.left {
 flex: 1; /* Takes remaining space */
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* nice shadow */
}

.right {
  width: 380px; /* Wider for better calendar breathing room */
  flex-shrink: 0;
}

/* --- Slideshow (New Minimalist Design) --- */
.slideshow {
  margin-top: 0; /* Removed old margin */
  position: relative !important;
  width: 100%;
  height: 450px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slides-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  transition: opacity 0.8s ease-in-out;
}
.slide.active {
  opacity: 1;
  z-index: 1;
}
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Slideshow Controls (Unchanged, but now on a clean background) --- */
/* --- Slideshow Controls (Overlay on Image) --- */
.slideshow-controls {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 display: flex;
 justify-content: space-between;
 transform: translateY(-50%);
 padding: 0 12px;
 z-index: 5;
 pointer-events: none;
}
.slideshow-controls button {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.2s;
}
.slideshow-controls button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}
.slideshow-controls .material-icons {
  font-size: 24px;
  line-height: 1;
}

/* --- Calendar (New Minimalist Card Design) --- */
.calendar-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Floating effect */
  text-align: center;
}

.calendar-card h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#bookDate {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
  transition: 0.3s;
}
/* Update .calendar-card and .guest-wrap .left */
.calendar-card, .guest-wrap .left, .booking-modal-content {
    background: rgba(255, 255, 255, 0.9); /* Slightly more opaque for readability */
    backdrop-filter: blur(20px); /* Stronger blur */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.05), /* Soft ambient shadow */
        0 1px 3px rgba(0, 0, 0, 0.1);    /* Crisp outline shadow */
    border-radius: 20px; /* Smoother corners */
}
.flatpickr-calendar {
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
}
.flatpickr-rContainer, .flatpickr-days, .dayContainer {
  width: 100% !important;
}
.flatpickr-day {
  border-radius: 8px !important;
  margin: 2px 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  border: 1px solid transparent !important;
}
.flatpickr-day.selected {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: bold;
}
.flatpickr-day:not(.flatpickr-disabled):not(.today):hover {
  background: #f0fdf4 !important;
  border-color: var(--accent) !important;
}

/* Reserved Dates (Matches the green legend) */
.flatpickr-day.flatpickr-disabled[title="Reserved"] {
    background: #c7f9cc !important; /* Soft Green */
    color: #1b4d24 !important; /* Dark Green Text */
    opacity: 1 !important;
    font-weight: 500;
}
.flatpickr-day.today {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 500;
}
#selected {
  display: none; /* Hide this old element */
}

/* ===========================
   FORM FIELDS (Unchanged)
   (These are mostly used by the modal, which is already minimalist)
=========================== */
.payment-button {
  padding: 9px 15px;
  border: none;
  background-color: #218838;
  color: #fff;
  font-weight: 350;
  border-radius: 6px;
  cursor: pointer;
  min-width: 120px;
}
.form-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.form-group {
  margin-bottom: 20px;
}
.reservationid {
  width: 16% !important;
}
.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.form-group label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: #444;
}
input[type="text"],
select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.form-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  flex-grow: 1;
  flex-basis: 200px; 
}
.form-col.small {
  flex: 0 0 120px;
}
#optionCol label {
  display: block;
  color: #444;
}
.hidden {
  display: none !important;
}
.required::after {
    content: " *";
    color: red;
}

/* Villa field styles */
.reservationType{
  width: 150px; 
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.villa-checkintime, .villa-checkouttime{
  width: 100px !important; 
}
.villa-totalnights {
  width: 70px !important;
}
.villa-totalamount, .villa-bookingsource {
  width: 150px !important;
}
.villa-sex{
  width: 90% !important;
}

/* Pavilion Field Styles */
.paviliontype{
  width: 150px; 
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.pavilion-checkintime {
  width: 100% !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.pavilion-checkouttime,
.pavilion-ingress,
.pavilion-egress {
  width: 120px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.pavilion-thours {
  width: 90px !important;
}
.pavilion-totalamount, .pavilion-bookingsource {
  width: 130px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Exclusive Field Styles */
.exclusive-checkintime, 
.exclusive-villa {
  width: 120px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.exclusive-pavcheckintime {
  width: 100% !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.exclusive-checkouttime,
.exclusive-pavcheckouttime,
.exclusive-ingress,
.exclusive-egress {
  width: 120px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.exclusive-thours {
  width: 90px !important;
}
.exclusive-totalamountm, .exclusive-bookingsource{
  width: 130px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.exclusive-tnight, .exclusive-villaguests {
  width: 70px !important;
}
.exclusive-pavilion{
  width: 130px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Guest Field Styles */
.villa-number {
  width: 190px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.villa-age {
  width: 70px !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.villa-email{
  width: 130% !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.villa-street {
  width: 130px !important;
}
.villa-housenumber {
  width: 80% !important;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}


/* ===========================
   BOOKING MODAL STYLES (Unchanged)
   (These are already minimalist and responsive)
=========================== */
.booking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Darker background, NO BLUR */
  /* backdrop-filter: blur(5px); <--- REMOVE THIS LINE (Cause of lag) */
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease; /* Faster transition */
}

.booking-modal-body input, 
.booking-modal-body select {
    width: 100% !important; /* Force them to fit the grid column exactly */
    max-width: 100%;
    box-sizing: border-box;
    height: 48px; /* Consistent height for all fields */
}

.booking-modal-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.booking-modal-body input[id$="reservationdate"],
.booking-modal-body input[id$="checkindate"],
.booking-modal-body input[id$="checkoutdate"] {
    width: 100% !important;
    max-width: 100%;
    min-width: 0; /* Prevents flex items from overflowing */
}

body.modal-open {
  overflow: hidden; /* Hides main scrollbar */
  height: 100vh;    /* Prevents background jump */
}

.booking-modal-content {
  background: #ffffff; /* Solid White = No Lag */
  backdrop-filter: none; /* DISABLE BLUR */
  -webkit-backdrop-filter: none; /* DISABLE BLUR */
  width: 100%;
  max-width: 850px;
  height: auto;
  max-height: 90vh; /* Leave some space */
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Tighter, faster shadow */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* When the body has class 'modal-open', pause the background animation */
body.modal-open {
    animation-play-state: paused !important;
}
.booking-modal-overlay:not(.hidden) .booking-modal-content {
  transform: translateY(0);
}
.booking-modal-header {
  padding: 20px 30px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.booking-modal-header .form-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.booking-modal-close {
  background: #f8f9fa;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.booking-modal-close:hover {
  background: #ffe5e5;
  color: #dc3545;
  transform: rotate(90deg);
}

.modal-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #f0f0f0;
}

.modal-progress-fill {
  height: 100%;
  background: var(--accent); /* #6ab874 */
  width: 33%; /* Starts at step 1 */
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(106, 184, 116, 0.5);
}

.booking-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
  background: #fafafa; /* Very light grey for contrast */
}

.booking-step:not(.active) {
  display: none;
}

.booking-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guestinformation {
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  display: block;
}

.booking-step:not(.active) {
  display: none;
}
.booking-modal-footer {
  background: #fff;
  padding: 20px 30px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space between text and buttons */
}

#step-indicator {
  font-size: 0.9rem;
  font-weight: 600;
  color: #a0aec0;
}

.footer-buttons {
  display: flex;
  gap: 12px;
}

.modal-nav-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-nav-btn:not(.primary) {
  background-color: #edf2f7;
  color: #4a5568;
}
.modal-nav-btn:not(.primary):hover {
  background-color: #e2e8f0;
  color: #2d3748;
}

.modal-nav-btn.primary {
  background: linear-gradient(135deg, var(--accent), #5a9e65);
  color: white;
  box-shadow: 0 4px 12px rgba(106, 184, 116, 0.3);
}
.modal-nav-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(106, 184, 116, 0.4);
}

/* Hidden state helper */
.hidden { display: none !important; }

.modal-nav-btn {
  padding: 9px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.modal-nav-btn.primary {
  background-color: var(--accent);
  color: white;
}
.modal-nav-btn.primary:hover {
  background-color: #5a9e65;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.modal-nav-btn:not(.primary) {
  background-color: #e0e0e0;
  color: #333;
}
.modal-nav-btn:not(.primary):hover {
  background-color: #d1d1d1;
}
#modal-btn-back.hidden,
#modal-btn-next.hidden,
#payment-button.hidden {
  display: none;
}
#payment-button {
  background-color: #218838;
  color: white;
  font-size: 15px;
}
#payment-button:hover {
  background-color: #1c7430;
}

/* === MINIMALIST MODAL OVERRIDES (Unchanged) === */
.booking-modal-content {
  border-radius: 10px; 
}
.booking-modal-header {
  padding: 20px 30px;
  border-bottom: none; 
}
.booking-modal-header .form-title {
  font-size: 22px;
  font-weight: 600;
}
.booking-modal-body {
  padding: 10px 30px 30px 30px; 
}
.booking-modal-footer {
  background-color: #fff; 
  border-top: 1px solid #f0f0f0; 
  padding: 20px 30px;
}
.booking-step-title {
  font-size: 16px;
  font-weight: 600;
  color: #333; 
  margin-bottom: 25px; 
}
.booking-modal-body .form-row {
  display: grid;
  /* This ensures columns are at least 200px wide, but grow evenly */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 20px;
  margin-bottom: 20px;
}
.booking-modal-body .form-col {
  display: flex;
  flex-direction: column;
}
.booking-modal-body .villa-checkintime, 
.booking-modal-body .villa-checkouttime,
.booking-modal-body .villa-totalnights,
.booking-modal-body .villa-age,
.booking-modal-body .villa-totalamount,
.booking-modal-body .villa-bookingsource,
.booking-modal-body .paviliontype,
.booking-modal-body .pavilion-checkouttime,
.booking-modal-body .pavilion-ingress,
.booking-modal-body .pavilion-egress,
.booking-modal-body .pavilion-thours,
.booking-modal-body .pavilion-totalamount, 
.booking-modal-body .pavilion-bookingsource,
.booking-modal-body .exclusive-checkintime,
.booking-modal-body .exclusive-villa,
.booking-modal-body .exclusive-checkouttime,
.booking-modal-body .exclusive-pavcheckouttime,
.booking-modal-body .exclusive-ingress,
.booking-modal-body .exclusive-egress,
.booking-modal-body .exclusive-thours,
.booking-modal-body .exclusive-totalamount, 
.booking-modal-body .exclusive-bookingsource,
.booking-modal-body .exclusive-tnight, 
.booking-modal-body .exclusive-villaguests,
.booking-modal-body .exclusive-pavilion,
.booking-modal-body .villa-number,
.booking-modal-body .villa-email,
.booking-modal-body .villa-housenumber {
    width: 100% !important; 
}
.booking-modal-body .reservationid,
.booking-modal-body .reservationid * {
    width: 100% !important; /* Let reservation ID fill its column too */
}
.booking-modal-body label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 6px;
  transition: color 0.2s;
}

.booking-modal-body label.required::after {
  content: " *";
  color: #e53e3e;
}

.form-legend {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    text-align: right;
    font-style: italic;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.form-legend span {
    color: #e53e3e;
    font-weight: bold;
    font-size: 1.1em;
}

.booking-modal-body input[type="text"],
.booking-modal-body input[type="number"],
.booking-modal-body input[type="email"],
.booking-modal-body input[type="time"],
.booking-modal-body select {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem; /* 16px prevents iOS zoom */
  font-family: inherit;
  color: #2d3748;
  background: #ffffff;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.booking-modal-body input:focus,
.booking-modal-body select:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(106, 184, 116, 0.15);
  outline: none;
}

.booking-modal-body input:disabled,
.booking-modal-body input[readonly],
.booking-modal-body select:disabled {
  background-color: #f4f4f4; /* Slightly darker grey bg */
  border-color: #d1d5db;
  color: #212529; /* Dark grey/black text */
  cursor: not-allowed;
  font-weight: 600; /* Make it slightly bolder */
  opacity: 1; /* Force full opacity (fixes iOS dimming) */
  -webkit-text-fill-color: #212529; /* Specific fix for Safari/iOS */
}

.booking-modal-body input[type="file"] {
  padding: 10px;
  background: #fff;
  font-size: 0.9rem;
}

.booking-modal-body input[type="file"]::file-selector-button {
  background-color: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  padding: 6px 12px;
  margin-right: 10px;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: background 0.2s;
}

.booking-modal-body input[type="file"]::file-selector-button:hover {
  background-color: #e2e8f0;
}

/* --- COMPACT TERMS & CONDITIONS BOX --- */
.terms-condition-group {
  display: flex;
  align-items: center; /* Aligns checkbox vertically with text */
  gap: 10px;           /* Reduced gap */
  background-color: #f0fdf4; 
  border: 1px solid #6ab874; /* Thinner border */
  padding: 10px 15px;        /* Reduced padding (was 20px 25px) */
  border-radius: 8px;        /* Smaller radius */
  margin-top: 15px;          /* Reduced margin (was 30px) */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  width: 100%;               /* Ensures it fits container */
  box-sizing: border-box;    /* Prevents padding from breaking width */
}

.terms-condition-group:hover {
  background-color: #e6fffa;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Adjust Checkbox Size */
.booking-modal-body .terms-condition-group input[type="checkbox"] {
  width: 18px !important;    /* Smaller checkbox (was 24px) */
  height: 18px !important;
  margin-top: 0 !important;
  cursor: pointer;
  accent-color: #198754;
  flex-shrink: 0;
}

/* Adjust Text Size */
.terms-condition-group label {
  font-size: 0.95rem;        /* Smaller font (was 1.15rem) */
  font-weight: 500;
  color: #2d3748;
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Link Style */
.terms-condition-group a {
  color: #198754;
  font-weight: 700;
  text-decoration: underline;
}

.terms-condition-group a:hover {
  color: #0d5817;
  background-color: rgba(25, 135, 84, 0.1);
  padding: 2px 4px;
  border-radius: 4px;
}

#termsModal .modal-inner {
  max-width: 800px !important; /* Wider */
  width: 90%;
  height: 80vh; /* Taller */
  display: flex;
  flex-direction: column;
  padding: 0 !important; /* Reset padding for header/body split */
  overflow: hidden; /* container doesn't scroll, content does */
  border-radius: 16px;
}

.terms-modal-header {
  padding: 20px 30px;
  background: #198754; /* Green Header */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terms-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: white;
  border: none;
  padding: 0;
}

.terms-modal-body {
  padding: 30px;
  overflow-y: auto; /* Scrollable content */
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

.close-terms-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.close-terms-btn:hover {
  background: rgba(255,255,255,0.4);
}

.booking-modal-body input.villa-totalamount,
.booking-modal-body input.pavilion-totalamount,
.booking-modal-body input.exclusive-totalamount {
  background-color: #f0fff4; /* Light green tint */
  color: #276749;
  font-weight: 700;
  border-color: #c6f6d5;
}

.booking-modal-body input[type="text"]:focus,
.booking-modal-body input[type="time"]:focus,
.booking-modal-body input[type="number"]:focus,
.booking-modal-body input[type="file"]:focus,
.booking-modal-body select:focus {
    border-color: var(--accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(106, 184, 116, 0.2);
    outline: none;
}

/* ===========================
   FLATICKR - PAST DATE MUTING (UPDATED)
=========================== */

/* Apply to ALL disabled dates to prevent interaction, but keep appearance neutral */
.flatpickr-day.flatpickr-disabled {
    color: #ccc; /* Light gray text */
    background: transparent;
    border-color: transparent;
}

/* Mute PAST DATES specifically (which are disabled by minDate: "today") */
/* Past dates are those that are also NOT reserved and not the current date. */
.flatpickr-day:not(.today).flatpickr-disabled {
    cursor: not-allowed;
    opacity: 0.4; /* Fade them out */
}

.flatpickr-day.flatpickr-disabled[title="Reserved"] {
    opacity: 1 !important; 
    background: #c7f9cc !important; /* Green background */
    color: #000 !important; /* Black text */
    cursor: help; /* Show 'help' or 'default' cursor to indicate status */
    border-radius: 4px;
}

.flatpickr-day.today {
    opacity: 1 !important;
    font-weight: 700;
}

#villa-checkoutdate {
    cursor: pointer !important;        /* Show hand cursor */
    background-color: #ffffff !important; /* Force white background */
    color: #2d3748 !important;         /* Normal text color */
    opacity: 1 !important;
    pointer-events: auto !important;   /* Ensure clicks work */
    border-color: #cbd5e0 !important;  /* Standard border color */
}

/* Optional: Add a hover effect so they know it's active */
#villa-checkoutdate:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(106, 184, 116, 0.1) !important;
}

.flatpickr-day:not(.today).flatpickr-disabled:not([title="Reserved"]) {
    opacity: 0.45; /* Make them visually recede */
    color: #888 !important; /* Gray out the text */
}

/* Keep dates from other months (even if available) muted */
.flatpickr-day.prevMonthDay, 
.flatpickr-day.nextMonthDay {
    opacity: 0.45; 
}
.flatpickr-day.prevMonthDay:hover, 
.flatpickr-day.nextMonthDay:hover {
    background: transparent;
    opacity: 0.6;
}

/* Ensure the 'reserved' dates are NOT muted */
.flatpickr-day.flatpickr-disabled[title="Reserved"] {
    opacity: 1; /* Keep reserved dates fully visible */
    background: #c7f9cc !important; /* Keep the light green background */
    color: #000 !important; /* Keep the black text */
}

/* Ensure today is not muted if it's not reserved */
.flatpickr-day.today:not(.flatpickr-disabled) {
    opacity: 1; 
}

/* ✅ NEW: Title Overlay Style */
.title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 20px 15px 20px !important;
  /* Semi-transparent dark background for readability */
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
  color: white;
  letter-spacing: 0.5px;
  font-family: "Inter", sans-serif;
  font-size: 20px; /* Large, clear text */
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2; /* Ensure it is above the image but below controls */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* Fix for Modal Popup Calendar Width */
.flatpickr-calendar.open {
  width: 307.875px !important; /* Standard Flatpickr width */
  max-width: none !important;
}

.flatpickr-calendar.open .flatpickr-rContainer, 
.flatpickr-calendar.open .flatpickr-days, 
.flatpickr-calendar.open .dayContainer {
  width: 307.875px !important; /* Ensure inner containers match standard width */
}

/* Ensure the INLINE calendar (on the main page) stays full width */
.flatpickr-calendar.inline {
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
}
.flatpickr-calendar.inline .flatpickr-rContainer, 
.flatpickr-calendar.inline .flatpickr-days, 
.flatpickr-calendar.inline .dayContainer {
  width: 100% !important;
}
.flatpickr-calendar.open {
  width: 307.875px !important; /* Standard Flatpickr width */
  max-width: none !important;
  z-index: 99999 !important; /* Ensure it sits on top of modal */
}
.flatpickr-calendar.open .flatpickr-rContainer, 
.flatpickr-calendar.open .flatpickr-days, 
.flatpickr-calendar.open .dayContainer {
  width: auto !important; /* Let content dictate width */
}
/* ===========================
   RESPONSIVE & MOBILE
=========================== */
@media (max-width: 900px) {
  .split { flex-direction: column-reverse; } /* Put calendar on top on mobile? Or keep standard column */
  .split { flex-direction: column; } 
  .right { width: 100%; }
  .slideshow { height: 250px; }
  .guest-wrap header h1 { font-size: 32px; }
}

/* Tablet and Mobile (900px and below) */
@media (max-width: 900px) {
  .guest-wrap {
    padding: 0 15px; /* Reduce side padding */
    margin-top: 20px;
  }

  /* Fix Layout: Slideshow on Top, Calendar Below */
  .split {
    flex-direction: column; /* Stack vertically */
    gap: 20px;
  }

  .left, .right {
    width: 100%; /* Full width */
    flex: none;
  }

  /* Fix Slideshow Height & Visibility */
  .slideshow {
    height: 300px !important; /* Force specific height on tablet */
    width: 100% !important;
  }
  
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the box */
  }

  /* Fix Tabs Scrolling */
  .tabs {
    justify-content: flex-start; /* Align left so user can scroll */
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  
  .tabs::-webkit-scrollbar {
    height: 4px;
  }
  .tabs::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 4px;
  }
  
  .tab {
    flex-shrink: 0;
  }
}

/* Mobile Phones (480px and below) */
@media (max-width: 480px) {
  .guest-wrap header h1 { 
    font-size: 28px; 
  }

  /* 1. Fix Slideshow height for small screens */
  .slideshow { 
    height: 220px !important; 
  }

  /* 2. FIX CALENDAR OVERFLOW */
  .calendar-card {
    padding: 10px; /* Reduce padding to give calendar more space */
  }

  .flatpickr-calendar.inline {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Force inner containers to shrink to fit screen */
  .flatpickr-rContainer {
    width: 100% !important;
  }
  
  .flatpickr-days {
    width: 100% !important;
    border: none !important;
  }

  .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: space-between; /* Distribute days evenly */
  }

  /* Shrink the day cells slightly to fit 7 in a row */
  .flatpickr-day {
    max-width: 13.5% !important; /* 100% / 7 days approx */
    height: 36px !important;
    line-height: 36px !important;
    margin: 2px 0 !important;
    font-size: 13px !important; /* Smaller font */
  }

  /* --- MODAL FIXES FOR MOBILE --- */
  .booking-modal-overlay {
    align-items: flex-end; /* Stick to bottom */
  }
  
  .booking-modal-content {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }

  .booking-modal-header {
    padding: 15px;
  }
  
  .booking-modal-body {
    padding: 15px;
  }

  .booking-modal-footer {
    padding: 15px;
    flex-direction: column-reverse; /* Stack buttons */
    gap: 10px;
  }

  .modal-nav-btn {
    width: 100%;
    padding: 12px;
  }
}