/* ============================================================
   Pro-Guiding · SimplyBook calendar · Dark theme
   Brand navy #1a2035 — matches pro-guiding-de.webflow.io
   ============================================================ */

/* ---- Design tokens (reference, not used as CSS vars
   because SimplyBook's iframe scope strips :root vars in
   some places — values inlined below) -------------------------
   --bg-base:        #0f1424
   --bg-surface:     #1a2035
   --bg-elevated:    #232a45
   --border-subtle:  rgba(255,255,255,0.08)
   --border-default: rgba(255,255,255,0.15)
   --text-primary:   #ffffff
   --text-secondary: rgba(255,255,255,0.72)
   --text-tertiary:  rgba(255,255,255,0.50)
   --accent:         #a8e6a3
   --accent-ink:     #0f1424
   ----------------------------------------------------------- */


/* ---- Global canvas ---------------------------------------- */
html, body,
#sb-timeline,
#steps,
#steps-content,
#sb_booking_content,
.datetime-step,
#sb_dateview_container,
#sb_timeview_container,
.timeline-wrapper,
#sb-time-classes-container,
.service-item,
.service-item .full-info,
.detail-step-wrap {
  background: #05040d !important;
  color: #ffffff !important;
}

body, body * {
  color: #ffffff;
}


/* ---- Hide chrome you already removed ---------------------- */
#header,
#main-buttons,
#time-settings,
#steps-nav,
.hour-container,
.time-legend,
#sb_gdpr_report_module_container {
  display: none !important;
}


/* ============================================================
   Calendar (date picker)
   ============================================================ */

/* Calendar container surface */
.calendar,
.top-date-select,
.weeks-date {
  background: transparent !important;
  color: #ffffff !important;
}

/* Month / weekday labels */
.calendar .month-name,
.calendar .month-title,
.calendar .day-name,
.weeks-date .week-name,
.weeks-date .week-name * {
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
}

/* Month-nav arrows */
.calendar .month-nav,
.calendar .month-nav *,
.calendar .prev,
.calendar .next {
  color: #ffffff !important;
  fill: #ffffff !important;
  background: transparent !important;
  border: none !important;
}
.calendar .month-nav:hover,
.calendar .prev:hover,
.calendar .next:hover {
  color: #a8e6a3 !important;
  fill: #a8e6a3 !important;
}

/* Default day cell — keep dark, dim disabled days */
.date,
.date a {
  background: transparent !important;
  color: rgba(255,255,255,0.50) !important;
  border-radius: 50% !important;
}

