/**
 * Catalog listing chrome (category + search) on main.govee-dark.
 * Shell (header / #app / mobile nav) lives in govee-shell.css.
 */

/* Category intro (H1 + description) */
main.govee-dark .govee-listing__intro {
    color: var(--govee-text);
}

main.govee-dark .govee-listing__title {
    color: var(--govee-text) !important;
    font-family: var(--govee-font-sans);
    font-size: var(--govee-text-title);
    font-weight: var(--govee-weight-bold);
    letter-spacing: var(--govee-tracking-heading);
    line-height: var(--govee-leading-tight);
    margin: 0;
}

main.govee-dark .govee-listing__description,
main.govee-dark .govee-listing__description p {
    color: var(--govee-muted) !important;
    line-height: var(--govee-leading-body);
}

/* Search title / suggest */
main.govee-dark .govee-search__title,
main.govee-dark .container > .mt-8 h2,
main.govee-dark .container h2 {
    color: var(--govee-text) !important;
}

main.govee-dark .govee-search__suggest,
main.govee-dark .container .text-gray-600 {
    color: var(--govee-muted) !important;
}

main.govee-dark .govee-search__suggest button,
main.govee-dark .container .text-blue-600 {
    color: var(--govee-cyan) !important;
}

main.govee-dark .container .text-blue-600:hover {
    color: var(--govee-text) !important;
}

/* Cards: separate from page bg */
main.govee-dark .govee-product-card {
    background: var(--govee-card-2) !important;
    border-color: var(--govee-border);
    box-shadow:
        0 0 0 1px rgba(24, 200, 255, 0.06),
        var(--govee-shadow-elevated);
}

main.govee-dark .govee-product-card:hover {
    border-color: rgba(24, 200, 255, 0.4);
    box-shadow:
        0 0 0 1px rgba(24, 200, 255, 0.12),
        var(--govee-shadow-elevated);
}

main.govee-dark .govee-product-card__body {
    background: var(--govee-card-2) !important;
}

main.govee-dark .container {
    color: var(--govee-text);
}

main.govee-dark .container h1,
main.govee-dark .container [role="heading"] {
    color: var(--govee-text) !important;
}

main.govee-dark .container p,
main.govee-dark .container li {
    color: var(--govee-muted);
}

