/* ==========================================
   LIVE LONG PHARMA - Responsive Stylesheet
   Fixes all mobile UI issues
   ========================================== */

/* ---- Global: Prevent horizontal overflow on all screens ---- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- Products & Blogs PAGE grids: regular grid (not carousel) at all sizes ---- */
.products-grid.products-page-grid,
.blogs-grid.blogs-page-grid {
    display: grid !important;
    flex-wrap: unset;
    overflow-x: unset;
    scroll-snap-type: unset;
    -webkit-overflow-scrolling: unset;
    padding: 20px 0 !important;
}

@media (max-width: 768px) {
    .products-grid.products-page-grid,
    .blogs-grid.blogs-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 10px 0 30px !important;
    }
    
    /* ---- Fix 'Late Show' bug: disable scroll reveal on mobile/tablet so items appear instantly ---- */
    .products-page-grid > *,
    .blogs-page-grid > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .products-grid,
    .products-grid.products-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .blogs-grid.blogs-page-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* ---- Fix 'Late Show' bug: disable scroll reveal on mobile so items appear instantly ---- */
    .products-page-grid > *,
    .blogs-page-grid > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Ensure filtered cards use flex layout inside product-card */
.products-grid.products-page-grid .product-card,
.blogs-grid.blogs-page-grid .product-card,
.blogs-grid.blogs-page-grid .blog-card {
    min-width: unset !important;
    scroll-snap-align: unset !important;
    flex-shrink: unset !important;
    transform: none !important;
}

/* ==========================================
   TABLET (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {
    .glass-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Testimonial featured card — reduce scale on tablet */
    .testimonial-card.featured {
        transform: scale(1.02);
    }
}

