/**
 * Configurator Modal Essential Styles (Task 157)
 *
 * Generic structural/layout styling for the singleton popup modal shared by every
 * [configurator-modal] trigger button on a page: overlay, dialog shape, image column,
 * head/foot/content layout, module/input/upload/quote-form structure.
 *
 * Loaded via a configurator's own `cssFiles` array (same mechanism as widget CSS) —
 * any configurator rendered through [configurator-modal] must list this file in its
 * cssFiles, or the popup renders unstyled.
 *
 * Brand-specific colors for the "main-product-selection" product card and
 * "product-selection" product grid tile components are NOT included here — they come
 * from a brand CSS file (e.g. configurator-modal-signfex.css) via the
 * --configurator-modal-brand-* custom properties referenced below.
 */

.configurator-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
}

.configurator-modal-overlay.configurator-modal--open {
  display: flex;
}

/* Mobile-first (Task 164): below 768px the dialog fills the viewport (no outer
   margin, no rounded corners); the @media (min-width: 768px) block further
   down turns it into a capped-size, rounded box, still with the image column
   stacked above the info column until @media (min-width: 1200px) restores
   today's side-by-side layout. */
.configurator-modal-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Left column: playlist-resolved product image with a scrollable thumbnail strip
   for navigation (Task 144). Stacked on top by default (Task 164): sized by
   aspect-ratio instead of the fixed 50%/100% split used once side-by-side at
   1200px and up; min-height keeps the image from getting too short on very
   narrow screens, where the aspect-ratio alone would shrink it below a usable
   size. */
.configurator-modal-image-column {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #d9d9d9;
}

.configurator-modal-image-wrapper {
  position: relative;
  z-index: 0; /* isolates overlay z-index stacking so it can never paint above the nav buttons */
  width: 100%;
  height: 100%;
}

.configurator-modal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.configurator-modal-layered-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.configurator-modal-layered-images .configurator-modal-image {
  position: absolute;
  top: 0;
  left: 0;
}

/* Bottom overlay bar: left-aligned thumbnail strip (Task 159). The strip scrolls
   horizontally instead of wrapping or clipping once its items exceed the bar's
   width - the case whenever a playlist carries more than a handful of images
   (Task 169). */
.configurator-modal-image-bottom-bar {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(
    180deg,
    rgba(50, 72, 67, 0) 0%,
    rgba(50, 72, 67, 0.55) 100%
  );
  z-index: 1;
}

