/*
==============================================================
DDC BROWSE
PM SHRI KENDRIYA VIDYALAYA KANJIKODE LIBRARY
==============================================================
*/


/* ============================================================
   ROOT
   ============================================================ */

.ddc-page {

    --ddc-text: #172033;
    --ddc-muted: #64748b;
    --ddc-border: #e2e8f0;
    --ddc-surface: #ffffff;
    --ddc-page-bg: #f6f7fb;

    max-width: 1180px;

    margin: 0 auto;

    padding:
        12px
        14px
        45px;

    color: var(--ddc-text);

}


/* ============================================================
   HERO
   ============================================================ */

.ddc-hero {

    position: relative;

    overflow: hidden;

    min-height: 170px;

    margin-bottom: 15px;

    padding:
        27px
        30px;

    border-radius: 21px;

    color: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, .16);

}


/* ------------------------------------------------------------
   Hero colours
   ------------------------------------------------------------ */

.ddc-purple {
    background:
        linear-gradient(
            135deg,
            #4c1d95 0%,
            #7c3aed 100%
        );
}

.ddc-pink {
    background:
        linear-gradient(
            135deg,
            #9d174d 0%,
            #db2777 100%
        );
}

.ddc-indigo {
    background:
        linear-gradient(
            135deg,
            #312e81 0%,
            #4f46e5 100%
        );
}

.ddc-orange {
    background:
        linear-gradient(
            135deg,
            #9a3412 0%,
            #f97316 100%
        );
}

.ddc-teal {
    background:
        linear-gradient(
            135deg,
            #115e59 0%,
            #0d9488 100%
        );
}

.ddc-blue {
    background:
        linear-gradient(
            135deg,
            #075985 0%,
            #0284c7 100%
        );
}

.ddc-green {
    background:
        linear-gradient(
            135deg,
            #166534 0%,
            #16a34a 100%
        );
}

.ddc-red {
    background:
        linear-gradient(
            135deg,
            #991b1b 0%,
            #ef4444 100%
        );
}

.ddc-violet {
    background:
        linear-gradient(
            135deg,
            #581c87 0%,
            #9333ea 100%
        );
}

.ddc-gold {
    background:
        linear-gradient(
            135deg,
            #713f12 0%,
            #ca8a04 100%
        );
}


/* ------------------------------------------------------------
   Hero decorative pattern
   ------------------------------------------------------------ */

.ddc-hero-pattern {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:

        radial-gradient(
            circle at 18% 25%,
            #ffffff 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 82% 70%,
            #ffffff 0 3px,
            transparent 4px
        );

    background-size:
        48px 48px,
        72px 72px;

}


/* ------------------------------------------------------------
   Hero content
   ------------------------------------------------------------ */

.ddc-hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 20px;

}


/* ------------------------------------------------------------
   Hero icon
   ------------------------------------------------------------ */

.ddc-hero-icon {

    width: 76px;

    height: 76px;

    flex: 0 0 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    background:
        rgba(255,255,255,.16);

    border:
        1px solid
        rgba(255,255,255,.25);

    font-size: 36px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.2);

}


/* ------------------------------------------------------------
   Hero text
   ------------------------------------------------------------ */

.ddc-kicker {

    margin-bottom: 5px;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .13em;

    opacity: .78;

}


.ddc-hero h1 {

    margin: 0;

    font-size:
        clamp(
            1.65rem,
            4vw,
            2.35rem
        );

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.025em;

}


.ddc-hero h1 span {

    font-weight: 500;

    opacity: .92;

}


.ddc-hero p {

    margin:
        7px
        0
        0;

    font-size: .9rem;

    opacity: .84;

}


/* ------------------------------------------------------------
   Hero count
   ------------------------------------------------------------ */

.ddc-hero-count {

    position: absolute;

    right: 25px;

    bottom: 18px;

    z-index: 3;

    display: flex;

    align-items: baseline;

    gap: 5px;

    opacity: .85;

}


.ddc-hero-count strong {

    font-size: 1.45rem;

}


.ddc-hero-count span {

    font-size: .72rem;

}


