/* 
 * ==========================================
 * HPH + Strange Designs UG 
 * Modern Beds24 Redesign v6.0
 * Custom Color Palette: Beige/Petrol/Coral
 * Dual Mode: div.b24fullcontainer-rooms 
 * ==========================================
 *
 * == Inhalt ==
 *
 * Root Variablen
 * -- Basis
 * -- Typo System
 * Kalender Hauptseite
 * -- 1. Gemeinsames CSS
 * -- 2. Globale Styles & Container 
 * --- Überschriften in Primärfarbe oder dunkel
 * -- 3. Input & Formular Felder
 * --- Fokus-Ring 
 * --- Labels 
 * -- 4. Buttons (Petrol mit Weiß) 
 * --- Gradient 
 * --- Button Hover
 * -- 5. Deko & Highlights
 * --- Preisboxen oder Highlight-Boxen
 * --- Fehlermeldungen 
 * -- 6. Kalender 
 * --- Tage 
 * -- Kalender Header
 * -- 7. Barrierefreiheit und Responsive Design
 * -- Mobile  
 * 
 * Buchungsseite 1 - Auswahl
 */

:root {
  --hph-bg-page: #ffebcd;
  --hph-bg-input: #ffffff;
  --hph-border-color: #386373;
  --hph-primary-start: #386373;
  --hph-primary-end: #2c4e5c;
  --hph-secondary-start: #f76953;
  --hph-secondary-end: #d1523f;
  --hph-text-on-primary: #ffffff;
  --hph-accent-color: #f76953;
  --hph-text-on-accent: #000000;
  --hph-text-main: #2d3748;
  --hph-text-muted: #5a6a75;
  --hph-hover-bg: rgba(56, 99, 115, 0.1);
  --hph-error: #dc3545;
  --hph-success: #5c8874;

  --hph-radius-sm: clamp(4px, 1vw, 8px);
  --hph-radius-md: clamp(8px, 1.5vw, 12px);
  --hph-padding-container: clamp(12px, 3vw, 24px);
  --hph-padding-label: clamp(5px, 0.5vw, 10px);
  --hph-margin-s: clamp(10px, 1vw, 20px);
  --hph-margin-l: clamp(20px, 2vw, 40px);

  --hph-shadow-focus: 0 0 0 3px rgba(56, 99, 115, 0.25);
  --hph-shadow-button: 0 10px 25px rgba(44, 78, 92, 0.3);

  --hph-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --hph-line-height-base: 1.6;
  --hph-line-height-tight: 1.3;
  --hph-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typo System */

  --hph-font-size-base: clamp(0.875rem, 0.85rem + 0.2vw, 1.125rem);
  --hph-font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --hph-font-size-lg: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
  --hph-font-size-xl: clamp(1.125rem, 1rem + 0.3vw, 1.5rem);
  --hph-font-size-xxl: clamp(1.5rem, 1.3rem + 0.5vw, 2.25rem);

  --hph-line-height-base: 1.6;
  --hph-line-height-tight: 1.3;
}

div.b24fullcontainer-rooms .b24-room-pic {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  width: 50% !important;
}

div.b24fullcontainer-rooms .b24-room-pic img.img-responsive {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--hph-radius-sm) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s ease !important;
  max-width: 400px !important;
  margin: 0 auto !important;
}

div.b24fullcontainer-rooms .b24-room-pic img.img-responsive:hover {
  transform: scale(1.05) !important;
}

div.b24fullcontainer-rooms
  .monthcalendar
  td.dateavail:not(.datepast):not(.datenotavail) {
  background: var(--hph-success) !important;
  color: var(--hph-bg-input) !important;
  font-weight: 600 !important;
  border-radius: var(--hph-radius-sm) !important;
  cursor: pointer !important;
  border: 1px solid #296449 !important;
  transition: all 0.2s ease !important;
}

div.b24fullcontainer-rooms
  .monthcalendar
  td.dateavail:not(.datepast):not(.datenotavail):hover {
  background: var(--hph-border-color) !important;
  transform: translateY(-1px) !important;
  color: var(--hph-bg-input) !important;
}