.configurator-modal-image-thumbnail-preview {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.configurator-modal-image-thumbnails {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Renders via renderSimpleImage()/renderWithOverlays(), reusing the same
   .configurator-modal-image/.configurator-modal-layered-images classes as the main
   preview so BASE_IMAGE thumbnails show their composited overlays too (Task 159) */
.configurator-modal-image-thumbnail {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.configurator-modal-image-thumbnail-active {
  border-color: #ffffff;
}

/* Right column: head/content/foot stack (rough placeholder, Task 141). Stacked
   below the image column by default (Task 164): fills the dialog's remaining
   height via flex-grow instead of the fixed 50%/100% split used once
   side-by-side at 1200px and up; min-height: 0 lets .configurator-modal-content's
   own overflow-y: auto scroll within that space instead of overflowing it. */
.configurator-modal-info-column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.configurator-modal-head,
.configurator-modal-foot {
  box-sizing: border-box;
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.configurator-modal-head {
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
}

/* Step text + progress bar, growing to fill the space left of the close button */
.configurator-modal-step-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
}

.configurator-modal-step-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 8px;
}

.configurator-modal-step-progress-segment {
  flex: 1 1 0;
  height: 8px;
  border-radius: 4px;
  background: rgba(71, 94, 90, 0.4);
}

.configurator-modal-step-progress-segment--filled {
  background: #324843;
}

.configurator-modal-foot {
  gap: 24px;
  padding: 24px 40px;
  border-top: 1px solid #d0e1dc;
}

.configurator-modal-back,
.configurator-modal-next,
.configurator-modal-quote-submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.configurator-modal-back {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #223530;
}

/* Weiter/Senden always sit at the far right, whether or not Zurück is rendered
   next to them; only one of the two is ever visible at a time (quick change) */
.configurator-modal-next,
.configurator-modal-quote-submit {
  background: #5f7771;
  color: #f2f9f7;
  margin-left: auto;
}

.configurator-modal-button-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Label + value stack, filling the space between Zurück and Weiter (Frame 161) */
.configurator-modal-price-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.configurator-modal-price-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #7a948d;
}

.configurator-modal-price {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #324843;
}

/* Live price recalculation states (Task 158) - inner spans mirror the widget's
   .configurator-loading/.configurator-price-amount/.configurator-error structure */
.configurator-modal-price-loading {
  font-style: italic;
  font-weight: 400;
  color: #777;
}

.configurator-modal-price-amount {
  font-weight: 600;
  color: #324843;
}

.configurator-modal-price-error {
  font-weight: 400;
  color: #d9534f;
}

.configurator-modal-close {
  box-sizing: border-box;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d0e1dc;
  border-radius: 9999px;
  background: transparent;
  color: #324843;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.configurator-modal-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
}

/* Current step's title, shown above the module groups */
.configurator-modal-headline {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #324843;
}

.configurator-modal-module-group {
  margin-bottom: 16px;
}

.configurator-modal-module-group-hidden {
  display: none;
}

.configurator-modal-module-group-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.configurator-modal-module-group-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.configurator-modal-module {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.configurator-modal-module-disabled {
  opacity: 0.5;
}

.configurator-modal-module-input {
  margin-right: 8px;
}

/* Product selection cards (group displayType: "main-product-selection") — structure only;
   brand colors come from --configurator-modal-brand-* custom properties (see a brand CSS file) */
.configurator-modal-product-selection {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.configurator-modal-product-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--configurator-modal-brand-primary-light);
  border-radius: 26px;
  cursor: pointer;
}

.configurator-modal-product-card.configurator-modal-module-selected {
  border: 2px solid var(--configurator-modal-brand-primary);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.5);
}

.configurator-modal-product-card.configurator-modal-module-disabled {
  cursor: default;
}

.configurator-modal-product-card-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.configurator-modal-product-card-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background-color: var(--configurator-modal-brand-primary-pale);
}

.configurator-modal-product-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.configurator-modal-product-card-overline {
  font-size: 14px;
  color: var(--configurator-modal-brand-muted);
}

.configurator-modal-product-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--configurator-modal-brand-primary);
}

.configurator-modal-product-card-subtitle {
  font-size: 14px;
  color: var(--configurator-modal-brand-primary);
}

.configurator-modal-product-card-price {
  flex: 0 0 auto;
  align-self: flex-end;
  font-size: 16px;
  font-weight: 600;
  color: var(--configurator-modal-brand-primary);
  white-space: nowrap;
}

.configurator-modal-product-card-check {
  display: none;
  position: absolute;
  top: 24px;
  right: 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--configurator-modal-brand-accent);
  color: var(--configurator-modal-brand-accent-contrast);
  font-size: 14px;
  line-height: 1;
}

.configurator-modal-product-card.configurator-modal-module-selected
  .configurator-modal-product-card-check {
  display: flex;
}

/* Product selection grid (group displayType: "product-selection") — structure only;
   brand colors come from --configurator-modal-brand-* custom properties (see a brand CSS file) */
.configurator-modal-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.configurator-modal-product-tile {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  border: 1px solid var(--configurator-modal-brand-primary-light);
  border-radius: 26px;
  cursor: pointer;
}

.configurator-modal-product-tile.configurator-modal-module-selected {
  border: 2px solid var(--configurator-modal-brand-accent);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.5);
}

.configurator-modal-product-tile.configurator-modal-module-disabled {
  cursor: default;
}

.configurator-modal-product-tile-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.configurator-modal-product-tile-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.configurator-modal-product-tile-title {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--configurator-modal-brand-primary);
}

.configurator-modal-product-tile-subtitle {
  font-size: 14px;
  color: var(--configurator-modal-brand-primary);
}

