/*
 * Property Search Form Elementor Widget CSS
 * 
 * Additional styles for the Elementor version of the search form widget
 * Complements the main property-search-form.css template styles
 * 
 * @package avantio-properties
 */

/* Elementor Widget Specific Styles */
.elementor-widget-avantio-property-search-form {
  --lgap-form-gap: 0px;
}

.elementor-widget-avantio-property-search-form .lgap-search-form-wrapper {
  margin: 0;
}

/* Elementor editor specific adjustments */
.elementor-editor .lgap-search-form-wrapper {
  position: relative;
}

.elementor-editor .lgap-date-range .flatpickr-calendar {
  z-index: 999999;
}

/* Widget container adjustments */
.lgap-search-form-wrapper.lgap-elementor-widget {
  width: 100%;
  max-width: 100%;
}

/* Grid adjustments for Elementor */
.lgap-elementor-widget .uk-grid {
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* margin: 0; */
  /* gap: var(--lgap-form-gap, 0px); */
}

.lgap-elementor-widget .uk-grid > * {
  /* padding: 0;
    flex: 1;
    min-width: 0; */
}

/* Responsive adjustments for Elementor widgets */
@media (max-width: 959px) {
  /* .lgap-elementor-widget .uk-width-1-5\@m {
        width: calc(50% - var(--lgap-form-gap, 0px) / 2);
        flex: 0 0 calc(50% - var(--lgap-form-gap, 0px) / 2);
    }
    
    .lgap-elementor-widget .uk-width-1-5\@m:last-child {
        width: 100%;
        flex: 0 0 100%;
        margin-top: var(--lgap-form-gap, 0px);
    } */
}

@media (max-width: 640px) {
  /* .lgap-elementor-widget .uk-width-1-5\@m {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: var(--lgap-form-gap, 0px);
    }
    
    .lgap-elementor-widget .uk-width-1-5\@m:last-child {
        margin-bottom: 0;
        margin-top: 0;
    } */
}

