/*
Theme Name: Astra Child - LeaseProper Fixes
Template: astra
Description: Child theme with mobile responsive fixes and booking enhancements
Author: Proper-T LLC
Version: 1.0
*/

/* Import parent theme styles */
@import url('../astra/style.css');

/* ============================================
   MOBILE PROPERTY CARD FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Fix icon alignment - force horizontal layout */
  .property-card .property-icons,
  .property-card .property-details,
  .listing-icons,
  .property-meta,
  .property-features {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  
  /* Fix white space issues */
  .property-card,
  .listing-card,
  .elementor-widget-container .property-item {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }
  
  .property-card .property-title,
  .listing-card h3 {
    margin-bottom: 10px !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  .property-card .property-location,
  .property-location {
    margin-bottom: 10px !important;
    font-size: 0.9rem !important;
  }
  
  /* Fix price display */
  .property-card .property-price,
  .property-price,
  .listing-price {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    display: block !important;
  }
  
  /* Ensure individual icon items stay inline */
  .property-icon-item,
  .property-meta-item,
  .listing-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-right: 10px !important;
  }
  
  /* Icon size adjustments */
  .property-icon-item svg,
  .property-icon-item img,
  .property-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ============================================
   PAYMENT MODAL CLOSE BUTTON FIX
   ============================================ */

.payment-modal .close,
.modal-close,
.smartcheckout-modal .close,
.homerunner-modal .close,
.booking-modal .close,
[class*="modal"] .close,
[class*="popup"] .close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 999999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 35px !important;
  height: 35px !important;
  cursor: pointer !important;
  font-size: 28px !important;
  color: #333 !important;
  background: white !important;
  border-radius: 50% !important;
  text-align: center !important;
  line-height: 35px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

.payment-modal .close:hover,
.modal-close:hover,
.smartcheckout-modal .close:hover {
  background: #f0f0f0 !important;
  transform: scale(1.1) !important;
}

/* Ensure close button is always on top */
.payment-modal .close::before,
.modal-close::before {
  content: "×" !important;
  font-weight: bold !important;
}

/* ============================================
   STICKY BOOKING WIDGET
   ============================================ */

.sticky-booking {
  position: fixed !important;
  top: 100px !important;
  right: 20px !important;
  z-index: 9998 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
  animation: slideInRight 0.3s ease-out !important;
  max-width: 350px !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile sticky booking - bottom of screen */
@media (max-width: 768px) {
  .sticky-booking {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
  }
}

/* ============================================
   MAP PIN FIX
   ============================================ */

/* Ensure map pins are clickable */
.property-map-pin,
.map-marker,
[class*="marker"] {
  cursor: pointer !important;
  pointer-events: all !important;
  z-index: 100 !important;
}

.property-map-pin:hover,
.map-marker:hover {
  transform: scale(1.1) !important;
  z-index: 101 !important;
}

/* Map popup styling */
.property-map-popup,
.map-popup {
  pointer-events: all !important;
  cursor: pointer !important;
}

/* ============================================
   CALENDAR IMPROVEMENTS
   ============================================ */

/* Booked dates styling */
.calendar-day.booked,
.unavailable-date,
.blocked-date {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  position: relative !important;
}

.calendar-day.booked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: #9ca3af;
}

/* Available dates styling */
.calendar-day.available,
.available-date {
  background: white !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.calendar-day.available:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
}

/* Selected dates */
.calendar-day.selected {
  background: #3b82f6 !important;
  color: white !important;
}

/* ============================================
   PROPERTY TYPE BADGE FIX
   ============================================ */

.property-type-badge,
.property-category {
  display: inline-block !important;
  padding: 5px 12px !important;
  background: #10b981 !important;
  color: white !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Better mobile spacing */
  .site-content {
    padding: 15px !important;
  }
  
  /* Mobile-friendly buttons */
  .booking-button,
  .cta-button,
  [class*="button"] {
    width: 100% !important;
    padding: 15px !important;
    font-size: 1.1rem !important;
  }
  
  /* Property grid on mobile */
  .property-grid,
  .listings-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3b82f6;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.calendar.loading,
.property-card.loading {
  opacity: 0.5;
  pointer-events: none;
}


/* === AGGRESSIVE OVERRIDES === */

/* AGGRESSIVE MOBILE FIXES - Override Everything */

/* Force ALL icon containers to be horizontal on mobile */
@media (max-width: 768px) {
  
  /* Target every possible icon container class */
  [class*="icon"],
  [class*="meta"],
  [class*="detail"],
  [class*="feature"],
  [class*="amenity"],
  .property-card > *,
  .listing-card > * {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  /* Force inline layout for individual items */
  [class*="icon"] > *,
  [class*="meta"] > *,
  [class*="detail"] > * {
    display: inline-flex !important;
    margin-right: 15px !important;
  }
  
  /* Fix card padding */
  [class*="card"],
  [class*="item"],
  [class*="listing"] {
    padding: 12px !important;
  }
  
  /* Fix spacing between elements */
  [class*="card"] > * {
    margin-bottom: 8px !important;
  }
  
  /* Bed/guest/bathroom icons - force horizontal */
  svg,
  img[class*="icon"],
  i[class*="icon"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
  }
}

/* Map pin fix - make ALL X markers clickable */
.leaflet-marker-icon,
[class*="marker"],
[class*="pin"] {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
}