/**
 * Noble Floors Catalogue Styles
 *
 * Additional styles for the catalogue pages.
 * Most styling is handled through Tailwind utility classes.
 */

/* ==========================================================================
   Filter Sidebar
   ========================================================================== */

/* Custom checkbox styling */
.nf-filter-checkbox {
    @apply w-4 h-4 rounded-sm border-border text-noble-green focus:ring-noble-green focus:ring-offset-0;
}

/* Collapse animation for Alpine.js */
[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   Product Grid
   ========================================================================== */

/* Loading state for AJAX filtering */
.nf-products-loading {
    @apply opacity-50 pointer-events-none;
}

/* Product card hover lift effect */
.nf-product-card {
    @apply transition-all duration-300;
}

.nf-product-card:hover {
    @apply -translate-y-1;
}

/* ==========================================================================
   Gallery Lightbox
   ========================================================================== */

/* Lightbox backdrop */
.nf-lightbox-backdrop {
    backdrop-filter: blur(4px);
}

/* Lightbox navigation buttons */
.nf-lightbox-nav {
    @apply absolute top-1/2 -translate-y-1/2 text-white/80 hover:text-white transition-colors;
}

.nf-lightbox-nav:focus {
    @apply outline-none ring-2 ring-white/50;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

/* Active pagination item */
.nf-pagination-active {
    @apply bg-noble-green text-white border-noble-green;
}

/* Disabled pagination item */
.nf-pagination-disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* ==========================================================================
   Specifications Table
   ========================================================================== */

/* Zebra striping for specs table */
.nf-specs-table tbody tr:nth-child(even) {
    @apply bg-muted/30;
}

/* ==========================================================================
   Mobile Filters
   ========================================================================== */

@media (max-width: 1023px) {
    /* Full-width filter sidebar on mobile */
    .nf-filter-sidebar {
        @apply w-full;
    }

    /* Sticky filter button on mobile */
    .nf-filter-toggle {
        @apply sticky top-0 z-20;
    }
}

/* ==========================================================================
   Search Input
   ========================================================================== */

.nf-catalogue-search {
    @apply w-full px-4 py-2 pr-10 border border-border rounded-sm bg-white;
    @apply focus:outline-none focus:border-noble-green focus:ring-1 focus:ring-noble-green;
}

.nf-catalogue-search::placeholder {
    @apply text-muted-foreground;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.nf-breadcrumb-separator {
    @apply text-muted-foreground/50 mx-2;
}

.nf-breadcrumb-link {
    @apply text-muted-foreground hover:text-noble-green transition-colors;
}

.nf-breadcrumb-current {
    @apply text-foreground font-medium;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide filters and navigation on print */
    .nf-filter-sidebar,
    .nf-pagination,
    .nf-lightbox-backdrop {
        display: none !important;
    }

    /* Full-width product grid on print */
    .nf-products-grid {
        @apply grid-cols-2 gap-4;
    }

    /* Hide interactive elements */
    [x-data] button {
        display: none !important;
    }
}