/**
 * @Author: Waris Agung Widodo <user>
 * @Date:   2018-01-22T10:46:36+07:00
 * @Email:  ido.alit@gmail.com
 * @Filename: style.css
 * @Last modified by:   user
 * @Last modified time: 2018-01-26T11:08:52+07:00
 */

@import url('../../../../css/core.css');

/* ── Poppins Local Font ── */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins/poppins-v21-latin-800.woff2') format('woff2');
}

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 54px;
}

/* ── Global Font: Poppins (local) ── */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
input,
select,
textarea,
button,
label {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ══════════════════════════════════
   PRELOADER
══════════════════════════════════ */
#tit-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 55%, #f8823a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
    opacity: 1;
    visibility: visible;
}

#tit-preloader.preloader-done {
    opacity: 0;
    visibility: hidden;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.preloader-logo {
    width: 130px;
    height: auto;
    object-fit: contain;
    animation: preloaderEntrance 0.6s cubic-bezier(.22, 1, .36, 1) both,
        preloaderFloat 3s ease-in-out 0.6s infinite;
    filter: drop-shadow(0 8px 24px rgba(82, 111, 255, 0.5));
}

@keyframes preloaderEntrance {
    from {
        opacity: 0;
        transform: scale(0.6) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes preloaderFloat {

    0%,
    100% {
        transform: translateY(0px);
        filter: drop-shadow(0 8px 24px rgba(82, 111, 255, 0.5));
    }

    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 20px 32px rgba(248, 130, 58, 0.5));
    }
}

.preloader-logo-text {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.preloader-label {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.c-header {
    min-height: 400px;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 55%, #f8823a 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

/* ── Running Text Marquee ── */
.running-text-bar {
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 50%, #f8823a 100%);
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
}

.running-text-content {
    display: inline-block;
    animation: marqueeScroll 20s linear infinite;
}

.running-text-content span {
    display: inline-block;
    padding: 0 60px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}

.c-header .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(5, 17, 42, 0.55);
}

.c-header .hero-content {
    position: relative;
    z-index: 2;
    padding: 160px 0 60px;
}

.c-header .hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #ffffff;
}

.c-header .hero-subtitle {
    max-width: 740px;
    color: rgba(255, 255, 255, 0.87);
    font-size: 1.05rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.c-header .hero-actions .btn {
    min-width: 170px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    transition: color .2s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #f8823a;
}

.navbar-dark .navbar-brand {
    color: #ffffff;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.16);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-search {
    min-width: 280px;
    max-width: 420px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-search::placeholder {
    color: rgba(255, 255, 255, 0.68);
}

.search {
    margin-top: -90px;
    position: relative;
    z-index: 3;
}

.search .card {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 24px;
}

.search .card-body {
    padding: 1.35rem 1.5rem;
}

.search .input-transparent {
    border: none;
    outline: none;
    background: transparent;
    font-size: 16pt;
    color: #1f334d;
}

.search .input-transparent::placeholder {
    font-weight: 400;
    color: #7d8b9a;
}

.site-footer {
    background: linear-gradient(135deg, #1a1060 0%, #526fff 50%, #f8823a 100%);
    color: rgba(255, 255, 255, 0.85);
    padding-top: 16px;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.site-footer a:hover {
    color: #f8823a;
}

.site-footer .footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Heading with left accent border ── */
.site-footer .footer-heading {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
}

.site-footer .footer-heading-accent {
    border-left: 4px solid #f8823a;
    padding-left: 12px;
}

/* ── Subheading ── */
.site-footer .footer-subheading {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
    border-left: 4px solid #f8823a;
    padding-left: 12px;
}

/* ── Description text ── */
.site-footer .footer-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

/* ── Nav link list (with icon + text items) ── */
.site-footer .footer-nav-list {
    margin-bottom: 0;
}

.site-footer .footer-nav-list li {
    margin-bottom: 6px;
}

.site-footer .footer-nav-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.site-footer .footer-nav-list li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
}

.site-footer .footer-nav-list li a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Contact list ── */
.site-footer .footer-contact-list {
    margin-bottom: 8px;
}

.site-footer .footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}

.site-footer .footer-contact-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Map ── */
.site-footer .footer-map-wrap {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* ── Date/time row ── */
.site-footer .footer-datetime {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Bottom bar ── */
.site-footer .footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767.98px) {
    .c-header .hero-content {
        padding-top: 120px;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .search .card {
        margin: 0 1rem;
    }
}

/* Search bar below banner — hidden (use navbar search instead) */
#search-wraper,
.search {
    display: none !important;
}

.search input {
    padding-right: 35px;
}

.search .input-transparent {
    border: none;
    outline: none;
    background: transparent;
    font-size: 16pt;
}

.search .input-transparent::placeholder {
    font-weight: 200;
    color: #ccc;
}

.search .card {
    background-image: url('../images/icon/ios7-search.png');
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 30px;
}

.shadow {
    box-shadow: 0 0 4px rgba(0, 0, 0, .05), 0 6px 10px rgba(0, 0, 0, .08);
}

.topic {
    list-style: none;
}

.topic li {
    width: 160px;
    height: 160px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.topic li a {
    font-size: 12px;
    color: #666;
    text-align: center;
    text-decoration: none;
    opacity: 0.8;
}

.topic li a:hover {
    text-decoration: none;
    opacity: 1;
}

.text-thin {
    font-weight: 200 !important;
}

.subtitle-section {
    font-size: 12px;
}

.btn-rounded {
    border-radius: 20px 20px 20px 20px;
    padding-left: 32px;
    padding-right: 32px;
    font-weight: 200;
}

.card-text.title {
    font-size: 12px;
}

.link-see-more {
    font-style: italic;
    color: #999;
    text-decoration: none;
}

.link-see-more:hover {
    color: #666;
    text-decoration: none;
}

.advanced-wraper {
    background: #fff;
    padding: 16px;
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    border-radius: 4px;
    z-index: 999;
}

.card-image-rounded {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    background: #ccc;
}

.card-image {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
}

.card-image img,
.card-image-rounded img {
    width: 102%;
    height: 102%;
    margin-top: -1%;
    margin-left: -1%;
}

.collection .card-text {
    font-size: 12px;
}

.result-search .c-header {
    min-height: 160px;
}

.member-area .c-header {
    min-height: 40px;
}

.item p {
    font-size: 10pt;
}

.authors a {
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.availability {
    text-align: center;
    overflow: hidden;
}

.availability .label {
    font-size: 7pt;
    color: #aaa;
}

.availability .value {
    font-size: 28pt;
    font-weight: 200;
}

.add-to-chart {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #606f7b;
    color: #f8fafc;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.add-to-chart .label {
    color: #f8fafc;
}

.availability:hover .add-to-chart {
    opacity: 1;
}

.availability:hover .availability-content {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

.biblioPaging {
    text-align: center;
    border-top: 1px solid #dae1e7;
    padding-top: 20px;
}

.biblioPaging:first-child {
    margin-bottom: 1rem;
    border-bottom: 1px solid #dae1e7;
    border-top: none;
    padding-bottom: 20px;
    padding-top: 0px;
}

.biblioPaging .pagingList {
    display: inline-flex;
    justify-content: center;
    background: #dae1e7;
    border-radius: 20px;
}

.biblioPaging .pagingList b,
.biblioPaging .pagingList a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.biblioPaging .pagingList b {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 20px;
    min-width: 38px;
    box-shadow: 0px 0px 10px #007bff;
}

.biblioPaging .pagingList a {
    color: #3d4852;
    background-color: transparent;
}

.biblioPaging .pagingList a:hover {
    color: #007bff;
}

.biblioPaging .pagingList a.first_link {
    padding-left: 20px;
}

.biblioPaging .pagingList a.last_link {
    padding-right: 20px;
}

.sugestion {
    min-height: 80px;
    margin-top: 16px;
    padding-left: 60px;
}

.sugestion .title {
    font-weight: 600;
}

.sugestion .author {
    color: #839CB5;
}

.container-img {
    width: 60px;
    position: absolute;
    top: -10px;
    left: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.sugestion .card-text {
    font-size: 12px;
}

.text-label {
    font-weight: bold !important;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active below version 2.1.8 */
    {
    transform: translateX(10px);
    opacity: 0;
}

/* Card elevation */

.elevation-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.elevation-1:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.elevation-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.elevation-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.elevation-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.elevation-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.page-member-area .memberButton,
.jsonResultLink,
.xmlResultLink {
    font-weight: 400;
    color: #007bff;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.jsonResultLink:hover,
.xmlResultLink:hover {
    color: #0056b3;
    text-decoration: none;
}

.jsonResultLink:focus,
.xmlResultLink:focus {
    text-decoration: none;
    box-shadow: none;
}

.jsonResultLink:disabled,
.xmlResultLink:disabled {
    color: #6c757d;
    pointer-events: none;
}

.biblioMarkFormAction {
    display: none;
}

.memberInfoHead {
    font-size: 24px;
    font-weight: bold;
    border-left: 4px solid #848484;
    padding: 2px 4px 2px 16px;
    margin-bottom: 16px;
}

.page-member-area .tagline {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 1.5rem;
}

.page-member-area .memberButton {
    background-color: #0074e7;
    color: white;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

.page-member-area .memberButton:hover {
    background-color: #0085ff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .05), 0 6px 10px rgba(0, 0, 0, .08);
}

.page-member-area .errorBox {
    color: #fd423d;
    padding: 1rem;
    background-color: rgba(255, 67, 61, 0.22);
    border-radius: 4px;
    margin-bottom: 1rem;
}

.page-member-area .loginInfo {
    padding: 0.5rem 0;
}

.page-member-area .fieldLabel {
    font-weight: bold;
    padding: 0.2rem 0;
}

.page-member-area .form-control {
    width: 320px;
}

.librarian {
    display: flex;
    margin-bottom: 1.5rem;
    flex: 0 50%;
}

.span2 {
    width: 12rem;
}

.span2 div:first-child {
    padding: 2rem;
    background: #dae1e7;
    border-radius: 4px;
}

.span2 img {
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.span8 {
    flex: 1;
    padding: 0 1rem 0 1rem;
}

.span8 .row-fluid {
    display: flex;
}

.span8 .row-fluid .key {
    flex: 0 0 100px;
    font-weight: bold;
}

.span8 .row-fluid .value {
    flex: 1;
}

.span8 .librarian-social {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── Librarian Profile Responsive ── */
@media (max-width: 767.98px) {
    .librarian {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        padding: 1.5rem 1.25rem !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 2rem !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .span2 {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 160px !important;
        margin-bottom: 1.25rem !important;
    }

    .span2 div:first-child {
        padding: 1rem !important;
        background: #f1f5f9 !important;
        border-radius: 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .span2 img {
        border-radius: 8px !important;
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .span8 {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .span8 .row-fluid {
        flex-direction: column;
        align-items: center;
        margin-bottom: .75rem;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
        padding-bottom: .5rem;
    }

    .span8 .row-fluid:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .span8 .row-fluid .key {
        flex: unset !important;
        font-size: .8rem;
        color: #64748b;
        margin-bottom: 3px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .span8 .row-fluid .value {
        font-size: .95rem;
        font-weight: 600;
        color: #0f172a;
        word-break: break-all;
    }

    .span8 .librarian-social {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: .25rem;
    }
}

#loginForm form {
    width: 20rem;
}

#loginForm .heading1 {
    font-weight: bold;
}

#loginForm .login_input input {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 8px;
}

#loginForm .homeButton {
    display: none;
}

.loginButton {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#loginForm .loginButton {
    margin-top: 10px;
}

#loginForm .loginButton {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

#loginForm .loginButton:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

#adv-modal .modal-content,
#adv-modal .modal-footer {
    position: relative;
    z-index: 1;
}

#adv-modal .modal-content:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../images/logo-big.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: 500px;
    background-position-y: 250px;
    z-index: 0;
    opacity: 0.5;
}

.attachList {
    padding: 4px 24px;
}

.attachList li {
    padding: 4px 0;
}

.comment-found {
    display: inline-block;
    margin-bottom: 8px;
}

.comments {
    padding: 8px 0;
    border-top: 1px dotted #cbd5e0;
}

.comments .comment-member {
    font-size: 10pt;
    font-weight: bold;
}

.comments .comment-content {
    color: #4a5568;
}

#vio {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 99999999999;
    background: #f56565;
    padding: 8px 0;
    color: #fff5f5;
}

#vio a {
    color: #2d3748;
}

#colorbox {
    border-radius: 5px;
}

#cboxLoadedContent {
    padding: 10px;
}

#cboxOverlay {
    background: #404040;
}

#cboxTitle {
    font: 10pt/1.8 'Quicksand', sans-serif;
    font-weight: bold;
    padding: 15px 0;
    background: #000000;
    bottom: 0;
    color: #ffffff;
}

#cboxTopLeft,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomRight {
    width: 0;
    height: 0;
}

#cboxMiddleLeft,
#cboxMiddleRight {
    width: 0;
}

#cboxBottomCenter,
#cboxTopCenter {
    height: 0;
}

#languageMenuButton::after {
    display: none;
}

.s-chat {
    display: none;
    flex-direction: column;
    width: 320px;
    height: 480px;
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    z-index: 99;
}

.s-chat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: #EF6C00;
    z-index: 0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.s-chat div,
.s-chat a,
.s-chat footer {
    position: relative;
    z-index: 10;
}

#show-pchat {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 20;
    top: 0;
    right: 0;
    background-color: white;
    border-bottom-left-radius: 4px;
    cursor: pointer;
}

#show-pchat i {
    display: none;
}

#show-pchat:hover {
    opacity: .9;
}