.configurator-modal-product-tile-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--configurator-modal-brand-muted);
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  color: var(--configurator-modal-brand-muted);
}

.configurator-modal-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.configurator-modal-input-label {
  font-size: 14px;
  margin-bottom: 2px;
}

.configurator-modal-input {
  padding: 4px 8px;
}

.configurator-modal-input::placeholder {
  color: #7a948d;
}

/* Toggle buttons and their input fields (group displayType: "options-fields-buttons") */
.configurator-modal-module-group--options-buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-buttons {
  display: none;
}

.configurator-modal-options-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.configurator-modal-options-button {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 8px;
  cursor: pointer;
}

.configurator-modal-options-button.configurator-modal-module-selected {
  background: #5f7771;
  border-color: #5f7771;
}

.configurator-modal-options-button.configurator-modal-module-disabled {
  cursor: default;
}

.configurator-modal-options-button-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.configurator-modal-options-button-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #324843;
}

.configurator-modal-options-button.configurator-modal-module-selected
  .configurator-modal-options-button-label {
  color: #f2f9f7;
}

.configurator-modal-module-group--options-buttons .configurator-modal-input-group,
.configurator-modal-module-group--options-checkboxes .configurator-modal-input-group,
.configurator-modal-module-group--options-classic .configurator-modal-input-group,
.configurator-modal-module-group--options-panel .configurator-modal-input-group,
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-input-group,
.configurator-modal-module-group--options-panel-split .configurator-modal-input-group {
  width: 100%;
  gap: 8px;
  margin-bottom: 0;
}

.configurator-modal-module-group--options-buttons .configurator-modal-input-label,
.configurator-modal-module-group--options-checkboxes .configurator-modal-input-label,
.configurator-modal-module-group--options-classic .configurator-modal-input-label,
.configurator-modal-module-group--options-panel .configurator-modal-input-label,
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-input-label,
.configurator-modal-module-group--options-panel-split .configurator-modal-input-label {
  font-size: 14px;
  font-weight: 500;
  color: #7a948d;
  margin-bottom: 0;
}

.configurator-modal-module-group--options-buttons .configurator-modal-input,
.configurator-modal-module-group--options-checkboxes .configurator-modal-input,
.configurator-modal-module-group--options-classic .configurator-modal-input,
.configurator-modal-module-group--options-panel .configurator-modal-input,
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-input,
.configurator-modal-module-group--options-panel-split .configurator-modal-input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  color: #324843;
}

/* Wraps a display type's text/number input fields (options-fields-buttons,
   options-fields-checkboxes, options-fields-classic, options-fields-panel,
   options-fields-panel-checkboxes); single column by default, switching to
   two columns only when the group opts in via inputsTwoColumn (see the
   .configurator-modal-group-inputs--two-column modifier and its >=1200px
   counterpart below). options-fields-panel-split is not part of this shared
   mechanism — its inputs box already has its own fixed always-two-column
   layout (WR-263). */