/* Available date — accent green pill */
.date a.day-on.sb-available-date {
  background-color: #a8e6a3 !important;
  color: #0f1424 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Hover on available date */
.date:not(.selected) a.day-on.sb-available-date:hover {
  background-color: #c2f0bd !important;
  color: #0f1424 !important;
}

/* Strip the legacy purple selection background */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_dateview_container .top-date-select
.calendar .weeks-date .date.selected {
  background: transparent !important;
}

/* Selected date — accent green with white ring (black ring
   disappears on dark, white reads cleanly) */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_dateview_container .top-date-select
.calendar .weeks-date .date.selected a.day-on.sb-available-date,
.date.selected a,
.date.selected a.day-on,
.date.selected a.sb-available-date,
.date.selected a.day-on.sb-available-date {
  background-color: #a8e6a3 !important;
  background: #a8e6a3 !important;
  color: #0f1424 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  box-shadow: 0 0 0 4px rgba(168,230,163,0.18) !important;
  font-weight: 700 !important;
}


/* ============================================================
   Participant counter
   ============================================================ */
.cap-slider {
  font-size: 0 !important;
  color: #ffffff !important;
}
.cap-slider::after {
  content: 'Wie viele Leute werden kommen?' !important;
  font-size: 16px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Slider track + handle in the same dark vocabulary */
.cap-slider .ui-slider,
.cap-slider .ui-slider-range {
  background: #232a45 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.cap-slider .ui-slider-handle {
  background: #a8e6a3 !important;
  border: 2px solid #0f1424 !important;
}


/* ============================================================
   Time-classes container & "Tour Buchen" CTA
   ============================================================ */
#sb_time_classes_plugin_container {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  background: transparent !important;
}

.provider-col.sb_time_classes_plugin_column {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  width: 100% !important;
  background: transparent !important;
}

.provider-item.has-popup {
  position: relative !important;
  height: auto !important;
  top: auto !important;
  width: fit-content !important;
  background: transparent !important;
}

/* CTA card — single elevation above the page */
.cell.sb-cell.free.full-info-trigger {
  background: #1a2035 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 24px 12px !important;
  cursor: pointer !important;
  width: fit-content !important;
  height: auto !important;
  position: static !important;
  margin: 0 auto !important;
  text-align: center !important;
  overflow: visible !important;
  transition: background 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s ease !important;
}

/* Line 1 — "Tour Buchen" */
.cell.sb-cell.free.full-info-trigger::before {
  content: 'Tour Buchen' !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

/* Line 2 — Tour name */
.cell.sb-cell.free.full-info-trigger .provider-name {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.72) !important;
  margin-bottom: 2px !important;
}

/* Line 3 — Duration */
.cell.sb-cell.free.full-info-trigger .provider-time {
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.50) !important;
}

.cell.sb-cell.free.full-info-trigger .provider-txt-data {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
}

/* Available-slots badge — top right, accent green */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_timeview_container .timeline-wrapper
#sb-time-classes-container.classes-plugin .inner
.provider-container .provider-col .provider-item .cell
.slot--available-slot {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: block !important;
  color: #0f1424 !important;
  background: #a8e6a3 !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.cell.sb-cell.free.full-info-trigger .slot--available-slot::before {
  content: 'Freie Plätze: ' !important;
}

/* Badge stays accent on hover (high specificity to win) */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_timeview_container .timeline-wrapper
#sb-time-classes-container.classes-plugin .inner
.provider-container .provider-col .provider-item .cell:hover
.slot--available-slot {
  background: #ffffff !important;
  color: #0f1424 !important;
}


/* ============================================================
   Booking-form steps (name, email, summary, etc.)
   These show after a slot is chosen — keep them on-brand.
   ============================================================ */
.sb-booking-form,
.sb-booking-form *:not(button):not(.btn):not(.sb-button) {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.sb-booking-form input[type="text"],
.sb-booking-form input[type="email"],
.sb-booking-form input[type="tel"],
.sb-booking-form input[type="number"],
.sb-booking-form textarea,
.sb-booking-form select {
  background: #1a2035 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

.sb-booking-form input::placeholder,
.sb-booking-form textarea::placeholder {
  color: rgba(255,255,255,0.40) !important;
}

.sb-booking-form input:focus,
.sb-booking-form textarea:focus,
.sb-booking-form select:focus {
  outline: none !important;
  border-color: #a8e6a3 !important;
  box-shadow: 0 0 0 3px rgba(168,230,163,0.20) !important;
}

.sb-booking-form label {
  color: rgba(255,255,255,0.72) !important;
}

/* Primary buttons (Continue / Confirm) */
.sb-booking-form .btn-primary,
.sb-booking-form button[type="submit"],
.sb-button-primary,
#sb_next_button,
#sb_book_button {
  background: #a8e6a3 !important;
  color: #0f1424 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.sb-booking-form .btn-primary:hover,
.sb-booking-form button[type="submit"]:hover,
.sb-button-primary:hover,
#sb_next_button:hover,
#sb_book_button:hover {
  background: #c2f0bd !important;
  transform: translateY(-1px) !important;
}

/* Secondary buttons (Back) */
.sb-booking-form .btn-secondary,
.sb-button-secondary,
#sb_prev_button {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
}
.sb-booking-form .btn-secondary:hover,
.sb-button-secondary:hover,
#sb_prev_button:hover {
  background: rgba(255,255,255,0.06) !important;
}


