/* =========================================================
   WORKBOOKS MODULE CSS
   Extracted workbook-specific styles from site.css so they
   can be maintained separately (cards, gallery, modals).
========================================================= */

/* Card rounded / workbook card */
.card-rounded {
    border-radius: 1rem !important;
    overflow: hidden;
}

/* Clamp description to 2 lines on cards */
.card-description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #6c757d;
}

.img-placeholder {
    background-color: #e9ecef; /* light gray */
    height: 180px;
    object-fit: cover;
}

/* Hover lift effect */
.card-hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover-lift:hover {
    transform: translateY(-5px); /* slightly lift */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* subtle shadow */
}

/* Card Titles */
.card h5.card-title {
    font-family: var(--font-family);
    font-weight: 600; /* semi-bold */
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

/* Card Description */
.card .card-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.9rem;
    color: #6c757d; /* muted gray */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small labels like Grade / Subject / Pages */
.card .badge, .card .card-subtext {
    font-family: var(--font-family);
    font-size: 0.79rem;
    font-weight: 500;
}

.workbook-card .add-to-cart-btn {
    height: 38px; /* consistent height */
    text-align: center;
    white-space: nowrap; /* prevents text wrap */
}

@media (max-width: 576px) {
    .workbook-card .add-to-cart-btn {
        width: 100%;
    }
}

/* Gallery and modal specific helpers (used by workbook JS and views) */
.workbook-gallery { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.workbook-thumb { width:200px; height:270px; object-fit:cover; border-radius:6px; border:1px solid #e9ecef; }
.workbook-thumb-small { width:120px; height:162px; object-fit:cover; border-radius:6px; border:1px solid #e9ecef; }
.workbook-meta { gap:12px; display:flex; flex-wrap:wrap; align-items:center; }
.workbook-meta .badge { background:#f8f9fa; color:#212529; border:1px solid #e9ecef; }
.thumb-wrapper { position:relative; display:inline-block; }
.thumb-zoom { position:absolute; right:8px; top:8px; background:rgba(0,0,0,0.45); color:#fff; padding:4px 6px; border-radius:4px; font-size:14px; display:flex; align-items:center; }

@media (max-width: 576px) {
    .workbook-gallery { overflow-x:auto; gap:12px; }
    .workbook-thumb { width:140px; height:190px; }
    .workbook-thumb-small { width:90px; height:120px; }
}

/* Modal/carousel helpers (global modal lives in _Layout) */
#globalImageModal .modal-body { background: transparent; }
#globalImageModal .carousel-item { display:flex; justify-content:center; align-items:center; min-height:60vh; }
#globalImageModal .slide-content { background: transparent; padding: 6px; border-radius: 6px; box-shadow: none; }
#globalImageModal .carousel-image { max-height:85vh; width:auto; height:auto; display:block; touch-action: none; }
#globalImageModal .zoom-controls { position:absolute; right:12px; top:12px; z-index:1050; display:flex; gap:6px; }
#globalImageModal .btn-close, #localImageModal .btn-close { z-index: 3000; pointer-events: auto; }
#globalImageModal .zoom-controls button { background: rgba(255,255,255,0.9); border:1px solid #e9ecef; }
#globalImageModal .carousel-control-prev, #globalImageModal .carousel-control-next { z-index: 1040; }

.purchase-card {
    border-radius: 14px;
    border: 1px solid #e9ecef;
    background: white;
}

.carousel-image {
    width: 100%;
    height: 75vh; /* consistent viewport-based height */
    object-fit: contain; /* prevents cropping */
    /*background: #fff;*/ /* clean “Amazon-like” backdrop */
}
/* =========================================================
   WORKBOOK CARD IMAGE (FIX ALIGNMENT + CONSISTENCY)
========================================================= */

/* =========================================================
   WORKBOOK CARD IMAGE - FINAL OVERRIDE SAFE VERSION
========================================================= */
/* =========================================================
   WORKBOOK CARD IMAGE - FINAL STABLE VERSION
========================================================= */

/* =========================================================
   PRODUCT CARD IMAGE SYSTEM (UNIFIED) — Quillstone Version C
========================================================= */

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-secondary-tint);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(30, 67, 86, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 26px rgba(30, 67, 86, 0.12);
        border-color: var(--color-secondary);
    }

.product-card-image {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

    .product-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
        transition: transform 0.25s ease;
    }
    /* Hover effect */
    .product-card:hover .product-card-img {
        transform: scale(1.03);
    }
    /* ================================
   DETAIL PAGE - ISOLATED STYLES
================================ */
    .workbook-gallery--detail {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .workbook-thumb--detail {
        width: 200px;
        height: 270px;
        object-fit: contain;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        background: #fff;
    }

    .workbook-thumb-small--detail {
        width: 120px;
        height: 162px;
        object-fit: contain;
        border-radius: 6px;
        border: 1px solid #e9ecef;
    }

    .workbook-meta--detail {
        gap: 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
        /* IMPORTANT: scoped badge styling */
        .workbook-meta--detail .badge {
            background: #f8f9fa;
            color: #212529;
            border: 1px solid #e9ecef;
        }

    .thumb-wrapper--detail {
        position: relative;
        display: inline-block;
    }

    .thumb-zoom--detail {
        position: absolute;
        right: 8px;
        top: 8px;
        background: rgba(0,0,0,0.45);
        color: #fff;
        padding: 4px 6px;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    /* RESPONSIVE */
    @media (max-width: 576px) {
        .workbook-gallery--detail {
            overflow-x: auto;
            gap: 12px;
        }

        .workbook-thumb--detail {
            width: 140px;
            height: 190px;
        }

        .workbook-thumb-small--detail {
            width: 90px;
            height: 120px;
        }
    }
    /* ================================
   PURCHASE BLOCK 
================================ */

    .workbook-purchase-card {
        border-radius: 14px;
        /* Sticky offset/stacking, moved out of an inline style. top:90px
           clears the ~74px site header (.site-header) with room to spare.
           z-index is set below .site-header's Bootstrap .sticky-top value
           (1020) so the header always paints on top of this panel during
           the scroll transition, rather than the panel briefly sliding
           over it (both elements share the same default z-index via
           .sticky-top otherwise, and this one is later in DOM order). */
        position: sticky;
        top: 90px;
        z-index: 1010;
    }
    /* Trust strip (clean inline row) */
    .workbook-trust-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.8rem;
        color: #6c757d;
    }
    /* Option cards */
    .workbook-option-card {
        padding: 14px;
        border-radius: 10px;
        border: 1px solid #e9ecef;
        background: #fff;
    }
        /* Primary option emphasis */
        .workbook-option-card.primary {
            border: 1px solid #0d6efd22;
            background: #ffffff;
        }
        /* Secondary option */
        .workbook-option-card.secondary {
            background: #f8f9fa;
        }
    /* Price styling */
    .workbook-price {
        font-size: 1.25rem;
        font-weight: 700;
    }

/*img {
    border: 5px solid blue !important;
    height: 80px !important;
}*/

/* =========================================================
   WORKBOOKS LISTING — Quillstone Version C
   Everything below is scoped under .workbook-listing (added to
   the shared Products/Index.cshtml container only for the
   Workbook branch) so these rules never affect the Worksheets
   listing, which reuses the same generic Bootstrap classes.
========================================================= */

:root {
    /* Listing-only accent tokens not already covered by the shared
       Quillstone palette in site.css (--color-primary, --color-secondary,
       --color-accent, --color-accent-highlight, --color-text-primary,
       --color-text-secondary, --color-border, --color-secondary-tint). */
    --wb-color-digital-bg: #E4EBEE;  /* light teal tint, derived from --color-primary */
    --wb-color-physical-bg: #FBEEDD; /* light gold tint, derived from --color-accent */
}

/* ---------------------------------------------------------
   Search bar
--------------------------------------------------------- */

.workbook-listing .form-control {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
}

    .workbook-listing .form-control:focus {
        /*  border-color: var(--colour-primary);
        box-shadow: none;
        outline: none;*/
        border-color: var(--color-primary); /* CHANGED: fixed typo (colour → color) */
        box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12); /* CHANGED: same focus glow as Worksheet */
        outline: none;
    }

.workbook-listing .btn-primary {
    font-family: var(--font-family);
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--color-accent-highlight);
    border: 1px solid var(--color-accent-highlight);
    border-radius: 999px;
}

    .workbook-listing .btn-primary:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
    }

/* ---------------------------------------------------------
   Filters sidebar
--------------------------------------------------------- */

.workbook-listing .card {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(30, 67, 86, 0.06) !important;
}

/* Round the header's own corners to match the card instead of clipping
   the card with overflow:hidden — that would also clip the Choices.js
   dropdown (Level/Subject), which needs to render outside the card's
   own box. Bootstrap already rounds .card-header:first-child on its
   own (border-radius: calc(.25rem - 1px) ...), but only to the default
   card radius, not our 14px override, hence the explicit values here. */
.workbook-listing .card-header:first-child {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.workbook-listing .card-header {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    background-color: transparent;
    border-bottom: 1px solid var(--color-border);
    /*background-color: #F7F3FB;*/ /* Light purple tint */

    background-color: #F7F3FB;
}

.workbook-listing .form-label {
    font-family: var(--font-family);
    color: var(--color-text-primary);
}

.workbook-listing .form-select {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

    .workbook-listing .form-select:focus {
       /* border-color: #1E4356;*/
        border-color: var(--colour-primary);
        box-shadow: none;
        outline: none;
    }

.workbook-listing .btn-outline-secondary {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--color-primary);
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
}

    .workbook-listing .btn-outline-secondary:hover {
        background-color: var(--color-primary);
        color: #FFFFFF;
    }

/* ---------------------------------------------------------
   Active filter chips
--------------------------------------------------------- */

.workbook-listing .badge.bg-primary {
    background-color: var(--color-secondary-tint) !important;
    color: var(--color-primary) !important;
    border-radius: 999px;
    font-weight: 600;
}

.workbook-listing .badge.bg-info {
    background-color: var(--wb-color-digital-bg) !important;
    color: var(--color-primary) !important;
    border-radius: 999px;
    font-weight: 600;
}

.workbook-listing .badge.bg-warning {
    background-color: var(--wb-color-physical-bg) !important;
    color: var(--color-text-primary) !important;
    border-radius: 999px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Results count / empty state
--------------------------------------------------------- */

.workbook-listing .text-muted {
    color: var(--color-text-secondary) !important;
}

/* ---------------------------------------------------------
   Product card — typography
--------------------------------------------------------- */

.workbook-listing .product-card-body {
    padding: 14px 16px 4px;
}

.workbook-listing .product-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.workbook-listing .product-card-subtitle {
    font-family: var(--font-family);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.workbook-listing .product-card-meta {
    font-family: var(--font-family);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* Digital / Physical availability badges — rounded pill style */
.workbook-listing .product-card-meta .text-primary,
.workbook-listing .product-card-meta .text-warning {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

    .workbook-listing .product-card-meta .text-primary {
        /*  background-color: var(--wb-color-digital-bg);
    color: var(--color-primary) !important;*/
        background-color: #D6E3E9;
        color: #1E4356 !important;
    }

    .workbook-listing .product-card-meta .text-warning {
        /*   background-color: var(--wb-color-physical-bg);
    color: var(--color-text-primary) !important;*/
        background-color: #FCEFD9;
        color: var(--color-text-primary) !important;
    }

/* Age — sits below the Pages line, matching its styling exactly */
.workbook-listing .product-card-age {
    font-family: var(--font-family);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.workbook-listing .product-card-price {
    font-family: var(--font-family);
    font-weight: 700;
    color: #16a34a;
}

.workbook-listing .product-card-footer {
    padding: 10px 16px 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* ---------------------------------------------------------
   Product card — action buttons
--------------------------------------------------------- */

.workbook-listing .product-card .btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

    .workbook-listing .product-card .btn:hover {
        transform: translateY(-1px);
    }

/* Add Digital — outlined teal */
.workbook-listing .product-card .btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

    .workbook-listing .product-card .btn-outline-primary:hover {
        background-color: var(--color-primary);
        color: #FFFFFF;
    }

/* View / Download (already owned) — solid teal */
.workbook-listing .product-card .btn-success {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

    .workbook-listing .product-card .btn-success:hover {
        filter: brightness(1.12);
    }

/* View on Amazon — outlined gold */
.workbook-listing .product-card .btn-outline-warning {
    color: var(--color-accent-highlight);
    border-color: var(--color-accent);
    background-color: transparent;
}

    .workbook-listing .product-card .btn-outline-warning:hover {
        background-color: var(--wb-color-physical-bg);
        border-color: var(--color-accent-highlight);
        color: var(--color-accent-highlight);
    }

/* ---------------------------------------------------------
   Pagination
--------------------------------------------------------- */

.workbook-listing .page-link {
    font-family: var(--font-family);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 0 2px;
}

    .workbook-listing .page-link:hover {
        background-color: var(--color-secondary-tint);
        color: var(--color-primary);
        border-color: var(--color-border);
    }

.workbook-listing .page-item.active .page-link {
    background-color: var(--color-accent-highlight);
    border-color: var(--color-accent-highlight);
    color: #FFFFFF;
}

/* ---------------------------------------------------------
   Responsive fix — filters sidebar

   Bootstrap's .col-md-3 / .col-md-9 split at the "md" tier
   (768–991.98px) puts the filters card in a ~180px column.
   Bootstrap containers are fixed-width per tier (720px at md),
   not fluid, so that column never grows — the Level/Subject
   <select> text gets clipped by the dropdown caret and the
   "Clear Filters" button label wraps/overflows its pill.

   Fix: keep the two columns full-width (stacked) up to the same
   992px breakpoint the Worksheet filters sidebar already uses (see the
   identical .worksheet-listing override in worksheets.css — both
   listings share this exact col-md-3/col-md-9 row markup, so the sidebar
   is the same width on both pages by construction, not by two separately
   maintained values), so both listings stack at the same point and the
   sidebar only ever renders at full container width or at its intended
   desktop 25% split — never at the cramped in-between width.
   Desktop (>=992px) is untouched, preserving the existing layout.
--------------------------------------------------------- */

@media (max-width: 991.98px) {
    .workbook-listing .row > .col-md-3,
    .workbook-listing .row > .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   Choices.js dropdown (Level / Subject)

   Native <select> popups in Chromium are not constrained to the
   control's own width or the viewport — on narrow screens the
   options list can render wider than the screen and spill off
   the right edge regardless of how the sidebar itself is laid
   out. Level/Subject now use Choices.js (already loaded site-
   wide via _Layout.cshtml, applied via the .choices-select hook
   in choices-init.js) so the dropdown is a normal in-page
   element that can never exceed its container's width. This
   styles Choices' generated markup to match the .form-select
   look it replaces.
--------------------------------------------------------- */

.workbook-listing .choices {
    margin-bottom: 0;
}

.workbook-listing .choices__inner {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
}

.workbook-listing .choices.is-open .choices__inner,
.workbook-listing .choices.is-focused .choices__inner {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12);
}

.workbook-listing .choices__list--dropdown {
    border-color: var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(30, 67, 86, 0.12);
}

.workbook-listing .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-secondary-tint);
    color: var(--color-primary);
}