/* ========================================================================
   LedAlbum — Dark Stage Lights Theme Override
   Überschreibt die LedKicker-Farben für das Dark Theme
   ======================================================================== */

:root {
  --blue: #a855f7;
  --blue-hover: #9333ea;
  --blue-light: #1f1b2e;
  --blue-hero: #a855f7;
  --brand: #a855f7;
  --accent: #ec4899;
  --red: #ef4444;
  --gold: #fbbf24;
  --green: #22c55e;
  --ink: #ffffff;
  --dark: #ffffff;
  --gray-2: #d4d4d8;
  --gray-3: #a1a1aa;
  --gray-4: #71717a;
  --muted: #a1a1aa;
  --bg: #0a0a0f;
  --bg-alt: #141420;
  --bg-card: #1a1a2e;
  --bg-card-hover: #252540;
  --border: #2a2a3e;
  --line: #2a2a3e;
}

/* Body + base text */
body {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Override specific heading colors from original CSS */
h1, h2, h3, h4 {
  color: #ffffff !important;
}

/* Header sticky */
.site-header, #site-header {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
}

.site-header .logo, .site-header a {
  color: #ffffff !important;
}

/* Promo bar gradient */
.promo-bar {
  background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff) !important;
  color: #ffffff !important;
}

/* Product cards */
.p-card, .bestseller-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.p-card:hover, .bestseller-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2) !important;
}

.p-card-title, .p-card-price {
  color: #ffffff !important;
}

.p-card-old {
  color: var(--gray-3) !important;
}

/* Buttons */
.btn-primary, .btn-atc, button[class*="btn-"] {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover, .btn-atc:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4) !important;
}