/* Toolbar (no product-card cart — grid actions also use flex+justify-between) */
main.govee-dark button.flex.w-full.max-w-\[200px\],
main.govee-dark .flex.justify-between button:not(.govee-product-card__cart) {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .flex.justify-between .icon-arrow-down,
main.govee-dark .flex.items-center.gap-5 .icon-listing,
main.govee-dark .flex.items-center.gap-5 .icon-listing-fill,
main.govee-dark .flex.items-center.gap-5 .icon-grid-view,
main.govee-dark .flex.items-center.gap-5 .icon-grid-view-fill {
    color: var(--govee-muted) !important;
}

main.govee-dark .flex.items-center.gap-5 .icon-listing-fill,
main.govee-dark .flex.items-center.gap-5 .icon-grid-view-fill {
    color: var(--govee-cyan) !important;
}

main.govee-dark [class*="dropdown"] .bg-white,
main.govee-dark .z-\[1\] .bg-white {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .bg-gray-100 {
    background: var(--govee-card-2) !important;
    color: var(--govee-cyan) !important;
}

/* Filters */
main.govee-dark .panel-side {
    color: var(--govee-text);
    /* Firefox scrollbar (barra vertical blanca = track de journal-scroll) */
    scrollbar-color: var(--govee-border) var(--govee-card);
    scrollbar-width: thin;
}

main.govee-dark .panel-side.journal-scroll::-webkit-scrollbar-track {
    background-color: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
}

main.govee-dark .panel-side.journal-scroll::-webkit-scrollbar-thumb {
    background-color: var(--govee-border) !important;
}

main.govee-dark .panel-side .border-b,
main.govee-dark .panel-side .border-zinc-200 {
    border-color: var(--govee-border) !important;
}

main.govee-dark .panel-side > .flex p,
main.govee-dark .panel-side .font-semibold {
    color: var(--govee-text) !important;
}

/*
 * Contenido del accordion (x-shop::accordion): class "z-10 rounded-lg bg-white".
 * Ese bg-white + texto forzado a --govee-text dejaba opciones ilegibles.
 */
main.govee-dark .panel-side .z-10.rounded-lg.bg-white {
    background: var(--govee-card) !important;
    color: var(--govee-text) !important;
}

/* Lista de opciones (Color, Tamaño, …) */
main.govee-dark .panel-side ul.text-base {
    color: var(--govee-text) !important;
}

main.govee-dark .panel-side ul li label,
main.govee-dark .panel-side .text-gray-900 {
    color: var(--govee-text) !important;
}

main.govee-dark .panel-side .text-gray-600,
main.govee-dark .panel-side .text-gray-700,
main.govee-dark .panel-side .text-xs.text-gray-600 {
    color: var(--govee-muted) !important;
}

main.govee-dark .panel-side .rounded.hover\:bg-gray-100:hover,
main.govee-dark .panel-side li .hover\:bg-gray-100:hover {
    background: var(--govee-card-2) !important;
}

/* Checkboxes (icon font) */
main.govee-dark .panel-side label.icon-uncheck,
main.govee-dark .panel-side label.icon-check-box,
main.govee-dark .panel-side label.text-navyBlue,
main.govee-dark .panel-side .peer-checked\:text-navyBlue:checked + label,
main.govee-dark .panel-side label.peer-checked\:icon-check-box {
    color: var(--govee-cyan) !important;
}

main.govee-dark .panel-side .icon-search {
    color: var(--govee-muted) !important;
}

/* Campo "Buscar" dentro de cada filtro */
main.govee-dark .panel-side input[type="text"],
main.govee-dark .panel-side input[type="search"] {
    background: var(--govee-card-2) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .panel-side input[type="text"]::placeholder,
main.govee-dark .panel-side input[type="search"]::placeholder {
    color: var(--govee-muted) !important;
}

/* Precio: caja / riel / progreso / manijas */
main.govee-dark .panel-side .relative.h-1.w-full.rounded-2xl.bg-gray-200 {
    background: var(--govee-border) !important;
}

main.govee-dark .panel-side .rounded-xl.bg-navyBlue {
    background: var(--govee-cyan) !important;
}

main.govee-dark .panel-side input[type="range"]::-webkit-slider-thumb {
    background: var(--govee-text) !important;
    box-shadow: 0 0 0 2px var(--govee-cyan);
}

main.govee-dark .panel-side input[type="range"]::-moz-range-thumb {
    background: var(--govee-text) !important;
    border: 2px solid var(--govee-cyan);
}

main.govee-dark .panel-side [class*="accordion"],
main.govee-dark .panel-side .last\:border-b-0 {
    border-color: var(--govee-border) !important;
    color: var(--govee-text);
}

/* Load more opciones del filtro */
main.govee-dark .panel-side button.border-gray-300 {
    background: var(--govee-card-2) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

/* Mobile filter / sort bar */
main.govee-dark .fixed.bottom-0.border-t.bg-white,
main.govee-dark .fixed.bottom-0.grid.w-full {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .fixed.bottom-0 .bg-zinc-200 {
    background: var(--govee-border) !important;
}

main.govee-dark .fixed.bottom-0 .icon-filter-1,
main.govee-dark .fixed.bottom-0 [class^="icon-"] {
    color: var(--govee-cyan) !important;
}

/* Filter drawers under main — not mini-cart */
main.govee-dark .fixed.z-\[1000\] {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .fixed.z-\[1000\] .bg-white {
    background: var(--govee-card) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .fixed.z-\[1000\] p,
main.govee-dark .fixed.z-\[1000\] label,
main.govee-dark .fixed.z-\[1000\] span:not([class*="icon-"]) {
    color: var(--govee-text);
}

/* Empty + load more */
main.govee-dark .place-content-center [role="heading"],
main.govee-dark .place-content-center p {
    color: var(--govee-muted) !important;
}

main.govee-dark .secondary-button {
    background: transparent !important;
    border: 1px solid var(--govee-border) !important;
    color: var(--govee-text) !important;
}

main.govee-dark .secondary-button:hover {
    border-color: rgba(24, 200, 255, 0.45) !important;
    color: var(--govee-cyan) !important;
}

main.govee-dark .govee-product-card__cart.secondary-button,
main.govee-dark .govee-product-card__cart,
main.govee-dark .govee-product-card .govee-product-card__actions .govee-product-card__cart {
    background: linear-gradient(90deg, var(--govee-cyan), var(--govee-violet)) !important;
    border: none !important;
    color: var(--govee-bg) !important;
}

main.govee-dark .govee-product-card__cart.secondary-button:hover:not(:disabled),
main.govee-dark .govee-product-card__cart:hover:not(:disabled),
main.govee-dark .govee-product-card .govee-product-card__actions .govee-product-card__cart:hover:not(:disabled) {
    border: none !important;
    color: var(--govee-bg) !important;
    filter: brightness(1.06);
}

main.govee-dark .govee-product-card [data-testid="product-card-out-of-stock"] {
    color: #ff8a9b !important;
}

/*
 * Skeleton / shimmer (Bagisto .shimmer)
 * Grid: components/shimmer/products/cards/grid.blade.php
 * List: components/shimmer/products/cards/list.blade.php
 * Also: categories/view, filters, toolbar placeholders while Vue loads.
 * Scoped to main.govee-dark so home/cart/checkout keep the light #F6F6F6 shimmer.
 */
main.govee-dark .shimmer {
    background-color: var(--govee-card) !important;
    background-image: linear-gradient(
        to right,
        var(--govee-card) 8%,
        var(--govee-card-2) 18%,
        var(--govee-card) 33%
    ) !important;
    background-size: 1250px 100% !important;
    animation-duration: 2.6s;
    animation-name: govee-skeleton-dark;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes govee-skeleton-dark {
    0% {
        background-position: -1250px 0;
    }

    100% {
        background-position: 1250px 0;
    }
}

/* List skeleton: img.bg-zinc-100 inside image placeholder */
main.govee-dark .shimmer img.bg-zinc-100,
main.govee-dark .shimmer .bg-zinc-100 {
    background-color: var(--govee-card-2) !important;
}

/* Soft handoff: real product cards fade in when they replace the skeleton */
@keyframes govee-listing-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

main.govee-dark .govee-product-card {
    animation: govee-listing-fade-in 0.28s ease-out;
}