/*
Theme Name: Hisch OG
Theme URI: https://hisch.at
Description: Modernes, responsives Theme für Hisch OG Baumaschinenverleih (Tailwind CSS)
Author: Hisch OG
Version: 4.0.0
Tags: business, responsive, clean, tailwind
Text Domain: hisch
*/

/* Custom utilities not covered by Tailwind */
html { scroll-behavior: smooth; }
/* Prevent horizontal scroll from translateX scroll-animation offsets */
body { overflow-x: hidden; }

/* Grid items need min-width:0 to allow shrinking below content width on mobile */
.grid > * { min-width: 0; }
/* Gallery main container must clip oversized images */
.gallery-main { overflow: hidden; }
/* Blurred image backdrop — fills letterbox areas with a soft, image-matched background */
.gallery-bg {
  position: absolute;
  inset: -8px; /* extend beyond edges so blur fringe is hidden */
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(0.75) saturate(0.85);
  z-index: 0;
}
/* Ensure images + controls render above the blurred bg (don't override position!) */
.gallery-img, .gallery-prev, .gallery-next, .gallery-counter { z-index: 1; }

/* ── Gallery mobile optimizations ─────────────────────────────────────── */
@media (max-width: 639px) { .gallery-prev, .gallery-next { display: none !important; } }
.gallery-thumbs { scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
/* Dot indicators — positioned inside gallery-main over the blurred bg */
.gallery-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.2s, transform 0.2s; flex-shrink: 0; }
.gallery-dot.active { background: #fff; transform: scale(1.3); }
@media (min-width: 640px) { .gallery-dots { display: none; } }

/* Lucide inline SVG icons */
.hisch-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Theme toggle: moon in light mode, sun in dark mode */
.theme-icon-sun        { display: none; }
.dark .theme-icon-sun  { display: block; }
.dark .theme-icon-moon { display: none; }

/* Prevent icon flicker on hover transitions */
a, button { -webkit-font-smoothing: antialiased; }

.hero-gradient {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
}

.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgb(var(--hisch-accent-rgb, 58 170 53) / 0.13) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Hero mouse-follow spotlight ────────────────────────────────────────── */
#hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background:
    /* Primary: soft accent-coloured cone centered on cursor */
    radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
      rgb(var(--hisch-accent-rgb, 58 170 53) / 0.11),
      transparent 55%),
    /* Secondary: tighter warm-white halo for realism */
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.05),
      transparent 50%);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 2s infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.3s ease forwards; }

.cookie-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* ── Scroll-triggered animations ─────────────────────────────────────── */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anim="left"]  { transform: translateX(-28px); }
[data-anim="right"] { transform: translateX(28px); }
[data-anim="scale"] { transform: scale(0.94) translateY(12px); }
[data-anim].in-view {
  opacity: 1 !important;
  transform: none !important;
}

[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }

/* ── Custom form validation — red borders, no browser popups ─────────── */
.field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.2) !important;
}
.field-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.3) !important;
}
input[type="checkbox"].field-error {
  border-color: #ef4444 !important;
  outline: 2px solid rgba(239,68,68,0.4);
  outline-offset: 1px;
}

/* ── Card image hover zoom ────────────────────────────────────────────── */
.card-img-wrap { overflow: hidden; }
.card-img-wrap img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.card-img-wrap:hover img,
article:hover .card-img-wrap img { transform: scale(1.06); }