/* ============================================================
   DDC CLASS NAVIGATION
   ============================================================ */

.ddc-class-nav {

    margin-bottom: 15px;

    padding: 9px;

    border:
        1px solid
        var(--ddc-border);

    border-radius: 15px;

    background:
        #ffffff;

    box-shadow:
        0 4px 15px
        rgba(15,23,42,.05);

}


.ddc-class-nav-scroll {

    display: flex;

    gap: 7px;

    overflow-x: auto;

    padding:
        1px
        1px
        3px;

    scrollbar-width: thin;

}


.ddc-class-nav-scroll::-webkit-scrollbar {

    height: 4px;

}


.ddc-class-nav-scroll::-webkit-scrollbar-thumb {

    background:
        #cbd5e1;

    border-radius: 10px;

}


/* ============================================================
   CLASS BUTTONS
   ============================================================ */

.ddc-class-btn {

    position: relative;

    flex:
        0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-width: 82px;

    padding:
        7px
        11px;

    border:
        0;

    border-radius: 9px;

    color: #ffffff !important;

    text-decoration: none;

    box-shadow:
        0 2px 5px
        rgba(15,23,42,.12);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;

}


.ddc-class-btn:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 5px 12px
        rgba(15,23,42,.20);

}


.ddc-class-btn.active {

    color: #ffffff !important;

    box-shadow:
        0 5px 14px
        rgba(15,23,42,.24);

}


/* ------------------------------------------------------------
   Button colours
   ------------------------------------------------------------ */

.ddc-btn-purple {
    background: #7c3aed;
}

.ddc-btn-pink {
    background: #db2777;
}

.ddc-btn-indigo {
    background: #4f46e5;
}

.ddc-btn-orange {
    background: #ea580c;
}

.ddc-btn-teal {
    background: #0d9488;
}

.ddc-btn-blue {
    background: #0284c7;
}

.ddc-btn-green {
    background: #16a34a;
}

.ddc-btn-red {
    background: #dc2626;
}

.ddc-btn-violet {
    background: #9333ea;
}

.ddc-btn-gold {
    background: #ca8a04;
}


/* ------------------------------------------------------------
   Button text
   ------------------------------------------------------------ */

.ddc-class-number {

    font-family:
        "Roboto Mono",
        "Courier New",
        monospace;

    font-size: .8rem;

    font-weight: 900;

}


.ddc-class-name {

    font-size: .69rem;

    font-weight: 700;

    white-space: nowrap;

}


/* ============================================================
   SEARCH AREA
   ============================================================ */

.ddc-tools {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}


/* ------------------------------------------------------------
   Search box
   ------------------------------------------------------------ */

.ddc-search-box {

    position: relative;

    flex: 1;

}


.ddc-search-box > i {

    position: absolute;

    left: 14px;

    top: 50%;

    z-index: 2;

    transform:
        translateY(-50%);

    color:
        #64748b;

    pointer-events: none;

}


.ddc-search-box input {

    display: block;

    width: 100%;

    height: 44px;

    padding:
        0
        42px;

    border:
        1px solid
        #dbe2ea;

    border-radius: 11px;

    outline: none;

    background:
        #ffffff;

    color:
        #172033;

    font-size: .88rem;

    box-shadow:
        0 3px 10px
        rgba(15,23,42,.04);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;

}


.ddc-search-box input::placeholder {

    color:
        #94a3b8;

}


.ddc-search-box input:focus {

    border-color:
        #7c3aed;

    box-shadow:
        0 0 0 3px
        rgba(124,58,237,.10);

}


/* ------------------------------------------------------------
   Clear search
   ------------------------------------------------------------ */

.ddc-search-clear {

    position: absolute;

    right: 8px;

    top: 50%;

    width: 28px;

    height: 28px;

    transform:
        translateY(-50%);

    display: none;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 7px;

    background:
        #f1f5f9;

    color:
        #64748b;

    cursor: pointer;

}


.ddc-search-clear:hover {

    background:
        #e2e8f0;

    color:
        #111827;

}


/* ------------------------------------------------------------
   Result count
   ------------------------------------------------------------ */

