/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: A child theme of Hello Elementor
Author: Hannes van As
Author URI: https://yourwebsite.com
Template: hello-elementor
Version: 1.0
*/

/* ================================
   Vehicle Filters (scoped)
   Add class "vehicle-filters-form" on the Form widget
   ================================ */

/* Flex the *fields wrapper* (Elementor wraps the form controls here) */
.vehicle-filters-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: nowrap;       /* keep everything on one row on desktop */
  align-items: stretch;    /* make all items same height */
  gap: 10px;
}

/* Each field group (Type/Make/Model/Variant/Price) shares the row */
.vehicle-filters-form .elementor-field-group {
  flex: 1 1 0;
  min-width: 140px;        /* prevents squish on smaller desktops */
  margin: 0;               /* kill default margins that cause wrapping */
}

/* Submit group: fixed width, sticks to the right */
.vehicle-filters-form .elementor-field-group.elementor-field-type-submit {
  flex: 0 0 60px;          /* fixed button width */
  display: flex;           /* ensure its inner wrapper fills height */
  align-items: stretch;
  margin: 0;
}

/* Elementor sometimes nests wrappers; make them fill */
.vehicle-filters-form .elementor-field-type-submit .elementor-button-wrapper,
.vehicle-filters-form .elementor-field-type-submit .e-form__buttons {
  width: 100%;
  display: flex;
}

/* The actual button */
.vehicle-filters-form .elementor-field-type-submit .elementor-button {
  width: 100%;
  height: 48px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Select2 sizing – keep full width inside flex */
.vehicle-filters-form .select2,
.vehicle-filters-form .select2-container {
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Visible Select2 box */
.vehicle-filters-form .select2-container .select2-selection--single {
  height: 48px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Selection text + arrow */
.vehicle-filters-form .select2-selection__rendered {
  line-height: 48px !important;
  padding: 0 36px 0 12px !important; /* leave room for arrow */
  font-size: 15px;
  color: #333;
}
.vehicle-filters-form .select2-selection__arrow {
  height: 48px !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Dropdown panel */
.vehicle-filters-form .select2-dropdown {
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  font-size: 16px !important;
}
.vehicle-filters-form .select2-results__option { padding: 10px 12px !important; }
.vehicle-filters-form .select2-results__option--highlighted {
  background-color: #2b6cb0 !important;
  color: #fff !important;
}

/* Arrow ↔ clear toggle */
.vehicle-filters-form .select2-container .select2-selection__arrow { display: block !important; }
.vehicle-filters-form .select2-container .select2-selection__clear { display: none !important; }
.vehicle-filters-form .select2-container.has-selection .select2-selection__arrow { display: none !important; }
.vehicle-filters-form .select2-container.has-selection .select2-selection__clear { display: block !important; }

/* Mobile: stack neatly */
@media (max-width: 767px) {
  .vehicle-filters-form .elementor-form-fields-wrapper {
    flex-wrap: wrap;
  }
  .vehicle-filters-form .elementor-field-group {
    flex: 1 1 100%;
  }
  .vehicle-filters-form .elementor-field-group.elementor-field-type-submit {
    flex: 1 1 100%;
  }
  .vehicle-filters-form .elementor-field-type-submit .elementor-button {
    width: 100%;
  }
}



/* ==========================================================================
   AVF v3.1.3 — Showroom filter final layout tweaks + Back-to-top car CSS
   --------------------------------------------------------------------------
   • Keep 5 cols on desktop, 4 ≥900px, 3 ≥768px, 2 mobile
   • Add a bit more breathing room
   • Make Sort by the same width as other controls and pin it to the right
   • Ensure back-to-top car is fixed on the right and flips when scrolling
   ========================================================================== */

/* ----- GRID & SPACING (archive form) ----- */
#showroom_filter_form .elementor-form-fields-wrapper{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile base */
  gap: 16px 18px;
  align-items: center;
  margin: 0 !important;
}
@media (min-width: 768px){
  #showroom_filter_form .elementor-form-fields-wrapper{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px){
  #showroom_filter_form .elementor-form-fields-wrapper{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1100px){
  #showroom_filter_form .elementor-form-fields-wrapper{
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* desktop: 5 columns */
  }
}

#showroom_filter_form .elementor-field-group{
  min-width: 0;                   /* important for Safari */
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Inputs fill their cell */
#showroom_filter_form .elementor-field,
#showroom_filter_form .elementor-select-wrapper,
#showroom_filter_form select,
#showroom_filter_form input,
#showroom_filter_form .elementor-button{
  width: 100%;
  box-sizing: border-box;
}

/* Clear Selection stays at the right of its cell */
#showroom_filter_form .elementor-field-type-submit{ justify-self: end; }

/* ----- SORT BY: same width as others & pinned to far right column ----- */
#showroom_filter_form .elementor-field-group:has([name="form_fields[avf_sort_dropdown]"]){
  grid-column: -2 / -1;           /* last column of the grid */
  justify-self: stretch;
  width: auto;
}
/* For browsers without :has() support, allow manual class via JS if present */
#showroom_filter_form .elementor-field-group.avf-sort-by{
  grid-column: -2 / -1;
  justify-self: stretch;
  width: auto;
}
/* Ensure select & its popup can match full width */
#showroom_filter_form .elementor-field-group:has([name="form_fields[avf_sort_dropdown]"]) select{
  min-width: 100%;
}
/* Select2 (if active anywhere) — force full width container */
#showroom_filter_form .select2-container{ width: 100% !important; }