/* ============================================================
   Group-booking counter (How many people…)
   ------------------------------------------------------------
   DOM order is: [count] [plus] [minus]
   We use flex `order` to render: [minus] [count] [plus]
   and reset SimplyBook's icon backgrounds so our glyphs win.
   ============================================================ */
#sb_group_booking_container {
  background: transparent !important;
  color: #ffffff !important;
}

#sb_group_booking_container .cap-slider {
  font-size: 0 !important;
  text-align: center !important;
  color: #ffffff !important;
  background: transparent !important;
  display: block !important;
  margin-bottom: 10px !important;
}
#sb_group_booking_container .cap-slider::after {
  content: 'Wie viele Leute werden kommen?' !important;
  font-size: 16px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

#sb_group_booking_container .plugin-group-booking {
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 0 !important;
}

/* The pill — flex row, we re-order children below */
#sb_group_booking_container .active-count {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #1a2035 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}

/* hidden input — make sure it stays hidden no matter what */
#sb_group_booking_container .active-count > input.input,
#sb_group_booking_container .active-count > input[type="hidden"] {
  display: none !important;
}

/* Reorder: minus left, count middle, plus right */
#sb_group_booking_container .active-count .sb-group-counter-input-div { order: 2 !important; }
#sb_group_booking_container .active-count .sb_group_count.minus       { order: 1 !important; }
#sb_group_booking_container .active-count .sb_group_count.plus        { order: 3 !important; }

/* The number readout */
#sb_group_booking_container .sb-group-counter-input-div {
  min-width: 44px !important;
  height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border: none !important;
  position: static !important;
}

/* +/− buttons — wipe SimplyBook's bg icon, draw our own glyph */
#sb_group_booking_container .sb_group_count {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
  background-color: #232a45 !important;
  background-image: none !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

#sb_group_booking_container .sb_group_count:hover {
  background-color: #2d3a5a !important;
  border-color: #a8e6a3 !important;
}
#sb_group_booking_container .sb_group_count:active {
  transform: scale(0.96) !important;
}
#sb_group_booking_container .sb_group_count:focus-visible {
  outline: 2px solid #a8e6a3 !important;
  outline-offset: 2px !important;
}

/* Glyphs — drawn with pseudo-elements so we don't depend on
   SimplyBook's icon font / background-image */
#sb_group_booking_container .sb_group_count::before,
#sb_group_booking_container .sb_group_count::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  background: #ffffff !important;
  border-radius: 1px !important;
  transition: background .15s ease !important;
}

/* Horizontal bar — present on both buttons */
#sb_group_booking_container .sb_group_count::before {
  width: 12px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

/* Vertical bar — only on plus, hidden on minus */
#sb_group_booking_container .sb_group_count.plus::after {
  width: 2px !important;
  height: 12px !important;
  transform: translate(-50%, -50%) !important;
}
#sb_group_booking_container .sb_group_count.minus::after {
  display: none !important;
}

#sb_group_booking_container .sb_group_count:hover::before,
#sb_group_booking_container .sb_group_count:hover::after {
  background: #a8e6a3 !important;
}

/* Disabled state (when at min/max) */
#sb_group_booking_container .sb_group_count.disabled,
#sb_group_booking_container .sb_group_count[aria-disabled="true"] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
#sb_group_booking_container .sb_group_count.disabled:hover {
  background-color: #232a45 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
#sb_group_booking_container .sb_group_count.disabled:hover::before,
#sb_group_booking_container .sb_group_count.disabled:hover::after {
  background: #ffffff !important;
}


/* ============================================================
   Misc — popups, scrollbars, dividers
   ============================================================ */