/* Variant buttons */
.var-btn {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.var-btn.selected {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.var-btn:hover:not(.selected) {
  border-color: var(--brand) !important;
}

/* Category pills */
.cat-pill, .sort-btn, .filter-pill {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.cat-pill.active, .sort-btn.active, .filter-pill.active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border-color: transparent !important;
}

/* Hero section */
.hero, .shop-gallery-wrap {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
}

/* Product detail page */
.pd {
  background: var(--bg) !important;
}

.pd-title, .pd-price {
  color: #ffffff !important;
}

.pd-accordion summary {
  background: var(--bg-card) !important;
  color: #ffffff !important;
}

.pd-accordion .acc-body {
  background: var(--bg-card) !important;
  color: var(--gray-2) !important;
}

/* Cards in general */
.card, .pd-features, .pd-feat, .pd-badge {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

.pd-feat span {
  color: #ffffff !important;
}

/* Input fields */
input, textarea, select {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--gray-4) !important;
}

/* Search bar */
.shop-search {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.shop-search input {
  background: transparent !important;
  color: #ffffff !important;
}

/* Mobile menu */
.mobile-nav, .mobile-menu {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Footer */
footer, .footer {
  background: #050508 !important;
  color: var(--gray-3) !important;
  border-top: 1px solid var(--border) !important;
}

footer a, .footer a {
  color: var(--gray-2) !important;
}

/* Reviews */
.review-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

/* Video row cards */
.video-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--gray-3) !important;
}

.breadcrumbs a {
  color: var(--gray-2) !important;
}

/* Section titles */
.section-header h2, .bestseller-title {
  color: #ffffff !important;
}

/* Sale badge stays punchy */
.p-card-sale {
  background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
}

/* Wishlist heart */
.p-card-wish {
  background: rgba(10, 10, 15, 0.8) !important;
  color: #ffffff !important;
}

.p-card-wish.active {
  color: #ec4899 !important;
}

/* Cost preview box */
.cost-preview, .pd-bundle-banner {
  background: rgba(168, 85, 247, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
}

/* Gift wrap / Fan bundle cards */
.pd-giftwrap, .fan-bundle, .zubehoer-wrap label {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.pd-giftwrap:hover, .fan-bundle:hover {
  border-color: var(--brand) !important;
}

.pd-giftwrap input:checked ~ div, .fan-bundle input:checked ~ div {
  color: #ffffff !important;
}

/* Price tag green for accessories */
.pd-giftwrap-price, .fan-bundle-price {
  color: var(--green) !important;
}

/* Modal overlays */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

.modal {
  background: var(--bg-card) !important;
  color: #ffffff !important;
}

/* Loading spinner */
.spinner {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-top-color: var(--brand) !important;
}

/* Delivery info */
.pd-delivery {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

/* Viewers social proof */
.pd-viewers {
  color: var(--gray-3) !important;
}

/* Floating cart */
#floating-cart {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Tag for neon glow effect on hover */
.p-card-img img {
  transition: filter 0.3s !important;
}
.p-card:hover .p-card-img img {
  filter: brightness(1.1) saturate(1.2) !important;
}

/* Chat widget dark */
.chat-widget-frame {
  filter: invert(0.92) hue-rotate(180deg);
}

/* ========================================================================
   Additional Dark Overrides — specific white backgrounds in LedKicker CSS
   ======================================================================== */

/* Header search */
.search-wrap, .search-box, #search-input,
.site-header .search-wrap,
.site-header input[type="search"] {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

.site-header .search-wrap input::placeholder,
#search-input::placeholder {
  color: var(--gray-4) !important;
}

/* Hero search form — was white */
.hero-search,
form.hero-search {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

.hero-search input {
  background: transparent !important;
  color: #ffffff !important;
}

.hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.hero-search button {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.hero-search button:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

.hero-search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.hs-item:hover {
  background: var(--bg-card-hover) !important;
}

.hs-item {
  color: #ffffff !important;
  border-color: var(--border) !important;
}

/* Hero primary button — was white */
.hero-btn-primary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.hero-btn-outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* CTA Card — "Deine Band fehlt?" section */
.cta-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2a1a3e 100%) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.cta-card h2, .cta-card p {
  color: #ffffff !important;
}

.cta-card p {
  color: var(--gray-2) !important;
}

/* Footer — was light/dark gradient */
.footer-trust {
  background: #050508 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--gray-2) !important;
}

.footer-main {
  background: #050508 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-top: 1px solid var(--border) !important;
}

.footer-brand p, .footer-col a, .footer-small, .footer-bottom {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-col h4 {
  color: #ffffff !important;
}

.footer-social a {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.footer-social a:hover {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.footer-col a:hover {
  color: #a855f7 !important;
}

/* Gallery arrows */
.gallery-arrow, .thumb-scroll-btn {
  background: rgba(20, 20, 32, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.gallery-arrow:hover, .thumb-scroll-btn:hover {
  background: var(--bg-card-hover) !important;
}

/* Fan bundle card hover */
.fan-bundle {
  background: var(--bg-card) !important;
}

.fan-bundle:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* pd-giftwrap hover (Geschenkverpackung) */
.pd-giftwrap {
  background: var(--bg-card) !important;
}

.pd-giftwrap:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Utility/promo bar */
.utility-bar {
  background: #141420 !important;
  color: var(--gray-3) !important;
  border-bottom: 1px solid var(--border) !important;
}

.utility-inner {
  color: var(--gray-3) !important;
}

/* Hero social proof stars */
.hero-social-proof {
  color: #ffffff !important;
}

.hero-stars {
  color: #fbbf24 !important;
}

/* Status colors stay semantic but dark */
.status-gray { background: rgba(255,255,255,0.1) !important; color: var(--gray-2) !important; }
.status-orange { background: rgba(234,88,12,0.15) !important; color: #fb923c !important; }
.status-red { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

/* Category pills & filter pills - dark */
.category-pills, .sort-controls, .filter-bar {
  background: transparent !important;
}

.cat-pill, .sort-btn, .filter-pill {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--gray-2) !important;
}

.cat-pill:hover, .sort-btn:hover, .filter-pill:hover {
  border-color: var(--brand) !important;
  color: #ffffff !important;
}

/* Section backgrounds */
.usp-section, .reviews-section, .bestseller-section {
  background: transparent !important;
}

.usp-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.usp-card h3 {
  color: #ffffff !important;
}

.usp-card p {
  color: var(--gray-3) !important;
}

.usp-icon {
  background: rgba(168, 85, 247, 0.15) !important;
  color: var(--brand) !important;
}

/* Header search — was white */
.search-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
}

.search-wrapper input {
  color: #ffffff !important;
  caret-color: #a855f7 !important;
}

.search-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.search-wrapper:focus-within {
  border-color: #a855f7 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.search-wrapper .search-icon,
.search-wrapper svg {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Search results dropdown */
.search-results, .search-dropdown, #search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.search-result-item {
  color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

.search-result-item:hover {
  background: var(--bg-card-hover) !important;
}

.search-result-item .price {
  color: var(--brand) !important;
}

/* Product Detail Reviews — dark theme override */
.pd-reviews {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pd-reviews-h {
  color: #ffffff !important;
}

.rev-empty, .rev-count, .rev-bar-label, .rev-bar-count, .rev-empty-filter {
  color: var(--gray-3) !important;
}

.rev-avg {
  color: #ffffff !important;
}

.rev-summary {
  border-bottom-color: var(--border) !important;
}

.stars, .stars .star {
  color: #444 !important;
}

.stars .star.filled {
  color: #fbbf24 !important;
}

.rev-bar-row {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.rev-bar-row:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border) !important;
}

.rev-bar-row.active {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: #fbbf24 !important;
}

.rev-bar {
  background: var(--bg-alt) !important;
}

.rev-bar-fill {
  background: #fbbf24 !important;
}

.rev-filter-row {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
}

.rev-filter-active b {
  color: #fbbf24 !important;
}

.rev-filter-clear {
  background: transparent !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

.rev-filter-clear:hover {
  background: #fbbf24 !important;
  color: #0a0a0f !important;
}

/* Single review cards (in list) */
.rev-card {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.rev-title {
  color: #ffffff !important;
}

.rev-text {
  color: var(--gray-2) !important;
}

.rev-meta {
  color: var(--gray-4) !important;
}

.rev-verified {
  color: #22c55e !important;
}

/* Review images */
.rev-img-thumb {
  border-color: var(--border) !important;
}

.rev-img-thumb:hover {
  border-color: #fbbf24 !important;
}

.rev-img-pv-item {
  border-color: var(--border) !important;
}

/* Review form */
.rev-form-wrap {
  border-top-color: var(--border) !important;
}

.rev-form-toggle {
  background: var(--bg-card) !important;
  border: 2px solid var(--brand) !important;
  color: #ffffff !important;
}

.rev-form-wrap[open] .rev-form-toggle {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.rev-form-label {
  color: #ffffff !important;
}

.rev-form input[type=text],
.rev-form textarea {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.rev-form input[type=text]:focus,
.rev-form textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.rev-form input[type=text]::placeholder,
.rev-form textarea::placeholder {
  color: var(--gray-4) !important;
}

.rev-star-btn {
  color: #444 !important;
}

.rev-star-btn:hover,
.rev-star-btn.hover,
.rev-star-btn.selected {
  color: #fbbf24 !important;
}

.rev-file-btn {
  background: var(--bg-alt) !important;
  border: 1px dashed var(--gray-4) !important;
  color: #ffffff !important;
}

.rev-file-btn:hover {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

.rev-file-hint {
  color: var(--gray-4) !important;
}

.rev-show-more {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--brand) !important;
}

.rev-show-more:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: var(--brand) !important;
}

.rev-form-msg.ok {
  color: #22c55e !important;
}

.rev-form-msg.err {
  color: #f87171 !important;
}

/* Also the homepage reviews carousel */
.review-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.review-text {
  color: var(--gray-2) !important;
}

.review-author strong {
  color: #ffffff !important;
}

.review-author span, .review-meta span {
  color: var(--gray-4) !important;
}

.review-avatar {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.reviews-header h2 {
  color: #ffffff !important;
}

.reviews-nav button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.reviews-nav button:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Cart sidebar / Discount row / Bundle hints */
.discount-row {
  border-top-color: var(--border) !important;
}

.discount-input {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.discount-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.discount-input::placeholder {
  color: var(--gray-4) !important;
}

/* "Einloesen" button */
.discount-apply {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.discount-apply:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

.discount-msg.success,
.ct-row.discount {
  color: #22c55e !important;
}

.discount-msg.error {
  color: #f87171 !important;
}

/* Cart bundle hint "Noch X Artikel dazu" */
.ct-bundle-hint {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #e9d5ff !important;
}

/* "Fuege XY hinzu fuer 10%" / bundle add button */
.ct-bundle-btn, .cart-upsell-btn {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Cart total rows */
.ct-row {
  color: #ffffff !important;
}

.ct-row.total {
  border-top-color: var(--border) !important;
  color: #ffffff !important;
}

.shipping-note {
  color: var(--gray-4) !important;
}

/* Btn-checkout in cart */
.btn-checkout {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.btn-checkout:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Cart overlay + sidebar */
.cart-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.cart-sidebar, #cart-panel {
  background: var(--bg) !important;
  color: #ffffff !important;
  border-left: 1px solid var(--border) !important;
}

.cart-header, .cart-footer {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.cart-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.cart-item-name {
  color: #ffffff !important;
}

.cart-item-variant, .cart-item-meta {
  color: var(--gray-3) !important;
}

.cart-empty {
  color: var(--gray-3) !important;
}

/* Qty buttons in cart */
.cart-qty-btn, .qty-btn {
  background: var(--bg-alt) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.cart-qty-btn:hover, .qty-btn:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Remove item button */
.cart-item-remove, .remove-btn {
  color: var(--gray-3) !important;
}

.cart-item-remove:hover {
  color: #f87171 !important;
}

/* pd-bundle-banner (3x sparen banner) */
.pd-bundle-banner {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.pd-bundle-text strong {
  color: #e9d5ff !important;
}

.pd-bundle-text span {
  color: var(--gray-2) !important;
}

.pd-bundle-icon {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* btn-outline pages */
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}

.btn-outline:hover {
  background: var(--brand) !important;
  color: #ffffff !important;
}

/* Empty state pages */
.empty-state {
  color: var(--gray-2) !important;
}

.empty-state h2 {
  color: #ffffff !important;
}

.empty-state p {
  color: var(--gray-3) !important;
}

/* Konfigurator page wrapper — dark background */
.konfig-page {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Konfigurator embed container */
#led-konfigurator {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
}

/* Konfigurator internal buttons/inputs — broad overrides */
#led-konfigurator button,
#led-konfigurator input,
#led-konfigurator select,
#led-konfigurator textarea,
#led-konfigurator label,
#led-konfigurator h1,
#led-konfigurator h2,
#led-konfigurator h3,
#led-konfigurator p,
#led-konfigurator span,
#led-konfigurator div {
  color: #ffffff !important;
}

#led-konfigurator input,
#led-konfigurator select,
#led-konfigurator textarea {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
}

#led-konfigurator button[type="submit"],
#led-konfigurator .primary-btn,
#led-konfigurator .btn-primary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border: none !important;
  color: #ffffff !important;
}

/* Tracking / Legal page overrides */
.tracking-page, .legal-page {
  background: var(--bg) !important;
  color: #ffffff !important;
}

.tracking-page h1,
.legal-page h1 {
  color: #ffffff !important;
}

.tracking-sub {
  color: var(--gray-3) !important;
}

.f-input {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.f-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.f-input::placeholder {
  color: var(--gray-4) !important;
}

.fg label {
  color: #ffffff !important;
}

/* ========================================================================
   Chat Widget Dark Theme Override (.lk-chat-* classes)
   ======================================================================== */

/* Chat window — main panel */
.lk-chat-window {
  background: #141420 !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Chat body/messages area */
.lk-chat-body, .lk-chat-messages {
  background: #141420 !important;
  color: #ffffff !important;
}

/* Form area (name, email, order number inputs) */
.lk-chat-form,
.lk-chat-prechat,
.lk-chat-start-form {
  background: #141420 !important;
  color: #ffffff !important;
}

/* Input fields */
.lk-chat-input,
.lk-chat-window input,
.lk-chat-window textarea,
.lk-chat-window select {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

.lk-chat-input:focus,
.lk-chat-window input:focus,
.lk-chat-window textarea:focus {
  border-color: #a855f7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.lk-chat-input::placeholder,
.lk-chat-window input::placeholder,
.lk-chat-window textarea::placeholder {
  color: #71717a !important;
}

/* Labels */
.lk-chat-window label,
.lk-chat-label {
  color: #ffffff !important;
  font-weight: 600;
}

/* Bot messages (agent side) */
.lk-chat-msg-bot,
.lk-chat-msg.bot,
.lk-chat-bot-msg {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

/* User messages */
.lk-chat-msg-user,
.lk-chat-msg.user,
.lk-chat-user-msg {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Message sender labels / timestamps */
.lk-chat-msg-meta,
.lk-chat-msg-time,
.lk-chat-timestamp {
  color: #71717a !important;
}

/* Send button */
.lk-chat-send,
.lk-chat-start-btn,
.lk-chat-window button[type='submit'] {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.lk-chat-send:hover,
.lk-chat-start-btn:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Input footer row (send button + attach) */
.lk-chat-footer,
.lk-chat-input-area,
.lk-chat-input-row {
  background: #141420 !important;
  border-top: 1px solid #2a2a3e !important;
}

/* Attach/emoji buttons */
.lk-chat-attach,
.lk-chat-emoji-btn {
  color: #a1a1aa !important;
  background: transparent !important;
}

.lk-chat-attach:hover,
.lk-chat-emoji-btn:hover {
  color: #ffffff !important;
  background: #2a2a3e !important;
}

/* Optional field hint text "Alle Felder sind optional" */
.lk-chat-window p,
.lk-chat-hint,
.lk-chat-small {
  color: #a1a1aa !important;
}

/* Link in chat */
.lk-chat-link {
  color: #a855f7 !important;
}

.lk-chat-link:hover {
  color: #ec4899 !important;
}

/* Product card in chat (when bot shares a product) */
.lk-chat-product,
.lk-chat-product-card {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lk-chat-product-name {
  color: #ffffff !important;
}

.lk-chat-product-price {
  color: #a855f7 !important;
}

/* Image preview in chat */
.lk-chat-preview,
.lk-chat-image-preview {
  background: #1a1a2e !important;
}

/* Typing indicator */
.lk-chat-typing,
.lk-chat-typing-dots {
  color: #a1a1aa !important;
}

/* Scrollbar — subtle dark */
.lk-chat-body::-webkit-scrollbar,
.lk-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.lk-chat-body::-webkit-scrollbar-thumb,
.lk-chat-messages::-webkit-scrollbar-thumb {
  background: #2a2a3e !important;
  border-radius: 3px;
}

.lk-chat-body::-webkit-scrollbar-thumb:hover,
.lk-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #3a3a4e !important;
}

/* Avatar (if any) */
.lk-chat-avatar {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Header already has primary color from chat_primary_color setting — keep */
/* But ensure the X close button is visible */
.lk-chat-header button,
.lk-chat-close {
  color: #ffffff !important;
  background: transparent !important;
}

.lk-chat-header button:hover,
.lk-chat-close:hover {
  background: rgba(255,255,255,0.2) !important;
}

/* Remove any default white body background from parent-reset */
.lk-chat-container {
  background: transparent !important;
}

/* ========================================================================
   Konfigurator Widget (.lr-* classes) — override hardcoded whites
   ======================================================================== */

.lr-url-input {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-url-input::placeholder {
  color: #71717a !important;
}

.lr-url-input:focus {
  border-color: #a855f7 !important;
}

.lr-option-card {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-option-card:hover {
  background: #252540 !important;
  border-color: #a855f7 !important;
}

.lr-option-card.selected {
  background: #2a1a3e !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
}

/* Any other .lr-* element with hardcoded white */
.lr-upload-area,
.lr-upload-tab,
.lr-step,
.lr-preview,
.lr-summary-row,
.lr-config-section,
.lr-price-box,
.lr-file-btn {
  background: #141420 !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-upload-tab {
  background: #1a1a2e !important;
}

.lr-upload-tab.active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Step indicators — numbers 1, 2, 3 */
.lr-step.active,
.lr-step-active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

/* Labels inside konfigurator */
.lr-label, .lr-step-title, .lr-step-subtitle {
  color: #ffffff !important;
}

.lr-step-subtitle, .lr-help-text, .lr-hint {
  color: #a1a1aa !important;
}

/* Upload drop zone */
.lr-dropzone {
  background: #141420 !important;
  border: 2px dashed #2a2a3e !important;
  color: #ffffff !important;
}

.lr-dropzone:hover {
  border-color: #a855f7 !important;
  background: #1a1a2e !important;
}

/* File button */
.lr-file-btn {
  color: #a855f7 !important;
  background: transparent !important;
}

.lr-file-btn:hover {
  color: #ec4899 !important;
}

/* Primary "Weiter"-Button */
.lr-btn-primary, .lr-next-btn, .lr-add-cart-btn {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.lr-btn-primary:hover, .lr-next-btn:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Secondary "Zurück"-Button */
.lr-btn-secondary, .lr-back-btn {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

.lr-btn-secondary:hover, .lr-back-btn:hover {
  background: #252540 !important;
  border-color: #a855f7 !important;
}

/* Summary table */
.lr-summary-row {
  border-bottom: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lr-summary-label {
  color: #a1a1aa !important;
}

.lr-summary-value {
  color: #ffffff !important;
}

.lr-total-row {
  color: #a855f7 !important;
  font-weight: 700;
}

/* Konfigurator — Email capture + step 3 extras */
.lr-email-capture {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 16px !important;
  color: #ffffff !important;
}

.lr-email-capture label {
  color: #ffffff !important;
  font-weight: 600;
}

.lr-email-subtitle,
.lr-email-capture p {
  color: #a1a1aa !important;
  font-size: 0.85rem;
  margin: 4px 0 8px !important;
}

#lr-email-input,
.lr-email-capture input {
  background: #141420 !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  width: 100% !important;
}

#lr-email-input:focus {
  border-color: #a855f7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

#lr-email-input::placeholder {
  color: #71717a !important;
}

/* Konfigurator Step 3 (summary/extras) — force dark */
.lr-extra-card,
.lr-extras-list,
.lr-extras-item,
.lr-addon-card,
.lr-msg,
.lr-msg.success,
.lr-msg.warning {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-msg.success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #86efac !important;
}

.lr-msg.warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

/* Checkbox-style extras on step 3 */
.lr-checkbox-card,
.lr-extra-item,
.lr-toggle-card {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lr-checkbox-card:hover,
.lr-extra-item:hover {
  border-color: #a855f7 !important;
  background: #252540 !important;
}

.lr-checkbox-card.selected,
.lr-extra-item.selected,
.lr-checkbox-card.checked {
  border-color: #a855f7 !important;
  background: #2a1a3e !important;
}

/* Description / Help text */
.lr-desc, .lr-extra-desc, .lr-small {
  color: #a1a1aa !important;
}

/* Price on extra cards */
.lr-extra-price, .lr-price {
  color: #a855f7 !important;
  font-weight: 600;
}

/* Step indicator header */
.lr-step-indicator,
.lr-steps {
  background: transparent !important;
}

/* Total summary box */
.lr-total,
.lr-total-box,
.lr-summary-total {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}