/* ------------------------------------------------------------------
   Sanash Tech - custom styles layered on top of Tailwind
   ------------------------------------------------------------------ */

:root {
    --navy: #1e3a5f;
    --gold: #fbbf24;
    --sale: #ef4444;
    --alt: #f8fafc;
    --line: #e2e8f0;
}

/* Custom shadows matching index.html design */
.shadow-md2 {
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.14);
}
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(15,23,42,.06);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    color: #0f172a;
    background: #ffffff;
}

h1, h2, h3, h4, .font-heading {
    font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* Hide scrollbars on the horizontal category pill strip */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Clamp helpers (Tailwind's line-clamp needs the plugin in older builds) */
.line-clamp-1, .line-clamp-2, .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Animated brand marquee for the "brands" strip */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-33.333%); }
}
.marquee-track {
    display: flex !important;
    width: max-content !important;
    animation: marquee 60s linear infinite !important;
    will-change: transform;
}
.marquee-track:hover {
    animation-play-state: paused !important;
}

/* --------------------------------------------------------------
   Interactive star rating (product review form)
   The radios are rendered 5-to-1 with the container reversed, so a
   generic sibling selector can fill every star up to the choice.
   -------------------------------------------------------------- */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem;
}

.star-rating input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.star-rating label {
    cursor: pointer;
    color: #cbd5e1;
    line-height: 0;
    transition: color 0.15s ease;
}

.star-rating label svg {
    width: 1.5rem;
    height: 1.5rem;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #f59e0b;
}

.star-rating label:hover svg,
.star-rating label:hover ~ label svg,
.star-rating input:checked ~ label svg {
    fill: #f59e0b;
}

.star-rating input:focus-visible + label {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

/* Fade-in for page content */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.35s ease-out both; }

/* Hero carousel */
.hero-carousel {
    overflow: hidden;
    position: relative;
}
.hero-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}
.hero-carousel-track:active {
    cursor: grabbing;
}
.hero-carousel-track::-webkit-scrollbar {
    display: none;
}
.hero-carousel-slide {
    min-width: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
    pointer-events: none;
}
.hero-carousel-slide a {
    pointer-events: auto;
}
.hero-dot {
    transition: all 0.3s ease;
}

/* Mobile sidebar overlay fade */
#mobile-nav-toggle:checked ~ [aria-hidden="true"] {
    display: block !important;
    animation: fadeIn 0.2s ease-out both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile sidebar slide from right */
#mobile-nav-toggle:checked ~ aside {
    transform: translateX(0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
aside[aria-label="Mobile navigation"] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --------------------------------------------------------------
   Responsive tables (admin panel mobile)
   -------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap table {
    min-width: 640px;
}

/* --------------------------------------------------------------
   Product card — wishlist button
   -------------------------------------------------------------- */
.wish:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
.wish.active {
    color: #ef4444 !important;
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
.wish.active svg {
    fill: #ef4444;
}

/* --------------------------------------------------------------
   Mobile form inputs — bigger touch targets on small screens
   -------------------------------------------------------------- */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 44px;
    }
}

/* Card layout for admin stat cards on very small screens */
@media (max-width: 420px) {
    .stat-card {
        padding: 12px !important;
    }
    .stat-card .stat-value {
        font-size: 1.25rem !important;
    }
}

/* --------------------------------------------------------------
   Invoice / print styles
   -------------------------------------------------------------- */
@media print {
    .no-print,
    header.app-header,
    nav.app-bottom-nav,
    footer.app-footer {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        font-size: 12px;
    }

    .print-page {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    @page {
        size: A4;
        margin: 14mm;
    }
}