.popup,
.popup-content,
.tooltip,
.sb-popup {
  background: #1a2035 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

hr,
.divider {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Webkit scrollbar */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #0f1424;
}
*::-webkit-scrollbar-thumb {
  background: #232a45;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #2d3a5a;
}

/* ============================================================
ONLY the text color on the details confirmation page change.   ============================================================ */
#sb_back_button a,
#details .title-main,
#details .control-label,
#details label,
#details .cap,
#details .booking-info .label,
#details .booking-info .info,
#details .date-line--caption,
#details .booking-info__details,
#details .booking-info__details-name,
#details .booking-info__details-count-price,
#details .booking-info__details-time,
#details .accordion .title,
#details .full-info-price--caption,
#details .full-info-price--value,
#details .iti__selected-country,
#details .iti__country-name,
#details .iti__dial-code,
#sb_terms_and_conditions,
#sb_terms_and_conditions label,
#sb_terms_and_conditions a,
#sb_terms_and_conditions .required {
  color: #1a2035 !important;
}

/* Text entered by the customer and field labels */
#details .form-control {
  color: #1a2035 !important;
}
#details .form-control::placeholder {
  color: #5a6075 !important;
}

/* ============================================================
   ONLY the text color on the Service Provider cards.  
============================================================ */
#sb_provider_step_container .provider-item .name,
#sb_provider_step_container .provider-item .read-more {
  color: #1a2035 !important;
}

/* “Read more” pop-up (guide's name + description). */
#sb_provider_step_container .full-info .cap.name,
#sb_provider_step_container .full-info .txt,
#sb_provider_step_container .full-info .txt * {
  color: #1a2035 !important;
}

/* The text “How many people will come?” in booking modal is dark */
#sb_group_booking_container .cap-slider,
#sb_group_booking_container .cap-slider::after {
  color: #ffffff !important;
}

/* ============================================================
   +/– buttons: clear symbol, maximum icon suppression
============================================================ */

/* Base: completely hide the background (none + color), hide the content */
#sb_group_booking_container .active-count .plus.sb_group_count,
#sb_group_booking_container .active-count .minus.sb_group_count {
  background: #232a45 !important;
  background-image: none !important;
  background-color: #232a45 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
  position: relative !important;
  text-indent: -9999px !important;   /* Extend any text or icon beyond the edge */
}

/* Hide all actual child nodes */
#sb_group_booking_container .active-count .plus.sb_group_count > *,
#sb_group_booking_container .active-count .minus.sb_group_count > * {
  display: none !important;
}

/* Both of the button's pseudo-elements are solid fills over any icon */
#sb_group_booking_container .active-count .plus.sb_group_count::before,
#sb_group_booking_container .active-count .plus.sb_group_count::after,
#sb_group_booking_container .active-count .minus.sb_group_count::before,
#sb_group_booking_container .active-count .minus.sb_group_count::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #232a45 !important;
  background-image: none !important;
  border: none !important;
  border-radius: inherit !important;
  transform: none !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  z-index: 1 !important;
}
#sb_group_booking_container .active-count .sb_group_count:hover::before,
#sb_group_booking_container .active-count .sb_group_count:hover::after {
  background: #2d3a5a !important;
}

/* The symbol is displayed as a separate top layer using the ::after pseudo-element, on top of the fill */
#sb_group_booking_container .active-count .minus.sb_group_count::after {
  content: "−" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-indent: 0 !important;
  z-index: 3 !important;
}
#sb_group_booking_container .active-count .plus.sb_group_count::after {
  content: "+" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-indent: 0 !important;
  z-index: 3 !important;
}
#sb_group_booking_container .active-count .sb_group_count:hover::after {
  color: #a8e6a3 !important;
}

/* Hide the date selector (calendar) in the booking widget */
#sb_dateview_container {
  display: none !important;
}

/* Remove the Prev/Next date arrows from the timeline header */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step .header a {
  display: none !important;
}

