/*
 * Legrand Smart Order — functional CSS only
 * v1.0.1
 *
 * IMPORTANT:
 * This stylesheet deliberately contains only structural/behavioural CSS.
 * Visual styling (fonts, colours, borders, backgrounds, typography, button look)
 * should be controlled by the site/Elementor global stylesheet.
 *
 * Most selectors use :where() so their specificity is 0 and Elementor/custom CSS
 * can override them cleanly without !important.
 */

:where(.legrand-order) {
  position: relative;
  width: 100%;
}

:where(.legrand-order *),
:where(.legrand-order *::before),
:where(.legrand-order *::after) {
  box-sizing: border-box;
}

.legrand-order [hidden] {
  display: none !important;
}

/* Progress */
:where(.legrand-order__progress) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: sticky;
  top: 70px;
  z-index: 15;
}

:where(.legrand-order__progress-step) {
  min-width: 0;
  text-align: left;
}

/* Step transitions */
:where(.legrand-order__step) {
  animation: lsoFade .2s ease;
}

/* Choice cards */
:where(.legrand-order__choices) {
  display: grid;
}

:where(.legrand-order__choices--2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.legrand-order__choice) {
  width: 100%;
  text-align: left;
}

:where(.legrand-order__choice span),
:where(.legrand-order__choice small) {
  display: block;
}

/* Conditional blocks + fields */
:where(.legrand-order__fields) {
  display: grid;
}

:where(.legrand-order__fields--2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.legrand-order__field) {
  display: block;
  min-width: 0;
}

:where(.legrand-order__field > span),
:where(.legrand-order__label),
:where(.legrand-order__eyebrow) {
  display: block;
}

:where(.legrand-order__field input),
:where(.legrand-order__field textarea),
:where(.legrand-order__field select) {
  width: 100%;
  max-width: 100%;
}

:where(.legrand-order__field textarea) {
  resize: vertical;
}

/* Checkboxes */
:where(.legrand-order__check) {
  display: flex;
  align-items: flex-start;
}

:where(.legrand-order__check input) {
  flex: 0 0 auto;
}

/* Product layout */
:where(.legrand-order__products-layout) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

:where(.legrand-order__product-group-head) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

:where(.legrand-order__product-head),
:where(.legrand-order__product-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px;
  align-items: center;
}

:where(.legrand-order__product-name small) {
  display: none;
}

/* Quantity stepper */
:where(.legrand-order__stepper) {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
}

:where(.legrand-order__stepper button),
:where(.legrand-order__stepper input) {
  min-width: 0;
  text-align: center;
}

/* Summary */
:where(.legrand-order__summary) {
  position: sticky;
  top: 150px;
  align-self: start;
}

:where(.legrand-order__summary-line),
:where(.legrand-order__review-line) {
  display: flex;
  justify-content: space-between;
}

:where(.legrand-order__summary-line small),
:where(.legrand-order__review-line small) {
  display: block;
}

:where(.legrand-order__summary-total > div) {
  display: flex;
  justify-content: space-between;
}

/* Review */
:where(.legrand-order__review-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Sticky action bar */
:where(.legrand-order__actions) {
  position: sticky;
  bottom: 0;
  z-index: 14;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:where(.legrand-order__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(.legrand-order__button:disabled) {
  cursor: wait;
}

/* Success */
:where(.legrand-order__success) {
  max-width: 760px;
}

/* Mobile order summary is enabled only below tablet breakpoint */
:where(.legrand-order__mobile-summary) {
  display: none;
}

@keyframes lsoFade {
  from {
    opacity: .4;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  :where(.legrand-order__products-layout) {
    grid-template-columns: 1fr;
  }

  :where(.legrand-order__summary--desktop) {
    display: none;
  }

  :where(.legrand-order__mobile-summary) {
    display: block;
    position: sticky;
    bottom: 69px;
    z-index: 13;
    max-height: 260px;
    overflow: auto;
  }
}

@media (max-width: 640px) {
  :where(.legrand-order__progress) {
    top: 56px;
  }

  :where(.legrand-order__progress-step strong) {
    display: none;
  }

  :where(.legrand-order__choices--2),
  :where(.legrand-order__fields--2),
  :where(.legrand-order__review-grid) {
    grid-template-columns: 1fr;
  }

  :where(.legrand-order__product-head) {
    display: none;
  }

  :where(.legrand-order__product-row) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  :where(.legrand-order__product-name small) {
    display: block;
  }

  :where(.legrand-order__packaging) {
    display: none;
  }

  :where(.legrand-order__stepper) {
    width: 132px;
    grid-template-columns: 36px 60px 36px;
  }

  :where(.legrand-order__product-group-head small) {
    display: none;
  }
}

/* v1.0.3 — Step 04: dynamic notice and full-width note field */
:where(.legrand-order [data-lso-step="4"] .legrand-order__block:has(textarea[data-lso-field="note"])) {
  width: 100%;
  max-width: none;
  margin-bottom: 28px;
}
:where(.legrand-order [data-lso-step="4"] .legrand-order__field:has(textarea[data-lso-field="note"]),
       .legrand-order [data-lso-step="4"] textarea[data-lso-field="note"]) {
  display: block;
  width: 100%;
  max-width: none;
}
:where(.legrand-order [data-lso-step="4"] textarea[data-lso-field="note"]) {
  min-height: 120px;
}
:where(.legrand-order__holiday-notice) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(243, 187, 73, 0.18);
  color: #262626;
  font-size: 13px;
  line-height: 1.5;
}
:where(.legrand-order__holiday-notice strong) {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F3BB49;
  color: #262626;
  font-size: 12px;
  font-weight: 700;
}