/* 
   CATALOG STYLES (App-like: Uber / DoorDash)
   Handy Express Indiana
*/

:root {
    --bg-app: #f8f9fa;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Softer, native app feel */
    --card-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.12);
    --radius-lg: 12px;
    --radius-sm: 8px;
    --section-gap: 30px;
}

body.catalog-page {
    background-color: var(--bg-app);
    font-family: 'Roboto', sans-serif;
    padding-bottom: 80px;
    /* Space for scrolling */
}

/* Minimal App Header */
.app-header {
    background: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.back-btn {
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
}

.back-btn:active {
    background: #eee;
    transform: scale(0.95);
}

.app-title h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    margin: 0;
    color: var(--red-brand);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Filter Bar */
.category-filter {
    background: white;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 70px;
    /* Below Header */
    z-index: 900;
}

.category-filter::-webkit-scrollbar {
    display: none;
}

.filter-container {
    padding: 0 20px;
    display: flex;
    gap: 10px;
}

.filter-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    background: #f1f1f1;
    color: #555;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.filter-pill.active {
    background: #333;
    /* Dark/Black for "Selected" look like Uber Eats categories */
    color: white;
}

/* Catalog Sections (Horizontal Scrolling) */
.catalog-sections-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}

.catalog-section {
    margin-bottom: var(--section-gap);
    transition: opacity 0.3s ease, height 0.3s ease;
    overflow: hidden;
    /* For smooth hiding */
}

.section-header {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.see-all-link {
    font-size: 0.85rem;
    color: var(--green-brand);
    font-weight: 600;
    text-decoration: none;
}

/* Horizontal Scroll Container */
/* Horizontal Scroll Container (Restoring Slide Functionality) */
.horizontal-scroll-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 0 20px 25px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Premium Card Design (Uber Style) */
.catalog-card {
    min-width: 170px;
    /* Slightly larger than micro, smaller than original 250px */
    max-width: 170px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.catalog-card:active {
    transform: scale(0.98);
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 125px;
    /* Increased from 100px */
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.catalog-card:hover .card-img-wrapper img {
    transform: scale(1.08);
}

.card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--red-brand);
    /* RED ACCENT */
    color: white;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.time-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 20px;
    /* Pill */
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Availability Badge - "Disponible hoy" */
.availability-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(45, 106, 79, 0.95);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(45, 106, 79, 0.3);
    /* Subtle fade-in animation */
    animation: badge-fade-in 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes badge-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.availability-badge i {
    font-size: 6px;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.card-info {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.card-info h3 {
    margin: 0;
    font-size: 0.75rem;
    /* Micro Font */
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.card-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: #666;
}

.card-rating i {
    color: #DE7921;
    /* Amazon Orange */
    font-size: 0.7rem;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    /* Push to bottom */
}

.price-tag {
    font-size: 0.7rem;
    color: #333;
    font-weight: 500;
}

.price-tag strong {
    font-weight: 800;
}

.btn-add-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--red-brand);
    /* Always Red */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.catalog-card:hover .btn-add-mini {
    background: #c91a1a;
    transform: scale(1.1);
}

/* Empty State / Search Results */
.no-results {
    text-align: center;
    padding: 40px 20px;
    display: none;
}

.no-results i {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 15px;
}

/* Desktop Responsiveness */
@media (min-width: 768px) {
    .horizontal-scroll-container {
        display: grid;
        /* Desktop can remain grid or switch to scroll, usually grid is better for desktop but let's keep consistency if requested. Actually usually desktop catalogs are grids. User asked for 'slide para al lado', usually implied for mobile. Let's keep desktop as grid for better space usage. */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        overflow-x: visible;
        flex-wrap: wrap;
    }

    .card-img-wrapper {
        height: 140px;
    }

    .card-info h3 {
        font-size: 0.9rem;
    }
}