/**
 * Motorcycle Selector – mobile-first + inline desktop bar
 *
 * File: css/motorcycle-selector.css
 * File version: 2025-11-23_15-30
 *
 * Change log:
 * - 2025-11-23 15:30 PST – Mobile: reduced inner panel side padding from
 *   8px to 4px (padding: 8px 4px 16px) so the dropdowns and APPLY/CLEAR are
 *   visibly wider while keeping equal left/right margins. No structural
 *   changes.
 * - 2025-11-23 15:20 PST – Removed 100vw / transform hacks; selector sits
 *   inside theme container; equal left/right padding.
 */

/* ==========================================================================
 * BASE: BAR / BACKGROUND (mobile-first)
 * ======================================================================= */

.motorcycle-selector-form {
  background-color: #1f1f1f; /* dark strip behind the controls */
  margin: 0;
}

/* Inner container for the selector controls (MOBILE = base) */
.motorcycle-selector-form #moto-selector-inline,
.motorcycle-selector-inline {
  display: block;             /* stacked by default (mobile) */
  padding: 8px 4px 16px;      /* <= 4px side padding so controls are wider */
  box-sizing: border-box;
}

/* Row wrappers: three selects (.js-form-item...) + actions (.moto-actions) */
.motorcycle-selector-form #moto-selector-inline > .js-form-item,
.motorcycle-selector-form #moto-selector-inline > .moto-actions,
.motorcycle-selector-form #moto-selector-inline > .form-actions {
  width: 100%;
  margin: 0 0 8px;
  box-sizing: border-box;
}

.motorcycle-selector-form #moto-selector-inline > .moto-actions:last-child,
.motorcycle-selector-form #moto-selector-inline > .form-actions:last-child {
  margin-bottom: 0;
}

/* Remove default spacing around form items */
.motorcycle-selector-inline .form-item {
  margin: 0;
}

/* ==========================================================================
 * DROPDOWNS – shared styling (mobile + desktop)
 * ======================================================================= */

.motorcycle-selector-inline select.moto-select {
  background-color: #ffffff !important;
  color: #333333;
  font-size: 13px;
  font-family: multi, sans-serif;
  border: 1px solid #bcbcbc;
  border-radius: 3px;
  box-sizing: border-box;

  padding: 6px 14px;
  line-height: 1.3;
  height: auto;

  /* Remove native arrows & use a single custom arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236d6d6d' d='M1 0l4 4 4-4 1 1-5 5-5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px; /* room for arrow */

  /* MOBILE: full width; desktop overrides below */
  width: 100%;
  max-width: 100%;
}

/* Hide the old arrow in IE/Edge */
.motorcycle-selector-inline select.moto-select::-ms-expand {
  display: none;
}

/* Options inside dropdowns */
.motorcycle-selector-inline .moto-select option {
  color: #333333;
  font-size: 13px;
  font-family: multi, sans-serif;
}

/* ==========================================================================
 * BUTTONS – base (mobile-first)
 * ======================================================================= */

.motorcycle-selector-inline .moto-actions,
.motorcycle-selector-form .moto-actions,
.motorcycle-selector-form .form-actions {
  display: block; /* stacked buttons on mobile */
}

/* Base button styling */
.motorcycle-selector-inline .moto-button,
.motorcycle-selector-form .moto-button,
.motorcycle-selector-form .form-actions .button,
.motorcycle-selector-form .form-actions input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  box-sizing: border-box;

  font-size: 11px;
  font-family: multi, sans-serif;
  text-transform: uppercase;
  border-radius: 3px;
  border: none;
  line-height: 1.2;
  cursor: pointer;
}

/* APPLY – blue */
.motorcycle-selector-inline .moto-button--apply,
.motorcycle-selector-form .moto-button--apply {
  background-color: #1c78d2;
  color: #ffffff;
}

/* CLEAR – dark grey */
.motorcycle-selector-inline .moto-button--clear,
.motorcycle-selector-form .moto-button--clear {
  background-color: #555555;
  color: #ffffff;
}

