/* Mobile Calendar Drawer - Full Screen Design with Custom Calendar */

@media (max-width: 767px) {
  /* Full Screen Drawer - Must be above overlay */
  .bottom_drawer {
    height: 100vh !important;
    height: -webkit-fill-available !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    z-index: 10002 !important;
    position: fixed !important;
    background: #ffffff !important;
    pointer-events: auto !important;
  }

  /* Override any conflicting z-index from mobile.css */
  .bottom_drawer[class*="drawer"] {
    z-index: 10002 !important;
  }

  .bottom_drawer .drawer-content {
    height: 100vh !important;
    height: -webkit-fill-available !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    z-index: 10002 !important;
    position: relative !important;
  }

  /* Calendar Container */
  .mobile-calendar-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    background: #f9fafb;
    width: 100%;
    position: relative;
    z-index: 10002;
  }

  /* Calendar Header */
  .mobile-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10010 !important;
    flex-shrink: 0;
    pointer-events: auto !important;
  }

  .mobile-calendar-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
  }

  .mobile-calendar-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    pointer-events: auto !important;
    z-index: 10010 !important;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(25, 118, 210, 0.2);
  }

  .mobile-calendar-close:hover {
    background: #e5e7eb;
  }

  .mobile-calendar-close:active {
    transform: scale(0.95);
    background: #d1d5db;
  }

  .mobile-calendar-close i {
    font-size: 20px;
    color: #374151;
    pointer-events: none;
  }

  /* Selected Dates Display */
  .mobile-selected-dates-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  .mobile-dates-text {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    font-family: 'Inter', sans-serif;
  }

  .mobile-clear-dates-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
  }

  .mobile-clear-dates-btn:hover {
    background: #e5e7eb;
  }

  .mobile-clear-dates-btn i {
    font-size: 14px;
    color: #6b7280;
  }

  /* Calendar Content Area */
  .mobile-calendar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    position: relative;
    z-index: 10002;
  }

  /* Custom Calendar */
  .mobile-custom-calendar {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Month Header */
  .mobile-calendar-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .mobile-calendar-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  .mobile-calendar-nav-btn:hover {
    background: #e5e7eb;
  }

  .mobile-calendar-nav-btn i {
    font-size: 20px;
    color: #374151;
  }

  .mobile-calendar-month-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
  }

  /* Weekdays */
  .mobile-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .mobile-calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
    padding: 8px 0;
  }

  /* Calendar Grid */
  .mobile-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }

  .mobile-calendar-day {
    width: 100%;
    aspect-ratio: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  .mobile-calendar-day.empty {
    cursor: default;
    pointer-events: none;
  }

  .mobile-calendar-day.disabled {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
  }

  .mobile-calendar-day.today {
    background: #f3f4f6;
    font-weight: 600;
  }

  .mobile-calendar-day:hover:not(.disabled):not(.empty) {
    background: rgba(25, 118, 210, 0.1);
  }

  .mobile-calendar-day.selected,
.mobile-calendar-day.range-start,
.mobile-calendar-day.range-end {
    background: #1976d2 !important;
    color: #ffffff !important;
    font-weight: 600;
  }

  .mobile-calendar-day.in-range:not(.range-start):not(.range-end) {
    background: rgba(25, 118, 210, 0.1) !important;
    color: #1976d2 !important;
  }

  /* Calendar Footer */
  .mobile-calendar-footer {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 10011 !important;
    flex-shrink: 0;
    width: 100%;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  }

  .mobile-calendar-confirm {
    width: 100%;
    padding: 16px 24px;
    background: #1976d2;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
  }

  .mobile-calendar-confirm:hover:not(:disabled) {
    background: #1565c0;
  }

  .mobile-calendar-confirm:active:not(:disabled) {
    transform: scale(0.98);
  }

  .mobile-calendar-confirm:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
  }

  /* Overlay Styling - Lighter, not completely black, behind drawer */
  /* Target all possible overlay IDs from react-modern-drawer */
  /* CRITICAL FIX: Make overlay completely non-blocking */
  #EZDrawer__overlayogmhk,
  #EZDrawer__overlayy88iv,
  .drawer-overlay,
  [id*="EZDrawer__overlay"],
  [id*="overlay"]:not(.bottom_drawer):not([class*="calendar"]):not(.mobile-calendar-container),
  [class*="drawer-overlay"],
  [class*="EZDrawer__overlay"],
  div[id*="overlay"]:not(.bottom_drawer):not(.mobile-calendar-container),
  div[id*="EZDrawer__overlay"] {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1 !important;
    /* CRITICAL: Make overlay completely non-interactive - it will still close drawer on click */
    pointer-events: auto !important;
  }

  /* Ensure overlay is ALWAYS below drawer */
  [id*="EZDrawer__overlay"] {
    z-index: 1 !important;
  }

  /* Ensure drawer wrapper is above overlay and clickable */
  .bottom_drawer.drawer,
  [class*="drawer"][class*="bottom"],
  .bottom_drawer {
    z-index: 999999 !important;
    position: fixed !important;
    pointer-events: auto !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
  }

  /* Ensure drawer content is clickable and above overlay */
  .bottom_drawer .drawer-content {
    z-index: 10003 !important;
    position: relative !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  /* Make sure drawer content wrapper doesn't block */
  .bottom_drawer > div,
  .bottom_drawer > div > div {
    pointer-events: auto !important;
  }

  /* Ensure drawer takes full screen */
  .bottom_drawer.drawer {
    height: 100vh !important;
    height: -webkit-fill-available !important;
  }

  /* Make sure calendar container and all its children are clickable */
  .mobile-calendar-container {
    pointer-events: auto !important;
    z-index: 10004 !important;
    position: relative;
    touch-action: manipulation;
  }

  .mobile-calendar-container * {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  /* Ensure calendar buttons and interactive elements are clickable */
  .mobile-calendar-day,
  .mobile-calendar-nav-btn,
  .mobile-calendar-close,
  .mobile-calendar-confirm,
  .mobile-clear-dates-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(25, 118, 210, 0.2);
    position: relative;
    z-index: 10005 !important;
  }

  /* Critical fix: Ensure drawer and all its content is above overlay */
  .bottom_drawer {
    z-index: 999999 !important;
    position: fixed !important;
    isolation: isolate;
  }

  .bottom_drawer * {
    position: relative;
    pointer-events: auto !important;
  }

  .mobile-calendar-container {
    z-index: 999999 !important;
    pointer-events: auto !important;
    position: relative;
    isolation: isolate;
  }

  .mobile-calendar-container * {
    pointer-events: auto !important;
    position: relative;
  }

  /* Hide any datepicker components that might be creating overlays */
  .bottom_drawer .datepicker,
  .bottom_drawer [class*="datepicker"],
  .bottom_drawer [class*="Datepicker"],
  .mobile-calendar-content .datepicker,
  .mobile-calendar-container .datepicker {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Ensure no popup/overlay from datepicker is visible or blocking */
  .bottom_drawer [class*="popup"],
  .bottom_drawer [class*="Popup"],
  .bottom_drawer [class*="overlay"]:not([id*="EZDrawer"]),
  .bottom_drawer [class*="Overlay"],
  .bottom_drawer [class*="dropdown"],
  .bottom_drawer [class*="Dropdown"],
  .bottom_drawer [class*="calendar-popup"],
  .bottom_drawer [class*="datepicker-popup"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
  }

  /* Hide any react-tailwindcss-datepicker specific overlays */
  .bottom_drawer [class*="react-tailwindcss"],
  .bottom_drawer [class*="tailwindcss-datepicker"] {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Hide calendar drawer on desktop */
@media (min-width: 768px) {
  .bottom_drawer {
    display: none !important;
  }
}