/* Field visibility controls */
.lgap-elementor-widget .lgap-search-field {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Enhanced styling for different form styles in Elementor */
.lgap-elementor-widget.lgap-hero-banner {
  padding: 40px 20px;
  border-radius: 0;
}

.lgap-elementor-widget.lgap-site-header {
  padding: 20px;
  background: transparent;
  box-shadow: none;
}

/* Flatpickr adjustments for Elementor */
.lgap-elementor-widget .flatpickr-calendar {
  z-index: 999999;
}

/* Button styling adjustments */
.lgap-elementor-widget .lgap-search-button {
  width: 100%;
  height: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form field adjustments */
.lgap-elementor-widget .lgap-search-field label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.lgap-elementor-widget .lgap-search-field .uk-select,
.lgap-elementor-widget .lgap-search-field .uk-input {
  width: 100%;
  box-sizing: border-box;
}

/* Loading state */
.lgap-elementor-widget.lgap-loading {
  position: relative;
  opacity: 0.7;
  pointer-events: none;
}

/* Elementor responsive controls support */
.lgap-elementor-widget .uk-grid[data-uk-grid] {
  margin: 0;
}

/* Enhanced date picker display */
.lgap-elementor-widget .lgap-date-display {
  font-size: 14px;
  line-height: 1.4;
  padding: 0;
  text-align: left;
}

.lgap-date-display .lgap-separator {
  border-top: none;
}

.lgap-elementor-widget .lgap-date-display.lgap-has-dates {
  font-weight: 500;
}

/* Field spacing and alignment */
.lgap-elementor-widget .px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 960px) {
  .lgap-elementor-widget .uk-width-1-5\@m {
    width: 20%;
    flex: 0 0 20%;
  }
}

/* Enhanced hero banner styling for Elementor */
.lgap-elementor-widget.lgap-hero-banner .lgap-search-form {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 20px;
}

.lgap-elementor-widget.lgap-hero-banner .lgap-search-form-title {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.lgap-elementor-widget.lgap-hero-banner .lgap-search-form-subtitle {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

/* Accessibility improvements */
.lgap-elementor-widget .lgap-search-field label {
  cursor: pointer;
}

.lgap-elementor-widget .lgap-search-field select:focus,
.lgap-elementor-widget .lgap-search-field input:focus {
  outline: 2px solid #ffb800;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .lgap-elementor-widget .lgap-search-form-wrapper {
    display: none;
  }
}

/*
 * Property Search Form Component CSS
 * 
 * Migrated from public/css/search-form.css to follow template component structure
 * Maintains all existing styling with lgap- prefix
 * 
 * @package avantio-properties
 */

/* Search Form Wrapper */
.lgap-search-form-wrapper {
  background-color: #fff;
  border-radius: 0;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.lgap-search-form {
  width: 100%;
}

/* Search form header with title and subtitle */
.lgap-search-form-header {
  text-align: center;
  padding: 30px 20px;
}

.lgap-search-form-title {
  font-family: "Playfair Display", Sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin: 0 0 10px;
}

.lgap-search-form-subtitle {
  font-family: "Josefin Sans", Sans-serif;
  font-size: 16px;
  color: #666;
  margin-bottom: 0;
}

/* Hero banner styles for header */
.lgap-hero-banner .lgap-search-form-header {
  padding: 0 20px 20px;
}

.lgap-hero-banner .lgap-search-form-title {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lgap-hero-banner .lgap-search-form-subtitle {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* UIKit grid overrides */
.lgap-search-form .uk-grid {
  margin: 0;
}

.lgap-search-form .uk-grid > * {
  padding: 0;
}

@media (max-width: 959px) {
  .lgap-search-form .uk-width-1-5\@m {
    width: 50%;
  }

  .lgap-search-form .uk-width-1-5\@m:last-child {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .lgap-search-form .uk-width-1-5\@m {
    width: 100%;
  }
}

.lgap-search-field {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  justify-content: center;
  height: 100%;
}

.lgap-search-field label {
  font-family: "Playfair Display", Sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #000;
  z-index: 2;
}

.lgap-search-field .uk-select,
.lgap-search-field .uk-input {
  border: none;
  border-radius: 0;
  padding: 10px 15px;
  font-family: "Josefin Sans", Sans-serif;
  font-size: 14px;
  color: #000;
  background-color: #fff;
  height: 45px;
  box-shadow: none;
}

.lgap-search-field .uk-select:focus,
.lgap-search-field .uk-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* Date picker styling */
.lgap-date-range {
  position: relative;
}

.lgap-date-display {
  position: absolute;
  bottom: 12px;
  left: 15px;
  pointer-events: none;
  font-family: "Josefin Sans", Sans-serif;
  font-size: 14px;
  color: #000;
  width: calc(100% - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lgap-date-display.lgap-has-dates {
  color: #000;
  font-weight: 500;
}

.lgap-date-range input[type="text"] {
  cursor: pointer;
  padding-left: 15px;
  color: transparent; /* Hide the actual input text */
  caret-color: transparent; /* Hide the cursor */
}

/* Add clear button in flatpickr */
.flatpickr-wrapper {
  position: relative;
}

.flatpickr-clear {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 12px;
  cursor: pointer;
  z-index: 3;
  display: none;
}

.lgap-has-dates ~ .flatpickr-clear {
  display: block;
}

.lgap-search-button {
  background-color: #ffb800 !important;
  color: #000 !important;
  border: none;
  border-radius: 0;
  font-family: "Josefin Sans", Sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 45px;
  min-width: 140px;
}

.lgap-search-button:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* Flatpickr customization */
.flatpickr-calendar {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  border: none;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #ffb800;
  border-color: #ffb800;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 #ffb800;
}

.flatpickr-day.inRange {
  background-color: rgba(255, 184, 0, 0.2);
  border-color: rgba(255, 184, 0, 0.2);
}

/* Specific styling for the header and hero banner */
.lgap-site-header.lgap-search-form-wrapper {
  background-color: transparent;
  box-shadow: none;
}

.lgap-hero-banner.lgap-search-form-wrapper {
  background-color: transparent;
  box-shadow: none;
  max-width: 1200px;
}

.lgap-hero-banner .lgap-search-form {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0;
}

/* Availability gaps message */
.lgap-availability-gap-message {
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  font-family: "Josefin Sans", Sans-serif;
  font-size: 14px;
  color: #333;
  text-align: center;
  display: none;
}

/* Responsive adjustments for non-home pages */
body:not(.home) .lgap-search-form .uk-grid {
  flex-wrap: wrap;
}

/* Advanced Filters Styles */
.lgap-advanced-filters-button {
  font-family: "Playfair Display", Sans-serif;
  font-weight: 600;
  background-color: transparent !important;
  color: #000 !important;
  /* border: 1px solid #ddd; */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lgap-advanced-filters-button:hover {
  background-color: #ffb800;
  color: #000;
  border-color: #ffb800;
}

.lgap-advanced-filters-button i {
  font-size: 14px;
}

/* Advanced Filters Popup */

.lgap-advanced-filters-popup-title {
  font-family: "Playfair Display", Sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.lgap-advanced-filter-group {
  margin-bottom: 12px;
}

.lgap-advanced-filter-group .lgap-advanced-filter-group-title {
  font-family: "Playfair Display", Sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--lgap-primary-color);
}

.lgap-advanced-filter-group .uk-form-label {
  font-family: "Playfair Display", Sans-serif;
  font-weight: 600;
  color: var(--lgap-secondary-color);
  display: block;
  font-size: 16px;
  margin-bottom: 0px;
}

.lgap-advanced-filter-group .uk-text-small {
  font-size: 14px;
}

.lgap-advanced-filter-group .uk-input {
  border: 1px solid #e5e5e5 !important;
}

.lgap-advanced-filter-group .uk-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Checkboxes for features */
.lgap-advanced-filter-group .uk-checkbox {
  accent-color: #ffb800;
  margin-right: 8px;
}

.lgap-advanced-filter-group .uk-checkbox:checked {
  background-color: #ffb800;
  border-color: #ffb800;
}

.lgap-advanced-filter-group label.uk-flex {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  margin-bottom: 5px;
}

.lgap-advanced-filter-group label.uk-flex:hover {
  background-color: #f9f9f9;
}

/* Distance filters grid */
.lgap-advanced-filter-group .uk-grid-small {
  gap: 15px;
}

/* Modal backdrop */
.uk-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments for advanced filters */
@media (max-width: 767px) {
  .lgap-advanced-filters-popup {
    width: 95vw;
    max-height: 90vh;
    padding: 20px;
  }

  .lgap-advanced-filters-popup-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .lgap-advanced-filter-group .uk-child-width-1-3\@m > * {
    width: 100%;
  }

  .lgap-advanced-filter-group .uk-child-width-1-2\@s > * {
    width: 100%;
  }

  .lgap-advanced-filters-popup .uk-button {
    width: 100%;
    margin-bottom: 10px;
  }

  .lgap-advanced-filters-popup .uk-text-right {
    text-align: center;
  }
}

/* Mobile visibility controls */
.lgap-hide-mobile {
  display: block;
}

.lgap-show-mobile-only {
  display: none;
}

@media (max-width: 959px) {
  /* Hide fields on mobile */
  .lgap-hide-mobile {
    display: none !important;
  }

  /* Show mobile-only fields in modal */
  .lgap-show-mobile-only {
    display: block !important;
  }

  /* Adjust form layout for mobile */
  .lgap-elementor-widget .uk-grid > * {
    flex: 1 1 auto;
  }

  /* Make sure dates field takes available space */
  /* .lgap-elementor-widget .uk-width-1-5\@m:not(.lgap-hide-mobile) {
      flex: 1;
      min-width: 0;
    } */

  /* Button container layout on mobile */
  .lgap-button-container {
    flex: 1;
    min-width: 0;
  }

  .lgap-button-container .uk-grid {
    margin: 0;
    gap: 5px;
  }

  .lgap-button-container .uk-grid > * {
    padding: 0;
  }

  /* Adjust button widths for mobile */
  .lgap-elementor-widget .uk-width-1-6\@m {
    width: 50%;
    flex: 0 0 50%;
  }

  /* Modal fields spacing on mobile */
  /* .lgap-advanced-filters-popup .lgap-show-mobile-only .lgap-advanced-filter-group {
      margin-bottom: 15px;
    } */

  /* Ensure buttons have proper height on mobile */
  .lgap-button-container .uk-button {
    /* height: 50px;
      min-height: 50px; */
  }
  .lgap-advanced-filters-modal-body {
    max-height: 500px !important;
  }
}

/* Override UIKit modal defaults */
.lgap-advanced-filters-popup .uk-modal-dialog {
  padding: 30px;
}

.lgap-advanced-filters-popup .uk-modal-close-default {
  /* position: absolute; */
  /* top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    z-index: 10; */
  background-color: transparent !important;
}

.lgap-advanced-filters-popup .uk-modal-close-default svg {
  color: #000;
}

.lgap-advanced-filters-popup .uk-modal-close-default:hover {
  color: #000;
}

/** Footer Buttons */

.lgap-btn-submit {
  background-color: #ffb800 !important;
  color: #000 !important;
  border: none;
}

.lgap-btn-submit:hover {
  background-color: #ffb800;
  color: #fff !important;
}

.lgap-btn-cancel {
  background-color: #f7f7f7 !important;
  color: #000 !important;
  border: 1px solid #ddd;
}

.lgap-btn-cancel:hover {
  background-color: #e9e9e9 !important;
  color: #000 !important;
  border-color: #ccc;
}