/* Remove the vertical scrollbar from the time/rounds container */
#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_timeview_container .timeline-wrapper
#sb-time-classes-container {
  overflow-y: visible !important;
  overflow: visible !important;
  max-height: none !important;
}

/* Vertical alignment of widget content */
#sb_content {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* The text color of the “Confirm booking” button is white */
#sb_book_btn,
#sb_book_btn span {
  color: #ffffff !important;
}

/* ============================================================
   Multiple rounds in a single day — a vertical list of cards
   with indentation instead of a timeline   ============================================================ */
#sb-time-classes-container .provider-container .provider-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;           
  height: auto !important;
}

#sb-time-classes-container .provider-container .provider-col .provider-item {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  width: 100% !important;
}

#sb-time-classes-container .inner {
  align-items: flex-start !important;
}


#sb-time-classes-container .provider-item .cell.full-info-trigger {
  position: relative !important;
}

#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_timeview_container .timeline-wrapper
#sb-time-classes-container.classes-plugin .inner
.provider-container .provider-col .provider-item .cell
.slot--available-slot {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
}

#sb_group_booking_container > div {
  background: transparent !important;
}

#sb_group_booking_container.classes-plugin-group,
#sb_group_booking_container .plugin-group-booking {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


#sb-timeline #steps #steps-content #sb_booking_content
.datetime-step #sb_timeview_container .timeline-wrapper
#sb-time-classes-container.classes-plugin .inner
.provider-container .provider-col .provider-item .full-info
.bar-service .time span {
  color: #1a2035 !important;
}

#collapseInvoice_details {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

.classes-plugin-group > div {
  border: none !important;
border-radius: none;
  }

/* List of tours — restore visible white text
   (override the text-fill: transparent + background-clip effect) */
.service-item .pricing-hero-list,
.service-item .pricing-hero-list * ,
.service-item .price-list-item,
.service-item .price-list-description {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* ===== Confirmation step: inputs #05040d, white text ===== */

/* All the text in the window is white */
#details,
#details * {
  color: #ffffff !important;
}

/* Input fields (name, email, phone number, promo code, etc.)  */
#details .form-control,
#details input[type="text"],
#details input[type="email"],
#details input[type="tel"],
#details input[type="number"],
#details input[type="password"],
#details textarea,
#details select,
#details .iti__tel-input {
  background: #05040d !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Placeholders are off-white so they're visible on a dark background */
#details ::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

/* The drop-down list of countries (country code) is also grayed out */
#details .iti__dropdown-content,
#details .iti__country-list,
#details .iti__country {
  background: #05040d !important;
  color: #ffffff !important;
}
#details .iti__country.iti__highlight,
#details .iti__country:hover {
  background: #232a45 !important;
}
#details .iti__dial-code {
  color: rgba(255,255,255,0.6) !important;
}

/* ===== Right confirmation block: background #05040d, all text white ===== */
.right-side,
.right-side *,
.confirm-details,
.confirm-details * {
  background-color: #05040d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* The heading “Please, confirm details” is white */
#details .title-main {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Placeholders in input fields are off-white */
#details ::placeholder,
#details .form-control::placeholder,
#details input::placeholder,
#details textarea::placeholder {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* The border around the “Confirm booking” button is white */
#sb_book_btn {
  border-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* The “Select” button in the pop-up matches the site's style (Book a Tour) */
.service-item a.btn-classes,
.service-item a.btn.popup-hide.btn-classes {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;
  color: #626262 !important;
  border: 1px solid #ffffff !important;
  border-radius: 50px !important;

  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Gray text (overrides the widget's default white text) */
.service-item a.btn-classes,
.service-item a.btn-classes * {
  -webkit-text-fill-color: #626262 !important;
  color: #626262 !important;
}

/* “Back to top” button — transparent background instead of blue */
#sb_scroll_top_btn {
  background: transparent !important;
}