/* ===============================
   RESET (SAFE – NO BODY DAMAGE)
================================ */
* {
  box-sizing: border-box;
}

/* ❌ REMOVE body styling – it was breaking header/footer */
/*
body {
  margin: 0;
  padding: 20px;
  background: #eef1f6;
  font-family: system-ui, sans-serif;
}
*/

/* ===============================
   COMPONENT WRAPPER ONLY
================================ */
.check-availability {
  padding: 2px;
  background: #9be15d;
  position: relative;
  z-index: 5;
  border-radius: 22px;
}


.check-availability .tour-card {
  background: #ffffff;
  color: #000;
  padding: 18px;
  margin-top: 20px;
  border-radius: 18px;
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px solid transparent;
}

/* ===============================
   BOOKING CARD
================================ */
.booking-card {
  max-width: 100%;
  margin: auto;
  background: #1b2c49;
  color: #fff;
  padding: 10px 10px 15px 10px;
  border-radius: 22px;
  position: relative;
  z-index: 10;
}

.booking-card h2 {
  margin-top: 0;
}

/* ===============================
   SELECT ROWS (BUTTON STYLE)
================================ */
.select-row {
  width: 100%;
  background: #ffffff;
  color: #000;
  border-radius: 30px;
  padding: 16px 20px;
  margin-bottom: 14px;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Input & select visuals */
.select-row input,
.select-row select {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}

/* 🔑 IMPORTANT FIXES */
.select-row input {
  pointer-events: none;   /* click goes to button */
}

.select-row select {
  pointer-events: auto;
  background: transparent;
  appearance: none;
}

/* ===============================
   CTA BUTTON
================================ */
.cta {
  width: 100%;
  padding: 12px;
  border-radius: 30px;
  border: none;
  background: #0b6ef3;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.hidden {
  display: none;
}

/* ===============================
   TOUR OPTION CARDS
================================ */
.tour-card {
  background: #ffffff;
  color: #000;
  padding: 18px;
  margin-top: 20px;
  border-radius: 18px;
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px solid transparent;
}

.tour-card.active {
  border-color: #0b6ef3;
  box-shadow: 0 10px 30px rgba(11,110,243,0.15);
}

/* ===============================
   PICKUP SELECT
================================ */
.pickup {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid #d3dbe7;
  background-color: #f9fbfe;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ===============================
   PRICE BREAKDOWN
================================ */
.price-breakdown {
  margin-top: 12px;
  font-size: 14px;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}

.price-row .label {
  color: #475569;
  font-weight: 500;
}

.price-row .calc {
  color: #64748b;
  font-size: 13px;
}

.price-row .amount {
  font-weight: 600;
  color: #0f172a;
}

.price-divider {
  border-top: 1px dashed #e2e8f0;
  margin: 10px 0;
}

.price-row.total {
  font-size: 16px;
  font-weight: 700;
  color: #2563eb;
}

.price-row.total .amount {
  font-size:18px;
}
  
/* ===============================
   CONTINUE BUTTON
================================ */
.continue-btn {
  margin-top: 14px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: #22c55e;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}


/* ===============================
   TOUR OPTION DESCRIPTION
================================ */
.tour-option-desc {
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
  margin: 6px 0 12px;
}

/* ===============================
   ICON SUPPORT (EMOJI)
================================ */
.select-row {
  gap: 10px;
}

.select-row .icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* Prevent input/select overlapping icon */
.select-row input,
.select-row select {
  flex: 1;
}


/* ===============================
   FIELD TEXT ALIGNMENT PATCH
   (Participants / Date / Language)
================================ */

/* Force consistent layout */
.select-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;                 /* uniform height */
  padding: 0 25px;
}

/* Icons (emoji) */
.select-row .icon {
  font-size: 20px;              /* same visual weight */
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Text, input & select – SAME SIZE */
.select-row span,
.select-row input,
.select-row select {
  font-size: 16px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Input & select alignment fix */
.select-row input,
.select-row select {
  padding: 0;
}

/* Arrow alignment */
.select-row .arrow {
  font-size: 25px;
  margin-left: auto;
  display: flex;
  align-items: center;
}


/* ===============================
   SAFE CHECK AVAILABILITY CONTAINMENT
================================ */

.check-availability {
  width: 100%;
  overflow: visible; /* REQUIRED for dropdown */
}

.booking-card {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}



/* ===============================
   CRITICAL MENU + CALENDAR FIX
================================ */

/* 1️⃣ REMOVE global transform influence */
.flatpickr-calendar,
.ui-datepicker {
  will-change: auto;
}

/* 2️⃣ Scope calendar transform ONLY when calendar is open */
body:not(.menu-open) .flatpickr-calendar,
body:not(.menu-open) .ui-datepicker {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 3️⃣ When menu is open – kill transforms */
body.menu-open .flatpickr-calendar,
body.menu-open .ui-datepicker {
  transform: none !important;
  left: auto !important;
}

/* 4️⃣ Hard stop horizontal scroll */
html, body {
  overflow-x: hidden !important;
}

/* 5️⃣ Prevent iOS sideways drag */
body {
  overscroll-behavior-x: none;
}


/* =====================================================
   DESKTOP-ONLY PREMIUM LAYOUT
===================================================== */
@media (min-width: 992px) {

  .check-availability .booking-card form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;          /* more breathing space */
    row-gap: 5px;
    align-items: center;
  }

  /* Heading */
  .check-availability .booking-card h2 {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }

  /* Row 1 */
  #participantsBtn {
    grid-column: 1;
  }

  .date-row {
    grid-column: 2;
  }

  .check-availability .select-row:has(select#language) {
    grid-column: 3;
  }

  /* Normalize pill height ONLY on desktop */
  .check-availability .select-row {
    height: 40px;              /* proper pill height */
    padding: 0 10px;
  }

  /* CTA – dominant & centered */
  .cta {
    grid-column: 1 / -1;       /* span full row */
    justify-self: center;
    width: 350px;              /* fixed visual width */
    max-width: 60%;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
  }

  /* Loader & results */
  #loadingSkeleton,
  #results {
    grid-column: 1 / -1;
  }
 
 .check-availability .booking-card h2 {
    text-align: center;
  }
  
}
  

/* ===============================
   SKELETON LOADER (GYG / VIATOR STYLE)
================================ */

/* Skeleton container */
.skeleton {
  margin-top: 20px;
}

/* Fake option card */
.skeleton-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  margin-top: 16px;
}

/* Skeleton lines */
.skeleton-line {
  height: 14px;
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 37%,
    #e5e7eb 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
  margin-bottom: 12px;
}

.skeleton-line.title {
  height: 18px;
  width: 60%;
}

.skeleton-line.small {
  width: 40%;
}

.skeleton-line.full {
  width: 100%;
}

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




/* =====================================================
   PREMIUM TOUR OPTION CARD DESIGN
===================================================== */

.tour-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin-top: 18px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}

