/* ==========================================================================
   Millat Mart - Shared Components Stylesheet
   File: /assets/css/components.css

   These rules are used by MORE THAN ONE page (product cards, filter
   sidebars, horizontal swipe carousels, order tracking steps, etc.).
   They live here instead of being duplicated into every page-specific
   file. Load this alongside header.css/footer.css on any page that uses
   product cards, filter sidebars, or the order-tracking timeline - see
   the include comment at the top of each page for the exact list.

   Contents:
     1. Product Card & Pricing          (index, category, subcategory,
                                          products, wishlist)
     2. Category Card (generic, reusable card component)
     3. Filter Sidebar (category, subcategory, products)
     4. Product Swipe/Grid Carousel     (index, category)
     5. Shared Layout Utility           (cart, checkout, product,
                                          dashboard, orders)
     6. Order Tracking Timeline         (orders, order_success)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Product Card & Pricing
   -------------------------------------------------------------------------- */
.product-card {
    background: #ffffff;
    border: 1px solid #e3e6e6;
    border-radius: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.product-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #132119;
    line-height: 1.3;
    height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-title a {
    color: inherit;
    text-decoration: none;
}

.product-title a:hover {
    color: #15803d;
}

.price-symbol {
    font-size: 0.75rem;
    vertical-align: super;
    font-weight: 500;
}

.price-main {
    font-size: 1.35rem;
    font-weight: 700;
    color: #132119;
}

.price-fraction {
    font-size: 0.75rem;
    vertical-align: super;
    font-weight: 600;
}

/* Wishlist Heart Button (floats on top of product card images) */
.wishlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e3e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: color 0.15s ease, transform 0.15s ease;
}

.wishlist-btn:hover {
    color: #dc3545;
    transform: scale(1.08);
}

.wishlist-btn.active {
    color: #dc3545;
}

/* "Live viewers" line on product cards + pulse animation on its fire icon */
.product-card .card-body .text-danger.fs-12 {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes pulseGlow {
    0% { opacity: 0.6; }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.6; }
}

.animate-pulse {
    animation: pulseGlow 1.8s infinite ease-in-out;
}

/* Generic elevated card shell, reused wherever a plain white content card is needed */
.custom-card {
    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    box-shadow: var(--card-shadow);
    padding: 20px;
}

/* --------------------------------------------------------------------------
   2. Category Card (generic reusable card component)
   -------------------------------------------------------------------------- */
.category-card {
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
    background: #fff;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,.12) !important;
}

.category-card img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.category-card:hover img {
    transform: scale(1.05);
}

.category-card .card-body {
    padding: 15px;
}

.category-card h6 {
    font-size: 16px;
    margin-bottom: 5px;
}

.category-card small {
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   3. Filter Sidebar (category.php, subcategory.php, products.php)
   On mobile the whole ".filter-card" becomes a slide-in drawer via
   Bootstrap's responsive ".offcanvas-lg" (see products.php / category.php
   markup) - opened from a compact "Filters" button placed next to Sort.
   At >=992px it renders as a normal static sidebar column, unchanged.
   -------------------------------------------------------------------------- */
.filter-card {
    background-color: #ffffff;
    border: 1px solid #e3e6e6;
    border-radius: 6px;
    padding: 1.25rem;
}

.filter-header {
    font-size: 1.05rem;
    font-weight: 700;
    color: #132119;
    border-bottom: 2px solid #22c55e;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.filter-field-group {
    margin-bottom: 1rem;
}

.filter-actions-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
}

/* The "Filters" button that opens the drawer on mobile (hidden on desktop,
   where the sidebar is already visible) */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .filter-toggle-btn,
    .filter-offcanvas-header {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .filter-card {
        border: none;
        border-radius: 0;
        padding: 1rem;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Bootstrap's own offcanvas-lg width default is a bit narrow for a
       form with several fields - widen it slightly on small screens. */
    .offcanvas-lg.filter-offcanvas {
        width: min(340px, 88vw);
    }
    .filter-title {
        display: none; /* the offcanvas header below replaces it on mobile */
    }
}


/* --------------------------------------------------------------------------
   4. Product Swipe/Grid Carousel (index.php home sections, category.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .product-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        padding-bottom: 10px; /* Space for touch momentum */
        margin-right: -1.5rem; /* Bleed to the edge of the screen */
        margin-left: -1.5rem;
        padding-left: 1.5rem;
    }

    .product-scroll-wrapper::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .product-grid-track {
        display: flex;
        gap: 12px; /* Spacing between cards */
        scroll-snap-type: x mandatory;
    }

    .product-item-col {
        /* Forces roughly 2.3 cards to show on screen at once */
        flex: 0 0 42%;
        max-width: 42%;
        scroll-snap-align: start;
    }
}

