/* ================================================================
   BookFinder – Bootstrap 5 overrides & app-specific styles
   Bootstrap handles reset, grid, forms, nav, buttons, tables.
   This file only adds brand tokens + components Bootstrap doesn't cover.
   ================================================================ */

/* ── Brand tokens (light) ─────────────────────────────────────── */
:root {
    color-scheme: light dark;

    /* Breakpoints — read from JS via getComputedStyle so the value lives in one place */
    --bf-breakpoint-sidebar: 992px;

    /* Greys — corporate gray scale */
    --ren-black:          lch(1.11% .39 287);      /* --color-foreground */
    --ren-white:          lch(100% 0 0);            /* --color-background-standard */
    --ren-beige:          lch(98.3% 3.13 91.54);   /* --color-background-alternate */
    --ren-dark-grey:      lch(36.18% .39 287);     /* --color-gray-2 */
    --ren-medium-grey:    lch(57.11% .39 287);     /* --color-gray-3 */
    --ren-light-grey:     lch(90.68% .39 287);     /* --color-gray-5 */

    /* Primary accent — corporate red */
    --ren-primary:       lch(48.73% 64.51 22.72); /* --color-red / --color-accent */
    --ren-primary-hover: lch(35% 64.51 22.72);   /* --color-link-hover */

    /* Renaissance's own warning token — used by --ren-row-active-bg below */
    --ren-warning: lch(91.26% 85.88 92.66);

    /* Fonts — corporate */
    --ren-font-heading:   "expo-serif-pro", Georgia, serif;
    --ren-font-primary:   "proxima-nova", 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ren-font-secondary: "proxima-nova", 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --font-size-smaller: 0.7rem;
    --font-size-small: 0.85rem;
    --font-size-normal: 1rem;
    --font-size-heading-1: 3.05rem;
    --font-size-heading-2: 2.22rem;
    --font-size-heading-3: 1.66rem;
    --font-size-heading-4: 1.33rem;
    --font-size-heading-5: 1.13rem;
    --font-size-heading-6: 0.84rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Bootstrap wiring */
    --bs-primary:          var(--ren-primary);
    --bs-primary-rgb:      207, 58, 78;
    --bs-link-color:       var(--ren-primary);
    --bs-link-hover-color: var(--ren-primary-hover);

    /* Highlighted/active table row — tied to the brand warning hue rather than an
       unrelated one-off pastel. */
    --ren-row-active: color-mix(in lch, var(--ren-warning) 22%, var(--ren-white));

    /* Hovered table row — --ren-beige was tried here first but its chroma is so low
       (it's Renaissance's own near-white "alternate background" token, not meant to be
       a visible highlight) that it was indistinguishable from plain grey in practice.
       This is a warm brand-red wash instead, kept lighter than --ren-row-active-bg so a
       hovered *and* active row still read as two different states. */
    --ren-row-hover: var(--ren-beige);
}

/* ── Dark theme (follows system preference) ───────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Backgrounds — corporate dark blue-grey */
        --ren-white:       lch(20.6% 12.96 287);   /* --color-background-standard */
        --ren-beige:       lch(15.72% 12.96 287);  /* --color-background-alternate */
        --ren-black:       lch(98.34% 1.49 285.34); /* --color-foreground (near white) */

        /* Greys */
        --ren-dark-grey:   lch(98.34% 1.49 285.34); /* foreground text */
        --ren-medium-grey: lch(69.99% .39 287);     /* --color-gray-4, subdued text */
        --ren-light-grey:  lch(36.18% .39 287);     /* --color-border */

        /* Accent flips to warm cream — corporate --color-accent in dark */
        --ren-primary:       lch(87.67% 17.76 95.19);
        --ren-primary-hover: lch(97% 17.76 95.19);

        --ren-warning: lch(94.77% 47.24 95.36);

        /* Bootstrap wiring */
        --bs-body-bg:          lch(20.6% 12.96 287);
        --bs-body-color:       lch(98.34% 1.49 285.34);
        --bs-primary:          lch(87.67% 17.76 95.19);
        --bs-primary-rgb:      227, 220, 186;
        --bs-link-color:       lch(87.67% 17.76 95.19);
        --bs-link-hover-color: lch(97% 17.76 95.19);
    }
    body { background-color: var(--ren-white); color: var(--ren-dark-grey); }
    .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    .dropdown-menu { background-color: var(--ren-beige); border-color: var(--ren-light-grey); }
    .dropdown-item { color: var(--ren-dark-grey); }
    .dropdown-item:hover,
    .dropdown-item:focus { background-color: var(--ren-light-grey); color: var(--ren-black); }
    .dropdown-divider { border-color: var(--ren-light-grey); }
    .form-control { background-color: var(--ren-beige); border-color: var(--ren-light-grey); color: var(--ren-dark-grey); }
    .form-control:focus { background-color: var(--ren-beige); color: var(--ren-dark-grey); }
    .btn-outline-secondary { color: var(--ren-medium-grey); border-color: var(--ren-light-grey); }
    .btn-outline-secondary:hover { background-color: var(--ren-light-grey); color: var(--ren-dark-grey); }
    .card,
    .result-item { background-color: var(--ren-beige); border-color: var(--ren-light-grey); }
    .table {
        --bs-table-bg: var(--ren-white);
        --bs-table-color: var(--ren-dark-grey);
        --bs-table-striped-color: var(--ren-dark-grey);
        --bs-table-hover-color: var(--ren-dark-grey);
        --bs-table-active-color: var(--ren-dark-grey);
        --bs-table-border-color: var(--ren-light-grey);
    }
    hr { border-color: var(--ren-light-grey); }
    .btn-bookbag-img img[src*="outline"] { filter: invert(1); }
    .result-bookbag {
        background: var(--ren-beige) !important;
        border-color: var(--ren-black) !important;
    }
    .result-bookbag:hover {
        background: var(--ren-light-grey) !important;
    }    
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e3dcba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    /* Same hardcoded-dark-stroke problem for our own select.bg-select caret (core.css). */
    select.bf-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e3dcba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    /* Same story for checkboxes/switches: the unchecked border stays Bootstrap's light
       --bs-border-color default, and the .form-switch knob is a hardcoded semi-transparent
       black SVG circle — both nearly invisible against a dark track/background. */
    .form-check-input { border-color: var(--ren-light-grey); }
    .form-switch .form-check-input {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e3dcba'/%3e%3c/svg%3e");
    }
}

/* ── Base ─────────────────────────────────────────────────────── */
html { font-size: 18px; } /* 14px × 1.25 — matches preferred 125% zoom level */
body { 
    font-family: var(--ren-font-secondary); 
    font-size: var(--font-size-normal); 
    color: var(--ren-dark-grey); 
}
h1, h2, h3, h4, h5, h6 { 
    font-family: var(--ren-font-heading); 
    font-weight: var(--font-weight-light);
}
h1 {
    font-size: var(--font-size-heading-1);
}
h2 {
    font-size: var(--font-size-heading-2);
}
h3 {
    font-size: var(--font-size-heading-3);
}
h4 {
    font-size: var(--font-size-heading-4);
}
a { color: var(--bs-primary); }
a:hover { color: var(--bs-link-hover-color); }
img { max-width: 100%; }