div.b24fullcontainer-rooms .monthcalendar td.datenotavail:not(.datepast) {
  background-color: var(--hph-accent-color) !important;
  color: var(--hph-text-on-accent) !important;
  opacity: 0.8 !important;
  border-radius: var(--hph-radius-sm) !important;
  cursor: not-allowed !important;
  border: 1px solid #fecaca !important;
  font-weight: 100;
}

div.b24fullcontainer-rooms .monthcalendar td.datepast,
.monthcalendar td.datepast {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: default !important;
  text-decoration: line-through !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

div.b24fullcontainer-rooms .monthcalendar th {
  color: var(--hph-bg-input) !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
}

div.b24fullcontainer-rooms .monthcalendar td:empty {
  background: transparent !important;
  border: none !important;
}

div.b24fullcontainer-rooms .monthcalendar td.datepast.datenotavail {
  background-color: #b9b9b9 !important;
  border-radius: var(--hph-radius-sm) !important;
  color: var(--hph-text-muted) !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
}

/* 2. Globale Styles & Container */

div.b24fullcontainer-rooms #booking_form,
div.b24fullcontainer-rooms .b24_container {
  background-color: var(--hph-bg-page) !important;
  font-family: var(--hph-font-family) !important;
  color: var(--hph-text-main) !important;
  font-size: var(--hph-font-size-xxl) !important;
  padding: var(--hph-padding-container) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: var(--hph-line-height-base) !important;
}

#b24scroller .input-group-addon {
  background: none;
  border: none;
  color: var(--hph-bg-input);
}

#b24scroller {
  background: var(--hph-primary-start);
  color: var(--hph-bg-input);
  border-radius: var(--hph-radius-md);

  button.at_bookingbut,
  button.b24-multirombutton {
    color: #ffffff;
    background: var(--hph-accent-color) !important;
    font-weight: 600;
  }
}

div.b24fullcontainer-rooms
  div.ajaxroomwarn.at_offerfromdiv
  span.bookingpagedollars,
div.b24fullcontainer-rooms
  div.ajaxroomwarn.at_offerfromdiv
  span.bookingpagecents,
div.b24fullcontainer-rooms
  div.ajaxroomwarn.at_offerfromdiv
  span.bookingpagecurrency2 {
  font-size: var(--hph-font-size-xxl) !important;
}

div.b24fullcontainer-rooms h1,
div.b24fullcontainer-rooms h2,
div.b24fullcontainer-rooms h3,
div.b24fullcontainer-rooms .b24_header {
  color: var(--hph-primary-start) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.5rem !important;
}

/* 3. Input & Formular Felder */

div.b24fullcontainer-rooms input.form-control,
div.b24fullcontainer-rooms input[type="text"],
div.b24fullcontainer-rooms input[type="email"],
div.b24fullcontainer-rooms input[type="tel"],
div.b24fullcontainer-rooms input[type="date"],
div.b24fullcontainer-rooms input[type="number"],
div.b24fullcontainer-rooms select,
div.b24fullcontainer-rooms textarea {
  width: 100% !important;
  background-color: var(--hph-bg-input) !important;
  border: 2px solid var(--hph-border-color) !important;
  border-radius: var(--hph-radius-sm) !important;
  padding: 3px 5px !important;
  font-size: var(--hph-font-size-xxl) !important;
  color: var(--hph-text-main) !important;
  transition: var(--hph-transition) !important;
  outline: none !important;
  min-height: 44px !important;
}

/* Fokus-Ring */

div.b24fullcontainer-rooms input:focus,
div.b24fullcontainer-rooms select:focus,
div.b24fullcontainer-rooms textarea:focus {
  border-color: var(--hph-primary-start) !important;
  box-shadow: var(--hph-shadow-focus) !important;
}

/* Labels */

div.b24fullcontainer-rooms label,
div.b24fullcontainer-rooms .form-label {
  color: var(--hph-bg-input) !important;
  font-weight: 600 !important;
  font-size: var(--hph-font-size-xxl) !important;
}