/* Hover states (for desktop) */
.motorcycle-selector-inline .moto-button--apply:hover,
.motorcycle-selector-form .moto-button--apply:hover {
  background-color: #1664af;
}

.motorcycle-selector-inline .moto-button--clear:hover,
.motorcycle-selector-form .moto-button--clear:hover {
  background-color: #444444;
}

/* Strong gap between APPLY and CLEAR on mobile */
.motorcycle-selector-inline .moto-button--apply {
  margin-bottom: 12px !important;
}

/* ==========================================================================
 * INLINE HEADER LAYOUT (Start Here + selector + My Motorcycle)
 * ======================================================================= */

/* Page title region as flex row */
.region-page-title,
.region-page_title,
.block-region-page-title,
.block-region-page_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Remove extra margins */
#region-page-title,
.region-page-title .block,
.region-page_title .block,
.block-region-page-title .block,
.block-region-page_title .block {
  margin: 0;
}

/* Let selector expand, My Motorcycle size to content */
#block-motorcycle-selector-motorcycle-selector-block {
  flex: 1 1 auto;
}

#block-motorcycle-selector-my-motorcycle-block {
  flex: 0 0 auto;
}

/* My Motorcycle text styling */
#block-motorcycle-selector-my-motorcycle-block .my-motorcycle-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 12px;
  border-left: 1px solid #333;
  font-size: 13px;
  color: #ffffff;
}

#block-motorcycle-selector-my-motorcycle-block .my-motorcycle-title {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
}

#block-motorcycle-selector-my-motorcycle-block .my-motorcycle-note {
  margin: 0;
  font-size: 11px;
  color: #cccccc;
}

/* Page title container flex */
#page-title.page-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Blocks inside page title */
#page-title > section.block {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

/* Selector expands */
#page-title #block-dxpr-theme-motorcycleselector {
  flex: 1 1 auto;
}

/* My Motorcycle on right */
#page-title #block-dxpr-theme-mymotorcycle {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Hide DXPR divider line */
#page-title .block-hr {
  display: none;
}

/* ==========================================================================
 * RESPONSIVE – desktop inline bar
 * ======================================================================= */

/* Tablet & up (≥ 768px): inline bar layout */
@media (min-width: 768px) {

  .motorcycle-selector-form #moto-selector-inline,
  .motorcycle-selector-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;         /* equal left/right on desktop */
  }

  .motorcycle-selector-form #moto-selector-inline > .js-form-item {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
  }

  .motorcycle-selector-inline .moto-select--year {
    min-width: 70px;
    max-width: 80px;
  }

  .motorcycle-selector-inline .moto-select--make {
    min-width: 170px;
    max-width: 190px;
  }

  .motorcycle-selector-inline .moto-select--model {
    min-width: 230px;
    max-width: 270px;
  }

  .motorcycle-selector-inline select.moto-select {
    width: auto;
    max-width: none;
  }

  .motorcycle-selector-form #moto-selector-inline > .moto-actions,
  .motorcycle-selector-form #moto-selector-inline > .form-actions {
    width: auto;
    flex: 0 0 auto;
    margin: 0 0 0 6px;
  }

  .motorcycle-selector-inline .moto-actions,
  .motorcycle-selector-form .moto-actions,
  .motorcycle-selector-form .form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .motorcycle-selector-inline .moto-button,
  .motorcycle-selector-form .moto-button,
  .motorcycle-selector-form .form-actions .button,
  .motorcycle-selector-form .form-actions input[type="submit"] {
    width: auto;
    max-width: none;
    padding: 3px 12px;
  }

  .motorcycle-selector-inline .moto-button--apply {
    margin-bottom: 0 !important;
  }
}

/* Optional max-width for wide desktops */
@media (min-width: 1200px) {
  .motorcycle-selector-form #moto-selector-inline,
  .motorcycle-selector-inline {
    max-width: 1200px;
  }
}