.ddc-result-info {

    flex:
        0 0 auto;

    white-space: nowrap;

    color:
        #64748b;

    font-size: .76rem;

}


.ddc-result-info span {

    color:
        #111827;

    font-weight: 800;

}


/* ============================================================
   DDC LIST CONTAINER
   ============================================================ */

.ddc-list {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    column-gap: 18px;

    row-gap: 4px;

}


/* ============================================================
   DDC LIST ITEM
   ============================================================ */

.ddc-item {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-width: 0;

    min-height: 43px;

    padding:
        5px
        8px;

    border:
        1px solid
        #e5e7eb;

    border-radius: 8px;

    background:
        #ffffff;

    color:
        #111111 !important;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;

}


/* ------------------------------------------------------------
   Alternate row
   ------------------------------------------------------------ */

.ddc-item:nth-child(even) {

    background:
        #fafafa;

}


/* ============================================================
   MAIN CLASSIFICATION
   ============================================================ */

.ddc-item-main {

    padding-left:
        9px;

}


/* ============================================================
   INDENTED CLASSIFICATION
   ============================================================ */

.ddc-item-child {

    padding-left:
        32px;

}


/* ------------------------------------------------------------
   Vertical guide for child
   ------------------------------------------------------------ */

.ddc-item-child::before {

    content: "";

    position: absolute;

    left: 14px;

    top: 6px;

    bottom: 6px;

    width: 2px;

    border-radius: 2px;

    background:
        #e5e7eb;

}


/* ------------------------------------------------------------
   Child branch symbol
   ------------------------------------------------------------ */

.ddc-item-child::after {

    content: "↳";

    position: absolute;

    left: 3px;

    top: 50%;

    transform:
        translateY(-53%);

    color:
        #9ca3af;

    font-size: .8rem;

    font-weight: 700;

}


/* ============================================================
   DDC NUMBER
   ============================================================ */
/* ============================================================
   DDC NUMBER — PILL / BUTTON STYLE
   ============================================================ */

.ddc-item-number {

    flex: 0 0 auto;

    min-width: 68px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        4px
        8px;

    margin-right: 10px;

    border-radius: 7px;

    background: #148dd9;

    border: 1px solid #dee2e6;

    color: #ffffff !important;

    font-family:
        "Roboto Mono",
        "Courier New",
        monospace;

    font-size: .96rem;

    line-height: 1.2;

    font-weight: 900;

    white-space: nowrap;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.05);

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


/* ------------------------------------------------------------
   Hover — still black text
   ------------------------------------------------------------ */

.ddc-item:hover .ddc-item-number {

    background: #e9ecef;

    border-color: #ced4da;

    color: #000000 !important;

}

/* ============================================================
   SUBJECT
   ============================================================ */
/* ============================================================
   SUBJECT
   ============================================================ */

.ddc-item-subject {

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .94rem;

    line-height: 1.3;

    font-weight: 600;

    color: #111111 !important;
}
/* ============================================================
   ARROW
   ============================================================ */

.ddc-item-arrow {

    flex:
        0 0 24px;

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-left:
        5px;

    border-radius:
        50%;

    color:
        #94a3b8;

    background:
        #f1f5f9;

    font-size:
        .64rem;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;

}


/* ============================================================
   LIST ITEM HOVER
   ============================================================ */

.ddc-item:hover {

    color:
        #111111 !important;

    background:
        #f8fafc !important;

    border-color:
        #cbd5e1;

    transform:
        translateX(2px);

    box-shadow:
        0 3px 9px
        rgba(15,23,42,.06);

}


.ddc-item:hover
.ddc-item-number {

    color:
        #000000 !important;

}


.ddc-item:hover
.ddc-item-subject {

    color:
        #111111 !important;

}


.ddc-item:hover
.ddc-item-arrow {

    color:
        #ffffff;

    background:
        #7c3aed;

    transform:
        translateX(1px);

}


/* ============================================================
   NO RESULTS / EMPTY
   ============================================================ */