#show-pchat:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f2d1";
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
}

.s-chat-header {
    font-size: 24px;
    font-weight: 300;
    color: #ebf8ff;
    line-height: 1.2;
}

.s-chat-content.text-center {
    position: relative;
}

.s-chat-content.text-center form {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 16px;
    margin-top: 4px;
}

.s-chat-content.text-center p:first-of-type {
    text-align: left;
    font-size: 14px;
    color: #FFE0B2;
    font-weight: 300;
    margin: 0 -16px;
    line-height: 1;
}

.s-chat-content.text-center hr {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 378px;
    z-index: 1;
}

.s-chat-content.text-center label {
    z-index: 10;
    position: relative;
    margin-top: 20px;
    font-size: 14px;
}

.s-chat-content.text-center input#message {
    z-index: 10;
    position: relative;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: 16px;
}

.s-chat-content input#message:focus,
.s-chat-content.text-center input#message:focus {
    color: #495057;
    background-color: #fff;
    border-color: #FFCC80;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 204, 128, .25);
}

.s-chat-content label {
    z-index: 10;
    position: relative;
}

.s-chat-content input#message {
    z-index: 10;
    position: relative;
    display: inline-block;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: 8px;
}

.s-chat-content .btn.btn-block {
    border: 1px solid #E65100;
    position: relative;
    z-index: 10;
    font-size: 14px;
    background-color: #EF6C00;
    color: #FFF3E0;
}

.s-chat-content .btn.btn-block:hover {
    background-color: #F57C00;
}

.s-chat-content:not(.text-center) {
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    height: 370px;
    margin: 8px 0;
    padding: 16px;
    font-size: 14px;
}

.s-chat-content #log {
    height: 270px;
    background-color: white;
    margin: -16px -16px 8px -16px;
    border-radius: 8px 8px 0 0;
    padding: 16px;
    border-bottom: 1px solid #e3e3e3;
    overflow-y: scroll;
}

.s-chat footer {
    font-size: 11px;
    padding: 16px;
    display: none;
}

.s-chat footer:not(.text-center) {
    font-size: 11px;
    padding: 0;
    display: block;
}

.remember_forgot {
    display: flex;
    justify-content: space-between;
}

.expand {
    margin: 0 -1.25rem -1.25rem -1.25rem;
}

.navbar-collapse.collapsing,
.navbar-collapse.collapse.show {
    background-color: #2d3748;
    padding: 16px;
    z-index: 99;
    border-radius: 4px;
    margin-top: 8px;
}

.forgotButton {
    float: right;
    text-decoration: none;
    padding-top: 16px;
    color: #718096;
}

.forgotButton:hover {
    text-decoration: none;
    color: #4299E1;
}

.highlight {
    color: red;
}

.biblioPagingTop {
    display: none;
}

.grid-item {
    font-size: 12.04px;
    font-family: "Open Sauce One", sans-serif;
}

