/**
 * Alov Travel — WP Travel Engine Fidelity Adapter
 * --------------------------------------------------------------------------
 * Target: WP Travel Engine 6.8.x (audited against 6.8.5)
 *
 * Design rule: preserve WP Travel Engine's native layout/component UX and brand
 * it primarily through Alov color tokens. Most conversion/navigation CTA buttons
 * use the documented Alov geometry exception, while the booking-process Prev/Next
 * controls deliberately keep WPTE's native geometry and receive color branding only.
 * Destructive, icon, toggle and dropdown controls remain plugin-native.
 *
 * Do NOT add card redesigns, field geometry, container replacements, custom
 * shadows, hover transforms or responsive layout replacements here.
 */

/* --------------------------------------------------------------------------
   1. Brand token bridge — color first, layout geometry untouched
   -------------------------------------------------------------------------- */

/* WPTE-first variables are safe to expose on the body while the plugin is active. */
body.alov-wpte-ui {
  --wpte-primary-color: var(--color-primary);
  --wpte-primary-color-rgb: var(--rgb-primary);
  --wpte-featured-color: var(--color-primary);
  --wpte-discount-color: var(--color-primary-strong);
  --wpte-icon-color: var(--color-primary);
}

/*
 * A few WPTE 6.8.5 rules still reference the legacy generic variables directly.
 * Scope those variables to actual WPTE surfaces so they do not leak into the
 * rest of the theme or another plugin that happens to use the same variable name.
 */
body.alov-wpte-ui :where(
  #wp-travel-trip-wrapper,
  .wp-travel-engine-archive-outer-wrap,
  .trip-content-area,
  .single-trip,
  .wpte-container,
  .wpte-tabs-container,
  .wpte-booking-area-wrapper,
  .wpte-bf-outer,
  .wpte-modal,
  .wptravelengine-trip-booking-modal,
  .advanced-search-wrapper,
  .wpte-trip-sfilter-wrapper,
  .wpte-checkout,
  .wpte-checkout__main,
  .wpte-thankyou__page-layout,
  .thank-you-container,
  .wpte-lrf,
  [class^="wp-block-wptravelengine"],
  [class*=" wp-block-wptravelengine"]
) {
  --primary-color: var(--color-primary);
  --primary-color-rgb: var(--rgb-primary);
  --hover-color: var(--color-primary-strong);
  --font-family: var(--font-family-base);
  --primary-font: var(--font-family-base);
  --secondary-font: var(--font-family-base);
}

/* Keep the Alov typeface, but preserve WPTE's own sizes, weights and line-height. */
body.alov-wpte-ui :where(
  #wp-travel-trip-wrapper,
  .trip-content-area,
  .wpte-bf-outer,
  .wpte-modal,
  .wpte-checkout,
  .wpte-checkout__main,
  .wpte-thankyou__page-layout,
  .thank-you-container,
  .wpte-lrf,
  [class^="wp-block-wptravelengine"],
  [class*=" wp-block-wptravelengine"]
) {
  font-family: var(--font-family-base);
}

/* --------------------------------------------------------------------------
   1.1 First-party trip search CTA collision guard
   -------------------------------------------------------------------------- */

/*
 * The homepage search panel is an Alov component, not a WPTE component. WPTE
 * public CSS loads between the theme base and this adapter, so explicitly
 * re-assert the Alov CTA here to prevent plugin-wide button rules from changing
 * its brand treatment.
 */
body.alov-wpte-ui .trip-search-panel button.alov-button {
  height: var(--button-height-lg) !important;
  min-height: var(--button-height-lg) !important;
  padding-inline: var(--button-padding-x) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-button) !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--font-weight-strong) !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.alov-wpte-ui .trip-search-panel button.alov-button:hover {
  border-color: var(--color-primary-strong) !important;
  background: var(--color-primary-strong) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px);
}

body.alov-wpte-ui .trip-search-panel button.alov-button:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   1.2 First-party Plan My Trip collision guard
   -------------------------------------------------------------------------- */

/*
 * WP Travel Engine public styles are loaded after the theme base and can contain
 * broad native-control/button selectors. The Plan My Trip form belongs to Alov,
 * not WPTE, so re-assert the canonical first-party geometry here at the adapter
 * boundary. Keep these values mapped to UI-system tokens.
 */
body.alov-wpte-ui .plan-request-form .alov-form-control {
  display: block !important;
  width: 100% !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  margin: 0 !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-control) !important;
  background-color: var(--color-white) !important;
  background-clip: padding-box !important;
  color: var(--color-text) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-body) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: 1.2 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.alov-wpte-ui .plan-request-form select.alov-form-control {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23637381' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m5.5 7.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
}