.ddc-no-results,
.ddc-empty {

    padding:
        55px
        20px;

    text-align:
        center;

    border:
        1px dashed
        #cbd5e1;

    border-radius:
        16px;

    background:
        #ffffff;

}


.ddc-no-results-icon,
.ddc-empty-icon {

    margin-bottom:
        10px;

    font-size:
        2.4rem;

}


.ddc-no-results h3,
.ddc-empty h3 {

    margin:
        0 0 5px;

    color:
        #1e293b;

    font-size:
        1.05rem;

}


.ddc-no-results p,
.ddc-empty p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        .84rem;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .ddc-page {

        padding-left:
            10px;

        padding-right:
            10px;

    }


    .ddc-list {

        column-gap:
            12px;

    }


    .ddc-item-number {

        flex-basis:
            76px;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .ddc-page {

        padding:
            8px
            9px
            35px;

    }


    .ddc-hero {

        min-height:
            145px;

        padding:
            21px;

        border-radius:
            18px;

    }


    .ddc-hero-content {

        gap:
            13px;

    }


    .ddc-hero-icon {

        width:
            57px;

        height:
            57px;

        flex-basis:
            57px;

        border-radius:
            15px;

        font-size:
            27px;

    }


    .ddc-kicker {

        font-size:
            .59rem;

    }


    .ddc-hero h1 {

        font-size:
            1.4rem;

    }


    .ddc-hero h1 span {

        display:
            block;

        margin-top:
            2px;

        font-size:
            .98rem;

    }


    .ddc-hero p {

        font-size:
            .75rem;

    }


    .ddc-hero-count {

        display:
            none;

    }


    .ddc-tools {

        display:
            block;

    }


    .ddc-result-info {

        margin-top:
            6px;

    }


    /*
     * One column on mobile.
     */

    .ddc-list {

        grid-template-columns:
            1fr;

        row-gap:
            4px;

    }


    .ddc-item {

        min-height:
            41px;

    }


    .ddc-item-number {

        flex-basis:
            75px;

    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .ddc-class-name {

        display:
            none;

    }


    .ddc-class-btn {

        min-width:
            62px;

        justify-content:
            center;

    }


    .ddc-item {

        min-height:
            40px;

        padding:
            5px
            7px;

    }


    .ddc-item-number {

        flex-basis:
            68px;

        font-size:
            .73rem;

    }


    .ddc-item-subject {

        font-size:
            .78rem;

    }


    .ddc-item-child {

        padding-left:
            27px;

    }


    .ddc-item-child::before {

        left:
            12px;

    }


    .ddc-item-child::after {

        left:
            2px;

    }


    .ddc-item-arrow {

        flex-basis:
            22px;

        width:
            22px;

        height:
            22px;

    }

}
/* ============================================================
   DDC PAGE + RIGHT SIDEBAR
   FINAL LAYOUT
   ============================================================ */


/* ------------------------------------------------------------
   OUTER PAGE
   ------------------------------------------------------------ */

.library-page-shell {
    width: calc(100% - 32px);
    max-width: 1600px;

    margin: -20px auto 40px;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   WHITE CARD
   ------------------------------------------------------------ */

.library-page-card {

    width: 100%;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e1e7ed;

    border-radius: 16px;

    box-shadow:
        0 4px 16px rgba(15, 37, 69, .06);

    box-sizing: border-box;
}


/* ============================================================
   MAIN TWO-COLUMN LAYOUT
   ============================================================ */
/* ============================================================
   DDC CONTENT + SIDEBAR
   9 / 3 LAYOUT
   ============================================================ */

.ddc-layout {
    display: grid !important;

    grid-template-columns:
        75% 25%;

    width: 100%;

    margin: 0;

    padding: 0;

    align-items: start;

    box-sizing: border-box;
}


/* ============================================================
   DDC MAIN CONTENT = col-lg-9
   ============================================================ */

.ddc-content {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    padding-right: 12px;

    box-sizing: border-box;
}


/* ============================================================
   SIDEBAR = col-lg-3
   ============================================================ */

.ddc-sidebar {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    padding-left: 12px;

    box-sizing: border-box;

    position: sticky;

    top: 85px;

    align-self: start;
}


.ddc-sidebar .catalogue-sidebar-card {
    width: 100%;
}


/* ============================================================
   DDC PAGE INSIDE LEFT COLUMN
   ============================================================ */

.ddc-content .ddc-page {
    width: 100%;

    max-width: none !important;

    margin: 0;

    padding-bottom: 40px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .ddc-layout {
        grid-template-columns: 70% 30%;
    }

    .ddc-content {
        padding-right: 9px;
    }

    .ddc-sidebar {
        padding-left: 9px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .ddc-layout {
        display: block !important;
    }

    .ddc-content {
        width: 100% !important;

        padding-right: 0;
    }

    .ddc-sidebar {
        width: 100% !important;

        margin-top: 25px;

        padding-left: 0;

        position: static;
    }

}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .library-page-shell {

        width: calc(100% - 12px);

    }


    .library-page-card {

        padding: 8px;

        border-radius: 12px;

    }


    .ddc-layout {

        display: flex !important;

        flex-direction: column !important;

        gap: 20px;

    }


    .ddc-content {

        width: 100% !important;

        flex: none !important;

    }


    .ddc-sidebar {

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        flex: none !important;

        position: static;

    }

}
/* ============================================================
   DDC PAGE — ISOLATED TWO COLUMN LAYOUT
   Overrides shared catalogue.css only on the DDC page
   ============================================================ */

.ddc-page-wrapper {
    width: calc(100% - 32px);
    max-width: 1600px;
    margin: -20px auto 40px;
}

.ddc-page-card {
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid #e1e7ed;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 37, 69, .06);
}


/* ============================================================
   DDC TWO COLUMN LAYOUT
   ============================================================ */

.ddc-page-wrapper .ddc-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        300px !important;

    gap: 24px;

    align-items: start;

    width: 100%;
}


/* LEFT */

.ddc-page-wrapper .ddc-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    grid-column: 1;
    grid-row: 1;
}