.grid-item--title {
    box-sizing: border-box;
    color: rgb(33, 33, 33);
    cursor: pointer;
    display: -webkit-box;
    line-height: 18.0667px;
    margin-bottom: 4px;
    max-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    word-break: keep-all;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.grid-item .list-group-item {
    padding: .25rem .5rem;
    display: flex;
    justify-content: space-between;
}

.grid-item .list-group-item label {
    color: #6D7588;
    padding: 0;
    margin: 0;
}

img.not-available {
    filter: grayscale(.9);
}

.grid-item--menu {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 10;
}

.grid-item--menu .dropdown-toggle {
    text-decoration: none;
    color: inherit;
}

.grid-item--menu .dropdown-toggle::after {
    display: none;
}

pre.sf-dump,
pre.sf-dump .sf-dump-default {
    z-index: 888 !important;
}

.availability-item {
    color: white;
    padding: 10px;
    border-radius: 5px
}

.item-onloan,
.item-notforloan {
    background-color: #f00;
    width: 100%;
    display: block;
}

.item-available {
    background-color: #5bc0de;
}

.item-onreserve {
    background-color: orange;
}

/* ============================================================
   RESPONSIVE & MODERN HOMEPAGE OVERRIDES
   ============================================================ */

/* Flexbox gap fallbacks */
.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

/* Hero Section Responsiveness */
@media (max-width: 991.98px) {
    .c-header {
        min-height: 500px !important;
    }

    .c-header .hero-content {
        padding: 110px 15px 40px !important;
        text-align: center !important;
    }

    .c-header .hero-actions {
        justify-content: center !important;
    }
}

@media (max-width: 575.98px) {
    .c-header {
        min-height: 380px !important;
    }

    .c-header .hero-content {
        padding: 85px 15px 30px !important;
    }

    .c-header .hero-title {
        font-size: 28px !important;
    }

    .c-header .hero-subtitle {
        font-size: 13.5px !important;
        margin-bottom: 1.25rem !important;
        margin-top: 0.5rem !important;
    }

    .c-header .hero-actions .btn {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
}

/* Modern & Responsive Topic Section */
.slims-topic-section .topic {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
}

.slims-topic-section .topic>li {
    width: 140px !important;
    height: 155px !important;
    max-width: 140px !important;
    margin: 0 !important;
    background: #f0f4f8 !important;
    /* light grey-blue background (matches GMD) */
    border: 1px solid rgba(7, 24, 48, 0.06) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.slims-topic-section .topic>li:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    /* white background on hover */
    border-color: rgba(31, 76, 139, 0.2) !important;
    box-shadow: 0 8px 28px rgba(7, 24, 48, 0.12) !important;
}

.slims-topic-section .topic>li>a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    padding: 16px 10px 12px !important;
}

/* White circular background wrapper for icons */
.slims-topic-section .topic>li .topic-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 100%) !important;
    box-shadow: 0 4px 12px rgba(82, 111, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
}

.slims-topic-section .topic>li:hover .topic-icon-wrap {
    transform: scale(1.08) !important;
}

.slims-topic-section .topic>li>a img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
}

/* Topic text style */
.slims-topic-section .topic>li .topic-title {
    color: #071830 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 46px !important;
}

@media (max-width: 767px) {
    .slims-topic-section .topic {
        gap: 12px !important;
    }

    .slims-topic-section .topic>li {
        width: 110px !important;
        height: 130px !important;
        max-width: 110px !important;
        border-radius: 12px !important;
    }

    .slims-topic-section .topic>li .topic-icon-wrap {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }

    .slims-topic-section .topic>li>a img {
        width: 28px !important;
        height: 28px !important;
    }

    .slims-topic-section .topic>li .topic-title {
        font-size: 11px !important;
        min-height: 38px !important;
    }

    .slims-topic-section .topic>li>a {
        padding: 12px 6px 8px !important;
    }
}

/* Map Section Responsiveness */
#slims-home iframe.embed-responsive {
    width: 100% !important;
    height: 300px !important;
    border-radius: 12px;
}

@media (min-width: 768px) {
    #slims-home iframe.embed-responsive {
        height: 420px !important;
    }
}

@media (max-width: 767.98px) {
    #slims-home .col-md-6 {
        margin-top: 24px;
    }
}

/* ============================================================
   GMD STATS SECTION — Simple Counter Style
   ============================================================ */
.gmd-stats-section {
    background: #ffffff;
    padding: 48px 0;
}

.gmd-stats-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
}

.gmd-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

/* Rounded-square icon */
.gmd-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 100%) !important;
    box-shadow: 0 4px 12px rgba(82, 111, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gmd-stat-item:hover .gmd-stat-icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gmd-stat-icon svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
}

/* Number */
.gmd-stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #1a2a3a;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Label */
.gmd-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7b8d;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .gmd-stats-section {
        padding: 32px 0;
    }

    .gmd-stats-row {
        gap: 24px;
    }

    .gmd-stat-item {
        min-width: 100px;
    }

    .gmd-stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .gmd-stat-icon svg {
        width: 22px;
        height: 22px;
    }

    .gmd-stat-number {
        font-size: 24px;
    }

    .gmd-stat-label {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .gmd-stats-row {
        gap: 16px;
    }

    .gmd-stat-item {
        min-width: 80px;
        flex: 0 0 calc(33.333% - 16px);
    }

    .gmd-stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .gmd-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .gmd-stat-number {
        font-size: 20px;
    }

    .gmd-stat-label {
        font-size: 9px;
    }
}

/* ══════════════════════════════════
   SEARCH RESULTS PAGE ENHANCEMENT
══════════════════════════════════ */

/* ── Sidebar Filter Card ── */
.result-search .col-md-3 {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 24px !important;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    align-self: flex-start;
}

.result-search .col-md-3 h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2d2d4e;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #edf2f7;
    position: relative;
}

.result-search .col-md-3 h4::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #526fff;
}

/* ── Sidebar List Items ── */
#search-filter .list-group-item {
    border-color: #f1f5f9 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#search-filter .list-group-item strong {
    font-weight: 600;
    color: #334155;
    font-size: 13.5px;
}

#search-filter .form-check {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#search-filter .form-check-input {
    margin-top: 0;
    cursor: pointer;
}

#search-filter .form-check-label {
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    margin-left: 6px;
    line-height: 1.4;
}

#search-filter a[data-toggle="collapse"] {
    color: #526fff;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

#search-filter a[data-toggle="collapse"]:hover {
    color: #f8823a;
}

#search-filter .btn-primary {
    background: linear-gradient(135deg, #526fff, #9c68f2);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(82, 111, 255, 0.2);
    transition: all 0.2s ease;
}

#search-filter .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(82, 111, 255, 0.3);
}

/* ── Ion.RangeSlider Theme ── */
.irs--flat .irs-line {
    background-color: #f1f5f9 !important;
    height: 6px !important;
    border-radius: 99px !important;
}

.irs--flat .irs-bar {
    background: linear-gradient(90deg, #526fff, #9c68f2) !important;
    height: 6px !important;
}

.irs--flat .irs-handle {
    width: 18px !important;
    height: 18px !important;
    background-color: #ffffff !important;
    border: 3.5px solid #526fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(82, 111, 255, 0.3) !important;
    top: 20px !important;
    cursor: grab !important;
}

.irs--flat .irs-handle>i:first-child {
    display: none !important;
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
    background-color: #f8823a !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
}

.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
    border-top-color: #f8823a !important;
}

.js-input-from,
.js-input-to {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    height: 32px !important;
    text-align: center;
}

/* ── Search Found Top bar ── */
.search-found-info {
    font-size: 14px;
    color: #475569;
}

.search-found-info-keywords {
    color: #526fff;
}

.custom-select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13px !important;
    height: 34px !important;
    color: #334155 !important;
}

/* ── Search Result Cards (List view) ── */
.result-search .card.item {
    background: #ffffff;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 20px !important;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.result-search .card.item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.result-search .card.item .card-body {
    padding: 24px !important;
}

