/* LRI Service Configurator wizard.
   Kit globals (verified live on staging, elementor_active_kit custom_colors):
     steel-200 (#E3E7EC) -> general dividers/borders
     steel-300 (#C5CBD3) -> stronger-contrast borders (search dropdown)
     paper (#F4F6F9)     -> light surface fills
   System globals (always present): primary (#0E2233), secondary (#07131F),
     text (#27313C), accent (#F5B820). Custom "danger" (#D94848) used for errors. */

.lri-configurator { max-width: 720px; }
.lri-configurator noscript p {
  margin: 0; padding: 1rem; border: 1px solid var(--e-global-color-danger, #b32d2e);
  border-radius: 6px; color: var(--e-global-color-danger, #b32d2e);
}

/* Cart-block "Modify this build" link (assets/js/cart-modify-links.js) */
.lri-modify-build {
  display: block;
  margin-top: .35rem;
  font-size: .85rem;
  color: var(--e-global-color-accent, #F5B820);
  text-decoration: underline;
}
.lri-modify-build:hover { color: var(--e-global-color-primary, #0E2233); }

.lri-wiz {
  border: 1px solid var(--e-global-color-steel-200, #ddd);
  border-radius: 8px;
  padding: 1rem;
  font-family: var(--e-global-typography-text-font-family, inherit);
  color: var(--e-global-color-text, #27313C);
}

/* ---- progress ---- */
.lri-wiz__progress-holder { margin-bottom: 1rem; }
.lri-wiz__progress { display: none; list-style: none; margin: 0; padding: 0; }
.lri-wiz__progress li {
  padding: .4rem .8rem;
  border-bottom: 3px solid transparent;
  color: var(--e-global-color-text, #27313C);
  font-size: .9rem;
}
.lri-wiz__progress li.is-current { border-color: var(--e-global-color-accent, #F5B820); font-weight: 600; }
.lri-wiz__progress li.is-done { cursor: pointer; opacity: .7; }
.lri-wiz__progress li.is-done:hover { opacity: 1; text-decoration: underline; }
.lri-wiz__progress-compact { font-size: .85rem; opacity: .8; margin-bottom: .75rem; }
@media (min-width: 768px) {
  .lri-wiz__progress { display: flex; gap: .25rem; flex-wrap: wrap; }
  .lri-wiz__progress-compact { display: none; }
}

/* ---- body / intro-outro ---- */
.lri-wiz__body { display: block; }
.lri-wiz__intro, .lri-wiz__outro { margin: 0 0 1rem; opacity: .85; }

/* ---- groups ---- */
.lri-wiz__group {
  border: 0;
  border-top: 1px solid var(--e-global-color-steel-200, #eee);
  padding: 1rem 0;
  margin: 0;
}
.lri-wiz__group:first-child { border-top: 0; padding-top: 0; }
.lri-wiz__group-label {
  font-weight: 600;
  font-family: var(--e-global-typography-primary-font-family, inherit);
  padding: 0;
}
.lri-req { color: var(--e-global-color-accent, #F5B820); }
.lri-wiz__help { margin: .25rem 0 .75rem; font-size: .9rem; opacity: .75; }

/* ---- text / textarea ---- */
.lri-wiz__text {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--e-global-color-steel-200, #ccc);
  border-radius: 6px;
  font: inherit;
  color: inherit;
  background: #fff;
}
textarea.lri-wiz__text { min-height: 5rem; resize: vertical; }
.lri-wiz__text:focus { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; }

/* ---- choice rows (radio / checkbox) ---- */
.lri-wiz__choice {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .25rem;
  cursor: pointer;
  border-radius: 4px;
}
.lri-wiz__choice:hover { background: var(--e-global-color-paper, #f7f7f7); }
.lri-wiz__choice input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--e-global-color-accent, #F5B820); }
.lri-wiz__choice-label { flex: 1 1 auto; }
.lri-wiz__choice-price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: .85;
  white-space: nowrap;
}

/* ---- searchable select ---- */
.lri-wiz__search { position: relative; }
.lri-wiz__search-input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--e-global-color-steel-200, #ccc);
  border-radius: 6px;
  font: inherit;
}
.lri-wiz__search-input:focus { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; }
.lri-wiz__search-list {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--e-global-color-steel-300, #ccc);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(14, 34, 51, .15);
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}
.lri-wiz__search-list li { padding: .45rem .7rem; cursor: pointer; }
.lri-wiz__search-list li em { opacity: .7; font-style: normal; }
.lri-wiz__search-list li:hover,
.lri-wiz__search-list li.is-selected { background: var(--e-global-color-paper, #f5f5f5); }

/* ---- validation ---- */
.lri-wiz__error { color: var(--e-global-color-danger, #b32d2e); font-size: .85rem; margin: .25rem 0 0; }

/* ---- review step ---- */
.lri-wiz__review-table { width: 100%; border-collapse: collapse; }
.lri-wiz__review-table td {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--e-global-color-steel-200, #eee);
}
.lri-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- total bar ---- */
.lri-wiz__total {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--e-global-color-paper, #f7f7f7);
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 1.05rem;
}
.lri-wiz__total strong { font-variant-numeric: tabular-nums; color: var(--e-global-color-primary, #0E2233); }

/* ---- nav ---- */
.lri-wiz__nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.lri-wiz__btn {
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}
.lri-wiz__btn--back {
  background: transparent;
  border-color: var(--e-global-color-steel-200, #ccc);
  color: var(--e-global-color-text, #27313C);
}
.lri-wiz__btn--back:hover { border-color: var(--e-global-color-primary, #0E2233); }
.lri-wiz__btn--next {
  margin-left: auto;
  background: var(--e-global-color-accent, #F5B820);
  border-color: var(--e-global-color-accent, #F5B820);
  color: var(--e-global-color-primary, #0E2233);
}
.lri-wiz__btn--next:hover { filter: brightness(.95); }
.lri-wiz__btn--next:disabled { opacity: .6; cursor: not-allowed; }

/* ---- 0.2.0: choice thumbnails ---- */
.lri-wiz__thumb {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0; margin: 0;
  border: 1px solid var(--e-global-color-steel-200, #ddd); border-radius: 4px;
  background: #fff; overflow: hidden; position: relative; display: block;
}
.lri-wiz__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lri-wiz__thumb--empty { visibility: hidden; }

/* The child theme styles every <label> (body.lri-theme label: inline-block, uppercase
   Oswald, margin-bottom 6px) and outranks a bare class, which is why radio rows have
   flowed side by side since 0.1.0. Rows and tiles must be flex containers. */
.lri-wiz .lri-wiz__choice { display: flex; margin-bottom: 0; }
.lri-wiz .lri-wiz__tile { display: flex; margin-bottom: 0; }

/* The child theme (body.lri-theme button: transparent, inherit) and the Kit's global
   Buttons (gold, 14px 26px padding, Oswald uppercase, hover lift) restyle every <button>
   and outrank a bare class. The child theme fights WC Blocks the same way, so !important
   is the house convention. Typography and box reset here; geometry per control below. */
.lri-wiz .lri-wiz__qty-btn, .lri-wiz .lri-wiz__search-clear, .lri-wiz .lri-wiz__zoom, .lri-wiz .lri-wiz__thumb--zoom,
.lri-lightbox .lri-lightbox__close, .lri-lightbox .lri-lightbox__prev, .lri-lightbox .lri-lightbox__next {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; margin: 0 !important; line-height: 1 !important; cursor: pointer;
  font-family: inherit !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-transform: none !important; text-decoration: none !important; transition: none !important;
}
.lri-wiz__search-list li { display: flex; align-items: center; gap: .5rem; }
.lri-wiz__search-list li img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }

/* ---- 0.2.0: dropdown clear button ---- */
.lri-wiz__search-input { padding-right: 2.6rem; box-sizing: border-box; }
.lri-wiz .lri-wiz__search-clear {
  position: absolute; right: .4rem; top: .3rem; width: 1.9rem !important; height: 1.9rem !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important;
  color: var(--e-global-color-text, #27313C) !important; font-size: 1.3rem !important; opacity: .7;
}
.lri-wiz .lri-wiz__search-clear:hover { opacity: 1; background: var(--e-global-color-paper, #f7f7f7) !important; transform: none !important; }
.lri-wiz .lri-wiz__search-clear:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; opacity: 1; }

/* ---- 0.2.0: per-choice link button ---- */
/* .lri-wiz a… outranks the child theme's body.lri-theme a { color: inherit } */
.lri-wiz a.lri-wiz__btn--link {
  display: inline-block; margin: 0 0 .75rem; padding: .45rem 1rem; font-size: .9rem; text-decoration: none;
  background: transparent; border-color: var(--e-global-color-primary, #0E2233); color: var(--e-global-color-primary, #0E2233);
}
.lri-wiz a.lri-wiz__btn--link:hover { background: var(--e-global-color-paper, #F4F6F9); color: var(--e-global-color-primary, #0E2233); }
.lri-wiz a.lri-wiz__btn--link:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 2px; }
.lri-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 0.2.0: image tiles ---- */
.lri-wiz__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.lri-wiz__tile {
  display: flex; flex-direction: column; gap: .4rem; padding: .5rem; cursor: pointer; position: relative;
  border: 2px solid var(--e-global-color-steel-200, #ddd); border-radius: 8px; background: #fff;
}
.lri-wiz__tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lri-wiz__tile .lri-wiz__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.lri-wiz__tile .lri-wiz__thumb--empty { visibility: visible; background: var(--e-global-color-paper, #f7f7f7); }
.lri-wiz__tile .lri-wiz__choice-label { font-size: .9rem; line-height: 1.25; }
.lri-wiz__tile .lri-wiz__choice-price { margin-left: 0; font-size: .85rem; }
.lri-wiz__tile:hover { border-color: var(--e-global-color-steel-300, #C5CBD3); }
.lri-wiz__tile.is-selected {
  border-color: var(--e-global-color-accent, #F5B820);
  box-shadow: 0 0 0 1px var(--e-global-color-accent, #F5B820);
}
.lri-wiz__tile:focus-within { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 2px; }

/* ---- 0.2.0: quantity stepper ---- */
.lri-wiz__qty { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .5rem .25rem; }
.lri-wiz__qty-label { font-size: .9rem; margin-right: .25rem; }
.lri-wiz .lri-wiz__qty-btn {
  width: 2rem !important; height: 2rem !important; padding: 0 !important;
  border: 1px solid var(--e-global-color-steel-300, #C5CBD3) !important; border-radius: 4px !important;
  background: #fff !important; color: var(--e-global-color-text, #27313C) !important; font-size: 1.1rem !important;
  box-shadow: none !important; transform: none !important;
}
.lri-wiz .lri-wiz__qty-btn:hover { background: var(--e-global-color-paper, #f7f7f7) !important; }
.lri-wiz .lri-wiz__qty-btn:disabled { opacity: .4; cursor: not-allowed; background: #fff !important; }
.lri-wiz .lri-wiz__qty-btn:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; }
.lri-wiz__qty-input {
  width: 3.5rem; text-align: center; padding: .35rem; font: inherit; -moz-appearance: textfield;
  border: 1px solid var(--e-global-color-steel-200, #ccc); border-radius: 4px;
}
.lri-wiz__qty-input::-webkit-outer-spin-button,
.lri-wiz__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lri-wiz__qty-total { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.lri-wiz__review-qty { opacity: .75; margin-left: .25rem; }

/* ---- 0.2.0: zoom + lightbox ---- */
/* radio-row thumbnail that doubles as the zoom button: same box as .lri-wiz__thumb,
   restated with !important so the Kit's button padding/background cannot inflate it */
.lri-wiz .lri-wiz__thumb--zoom {
  width: 56px !important; height: 56px !important; padding: 0 !important; cursor: zoom-in;
  border: 1px solid var(--e-global-color-steel-200, #ddd) !important; border-radius: 4px !important;
  background: #fff !important; box-shadow: none !important; transform: none !important; overflow: hidden;
}
.lri-wiz .lri-wiz__thumb--zoom:hover { border-color: var(--e-global-color-steel-300, #C5CBD3) !important; }
.lri-wiz .lri-wiz__thumb--zoom:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; }
.lri-wiz .lri-wiz__zoom {
  position: absolute; top: .75rem; right: .75rem; width: 1.75rem !important; height: 1.75rem !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .9) !important; cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(14, 34, 51, .3) !important; transform: none !important; color: var(--e-global-color-primary, #0E2233) !important;
}
.lri-wiz .lri-wiz__zoom::before { content: '⤢'; font-size: 1rem; line-height: 1; }
.lri-wiz .lri-wiz__zoom:hover { background: #fff !important; }
.lri-wiz .lri-wiz__zoom:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 1px; }

body.lri-lightbox-open { overflow: hidden; }
.lri-lightbox {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(7, 19, 31, .85); padding: 1rem;
}
.lri-lightbox__panel {
  position: relative; display: flex; flex-direction: column; max-width: min(90vw, 900px); max-height: 90vh;
  background: #fff; border-radius: 8px; overflow: hidden;
}
.lri-lightbox__img { display: block; max-width: 100%; max-height: calc(90vh - 5rem); object-fit: contain; margin: 0 auto; }
.lri-lightbox__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem;
  border-top: 1px solid var(--e-global-color-steel-200, #ddd);
}
.lri-lightbox__caption { font-weight: 600; color: var(--e-global-color-text, #27313C); }
.lri-lightbox__caption em { font-style: normal; font-weight: 400; opacity: .7; }
.lri-lightbox__pick { margin-left: 0; }
.lri-lightbox .lri-lightbox__close, .lri-lightbox .lri-lightbox__prev, .lri-lightbox .lri-lightbox__next {
  position: absolute; z-index: 2; width: 2.5rem !important; height: 2.5rem !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important; color: var(--e-global-color-primary, #0E2233) !important;
  font-size: 1.6rem !important; box-shadow: 0 1px 4px rgba(7, 19, 31, .45) !important;
}
.lri-lightbox .lri-lightbox__close:hover, .lri-lightbox .lri-lightbox__prev:hover, .lri-lightbox .lri-lightbox__next:hover { background: #fff !important; }
.lri-lightbox .lri-lightbox__close { top: .5rem; right: .5rem; transform: none !important; }
.lri-lightbox .lri-lightbox__prev { left: .5rem; top: 50%; transform: translateY(-50%) !important; }
.lri-lightbox .lri-lightbox__next { right: .5rem; top: 50%; transform: translateY(-50%) !important; }
.lri-lightbox button:focus-visible { outline: 2px solid var(--e-global-color-accent, #F5B820); outline-offset: 2px; }