.configurator-modal-group-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Checkbox grid (group displayType: "options-fields-checkboxes") */
.configurator-modal-module-group--options-checkboxes {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-checkboxes {
  display: none;
}

/* Single column below 1200px (Task 164); the @media (min-width: 1200px) block
   restores today's fixed 2-column grid unchanged. */
.configurator-modal-options-checkboxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.configurator-modal-options-checkbox {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 8px;
  cursor: pointer;
}

.configurator-modal-options-checkbox.configurator-modal-module-selected {
  border: 2px solid #324843;
}

.configurator-modal-options-checkbox.configurator-modal-module-disabled {
  cursor: default;
}

.configurator-modal-options-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.configurator-modal-options-checkbox-box {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.configurator-modal-options-checkbox.configurator-modal-module-selected
  .configurator-modal-options-checkbox-box,
.configurator-modal-classic-checkbox.configurator-modal-module-selected
  .configurator-modal-options-checkbox-box {
  background: #5f7771;
  border-color: #5f7771;
}

.configurator-modal-options-checkbox-box::after {
  content: "";
  display: none;
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #f2f9f7;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.configurator-modal-options-checkbox.configurator-modal-module-selected
  .configurator-modal-options-checkbox-box::after,
.configurator-modal-classic-checkbox.configurator-modal-module-selected
  .configurator-modal-options-checkbox-box::after {
  display: block;
}

.configurator-modal-options-checkbox-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.configurator-modal-options-checkbox-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #324843;
}

.configurator-modal-options-checkbox-sublabel {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #7a948d;
}

.configurator-modal-options-checkbox-info {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #7a948d;
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  color: #7a948d;
}

/* Classic checkbox list (group displayType: "options-fields-classic") */
.configurator-modal-module-group--options-classic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-classic {
  display: none;
}

.configurator-modal-classic-list {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 8px;
}

.configurator-modal-classic-checkbox {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
}

.configurator-modal-classic-checkbox.configurator-modal-module-disabled {
  cursor: default;
}

.configurator-modal-classic-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.configurator-modal-classic-checkbox-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.configurator-modal-classic-checkbox-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #324843;
}

.configurator-modal-classic-checkbox-sublabel {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #7a948d;
}

.configurator-modal-classic-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #7a948d;
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  color: #7a948d;
}

/* Bordered white box with checkbox rows and inputs (group displayType:
   "options-fields-panel"), nested inside the group's own rounded panel below */
.configurator-modal-module-group--options-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-panel {
  display: none;
}

.configurator-modal-module-group--options-panel .configurator-modal-module-group-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #324843;
  margin-bottom: 0;
}

.configurator-modal-panel-list {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 16px;
}

/* Rows in this box start further apart and align the checkbox to the label's
   top line rather than centering against a two-line label+sublabel block */
.configurator-modal-module-group--options-panel .configurator-modal-classic-checkbox {
  align-items: flex-start;
}

.configurator-modal-module-group--options-panel .configurator-modal-input-label {
  font-size: 16px;
  font-weight: 700;
  color: #324843;
}

/* Bordered white box of checkbox rows (group displayType: "options-fields-panel-checkboxes"),
   nested inside the group's own rounded panel below. A separate display type from
   "options-fields-panel" above so the two can evolve independently even though they
   currently share the same panel/box treatment. */
.configurator-modal-module-group--options-panel-checkboxes {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-panel-checkboxes {
  display: none;
}

.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-module-group-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #324843;
  margin-bottom: 0;
}

.configurator-modal-panel-checkboxes-list {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 16px;
}

/* Rows in this box start further apart and align the checkbox to the label's
   top line rather than centering against a two-line label+sublabel block */
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-classic-checkbox {
  align-items: flex-start;
}

.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-input-label {
  font-size: 16px;
  font-weight: 700;
  color: #324843;
}

/* Outer tinted panel with two separate white boxes (checkbox rows, then inputs)
   (group displayType: "options-fields-panel-split"). Uses its own 16px gap
   between the two boxes, not the 24px used by "options-fields-panel"/
   "options-fields-panel-checkboxes" -- this group's own Figma spec. */
.configurator-modal-module-group--options-panel-split {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

/* Higher specificity than the rule above so a step/availability hidden group stays
   hidden instead of the "display: flex" here winning on source order */
.configurator-modal-module-group-hidden.configurator-modal-module-group--options-panel-split {
  display: none;
}

.configurator-modal-module-group--options-panel-split .configurator-modal-module-group-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #324843;
  margin-bottom: 0;
}

.configurator-modal-panel-split-checkbox-list,
.configurator-modal-panel-split-input-list {
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 16px;
}

.configurator-modal-panel-split-checkbox-list {
  display: flex;
  flex-direction: column;
}

.configurator-modal-panel-split-checkbox-list .configurator-modal-classic-checkbox {
  align-items: flex-start;
}

/* Divider line between checkbox rows -- a visual detail unique to this display type */
.configurator-modal-panel-split-checkbox-list > .configurator-modal-classic-checkbox {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #d0e1dc;
}

