/*
 * Lej1box Widget CSS Overrides
 * Replicates the original pulterbox.dk styling that was set in X Theme custom CSS.
 * These rules override Astra theme conflicts to match the original site appearance.
 */

/* =============================================
   TABLE - transparent background
   ============================================= */
div#root_booking table {
  background: transparent;
}

/* =============================================
   BOOKING WIDGET - Input fields
   Fix dark/black background from Astra theme
   ============================================= */
div#root_booking select,
div#root_booking textarea,
div#root_booking input[type="text"],
div#root_booking input[type="password"],
div#root_booking input[type="datetime"],
div#root_booking input[type="datetime-local"],
div#root_booking input[type="date"],
div#root_booking input[type="month"],
div#root_booking input[type="time"],
div#root_booking input[type="week"],
div#root_booking input[type="number"],
div#root_booking input[type="email"],
div#root_booking input[type="url"],
div#root_booking input[type="search"],
div#root_booking input[type="tel"],
div#root_booking input[type="color"],
div#root_booking .uneditable-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important;
  font-family: Montserrat, sans-serif !important;
  box-shadow: rgba(50, 50, 93, 0.1) 0px 15px 35px, rgba(0, 0, 0, 0.07) 0px 5px 15px !important;
  width: 100% !important;
  height: auto !important;
  font-size: 16px !important;
  background-color: #fff !important;
  color: #333 !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
  padding: 15px 20px !important;
  border-width: 0px !important;
  border-style: initial !important;
  border-color: initial !important;
  border-image: initial !important;
  border-radius: 4px !important;
  outline: 0px !important;
  margin-bottom: 0 !important;
}

/* =============================================
   BOOKING WIDGET - Tab bar (Ny Kunde / Eksisterende Kunde)
   Fix red/dark tab background from Astra theme
   ============================================= */

/* Tab container */
div#root_booking .MuiAppBar-root,
div#root_booking .MuiAppBar-colorSecondary,
div#root_booking header.MuiAppBar-root {
  background-color: #ffffff !important;
  color: #333333 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Individual tab buttons */
div#root_booking .MuiTab-root {
  color: #666666 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Active/selected tab */
div#root_booking .MuiTab-root.Mui-selected,
div#root_booking .MuiTab-textColorInherit.Mui-selected {
  color: #F06F2F !important;
  background-color: #ffffff !important;
}

/* Tab indicator line (orange underline on active tab) */
div#root_booking .MuiTabs-indicator {
  background-color: #F06F2F !important;
}

/* Tab text */
div#root_booking .MuiTab-wrapper {
  color: inherit !important;
}

/* =============================================
   BOOKING WIDGET - Container width
   Fix widget stretching to full width
   ============================================= */
div#root_booking {
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* =============================================
   CUSTOMER PORTAL - Input fields
   Same fix for customer portal widget
   ============================================= */
div#root_customer select,
div#root_customer textarea,
div#root_customer input[type="text"],
div#root_customer input[type="password"],
div#root_customer input[type="datetime"],
div#root_customer input[type="datetime-local"],
div#root_customer input[type="date"],
div#root_customer input[type="month"],
div#root_customer input[type="time"],
div#root_customer input[type="week"],
div#root_customer input[type="number"],
div#root_customer input[type="email"],
div#root_customer input[type="url"],
div#root_customer input[type="search"],
div#root_customer input[type="tel"],
div#root_customer input[type="color"],
.uneditable-input {
  background-color: transparent !important;
}

div#root_customer label {
  margin-left: 10px !important;
  margin-top: 2px !important;
}

div#root_customer label[data-shrink="true"] {
  margin-left: 0px !important;
  margin-top: 0px !important;
}

/* =============================================
   CALENDAR - Date picker navigation
   Ensure prev/next month buttons are visible
   ============================================= */
div#root_booking .react-datepicker__navigation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

div#root_booking .react-datepicker__navigation--previous {
  left: 10px !important;
  border-right-color: #ccc !important;
}

div#root_booking .react-datepicker__navigation--next {
  right: 10px !important;
  border-left-color: #ccc !important;
}

/* =============================================
   GENERAL - Remove any Astra border/outline overrides
   ============================================= */
div#root_booking *,
div#root_customer * {
  box-sizing: border-box;
}

div#root_booking input:focus,
div#root_booking select:focus,
div#root_booking textarea:focus {
  outline: none !important;
  border-color: #F06F2F !important;
  box-shadow: rgba(50, 50, 93, 0.1) 0px 15px 35px, rgba(0, 0, 0, 0.07) 0px 5px 15px, 0 0 0 0.2rem rgba(240, 111, 47, 0.25) !important;
}

/* =============================================
   CATCH-ALL - Target ALL inputs inside booking widget
   including Material UI inputs which have no type attribute
   ============================================= */
div#root_booking input {
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* =============================================
   RESTORE CHECKBOX - appearance: none hid it
   ============================================= */
div#root_booking input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  background-color: initial !important;
  color-scheme: light !important;
  width: auto !important;
  height: auto !important;
  padding: initial !important;
  margin: initial !important;
  border: initial !important;
  box-shadow: none !important;
}