.result-search .card.item h5 a {
    font-weight: 700;
    color: #1e293b !important;
    font-size: 16px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.result-search .card.item h5 a:hover {
    color: #526fff !important;
    text-decoration: none;
}

.result-search .card.item img.rounded {
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── Author Badges ── */
.authors .btn-outline-secondary {
    background: rgba(82, 111, 255, 0.08) !important;
    border: none !important;
    color: #526fff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    border-radius: 30px !important;
    padding: 4px 14px !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    transition: all 0.2s ease !important;
}

.authors .btn-outline-secondary:hover {
    background: #526fff !important;
    color: #ffffff !important;
}

/* ── Availability box on right ── */
.card.availability {
    background: rgba(82, 111, 255, 0.04) !important;
    border: 1.5px solid rgba(82, 111, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}

.card.availability.avail-zero {
    background: rgba(248, 130, 58, 0.04) !important;
    border-color: rgba(248, 130, 58, 0.1) !important;
}

.availability .label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b !important;
}

.availability .value {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #526fff !important;
    line-height: 1.2;
}

.availability .value.text-danger {
    color: #f8823a !important;
}

.add-to-chart {
    background: #526fff !important;
}

.add-to-chart .label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* ── Buttons on the right ── */
.result-search .col-2 .btn-outline-secondary {
    border-radius: 8px !important;
    border: 1.5px solid rgba(82, 111, 255, 0.25) !important;
    color: #526fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.result-search .col-2 .btn-outline-secondary:hover {
    background: #526fff !important;
    border-color: #526fff !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ── Expand detail collapse ── */
.result-search .card.item .expand {
    border-top: 1px solid #f1f5f9;
}

.result-search .card.item .expand a {
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.2s;
}

.result-search .card.item .expand a:hover {
    color: #526fff;
}

/* ── Pagination ── */
.biblioPaging {
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 30px;
}

.biblioPaging:first-child {
    border-bottom: 1px solid #e2e8f0 !important;
}

.biblioPaging .pagingList {
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 999px !important;
}

.biblioPaging .pagingList b,
.biblioPaging .pagingList a {
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    transition: all 0.2s;
    margin: 0 2px;
}

.biblioPaging .pagingList b {
    background: #526fff !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(82, 111, 255, 0.3);
}

.biblioPaging .pagingList a:hover {
    background: rgba(82, 111, 255, 0.08) !important;
    color: #526fff !important;
    text-decoration: none;
}

/* ── Other/Static Page Card Styles ── */
.other-page-card {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    border: none !important;
    margin-bottom: 40px;
}

.other-page-title {
    font-size: 24px;
    font-weight: 700;
    color: #2d2d4e !important;
    margin-bottom: 12px;
}

.other-page-content {
    color: #475569;
    line-height: 1.8;
    font-size: 15px;
}

.other-page-content h2,
.other-page-content h3,
.other-page-content h4,
.other-page-content h5 {
    color: #2c2c4d;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 14px;
}

.other-page-content hr {
    border-top: 1px solid #e2e8f0;
    margin: 20px 0;
}

/* ══════════════════════════════════════════════════════════
   Login Card & Form Styles (Member + Librarian)
   ══════════════════════════════════════════════════════════ */

/* Card container */
.login-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(82, 111, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid rgba(82, 111, 255, 0.08);
}

/* Card header with gradient accent */
.login-card-header {
    background: linear-gradient(135deg, #1a1060 0%, #526fff 60%, #f8823a 100%);
    padding: 36px 32px 28px;
    text-align: center;
    position: relative;
}

.login-card-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 24px;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
}

/* Icon circle */
.login-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.login-icon-circle i {
    font-size: 24px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.login-icon-librarian {
    background: rgba(248, 130, 58, 0.2);
    border-color: rgba(248, 130, 58, 0.35);
}

/* Card titles */
.login-card-title {
    color: #ffffff !important;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.login-card-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* Card body */
.login-card-body {
    padding: 28px 32px 36px;
}

/* ── Override SLiMS default login form classes ── */

/* Tagline (member login heading) */
.login-card-body .tagline {
    display: none;
    /* Hidden because we have the card header title */
}

/* Login info / description text */
.login-card-body .loginInfo {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Field labels */
#loginForm .heading1,
.login-card-body .fieldLabel,
.login-card-body .heading1 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2d2d4e !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.login-card-body .marginTop {
    margin-top: 20px;
}

/* Input wrappers & inputs */
#loginForm form {
    width: 100% !important;
}

#loginForm .login_input {
    margin-bottom: 14px !important;
}

#loginForm .login_input input,
#loginForm input[type="text"],
#loginForm input[type="password"],
.login-card-body .login_input input,
.login-card-body .login_input .form-control,
.login-card-body input.login_input {
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #2d2d4e !important;
    background: #f8fafc !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

#loginForm .login_input input:focus,
#loginForm input[type="text"]:focus,
#loginForm input[type="password"]:focus,
.login-card-body .login_input input:focus,
.login-card-body .login_input .form-control:focus,
.login-card-body input.login_input:focus {
    border-color: #526fff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(82, 111, 255, 0.12) !important;
    outline: none !important;
}

#loginForm .login_input input::placeholder,
.login-card-body .login_input input::placeholder,
.login-card-body input.login_input::placeholder {
    color: #a0aec0 !important;
    font-weight: 400;
}

/* Login / Submit buttons */
#loginForm .loginButton,
.login-card-body .memberButton,
.login-card-body .loginButton,
.login-card-body input[name="logMeIn"] {
    width: 100% !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #526fff 0%, #7c4dff 100%) !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(82, 111, 255, 0.3);
    margin-top: 16px !important;
    display: block !important;
}

#loginForm .loginButton:hover,
.login-card-body .memberButton:hover,
.login-card-body .loginButton:hover,
.login-card-body input[name="logMeIn"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(82, 111, 255, 0.4);
}

#loginForm .loginButton:active,
.login-card-body .memberButton:active,
.login-card-body .loginButton:active,
.login-card-body input[name="logMeIn"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(82, 111, 255, 0.25);
}

/* Home button */
#loginForm .homeButton,
.login-card-body .homeButton,
.login-card-body input[value="Home"] {
    width: 100% !important;
    padding: 11px 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #ffffff !important;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    margin-top: 10px !important;
    display: block !important;
    text-align: center;
    text-decoration: none;
}

#loginForm .homeButton:hover,
.login-card-body .homeButton:hover,
.login-card-body input[value="Home"]:hover {
    border-color: #526fff !important;
    color: #526fff !important;
}

/* Remember me / Forgot password */
.login-card-body .remember_forgot {
    margin-bottom: 8px;
}

.login-card-body .remember_forgot .remember {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-card-body .remember_forgot .remember label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 0;
    cursor: pointer;
}

.login-card-body .remember_forgot .remember input[type="checkbox"] {
    accent-color: #526fff;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Captcha area */
.login-card-body .captchaMember,
.login-card-body .captchaAdmin {
    margin: 16px 0;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
}

/* Flash / Alert messages inside login */
.login-card-body .alert {
    border-radius: 10px;
    font-size: 13.5px;
    border: none;
    padding: 12px 16px;
}

.login-card-body .alert-danger {
    background: #fef2f2;
    color: #dc2626;
}

.login-card-body .alert-success {
    background: #f0fdf4;
    color: #16a34a;
}

/* #loginForm wrapper from librarian login */
#loginForm {
    /* Reset any existing styles */
}

/* Forgot password link */
.login-card-body .forgotButton,
.login-card-body a[href*="forgot"] {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: #526fff;
    text-decoration: none;
    font-weight: 500;
}

.login-card-body .forgotButton:hover,
.login-card-body a[href*="forgot"]:hover {
    text-decoration: underline;
}

/* Registration link styling in member area */
.page-member-area .login-card-body a {
    color: #526fff;
    font-weight: 500;
}

.page-member-area .login-card-body a:hover {
    color: #3b50c0;
}

/* ── Peminjam Teraktif Styles ── */
.borrower-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}

.borrower-item {
    flex: 1 1 170px;
    max-width: 200px;
}

.borrower-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.borrower-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(82, 111, 255, 0.08);
    border-color: rgba(82, 111, 255, 0.2);
}

.borrower-rank-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid #ffffff;
    z-index: 2;
}

.borrower-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 3px;
    border: 2.5px solid #526fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: #ffffff;
}

.borrower-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.borrower-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #2d2d4e !important;
    margin: 0 0 4px 0 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.borrower-inst {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 0 16px 0 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.borrower-badge {
    background: rgba(82, 111, 255, 0.07);
    color: #526fff;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.borrower-card:hover .borrower-badge {
    background: #526fff;
    color: #ffffff;
}

/* ── Visitor Statistics Section ── */
.visitor-stats-section {
    position: relative;
    overflow: hidden;
}

.visitor-stats-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(82, 111, 255, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.visitor-stats-section::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.visitor-stats-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.visitor-stats-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #526fff 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(82, 111, 255, 0.25);
}

.visitor-stats-icon-wrap i {
    font-size: 20px;
    color: #ffffff;
}

.visitor-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.visitor-stat-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease;
    overflow: hidden;
}

.visitor-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    transition: height 0.3s ease;
}