div.b24fullcontainer-rooms .b24panel-room {
  border-radius: var(--hph-radius-md);

  div.row div.b24-module.b24-offer-module.b24-offer-select {
    width: 100% !important;
  }
}

div.b24fullcontainer-rooms .b24-roompanel-heading {
  background: var(--hph-primary-start);
  color: var(--hph-bg-input);
  border-radius: var(--hph-radius-md) var(--hph-radius-md) 0 0;
}

div.b24fullcontainer-rooms .btn,
div.b24fullcontainer-rooms .btn-primary,
div.b24fullcontainer-rooms input[type="submit"],
div.b24fullcontainer-rooms button,
div.b24fullcontainer-footer .button {
  display: inline-block !important;
  width: auto !important;
  min-width: 180px !important;
  min-height: 48px !important;
  text-align: center !important;
  background: linear-gradient(
    135deg,
    var(--hph-primary-start) 0%,
    var(--hph-primary-end) 100%
  ) !important;
  color: var(--hph-text-on-primary) !important;
  border: none !important;
  border-radius: var(--hph-radius-md) !important;
  padding: 14px 32px !important;
  font-size: var(--hph-font-size-xxl) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--hph-transition) !important;
  box-shadow: var(--hph-shadow-button) !important;
  text-transform: none !important;
}

div.b24fullcontainer-footer .button .glyphicon-arrow-up:before {
  margin-right: 10px !important;
}

div.b24fullcontainer-rooms .btn:hover,
div.b24fullcontainer-rooms input[type="submit"]:hover,
div.b24fullcontainer-footer .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 35px rgba(44, 78, 92, 0.4) !important;
  filter: brightness(110%) !important;
}

div.b24fullcontainer-rooms .price_total,
div.b24fullcontainer-rooms .summary-box {
  background-color: #fffaf5 !important;
  color: var(--hph-text-main) !important;
  padding: 16px !important;
  border-radius: var(--hph-radius-sm) !important;
  font-weight: 700 !important;
  font-size: var(--hph-font-size-lg) !important;
  margin: 20px 0 !important;
  border-left: 5px solid var(--hph-accent-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

div.b24fullcontainer-rooms .alert-danger,
div.b24fullcontainer-rooms .error_message {
  background-color: #fff5f5 !important;
  color: var(--hph-error) !important;
  border: 2px solid var(--hph-accent-color) !important;
  font-size: var(--hph-font-size-xxl) !important;
}

div.b24fullcontainer-rooms table.calendar_table td.selected {
  background: linear-gradient(
    135deg,
    var(--hph-primary-start),
    var(--hph-primary-end)
  ) !important;
  color: var(--hph-text-on-primary) !important;
  font-weight: bold !important;
  border: none !important;
}

div.b24fullcontainer-rooms
  table.calendar_table
  td:not(.disabled):not(.selected):hover {
  background-color: var(--hph-hover-bg) !important;
  border: 1px solid var(--hph-primary-start) !important;
  cursor: pointer !important;
}

/* Kalender Header Tage */

div.b24fullcontainer-rooms table.calendar_table th {
  color: var(--hph-primary-start) !important;
  font-weight: 700 !important;
}

div.b24fullcontainer-rooms .atcolor.confirmation {
  background-color: var(--hph-border-color) !important;
  color: var(--hph-bg-input) !important;
  padding: var(--hph-padding-container);
  border-radius: var(--hph-radius-md) var(--hph-radius-md) 0 0;

  .ppcancelbutton {
    order: 1;
  }
}

div.b24fullcontainer-rooms .row.confirmation {
  background-color: var(--hph-error) !important;
}

@media only screen and (max-width: 767px) {
  #b24scroller {
    color: var(--hph-border-color);
  }

  div.b24fullcontainer-rooms {
    .b24-selector-checkin .form-group,
    .b24-selector-checkout .form-group {
      background: var(--hph-border-color);
      border: none;
    }

    .b24-room-pic {
      width: 100% !important;
    }
  }
}