/*
 * Vehicle picker ("اختر سيارتك") and selection confirmation ("السيارة التي اخترتها")
 * inside the transport / tour booking card. Loaded after program-detail-refinements.css.
 */

/* ---------- Step: choose a car ---------- */
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner {
  display: grid !important;
  gap: 14px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-heading {
  display: grid !important;
  gap: 12px !important;
  padding: 20px 18px !important;
  border: 1px solid #f4d9e6 !important;
  border-radius: 20px !important;
  background: #fff5fa !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-heading[hidden] {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-heading h2 {
  margin: 0 !important;
  color: #2a0f3d !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-heading p:not(.transport-vehicle-guidance) {
  margin: 6px 0 0 !important;
  color: #6d5a73 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-heading-meta {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #efd9e5 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-count {
  color: #6d5a73 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-counts,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-counts {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 8px !important;
  border: 1px solid #e8dfe5 !important;
  border-radius: 14px !important;
  background: #f3eef2 !important;
  color: #5b4565 !important;
  font-size: 16px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-counts > span {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #5b4565 !important;
  font-size: 16px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-counts > span + span {
  border-inline-start: 1px solid #d9ccd5 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-counts b,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-counts b {
  color: #2a0f3d !important;
  font-weight: 700 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-detail-vehicle-counts svg,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner button.program-detail-vehicle-back svg,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-actions svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner button.program-detail-vehicle-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 8px 14px !important;
  border: 1.5px solid #7d0b54 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #7d0b54 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner button.program-detail-vehicle-back:hover {
  background: #fff0f7 !important;
  color: #7d0b54 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-guidance {
  margin: 0 !important;
  color: #5b4565 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-guidance[hidden] {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-guidance strong {
  color: #7d0b54 !important;
  font-weight: 800 !important;
}

/* Vehicle cards */
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  grid-column: auto !important;
  min-height: 0 !important;
  padding: 10px 10px 12px !important;
  border: 1px solid #ecdde6 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card[hidden] {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card.recommended,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card.selected {
  border: 2px solid #7d0b54 !important;
  box-shadow: 0 8px 20px rgba(125, 11, 84, .14) !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-image,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-image-placeholder {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #f4eff3 !important;
  object-fit: contain !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-recommendation {
  position: absolute !important;
  z-index: 2 !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 1px solid #f3d3e3 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #7d0b54 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow: 0 3px 10px rgba(49, 16, 71, .15) !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-recommendation[hidden] {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-copy {
  width: 100% !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-copy h3 {
  margin: 0 0 4px !important;
  color: #2a0f3d !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-copy small {
  display: block !important;
  color: #6d5a73 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-capacity {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 0 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-capacity span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border: 1px solid #f1d8e6 !important;
  border-radius: 999px !important;
  background: #fff5fa !important;
  color: #7d0b54 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-price {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #f0e3ea !important;
  color: #6d5a73 !important;
  font-size: 14px !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card .transport-vehicle-price b {
  color: #5a0f45 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .transport-vehicle-grid > .transport-vehicle-card button.transport-select-car-button {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: auto !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #a80c64, #7d0b54) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

/* ---------- Step: confirm the chosen car ---------- */
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-selected-vehicle {
  display: grid !important;
  gap: 14px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner .program-selected-vehicle[hidden] {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-panel {
  display: grid !important;
  gap: 16px !important;
  padding: 20px 16px !important;
  border: 1px solid #f4d9e6 !important;
  border-radius: 20px !important;
  background: #fff5fa !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-heading h2 {
  margin: 0 !important;
  color: #2a0f3d !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame {
  padding: 14px !important;
  border: 1px solid #f1dfe9 !important;
  border-radius: 16px !important;
  background: #fff !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-image,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-image-placeholder {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  padding: 6px !important;
  border-radius: 14px !important;
  background: #eef0f6 !important;
  object-fit: contain !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-recommendation {
  position: absolute !important;
  z-index: 2 !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 18px !important;
  border: 1px solid #f7c7de !important;
  border-radius: 999px !important;
  background: #ffe9f3 !important;
  color: #a80c64 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-copy {
  width: 100% !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-copy h3 {
  margin: 0 !important;
  color: #2a0f3d !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-copy small {
  display: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-capacity {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-capacity span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border: 1px solid #f1d8e6 !important;
  border-radius: 999px !important;
  background: #fff5fa !important;
  color: #7d0b54 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-price {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 4px !important;
  border-top: 1px solid #f0e3ea !important;
  text-align: center !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame .transport-vehicle-price b {
  color: #5a0f45 !important;
  font-size: 34px !important;
  font-weight: 800 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame button.transport-select-car-button,
html body #page-wrapper #tour-detail.transport-detail-page .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-frame button.transport-select-car-button {
  position: absolute !important;
  z-index: 2 !important;
  top: 14px !important;
  left: 14px !important;
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  border: 1px solid #b9e2c7 !important;
  border-radius: 999px !important;
  background: #e7f6ec !important;
  color: #1f7a43 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: default !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-counts {
  gap: 0 !important;
  border-color: #f3dbe8 !important;
  background: #fdf3f8 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-counts > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #6d5a73 !important;
  font-size: 16px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-counts > span + span {
  margin-inline-start: 14px !important;
  padding-inline-start: 14px !important;
  border-inline-start: 1px solid #e5cfdb !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #7d0b54 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #2a0f3d !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-actions button svg {
  color: #7d0b54 !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle button.program-selected-vehicle-continue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 60px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #a80c64, #7d0b54) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(125, 11, 84, .22) !important;
}

html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle button.program-selected-vehicle-continue [data-selected-vehicle-total] {
  display: none !important;
}

/* The page-wide span rule would shrink the button labels, so they follow the button size instead. */
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-detail-vehicle-picker-inner button.program-detail-vehicle-back span,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle .program-selected-vehicle-actions button span,
html body #page-wrapper #tour-detail .booking-card .program-detail-vehicle-picker .program-selected-vehicle button.program-selected-vehicle-continue span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* The booking card grows when the car picker opens; the left column must keep its natural spacing instead of spreading its sections over the extra height. */
#tour-detail.transport-detail-page .transport-gallery-column,
#tour-detail .tour-gallery-column {
  align-content: start !important;
}

/* Tight spacing between "مميزات الخدمة" and "تفاصيل الخدمة". */
#tour-detail.transport-detail-page .transport-gallery-column .program-features-section {
  padding-bottom: 0 !important;
}

#tour-detail.transport-detail-page .transport-gallery-column .transport-detail-content {
  margin-top: 28px !important;
}

/* FAQ block once it moves into the left column beside the open car picker. */
@media (min-width: 1181px) {
  #tour-detail .transport-gallery-column > .transport-faq-section,
  #tour-detail .tour-gallery-column > .transport-faq-section {
    margin-top: 32px !important;
    padding-inline: 0 !important;
  }

  #tour-detail .transport-gallery-column > .transport-faq-section .transport-faq-grid,
  #tour-detail .tour-gallery-column > .transport-faq-section .transport-faq-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}