/* ── Category filter active state ────────────────────────────────────── */
.kat-filter-active {
  background-color: var(--hisch-accent, #3aaa35) !important;
  color: #fff !important;
}

/* ── Cart badge pop animation ─────────────────────────────────────────── */
@keyframes cart-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-badge-pop { animation: cart-badge-pop 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* ── Cart button states ───────────────────────────────────────────────── */
/* "Aus Anfrage entfernen" — primary variant when item is in cart */
.add-to-cart.cart-btn-remove                { background: #f97316 !important; box-shadow: none !important; }
.add-to-cart.cart-btn-remove:hover          { background: #ea580c !important; }
/* Cart icon glow on add */
@keyframes cart-btn-glow-kf {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58,170,53,0); }
  40%      { box-shadow: 0 0 0 6px rgba(58,170,53,0.4); }
}
.cart-btn-glow { animation: cart-btn-glow-kf 0.6s ease; }


/* ── HischPicker — custom zero-dependency date picker ─────────────────── */
.hpick-pop {
  display: none;
  position: absolute;
  z-index: 9999;
  width: 280px;
  font-family: inherit;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.13), 0 3px 8px rgba(0,0,0,0.07);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.hpick-pop.hpick-open { display: block; }

.hpick-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hisch-primary, #1a1a2e);
  padding: 8px 10px;
}
.hpick-title { color: #fff; font-weight: 600; font-size: 0.9rem; }
.hpick-nav {
  width: 28px; height: 28px;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.75);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.hpick-nav:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: #fff; }
.hpick-nav:disabled { opacity: 0.25; cursor: default; }
.hpick-nav svg { width: 16px; height: 16px; display: block; }

.hpick-wrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8fafc;
  padding: 6px 8px 4px;
}
.hpick-wrow span {
  text-align: center;
  font-size: 0.68rem; font-weight: 600;
  color: #64748b;
  text-transform: uppercase; letter-spacing: 0.03em;
}

.hpick-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 8px;
  gap: 2px;
}
.hpick-day {
  aspect-ratio: 1;
  background: transparent; border: none;
  border-radius: 8px;
  font-size: 0.8rem; color: #374151;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  display: flex; align-items: center; justify-content: center;
  padding: 0; min-height: 0;
}
.hpick-day:hover:not(.hpick-dis):not(.hpick-sel) { background: rgba(58,170,53,0.12); color: #1a2e1a; }
.hpick-today  { box-shadow: inset 0 0 0 1.5px var(--hisch-accent, #3aaa35); color: var(--hisch-accent, #3aaa35); font-weight: 700; }
.hpick-sel    { background: var(--hisch-accent, #3aaa35) !important; color: #fff !important; font-weight: 700; box-shadow: none !important; }
.hpick-dis    { color: #d1d5db; cursor: not-allowed; }
.hpick-other  { color: #c0c9d8; }

/* ── HischPicker dark mode ──────────────────────────────────────────── */
.dark .hpick-pop   { background: #1e293b; border-color: #334155; box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 3px 8px rgba(0,0,0,0.25); }
.dark .hpick-wrow  { background: #1e293b; }
.dark .hpick-wrow span { color: #475569; }
.dark .hpick-day   { color: #e2e8f0; }
.dark .hpick-day:hover:not(.hpick-dis):not(.hpick-sel) { background: rgba(58,170,53,0.18); color: #fff; }
.dark .hpick-today { color: var(--hisch-accent, #3aaa35); }
.dark .hpick-dis   { color: #475569; }
.dark .hpick-other { color: #334155; }

/* ── Mobile backdrop ────────────────────────────────────────────────── */
#hpick-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99998;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#hpick-overlay.active { display: block; }

/* ── Mobile: center picker in viewport ─────────────────────────────────── */
@media (max-width: 639px) {
  .hpick-pop.hpick-open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(300px, calc(100vw - 24px)) !important;
    z-index: 99999 !important;
  }
}

/* ── Gallery Lightbox ────────────────────────────────────────────────── */
#gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
#gallery-lightbox.lb-open { display: flex; }

/* Blurred image backdrop — same technique as .gallery-bg */
#lb-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.45) saturate(0.8);
  z-index: 0;
}

#lb-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  border-radius: 4px;
  display: block;
  position: relative;
  z-index: 1;
}

#lb-close,
#lb-prev,
#lb-next {
  position: absolute;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  line-height: 1;
}
#lb-close:hover, #lb-prev:hover, #lb-next:hover { background: rgba(255, 255, 255, 0.3); }

#lb-close { top: 16px; right: 16px; width: 40px; height: 40px; }
#lb-prev, #lb-next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
#lb-prev { left: 16px; }
#lb-next { right: 16px; }
@media (min-width: 640px) { #lb-prev { left: 28px; } #lb-next { right: 28px; } }

#lb-counter {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* zoom cursor on gallery main */
.gallery-main { cursor: zoom-in; }

/* ── Tilt card effect (applied via JS) ───────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}