/*
 * Diwali carousel and gift store on the home page (frontend/partials/festive-*.blade.php), loaded only
 * while the festival runs (config store.festive). Mobile first: phone styles are the base, wider
 * screens add to them.
 */

:root { --zl-gold: #ffc23a; --zl-gold-2: #ffe08f; --zl-night: 7, 15, 36; }

/* ───────────────────────── Carousel ───────────────────────── */

.zl-fest { position: relative; isolation: isolate; overflow: hidden; background: #070f24; color: #fff; }

/* A string of festival lights along the top edge */
.zl-fest__lights {
    position: absolute; inset: 0 0 auto; z-index: 3; height: 22px; pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, #ffe08f 0 2px, rgba(255, 194, 58, .45) 3px, transparent 7px) 0 2px / 36px 16px repeat-x,
        radial-gradient(circle at 50% 50%, #ffb07a 0 2px, rgba(255, 122, 47, .4) 3px, transparent 7px) 18px 8px / 36px 16px repeat-x;
    animation: zl-twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes zl-twinkle { from { opacity: .55; } to { opacity: 1; } }

.zl-fest__slide { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 440px; height: auto; }
.zl-fest__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.zl-fest__bg--rangoli { object-position: 85% 50%; }
/* Keeps the text readable: dark at the bottom on phones, on the left from 768px */
.zl-fest__slide::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(var(--zl-night), .1) 0%, rgba(var(--zl-night), .55) 38%, rgba(var(--zl-night), .95) 70%);
}
/* The trust strip below overlaps the bottom 24–30px, so the dots and text sit above that */
.zl-fest__inner { position: relative; width: 100%; padding-block: 96px 66px; }
.zl-fest__copy { max-width: 560px; }

.zl-fest .zi { --zi-line: #0f2257; }
.zl-fest__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; color: var(--zl-gold-2); font-size: .9rem; font-weight: 600; }
.zl-fest__kicker .zi { --zi-line: #fff3d6; --zi-fill: #3d6fd6; --zi-light: #fff; }
.zl-fest__pill { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 194, 58, .5); background: rgba(255, 194, 58, .15); color: #ffe3a1; font-size: .78rem; }
.zl-fest__title { margin: 0 0 8px; color: #fff; font-family: var(--zl-display); font-size: 1.65rem; font-weight: 800; line-height: 1.12; text-wrap: balance; }
.zl-fest__big { margin: 0 0 6px; color: #fff; font-size: 1.05rem; font-weight: 600; }
.zl-fest__big strong {
    font-size: 2.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(90deg, #ffd45e, #ff8a2f); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zl-fest__text { max-width: 30rem; margin: 0 0 16px; color: rgba(255, 255, 255, .86); font-size: .95rem; line-height: 1.5; }

.zl-fest__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.zl-fest__btn { background: linear-gradient(90deg, #ffc23a, #ff8a2f); color: #2b1600; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(255, 138, 47, .85); }
.zl-fest__btn:hover, .zl-fest__btn:focus-visible { color: #2b1600; filter: brightness(1.06); }
.zl-fest__btn--ghost { border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: #fff; }
.zl-fest__btn--ghost:hover, .zl-fest__btn--ghost:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }

.zl-fest__coupon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; padding: 6px 12px; border: 1px dashed rgba(255, 194, 58, .7); border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: .85rem; }
.zl-fest__coupon strong { padding: 0 6px; border-radius: 5px; background: var(--zl-gold); color: #2b1600; }

/* Gift ideas: real products with their prices */
.zl-fest__picks { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.zl-fest__picks li:nth-child(n+3) { display: none; }
.zl-fest__pick {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.zl-fest__pick:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.zl-fest__pick img { flex-shrink: 0; width: 48px; height: 48px; padding: 3px; border-radius: 9px; background: #fff; object-fit: contain; }
.zl-fest__pick > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.zl-fest__pick-name { flex-basis: 100%; overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.zl-fest__pick strong { color: var(--zl-gold); }
.zl-fest__pick small { color: #9ff0b8; font-size: .75rem; font-weight: 600; }

/* Why shop here */
.zl-fest__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.zl-fest__points li { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.zl-fest__points .zi { padding: 3px; border-radius: 10px; background: #fff; }

/* Dots on phones; arrows from 768px */
.zl-fest__dots.swiper-pagination { bottom: 36px !important; }
.zl-fest .swiper-pagination-bullet { width: 8px; height: 8px; background: #fff; opacity: .45; }
.zl-fest .swiper-pagination-bullet-active { width: 24px; border-radius: 4px; background: var(--zl-gold); opacity: 1; }
.zl-fest__nav {
    position: absolute; top: 50%; z-index: 3; display: none; place-items: center; width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transform: translateY(-50%);
}
.zl-fest__nav:hover { background: rgba(255, 255, 255, .22); }
.zl-fest__nav--prev { left: 14px; }
.zl-fest__nav--next { right: 14px; }

/* ───────────────────────── Gift store ───────────────────────── */

.zl-gifts .zl-section__title { display: flex; align-items: center; gap: 8px; }
.zl-gifts__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.zl-gift {
    position: relative; isolation: isolate; display: flex; align-items: center; min-height: 150px; overflow: hidden;
    border-radius: var(--zl-radius-lg); background: #0a1633; color: #fff; text-decoration: none;
}
.zl-gift:hover, .zl-gift:focus-visible { color: #fff; }
.zl-gift__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; transition: transform .4s; }
.zl-gift::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--zl-night), .94) 0%, rgba(var(--zl-night), .6) 52%, rgba(var(--zl-night), .05) 100%); }
.zl-gift__body { display: grid; justify-items: start; gap: 2px; padding: 16px 18px; }
.zl-gift__icon { margin-bottom: 6px; padding: 3px; border-radius: 10px; background: #fff; }
.zl-gift__count { color: var(--zl-gold-2); font-size: .78rem; font-weight: 600; }
.zl-gift__title { font-family: var(--zl-display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.zl-gift__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .88rem; font-weight: 600; }

/* ───────────────────────── Bigger screens ───────────────────────── */

@media (min-width: 768px) {
    .zl-fest__slide { align-items: center; min-height: 440px; }
    .zl-fest__slide::before { background: linear-gradient(90deg, rgba(var(--zl-night), .95) 0%, rgba(var(--zl-night), .8) 36%, rgba(var(--zl-night), .15) 64%, transparent 82%); }
    .zl-fest__bg, .zl-fest__bg--rangoli { object-position: 100% 50%; }
    .zl-fest__inner { padding-block: 56px 76px; }
    .zl-fest__dots.swiper-pagination { bottom: 42px !important; }
    .zl-fest__title { font-size: 2.3rem; }
    .zl-fest__big strong { font-size: 3.2rem; }
    .zl-fest__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zl-fest__picks li:nth-child(n+3) { display: block; }
    .zl-fest__points { max-width: 470px; }
    .zl-fest__nav { display: grid; }

    .zl-gifts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .zl-gift { align-items: flex-end; min-height: 260px; }
    .zl-gift__img { object-position: center; }
    .zl-gift::before { background: linear-gradient(0deg, rgba(var(--zl-night), .94) 8%, rgba(var(--zl-night), .45) 55%, rgba(var(--zl-night), 0) 100%); }
    .zl-gift__body { padding: 20px 22px; }
}

@media (min-width: 1200px) {
    .zl-fest__slide { min-height: 480px; }
    .zl-fest__title { font-size: 2.7rem; }
}

@media (hover: hover) and (pointer: fine) {
    .zl-gift:hover .zl-gift__img { transform: scale(1.05); }
    .zl-gift:hover .zl-gift__cta { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .zl-fest__lights { animation: none; }
    .zl-gift__img { transition: none; }
}