.table-hover { --bs-table-hover-bg: var(--ren-row-hover); }

/* ── Top navbar ───────────────────────────────────────────────── */
/*
 * Full-bleed: the <nav> stretches wall-to-wall.
 * .bf-navbar-inner is the max-width wrapper that aligns items to 1320px.
 * On desktop (≥768px): logo | [flex search] | icons — single row.
 * On mobile (<768px):  logo | icons on row 1; search full-width on row 2.
 */
.bf-navbar {
    background: var(--ren-beige);
    border-bottom: 1px solid var(--ren-light-grey);
    padding: 0;
    width: 100%;
}
.bf-navbar-inner {
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* Logo and icons share a fixed-height first row */
.bf-navbar-inner > .navbar-brand,
.bf-navbar-inner > .d-flex {
    height: 3.75rem;
    display: flex;
    align-items: center;
}
/* Icons pushed to right edge */
.bf-navbar-inner > .d-flex { margin-left: auto; }
/* Search slot: hidden on mobile, grows to fill space on desktop */
.bf-navbar-search {
    display: none;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
}
.bf-navbar-search form { width: 100%; margin-bottom: 0; }
.bf-navbar-search .input-group { flex-wrap: nowrap; }
/* Below lg (992px): search wraps to its own full-width row below logo+icons */
@media (max-width: 991.98px) {
    .bf-navbar-search:not(:empty) {
        display: flex;
        order: 3;
        flex: 1 1 100%;
        padding-bottom: 0.5rem;
    }
}
@media (min-width: 992px) {
    .bf-navbar-search:not(:empty) { display: flex; }
}
.bf-nav-logo { height: 2rem; max-width: 100%; object-fit: contain; object-position: left; }
.bf-nav-logo--mobile  { display: none; }
.bf-nav-logo--desktop { display: inline-block; }
@media (max-width: 991.98px) {
    .bf-nav-logo--desktop { display: none; }
    .bf-nav-logo--mobile  { display: inline-block; }
}
/* Phones: tighten padding/gaps and shrink the logo so logo + icons stay on one row */
@media (max-width: 575.98px) {
    .bf-navbar-inner { padding: 0 0.75rem; gap: 0.5rem; }
    /* Logo takes whatever width the icons leave (basis 0 so it never forces a wrap) and
       scales down on narrow phones instead of pushing the icons onto a second row. */
    .bf-navbar-inner > .navbar-brand { flex: 1 1 0 !important; min-width: 0; }
    .bf-navbar-inner > .navbar-brand picture { min-width: 0; }
    .bf-nav-logo { height: 1.625rem; }
    /* Larger tap targets (40x44px) with no extra spacing between icons */
    .bf-navbar-inner > .d-flex { gap: 0 !important; }
    .bf-navbar-inner .bf-nav-icon-link,
    .bf-navbar-inner .dropdown > .bf-nav-link {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 2.5rem; min-height: 2.75rem;
    }
    /* Dropdowns open full-width under the header row instead of right-aligned to a
       toggle that sits mid-screen (which pushed them off the left edge). */
    .bf-navbar-inner .dropdown { position: static; }
    .bf-navbar-inner .dropdown > .dropdown-menu {
        top: 3.75rem; left: 0.75rem; right: 0.75rem; width: auto; min-width: 0;
    }
    .bf-navbar-inner .bf-nav-icon-link { font-size: 1.5rem; }
    .bf-navbar-inner .dropdown > .bf-nav-link { font-size: 1rem; padding-left: 0.25rem; padding-right: 0.25rem; }
    .bf-navbar-inner .bf-bookbag-img { height: 1.5rem; }
    .bf-navbar-inner #noti_Container .noti_bubble { top: 2px; right: 2px; }
}
.bf-nav-link {
    color: var(--ren-dark-grey);
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}
.bf-nav-link:hover { color: var(--ren-black); text-decoration: underline; }
.bf-nav-icon-link { position: relative; font-size: 1.125rem; text-decoration: none !important; background: none; border: none; padding: 0; }
.bf-nav-icon-link:hover { color: var(--ren-black); }
.dropdown-toggle-no-caret::after { display: none; }
.bf-help-dropdown { min-width: 200px; font-size: 0.8125rem; }
.bf-help-dropdown .dropdown-item { color: var(--ren-dark-grey); padding: 0.4rem 1rem; }
.bf-help-dropdown .dropdown-item:hover { background: var(--ren-primary-hover); color: var(--ren-white); }

/* ── Profile dropdown ─────────────────────────────────────────── */
.bf-profile-dropdown { min-width: 240px; font-size: 0.8125rem; }
.bf-profile-dropdown .dropdown-item { color: var(--ren-dark-grey); padding: 0.4rem 1rem; }
.bf-profile-dropdown .dropdown-item:hover { background: var(--ren-primary-hover); color: var(--ren-white); }
.bf-profile-keycode-header { font-size: var(--font-size-smaller); }
.bf-keycode-company { font-size: var(--font-size-small); font-weight: 700; color: var(--ren-dark-grey); margin-bottom: 0.5rem; }
.bf-profile-keycode-dot {
    position: absolute; top: -1px; right: -2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #2e7d32;
    border: 1.5px solid var(--bs-body-bg, #fff);
}

/* ── Toast notifications ──────────────────────────────────────── */
#bfToast.text-bg-success { background: #eaf6ec !important; color: #1e4620 !important; border: 1px solid #b7dfc0 !important; }
/* Overrides the global dark-mode ".btn-close { filter: invert(...) }" rule (line ~98), which
   would otherwise force the close icon white even against this toast's always-light background. */
#bfToast.text-bg-success .btn-close { filter: none !important; }
#bfToast.text-bg-danger  { background: var(--ren-primary) !important; color: var(--ren-white) !important; }

/* ── Filter icon button (in search bar) ───────────────────────── */
.bf-filter-icon-btn {
    position: relative;
    background: none; border: 1px solid var(--ren-light-grey); border-radius: 4px;
    color: var(--ren-dark-grey); font-size: 1.125rem;
    padding: 0.3rem 0.5rem; flex-shrink: 0;
    margin-right: 10px;
}
.bf-filter-icon-btn:hover { border-color: var(--ren-medium-grey); color: var(--ren-black); }
.bf-filter-icon-dot {
    position: absolute; top: 4px; right: 4px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ren-primary);
    border: 1.5px solid var(--ren-white);
}

/* ── Active filter tags bar ───────────────────────────────────── */
.af-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 6px 0 2px;
}
.af-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bs-primary); color: var(--ren-white);
    border: none; border-radius: 20px;
    padding: 4px 10px 4px 12px;
    font-size: 0.8125rem; font-family: var(--ren-font-secondary);
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
}
.af-tag:hover { background: var(--bs-link-hover-color); color: var(--ren-white); }
.af-tag-x { font-size: 1rem; line-height: 1; opacity: 0.75; color: inherit; text-decoration: none; }
.af-tag.af-tag--clear-all {
    background: none;
    border: 1.5px solid var(--ren-dark-grey);
    color: var(--ren-dark-grey);
    font-size: 1.25rem; line-height: 1; padding: 3px 10px;
}
.af-tag.af-tag--clear-all:hover { background: var(--ren-dark-grey); color: var(--ren-white); }

