/* Auto-generated Theme CSS - Do not edit manually */
/* Generated: 2025-12-04 20:47:02 */
/* Config Editor: http://localhost:5001/theme_editor */
/* Version: 2.0 */

:root {
  /* Result Items */
  --theme-color-white: #fafafa;
  --theme-color-black: #1b1b1d;
  --theme-color-blue: #1d5c9f;
  --theme-color-default: #4a5568;

  /* Loader */
  --loader-bg: rgba(0, 0, 0, 0.7);
  --loader-spinner-bg: rgba(255, 255, 255, 0.3);
  --loader-spinner-top: #fff;
  --loader-text-color: white;
  --loader-heart-fill: #ff0000;
  --loader-heart-stroke: white;

  /* Transition Loader */
  --transition-loader-bg: rgba(255, 255, 255, 0.95);
  --transition-loader-spinner-border: #e5e7eb;
  --transition-loader-spinner-top: #3b82f6;
  --transition-loader-text-color: #4b5563;

  /* Mobile Tabs */
  --mobile-tab-bar-bg: #f8f9fa;
  --mobile-tab-bar-border: #49a3fd;
  --mobile-tab-link-bg: #4a5568;
  --mobile-tab-link-color: #ffffff;
  --mobile-tab-link-active-bg: #2d3748;
  --mobile-tab-heading-color: #333;
  --color-button-border: #dee2e6;
  --color-button-label-color: #666;
  --color-button-active-border: #007bff;
  --color-button-default-border: #007bff;
  --color-button-star-color: #007bff;

  /* Video & Hero */
  --video-bg: #000;
  --video-overlay-bg: rgba(0, 0, 0, 0.4);
  --hero-card-bg: transparent;
  --search-input-bg: #fff;
  --search-input-border: #ddd;
  --search-input-color: #333;
  --search-input-placeholder: #999;
  --search-button-bg: #007bff;
  --search-button-color: #fff;
  --search-button-hover-bg: #0056b3;

  /* Results */
  --message-box-bg: #f8d7da;
  --message-box-color: #721c24;
  --message-box-border: #f5c6cb;
  --map-container-bg: #fff;

  /* Category Panel */
  --category-panel-bg: #fff;
  --category-panel-border: #ddd;
  --category-panel-heading-color: #333;
  --category-panel-button-bg: #007bff;
  --category-panel-button-cancel-bg: #6c757d;

  /* Mockup */
  --mockup-container-bg: #f8f9fa;

  /* Result Items Extended */
  --result-item-border: #ddd;
  --result-item-hover-shadow: 0 4px 12px rgba(0,0,0,0.15);
  --result-item-image-bg: #4a5568;

  /* Popup */
  --popup-overlay-bg: rgba(0, 0, 0, 0.85);
  --popup-content-bg: #333;
  --popup-content-border-radius: 8px;
  --popup-content-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  --popup-close-color: #999;
  --popup-close-hover-color: #fff;
  --popup-cart-button-bg: #28a745;
  --popup-cart-button-hover-bg: #218838;

  /* Event Popup */
  --event-popup-overlay-bg: rgba(0, 0, 0, 0.7);
  --event-popup-container-bg: #fff;
  --event-popup-container-border: #ddd;
  --event-popup-close-color: #333;
}

/* Mobile Background Tab Buttons */
.color-button[data-color="white"] {
  background: var(--theme-color-white) !important;
  background-color: var(--theme-color-white) !important;
}

.color-button[data-color="black"] {
  background: var(--theme-color-black) !important;
  background-color: var(--theme-color-black) !important;
}

.color-button[data-color="blue"] {
  background: var(--theme-color-blue) !important;
  background-color: var(--theme-color-blue) !important;
}

.color-button[data-color="default"] {
  background: var(--theme-color-default) !important;
  background-color: var(--theme-color-default) !important;
}

