/*
 * MPS Gravity Form Date Range Picker - CSS Fixes
 * Overrides Hello Elementor reset.css table styles
 * Fixes calendar layout inside Gravity Forms / Elementor containers
 */

/* Prevent parent containers from clipping the calendar popup */
.gform_wrapper,
.gform_fields,
.gfield,
.ginput_container,
.ginput_container_text,
.elementor-widget-container,
.elementor-widget-wrap,
.elementor-section,
.elementor-column-wrap,
.elementor-element,
.elementor-container,
.elementor-row,
.elementor-column,
.e-con,
.e-con-inner {
  overflow: visible !important;
}

/* =============================================
   Override Hello Elementor reset.css table styles
   ============================================= */

/* Remove theme's 15px padding and borders from calendar cells */
.daterangepicker table td,
.daterangepicker table th {
  border: 1px solid transparent !important;
  padding: 0 !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 12px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-radius: 4px;
  color: #140e1a !important;
}

/* Remove theme's zebra striping from calendar rows */
.daterangepicker table tbody > tr:nth-child(odd) > td,
.daterangepicker table tbody > tr:nth-child(odd) > th {
  background-color: transparent !important;
}

/* Remove theme's row hover from calendar */
.daterangepicker table tbody tr:hover > td,
.daterangepicker table tbody tr:hover > th {
  background-color: transparent !important;
}

/* Hover on selectable dates */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #ffe0eb !important;
}

/* Selected start/end dates */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #ff0058 !important;
  color: #fff !important;
}

/* Dates between start and end */
.daterangepicker td.in-range {
  background-color: #ffe0eb !important;
  color: #140e1a !important;
}

/* Dates outside current month */
.daterangepicker td.off,
.daterangepicker td.off.in-range {
  background-color: #fff !important;
  color: #ccc !important;
}

/* Calendar table white background inside pink frame */
.daterangepicker table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

.daterangepicker .calendar-table {
  background-color: #fff !important;
}

/* =============================================
   Calendar popup layout
   ============================================= */

/* Proper size, layering, and site branding */
.daterangepicker {
  z-index: 9999 !important;
  min-width: 556px !important;
  width: auto !important;
  background-color: #ff0058 !important;
  color: #140e1a !important;
}

/* Arrow pointers at top */
.daterangepicker:before {
  border-bottom-color: #ff0058 !important;
}

.daterangepicker:after {
  border-bottom-color: #ff0058 !important;
}

/* Side by side calendar panels */
.daterangepicker .drp-calendar {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  max-width: 270px !important;
  min-width: 250px !important;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 4px 8px 8px !important;
}

.daterangepicker .drp-calendar.right {
  padding: 8px 8px 8px 4px !important;
  border-left: 1px solid rgba(255,255,255,0.3) !important;
}

/* Navigation arrows */
.daterangepicker .calendar-table .prev,
.daterangepicker .calendar-table .next {
  cursor: pointer;
}

.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
  border-color: #140e1a !important;
}

/* Month/year header */
.daterangepicker th.month {
  color: #140e1a !important;
  font-size: 14px !important;
  font-weight: bold !important;
  width: auto !important;
}

/* Day name headers */
.daterangepicker .calendar-table thead th {
  color: #555 !important;
  font-weight: 600 !important;
}

/* =============================================
   Bottom bar and buttons - site branded
   ============================================= */
.daterangepicker .drp-buttons {
  clear: both !important;
  padding: 8px !important;
  border-top: 1px solid rgba(255,255,255,0.3) !important;
  text-align: right !important;
  background-color: #ff0058 !important;
}

/* Selected date range text */
.daterangepicker .drp-selected {
  color: #fff !important;
}

.daterangepicker .drp-buttons .btn {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
}

/* Clear button - white outline on pink */
.daterangepicker .drp-buttons .cancelBtn {
  background-color: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
  background-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* Apply button - white on pink */
.daterangepicker .drp-buttons .applyBtn {
  background-color: #fff !important;
  border: 1px solid #fff !important;
  color: #ff0058 !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
  background-color: #140e1a !important;
  border-color: #140e1a !important;
  color: #fff !important;
}

/* =============================================
   Mobile: stack calendars vertically
   ============================================= */
@media (max-width: 580px) {
  .daterangepicker {
    min-width: 280px !important;
    width: 280px !important;
  }

  .daterangepicker .drp-calendar {
    display: block !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right {
    padding: 8px !important;
    border-left: none !important;
  }

  .daterangepicker .drp-calendar.right {
    border-top: 1px solid rgba(255,255,255,0.3) !important;
  }
}