/* ── Offcanvas filter panel ───────────────────────────────────── */
.bf-filter-panel { max-width: 420px; display: flex; flex-direction: column; }
.bf-filter-panel-header {
    gap: 0.5rem;
}
/* .bf-filter-panel-header .offcanvas-title {
    font-size: 1rem; font-weight: 700;
    letter-spacing: 0.05em; color: var(--ren-dark-grey);
} */
.bf-filter-panel-body { padding: 1rem; }


/* Screen container — clips the slide animation */
.fp-screen-container { position: relative; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; }

/* Individual screens */
.fp-screen {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    overflow: hidden;
    transition: transform 0.22s ease;
    visibility: hidden;
}
.fp-screen .offcanvas-body { flex: 1 1 auto; overflow-y: auto; }
.fp-screen .fp-actions { flex-shrink: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--ren-light-grey); background: var(--ren-white); }
.fp-screen--active {
    transform: translateX(0);
    visibility: visible;
    position: relative;
}
.fp-screen--slide-out {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
}

/* Collection buttons inside filter panel */
.fp-coll-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    background: var(--ren-white); color: var(--ren-dark-grey);
    border: 1.5px solid var(--ren-light-grey); border-radius: 8px;
    padding: 0.5rem 0.75rem; font-size: 0.875rem;
    font-family: var(--ren-font-secondary); cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
.fp-coll-btn:hover { border-color: var(--ren-dark-grey); color: var(--ren-black); }
.fp-coll-btn--active { background: var(--ren-dark-grey); color: var(--ren-white); border-color: var(--ren-dark-grey); }
.fp-coll-btn--active:hover { background: var(--ren-black); border-color: var(--ren-black); }
.fp-coll-btn--all { margin-bottom: 0.25rem; border-style: dashed; }
.fp-coll-chevron { font-size: 0.75rem; opacity: 0.6; flex-shrink: 0; }

.fp-section-count { font-weight: normal; color: var(--ren-medium-grey); margin-left: 3px; }

.fp-section { margin-bottom: 1.25rem; }
.fp-section-label {
    display: block;
    font-size: var(--font-size-small); font-weight: 600;
    letter-spacing: 0.05em; color: var(--ren-dark-grey);
    border-bottom: 1px solid var(--ren-light-grey); padding-bottom: 0.3rem;
    margin-bottom: 0.35rem;
}
.fp-num-input {
    width: 72px; padding: 0.3rem 0.4rem; font-size: var(--font-size-small);
    border: 1px solid var(--ren-light-grey); border-radius: 4px;
    font-family: var(--ren-font-secondary); text-align: center;
    background-color: var(--ren-white);
}
.fp-num-input:focus { outline: 2px solid var(--bs-primary); box-shadow: none; border-color: var(--bs-primary); }
.fp-sep { color: var(--ren-medium-grey); font-size: var(--font-size-small); }

/* ── Primary button ───────────────────────────────────────────── */
.bf-primary-btn {
    color: var(--ren-white); border: 1.5px solid var(--bs-primary);
    border-radius: 20px; padding: 0.4rem 1.25rem; font-size: 1rem; font-weight: 500;
    background: var(--bs-primary);
}
.bf-primary-btn:hover { background: var(--bs-link-hover-color); border-color: var(--bs-link-hover-color); color: var(--ren-white); }

/* ── Filter toggle buttons (filter panel + sidebar refinements) ── */
.fp-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-filter-btn {
    background: var(--ren-white); color: var(--ren-medium-grey);
    border: 1.5px solid var(--ren-light-grey); border-radius: 20px;
    padding: 5px 14px; font-size: 0.8125rem;
    font-family: var(--ren-font-secondary); cursor: pointer;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
    white-space: nowrap;
}
.bf-filter-btn:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--ren-white); }
.bf-filter-btn--active {
    background: var(--bs-primary); color: var(--ren-white);
    border-color: var(--bs-primary);
}
.bf-filter-btn--active:hover { background: var(--bs-link-hover-color); border-color: var(--bs-link-hover-color); color: var(--ren-white); }

.fp-actions { display: flex; gap: 8px; align-items: center; }
.fp-clear-btn {
    background: transparent; color: var(--bs-primary);
    border: 1.5px solid var(--bs-primary); border-radius: 20px;
    padding: 0.4rem 1.25rem; font-size: 1rem; font-weight: 500;
    font-family: var(--ren-font-secondary); cursor: pointer; text-decoration: none;
    display: inline-block;
}
.fp-clear-btn:hover { background: var(--bs-primary); color: var(--ren-white); }

.fp-level-tabs { display: flex; gap: 1rem; margin-bottom: 0.25rem; }
.fp-level-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0 0 2px; font-size: var(--font-size-small); font-weight: 600;
    letter-spacing: 0.05em; color: var(--ren-medium-grey);
    cursor: pointer;
}
.fp-level-tab--active {
    color: var(--ren-dark-grey);
    border-bottom-color: var(--bs-primary);
}
.fp-level-tab:not(.fp-level-tab--active):hover { color: var(--ren-dark-grey); }
.rf-lexile-endpoints {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--ren-medium-grey); margin-top: 0.2rem;
}

/* ── Home page layout ─────────────────────────────────────────── */
.bf-home-body {
    display: flex; flex-direction: column; align-items: center;
    padding: 2rem 1rem 2rem;
}
.bf-home-search { width: 100%; max-width: 560px; }
.bf-home-search-form .search-input { font-size: 1rem; }
.bf-home-browse { text-align: center; margin-top: 0.75rem; }
.bf-home-ads { margin-top: 2rem; }