/* RIGHT */

.ddc-page-wrapper .ddc-sidebar {
    display: block !important;

    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    grid-column: 2;
    grid-row: 1;

    position: sticky;
    top: 85px;
}


/* Do not allow shared catalogue sidebar rules to interfere */

.ddc-page-wrapper .ddc-sidebar .catalogue-sidebar-card {
    width: 100%;
}


/* DDC itself must fill the left column */

.ddc-page-wrapper .ddc-content .ddc-page {
    width: 100%;
    max-width: none;
    margin: 0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .ddc-page-wrapper {
        width: calc(100% - 24px);
        margin-top: -12px;
    }

    .ddc-page-card {
        padding: 12px;
    }

    .ddc-page-wrapper .ddc-layout {
        grid-template-columns:
            minmax(0, 1fr)
            250px !important;

        gap: 18px;
    }

    .ddc-page-wrapper .ddc-sidebar {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .ddc-page-wrapper {
        width: calc(100% - 12px);
    }

    .ddc-page-card {
        padding: 8px;
    }

    .ddc-page-wrapper .ddc-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    .ddc-page-wrapper .ddc-content {
        width: 100% !important;
        flex: none !important;
    }

    .ddc-page-wrapper .ddc-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        position: static;
    }
}
/* =========================================================
   DDC RESULTS
   ========================================================= */

.ddc-results-page {
    max-width: 1450px;
    margin: auto;
    padding: 5px 15px 40px;
}


/* Breadcrumb */

.ddc-breadcrumb {
    font-size: .82rem;
    margin-bottom: 15px;
}

.ddc-breadcrumb a {
    text-decoration: none;
}


/* Header */

.ddc-result-hero {
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.16), transparent 25%),
        linear-gradient(135deg, #063b73, #0875c1);

    color: white;
    border-radius: 22px;

    padding: 25px;

    margin-bottom: 20px;

    box-shadow: 0 10px 30px rgba(0,55,105,.12);
}

.ddc-result-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 42px;

    padding: 0 14px;

    border-radius: 30px;

    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);

    font-weight: 800;

    margin-bottom: 12px;
}

.ddc-result-hero h1 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 7px;
}