/* Hover (desktop only) */
@media (hover: hover) {
  .tour-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-2px);
  }
}

/* Active (selected) */
.tour-card.active {
  border-color: #2563eb;
  box-shadow: 0 12px 32px rgba(37,99,235,0.15);
}

/* =====================================================
   TITLE
===================================================== */

.tour-card h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

/* Larger title on desktop */
@media (min-width: 768px) {
  .tour-card h3 {
    font-size: 20px;
  }
}

/* =====================================================
   DESCRIPTION
===================================================== */

.tour-option-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  margin-bottom: 14px;
  max-width: 95%;
}

/* Slightly larger text on big screens */
@media (min-width: 768px) {
  .tour-option-desc {
    font-size: 15px;
    max-width: 90%;
  }
}

/* =====================================================
   PICKUP SELECT (MORE PREMIUM)
===================================================== */

.tour-card .pickup {
  height: 46px;
  border-radius: 12px;
  border: 1px solid #cbd5f5;
  background-color: #f8fafc;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 14px;
}

.tour-card.active .pickup {
  border-color: #2563eb;
  background-color: #eff6ff;
}

/* =====================================================
   PRICE BREAKDOWN
===================================================== */

.price-breakdown {
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 6px;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

.price-row .label {
  color: #334155;
  font-weight: 500;
}

.price-row .calc {
  color: #64748b;
  font-size: 13px;
}

.price-row .amount {
  font-weight: 600;
  color: #0f172a;
}

.price-divider {
  margin: 10px 0;
  border-top: 1px dashed #cbd5e1;
}

.price-row.total {
  font-size: 15px;
  font-weight: 700;
  color: #1d4ed8;
}

.price-row.total .amount {
  font-size: 17px;
}

/* =====================================================
   CONTINUE BUTTON (STRONG CTA)
===================================================== */

.continue-btn {
  margin-top: 14px;
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37,99,235,0.35);
}





