/**
 * HomeSe V2 Homepage Styles
 * Ported from React V2 Home.tsx design (19 May 2026)
 */

/* ────────────────────────────────────────────────
   HERO SECTION — radial gradient glows
   ──────────────────────────────────────────────── */
.hero-v2 {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 3.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 10% 15%, rgba(125, 0, 31, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 70% 60% at 90% 85%, rgba(125, 0, 31, 0.28) 0%, transparent 70%),
        linear-gradient(135deg, #fdf2f4 0%, #fff5f7 30%, #ffffff 60%, #fef1f3 100%);
}

@media (min-width: 768px) {
    .hero-v2 {
        padding-top: 8rem;
        padding-bottom: 6rem;
    }
}

/* ────────────────────────────────────────────────
   STORE CARD V2 — new card design
   ──────────────────────────────────────────────── */
.store-card-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.store-card-v2:hover {
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.15);
}

/* Top section: info + social buttons side by side.
   Fixed height so card top is always the same size regardless of content length. */
.store-card-v2-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    height: 100px;
    overflow: hidden;
}

/* Info area (name, chef, location, specialties) */
.store-card-v2-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Top: 2px breathing room. Bottom: 18px matches the empty space below the
       Instagram button (100px section - 82px buttons = 18px), so space-between
       only distributes ~4px between chef and location instead of ~14px. */
    padding: 2px 0 18px;
}

.store-card-v2-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.store-card-v2-name {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    /* single line truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
    margin: 0;
}

.store-card-v2-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s;
}

.store-card-v2-verified:hover {
    transform: scale(1.1);
}

.store-card-v2-chef {
    color: #7D001F;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-card-v2-meta {
    margin-top: 6px;
}

.store-card-v2-location {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.store-card-v2-specialties {
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px 0 0;
}

/* Social button column */
.store-card-v2-social {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 116px;
    flex-shrink: 0;
}

.store-card-v2-social-btn {
    width: 100%;
    height: 38px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    padding: 0 8px;
}

.store-card-v2-social-btn:active {
    transform: scale(0.98);
}

.store-card-v2-whatsapp {
    background: #EAF7EB;
}

.store-card-v2-instagram {
    background: #F7EAF2;
}

/* Invisible placeholder keeps the social column height consistent
   when a store has only one social link (or none). */
.store-card-v2-social-placeholder {
    width: 100%;
    height: 38px;
    visibility: hidden;
}

/* Image grid — 4 equal square cells, shape consistent across all screen sizes */
.store-card-v2-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.store-card-v2-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
}

.store-card-v2-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* Logo cell: slight border */
.store-card-v2-img-logo img {
    border: 1px solid #f1f5f9;
}

/* See More overlay */
.store-card-v2-see-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-card-v2-see-more-overlay span {
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* ────────────────────────────────────────────────
   LISTING GRID — spacing tweaks
   ──────────────────────────────────────────────── */
#storesContainer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    #storesContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 3rem;
        align-items: start;
    }

    /* Prevent any card's content from inflating its grid column wider than 1fr.
       Without this, a card with wider minimum content pushes its column bigger,
       leaving the other column narrower — causing unequal card and image sizes. */
    .store-listing-item {
        min-width: 0;
    }
}

/* Remove old separator on desktop (grid gap handles spacing) */
@media (min-width: 768px) {
    .store-listing-separator {
        display: none;
    }
}

/* ────────────────────────────────────────────────
   FOOTER V2 — left-aligned
   ──────────────────────────────────────────────── */
.footer-v2 {
    display: none;
    background: #f8fafc;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

@media (min-width: 768px) {
    .footer-v2 {
        display: block;
    }
}

.footer-v2-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.footer-v2-logo {
    margin-bottom: 2rem;
}

.footer-v2-logo img {
    height: 18px;
}

.footer-v2-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-v2-links a,
.footer-v2-links button {
    font-size: 0.875rem;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: color 0.15s;
    padding: 0;
}

.footer-v2-links a:hover,
.footer-v2-links button:hover {
    color: #10B981;
}

.footer-v2-contact {
    margin-bottom: 1.5rem;
}

.footer-v2-contact p {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px;
}

.footer-v2-contact a {
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
}

.footer-v2-contact a:hover {
    color: #10B981;
}

.footer-v2-copyright {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.footer-v2-copyright p {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

/* ────────────────────────────────────────────────
   DESKTOP HEADER — filter button in search bar area
   ──────────────────────────────────────────────── */
.header-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    font-family: 'Poppins', sans-serif;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.header-filter-btn:hover {
    background: #f8fafc;
}

.header-filter-btn.active {
    border-color: #7D001F;
    background: rgba(125, 0, 31, 0.08);
    color: #7D001F;
}

.header-filter-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #7D001F;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Slide-in animation for header search */
#headerSearchDesktop {
    transition: opacity 0.2s ease;
}

/* Slide-up animation (for bottom sheets) */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* ────────────────────────────────────────────────
   SHIMMER / LAZY LOAD SYSTEM
   ──────────────────────────────────────────────── */

/* The sweep gradient keyframe */
@keyframes shimmer-sweep {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Base shimmer: applied to any element that needs a pulsing placeholder */
.shimmer {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 37%,
        #f0f0f0 63%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 1.4s ease infinite;
}

/* Image wrapper: shows shimmer while image is loading */
.img-shimmer {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 1.4s ease infinite;
}

/* Image starts invisible so the shimmer shows through */
.img-shimmer img {
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

/* Once JS adds .img-loaded, the image fades in and shimmer stops */
.img-shimmer.img-loaded {
    background: none;
    animation: none;
}

.img-shimmer.img-loaded img {
    opacity: 1;
}

/* ────────────────────────────────────────────────
   CARD SKELETON — shimmer placeholders while loading
   ──────────────────────────────────────────────── */
.card-skeleton {
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.07);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card-skeleton-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.card-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-skeleton-line {
    border-radius: 6px;
}

.card-skeleton-line.h-5   { height: 20px; }
.card-skeleton-line.h-3   { height: 12px; }
.card-skeleton-line.h-2   { height: 8px;  }
.card-skeleton-line.w-3-4 { width: 75%;   }
.card-skeleton-line.w-1-2 { width: 50%;   }
.card-skeleton-line.w-1-3 { width: 33%;   }

.card-skeleton-social {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 116px;
    flex-shrink: 0;
}

.card-skeleton-btn {
    width: 100%;
    height: 38px;
    border-radius: 12px;
}

.card-skeleton-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.card-skeleton-img {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
}