/* ==========================================
   MOBILE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {

    /* ---- Horizontal Carousels ---- */
    .testimonial-grid,
    .categories-grid {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 12px 4px 28px;
        gap: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .testimonial-grid::-webkit-scrollbar,
    .categories-grid::-webkit-scrollbar {
        display: none;
    }

    /* ---- Universal Products Grid Mobile ---- */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    /* ---- Card Sizing in Carousels ---- */
    .testimonial-card {
        min-width: 82% !important;
        scroll-snap-align: center;
        flex-shrink: 0;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
        /* Reset featured scale that causes overflow on mobile */
        transform: none !important;
    }

    .testimonial-card.featured {
        transform: none !important;
        border-color: var(--sky);
        box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2) !important;
    }

    .testimonial-card.featured:hover {
        transform: translateY(-4px) !important;
    }

    .category-card {
        min-width: 68% !important;
        scroll-snap-align: center;
        flex-shrink: 0;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
        /* Reset hover lift so cards don't overflow when swiping */
        transition: box-shadow 0.3s ease;
    }

    .category-card:hover {
        transform: none;
    }

    .product-card {
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
        min-width: unset !important;
        transform: none !important;
    }

    .nav-links a.nav-cta {
        margin-left: 0;
        margin-top: 8px;
        text-align: center;
        justify-content: center;
    }

    /* ---- Logo Height Mobile ---- */
    .logo-img {
        height: 38px !important;
    }

    .navbar.scrolled .logo-img {
        height: 34px !important;
    }

    /* ---- Hero Section ---- */
    .hero {
        padding: 100px 0 50px;
        text-align: center;
    }

    .hero .container {
        flex-direction: column;
        gap: 30px !important;
    }

    .hero-content {
        flex: none;
        width: 100%;
    }

    .hero-image {
        flex: none;
        width: 100%;
    }

    /* Replace overlapping collage with flat stacked layout on mobile */
    .hero-collage {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px;
        max-width: 100% !important;
    }

    .collage-bg-shape {
        display: none;
    }

    .collage-item {
        position: static !important;
        width: 100% !important;
        height: 220px !important;
        border-width: 4px !important;
        border-radius: 16px !important;
        flex-shrink: 0;
    }

    .item-3 {
        display: none;
    }

    .collage-badge {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        align-self: center;
        margin-top: 8px;
        transform: none !important;
        animation: none !important;
    }

    /* ---- Glass Grid (Why Choose Us) ---- */
    .glass-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Quality Feature in Glass Card ---- */
    .quality-feature.glass-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    /* ---- Timeline Mobile ---- */
    .timeline::before {
        left: 24px;
    }

    .timeline-marker {
        left: 24px;
        transform: translateX(0) !important;
    }

    .timeline-item {
        justify-content: flex-end;
    }

    .timeline-item:hover .timeline-marker {
        transform: scale(1.2) !important;
    }

    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        width: calc(100% - 60px);
        margin: 0 0 0 auto;
    }

    .timeline-item:nth-child(odd) .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -10px;
        right: auto;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid var(--gray-100);
        border-left: 1px solid var(--gray-100);
    }

    /* ---- CTA Banner ---- */
    .cta-banner {
        padding: 40px 20px;
    }

    .cta-banner h2 {
        font-size: 1.7rem;
    }

    .cta-banner p {
        font-size: 0.95rem;
    }

    /* ---- About Page ---- */
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-values {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .about-preview {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-preview-content .features {
        grid-template-columns: 1fr 1fr;
    }

    /* ---- Contact Page ---- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form {
        padding: 24px 20px;
    }

    /* ---- Product Detail ---- */
    .product-detail {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .product-image-main {
        padding: 20px;
        background: var(--sky-pale);
    }

    .product-info h1 {
        font-size: 1.8rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* ---- Gallery ---- */
    #galleryGrid {
        columns: 2 !important;
        column-gap: 12px !important;
    }

    .gallery-item {
        margin-bottom: 12px !important;
    }

    /* ---- Admin Sidebar ---- */
    .drawer.active .sidebar {
        width: 280px;
        left: 0;
        box-shadow: 10px 0 30px rgba(0,0,0,0.15);
    }

    /* ---- Dash Stats Cards ---- */
    .dash-cards {
        grid-template-columns: 1fr !important;
    }

    /* ---- Blogs ---- */
    .blogs-grid {
        grid-template-columns: 1fr !important;
    }

    .blog-card {
        margin-bottom: 20px;
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
    /* ---- Container padding ---- */
    .container {
        padding: 0 16px;
    }

    /* ---- Stats ---- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .stat-item .number {
        font-size: 1.8rem;
    }

    /* ---- Logo Height Small Mobile ---- */
    .logo-img {
        height: 34px !important;
    }

    .navbar.scrolled .logo-img {
        height: 30px !important;
    }

    /* ---- Hero ---- */
    .hero h1 {
        font-size: 1.65rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- Section Headers ---- */
    .section-header h2 {
        font-size: 1.6rem;
    }

    /* ---- Gallery ---- */
    #galleryGrid {
        columns: 1 !important;
    }

    /* ---- About values ---- */
    .about-values {
        grid-template-columns: 1fr;
    }

    .about-preview-content .features {
        grid-template-columns: 1fr;
    }

    /* ---- Quality Feature ---- */
    .quality-feature {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* ---- CTA Banner ---- */
    .cta-banner {
        padding: 32px 16px;
    }

    .cta-banner h2 {
        font-size: 1.4rem;
    }

    .cta-banner .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- Contact form ---- */
    .contact-form {
        padding: 20px 16px;
    }

    /* ---- Filter buttons ---- */
    .filter-buttons {
        gap: 6px;
    }

    .filter-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    /* ---- Page banner ---- */
    .page-banner {
        padding: 90px 0 32px;
    }

    .page-banner h1 {
        font-size: 1.6rem;
    }

    /* ---- Product controls ---- */
    .product-controls {
        flex-direction: column;
        border-radius: var(--radius);
        padding: 14px;
    }

    .search-bar {
        width: 100%;
    }

    .search-bar input {
        background: var(--gray-100);
    }

    .product-controls .filter-buttons {
        width: 100%;
    }

    /* ---- Testimonial card padding on tiny screens ---- */
    .testimonial-card {
        padding: 30px 20px !important;
    }

    /* ---- Animation Safeguard: Auto-reveal hero items ---- */
    .hero-content, .hero-image {
        animation: mobileReveal 0.8s ease forwards;
    }

    @keyframes mobileReveal {
        from { opacity: 0; transform: translate(0, 30px); }
        to { opacity: 1; transform: translate(0, 0); }
    }

    /* ---- Mobile Search & UI Enhancements ---- */
    .search-kbd-badge {
        display: none !important;
    }

    .nav-search-btn {
        padding: 8px 10px;
    }

    .llp-search-modal {
        padding: 60px 12px 12px;
    }

    .llp-search-footer {
        display: none;
    }

    .llp-toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .llp-toast {
        width: 100%;
        font-size: 0.85rem;
    }
}