.visitor-stat-today::before {
    background: linear-gradient(90deg, #526fff, #6ea3ff);
}

.visitor-stat-week::before {
    background: linear-gradient(90deg, #526fff, #9c68f2);
}

.visitor-stat-month::before {
    background: linear-gradient(90deg, #3b82f6, #526fff);
}

.visitor-stat-total::before {
    background: linear-gradient(90deg, #526fff, #7c3aed);
}

.visitor-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(82, 111, 255, 0.08);
}

.visitor-stat-card:hover::before {
    height: 5px;
}

.visitor-stat-today:hover,
.visitor-stat-week:hover,
.visitor-stat-month:hover,
.visitor-stat-total:hover {
    border-color: rgba(82, 111, 255, 0.25);
}

.visitor-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: transform 0.3s ease;
}

.visitor-stat-card:hover .visitor-stat-icon {
    transform: scale(1.1);
}

.visitor-stat-today .visitor-stat-icon {
    background: rgba(82, 111, 255, 0.08);
    color: #526fff;
}

.visitor-stat-week .visitor-stat-icon {
    background: rgba(156, 104, 242, 0.08);
    color: #9c68f2;
}

.visitor-stat-month .visitor-stat-icon {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.visitor-stat-total .visitor-stat-icon {
    background: rgba(82, 111, 255, 0.08);
    color: #526fff;
}

.visitor-stat-icon i {
    font-size: 18px;
}

.visitor-stat-number {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.visitor-stat-today:hover .visitor-stat-number {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.visitor-stat-week:hover .visitor-stat-number {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.visitor-stat-month:hover .visitor-stat-number {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.visitor-stat-total:hover .visitor-stat-number {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.visitor-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.visitor-stat-date {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Responsive visitor stats ── */
@media (max-width: 991px) {
    .visitor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .visitor-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .visitor-stat-card {
        padding: 18px 12px 16px;
    }

    .visitor-stat-number {
        font-size: 26px;
    }

    .visitor-stat-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }

    .visitor-stat-icon i {
        font-size: 16px;
    }

    .visitor-stats-header {
        margin-bottom: 20px;
    }

    .visitor-stats-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .visitor-stats-icon-wrap i {
        font-size: 16px;
    }
}

/* ==========================================
   CSS SEPARATED FROM PHP TEMPLATES
   ========================================== */

/* ── Auto-adjust page top margin for fixed navbar on non-home pages ── */
@media (max-width: 991.98px) {

    .result-search,
    .member-area {
        margin-top: 76px !important;
    }
}

/* ──────────────────────────────────────────
   FROM _navbar.php STYLE BLOCK
   ────────────────────────────────────────── */
.navbar {
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 50%, #f8823a 100%);
    padding-top: .75rem;
    padding-bottom: .75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar .navbar-brand img,
.navbar .navbar-brand .rounded-circle {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
    transition: box-shadow .2s ease;
    flex-shrink: 0;
}

.navbar .navbar-brand:hover img,
.navbar .navbar-brand:hover .rounded-circle {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

.navbar .navbar-brand span.font-weight-bold {
    font-size: 1rem;
    letter-spacing: .2px;
    line-height: 1.2;
}

.navbar .navbar-brand .text-white-75 {
    color: rgba(255, 255, 255, .7) !important;
    font-size: .78rem;
}

.navbar-nav {
    gap: 2px;
}

.navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    font-size: .88rem;
    padding: .5rem 1rem;
    border-radius: 6px;
    position: relative;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.navbar-nav .nav-item.active .nav-link {
    color: #fff;
    background-color: transparent;
}

.navbar-nav .nav-item.active .nav-link::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 2px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
}

.navbar .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: .5rem;
    margin-top: .5rem;
}

.navbar .dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .9rem;
    color: #0c2340;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #f1f4f8;
    color: #526fff;
}

.navbar .dropdown-toggle::after {
    vertical-align: .15em;
}

.navbar .btn-outline-light.btn-sm {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    border-radius: 999px;
    padding: .35rem 1.1rem !important;
    font-size: .85rem;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
}

.navbar .btn-outline-light.btn-sm::after {
    margin-left: 2px !important;
}

.navbar .btn-outline-light.btn-sm:hover,
.navbar .btn-outline-light.btn-sm:focus,
.navbar .dropdown.show .btn-outline-light.btn-sm,
.navbar .nav-item.show .btn-outline-light.btn-sm {
    background-color: #fff !important;
    color: #526fff !important;
    border-color: #fff !important;
}

.navbar #navbarDropdown img.rounded-circle {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .4);
}

.navbar #languageMenuButton {
    padding: .35rem .5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .08);
}

.navbar #languageMenuButton:hover {
    background-color: rgba(255, 255, 255, .16);
}

.navbar .dropdown-header {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a94a6;
}

/* ---------- Search di navbar ---------- */
.navbar .nav-search {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 2rem;
    position: relative;
}

.navbar .nav-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    width: 100%;
    box-shadow: 0 2px 16px rgba(82, 111, 255, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    overflow: visible;
}

.navbar .nav-search-form:focus-within {
    max-width: 520px;
    box-shadow: 0 4px 24px rgba(82, 111, 255, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.18);
    border-color: rgba(82, 111, 255, 0.3);
    background: #fff;
}

/* ── Category selector (Custom Dropdown) ── */
.navbar .nav-search-category-custom {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-right: 1px solid #e8e8f0;
}

.navbar .category-trigger {
    background: transparent;
    border: none;
    outline: none;
    color: #526fff;
    font-weight: 600;
    font-size: .78rem;
    padding: .65rem .45rem .65rem .85rem;
    cursor: pointer;
    letter-spacing: .01em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    transition: color .2s ease;
}

.navbar .category-trigger:hover,
.navbar .category-trigger:focus {
    color: #3d5afe;
    outline: none;
}

.navbar .category-trigger i {
    font-size: .65rem;
    transition: transform .2s ease;
}

.navbar .nav-search-category-custom.show .category-trigger i {
    transform: rotate(180deg);
}

.navbar .category-options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(82, 111, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(82, 111, 255, 0.12);
    list-style: none;
    padding: 6px;
    margin: 6px 0 0 0;
    min-width: 140px;
    z-index: 1050;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}

.navbar .nav-search-category-custom.show .category-options-list {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.navbar .category-options-list li {
    padding: .5rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.navbar .category-options-list li:hover {
    background-color: #f1f5f9;
    color: #526fff;
}

.navbar .category-options-list li.active {
    background-color: #526fff;
    color: #ffffff !important;
}

/* ── Input ── */
.navbar .nav-search-form input[type="text"] {
    background: transparent;
    border: none;
    color: #1e1e3a;
    padding: .65rem .5rem .65rem .85rem;
    width: 100%;
    min-width: 0;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .01em;
}

.navbar .nav-search-form input[type="text"]::placeholder {
    color: #a0a0be;
    font-weight: 400;
    letter-spacing: .02em;
}

.navbar .nav-search-form input[type="text"]:focus {
    outline: none;
    box-shadow: none;
}

/* ── Submit button ── */
.navbar .nav-search-form button[type="submit"] {
    background: linear-gradient(135deg, #526fff 0%, #7c5cf5 50%, #9c68f2 100%);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    margin: 4px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(82, 111, 255, 0.25);
}

.navbar .nav-search-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #3d5afe 0%, #6b48e8 100%);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(82, 111, 255, 0.35);
}

.navbar .nav-search-form button[type="submit"]:active {
    transform: scale(0.97);
}

/* ── Keyboard shortcut hint ── */
.navbar .nav-search-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: .5rem;
    padding: .15rem .45rem;
    border-radius: 6px;
    background: #f0f1f5;
    color: #9a9ab8;
    font-size: .68rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    letter-spacing: .03em;
    border: 1px solid #e2e2ec;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.6;
}

@media (min-width: 992px) {
    .navbar .nav-search-shortcut {
        display: flex;
    }
}

/* ── Responsive adjustments ── */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .navbar .nav-search {
        max-width: 300px;
        margin: 0 .75rem;
    }

    .navbar .category-trigger {
        font-size: .72rem;
        padding: .65rem .3rem .65rem .65rem;
    }
}

@media (max-width: 991.98px) {
    .navbar .nav-search {
        max-width: 100%;
        width: 100%;
        margin: .5rem 0 .75rem;
        order: 2;
    }

    .navbar .nav-search-form {
        border-radius: 12px;
    }

    .navbar .nav-search-category-custom {
        display: none;
    }
}

.navbar>.container {
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .navbar>.container {
        flex-wrap: nowrap;
    }
}

.navbar-toggler {
    border: none;
    padding: .35rem .5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

@media (max-width: 991.98px) {

    /* ── Base navbar ── */
    .navbar {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    /* ── Brand ── */
    .navbar .navbar-brand img,
    .navbar .navbar-brand .rounded-circle {
        width: 36px !important;
        height: 36px !important;
        box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3);
    }

    .navbar-brand-text {
        margin-left: 2px;
    }

    .brand-title {
        font-size: .95rem !important;
        letter-spacing: -0.02em;
    }

    .brand-subtitle {
        display: none !important;
    }

    /* ── Collapse panel ── */
    .navbar-collapse {
        background: linear-gradient(160deg, #161048 0%, #2a3a9e 60%, #3b50c0 100%) !important;
        margin-top: 10px !important;
        padding: 0 !important;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

    /* ── Menu items ── */
    .navbar-nav {
        gap: 0 !important;
        padding: 10px 12px 6px;
    }

    .navbar-nav .nav-item .nav-link {
        padding: .6rem .9rem !important;
        border-radius: 10px;
        font-size: .88rem;
        font-weight: 500;
        color: rgba(255, 255, 255, .85) !important;
        display: flex;
        align-items: center;
        transition: all .2s ease;
    }

    .navbar-nav .nav-item .nav-link:hover {
        background-color: rgba(255, 255, 255, .07) !important;
        color: #fff !important;
    }

    .navbar-nav .nav-item.active .nav-link {
        background-color: rgba(255, 255, 255, .1) !important;
        color: #fff !important;
        font-weight: 600;
    }

    .navbar-nav .nav-item.active .nav-link::after {
        display: none;
    }

    /* ── Divider before Login/Lang section ── */
    .navbar-nav .nav-item.dropdown {
        position: relative;
    }

    /* ── Mobile bottom bar: Login + Language ── */
    .mobile-bottom-bar {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 12px 16px !important;
        border-top: 1px solid rgba(255, 255, 255, .08) !important;
        background: rgba(0, 0, 0, .12) !important;
    }

    .mobile-bottom-bar>.nav-item {
        list-style: none !important;
    }

    .mobile-bottom-bar>.nav-item:first-child {
        flex: 1 !important;
    }

    .mobile-bottom-bar>.nav-item:last-child {
        flex-shrink: 0 !important;
    }

    /* ── Login button mobile ── */
    .navbar .btn-outline-light.btn-sm {
        margin-top: 0 !important;
        width: 100%;
        justify-content: center !important;
        padding: .5rem 1rem !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        border-radius: 10px !important;
        font-size: .85rem;
    }

    .navbar .btn-outline-light.btn-sm:hover,
    .navbar .btn-outline-light.btn-sm:focus {
        background-color: rgba(255, 255, 255, .15) !important;
        border-color: rgba(255, 255, 255, .3) !important;
    }

    /* ── Language button mobile ── */
    .navbar #languageMenuButton {
        padding: .4rem .55rem !important;
        border-radius: 10px !important;
        background-color: rgba(255, 255, 255, .06) !important;
        border: 1px solid rgba(255, 255, 255, .12);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .navbar #languageMenuButton:hover {
        background-color: rgba(255, 255, 255, .12) !important;
    }

    /* ── Dropdown menus inside mobile ── */
    .navbar .dropdown-menu {
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, .05) !important;
        border-radius: 10px !important;
        margin-top: 4px !important;
        padding: 6px !important;
        border: 1px solid rgba(255, 255, 255, .06) !important;
    }

    .navbar .dropdown-item {
        color: rgba(255, 255, 255, .9) !important;
        border-radius: 8px;
        padding: .45rem 1rem !important;
        font-size: .85rem;
        transition: background-color .15s ease;
    }

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background-color: rgba(255, 255, 255, .08) !important;
        color: #fff !important;
    }

    .navbar .dropdown-header {
        color: rgba(255, 255, 255, .4) !important;
        font-size: .7rem;
        padding: .35rem 1rem;
    }

    .navbar .dropdown-divider {
        border-color: rgba(255, 255, 255, .08);
    }

    /* ── Nav link icons: visible only on mobile ── */
    .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .06);
        margin-right: 10px;
        font-size: .75rem;
        color: rgba(255, 255, 255, .6);
        flex-shrink: 0;
        transition: all .2s ease;
    }

    .navbar-nav .nav-item.active .nav-link .nav-link-icon {
        background: rgba(82, 111, 255, .35);
        color: #fff;
    }

    .navbar-nav .nav-item .nav-link:hover .nav-link-icon {
        background: rgba(255, 255, 255, .1);
        color: rgba(255, 255, 255, .85);
    }
}

/* ── Nav link icons: hidden on desktop ── */
@media (min-width: 992px) {
    .nav-link-icon {
        display: none !important;
    }
}

/* ── Mobile bottom bar: desktop fallback (inline in navbar) ── */
.mobile-bottom-bar {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 16px;
}

@media (min-width: 992px) {
    .mobile-bottom-bar {
        background: transparent !important;
        border-top: none !important;
        padding: 0 !important;
        gap: 16px;
        align-items: center;
    }

    .mobile-bottom-bar>.nav-item:first-child {
        flex: unset;
    }

    .mobile-bottom-bar>.nav-item {
        list-style: none;
    }

    #navbarSupportedContent {
        align-items: center;
    }
}

