/**
 * Configurator Modal Werbetechnik Augsburg (WTA) Brand Styles
 *
 * Brand color theme for the wta-popup [configurator-modal] instance, analogous to
 * configurator-modal-signfex.css. Loaded on top of configurator-modal-essential.css.
 *
 * IMPORTANT: unlike a typical "brand" file, most of essential.css's color values are
 * NOT exposed as --configurator-modal-brand-* custom properties - they are hardcoded
 * Signfex green (essential.css effectively doubles as the Signfex default theme for
 * anything other than the product-selection cards and the info panel). This file
 * therefore both (a) defines the --configurator-modal-brand-* variables consumed by
 * essential.css's product-card/info-panel components, and (b) directly overrides
 * every other hardcoded-green selector with its WTA equivalent, relying on cssFiles
 * load order (this file after configurator-modal-essential.css) for the override to
 * win at equal specificity.
 *
 * Color mapping used throughout (per explicit brand direction):
 *   - pastel green borders (#d0e1dc / #e4eedb / #e4f0ed)               -> pastel red
 *   - module group panel backgrounds (#f2f9f7)                        -> light grey
 *     (rgba(118, 118, 118, 0.15) - same grey hue as
 *     .configurator-modal-step-progress-segment for upcoming steps, rgba(118, 118,
 *     118, 0.3), but lighter/less opaque by request) instead of a pastel red tint,
 *     so group panels read as neutral chrome, not a colored box
 *   - green buttons/checkboxes/borders (#324843 / #5f7771 / #4d615c)   -> #e60000 red
 *     (matches the red already used by configurator-widget-werbetechnik-augsburg.css
 *     for the [configurator] widget, so widget and popup stay visually consistent).
 *     This applies to backgrounds, borders, outlines and accent-color only.
 *   - ALL TEXT (headlines, labels, body copy, placeholders, prices, filenames)
 *     -> dark grey #333333, never red, no exceptions - including text that was
 *     previously green via --configurator-modal-brand-primary (product card/tile
 *     titles, prices, info panel button/price text). The --configurator-modal-brand-
 *     primary/-accent variables stay red because essential.css also uses them for
 *     non-text roles (borders, badge backgrounds) - every text-role consumer of
 *     those variables is overridden below with a direct #333333 instead.
 *   - muted grey-green (#7a948d)                                       -> neutral grey
 *     (#767676 - already essential.css's own neutral fallback for --brand-accent)
 *   - the image column's bottom gradient is a plain darkening shadow, not a brand
 *     color - stays neutral black, not red
 *
 * Everything else (errors #d9534f, warnings, neutral greys/whites) is already
 * brand-neutral in essential.css and is left untouched.
 */

:root {
  --configurator-modal-brand-primary: #e60000;
  --configurator-modal-brand-primary-light: #f2cccc;
  --configurator-modal-brand-primary-pale: #fbe4e4;
  --configurator-modal-brand-muted: #767676;
  --configurator-modal-brand-accent: #e60000;
  --configurator-modal-brand-accent-contrast: #ffffff;
  --configurator-modal-brand-checklist-bg: #fbe4e4;
}

/* ==========================================================================
   IMAGE COLUMN
   ========================================================================== */

/* This is a plain darkening shadow behind the thumbnail strip, not a brand
   color - left as essential.css's own neutral black, not overridden to red. */

/* ==========================================================================
   HEAD / STEP PROGRESS / FOOT
   ========================================================================== */

.configurator-modal-step-progress-segment {
  background: rgba(118, 118, 118, 0.3);
}

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

.configurator-modal-foot {
  border-top: 1px solid #f2cccc;
}

.configurator-modal-back {
  color: #333333;
}

.configurator-modal-next,
.configurator-modal-quote-submit {
  background: #e60000;
  color: #ffffff;
}

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

.configurator-modal-price-label {
  color: #767676;
}

.configurator-modal-price,
.configurator-modal-price-amount {
  color: #333333;
}

.configurator-modal-close {
  border: 1px solid #f2cccc;
  color: #333333;
}

/* Current step's title - dark grey, not brand red, per explicit direction that
   headlines stay dark grey while interactive/accent elements turn red. */
.configurator-modal-headline {
  color: #333333;
}

/* ==========================================================================
   INPUT FIELDS (shared across options-fields-buttons/-checkboxes/-classic/
   -panel/-panel-checkboxes/-panel-split)
   ========================================================================== */

.configurator-modal-input::placeholder,
.configurator-modal-quote-input::placeholder,
.configurator-modal-quote-textarea::placeholder {
  color: #767676;
}

.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 {
  color: #767676;
}

.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 {
  color: #333333;
}

/* ==========================================================================
   TOGGLE BUTTONS (displayType: "options-fields-buttons")
   ========================================================================== */

.configurator-modal-module-group--options-buttons {
  background: rgba(118, 118, 118, 0.15);
  border: 1px solid #f2cccc;
}

.configurator-modal-options-button {
  border: 1px solid #f2cccc;
}

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

.configurator-modal-options-button-label {
  color: #333333;
}

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

/* ==========================================================================
   CHECKBOX GRID (displayType: "options-fields-checkboxes")
   ========================================================================== */

.configurator-modal-module-group--options-checkboxes {
  background: rgba(118, 118, 118, 0.15);
  border: 1px solid #f2cccc;
}