.configurator-modal-panel-split-checkbox-list > .configurator-modal-classic-checkbox:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.configurator-modal-panel-split-input-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.configurator-modal-panel-split-inputs-headline {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #324843;
}

/* Default layout for this box's inputs: exactly two sit side by side (this
   group's Figma spec) instead of stacking full-width */
.configurator-modal-panel-split-input-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.configurator-modal-panel-split-input-fields > .configurator-modal-input-group {
  flex: 1 1 0;
  width: auto;
  min-width: 160px;
}

.configurator-modal-warning {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 4px;
}

/* Image upload sections (Task 149) */
.configurator-modal-upload-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  padding: 24px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
  cursor: pointer;
}

.configurator-modal-upload-section:focus {
  outline: 2px solid #5f7771;
  outline-offset: 2px;
}

.configurator-modal-upload-section-hidden {
  display: none;
}

.configurator-modal-upload-label {
  font-weight: bold;
  margin-bottom: 4px;
}

.configurator-modal-upload-dropzone {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 40px;
  gap: 8px;
  background: #ffffff;
  border: 2px dashed #d0e1dc;
  border-radius: 14px;
}

.configurator-modal-upload-dragover .configurator-modal-upload-dropzone {
  border-color: #5f7771;
  border-style: solid;
  background: #f8fcfb;
}

.configurator-modal-upload-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 9999px;
  color: #5f7771;
}

.configurator-modal-upload-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}

.configurator-modal-upload-instruction {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #324843;
}

.configurator-modal-upload-helper {
  font-size: 12px;
  line-height: 16px;
  color: #7a948d;
  margin: 0;
}

.configurator-modal-upload-input {
  display: none;
}

.configurator-modal-upload-preview {
  position: relative;
  width: 100%;
  margin-top: 4px;
}

.configurator-modal-upload-preview-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.configurator-modal-upload-preview-filename {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  color: #324843;
}

.configurator-modal-upload-remove {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  padding: 0;
  background-color: #d9534f;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.configurator-modal-upload-error {
  margin-top: 8px;
  color: #d9534f;
  font-size: 12px;
}

/* Quote form fields (Task 151) */
.configurator-modal-quote-form {
  margin-top: 16px;
}

.configurator-modal-quote-form-hidden {
  display: none;
}

.configurator-modal-quote-headline {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #324843;
  margin: 0 0 16px;
}

/* Stacks each .configurator-modal-quote-row (and the privacy/turnstile/error/
   submit elements) top to bottom down the form */
.configurator-modal-quote-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* One row per line of the form; lays its 1-2 fields out side by side. Stacks
   into a single column below 576px (Task 164, WR-269) - deliberately its own,
   lower breakpoint rather than the dialog's 1200px structural switch, since
   name/company/email fields fit side by side well before the popup itself
   has room to go side-by-side; restored to a row further down, alongside
   the file's other responsive media blocks. */
.configurator-modal-quote-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/* Equal share of the row's width by default (50/50 for a two-field row,
   100% for a row with a single field); the --auto modifier (salutation)
   opts out to size itself to its content instead */
.configurator-modal-quote-field {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.configurator-modal-quote-field--auto {
  flex: 0 0 auto;
}

/* Visually hidden (not display:none) so the field stays labelled for assistive
   tech while showing only its placeholder text on screen - saves the vertical
   space a visible label above every input used to take (quick change). */
.configurator-modal-quote-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.configurator-modal-quote-input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0px !important;
  padding-left: 10px !important;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  color: #324843;
}

.configurator-modal-quote-input::placeholder {
  color: #7a948d;
}

/* Anrede: independent toggle buttons sized to their content, not stretched */
.configurator-modal-quote-salutation-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.configurator-modal-quote-salutation-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #d0e1dc;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #324843;
  cursor: pointer;
}

.configurator-modal-quote-salutation-button.configurator-modal-module-selected {
  background: #5f7771;
  border-color: #5f7771;
  color: #f2f9f7;
}

.configurator-modal-quote-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px !important;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  color: #324843;
  resize: vertical;
}

.configurator-modal-quote-textarea::placeholder {
  color: #7a948d;
}