/* ──────────────────────────────────────────
   FROM _result-search.php STYLE BLOCK
   ────────────────────────────────────────── */
/* ── Filter collapse chevron rotation ── */
.btn[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {

    /* ── Container: reduce side padding ── */
    .result-search .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ── Book card item: tighter padding ── */
    .result-search .card.item .card-body {
        padding: .65rem !important;
    }

    /* ── Title: smaller on mobile ── */
    .result-search .card.item h5 {
        font-size: .85rem !important;
        line-height: 1.35;
        margin-bottom: .25rem !important;
    }

    .result-search .card.item h5 a {
        font-weight: 600 !important;
    }

    /* ── Author pills: compact ── */
    .result-search .authors a.btn-rounded {
        padding: 2px 10px !important;
        font-size: 10px !important;
        margin-right: 4px !important;
        margin-bottom: 4px !important;
        border-radius: 12px !important;
    }

    .result-search .authors {
        padding-top: .25rem !important;
        padding-bottom: .15rem !important;
    }

    /* ── Notes/description: clamp to 2 lines ── */
    .result-search .card.item .col-8>p,
    .result-search .card.item .col-8.col-md-8>p {
        font-size: .75rem !important;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: .25rem !important;
        color: #666;
    }

    /* ── Action row (Comment/Bookmark/Share) ── */
    .result-search .card.item .d-flex.text-xs a {
        padding: 2px 4px !important;
        margin-right: 2px !important;
    }

    .result-search .card.item .d-flex.text-xs svg {
        width: 13px;
        height: 13px;
    }

    /* ── Book cover image: constrain height ── */
    .result-search .card.item .col-4 img {
        max-height: 140px;
        object-fit: cover;
        border-radius: 6px !important;
    }

    /* ── Cards spacing ── */
    .result-search .card.item.mb-6 {
        margin-bottom: .75rem !important;
    }

    /* ── Sorting bar: full-width select ── */
    .result-search .form-inline .custom-select-sm {
        flex: 1;
        min-width: 0;
    }

    /* ── Grid view: 2 columns on mobile ── */
    .result-search .grid-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* ── Empty result image: constrain ── */
    .result-search .wrapper img[src*="empty"] {
        max-width: 180px;
    }

    /* ── Section top margin: reduce on mobile ── */
    .result-search>section.mt-5 {
        margin-top: 1.5rem !important;
    }

    /* ── Pagination: compact on mobile ── */
    .biblioPaging .pagingList {
        flex-wrap: wrap;
        border-radius: 12px;
    }

    .biblioPaging .pagingList b,
    .biblioPaging .pagingList a {
        padding: .25rem .5rem !important;
        font-size: .8rem !important;
    }
}


/* ── GMD Grid Layout ── */
.gmd-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.gmd-grid-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gmd-grid-link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    text-decoration: none !important;
    gap: 16px;
}

.gmd-grid-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 100%);
    box-shadow: 0 4px 10px rgba(82, 111, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.gmd-grid-icon-wrap i {
    color: #ffffff;
    font-size: 16px;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmd-grid-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gmd-grid-title {
    color: #1e293b;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.gmd-grid-subtitle {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

/* Hover effects */
.gmd-grid-item:hover {
    background: linear-gradient(135deg, rgba(82, 111, 255, 0.06) 0%, rgba(156, 104, 242, 0.04) 100%);
    border-color: rgba(82, 111, 255, 0.25);
    box-shadow: 0 4px 20px rgba(82, 111, 255, 0.08);
}

.gmd-grid-item:hover .gmd-grid-icon-wrap {
    transform: scale(1.05);
}

.gmd-grid-item:hover .gmd-grid-title {
    color: #526fff;
}

/* Responsive GMD Grid */
@media (max-width: 991.98px) {
    .gmd-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .gmd-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .gmd-grid-link {
        padding: 10px 12px;
        gap: 10px;
    }

    .gmd-grid-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .gmd-grid-icon-wrap i {
        font-size: 13px;
    }

    .gmd-grid-title {
        font-size: 11.5px;
    }

    .gmd-grid-subtitle {
        font-size: 9px;
    }
}

/* ══════════════════════════════════════════
   VISITOR ROOM PAGE
   ══════════════════════════════════════════ */

/* Hide preloader on visitor page */
body:has(#visitor-counter) #tit-preloader {
    display: none !important;
}

/* ── Full-screen wrapper ── */
#visitor-counter {
    font-family: 'Poppins', sans-serif;
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(30, 30, 80, 0.55) 50%, rgba(82, 111, 255, 0.3) 100%);
    padding: 1rem;
}

/* ── Main card (glassmorphism) ── */
#visitor-counter .visitor-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.15);
    width: 100%;
    max-width: 480px;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    overflow: hidden;
    animation: visitorCardIn .5s cubic-bezier(.4, 0, .2, 1);
}

