/* Zavier theme-owned stylesheet; visual tokens are finalized by css/theme.css. */
/* Source: app/Modules/Opac/Views/index.php */

.opac-catalog-page {
    min-height: 100vh;
    padding: 32px 20px 76px;
    color: var(--opac-text);
    background: transparent;
}

.opac-catalog-shell { width: 100%; max-width: 1380px; margin: 0 auto; }
.opac-page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 24px 32px; background: #fff; border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
.opac-page-back, .opac-page-heading-icon, .opac-search-heading > span, .opac-quick-menu > a > span, .opac-sidebar-heading > span, .opac-empty > span { display: inline-flex; align-items: center; justify-content: center; }
.opac-page-back { flex: 0 0 42px; width: 42px; height: 42px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border: 1px solid #c8dbef; border-radius: 10px; text-decoration: none; }
.opac-page-back:hover, .opac-page-back:focus { color: #fff; background: var(--opac-blue); border-color: var(--opac-blue); }
.opac-page-heading-icon { flex: 0 0 46px; width: 46px; height: 46px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 10px; }
.opac-page-header svg { width: 21px; height: 21px; }
.opac-page-header h1 { margin: 0; color: var(--opac-text); font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.opac-page-header p { margin: 3px 0 0; color: var(--opac-muted); font-size: .86rem; }

.opac-banner { height: 280px; margin-bottom: 24px; overflow: hidden; background: #dce8f4; border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
.opac-banner .carousel-inner, .opac-banner .carousel-item { height: 100%; }
.opac-banner img { width: 100%; height: 100%; object-fit: cover; }

.opac-search-panel, .opac-sidebar-panel, .opac-results { overflow: hidden; background: #fff; border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
.opac-search-panel { margin-bottom: 24px; }
.opac-search-heading { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid #e6edf5; }
.opac-search-heading > span { flex: 0 0 38px; width: 38px; height: 38px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 10px; }
.opac-search-heading svg { width: 19px; height: 19px; }
.opac-search-heading h2, .opac-results-header h2, .opac-sidebar-title h2, .opac-sidebar-heading h2 { margin: 0; color: var(--opac-text); font-size: .96rem; font-weight: 700; }
.opac-search-heading p, .opac-results-header p { margin: 2px 0 0; color: var(--opac-muted); font-size: .74rem; }
.opac-search-panel form { padding: 16px; }
.opac-search-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 9px; }
.opac-search-category, .opac-search-input { position: relative; margin: 0; }
.opac-search-category select, .opac-search-input input, .opac-advanced-grid input { width: 100%; min-height: 46px; padding: 10px 13px; color: var(--opac-text); background: #fff; border: 1px solid #b9cadb; border-radius: 10px; outline: 0; font-size: .84rem; }
.opac-search-category select { padding-right: 36px; appearance: none; }
.opac-search-category > svg { position: absolute; top: 50%; right: 13px; width: 16px; height: 16px; color: #74899e; transform: translateY(-50%); pointer-events: none; }
.opac-search-input > svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: #74899e; transform: translateY(-50%); }
.opac-search-input input { padding-left: 43px; }
.opac-search-category select:focus, .opac-search-input input:focus, .opac-advanced-grid input:focus { border-color: var(--opac-blue); box-shadow: 0 0 0 3px rgba(31, 95, 174, .12); }
.opac-search-row > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 9px 20px; color: #fff; background: var(--opac-blue); border: 1px solid var(--opac-blue); border-radius: 10px; font-size: .82rem; font-weight: 700; }
.opac-search-row > button svg { width: 17px; height: 17px; }
.opac-filter-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 5px 2px; color: var(--opac-blue-dark); background: transparent; border: 0; font-size: .75rem; font-weight: 700; }
.opac-filter-toggle svg { width: 15px; height: 15px; }
.opac-filter-toggle svg:last-child { margin-left: 2px; }
.opac-advanced-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding-top: 12px; }
.opac-advanced-grid label { color: #52687e; font-size: .72rem; font-weight: 650; }
.opac-advanced-grid input { min-height: 42px; margin-top: 5px; }

.opac-quick-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.opac-quick-menu > a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px; color: inherit; background: #fff; border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); text-decoration: none; transition: transform 0.2s; }
.opac-quick-menu > a > span { grid-row: 1 / 3; width: 44px; height: 44px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 10px; }
.opac-quick-menu svg { width: 22px; height: 22px; }
.opac-quick-menu strong { color: #294158; font-size: .85rem; font-weight: 700; }
.opac-quick-menu small { color: var(--opac-muted); font-size: .7rem; }
.opac-quick-menu > a:hover { transform: translateY(-2px); }
.opac-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 16px; color: #8a4e21; background: #fff8eb; border: none; border-radius: 10px; font-size: .8rem; font-weight: 600; box-shadow: 0 4px 12px rgba(138, 78, 33, 0.05); }
.opac-alert svg { flex: 0 0 18px; width: 18px; height: 18px; }

.opac-content-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.opac-filter-sidebar { position: sticky; top: 92px; display: grid; gap: 16px; }
.opac-sidebar-heading { display: flex; align-items: center; gap: 11px; padding: 15px; }
.opac-sidebar-heading > span { width: 38px; height: 38px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 10px; }
.opac-sidebar-heading svg { width: 19px; height: 19px; }
.opac-sidebar-heading strong { display: block; color: var(--opac-blue-dark); font-size: 1.25rem; line-height: 1.2; }
.opac-sidebar-title { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #e7edf4; }
.opac-sidebar-title svg { width: 17px; height: 17px; color: var(--opac-blue); }
.opac-sidebar-panel ul { margin: 0; padding: 7px 14px; list-style: none; }
.opac-sidebar-panel li + li { border-top: 1px solid #edf2f6; }
.opac-sidebar-panel li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: #435a70; font-size: .73rem; text-decoration: none; }
.opac-sidebar-panel li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opac-sidebar-panel li a strong { flex: 0 0 auto; padding: 3px 7px; color: var(--opac-blue-dark); background: var(--opac-blue-soft); border-radius: 7px; font-size: .65rem; }

.opac-results-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #e6edf5; }
.opac-results-header > a { display: inline-flex; align-items: center; gap: 6px; color: var(--opac-blue); font-size: .74rem; font-weight: 700; text-decoration: none; }
.opac-results-header > a svg { width: 15px; height: 15px; }
.opac-book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; padding: 24px; }
.opac-book-card { min-width: 0; background: transparent; border: none; transition: transform 0.2s; border-radius: 10px; }
.opac-book-card:hover { transform: translateY(-4px); }
.opac-book-cover { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 2 / 3; background: #edf2f7; border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.opac-book-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.opac-book-card:hover .opac-book-cover img { transform: scale(1.025); }
.opac-cover-fallback { display: flex; width: 100%; height: 100%; padding: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #6c8298; text-align: center; }
.opac-cover-fallback[hidden] { display: none; }
.opac-cover-fallback svg { width: 30px; height: 30px; }
.opac-cover-fallback small { font-size: .67rem; font-weight: 650; }
.opac-book-badge { position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 5px 7px; color: var(--opac-blue-dark); background: rgba(255, 255, 255, .94); border-radius: 8px; box-shadow: 0 2px 8px rgba(23, 43, 67, .12); font-size: .62rem; font-weight: 700; }
.opac-book-badge svg { width: 12px; height: 12px; }
.opac-book-info { padding: 10px 2px 3px; }
.opac-book-info h3 { display: -webkit-box; min-height: 2.65em; margin: 0 0 4px; overflow: hidden; color: #20374e; font-size: .82rem; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.opac-book-info h3 a { color: inherit; text-decoration: none; }
.opac-book-info p, .opac-book-info small { display: block; margin: 0; overflow: hidden; color: var(--opac-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.opac-book-info small { margin-top: 2px; color: #8998a8; font-size: .65rem; }
.opac-empty { display: flex; min-height: 330px; padding: 28px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.opac-empty > span { width: 58px; height: 58px; margin-bottom: 14px; color: var(--opac-blue); background: var(--opac-blue-soft); border-radius: 10px; }
.opac-empty svg { width: 28px; height: 28px; }
.opac-empty h3 { margin: 0; color: var(--opac-text); font-size: .98rem; }
.opac-empty p { max-width: 440px; margin: 7px 0 17px; color: var(--opac-muted); font-size: .78rem; }
.opac-empty a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: #fff; background: var(--opac-blue); border-radius: 10px; font-size: .75rem; font-weight: 700; text-decoration: none; }
.opac-empty a svg { width: 15px; height: 15px; }
.opac-results-footer { display: flex; flex-direction: column; align-items: center; padding: 16px; border-top: 1px solid #e6edf5; }
.opac-results-footer > small { margin-top: 8px; color: var(--opac-muted); font-size: .68rem; }

@media (max-width: 991.98px) {
    .opac-content-grid { grid-template-columns: 1fr; }
    .opac-filter-sidebar { display: none; }
    .opac-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .opac-advanced-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .opac-catalog-page { padding: 76px 0 calc(92px + env(safe-area-inset-bottom)); }
    .opac-page-header { gap: 10px; margin: 0 0 12px; padding: 16px; border-radius: 10px; border: 1px solid #e8eef4; }
    .opac-page-heading-icon { display: none; }
    .opac-page-header p { font-size: .74rem; }
    .opac-banner { height: 160px; margin: 0; border-radius: 10px; border: 1px solid #e8eef4; overflow: hidden; }
    .opac-search-panel, .opac-results { margin: 0 0 12px; border-radius: 10px; border: 1px solid #e8eef4; box-shadow: none; }
    .opac-search-heading { padding: 13px 16px; }
    .opac-search-panel form { padding: 16px; }
    .opac-search-row { grid-template-columns: minmax(0, 1fr) auto; }
    .opac-search-category { grid-column: 1 / -1; }
    .opac-search-row > button { width: 46px; padding: 0; }
    .opac-search-row > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .opac-advanced-grid { grid-template-columns: 1fr; }
    .opac-quick-menu { display: flex; gap: 10px; margin: 0 0 12px; padding: 2px 16px 10px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .opac-quick-menu::-webkit-scrollbar { display: none; }
    .opac-quick-menu > a { flex: 0 0 154px; scroll-snap-align: start; }
    .opac-content-grid { display: block; }
    .opac-results-header { padding: 16px 20px; }
    .opac-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 20px; }
    .opac-book-info { padding: 12px 4px 4px; }
    .opac-book-info h3 { font-size: .8rem; }
    .opac-book-info p { font-size: .72rem; }
    .opac-book-info small { display: none; }
    .opac-results-footer { padding: 20px; }
}

@media (max-width: 360px) {
    .opac-book-grid { grid-template-columns: 1fr; }
    .opac-book-cover { max-width: 190px; margin: 0 auto; }
}