/* Ad carousel */
.bf-ad-carousel { position: relative; width: 100%; max-width: 750px; margin: 0 auto; overflow: hidden; }
.bf-ad-carousel-track { display: flex; transition: transform 0.5s ease; will-change: transform; }
.bf-ad-slide {
    flex: 0 0 100%; display: flex; justify-content: center; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap; padding: 0 0.25rem;
    
}
/* .ad-panel is the flex item when there's a single promo (the JS only unwraps the links for 2+), so cap it like the links */
.bf-ad-slide a, .bf-ad-slide .ad-panel { flex: 1 1 280px; max-width: 600px; }
.bf-ad-slide a img { width: 100%; height: auto; display: block; border-radius: 4px;}
.bf-ad-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.bf-ad-dot {
    width: 8px; height: 8px; border-radius: 50%; border: none;
    background: var(--ren-light-grey, #ccc); cursor: pointer; padding: 0; transition: background 0.2s;
}
.bf-ad-dot.active { background: var(--bf-blue, #0d6efd); }
.bf-ad-carousel-btn {
    display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: 50%; border: 1.5px solid var(--ren-light-grey); background: none; color: var(--ren-dark-grey);
    cursor: pointer; transition: background 0.2s;
}
.bf-ad-carousel-btn:hover { background-color: var(--ren-beige); border-color: var(--ren-dark-grey); color: var(--ren-black); }
.bf-ad-carousel-btn--prev { left: 0.5rem; }
.bf-ad-carousel-btn--next { right: 0.5rem; }
/* Touch devices swipe between slides (see bookfinder.js), so hide the arrows.
   !important because the script sets display:flex inline. Dots remain. */
@media (hover: none) and (pointer: coarse) {
    .bf-ad-carousel { touch-action: pan-y; }
    .bf-ad-carousel-btn { display: none !important; }
}
.bf-home-new-releases { width: 100%; max-width: 1200px; margin: 2.5rem auto 0; padding: 0 1rem; }

/* ── Book carousel ────────────────────────────────────────────── */
.bf-new-releases { width: 100%; overflow: hidden; margin: 2.5rem auto; }
.bf-carousel { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.bf-carousel-track-wrap {
    flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.bf-carousel-track-wrap::-webkit-scrollbar { display: none; }
.bf-carousel-track {
    display: flex; gap: 0.75rem;
    list-style: none; margin: 0; padding: 0.25rem 0.125rem;
}
.bf-carousel-item { flex: 0 0 165px; scroll-snap-align: start; }
.bf-carousel-card {
    display: flex; flex-direction: column; align-items: center;
    width: 165px; text-decoration: none; color: inherit;
    border-radius: 6px; padding: 0.375rem;
    transition: background 0.1s;
}
.bf-carousel-card:hover { background: var(--ren-beige); }
.bf-carousel-cover {
    width: 120px; height: 165px; object-fit: cover;
    border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bf-carousel-info {
    display: flex; flex-direction: column; align-items: center;
    margin-top: 0.4rem; gap: 0.1rem; width: 100%;
}
.bf-carousel-title {
    font-size: 0.7rem; font-weight: 600; text-align: center;
    line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    color: var(--ren-black);
}
.bf-carousel-author {
    font-size: 0.65rem; color: var(--ren-dark-grey); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.bf-carousel-btn {
    flex-shrink: 0; background: none; border: 1.5px solid var(--ren-light-grey);
    border-radius: 50%; width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--ren-dark-grey); cursor: pointer; transition: border-color 0.1s, color 0.1s;
    padding: 0;
}
.bf-carousel-btn:hover:not(:disabled) { background-color: var(--ren-beige); border-color: var(--ren-dark-grey); color: var(--ren-black); }
.bf-carousel-btn:disabled { opacity: 0.3; cursor: default; }
/* Touch devices swipe the track natively, so drop the arrow buttons and reclaim the width.
   Keyed on input type (not screen width) so narrow desktop windows keep their buttons. */
@media (hover: none) and (pointer: coarse) {
    .bf-carousel-btn { display: none; }
    .bf-carousel-track-wrap { overscroll-behavior-x: contain; }
}
/* Phones: size cards so ~2.5 show at once - the cut-off third book signals "swipe for more" */
@media (max-width: 575.98px) {
    .bf-carousel { --bf-card-w: calc((100vw - 2rem) / 2.5 - 0.75rem); }
    .bf-carousel-item { flex-basis: var(--bf-card-w); }
    .bf-carousel-card { width: var(--bf-card-w); }
    .bf-carousel-cover { width: calc(var(--bf-card-w) - 0.75rem); height: auto; aspect-ratio: 120 / 165; }
}

/* ── Pre-search (landing) layout ──────────────────────────────── */
.bf-presearch-body {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 2.5rem 1rem;
    min-height: 300px;
}
.bf-presearch-ads {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    margin-top: 1.5rem;
}
.bf-presearch-ads .ad-panel { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bf-spinner-overlay--page { position: fixed; }

/* ── Region / language picker dropdown ───────────────────────── */
.bf-region-dropdown { min-width: 200px; font-size: 0.8125rem; }
.bf-region-dropdown .dropdown-item.active { background: var(--bf-body-bg); color: var(--ren-black); padding: 0.4rem 1rem; }
.bf-region-dropdown .dropdown-item:hover { background: var(--ren-primary-hover); color: var(--ren-white); }
.fi { display: inline-block; vertical-align: middle; }

.bf-bookbag-img { height: 1.25rem; width: auto; display: block; }
.bf-site-name { font-size: 0.8125rem; color: var(--ren-dark-grey); font-family: var(--ren-font-secondary); }

/* ── Sidebar ──────────────────────────────────────────────────── */
.bf-sidebar { width: 220px; flex-shrink: 0; }

/* On narrow viewports the sidebar becomes a top strip; refinements collapse behind a toggle button. */
@media (max-width: 767.98px) {
    .bf-sidebar { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    #searchRefinements { width: 100%; }
}

/* ── Search results two-column layout (filter sidebar + results) ── */
.bf-search-layout-row { display: flex; align-items: flex-start; gap: 0; }

/*
 * .bf-filter-sidebar wraps the filter panel on the search page.
 * On <lg: the wrapper takes no space (width 0, no overflow) so the offcanvas
 * drawer still works — Bootstrap positions it fixed over the viewport.
 * On lg+: the wrapper is a normal block column; CSS below overrides
 * Bootstrap's offcanvas hiding so the panel renders inline as a sidebar.
 */
.bf-filter-sidebar { width: 0; flex-shrink: 0; overflow: hidden; }

@media (min-width: 992px) {
    .bf-search-layout-row { gap: 1.25rem; }
    .bf-filter-sidebar { display: block; width: 320px; align-self: stretch; overflow: visible; }

    /* Hide header (title, close button) and apply-filters row when panel is a sidebar */
    .bf-filter-sidebar .bf-filter-panel-header { display: none; }
    .bf-filter-sidebar .fp-actions { display: none; }

    /* Override Bootstrap offcanvas to render the panel as a static inline sidebar */
    .bf-filter-sidebar .offcanvas {
        --bs-offcanvas-transition: none;
        position: sticky !important;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scrollbar-width: none;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        background-color: var(--bs-body-bg, #fff) !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1 !important;
    }
    .bf-filter-sidebar .offcanvas::-webkit-scrollbar { display: none; }
    /* fp-screen-container needs height defined by content, not the drawer viewport */
    .bf-filter-sidebar .fp-screen-container { overflow: visible; flex: none; min-height: 0; }
    .bf-filter-sidebar .fp-screen { position: static; transform: none; display: flex; overflow: visible; }
    .bf-filter-sidebar .fp-screen:not(.fp-screen--active) { display: none; }
    .bf-filter-sidebar .fp-screen--slide-out { display: none; }
    .bf-filter-sidebar .fp-screen .offcanvas-body { flex: none; overflow-y: visible; max-height: none; }
}

/* ── Tab nav (underline style) ────────────────────────────────── */
.bf-tabs {
    border-bottom: 2px solid var(--ren-light-grey);
    gap: 0;
}
.bf-tabs .nav-link {
    color: var(--ren-dark-grey);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 0;
}
.bf-tabs .nav-link:hover {
    color: var(--ren-black);
    border-bottom-color: var(--ren-light-grey);
    background: none;
}
.bf-tabs .nav-link.active {
    color: var(--ren-black);
    border-bottom: 2px solid var(--ren-primary);
    font-weight: 600;
    background: none;
}

/* ── Content area ─────────────────────────────────────────────── */
.bf-content-area {
    position: relative;
    padding: 12px 0;
    min-width: 0;
}

/* ── Loading overlay ──────────────────────────────────────────── */
.bf-spinner-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}

/* ── Search forms ─────────────────────────────────────────────── */
.quick-search-bar { margin-bottom: 12px; flex-wrap: nowrap; }
.search-input {
    padding: 7px 10px;
    font-size: 1rem;
    border: 1px solid var(--ren-medium-grey);
    font-family: var(--ren-font-secondary);
}
.search-input:focus { outline: none; box-shadow: none; border-color: var(--ren-medium-grey); }
.search-input:focus-visible { outline: 2px solid var(--ren-primary); outline-offset: -2px; }
.search-submit-btn {
    padding: 0 16px; font-size: 1.0rem;
    background-color: var(--bs-primary); color: var(--ren-white);
    border: 1px solid var(--bs-primary);
    border-radius: 0 20px 20px 0;
}
.search-submit-btn:hover { background-color: var(--bs-link-hover-color); border-color: var(--bs-link-hover-color); color: var(--ren-white); }
.search-error { color: var(--bs-primary); margin: 6px 0; font-size: 13px; }
.quick-search-intro { color: var(--ren-medium-grey); padding: 16px 0; }
.no-results { color: var(--ren-medium-grey); padding: 2.5rem 0; text-align: center; }
.no-results-icon { font-size: 4rem; opacity: 0.35; display: block; margin-bottom: 0.75rem; }
.no-results-msg { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.no-results-suggest { font-size: 0.875rem; margin-top: 0.5rem; }
.no-results-suggest a { color: var(--bs-primary); }

/* ── Results header ───────────────────────────────────────────── */
.rsh-bar { padding: 6px 0 4px; }
.rsh-heading-row { display: flex; align-items: baseline; gap: 14px; }
/*.rsh-heading { font-size: 18px; font-weight: bold; color: var(--ren-black); }*/
.rsh-count { font-size: 13px; color: var(--ren-dark-grey); }

/* ── Load More ────────────────────────────────────────────────── */
.load-more-wrap {
    display: flex; justify-content: center;
    padding: 1.5rem 0;
}
.load-more-btn { min-width: 140px; }

/* ── Result items ─────────────────────────────────────────────── */
.results-container { display: contents; }
#searchResultsList { display: flex; flex-direction: column; gap: 12px; }
.result-item {
    display: flex; gap: 14px;
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--ren-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
    transition: background 0.15s ease;
    position: relative;
    cursor: pointer;
}
.result-item:hover {
    background: var(--ren-beige);
}
.result-cover { width: 132px; flex-shrink: 0; position: relative; z-index: 2; display: inline-block; isolation: isolate; }
.cover-thumb { width: 132px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: block; }
.cover-placeholder {
    width: 132px; height: 178px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ren-light-grey);
    border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); color: var(--ren-medium-grey);
    font-size: 10px; text-align: center; text-decoration: none;
}
.result-info { flex: 1; min-width: 0; }
.result-title-link {font-family: var(--ren-font-heading); font-size: 1rem; font-weight: 700; color: var(--ren-black); text-decoration: none; display: block; line-height: 1.25; margin-bottom: 3px; }
.result-author { font-size: 0.8rem; color: var(--ren-medium-grey); margin-bottom: 3px; position: relative; z-index: 1; }
.result-author-link { color: var(--ren-medium-grey); text-decoration: none; }
.result-author-link:hover { color: var(--bs-primary); text-decoration: underline; }
.result-quizline { font-size: 0.8rem; color: var(--ren-dark-grey); margin-bottom: 2px; }
.result-quizline span { margin-left: 6px; }
.result-meta-line { font-size: 0.8rem; color: var(--ren-medium-grey); margin-bottom: 2px; }
.result-quiz-types { font-size: 0.8rem; color: var(--ren-medium-grey); margin-bottom: 2px; }
.result-summary { font-size: 0.8rem; color: var(--ren-medium-grey); margin-bottom: 4px; line-height: 1.5; }
.result-badges { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.result-myon-logo { height: 25px; width: auto; display: block; }
.badge-ren-primary { background-color: var(--ren-primary); color: var(--ren-white); }
.bd-myon { margin-top: 8px; }
.bd-myon-logo { height: 28px; width: auto; display: block; }
.result-bookbag {
    position: absolute; bottom: 4px; right: 4px; z-index: 3;
    width: 2rem !important; height: 2rem !important;
    display: flex !important; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ren-white) !important;
    border: 1px solid var(--ren-black) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: background 0.15s ease;
    padding: 0 !important;
}
.result-bookbag:hover {
    background: var(--ren-beige) !important;
}
.btn-bookbag-img { display: block; cursor: pointer; border: none; background: none; padding: 0; max-width: none; height: 1.5rem; }
.btn-bookbag-img img { height: 1.25rem; display: block; }
.btn-bookbag-img:disabled { opacity: 0.4; cursor: default; }

/* ── Book Detail ──────────────────────────────────────────────── */
.bd-page { padding: 4px 0; }
.bd-page-heading {
    font-size: 16px; font-weight: bold; color: var(--ren-dark-grey);
    border-bottom: 1px solid var(--ren-light-grey);
    padding-bottom: 6px; margin-bottom: 14px;
}
.bd-top-block { display: flex; gap: 20px; margin-bottom: 18px; align-items: flex-start; flex-wrap: wrap; position: relative; }
.bd-cover-col { flex-shrink: 0; position: relative; display: inline-block; }
.bd-cover-img { width: 140px; display: block; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.bd-cover-placeholder {
    width: 140px; height: 188px; background: var(--ren-light-grey);
    border: 1px solid var(--ren-light-grey);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--ren-medium-grey); text-align: center; padding: 8px;
}
@media (min-width: 768px) {
    .bd-cover-img { width: 200px; }
    .bd-cover-placeholder { width: 200px; height: 270px; }
}
.bd-info-col { flex: 1; min-width: 0; }
.bd-title { font-size: 1.25rem; font-weight: bold; color: var(--ren-black); margin-bottom: 2px; line-height: 1.25; }
.bd-author { font-size: var(--font-size-small); color: var(--ren-dark-grey); margin-bottom: 4px; }
.bd-quiz-line { font-size: var(--font-size-small); color: var(--ren-dark-grey); margin-bottom: 10px; }
.bd-lang-badge {
    display: inline-block; background: var(--ren-dark-grey); color: var(--ren-white);
    font-size: var(--font-size-small); padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}
.bd-description { font-size: var(--font-size-small); line-height: 1.5; color: var(--ren-dark-grey); margin-bottom: 8px; }
.bd-quiz-avail { font-size: var(--font-size-small); color: var(--ren-dark-grey); margin-top: 6px; }
.bd-attr-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); margin-bottom: 12px; }
.bd-attr-table tr:nth-child(odd) { background: var(--ren-beige); }
.bd-attr-table th { font-weight: bold; color: var(--ren-dark-grey); padding: 5px 12px 5px 10px; width: 160px; text-align: left; vertical-align: top; white-space: nowrap; }
.bd-attr-table td { padding: 5px 10px; color: var(--ren-dark-grey); vertical-align: top; }
.bd-bookbag-row { margin-bottom: 16px; }
.bd-section { border-top: 1px solid var(--ren-light-grey); padding-top: 14px; margin-bottom: 18px; }
#recommended-books-container:not(:empty) { margin-top: 50px; margin-bottom: 50px; }
.bd-section-title { font-size: var(--font-size-small); font-weight: bold; color: var(--ren-dark-grey); margin-bottom: 8px; }
.bd-pub-table { font-size: var(--font-size-small); }

/* .table-primary th,
.table-primary td { background-color: var(--ren-primary) !important; color: var(--ren-white) !important; } */

.resultsGrid {
    width: 100%;
    border-collapse: collapse;
    /* th backgrounds (see .table-primary th in global.css) are painted per-cell, not on
       the table/row, so rounding the header corners has to clip them via the table's own
       overflow rather than a per-cell border-radius (which border-collapse would ignore). */
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}
.resultsGrid th {
    background-color: var(--ren-primary);
    color: var(--ren-white);
    padding: 6px 8px;
    text-align: left;
    white-space: nowrap;
}
.resultsGrid td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ren-light-grey, #e0e0e0);
    vertical-align: middle;
}
.resultsGrid tr.datarow:hover { background-color: var(--ren-row-hover); }
.resultsGrid tr.activerow { background-color: var(--ren-row-active); }


/* Publisher table: stacked card layout on mobile */
@media (max-width: 575px) {
    .bd-pub-table thead { display: none; }
    .bd-pub-table tbody tr {
        display: block;
        border: 1px solid var(--ren-light-grey);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 0;
    }
    .bd-pub-table td {
        display: flex;
        gap: 8px;
        border: none;
        border-bottom: 1px solid var(--ren-light-grey);
        padding: 5px 12px;
    }
    .bd-pub-table td:last-child { border-bottom: none; }
    .bd-pub-table td:empty { display: none; }
    .bd-pub-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--ren-dark-grey);
        flex-shrink: 0;
        width: 110px;
    }
}
.bd-topic-cards { position: relative; }
.bd-topic-card {
    position: absolute;
    background: var(--ren-beige);
    border: 1px solid var(--ren-light-grey);
    border-radius: 6px;
    padding: 10px 12px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bd-topic-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.bd-topic-card-title {
    display: block;
    font-size: var(--font-size-smaller); font-weight: bold;
    color: var(--ren-dark-grey);
    margin-bottom: 6px;
    text-decoration: none;
}
.bd-topic-card:hover .bd-topic-card-title { color: var(--bs-primary); }
.bd-chip-link { position: relative; z-index: 2; }
.bd-chips-line { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-chip {
    display: inline-block; background: var(--ren-white); border: 1px solid var(--ren-light-grey);
    border-radius: 3px; padding: 2px 8px; font-size: var(--font-size-smaller); color: var(--ren-dark-grey);
}
.bd-chip-link { color: var(--ren-black); text-decoration: none; }
.bd-chip-link:hover { background-color: var(--bs-link-hover-color); color: var(--ren-white); }

/* ── Book Bag ─────────────────────────────────────────────────── */
.bookbag-container { padding: 8px 0; }
.bookbag-empty { color: var(--ren-medium-grey); padding: 20px 0; }

/* ── Refinements panel ────────────────────────────────────────── */
.rf-panel {
    padding: 4px 0 6px;
    margin-top: 4px;
}
.rf-panel-title {
    font-size: 11px; font-weight: bold; text-transform: uppercase;
    color: var(--ren-dark-grey); letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ren-light-grey);
    padding-bottom: 5px; margin-bottom: 10px;
    margin-top: 10px;
}
.rf-section { margin-bottom: 12px; }
.rf-section-label {
    font-size: 11px; font-weight: bold; color: var(--ren-black);
    display: block; margin-bottom: 5px;
}
.rf-dual-range {
    position: relative; height: 28px; margin-bottom: 4px;
}
.rf-range-track {
    position: absolute; top: 50%; left: 0; right: 0;
    height: 4px; background: var(--ren-light-grey);
    border-radius: 2px; transform: translateY(-50%);
}
.rf-range-fill {
    position: absolute; height: 100%;
    background: var(--bs-primary); border-radius: 2px;
}
.rf-range {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%; height: 4px;
    appearance: none; -webkit-appearance: none;
    background: transparent; pointer-events: none;
    margin: 0;
}
.rf-range::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid var(--ren-white);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    cursor: pointer; pointer-events: all;
}
.rf-range::-moz-range-thumb {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid var(--ren-white);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    cursor: pointer; pointer-events: all;
}
.rf-num-row {
    display: flex; align-items: center; gap: 4px; margin-top: 5px;
}
.rf-num-input {
    width: 60px; padding: 2px 5px; font-size: 11px;
    border: 1px solid var(--ren-medium-grey); border-radius: 3px;
    text-align: center; font-family: var(--ren-font-secondary);
}
.rf-num-sep { font-size: 11px; color: var(--ren-medium-grey); }
.rf-select {
    width: 100%; font-size: 11px; padding: 3px 5px;
    border: 1px solid var(--ren-medium-grey); border-radius: 3px;
    font-family: var(--ren-font-secondary);
}
.rf-apply-btn {
    display: block; width: 100%;
    background: var(--bs-primary); color: var(--ren-white);
    border: none; border-radius: 4px; padding: 5px 0;
    font-size: 12px; font-weight: bold; font-family: var(--ren-font-secondary);
    cursor: pointer; margin-top: 4px;
}
.rf-apply-btn:hover { background: var(--bs-primary-dark); }
.rf-clear-btn {
    display: block; width: 100%;
    background: none; color: var(--ren-medium-grey);
    border: 1px solid var(--ren-light-grey); border-radius: 4px; padding: 4px 0;
    font-size: 11px; font-family: var(--ren-font-secondary);
    cursor: pointer;
}
.rf-clear-btn:hover { color: var(--ren-dark-grey); border-color: var(--ren-medium-grey); }
.rf-active-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--ren-light-grey); border-radius: 3px;
    padding: 2px 6px; font-size: 11px; color: var(--ren-dark-grey);
}
.rf-tag-clear { color: var(--ren-medium-grey); text-decoration: none; font-weight: bold; }
.rf-tag-clear:hover { color: var(--ren-dark-grey); }