/* Older Safari robustness */
@supports (-webkit-touch-callout: none){
  #showroom_filter_form .elementor-form-fields-wrapper{ grid-auto-rows: minmax(0, auto); }
  #showroom_filter_form .elementor-field-group{ min-width: 0; }
}

/* ----- Back-to-top car positioning/animations ----- */
#back-to-top-car{
  position: fixed;
  right: 20px;
  top: 50%;                       /* JS will update top as you scroll */
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .25s ease, transform .2s ease, top .08s linear;
}
#back-to-top-car.visible{
  opacity: 1;
  pointer-events: auto;
}
#back-to-top-car.facing-down{
  transform: translateY(-50%) rotate(180deg); /* face down when scrolling down */
}


/* ==========================================================================
   AVF Back-to-Top Car — minimal styles (no layout/form changes)
   Works with back-to-top-car.v2.2.js
   ========================================================================== */
#back-to-top-car{
  position: fixed;
  right: 20px;
  top: 56px;                        /* JS updates this dynamically */
  width: auto;
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .25s ease, transform .15s ease, top .1s linear;
  will-change: transform, top, opacity;
}
#back-to-top-car.visible{
  opacity: 1;
  pointer-events: auto;
}
#back-to-top-car.facing-down{
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce){
  #back-to-top-car{ transition: none; }
}


/* ==========================================================================
   AVF — SOLD badge (diagonal ribbon) for Vehicle Cards
   (Appended only; no removals/overrides of existing rules)
   Markup expected from avf-vehicle-sold-manager.php:
     <span class="avf-thumb-badge-wrap">
       <img ...>
       <span class="avf-badge">SOLD</span>
     </span>
   ========================================================================== */
.avf-thumb-badge-wrap{
  position: relative;
  display: inline-block;     /* keep wrapper snug around the image */
  line-height: 0;            /* remove inline-gap under images */
}

/* Diagonal ribbon */
.avf-thumb-badge-wrap .avf-badge{
  position: absolute;
  top: 40px;
  left: -36px;
  transform: rotate(-45deg);
  background: #E53935;       /* ribbon color */
  color: #fff;
  padding: 9px 58px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  z-index: 6;
  pointer-events: none;
}

@media (min-width: 900px){
  .avf-thumb-badge-wrap .avf-badge{
    top: 12px;
    left: -40px;
    padding: 10px 64px;
    font-size: 13px;
  }
}
@media (min-width: 1280px){
  .avf-thumb-badge-wrap .avf-badge{
    top: 14px;
    left: -42px;
    padding: 12px 72px;
    font-size: 14px;
  }
}