.ddc-result-hero p {
    margin: 0;
    opacity: .9;
}


/* Stats */

.ddc-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.ddc-stat {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 8px 13px;
    border-radius: 12px;
    font-size: .82rem;
}

.ddc-stat strong {
    font-size: 1rem;
}


/* Toolbar */

.ddc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;

    padding: 13px 16px;

    background: #fff;

    border: 1px solid #e8edf3;

    border-radius: 16px;

    box-shadow: 0 3px 12px rgba(15,50,80,.04);
}

.ddc-toolbar-title {
    font-size: .9rem;
    color: #617286;
}

.ddc-toolbar-title strong {
    color: #17324d;
}


/* Empty */

.ddc-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 20px;
}

.ddc-empty-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: auto auto 15px;
    border-radius: 50%;
    background: #eef6fd;
    color: #0875c1;
    font-size: 2rem;
}


/* Pagination */

.ddc-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.ddc-pagination .pagination {
    gap: 5px;
}

.ddc-pagination .page-link {
    border-radius: 10px !important;
    border: 1px solid #e0e7ef;
    color: #075da4;
    min-width: 38px;
    text-align: center;
}

.ddc-pagination .active .page-link {
    background: #075da4;
    border-color: #075da4;
    color: white;
}

@media(max-width:600px) {

    .ddc-results-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ddc-result-hero {
        padding: 20px;
        border-radius: 18px;
    }

    .ddc-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* ============================================================
   DDC SEARCH RESULTS
   ============================================================ */

/* ============================================================
   DDC CLASSIFICATION HEADER — DARK
   ============================================================ */

.ddc-result-header {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 125px;

    margin-bottom: 16px;

    padding: 22px 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #172554 0%,
            #1e1b4b 48%,
            #312e81 100%
        );

    border:
        1px solid
        #3730a3;

    color: #ffffff;

    box-shadow:
        0 10px 25px
        rgba(15, 23, 42, .20);

}


/* ============================================================
   DECORATIVE GLOW
   ============================================================ */

.ddc-result-header::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -70px;

    top: -105px;

    border-radius: 50%;

    background:
        rgba(129, 140, 248, .16);

}


.ddc-result-header::after {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    left: 42%;

    bottom: -105px;

    border-radius: 50%;

    background:
        rgba(56, 189, 248, .08);

}


/* ============================================================
   CONTENT
   ============================================================ */

.ddc-result-header > div:first-child {

    position: relative;

    z-index: 2;

}


/* ============================================================
   KICKER
   ============================================================ */

.ddc-result-kicker {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color:
        #f9fca2;

    font-size: .66rem;

    font-weight: 900;

    letter-spacing: .14em;

}


.ddc-result-kicker::before {

    content: "";

    width: 20px;

    height: 3px;

    border-radius: 10px;

    background:
        #818cf8;

}


/* ============================================================
   HEADING
   ============================================================ */

.ddc-result-header h1 {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(
            1.25rem,
            2.5vw,
            1.65rem
        );

    line-height: 1.2;

    font-weight: 800;

}


/* ============================================================
   DDC NUMBER
   ============================================================ */

.ddc-result-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 72px;

    padding:
        6px
        10px;

    border-radius: 8px;

    background:
        #f8fafc;

    border:
        1px solid
        #cbd5e1;

    color:
        #000000;

    font-family:
        "Roboto Mono",
        "Courier New",
        monospace;

    font-size: .78rem;

    font-weight: 900;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.18);

}


/* ============================================================
   TITLE
   ============================================================ */

.ddc-result-title {

    color:
        #ffffff;

    font-weight:
        800;

}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.ddc-result-header p {

    position: relative;

    z-index: 2;

    margin:
        8px
        0
        0;

    color:
        #cbd5e1;

    font-size:
        .82rem;

    line-height:
        1.45;

}


/* ============================================================
   BOOK COUNT
   ============================================================ */

.ddc-result-count {

    position: relative;

    z-index: 3;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        baseline;

    gap:
        5px;

    padding:
        10px
        15px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid
        rgba(255,255,255,.20);

    color:
        #cbd5e1;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.12);

    backdrop-filter:
        blur(6px);

}


