/**
 * Custom CSS for gitsdasscho
 * Toast animations, accordion FOUC fixes, icon spacing, and background styling
 */

/* ==========================================================================
   CSS Custom Properties - Centralized theming
   ========================================================================== */

:root {
  /* Background gradients */
  --bg-gradient-start: hsl(210deg 100% 98%);
  --bg-gradient-mid: hsl(220deg 100% 99%);
  --bg-gradient-end: hsl(210deg 100% 98%);

  /* Question mark pattern opacity */
  --pattern-opacity: 0.08;

  /* Landing page gradient (stronger) */
  --landing-gradient-1: hsl(210deg 100% 95%);
  --landing-gradient-2: hsl(220deg 100% 97%);
  --landing-gradient-3: hsl(200deg 100% 94%);
  --landing-pattern-opacity: 0.15;

  /* Accordion */
  --accordion-open-bg: white;

  /* Logos - show in color in both modes */
  --logo-opacity: 0.85;
  --logo-hover-opacity: 1;
}

.dark {
  /* Background gradients */
  --bg-gradient-start: hsl(220deg 50% 6%);
  --bg-gradient-mid: hsl(220deg 40% 8%);
  --bg-gradient-end: hsl(220deg 50% 6%);

  /* Question mark pattern opacity */
  --pattern-opacity: 0.2;

  /* Landing page gradient */
  --landing-gradient-1: hsl(220deg 50% 8%);
  --landing-gradient-2: hsl(210deg 60% 12%);
  --landing-gradient-3: hsl(230deg 50% 10%);
  --landing-pattern-opacity: 0.25;

  /* Accordion */
  --accordion-open-bg: hsl(220deg 20% 18%);

  /* Logos - same color in dark mode */
  --logo-opacity: 0.9;
  --logo-hover-opacity: 1;
}

/* ==========================================================================
   Base styles
   ========================================================================== */

/* Prevent content shift when scrollbar appears/disappears */
html {
  overflow-y: scroll;
}

/* Global background with question mark pattern */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='30' y='35' text-anchor='middle' font-size='24' fill='%233b82f6' opacity='0.08'%3E%3F%3C/text%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
  min-height: 100vh;
}

.dark body,
body.dark {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='30' y='35' text-anchor='middle' font-size='24' fill='%233b82f6' opacity='0.2'%3E%3F%3C/text%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Toast fade animation */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  15% {
    opacity: 1;
    transform: translateY(0);
  }

  85% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ==========================================================================
   Accordion
   ========================================================================== */

/* Hide accordion content by default to prevent flash before UIkit initializes */
.uk-accordion > li:not(.uk-open) > .uk-accordion-content {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Expanded accordion styling */
.uk-accordion > li.uk-open {
  background-color: var(--accordion-open-bg);
  border-radius: 0.5rem;
  padding: 0 1rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

/* ==========================================================================
   Icons
   ========================================================================== */

/* Reserve space for icons before they load to prevent button size flash */
uk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
}

/* ==========================================================================
   Landing page
   ========================================================================== */

.hero-gradient {
  position: relative;
}

.landing-gradient {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='30' y='35' text-anchor='middle' font-size='24' fill='%233b82f6' opacity='0.15'%3E%3F%3C/text%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--landing-gradient-1) 0%, var(--landing-gradient-2) 25%, var(--landing-gradient-3) 50%, var(--landing-gradient-2) 75%, var(--landing-gradient-1) 100%);
  min-height: 100vh;
}

.dark .landing-gradient {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='30' y='35' text-anchor='middle' font-size='24' fill='%233b82f6' opacity='0.25'%3E%3F%3C/text%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--landing-gradient-1) 0%, var(--landing-gradient-2) 25%, var(--landing-gradient-3) 50%, var(--landing-gradient-2) 75%, var(--landing-gradient-1) 100%);
}

/* ==========================================================================
   Retailer logos - shared styles for landing page and dashboard
   ========================================================================== */

.retailer-logo {
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--logo-opacity);
  transition: opacity 0.2s;
}

.retailer-logo:hover {
  opacity: var(--logo-hover-opacity);
}

.crawler-logo {
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--logo-opacity);
  transition: opacity 0.2s;
}

.crawler-logo:hover {
  opacity: var(--logo-hover-opacity);
}

/* Logo images - same for both light and dark mode */
.retailer-logo-brack,
.crawler-logo-brack {
  background-image: url("/brack.svg");
  padding: 12px 0;
  background-origin: content-box;
}

.retailer-logo-digitec,
.crawler-logo-digitec {
  background-image: url("/digitec.png");
}

.retailer-logo-toppreise,
.crawler-logo-toppreise {
  background-image: url("/toppreise.png");
}

.retailer-logo-wog,
.crawler-logo-wog {
  background-image: url("/wog.png");
}

/* ==========================================================================
   Accessibility - Color contrast fixes
   ========================================================================== */

/* Availability badges - fixed width for consistent alignment */
.availability-badge {
  min-width: 6.5rem;
  text-align: center;
}

/* Fix secondary label contrast for WCAG AA compliance
   WCAG AA requires 4.5:1 contrast ratio for normal text */
.uk-label.uk-label-secondary {
  background-color: hsl(220deg 15% 40%) !important;
  color: #fff !important;
}

.dark .uk-label.uk-label-secondary {
  background-color: hsl(220deg 20% 50%) !important;
  color: #fff !important;
}