/* ── Book Bag notification bubble ────────────────────────────── */
#noti_Container { position: relative; display: inline-flex; align-items: center; }
.noti_bubble {
    position: absolute; top: -6px; right: -6px;
    background: var(--ren-primary); color: var(--ren-white);
    border: 2px solid var(--bs-body-bg, #fff);
    border-radius: 50%; font-size: 10px; font-weight: bold;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.noti_bubble--full {
    border-radius: 9px;
    width: auto; padding: 0 5px;
    font-size: 9px; letter-spacing: 0.02em;
}

/* ── Print bar ────────────────────────────────────────────────── */
.print-bar { margin: 6px 0 8px; }
.btn-print {
    display: inline-block; padding: 4px 12px;
    background: var(--ren-white); color: var(--ren-dark-grey);
    border: 1px solid var(--ren-medium-grey); border-radius: 4px;
    font-size: 12px; text-decoration: none;
}
.btn-print:hover { background: var(--ren-dark-grey); color: var(--ren-white); text-decoration: none; }

/* ── Ad panel ─────────────────────────────────────────────────── */
.ad-panel img { display: block; max-width: 100%; margin-bottom: 8px; }

/* ── Footer ───────────────────────────────────────────────────── */
.bf-footer { background: var(--ren-beige); color: var(--ren-black); font-size: 0.75rem; padding: 10px 0; background-color: var(--ren-beige); }
.bf-footer a { color: var(--ren-black); text-decoration: underline; }
.bf-disclaimer { color: var(--ren-medium-grey); font-size: 0.625rem; }

/* ── Print utilities ──────────────────────────────────────────── */
@media print { .no-print { display: none !important; } }

/* ── User Type nav icon ───────────────────────────────────────── */
.ut-nav-link {
    display: flex; align-items: center; justify-content: center;
    color: var(--ren-dark-grey); text-decoration: none;
    width: 32px; height: 32px; border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.ut-nav-link:hover { background: rgba(0,0,0,0.07); color: var(--ren-black); }
.ut-nav-icon { font-size: 1.25rem; }

/* ── User Type selection page ─────────────────────────────────── */
.ut-page { max-width: 680px; margin: 2rem auto; padding: 0 1rem; text-align: center; }
.ut-heading { font-size: 1.75rem; font-weight: bold; color: var(--ren-black); margin-bottom: 0.5rem; }
.ut-subheading { font-size: 0.9375rem; color: var(--ren-medium-grey); margin-bottom: 0.75rem; }
.ut-description { font-size: 0.9rem; color: var(--ren-medium-grey); text-align: left; margin-bottom: 2rem; line-height: 1.6; }
.ut-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 480px) { .ut-options { grid-template-columns: 1fr; } }
.ut-options form { display: contents; }
.ut-option-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 1.5rem 1rem; height: 100%;
    background: var(--ren-white); border: 2px solid var(--ren-light-grey); border-radius: 8px;
    cursor: pointer; width: 100%; text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ut-option-btn:hover { border-color: var(--ren-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ut-option-icon { font-size: 2rem; color: var(--ren-primary); }
.ut-option-label { font-size: 1rem; font-weight: 600; color: var(--ren-black); }
.ut-option-desc { font-size: 0.8125rem; color: var(--ren-medium-grey); }

/* ── Search results header ────────────────────────────────────── */
.rsh-bar { margin-bottom: 0.5rem; }
.rsh-heading-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/*.rsh-heading { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ren-black); }*/
.rsh-count { font-size: var(--font-size-small); color: var(--ren-medium-grey); }
.rsh-sort-form { display: flex; align-items: center; gap: 0.4rem; }
.bf-select {
    font-size: var(--font-size-small); padding: 0.25rem 0.5rem;
    border: 1px solid var(--ren-light-grey); border-radius: 4px;
    font-family: var(--ren-font-primary); color: var(--ren-dark-grey);
    background-color: var(--ren-white); cursor: pointer;
    height: 2.5rem;
    /* A select with no width sizes itself to its widest option, which for long topic
       descriptions is wider than the filter sidebar. Cap it and clip the closed-state
       text; the open dropdown still overlays at full width, which is what we want. */
    max-width: 100%;
    text-overflow: ellipsis;
}
.bf-select:focus {
    border-color: var(--ren-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
    outline: none;
}
select.bf-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2.25rem;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 15px 15px;
}

.bf-select--full { width: 100%; }

.bf-select-filter{
    color: var(--ren-medium-grey);
    width: 100%;
}

/* ── Search clear button ──────────────────────────────────────── */
.bf-search-clear {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0 0.25rem;
    color: var(--ren-medium-grey); font-size: 0.75rem; cursor: pointer; z-index: 5;
    line-height: 1;
}
.bf-search-clear:hover { color: var(--ren-dark-grey); }
/* Push input text so it doesn't slide under the clear button */
.bf-suggestions-wrap:has(.bf-search-clear:not([hidden])) .search-input { padding-right: 1.75rem; }

/* ── Search suggestion dropdown ──────────────────────────────── */
.bf-suggestions-wrap { position: relative; flex-grow: 1; min-width: 0; }
.bf-suggestions-wrap .form-control { border-radius: 0; }
.quick-search-bar .bf-suggestions-wrap .form-control,
.bf-home-search-form .bf-suggestions-wrap .form-control { border-top-left-radius: 20px !important; border-bottom-left-radius: 20px !important; }
.bf-suggestions {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1060;
    background: var(--ren-white);
    border: 1px solid var(--ren-light-grey); border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: hidden;
    list-style: none; margin: 0; padding: 0;
}
.bf-suggestions--above {
    top: auto; bottom: calc(100% + 2px);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.12);
}
.bf-suggestion {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; font-size: 0.875rem;
    cursor: pointer; color: var(--ren-dark-grey);
    border-bottom: 1px solid var(--ren-light-grey);
}
.bf-suggestion:last-child { border-bottom: none; }
.bf-suggestion:hover, .bf-suggestion--active { background: var(--ren-beige); color: var(--ren-black); }
.bf-suggestion-text { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; white-space: nowrap; }
.bf-suggestion-text > :first-child { overflow: hidden; text-overflow: ellipsis; }
.bf-suggestion-sub { font-size: 0.75rem; color: var(--ren-medium-grey); overflow: hidden; text-overflow: ellipsis; }
.bf-suggestion-icon {
    font-size: 0.875rem; color: var(--ren-medium-grey); flex-shrink: 0;
}
.bf-suggestion-loading {
    display: flex; justify-content: center; align-items: center;
    padding: 0.6rem; color: var(--ren-medium-grey);
}
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bf-suggestion-spinner { display: inline-block; animation: bf-spin 0.7s linear infinite; }

/* ── Error page ───────────────────────────────────────────────── */
.error-page { padding: 30px; }
.error-page h1 { color: var(--ren-primary); margin-bottom: 12px; }
.error-message { color: var(--ren-primary); padding: 16px; }

/* ── Collections tree ─────────────────────────────────────────── */
.coll-sidebar-heading {
    font-size: 0.6875rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ren-dark-grey);
    border-bottom: 1px solid var(--ren-light-grey);
    padding-bottom: 0.3rem; margin-bottom: 0.5rem;
}
.coll-empty-tree { font-size: 0.8125rem; color: var(--ren-medium-grey); }
.coll-tree { list-style: none; padding: 0; margin: 0; }
.coll-tree--child { padding-left: 1rem; }
.coll-tree-item { margin: 1px 0; }
.coll-tree-row { display: flex; align-items: center; gap: 2px; }
.coll-tree-row--leaf { padding-left: 0; }
.coll-toggle {
    background: none; border: none; padding: 2px 3px;
    color: var(--ren-medium-grey); cursor: pointer; flex-shrink: 0; line-height: 1;
    transition: transform 0.15s;
}
.coll-toggle[aria-expanded="true"] .coll-chevron { transform: rotate(90deg); }
.coll-chevron { display: inline-block; transition: transform 0.15s; font-size: 0.625rem; }
.coll-leaf-spacer { display: inline-block; width: 20px; flex-shrink: 0; }
.coll-node-form { flex: 1; min-width: 0; }
.coll-node-btn {
    background: none; border: none; padding: 3px 4px;
    font-size: 0.8rem; text-align: left; width: 100%;
    cursor: pointer; color: var(--ren-dark-grey);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 3px;
}
.coll-node-btn:hover { background: var(--ren-light-grey); color: var(--ren-black); }
.coll-node-btn--parent { font-weight: 600; }
.coll-node-btn--leaf { color: var(--ren-primary); }
.coll-node-btn--leaf:hover { color: var(--ren-black); }
.coll-prompt {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1rem; color: var(--ren-medium-grey); text-align: center;
}
.coll-prompt-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.coll-prompt p { font-size: 0.9rem; margin: 0; }
.coll-no-results { font-size: 0.875rem; color: var(--ren-medium-grey); padding: 1rem 0; }

/* active collection filter indicator */
.coll-active-filter {
    display: flex; align-items: center; justify-content: space-between; gap: 0.25rem;
    background: var(--ren-beige); border: 1px solid var(--ren-light-grey);
    border-radius: 4px; padding: 3px 6px; margin-bottom: 0.5rem; font-size: 0.8rem;
}
.coll-active-name { font-weight: 600; color: var(--ren-dark-grey); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-active-clear {
    background: none; border: none; padding: 0 2px; cursor: pointer;
    color: var(--ren-medium-grey); font-size: 1rem; line-height: 1; flex-shrink: 0;
}
.coll-active-clear:hover { color: var(--ren-primary); }

/* breadcrumb */
.coll-breadcrumb {
    font-size: 0.8125rem; color: var(--ren-medium-grey);
    margin-bottom: 0.625rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
}
.coll-bc-link {
    background: none; border: none; padding: 0; color: var(--ren-primary);
    cursor: pointer; font-size: inherit; text-decoration: underline;
}
.coll-bc-link:hover { color: var(--ren-black); }
.coll-bc-sep { color: var(--ren-medium-grey); }
.coll-bc-current { color: var(--ren-dark-grey); font-weight: 600; }

/* ── Context pill bar (Collections / My Lists) ─────────────────── */
.bf-context-bar {
    background: var(--ren-white);
    border-bottom: 1px solid var(--ren-light-grey);
    padding: 0.375rem 0;
    position: relative;
    z-index: 101;
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);*/
}
.ctx-pill-wrap { position: relative; }
.ctx-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.3rem 0.75rem 0.2rem;
    font-size: var(--font-size-small); color: var(--ren-dark-grey);
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer; white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
    border-radius: 0;
}
.ctx-pill:hover { color: var(--ren-black); }
.ctx-pill[aria-expanded="true"] { color: var(--ren-black); border-bottom-color: var(--ren-primary); }
.ctx-pill--active { color: var(--ren-primary); }
.ctx-pill-caret { font-size: 0.625rem; opacity: 0.7; transition: transform 0.15s; }
.ctx-pill[aria-expanded="true"] .ctx-pill-caret { transform: rotate(180deg); }

/* Mega panel — dropdown flush below the pill bar */
.ctx-mega-panel {
    position: absolute; top: 100%;
    min-width: 240px; width: max-content; max-width: 420px;
    background: var(--ren-white);
    border: 1px solid var(--ren-light-grey);
    border-top: none;
    border-radius: 0 0 1px 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    z-index: 100;
    animation: ctxFadeIn 0.12s ease;
}
.ctx-mega-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
    pointer-events: none;
    z-index: 1;
}
@keyframes ctxFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Collections grid */
.ctx-coll-screen-wrap { overflow: hidden; }
.ctx-coll-header {
    padding: 0.4rem 0 0.5rem;
    border-bottom: 1px solid var(--ren-light-grey);
    margin-bottom: 0.25rem;
}
.ctx-coll-back {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 0.8125rem; color: var(--ren-primary);
    display: flex; align-items: center; gap: 0.25rem;
}
.ctx-coll-back:hover { color: var(--ren-primary-hover); }
.ctx-coll-items {
    padding: 0.25rem 0;
    max-height: 60vh; overflow-y: auto;
}
.ctx-coll-items--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0;
}
.ctx-coll-items--grid form { display: contents; }
.ctx-coll-items--list form { display: block; }
.ctx-coll-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem; color: var(--ren-dark-grey);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 4px;
}
.ctx-coll-item:hover { background: var(--ren-beige); color: var(--ren-black); }
.ctx-coll-item--active { font-weight: 700; color: var(--ren-primary); }
.ctx-coll-item--parent { font-weight: 500; }
.ctx-coll-item--all { font-style: italic; border-bottom: 1px solid var(--ren-light-grey); margin-bottom: 0.25rem; padding-bottom: 0.5rem; }

