/*
 * ============================================================================
 * CONFIGURATOR WIDGET WERBETECHNIK AUGSBURG STYLES
 *
 * This stylesheet defines brand–specific overrides for the Werbetechnik Augsburg
 * 3D‑Leuchtbuchstaben configurator. It builds on top of the essential and
 * layout styles and simply tweaks the colour palette and a handful of
 * interactions so the widget blends seamlessly into the Lindstädt
 * Werbetechnik website. All functional rules remain in the base files.
 *
 * IMPORTANT: Do not duplicate behavioural CSS here – only override colours
 * and decorative properties. To add another brand theme, follow this
 * structure and adjust the variables below.
 * ============================================================================
 */

/*
 * ---------------------------------------------------------------------------
 * 1. CSS VARIABLES
 *
 * Define the primary and hover colours for the Werbetechnik brand. These
 * variables are referenced throughout the widget for buttons, highlights
 * and form elements. The values below are pulled from the dominant red
 * accent colour found on werbetechnik‑augsburg.de. Adjust them if the
 * website’s colour scheme changes in the future.
 * ---------------------------------------------------------------------------
 */

:root {
  /* Primary brand colour – strong red used across headings and call‑to‑action elements */
  --primary-color: rgb(230, 0, 0);
  /* Darker shade for hover states */
  --primary-color-hover: rgb(180, 0, 0);
  /* Danger colours reused from the neutral theme */
  --danger-color: rgb(220, 53, 69);
  --danger-color-hover: rgb(200, 35, 51);
}

/*
 * ---------------------------------------------------------------------------
 * 2. WERBETECHNIK‑SPECIFIC OVERRIDES
 *
 * The following rules adjust the appearance of interactive components such as
 * buttons, upload areas and carousel thumbnails to use the Werbetechnik
 * colour palette. They mirror the structure of the neutral and Signfex
 * themes while substituting brand colours.
 * ---------------------------------------------------------------------------
 */

/* Custom button hover colour for Werbetechnik brand */
.configurator-widget button:hover {
  background-color: rgb(200, 0, 0);
}

/* Upload hover effect with Werbetechnik brand colour */
.configurator-upload:hover {
  background-color: rgba(230, 0, 0, 0.05);
}

.configurator-upload-dragover {
  background-color: rgba(230, 0, 0, 0.1);
}

/* Carousel thumbnail focus with Werbetechnik brand colour */
.configurator-carousel-thumbnail:focus-visible
  .configurator-carousel-thumbnail-inner {
  box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.8);
}

/* Carousel thumbnail hover with Werbetechnik brand colour */
.configurator-carousel-thumbnail:hover .configurator-carousel-thumbnail-inner {
  border-color: rgba(230, 0, 0, 0.5);
}

.configurator-carousel-thumbnail-active .configurator-carousel-thumbnail-inner {
  box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.25);
}

/* Remove borders from group titles to integrate with page styling */
.configurator-group-title {
  border: none !important;
}

/*
 * Optional typography adjustments: the Werbetechnik site uses a compact
 * sans‑serif typeface. Slightly decrease the base font size so the widget
 * feels harmonious within the surrounding layout. Comment out or modify
 * these values if you need a different scale.
 */
.configurator-widget {
  font-size: 14px;
  line-height: 1.4;
}

/* Ensure the upload instruction text matches the brand colour when hovering */
.configurator-upload-text {
  transition: color 0.2s ease;
}
.configurator-upload:hover .configurator-upload-text {
  color: rgb(200, 0, 0);
}