/* =====================================================
   PREMIUM SVG ICON SYSTEM (DARK BLUE)
===================================================== */

:root {
  --icon-color: #0b6ef3; /* dark blue */
}

/* Base icon */
.select-row .icon {
  width: 20px;
  height: 20px;
  background-color: var(--icon-color);
  display: inline-block;
  flex-shrink: 0;

  /* SVG mask */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* ================= ICONS ================= */

/* User */
.icon-user {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5Z'/%3E%3C/svg%3E");
}

/* Calendar */
.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8Z'/%3E%3C/svg%3E");
}

/* Globe / Language */
.icon-globe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm6.93 9h-3.18a15.37 15.37 0 0 0-1.2-5.18A8.05 8.05 0 0 1 18.93 11ZM12 4.07A13.34 13.34 0 0 1 13.8 11h-3.6A13.34 13.34 0 0 1 12 4.07ZM5.07 13h3.18a15.37 15.37 0 0 0 1.2 5.18A8.05 8.05 0 0 1 5.07 13Zm3.18-2H5.07a8.05 8.05 0 0 1 4.38-5.18A15.37 15.37 0 0 0 8.25 11ZM12 19.93A13.34 13.34 0 0 1 10.2 13h3.6A13.34 13.34 0 0 1 12 19.93ZM14.55 18.18A15.37 15.37 0 0 0 15.75 13h3.18A8.05 8.05 0 0 1 14.55 18.18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm6.93 9h-3.18a15.37 15.37 0 0 0-1.2-5.18A8.05 8.05 0 0 1 18.93 11ZM12 4.07A13.34 13.34 0 0 1 13.8 11h-3.6A13.34 13.34 0 0 1 12 4.07ZM5.07 13h3.18a15.37 15.37 0 0 0 1.2 5.18A8.05 8.05 0 0 1 5.07 13Zm3.18-2H5.07a8.05 8.05 0 0 1 4.38-5.18A15.37 15.37 0 0 0 8.25 11ZM12 19.93A13.34 13.34 0 0 1 10.2 13h3.6A13.34 13.34 0 0 1 12 19.93ZM14.55 18.18A15.37 15.37 0 0 0 15.75 13h3.18A8.05 8.05 0 0 1 14.55 18.18Z'/%3E%3C/svg%3E");
}




/* =====================================================
   DATE FIELD TEXT COLOR FIX
===================================================== */

/* Default & selected date text */
.check-availability .date-row input {
  color: #0f172a !important;   /* deep black/blue */
 
}

/* Placeholder text (Select date) */
.check-availability .date-row input::placeholder {
  color: #0f172a !important;
  opacity: 1;                 /* override browser fade */
}


/* =====================================================
   PARTICIPANTS DROPDOWN (INLINE)
===================================================== */

.participants-dropdown, .language-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  padding: 16px;
  z-index: 1000;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}