/* Phones: keep Collections / Textbooks / Teacher lists on one row (labels wrap to two lines
   if they must, e.g. in Spanish) and open the panels full-width instead of under the pill. */
@media (max-width: 575.98px) {
    .bf-context-bar > .container-xl { flex-wrap: nowrap !important; gap: 0 !important; align-items: stretch !important; }
    .ctx-pill-wrap { display: flex; flex: 0 1 auto; min-width: 0; }
    .ctx-pill {
        flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.375rem 0.2rem;
        white-space: normal; text-align: left; line-height: 1.2; letter-spacing: 0.02em;
    }
    .ctx-pill-caret { flex-shrink: 0; }
    /* !important: bookfinder.js sets an inline left to line the panel up under its pill */
    .ctx-mega-panel { left: 0 !important; right: 0; width: auto; min-width: 0; max-width: none; }
    .ctx-coll-items--grid { grid-template-columns: 1fr; }
    .ctx-coll-item { padding: 0.6rem 0.75rem; }
}

/* Teacher list items — name + comment two-line layout */
.ctx-list-items { padding: 0.25rem 0; max-height: 60vh; overflow-y: auto; }
.ctx-list-item-btn {
    display: block;
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 4px;
}
.ctx-list-item-btn:hover { background: var(--ren-beige); }
.ctx-list-item-name {
    font-size: 0.875rem; font-weight: 600;
    color: var(--ren-dark-grey);
    display: block;
}
.ctx-list-item-comment {
    font-size: 0.75rem; color: var(--ren-medium-grey);
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 480px;
}
@media (max-width: 575px) {
    .ctx-list-item-comment { display: none; }
}

.ctx-list-loading { font-size: 0.8125rem; }