.configurator-modal-options-checkbox {
  border: 1px solid #f2cccc;
}

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

.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: #e60000;
  border-color: #e60000;
}

.configurator-modal-options-checkbox-box::after {
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
}

.configurator-modal-options-checkbox-label,
.configurator-modal-classic-checkbox-label {
  color: #333333;
}

.configurator-modal-options-checkbox-sublabel,
.configurator-modal-classic-checkbox-sublabel {
  color: #767676;
}

.configurator-modal-options-checkbox-info,
.configurator-modal-classic-info {
  border: 1.5px solid #767676;
  color: #767676;
}

/* ==========================================================================
   CLASSIC CHECKBOX LIST (displayType: "options-fields-classic")
   ========================================================================== */

.configurator-modal-classic-list {
  border: 1px solid #f2cccc;
}

/* ==========================================================================
   PANEL / PANEL-CHECKBOXES / PANEL-SPLIT
   (displayTypes: "options-fields-panel", "options-fields-panel-checkboxes",
   "options-fields-panel-split")
   ========================================================================== */

.configurator-modal-module-group--options-panel,
.configurator-modal-module-group--options-panel-checkboxes,
.configurator-modal-module-group--options-panel-split {
  background: rgba(118, 118, 118, 0.15);
  border: 1px solid #f2cccc;
}

.configurator-modal-module-group--options-panel .configurator-modal-module-group-description,
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-module-group-description,
.configurator-modal-module-group--options-panel-split .configurator-modal-module-group-description {
  color: #333333;
}

.configurator-modal-panel-list,
.configurator-modal-panel-checkboxes-list {
  border: 1px solid #f2cccc;
}

.configurator-modal-module-group--options-panel .configurator-modal-input-label,
.configurator-modal-module-group--options-panel-checkboxes .configurator-modal-input-label {
  color: #333333;
}

.configurator-modal-panel-split-checkbox-list,
.configurator-modal-panel-split-input-list {
  border: 1px solid #f2cccc;
}

.configurator-modal-panel-split-checkbox-list > .configurator-modal-classic-checkbox {
  border-bottom: 1px solid #f2cccc;
}

.configurator-modal-panel-split-inputs-headline {
  color: #333333;
}

/* ==========================================================================
   IMAGE UPLOAD SECTIONS
   ========================================================================== */

.configurator-modal-upload-section {
  background: rgba(118, 118, 118, 0.15);
  border: 1px solid #f2cccc;
}

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

.configurator-modal-upload-dropzone {
  border: 2px dashed #f2cccc;
}

.configurator-modal-upload-dragover .configurator-modal-upload-dropzone {
  border-color: #e60000;
  background: #fef5f5;
}

.configurator-modal-upload-icon {
  color: #333333;
}

.configurator-modal-upload-instruction {
  color: #333333;
}

.configurator-modal-upload-helper {
  color: #767676;
}

.configurator-modal-upload-preview-filename {
  color: #333333;
}

/* ==========================================================================
   QUOTE FORM
   ========================================================================== */

.configurator-modal-quote-headline {
  color: #333333;
}

.configurator-modal-quote-salutation-button {
  border: 1px solid #f2cccc;
  color: #333333;
}

.configurator-modal-quote-salutation-button.configurator-modal-module-selected {
  background: #e60000;
  border-color: #e60000;
  color: #ffffff;
}

.configurator-modal-quote-input,
.configurator-modal-quote-textarea {
  color: #333333;
}

.configurator-modal-quote-privacy {
  background: rgba(118, 118, 118, 0.15);
  border: 1px solid #f2cccc;
}

.configurator-modal-quote-privacy input[type="checkbox"] {
  accent-color: #e60000;
}

.configurator-modal-quote-privacy-text {
  color: #333333;
  font-size: 13px;
  line-height: 1.15;
}

/* ==========================================================================
   INFO PANEL (Task 163) - fully variable-driven in essential.css, so simply
   repeating configurator-modal-signfex.css's structure with the vars above
   is enough; no new hardcoded hex needed here.
   ========================================================================== */

.configurator-info-panel ul li {
  padding-left: 32px;
}

.configurator-info-panel ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: var(--configurator-modal-brand-checklist-bg);
  border-radius: 9999px;
  color: #333333;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.configurator-info-panel-back-button {
  color: #333333;
  border-color: var(--configurator-modal-brand-primary-light);
}

.configurator-info-panel-back-button:hover {
  background-color: var(--configurator-modal-brand-accent-contrast);
}

.configurator-info-panel-price-box {
  background-color: var(--configurator-modal-brand-accent-contrast);
  border-color: var(--configurator-modal-brand-primary-light);
}

.configurator-info-panel-price-label,
.configurator-info-panel-price-value {
  color: #333333;
}

.configurator-info-panel-price-note {
  color: var(--configurator-modal-brand-muted);
}

/* ==========================================================================
   PRODUCT SELECTION TEXT (displayTypes: "main-product-selection",
   "product-selection") - essential.css colors these via
   --configurator-modal-brand-primary, which stays red for this file's border/
   badge-background roles elsewhere, so the text-role consumers need a direct
   grey override here instead of changing the variable itself.
   ========================================================================== */

.configurator-modal-product-card-title,
.configurator-modal-product-card-subtitle,
.configurator-modal-product-card-price,
.configurator-modal-product-tile-title,
.configurator-modal-product-tile-subtitle {
  color: #333333;
}