body.alov-wpte-ui .plan-request-form .alov-form-control--textarea {
  height: auto !important;
  min-height: 120px !important;
  line-height: var(--line-height-body) !important;
  resize: vertical !important;
}

body.alov-wpte-ui .plan-request-form .alov-form-control:hover:not(:disabled) {
  border-color: var(--color-border-strong) !important;
}

body.alov-wpte-ui .plan-request-form .alov-form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

body.alov-wpte-ui .plan-request-form button.alov-button.plan-request-form__submit {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: var(--button-height) !important;
  margin-top: var(--space-7) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-button) !important;
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--font-weight-strong) !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.alov-wpte-ui .plan-request-form button.alov-button.plan-request-form__submit:hover,
body.alov-wpte-ui .plan-request-form button.alov-button.plan-request-form__submit:focus-visible {
  border-color: var(--color-primary-strong) !important;
  background: var(--color-primary-strong) !important;
  color: var(--color-white) !important;
}

@media (max-width: 780px) {
  body.alov-wpte-ui .plan-request-form button.alov-button.plan-request-form__submit {
    margin-top: var(--space-6) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Inline/default-blue normalization
   -------------------------------------------------------------------------- */

/*
 * WPTE block templates can serialize #147DFE into inline styles. Most conversion
 * actions across listing, checkout and account surfaces share one Alov button
 * language. Booking-process Prev/Next controls are explicitly excluded so the
 * modal preserves WPTE's native navigation design.
 */
body.alov-wpte-ui :is(
  .wpte-bf-btn,
  .wte-book-now,
  .wp-block-wptravelenginetripblocks-trip-booking-button,
  .wpte-trip__search-submit,
  .category-trip-viewmre-btn,
  .wpte-trip-explore-btn,
  .load-more-search,
  .enquiry-submit,
  .wpte-lrf-btn,
  .wpte-lrf-btn-transparent,
  .wpte-checkout__form-submit-button,
  .wp-travel-engine-coupons-apply-btn,
  .wte-check-button,
  .wte-view-all-trips-btn,
  .wte-fsd-list-booknow-btn,
  .wpte-load-more-btn,
  .wpte-load-less-btn,
  .wpte-button.wpte-solid:not(.wpte-delete-button):not(.wpte-user-delete):not(.wpte-traveller-delete),
  .wpte-button.wpte-outlined,
  .wpte-button.wpte-button-primary,
  .wpte-button.enquiry-submit
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--radius-button) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-strong) !important;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Primary conversion actions. */
body.alov-wpte-ui :is(
  .wpte-bf-btn,
  .wte-book-now,
  .wp-block-wptravelenginetripblocks-trip-booking-button,
  .wpte-trip__search-submit,
  .category-trip-viewmre-btn,
  .wpte-trip-explore-btn,
  .enquiry-submit,
  .wpte-lrf-btn:not(.wpte-lrf-btn-transparent),
  .wpte-checkout__form-submit-button,
  .wp-travel-engine-coupons-apply-btn,
  .wte-check-button,
  .wte-view-all-trips-btn,
  .wte-fsd-list-booknow-btn,
  .wpte-button.wpte-solid:not(.wpte-delete-button):not(.wpte-user-delete):not(.wpte-traveller-delete),
  .wpte-button.wpte-button-primary,
  .wpte-button.enquiry-submit
) {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

body.alov-wpte-ui :is(
  .wpte-bf-btn,
  .wte-book-now,
  .wp-block-wptravelenginetripblocks-trip-booking-button,
  .wpte-trip__search-submit,
  .category-trip-viewmre-btn,
  .wpte-trip-explore-btn,
  .enquiry-submit,
  .wpte-lrf-btn:not(.wpte-lrf-btn-transparent),
  .wpte-checkout__form-submit-button,
  .wp-travel-engine-coupons-apply-btn,
  .wte-check-button,
  .wte-view-all-trips-btn,
  .wte-fsd-list-booknow-btn,
  .wpte-button.wpte-solid:not(.wpte-delete-button):not(.wpte-user-delete):not(.wpte-traveller-delete),
  .wpte-button.wpte-button-primary,
  .wpte-button.enquiry-submit
):hover {
  border-color: var(--color-primary-strong) !important;
  background-color: var(--color-primary-strong) !important;
  color: var(--color-white) !important;
}

/* Secondary/navigation actions share the same shape but remain outline. */
body.alov-wpte-ui :is(
  .wpte-button.wpte-outlined,
  .load-more-search,
  .wpte-lrf-btn-transparent,
  .wpte-load-more-btn,
  .wpte-load-less-btn
) {
  border-color: var(--color-heading) !important;
  background-color: transparent !important;
  color: var(--color-heading) !important;
}

body.alov-wpte-ui :is(
  .wpte-button.wpte-outlined,
  .load-more-search,
  .wpte-lrf-btn-transparent,
  .wpte-load-more-btn,
  .wpte-load-less-btn
):hover {
  border-color: var(--color-heading) !important;
  background-color: var(--color-heading) !important;
  color: var(--color-white) !important;
}

body.alov-wpte-ui :is(
  .wpte-bf-btn,
  .wte-book-now,
  .wp-block-wptravelenginetripblocks-trip-booking-button,
  .wpte-trip__search-submit,
  .category-trip-viewmre-btn,
  .wpte-trip-explore-btn,
  .load-more-search,
  .enquiry-submit,
  .wpte-lrf-btn,
  .wpte-checkout__form-submit-button,
  .wp-travel-engine-coupons-apply-btn,
  .wte-check-button,
  .wte-view-all-trips-btn,
  .wte-fsd-list-booknow-btn,
  .wpte-load-more-btn,
  .wpte-load-less-btn,
  .wpte-button.wpte-solid:not(.wpte-delete-button):not(.wpte-user-delete):not(.wpte-traveller-delete),
  .wpte-button.wpte-outlined,
  .wpte-button.wpte-button-primary,
  .wpte-button.enquiry-submit
):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Active wishlist/map controls: keep WPTE sizing and placement, replace blue. */
body.alov-wpte-ui :is(
  .wishlist-toggle.active,
  .toggle-map.active
) {
  background-color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   3. Proven base-theme collision fixes
   -------------------------------------------------------------------------- */

/*
 * The Alov UI system protects checkbox/radio controls from generic 50px input
 * rules. WPTE has its own excellent 20px choice-control visuals; do not redraw
 * them here. Only lock out the invalid min-height/padding inheritance.
 */
body.alov-wpte-ui :where(
  #wp-travel-trip-wrapper,
  .trip-content-area,
  .wpte-bf-outer,
  .wpte-modal,
  .wpte-checkout,
  .wpte-checkout__main,
  .wpte-lrf,
  .wpte-thankyou__page-layout,
  .thank-you-container,
  .advanced-search-wrapper,
  .wpte-trip-sfilter-wrapper,
  [class^="wp-block-wptravelengine"],
  [class*=" wp-block-wptravelengine"]
) :is(input[type="checkbox"], input[type="radio"]) {
  min-height: 0 !important;
  padding: 0 !important;
}

/*
 * Alov's first-party field-label rule targets direct label > span children.
 * WPTE frequently uses spans inside interactive labels for ordinary copy.
 * Restore inheritance so those labels do not unexpectedly become uppercase.
 */
body.alov-wpte-ui :where(
  #wp-travel-trip-wrapper,
  .trip-content-area,
  .wpte-bf-outer,
  .wpte-modal,
  .wpte-checkout,
  .wpte-checkout__main,
  .wpte-lrf,
  .advanced-search-wrapper,
  .wpte-trip-sfilter-wrapper,
  [class^="wp-block-wptravelengine"],
  [class*=" wp-block-wptravelengine"]
) label > span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* WPTE's FAQ "Expand all" control is a switch, not a normal checkbox. */
body.alov-wpte-ui .wpte-faq-button-toggle input[type="checkbox"],
body.alov-wpte-ui .wpte-faq-expand-all input[type="checkbox"] {
  min-height: 0 !important;
  max-width: none;
  max-height: none;
  padding: 0 !important;
  background-image: none !important;
}

/* Native WPTE form focus keeps its geometry; only the accent color is branded. */
body.alov-wpte-ui :where(
  .wpte-bf-outer,
  .wpte-modal,
  .wpte-checkout,
  .wpte-checkout__main,
  .wpte-lrf,
  .advanced-search-wrapper,
  .wpte-trip-sfilter-wrapper
) :is(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea
):focus {
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   4. WPTE states that do not consistently inherit the primary variable
   -------------------------------------------------------------------------- */

body.alov-wpte-ui :is(
  .nav-tab-wrapper .nav-tab.nav-tab-active,
  .nav-tab-wrapper .nav-tab:hover,
  .wpte-details-toggler-button:hover,
  .clear-search-criteria,
  .wte-terms-show-btns button,
  .wpte-checkout__box-toggle-button,
  .wpte-lrf-bottom a
) {
  color: var(--color-primary);
}

body.alov-wpte-ui .nav-tab-wrapper .nav-tab.nav-tab-active {
  border-bottom-color: var(--color-primary) !important;
}

body.alov-wpte-ui :is(
  .flatpickr-day.today,
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange
) {
  border-color: var(--color-primary);
}

body.alov-wpte-ui :is(
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange
) {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* The new FAQ system uses the primary variable in most states; ensure open state follows brand. */
body.alov-wpte-ui .wpte-faq-question[aria-expanded="true"] :is(.wpte-faq-question-text, .wpte-faq-icon) {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   4.1 Booking modal process controls — WPTE geometry, Alov colors
   -------------------------------------------------------------------------- */

/*
 * Preserve WP Travel Engine 6.8.5 exactly here:
 * - Prev stays the compact text/link control with no shell.
 * - Next stays the large 100px pill with WPTE padding/elevation.
 * Only brand colors are changed. Do not add height, padding, radius, shadow,
 * font-size or layout rules to these selectors.
 */
body.alov-wpte-ui .wte-process-tab-controller .wte-process-btn-prev {
  color: var(--color-primary) !important;
}

body.alov-wpte-ui .wte-process-tab-controller .wte-process-btn-prev:hover {
  color: var(--color-primary-strong) !important;
}

body.alov-wpte-ui .wte-process-tab-controller .wte-process-btn-next {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

body.alov-wpte-ui .wte-process-tab-controller .wte-process-btn-next:hover:not(:disabled) {
  background-color: var(--color-primary-strong) !important;
  color: var(--color-white) !important;
}

/* --------------------------------------------------------------------------
   5. Accessibility — color-only reinforcement
   -------------------------------------------------------------------------- */

body.alov-wpte-ui :is(
  .wpte-button,
  .wpte-bf-btn,
  .wte-book-now,
  .wpte-details-toggler-button,
  .wpte-faq-question,
  .wpte-modal__close-button,
  .wishlist-toggle,
  .toggle-map
):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  body.alov-wpte-ui :is(
    .wpte-button,
    .wpte-bf-btn,
    .wte-book-now,
    .wpte-faq-question,
    .wishlist-toggle,
    .toggle-map
  ):focus-visible {
    outline-color: Highlight;
  }
}

/* WPTE 6.8.5 search-template SVGs ship with #2183DF inline fills. */
body.alov-wpte-ui .wpte-trip__adv-field .icon {
  color: var(--color-primary);
}

body.alov-wpte-ui .wpte-trip__adv-field .icon svg :is(path, circle, rect, polygon) {
  fill: currentColor !important;
}

/* Legacy related-trip meta uses a hard-coded primary blue instead of a variable. */
body.alov-wpte-ui .trip-content .related-posts .post .entry-meta span {
  background-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   6. Template breathing room + desktop sticky booking offset
   -------------------------------------------------------------------------- */

/*
 * Intentional layout exception requested by the theme integration:
 * keep WPTE's native horizontal container geometry, but give complete trip
 * single and listing/archive screens a consistent page-level vertical gutter.
 * `padding-block` leaves WPTE's own left/right padding untouched.
 */
body.alov-single-trip #wp-travel-trip-wrapper.trip-content-area,
body.alov-trip-listing #wp-travel-trip-wrapper.trip-content-area {
  padding-block: 50px;
}

/* A full 50px feels oversized on narrow screens; retain breathing room without
 * pushing the first useful trip content too far below the mobile header. */
@media (max-width: 767px) {
  body.alov-single-trip #wp-travel-trip-wrapper.trip-content-area,
  body.alov-trip-listing #wp-travel-trip-wrapper.trip-content-area {
    padding-block: 32px;
  }
}

/*
 * WPTE 6.8.5 defaults the sticky booking widget to 50px. The Alov desktop
 * header needs a larger clearance. Keep WPTE's sticky mechanics/geometry and
 * change only the offset.
 */
@media (min-width: 1025px) {
  body.alov-single-trip.wpte_has-sticky-booking-widget .wpte-booking-area-wrapper.is-sticky {
    top: 90px;
  }

  /* WordPress' desktop admin bar occupies 32px above the site header. */
  body.admin-bar.alov-single-trip.wpte_has-sticky-booking-widget .wpte-booking-area-wrapper.is-sticky {
    top: 122px;
  }
}