.configurator-modal-quote-submit:hover {
  background: #4d615c;
  border-color: #4d615c;
}

.configurator-modal-quote-submit.is-loading {
  opacity: 0.6;
  cursor: wait;
}

.configurator-modal-quote-required {
  color: #d9534f;
  margin-left: 2px;
}

.configurator-modal-quote-error {
  color: #d9534f;
  font-size: 13px;
}

.configurator-modal-quote-privacy {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  background: #f2f9f7;
  border: 1px solid #d0e1dc;
  border-radius: 26px;
}

.configurator-modal-quote-privacy input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #5f7771;
}

.configurator-modal-quote-privacy-text {
  font-size: 14px;
  line-height: 20px;
  color: #324843;
  padding-left: 5px;
}

/* Stacks the privacy checkbox above the Turnstile captcha by default; goes
   side by side only at the 1200px "large screens" tier (below), reusing the
   dialog's own structural breakpoint rather than the quote form's own lower
   576px one, since the captcha needs real width next to the checkbox. */
.configurator-modal-quote-consent-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.configurator-modal-quote-consent-row .configurator-modal-quote-privacy {
  flex: 1 1 auto;
}

/* ==========================================================================
   RESPONSIVE LAYOUT (Task 164)

   Mobile-first, in the spirit of [configurator]'s own breakpoints (WR-091):
   every selector above is written for the stacked/fullscreen mobile layout
   by default, and these blocks restore today's capped-size, rounded,
   side-by-side dialog in two steps rather than one. At 768px the dialog
   itself becomes a capped-size, rounded box, but the image column stays
   stacked on top of the info column - there's a boxed-but-stacked look
   between 768 and 1200px. Only at 1200px and up (deliberately higher than
   any of the widget's own tiers - 576/768/1024px - since the popup needs
   more width than the widget does before a side-by-side layout stops
   feeling cramped) do the image/info columns and the other WR-269 elements
   tied to the dialog's own width (checkbox grid, image bottom bar) switch
   to side-by-side. The quote form's name row switches at its own, lower
   576px breakpoint instead (below) since it doesn't need the dialog itself
   to be side-by-side to fit its fields.
   ========================================================================== */
@media (min-width: 576px) {
  .configurator-modal-quote-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .configurator-modal-dialog {
    width: min(1664px, 90%);
    height: min(1032px, 95vh);
    border-radius: 26px;
  }
}

@media (min-width: 1200px) {
  .configurator-modal-quote-consent-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .configurator-modal-quote-consent-row .configurator-modal-quote-turnstile {
    flex: 0 0 auto;
  }

  .configurator-modal-dialog {
    flex-direction: row;
  }

  .configurator-modal-image-column {
    width: 50%;
    height: 100%;
    min-height: auto;
    aspect-ratio: unset;
  }

  /* Per-playlist-item crop anchor override (default is object-position: left,
     set unconditionally above); only meaningful at this breakpoint, where the
     50%-width column crops landscape photos heavily and can hide an
     off-center subject. */
  .configurator-modal-image-position-center {
    object-position: center;
  }

  .configurator-modal-image-position-right {
    object-position: right;
  }

  .configurator-modal-image-bottom-bar {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 40px;
  }

  .configurator-modal-image-thumbnail {
    width: 120px;
    height: 80px;
    border-radius: 8px;
  }

  .configurator-modal-info-column {
    width: 50%;
    height: 100%;
    flex: 0 1 auto;
    min-height: auto;
  }

  .configurator-modal-options-checkboxes {
    grid-template-columns: repeat(2, 1fr);
  }

  .configurator-modal-group-inputs--two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .configurator-modal-group-inputs--two-column
    > .configurator-modal-input-group {
    width: auto;
  }
}

/* Tasks 162/172: product-selection/options-fields-checkboxes/options-fields-classic/
   options-fields-panel-checkboxes/options-fields-panel-split render their info glyph
   as a real <button> (class "configurator-info-button") instead of an inert <span>,
   so it's focusable and keyboard-activatable. This resets browser default button
   chrome so the glyph's appearance stays identical to before - size/border/color
   are still owned by the existing .configurator-modal-product-tile-info /
   .configurator-modal-options-checkbox-info / .configurator-modal-classic-info
   rules above. Scoped to "button.configurator-info-button" so the decorative
   (non-interactive) <span> variant on options-fields-panel is unaffected. */
