/* 
 * Booking Page Fixes - Specific styles to fix date display size
 */

/* Target the specific HTML structure in the booking page */
.emerald-booking-engine {
  --font-size-base: 0.85rem;
  --font-size-small: 0.75rem;
  --font-size-heading: 0.7rem;
}

/* Direct targeting for the date display */
.emerald-booking-engine h4,
.emerald-booking-engine [class*="Check-in"],
.emerald-booking-engine [class*="check-in"] {
  font-size: var(--font-size-heading) !important;
  margin-bottom: 0.2rem !important;
  color: #4a5568 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Target the date display text */
.emerald-booking-engine p,
.emerald-booking-engine [class*="Jum"],
.emerald-booking-engine [class*="Sab"],
.emerald-booking-engine [class*="Mei"] {
  font-size: var(--font-size-base) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.2rem !important;
}

/* Target the nights display */
.emerald-booking-engine small,
.emerald-booking-engine [class*="malam"] {
  font-size: var(--font-size-small) !important;
  color: #4a5568 !important;
  font-style: italic;
}

/* Target the calendar icon */
.emerald-booking-engine svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 0.3rem !important;
}

/* Target the search details card */
.emerald-booking-engine .emerald-search-details {
  margin: 1rem !important;
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
  font-size: 0.85rem !important;
}

.emerald-search-details-content {
  padding: 0.75rem !important;
}

/* Target the specific date display in the booking page */
.emerald-search-detail-item:first-child {
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Target the "Detail Pencarian Anda" heading */
.emerald-booking-engine h2 {
  font-size: 1.1rem !important;
  margin-bottom: 0.75rem !important;
  color: #1a365d !important;
  font-weight: 600 !important;
}

/* Target the "Check-in / Check-out" text */
.emerald-search-detail-item div:first-child {
  font-size: 0.7rem !important;
  color: #4a5568 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0.2rem !important;
  font-weight: 600 !important;
}

/* Target the date format text */
.emerald-search-detail-item p {
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.2rem !important;
  color: #2d3748 !important;
}

/* Target the "1 malam" text */
.emerald-search-detail-item small,
.emerald-search-detail-item span:contains("malam") {
  font-size: 0.75rem !important;
  color: #718096 !important;
  font-style: italic !important;
}

/* Target all SVG icons */
.emerald-search-detail-item svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 0.3rem !important;
}

/* Target the "Tamu" and "Kamar" headings */
.emerald-search-detail-item:not(:first-child) div:first-child {
  font-size: 0.7rem !important;
  color: #4a5568 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0.2rem !important;
  font-weight: 600 !important;
}

/* Target the specific date format with calendar icon */
.emerald-search-date-section {
  display: flex !important;
  align-items: center !important;
  font-size: 0.85rem !important;
}

/* Compact layout for date display */
.emerald-search-detail-item:first-child .emerald-search-details-content {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Make check-in/check-out display more compact */
.emerald-search-date-section {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Additional specificity for date elements */
#booking-widget-container .emerald-search-detail-item p,
[id*="booking"] .emerald-search-detail-item p {
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

#booking-widget-container .emerald-search-detail-item div:first-child,
[id*="booking"] .emerald-search-detail-item div:first-child {
  font-size: 0.7rem !important;
}

/* Force compact display for date section */
.emerald-search-date-section p {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.85rem !important;
}

/* Ensure the date display is properly sized */
@media (min-width: 768px) {
  .emerald-search-date-section p {
    max-width: 200px !important;
  }
}

@media (max-width: 767px) {
  .emerald-search-date-section p {
    max-width: 150px !important;
  }
}