/* Decorative gradient stripe at top of card */
#visitor-counter .visitor-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 50%, #f8823a 100%);
}

/* ── Logo area ── */
#visitor-counter .visitor-logo {
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

#visitor-counter .visitor-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(82, 111, 255, 0.25);
    margin-bottom: 1.25rem;
}

/* ── Heading ── */
#visitor-counter .visitor-brand-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 .15rem;
}

#visitor-counter .visitor-brand-name {
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}

#visitor-counter .visitor-subtitle {
    color: #64748b;
    font-size: .85rem;
    font-weight: 400;
    margin: 0 0 1.75rem;
    line-height: 1.4;
}

/* ── Form labels ── */
#visitor-counter .visitor-form-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #475569;
    margin-bottom: .35rem;
    display: block;
}

/* ── Form inputs ── */
#visitor-counter .visitor-form-input {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: .7rem 1rem !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    height: auto !important;
    transition: all .25s ease !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    width: 100%;
}

#visitor-counter .visitor-form-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

#visitor-counter .visitor-form-input:focus {
    border-color: #526fff !important;
    box-shadow: 0 0 0 3px rgba(82, 111, 255, 0.12) !important;
    background: #ffffff !important;
    outline: none !important;
}

#visitor-counter .visitor-form-hint {
    color: #94a3b8;
    font-size: .72rem;
    margin-top: 6px;
    line-height: 1.4;
    display: block;
}

/* ── Info alert box (after check-in) ── */
#visitor-counter .visitor-info-box {
    background: linear-gradient(135deg, rgba(82, 111, 255, 0.08) 0%, rgba(156, 104, 242, 0.06) 100%);
    border: 1px solid rgba(82, 111, 255, 0.15);
    color: #3b5bdb;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: visitorSlideDown .35s cubic-bezier(.4, 0, .2, 1);
}

#visitor-counter .visitor-info-box .visitor-info-icon {
    color: #526fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Success card with avatar ── */
#visitor-counter .visitor-success-card {
    background: linear-gradient(135deg, #526fff 0%, #7c5cf5 50%, #9c68f2 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.25rem;
    animation: visitorFadeIn .5s ease;
    box-shadow: 0 8px 24px rgba(82, 111, 255, 0.3);
}

#visitor-counter .visitor-success-card .visitor-avatar-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}

#visitor-counter .visitor-success-card .visitor-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#visitor-counter .visitor-success-card .visitor-success-name {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 2px;
    line-height: 1.3;
}

#visitor-counter .visitor-success-card .visitor-success-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: .75rem;
    margin: 0;
    font-weight: 400;
}

/* ── Premium submit button ── */
#visitor-counter .btn-visitor-submit {
    background: linear-gradient(135deg, #526fff 0%, #7c5cf5 50%, #9c68f2 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: .75rem 1.5rem !important;
    color: #ffffff !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    box-shadow: 0 4px 14px rgba(82, 111, 255, 0.3) !important;
    transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

#visitor-counter .btn-visitor-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(82, 111, 255, 0.4) !important;
    filter: brightness(1.05);
}

#visitor-counter .btn-visitor-submit:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(82, 111, 255, 0.25) !important;
}

/* ── Divider ── */
#visitor-counter .visitor-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
}

#visitor-counter .visitor-divider::before,
#visitor-counter .visitor-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Quote section at bottom of card ── */
#visitor-counter .visitor-quote-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #f1f5f9;
}

#visitor-counter .visitor-quote-section .visitor-quote-text {
    color: #475569;
    font-size: .82rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 .4rem;
}

#visitor-counter .visitor-quote-section .visitor-quote-author {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 600;
    margin: 0;
}

#visitor-counter .visitor-quote-section .visitor-quote-author::before {
    content: "— ";
}

/* ── Footer ── */
#visitor-counter .visitor-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: #94a3b8;
    font-size: .7rem;
}

#visitor-counter .visitor-footer code {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .68rem;
    color: #526fff;
    font-weight: 600;
}

/* ── Quote section ── */
#visitor-counter .visitor-quote-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 14px;
    padding: 20px 22px 18px;
    border: 1px solid #e8ecf3;
    position: relative;
    overflow: hidden;
}

#visitor-counter .visitor-quote-icon {
    color: #526fff;
    font-size: 1.1rem;
    opacity: .25;
    margin-bottom: 8px;
}

#visitor-counter .visitor-quote-section .visitor-quote-text {
    color: #334155;
    font-size: .85rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 .5rem;
    min-height: 2.5em;
}

#visitor-counter .visitor-quote-section .visitor-quote-author {
    color: #526fff;
    font-size: .75rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .3px;
}

#visitor-counter .visitor-quote-section .visitor-quote-author::before {
    content: "— ";
    color: #94a3b8;
}

/* ── Quote fade transition ── */
.quote-fade-enter-active,
.quote-fade-leave-active {
    transition: all .4s ease;
}

.quote-fade-enter {
    opacity: 0;
    transform: translateY(8px);
}

.quote-fade-leave-to {
    opacity: 0;
    transform: translateY(-8px);
}

/* ── Animations ── */
@keyframes visitorCardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes visitorSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visitorFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Mobile responsive ── */
@media (max-width: 575.98px) {
    #visitor-counter {
        padding: .5rem;
        align-items: flex-start;
        padding-top: 1rem;
    }

    #visitor-counter .visitor-card {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 20px;
        max-width: 100%;
    }

    #visitor-counter .visitor-brand-title {
        font-size: 1.2rem;
    }

    #visitor-counter .visitor-brand-name {
        font-size: .9rem;
    }

    #visitor-counter .visitor-logo,
    #visitor-counter .visitor-logo-fallback {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
}

/* ── Scroll to Top Button ── */
.scroll-to-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #526fff 0%, #7c5cf5 50%, #9c68f2 100%);
    color: #ffffff !important;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(82, 111, 255, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}

.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top-btn:hover {
    box-shadow: 0 6px 20px rgba(82, 111, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
}

.scroll-to-top-btn i {
    font-size: 16px;
    transition: transform 0.3s;
}

.scroll-to-top-btn:hover i {
    transform: translateY(-2px);
}

/* ── Jam Operasional Custom Box ── */
.site-footer .footer-npp {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    font-size: 21px;
    margin-top: -8px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.jam-operasional-box {
    background-color: rgba(26, 16, 96, 0.95);
    border-top: 2px solid #ff9c5b;
    /* Highlighted top border */
    border-left: 2px solid #ff9c5b;
    /* Highlighted left border */
    border-bottom: 3.5px solid #b55314;
    /* Shadow bottom border */
    border-right: 3.5px solid #b55314;
    /* Shadow right border */
    color: #ffffff !important;
    text-align: center;
    padding: 16px 12px;
    border-radius: 12px;
    font-weight: 700;
    margin-top: 15px;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jam-operasional-box:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.65),
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.jam-operasional-box .jam-hari {
    font-size: 1.15rem;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.jam-operasional-box .jam-waktu {
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.9);
}

.jam-operasional-box .jam-tutup {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Custom SVG Icon for older FontAwesome versions ── */
.site-footer .footer-nav-list li a .custom-svg-icon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-footer .footer-nav-list li a .custom-svg-icon svg {
    width: 14px;
    height: 14px;
    fill: rgba(255, 255, 255, 0.6);
    transition: fill 0.2s ease;
}

.site-footer .footer-nav-list li a:hover .custom-svg-icon svg {
    fill: #ffffff;
}

/* Google Translate Widget Override */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner,
.goog-te-menu-value,
#goog-gt-tt,
.goog-tooltip,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
}
body {
    top: 0px !important;
    margin-top: 0px !important;
    position: static !important;
}
html {
    top: 0px !important;
}

/* ══════════════════════════════════════════════════════════════
   VISITOR PAGE — Split Panel Layout
   ══════════════════════════════════════════════════════════════ */

/* Full-screen background */
.vp-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('../images/slimsipt2.jpg');
    background-size: cover;
    background-position: center;
}

.vp-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 40, 0.62);
}

