/* ============================================================
   DAYPASS HOMEPAGE LUXURY DESIGN SYSTEM
   File: daypass-luxury-home.css
   Purpose: Homepage styling (home_new.php) - Search, Cards, Empty State
   ============================================================ */

/* ============================================================
   SEARCH FORM STYLING
   ============================================================ */
/* Search form reverted to original styling - no luxury design changes */

/* Mobile search field fixes */
@media (max-width: 768px) {
  .searchrow input.form-control,
  .search_date_input {
    font-size: 16px !important;
    padding: 12px 10px !important;
    line-height: 1.5 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .searchrow input.form-control::placeholder,
  .search_date_input::placeholder {
    font-size: 16px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    color: #999 !important;
  }

  .vs__search {
    font-size: 16px !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .vs__search::placeholder {
    font-size: 16px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  .searchrow .vs__selected {
    padding: 8px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    line-height: 1.5 !important;
  }

  .searchrow .vs__dropdown-toggle {
    padding: 0 12px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ============================================================
   HOTEL CARD STYLING
   ============================================================ */

.placecard {
  border-radius: 16px !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  background: white !important;
  height: 100% !important;
}

.placecard:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.placecard .card-img-top,
.placecard .cardimage {
  height: 220px !important;
  object-fit: cover !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.placecard .card-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Hotel name */
.placecard .card-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: auto !important;
}

.placecard .card-title a {
  text-decoration: none !important;
  color: #1a1a1a !important;
}

.placecard .card-title a:hover {
  color: #007bff !important;
}

/* Generic card text */
.placecard .card-text,
.placecard .hometext {
  font-family: 'Poppins', sans-serif !important;
  color: #666 !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.placecard .card-text.hometext {
  color: #1a1a1a !important;
  font-size: 13px !important;
}

/* City/Location text */
.placecard .city-location {
  font-family: 'Poppins', sans-serif !important;
  color: #666 !important;
  font-size: 13px !important;
}

/* Rating display */
.placecard .rateYo {
  display: inline-block !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

.placecard .rating-count {
  font-family: 'Poppins', sans-serif !important;
  color: #666 !important;
  font-size: 13px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

/* Rating count span */
.placecard .hometext.float-end {
  display: inline-block !important;
  vertical-align: middle !important;
  padding-top: 0 !important;
  line-height: 1 !important;
}
.placecard .txtright {
  font-family: 'Poppins', sans-serif !important;
  color: #999 !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.placecard .txtright .material-icons {
  font-size: 16px !important;
}

/* Amenity icons */
.aminities-icon {
  display: flex !important;
  gap: 8px !important;
  margin: 12px 0 !important;
  align-items: center !important;
}

.aminities-icon span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.typeimg {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* Daypass package name & type */
.dpname {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  font-size: 13px !important;
}

/* Price display section */
.price-display {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

.price-label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  color: #999 !important;
  font-weight: 400 !important;
}

.price-amount {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
}

/* Status text (Check availability, Sold out) */
.card-status {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 500 !important;
}

.card-status.available {
  color: #4caf50 !important;
}

.card-status.unavailable {
  color: #c62828 !important;
}

.card-status.soldout {
  color: #999 !important;
  text-decoration: line-through !important;
}

/* Mobile card adjustments */
@media (max-width: 768px) {
  .placecard .card-title {
    font-size: 20px !important; /* +2px from 18px */
  }

  .placecard .card-img-top,
  .placecard .cardimage {
    height: 200px !important;
  }

  .placecard .card-body {
    padding: 20px !important;
  }

  .placecard .card-text {
    font-size: 12px !important;
  }

  .price-amount {
    font-size: 15px !important;
  }

  /* Fix rating alignment on mobile */
  .placecard .rateYo {
    line-height: 1.2 !important;
    display: inline-block !important;
  }

  .placecard .rating-count {
    line-height: 1.2 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .placecard .hometext.float-end {
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .placecard .card-title {
    font-size: 16px !important;
  }

  .placecard .card-text {
    font-size: 12px !important;
  }
}

/* ============================================================
   EMPTY STATE / NOT SERVING LOCATION
   ============================================================ */

.nolocation-section {
  background: white !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}

.nolocation-container {
  text-align: center !important;
  max-width: 600px !important;
}

.nolocation-section h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

.nolocation-section p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  color: #666 !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
}

.btn-signup-premium {
  background: #1a1a1a !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-signup-premium:hover {
  background: #333 !important;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.25) !important;
  transform: translateY(-2px) !important;
}

.btn-signup-premium:active {
  transform: translateY(0) !important;
}

/* Social icons section */
.social-icons-section {
  margin-top: 40px !important;
}

.social-icons-section h4 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 16px !important;
}

.social-icons {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  align-items: center !important;
}

.social-icons a {
  font-size: 28px !important;
  color: #1a1a1a !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.social-icons a:hover {
  color: #007bff !important;
  transform: scale(1.1) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
  /* Prevent iOS zoom on form inputs */
  .searchrow input.form-control,
  .search_date_input,
  .searchrow .vs__dropdown-toggle,
  .vs__search {
    font-size: 16px !important;
  }

  .searchrow input.form-control::placeholder,
  .search_date_input::placeholder,
  .vs__search::placeholder {
    font-size: 16px !important;
  }

  /* Better touch targets on mobile */
  .searchicons {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 10px !important;
  }

  /* Card adjustments */
  .placecard {
    margin-bottom: 16px !important;
  }

  .placecard .card-img-top,
  .placecard .cardimage {
    height: 200px !important;
  }

  .placecard .card-body {
    padding: 20px !important;
  }

  .placecard .card-title {
    font-size: 16px !important;
  }

  /* Mobile search spacing */
  .mobile_search .searchrow {
    margin-bottom: 12px !important;
  }

  .mobile_search .searchrow:last-child {
    margin-bottom: 0 !important;
  }

  /* Empty state mobile */
  .nolocation-section h3 {
    font-size: 24px !important;
  }

  .nolocation-section p {
    font-size: 15px !important;
  }

  .social-icons {
    gap: 16px !important;
  }

  .social-icons a {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  .searchrow input.form-control,
  .search_date_input,
  .searchrow .vs__dropdown-toggle {
    font-size: 16px !important;
    padding: 12px 10px !important;
  }

  .searchicons {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .placecard .card-title {
    font-size: 15px !important;
  }

  .placecard .card-text {
    font-size: 12px !important;
  }

  .price-amount {
    font-size: 15px !important;
  }

  .nolocation-section h3 {
    font-size: 22px !important;
  }

  .btn-signup-premium {
    padding: 12px 28px !important;
    font-size: 15px !important;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.notranslate {
  /* Google Translate exclude */
}

.no-padding {
  padding: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-2 {
  margin-top: 12px !important;
}

.mb-2 {
  margin-bottom: 12px !important;
}

.mb-3 {
  margin-bottom: 16px !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.pull-right {
  float: right !important;
}

.float-end {
  float: right !important;
}