@media (min-width: 768px) {
    .product-grid-track {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .product-item-col {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. Shared Layout Utility (cart.php, checkout.php, product.php,
      dashboard.php, orders.php)
   -------------------------------------------------------------------------- */
/* Ensures columns allow a sticky element to calculate height relative to the row */
.row.gx-4 {
    align-items: flex-start;
}

/* Generic table polish (cart, checkout, dashboard, orders all use tables) */
.table tbody tr td {
    vertical-align: middle;
}

.table-light {
    background-color: #fcfcfc !important;
}

/* --------------------------------------------------------------------------
   6. Order Tracking Timeline (orders.php, order_success.php)
   -------------------------------------------------------------------------- */
.tracking-steps {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 8px 0 4px;
}
.tracking-step {
    flex: 1;
    text-align: center;
    position: relative;
}
.tracking-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #e9ecef;
    z-index: 0;
}
.tracking-step.done:not(:last-child)::after {
    background: #198754;
}
.tracking-step-dot {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #e9ecef;
}
.tracking-step.done .tracking-step-dot {
    background: #198754;
    color: #fff;
    box-shadow: 0 0 0 1px #198754;
}
.tracking-step.current .tracking-step-dot {
    background: #16a34a;
    color: #1c2b22;
    box-shadow: 0 0 0 1px #16a34a;
}
.tracking-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}
.tracking-step.done .tracking-step-label,
.tracking-step.current .tracking-step-label {
    color: #1c2b22;
}
@media (max-width: 576px) {
    .tracking-step-label { font-size: 10px; }
    .tracking-step-dot { width: 28px; height: 28px; font-size: 12px; }
    .tracking-step:not(:last-child)::after { top: 14px; }
}

/* --------------------------------------------------------------------------
   7. Unique Product Card (shared design)
   Used by: index.php (New Arrivals + homepage Collections, inside a
   horizontal-scroll ".unique-track"), and products.php / category.php
   (the same card markup, inside a normal Bootstrap grid ".row.row-cols-*"
   instead - ".unique-card-slot" simply isn't used there since the grid
   column already controls width). Lives here instead of pages/home.css so
   every page that needs it gets the identical design, per requirement.
   -------------------------------------------------------------------------- */
.unique-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.unique-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 10px;
}

.unique-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.unique-card-slot {
    flex: 0 0 240px;
    min-width: 240px;
    max-width: 240px;
}

@media (min-width: 768px) {
    .unique-card-slot {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 300px;
    }
}

.unique-product-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.unique-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.unique-media-box {
    position: relative;
    width: 100%;
    height: 180px;
    background: #f8f9fa;
    overflow: hidden;
}

@media (min-width: 768px) {
    .unique-media-box {
        height: 220px;
    }
}

.unique-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.unique-product-card:hover .unique-product-img {
    transform: scale(1.05);
}

.unique-badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}

.unique-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
}

.discount-tag {
    background-color: #dc3545;
}

.status-tag {
    background-color: #198754;
}

.unique-content-box {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

@media (min-width: 768px) {
    .unique-content-box {
        padding: 1rem;
    }
}

.unique-product-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.unique-product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
}

.custom-view-btn {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.custom-view-btn:hover {
    background-color: #15803d;
    border-color: #15803d;
    color: #fff;
}

.scroll-arrow-btn {
    background: #fff;
    border: 1px solid #ced4da;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
}

.scroll-arrow-btn:hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

/* Card footer (price + View button): the footer only ever has room for
   both side-by-side on wider cards (desktop grid, homepage carousels at
   >=768px). On narrow cards - the 2-per-row mobile grid on products.php/
   category.php, and small carousel slots - "PKR X.XX" plus a struck-
   through old price plus the button don't fit on one line and previously
   just overlapped. flex-wrap lets the button drop to its own line
   instead, with margin-left:auto keeping it right-aligned either way. */
.unique-card-footer {
    flex-wrap: wrap;
    row-gap: 6px;
}

.unique-card-footer .price-container {
    max-width: 100%;
}

.unique-card-footer .custom-view-btn {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .scroll-arrow-btn,
    .codeb-scroll-arrow-btn {
        display: none !important;
    }
    .unique-track {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-left: 1rem;
    }
    .unique-card-slot {
        scroll-snap-align: start;
    }
}