/* Wrapper — center the card */
body:has(#visitor-counter) #tit-preloader { display: none !important; }

#visitor-counter.vp-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: 'Poppins', sans-serif;
    z-index: 10;
    overflow: auto;
}

/* Welcome text overlay bottom-left */
.vp-welcome-text {
    position: fixed;
    bottom: 2.5rem;
    left: 3rem;
    color: #fff;
    pointer-events: none;
    z-index: 5;
}

.vp-welcome-label {
    font-size: 1rem;
    font-weight: 500;
    opacity: .75;
    margin-bottom: .15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vp-welcome-name {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: .4rem;
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.vp-welcome-sub {
    font-size: .95rem;
    opacity: .7;
    font-weight: 400;
}

/* ── Split card ── */
.vp-card {
    display: flex;
    width: 100%;
    max-width: 780px;
    min-height: 440px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.25);
    position: relative;
    z-index: 20;
}

/* LEFT panel — white form */
.vp-panel--form {
    flex: 0 0 58%;
    background: #ffffff;
    padding: 2.5rem 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Gradient top stripe */
.vp-panel--form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 55%, #f8823a 100%);
}

/* RIGHT panel — gradient quote */
.vp-panel--quote {
    flex: 0 0 42%;
    background: linear-gradient(160deg, #526fff 0%, #7c5cf5 45%, #9c68f2 100%);
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative circles on quote panel */
.vp-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}
.vp-deco--1 {
    width: 200px; height: 200px;
    top: -60px; right: -60px;
}
.vp-deco--2 {
    width: 140px; height: 140px;
    bottom: -40px; left: -40px;
    background: rgba(255,255,255,.06);
}

/* ── Form panel internals ── */
.vp-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vp-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.vp-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #526fff, #9c68f2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vp-heading {
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 .15rem;
}

.vp-lib-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.25;
    margin: 0 0 .25rem;
}

.vp-subtitle {
    font-size: .78rem;
    color: #64748b;
    margin: 0;
}

/* Success card */
.vp-success-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: linear-gradient(135deg, #526fff 0%, #9c68f2 100%);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 6px 20px rgba(82,111,255,.3);
}

.vp-avatar-ring {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    overflow: hidden;
    flex-shrink: 0;
}
.vp-avatar-ring img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.vp-success-name {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    margin: 0 0 .2rem;
}

.vp-success-sub {
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    margin: 0;
}

/* Form fields */
.vp-form { flex: 1; }

.vp-field { margin-bottom: 1.1rem; }

.vp-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .45rem;
}

.vp-input {
    display: block;
    width: 100%;
    padding: .65rem .9rem;
    font-size: .88rem;
    font-family: 'Poppins', sans-serif;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: none !important;
}
.vp-input::placeholder { color: #94a3b8 !important; }
.vp-input:focus {
    border-color: #526fff !important;
    box-shadow: 0 0 0 3px rgba(82,111,255,.12) !important;
    background: #fff !important;
}

.vp-hint {
    display: block;
    font-size: .7rem;
    color: #94a3b8;
    margin-top: .35rem;
}

/* Submit button */
.vp-btn-submit {
    width: 100%;
    padding: .75rem 1.5rem;
    margin-top: .5rem;
    font-size: .92rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #526fff 0%, #7c5cf5 50%, #9c68f2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: .03em;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(82,111,255,.35);
}
.vp-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(82,111,255,.45);
}
.vp-btn-submit:active { transform: translateY(0); }

/* Powered by */
.vp-powered {
    text-align: center;
    margin-top: 1.2rem;
    color: #94a3b8;
    font-size: .7rem;
}
.vp-powered code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .7rem;
    color: #526fff;
}

/* ── Quote panel internals ── */
.vp-quote-body {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1rem;
}

.vp-quote-icon {
    font-size: 1.8rem;
    color: rgba(255,255,255,.35);
    margin-bottom: 1rem;
}

.vp-quote-text {
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    color: #fff;
    line-height: 1.65;
    margin-bottom: 1.2rem;
}

.vp-quote-author {
    font-size: .8rem;
    color: rgba(255,255,255,.65);
    font-weight: 600;
    letter-spacing: .04em;
}

/* Quote transition */
.vp-quote-fade-enter-active,
.vp-quote-fade-leave-active { transition: opacity .5s ease, transform .5s ease; }
.vp-quote-fade-enter         { opacity: 0; transform: translateY(10px); }
.vp-quote-fade-leave-to      { opacity: 0; transform: translateY(-10px); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .vp-card {
        flex-direction: column;
        max-width: 100%;
        border-radius: 16px;
    }
    .vp-panel--form {
        flex: 1;
        padding: 2rem 1.5rem 1.5rem;
    }
    .vp-panel--quote {
        flex: 0 0 auto;
        padding: 1.5rem;
    }
    .vp-welcome-text { display: none; }
    .vp-panel-header { flex-direction: column; gap: .6rem; }
}

@media (max-width: 420px) {
    #visitor-counter.vp-wrapper { padding: .75rem; align-items: flex-start; }
    .vp-panel--form { padding: 1.5rem 1.2rem; }
    .vp-lib-name { font-size: .95rem; }
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE — Split Panel Layout
   ══════════════════════════════════════════════════════════════ */

/* Override section padding for login page */
.result-search section.container:has(.lp-wrapper) {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    max-width: 100%;
    padding: 0;
}

/* Wrapper */
.lp-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px);
    padding: 1.5rem;
}

/* Card */
.lp-card {
    display: flex;
    width: 100%;
    max-width: 760px;
    min-height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
}

/* ── LEFT panel ── */
.lp-panel--left {
    flex: 0 0 42%;
    background: linear-gradient(160deg, #1a1060 0%, #526fff 50%, #9c68f2 100%);
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.lp-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}
.lp-deco--1 {
    width: 240px; height: 240px;
    top: -80px; right: -80px;
}
.lp-deco--2 {
    width: 160px; height: 160px;
    bottom: -50px; left: -50px;
    background: rgba(255,255,255,.04);
}

/* Badge */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: .25rem .75rem;
    margin-bottom: 1.2rem;
    width: fit-content;
}
.lp-badge-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}
.lp-badge span {
    font-size: .62rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    letter-spacing: .08em;
}

/* Library name */
.lp-lib-name {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 .4rem;
}

.lp-lib-sub {
    font-size: .75rem;
    color: rgba(255,255,255,.65);
    margin: 0 0 1.2rem;
    line-height: 1.5;
}

/* Feature items */
.lp-features {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}

.lp-feature-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: .6rem .85rem;
    transition: background .2s;
}
.lp-feature-item:hover {
    background: rgba(255,255,255,.16);
}

.lp-feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(248,130,58,.22);
    border: 1px solid rgba(248,130,58,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f8823a;
    font-size: .78rem;
}

.lp-feature-title {
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .1rem;
}
.lp-feature-desc {
    font-size: .66rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* Left footer */
.lp-left-footer {
    font-size: .62rem;
    color: rgba(255,255,255,.4);
    margin: 1rem 0 0;
}

/* ── RIGHT panel ── */
.lp-panel--right {
    flex: 0 0 58%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Gradient top stripe on right panel */
.lp-panel--right::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #526fff 0%, #9c68f2 55%, #f8823a 100%);
}

/* Form wrap */
.lp-form-wrap {
    width: 100%;
    padding: 2.2rem 2.2rem 2rem;
}

.lp-form-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 .3rem;
}

.lp-form-subheading {
    font-size: .78rem;
    color: #64748b;
    margin: 0 0 1.2rem;
}

.lp-form-portal-label {
    font-size: .68rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: .12em;
    text-align: center;
    margin-bottom: 1.2rem;
    position: relative;
}
.lp-form-portal-label::before,
.lp-form-portal-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%;
    height: 1px;
    background: #e2e8f0;
}
.lp-form-portal-label::before { left: 0; }
.lp-form-portal-label::after  { right: 0; }

/* Reuse login-card-body styles but override for lp context */
.lp-form-body {
    padding: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .lp-card {
        flex-direction: column;
        max-width: 480px;
        border-radius: 16px;
    }
    .lp-panel--left {
        flex: 0 0 auto;
        padding: 2rem 1.6rem;
    }
    .lp-panel--right {
        flex: 1;
    }
    .lp-features { gap: .55rem; }
    .lp-lib-name { font-size: 1.3rem; }
    .lp-lib-sub  { margin-bottom: 1.2rem; }
}

@media (max-width: 480px) {
    .lp-wrapper { padding: .75rem; align-items: flex-start; }
    .lp-form-wrap { padding: 2rem 1.4rem 1.8rem; }
    .lp-form-heading { font-size: 1.4rem; }
}