/* Popup Fabric Classes - Dynamic fabric texture patterns */
.popup-content.fabric-light {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #fafafa 0px,
                #fafafa 1px,
                #fafafa 1px,
                #fafafa 2px,
                #ededed 2px,
                #ededed 3px,
                #fafafa 3px,
                #fafafa 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(250, 250, 250, 0.8) 0px,
                rgba(250, 250, 250, 0.8) 1px,
                rgba(237, 237, 237, 0.8) 1px,
                rgba(237, 237, 237, 0.8) 2px,
                rgba(250, 250, 250, 0.8) 2px,
                rgba(250, 250, 250, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #fafafa 0px, #fafafa 2px),
            #fafafa;
  color: #333;
}

.popup-content.fabric-dark {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #1b1b1d 0px,
                #1b1b1d 1px,
                #262628 1px,
                #262628 2px,
                #19191b 2px,
                #19191b 3px,
                #1b1b1d 3px,
                #1b1b1d 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(38, 38, 40, 0.8) 0px,
                rgba(38, 38, 40, 0.8) 1px,
                rgba(25, 25, 27, 0.8) 1px,
                rgba(25, 25, 27, 0.8) 2px,
                rgba(49, 49, 51, 0.8) 2px,
                rgba(49, 49, 51, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #262628 0px, #1b1b1d 2px),
            #1b1b1d;
  color: #f9fafb;
}

.popup-content.fabric-blue {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #1d5c9f 0px,
                #1d5c9f 1px,
                #2864a3 1px,
                #2864a3 2px,
                #1b5797 2px,
                #1b5797 3px,
                #1d5c9f 3px,
                #1d5c9f 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(40, 100, 163, 0.8) 0px,
                rgba(40, 100, 163, 0.8) 1px,
                rgba(27, 87, 151, 0.8) 1px,
                rgba(27, 87, 151, 0.8) 2px,
                rgba(51, 108, 168, 0.8) 2px,
                rgba(51, 108, 168, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #2864a3 0px, #1d5c9f 2px),
            #1d5c9f;
  color: #f9fafb;
}

.popup-content.fabric-default {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #4a5568 0px,
                #4a5568 1px,
                #535d6f 1px,
                #535d6f 2px,
                #465062 2px,
                #465062 3px,
                #4a5568 3px,
                #4a5568 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(83, 93, 111, 0.8) 0px,
                rgba(83, 93, 111, 0.8) 1px,
                rgba(70, 80, 98, 0.8) 1px,
                rgba(70, 80, 98, 0.8) 2px,
                rgba(92, 102, 119, 0.8) 2px,
                rgba(92, 102, 119, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #535d6f 0px, #4a5568 2px),
            #4a5568;
  color: #f9fafb;
}

/* Color Button Classes - Dynamic fabric texture patterns */
.color-button.light {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #fafafa 0px,
                #fafafa 1px,
                #fafafa 1px,
                #fafafa 2px,
                #ededed 2px,
                #ededed 3px,
                #fafafa 3px,
                #fafafa 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(250, 250, 250, 0.8) 0px,
                rgba(250, 250, 250, 0.8) 1px,
                rgba(237, 237, 237, 0.8) 1px,
                rgba(237, 237, 237, 0.8) 2px,
                rgba(250, 250, 250, 0.8) 2px,
                rgba(250, 250, 250, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #fafafa 0px, #fafafa 2px),
            #fafafa;
}

.color-button.dark {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #1b1b1d 0px,
                #1b1b1d 1px,
                #262628 1px,
                #262628 2px,
                #19191b 2px,
                #19191b 3px,
                #1b1b1d 3px,
                #1b1b1d 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(38, 38, 40, 0.8) 0px,
                rgba(38, 38, 40, 0.8) 1px,
                rgba(25, 25, 27, 0.8) 1px,
                rgba(25, 25, 27, 0.8) 2px,
                rgba(49, 49, 51, 0.8) 2px,
                rgba(49, 49, 51, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #262628 0px, #1b1b1d 2px),
            #1b1b1d;
}

.color-button.blue {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #1d5c9f 0px,
                #1d5c9f 1px,
                #2864a3 1px,
                #2864a3 2px,
                #1b5797 2px,
                #1b5797 3px,
                #1d5c9f 3px,
                #1d5c9f 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(40, 100, 163, 0.8) 0px,
                rgba(40, 100, 163, 0.8) 1px,
                rgba(27, 87, 151, 0.8) 1px,
                rgba(27, 87, 151, 0.8) 2px,
                rgba(51, 108, 168, 0.8) 2px,
                rgba(51, 108, 168, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #2864a3 0px, #1d5c9f 2px),
            #1d5c9f;
}

.color-button.default {
  background: 
            /* Komplexe Webstoff-Textur */
            repeating-linear-gradient(
                0deg,
                #4a5568 0px,
                #4a5568 1px,
                #535d6f 1px,
                #535d6f 2px,
                #465062 2px,
                #465062 3px,
                #4a5568 3px,
                #4a5568 4px
            ),
            repeating-linear-gradient(
                90deg,
                rgba(83, 93, 111, 0.8) 0px,
                rgba(83, 93, 111, 0.8) 1px,
                rgba(70, 80, 98, 0.8) 1px,
                rgba(70, 80, 98, 0.8) 2px,
                rgba(92, 102, 119, 0.8) 2px,
                rgba(92, 102, 119, 0.8) 3px
            ),
            radial-gradient(circle at 50% 50%, #535d6f 0px, #4a5568 2px),
            #4a5568;
}