.participants-dropdown strong {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.participants-dropdown.hidden {
  display: none;
}

/* Rows */
.participants-dropdown .p-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.participants-dropdown .age {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.participants-dropdown .divider {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}

/* Quantity controls */
.participants-dropdown .qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.participants-dropdown .qty button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #eff6ff;
  color: #2563eb;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.participants-dropdown .qty span {
  min-width: 32px;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

#participantsBtn.active .arrow {
  transform: rotate(180deg);
}


/* Anchor for participants dropdown */
.participants-wrap {
  position: relative;
}

.check-availability .booking-card {
  box-shadow: none !important;
  filter: none !important;
}



/* ===============================
   ARROW ROTATION (ALL FIELDS)
================================ */

.select-row .arrow {
  transition: transform 0.25s ease;
}

.select-row.open .arrow,
#participantsBtn.active .arrow {
  transform: rotate(180deg);
}

/* ===============================
   PREMIUM LANGUAGE DROPDOWN
================================ */

.select-row select#language {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  color: #0f172a;
}

.select-row select#language option {
  padding: 12px;
  font-size: 15px;
}

.select-row select#language:focus {
  outline: none;
}


.select-row .arrow {
  transition: transform 0.25s ease;
}

.select-row.active .arrow {
  transform: rotate(180deg);
}


/* ================= LANGUAGE DROPDOWN ================= */

.language-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0; 
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 1000;
}

.language-dropdown div {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #0f172a;
}

.language-dropdown div:hover {
  background: #eff6ff;
  color: #2563eb;
}

.language-wrap {
  position: relative;
}

.date-wrap {
  position: relative;
  width: 100%;
}

/* =====================================================
   COMPACT PREMIUM FLATPICKR CALENDAR DESIGN
   ===================================================== */

.date-wrap .flatpickr-calendar {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 16px !important;
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}

.date-wrap .flatpickr-calendar.static {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 55% !important;
  transform: translateX(-50%) !important;
}

/* Hide or center the calendar arrow */
.date-wrap .flatpickr-calendar:before,
.date-wrap .flatpickr-calendar:after {
  display: none !important;
}

.date-wrap .flatpickr-innerContainer,
.date-wrap .flatpickr-rContainer {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.date-wrap .flatpickr-months {
  padding: 4px 0 10px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.date-wrap .flatpickr-months .flatpickr-month {
  height: auto !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.date-wrap .flatpickr-current-month {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  width: auto !important;
}

.date-wrap .flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  background: transparent !important;
  border: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.date-wrap .flatpickr-current-month input.cur-year {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0f172a !important;
}

.date-wrap .flatpickr-months .flatpickr-prev-month,
.date-wrap .flatpickr-months .flatpickr-next-month {
  width: 28px !important;
  height: 28px !important;
  background: #f1f5f9 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  flex-shrink: 0 !important;
}

.date-wrap .flatpickr-months .flatpickr-prev-month:hover,
.date-wrap .flatpickr-months .flatpickr-next-month:hover {
  background: #e2e8f0 !important;
}

.date-wrap .flatpickr-months .flatpickr-prev-month svg,
.date-wrap .flatpickr-months .flatpickr-next-month svg {
  fill: #0f172a !important;
  width: 12px !important;
  height: 12px !important;
}

.date-wrap .flatpickr-weekdays {
  background: transparent !important;
  padding: 0 !important;
  height: 28px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
}

.date-wrap .flatpickr-weekdaycontainer {
  display: contents !important;
}

.date-wrap .flatpickr-weekday {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.date-wrap .flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
}

.date-wrap .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

.date-wrap .flatpickr-day {
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.date-wrap .flatpickr-day:hover {
  background: #eff6ff !important;
  border: none !important;
}

.date-wrap .flatpickr-day.today {
  border: 2px solid #2563eb !important;
  background: transparent !important;
}

.date-wrap .flatpickr-day.selected,
.date-wrap .flatpickr-day.selected:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25) !important;
}

.date-wrap .flatpickr-day.flatpickr-disabled,
.date-wrap .flatpickr-day.flatpickr-disabled:hover {
  color: #cbd5e1 !important;
  background: #f8fafc !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
}

.date-wrap .flatpickr-day.prevMonthDay,
.date-wrap .flatpickr-day.nextMonthDay {
  color: #94a3b8 !important;
}