.ddc-result-count strong {

    color:
        #ffffff;

    font-size:
        1.25rem;

    font-weight:
        900;

}


.ddc-result-count span {

    font-size:
        .72rem;

    font-weight:
        600;

}


/* ============================================================
   HOVER
   ============================================================ */

.ddc-result-header {

    transition:
        box-shadow .2s ease,
        transform .2s ease;

}


.ddc-result-header:hover {

    box-shadow:
        0 13px 30px
        rgba(15,23,42,.27);

    transform:
        translateY(-1px);

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .ddc-result-header {

        display: block;

        min-height: auto;

        padding:
            18px;

    }


    .ddc-result-count {

        display: inline-flex;

        margin-top: 13px;

    }


    .ddc-result-header h1 {

        font-size:
            1.15rem;

    }


    .ddc-result-number {

        min-width:
            65px;

        padding:
            5px
            8px;

    }

}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.ddc-breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    color: #64748b;

    font-size: .76rem;
}


.ddc-breadcrumb a {
    color: #475569;

    text-decoration: none;

    font-weight: 600;
}


.ddc-breadcrumb a:hover {
    color: #2563eb;
}


.ddc-breadcrumb strong {
    color: #111827;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.ddc-result-toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom: 1px solid #e5e7eb;
}


.ddc-showing {
    color: #64748b;

    font-size: .78rem;
}


.ddc-showing strong {
    color: #111827;
}


.ddc-back-button {
    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border: 1px solid #dbe2ea;

    border-radius: 999px;

    background: #ffffff;

    color: #334155;

    text-decoration: none;

    font-size: .76rem;

    font-weight: 700;

    transition: .15s ease;
}


.ddc-back-button:hover {
    background: #f1f5f9;

    border-color: #cbd5e1;

    color: #111827;
}


/* ============================================================
   BOOK GRID
   ============================================================ */

/*
 * Important:
 *
 * Do NOT redesign the cards here.
 *
 * catalogue.css + card.php already control:
 *
 * - cover
 * - title
 * - author
 * - availability
 * - reservation
 * - issue information
 * - login actions
 *
 * Exactly like recent.php.
 */

.ddc-content .catalogue-book-grid {
    width: 100%;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.ddc-pagination {
    display: flex;

    justify-content: center;

    margin-top: 28px;

    padding-top: 18px;

    border-top: 1px solid #e5e7eb;
}


.ddc-pagination .pagination {
    margin: 0;

    gap: 4px;
}


.ddc-pagination .page-link {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 34px;

    padding: 0 9px;

    border-radius: 8px !important;

    border: 1px solid #e2e8f0;

    color: #334155;

    background: #ffffff;

    font-size: .78rem;

    font-weight: 700;
}


.ddc-pagination .page-link:hover {
    background: #f1f5f9;

    color: #111827;

    border-color: #cbd5e1;
}


.ddc-pagination .page-item.active .page-link {
    background: #2563eb;

    border-color: #2563eb;

    color: #ffffff;
}


.ddc-pagination .page-item.disabled .page-link {
    background: #f8fafc;

    color: #94a3b8;
}


/* ============================================================
   NO RESULTS
   ============================================================ */

.ddc-empty {
    padding: 55px 20px;

    text-align: center;

    border: 1px dashed #cbd5e1;

    border-radius: 16px;

    background: #ffffff;
}


.ddc-empty-icon {
    margin-bottom: 10px;

    font-size: 2.5rem;
}


.ddc-empty h4 {
    margin-bottom: 5px;

    color: #1e293b;

    font-weight: 800;
}


.ddc-empty p {
    margin-bottom: 18px;

    color: #64748b;

    font-size: .84rem;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

    .ddc-result-header {
        display: block;

        padding: 16px;
    }


    .ddc-result-count {
        display: inline-flex;

        margin-top: 12px;
    }


    .ddc-result-header h1 {
        font-size: 1.15rem;
    }


    .ddc-result-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }


    .ddc-back-button {
        align-self: flex-start;
    }

}