button.configurator-info-button {
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: normal;
}

/* ==========================================================================
   INFO PANEL & CAROUSEL (Task 162)

   Copied unchanged from the [configurator] widget's
   configurator-widget-divi-full-width.css so ConfiguratorInfoPanelComponent/
   ConfiguratorCarouselComponent (now in core/, shared by both shortcodes)
   render identically for [configurator-modal]. The one non-structural rule
   (the description <ul> bullet color) uses this file's own
   --configurator-modal-brand-primary variable instead of the widget's
   --primary-color, since [configurator-modal] pages never load widget CSS.
   ========================================================================== */

.configurator-info-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  transition: right 0.3s ease-in-out;
  overflow-y: auto;
}

.configurator-info-panel-open {
  right: 0;
}

.configurator-info-panel-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.configurator-info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.configurator-info-panel-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.configurator-info-panel-body {
  flex: 1;
  overflow-y: auto;
}

.configurator-info-panel h5 {
  margin-top: 16px;
}

.configurator-info-panel ul {
  list-style: none;
  padding-left: 0;
}

.configurator-info-panel ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

.configurator-info-panel ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background-color: var(--configurator-modal-brand-primary, #324843);
  border-radius: 2px;
}

/* Info Panel Footer (Task 163): always-rendered two-button footer below the
   description content, copied from the widget's core-tier rules so both
   shortcodes render identically without depending on each other's CSS. */
.configurator-info-panel-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  width: 100%;
  flex-shrink: 0;
}

.configurator-info-panel-footer-button {
  width: 100%;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}

/* Brand-adaptive via --configurator-modal-brand-accent (defined by
   configurator-modal-signfex.css); neutral gray fallback keeps this core
   file free of hardcoded Signfex hex values for configurators without a
   brand CSS file loaded. */
.configurator-info-panel-select-button {
  background-color: var(--configurator-modal-brand-accent, #767676);
  color: white;
  border: none;
}

.configurator-info-panel-select-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.configurator-info-panel-back-button {
  background-color: white;
  color: #333333;
  border: 1px solid #e5e5e5;
}

.configurator-info-panel-back-button:hover {
  background-color: #f5f5f5;
}

/* Info Panel Richtwert Price Box (Task 163): optional, shown only when the
   current module has a non-empty priceTextFix. Neutral core-tier coloring;
   configurator-modal-signfex.css overrides with the brand palette. */
.configurator-info-panel-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  width: 100%;
  border-radius: 26px;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  flex-shrink: 0;
  box-sizing: border-box;
}

.configurator-info-panel-price-label {
  font-size: 16px;
  color: #333333;
  margin: 0;
}

.configurator-info-panel-price-value {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin: 0;
}

.configurator-info-panel-price-note {
  font-size: 14px;
  color: #777777;
  text-align: right;
  margin: 0;
}

.configurator-info-carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.configurator-info-carousel-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.configurator-info-carousel-image {
  max-width: 100%;
  max-height: 250px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.configurator-info-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px 12px;
  line-height: 1;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.configurator-info-carousel-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.configurator-info-carousel-prev {
  left: 0;
}

.configurator-info-carousel-next {
  right: 0;
}

/* Tablet and up (matches the widget's 768px breakpoint) */
@media (min-width: 768px) {
  .configurator-info-panel {
    width: 50%;
  }

  .configurator-info-carousel-image-container {
    min-height: 300px;
  }

  .configurator-info-carousel-image {
    max-height: 400px;
  }

  .configurator-info-carousel-nav {
    font-size: 32px;
    padding: 12px 16px;
  }
}

/* Desktop and up (matches the widget's 1024px breakpoint) */
@media (min-width: 1024px) {
  .configurator-info-panel {
    width: 33.333%;
  }
}