/* =====================================================
   Vio Mio Menukaart — frontend styles
   ===================================================== */

html, body { margin: 0; padding: 0; }

/* In reels-modus: alleen de track scrollt, niet de body */
body.reels-mode {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

[x-cloak] { display: none !important; }

/* Tailwind line-clamp fallback */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   Reels-header — minimal overlay over de reel
   ========================================= */
.reels-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.reels-header > * { pointer-events: auto; }

/* =========================================
   REELS VIEW — TikTok/Instagram-style swipe
   ========================================= */
.reels-container {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

.reels-track {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reels-track::-webkit-scrollbar { display: none; }

.reels-slide {
    position: relative;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #0f172a;
    overflow: hidden;
}

.reels-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reels-overlay {
    position: absolute;
    inset: 0;
    color: white;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.4) 35%,
        rgba(0,0,0,0) 60%
    );
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.reels-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

/* Categorie-chip linksbovenin elke product-reel (onder de header) */
.reels-category-chip {
    position: absolute;
    top: 64px;
    left: 12px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.25);
    transition: background 0.15s;
}
.reels-category-chip:hover { background: rgba(255,255,255,0.28); }

/* Play-cue: verschijnt op video's die niet automatisch starten (iOS Low Power Mode etc.) */
.reels-play-cue {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: rgba(0,0,0,0.0);
    transition: background 0.2s;
    border: 0;
    cursor: pointer;
    color: white;
    pointer-events: none;
    opacity: 0;
}
.reels-slide.needs-tap .reels-play-cue {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0,0,0,0.18);
}
.reels-play-cue-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    animation: pulse-cue 2s ease-in-out infinite;
}
@keyframes pulse-cue {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
    50%      { transform: scale(1.06); box-shadow: 0 4px 32px rgba(255,255,255,0.25); }
}

.reels-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s;
}
.reels-btn:hover { background: rgba(255,255,255,0.28); }
.reels-btn:active { transform: scale(0.92); }
.reels-btn span { font-size: 0.65rem; margin-top: 2px; }

/* =========================================
   Brand-gradient — herbruikbare donkere achtergrond
   met subtiele orange + purple glow accenten.
   Gebruik via .bg-brand-gradient of .reels-newsletter-bg.
   ========================================= */
.bg-brand-gradient {
    background:
        radial-gradient(circle at 20% 30%, rgba(249,115,22,0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168,85,247,0.20) 0%, transparent 55%),
        linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
    color: white;
}

/* Newsletter-reel achtergrond (zonder foto) */
.reels-newsletter .reels-overlay {
    background: linear-gradient(135deg, rgba(15,23,42,0.4) 0%, rgba(30,27,75,0.2) 100%);
    align-items: center;
    color: white;
}
.reels-newsletter-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(249,115,22,0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168,85,247,0.20) 0%, transparent 55%),
        linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
}

/* Desktop: max-breedte zoals Instagram */
@media (min-width: 768px) {
    .reels-container {
        max-width: 420px;
        margin: 0 auto;
        height: 100vh;
        height: 100dvh;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
}

/* =========================================
   GRID VIEW — Instagram-stijl tegels (ronder, luchtiger)
   ========================================= */
.ig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

.ig-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #0f172a;
    cursor: pointer;
    border: 0;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ig-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10), 0 12px 32px rgba(15, 23, 42, 0.08);
}
.ig-tile:active {
    transform: translateY(0);
}

.ig-tile-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    z-index: 1;
}
.ig-tile:hover .ig-tile-media {
    transform: scale(1.05);
}

/* .ig-tile-blur is niet meer nodig met object-cover, maar laat staan zodat
   bestaande HTML met deze class niets stukmaakt */
.ig-tile-blur { display: none; }

.ig-tile-overlay {
    position: absolute;
    inset: 0;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.35) 35%,
        rgba(0,0,0,0.0)  60%
    );
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    z-index: 2;
}

.ig-tile-name {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.ig-tile-price {
    font-size: 0.82rem;
    opacity: 0.95;
    margin-top: 0.2rem;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.ig-tile-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    font-size: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ig-tile-badge.is-chef     { background: rgba(251,191,36,0.95); color: #78350f; }
.ig-tile-badge.is-special  { background: rgba(249,115,22,0.95); color: white;   }
.ig-tile-badge.is-popular  { background: rgba(244,63,94,0.95);  color: white;   }

.ig-tile-vid {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 18px;
    height: 18px;
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Special-tegel (ad) — banner over volle breedte */
.ig-tile-ad {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 7;
    border-radius: 24px;
}
.ig-tile-ad .ig-tile-name  { font-size: 1.25rem; }
.ig-tile-ad .ig-tile-price { font-size: 0.9rem;  }

/* Featured: subtiele gouden gloed via ring, geen 2x2 meer */
.ig-tile-featured {
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.85),
        0 1px 3px rgba(15,23,42,0.10),
        0 8px 24px rgba(251,191,36,0.18);
}
.ig-tile-featured:hover {
    box-shadow:
        0 0 0 2px rgba(251,191,36,1),
        0 4px 12px rgba(15,23,42,0.12),
        0 16px 40px rgba(251,191,36,0.25);
}