/* =========================================================
   COMMON
   ========================================================= */

.library-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   SEARCH PAGE
   ========================================================= */

.library-search-section {
    position: relative;

    padding:
            30px
            0
            60px;

    background:
            radial-gradient(
                    circle at 8% 10%,
                    rgba(255, 224, 133, 0.18),
                    transparent 27%
            ),
            radial-gradient(
                    circle at 92% 6%,
                    rgba(237, 103, 169, 0.13),
                    transparent 30%
            ),
            #fffdfd;

    min-height: 500px;
}


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

.library-search-heading {
    margin-bottom: 26px;
}


.library-search-label {
    display: inline-flex;

    align-items: center;

    margin-bottom: 7px;

    padding:
            6px
            12px;

    border-radius: 999px;

    background: #fff0f6;

    color: #ce2b70;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.04em;
}


.library-search-heading h1 {
    margin:
            0
            0
            9px;

    color: #12233b;

    font-size: 34px;
    font-weight: 800;

    line-height: 1.25;
}


.library-search-heading p {
    margin: 0;

    color: #6f7888;

    font-size: 14px;
}


/* =========================================================
   SEARCH PANEL
   ========================================================= */

.library-search-panel {
    padding: 14px;

    border:
            1px
            solid
            rgba(218, 54, 124, 0.13);

    border-radius: 22px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.94
            );

    box-shadow:
            0
            15px
            45px
            rgba(
                    39,
                    46,
                    62,
                    0.07
            );
}


.library-search-form {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr)
        120px;

    gap: 10px;

    align-items: stretch;
}


/* =========================================================
   SELECT / INPUT
   ========================================================= */

.library-search-type select,
.library-search-input input {
    width: 100%;
    height: 52px;

    border:
            1px
            solid
            #dfe4ec;

    border-radius: 14px;

    background: #ffffff;

    color: #263247;

    font-size: 14px;

    outline: none;

    box-sizing: border-box;
}


.library-search-type select {
    padding:
            0
            38px
            0
            14px;

    font-weight: 700;
}


.library-search-input {
    position: relative;
}


.library-search-input input {
    padding:
            0
            48px
            0
            48px;
}


.library-search-input input::placeholder {
    color: #99a2b0;
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.library-search-icon {
    position: absolute;

    top: 50%;
    left: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #93a0b3;

    transform:
            translateY(
                    -50%
            );

    pointer-events: none;
}


/* =========================================================
   CLEAR BUTTON
   ========================================================= */

.library-search-clear {
    position: absolute;

    top: 50%;
    right: 14px;

    display: none;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #8e97a6;

    font-size: 19px;

    cursor: pointer;

    transform:
            translateY(
                    -50%
            );
}


.library-search-clear.is-visible {
    display: flex;
}


.library-search-clear:hover {
    background: #f5f6f8;

    color: #d9367c;
}


/* =========================================================
   FOCUS
   ========================================================= */

.library-search-type select:focus,
.library-search-input input:focus {
    border-color:
            rgba(
                    217,
                    54,
                    124,
                    0.45
            );

    box-shadow:
            0
            0
            0
            4px
            rgba(
                    217,
                    54,
                    124,
                    0.07
            );
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.library-search-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    height: 52px;

    padding:
            0
            20px;

    border: 0;

    border-radius: 14px;

    background:
            linear-gradient(
                    135deg,
                    #e34488,
                    #ce2c72
            );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
            0
            10px
            22px
            rgba(
                    217,
                    54,
                    124,
                    0.20
            );

    transition:
            transform
            0.18s
            ease,
            box-shadow
            0.18s
            ease;
}


.library-search-button:hover {
    transform:
            translateY(
                    -1px
            );

    box-shadow:
            0
            13px
            25px
            rgba(
                    217,
                    54,
                    124,
                    0.27
            );
}


.library-search-button:disabled {
    opacity: 0.65;

    cursor: wait;
}


/* =========================================================
   RESULT AREA
   ========================================================= */

.library-search-result-section {
    margin-top: 30px;

    padding: 24px;

    border:
            1px
            solid
            rgba(
                    217,
                    54,
                    124,
                    0.08
            );

    border-radius: 24px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.72
            );

    box-shadow:
            0
            12px
            35px
            rgba(
                    34,
                    44,
                    61,
                    0.035
            );
}


.library-search-result-header {
    margin-bottom: 18px;
}


.library-search-result-header h2 {
    margin:
            0
            0
            5px;

    color: #192439;

    font-size: 25px;
    font-weight: 800;
}


#librarySearchResultCount {
    margin: 0;

    color: #7b8493;

    font-size: 14px;
}


#librarySearchResultCount strong {
    color: #d9367c;
}


.library-result-range {
    display: block;

    margin-top: 4px;

    color: #a0a7b2;

    font-size: 12px;
}


/* =========================================================
   RESULT LIST
   ========================================================= */

.library-search-results {
    display: grid;

    gap: 12px;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.library-result-card {
    position: relative;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        90px;

    gap: 16px;

    align-items: center;

    padding: 18px;

    border:
            1px
            solid
            #e7eaf0;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
            0
            5px
            18px
            rgba(
                    33,
                    40,
                    53,
                    0.035
            );

    transition:
            transform
            0.18s
            ease,
            box-shadow
            0.18s
            ease,
            border-color
            0.18s
            ease;
}


.library-result-card:hover {
    transform:
            translateY(
                    -2px
            );

    border-color:
            rgba(
                    217,
                    54,
                    124,
                    0.25
            );

    box-shadow:
            0
            13px
            30px
            rgba(
                    33,
                    40,
                    53,
                    0.08
            );
}


/* =========================================================
   RESULT NUMBER
   ========================================================= */

.library-result-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background: #fff0f6;

    color: #c82d6e;

    font-size: 13px;
    font-weight: 800;
}


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

.library-result-content {
    min-width: 0;
}


.library-result-title {
    margin:
            0
            0
            11px;

    color: #182338;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.55;
}


/* =========================================================
   RESULT META
   ========================================================= */

.library-result-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.library-result-meta span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
            5px
            9px;

    border-radius: 9px;

    background: #f6f8fa;

    color: #505a6a;

    font-size: 12px;
    font-weight: 650;
}


.library-result-meta small {
    color: #929ba8;

    font-size: 10px;
    font-weight: 650;
}


/* =========================================================
   DETAIL BUTTON
   ========================================================= */

.library-result-actions {
    margin-top: 12px;
}


.library-result-detail-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 37px;

    padding:
            0
            14px;

    border: 0;

    border-radius: 10px;

    background: #fff0f6;

    color: #c82d6e;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
            background
            0.18s
            ease,
            color
            0.18s
            ease;
}


.library-result-detail-button:hover {
    background: #d9367c;

    color: #ffffff;
}


/* =========================================================
   COPY COUNT
   ========================================================= */

.library-result-copy {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 72px;

    padding:
            7px;

    border:
            1px
            solid
            #f1e1a9;

    border-radius: 13px;

    background: #fffbee;

    text-align: center;
}


.library-result-copy small {
    color: #998348;

    font-size: 10px;
}


.library-result-copy strong {
    color: #695204;

    font-size: 21px;
}


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

.library-search-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 25px;
}


.library-page-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 39px;
    height: 39px;

    padding:
            0
            10px;

    border:
            1px
            solid
            #e2e6ec;

    border-radius: 10px;

    background: #ffffff;

    color: #566071;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.library-page-button:hover:not(:disabled) {
    border-color: #e69ab9;

    background: #fff2f7;

    color: #c52b6b;
}


.library-page-button.is-active {
    border-color: #d9367c;

    background: #d9367c;

    color: #ffffff;
}


.library-page-button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.library-page-dots {
    padding:
            0
            5px;

    color: #949daa;
}


/* =========================================================
   SEARCH MESSAGE
   ========================================================= */

.library-search-loading,
.library-search-message {
    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 160px;

    padding: 25px;

    border:
            1px
            dashed
            #dfe3e9;

    border-radius: 16px;

    background: #ffffff;

    color: #747e8d;

    text-align: center;
}


.library-search-message strong {
    margin-bottom: 5px;

    color: #243047;

    font-size: 16px;
}


/* =========================================================
   SPINNER
   ========================================================= */

.library-search-spinner,
.library-detail-spinner {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

    border:
            3px
            solid
            #f0d4df;

    border-top-color: #d9367c;

    border-radius: 50%;

    animation:
            librarySpinner
            0.8s
            linear
            infinite;
}


@keyframes librarySpinner {

    to {

        transform:
                rotate(
                        360deg
                );

    }

}


/* =========================================================
   MODAL
   ========================================================= */

body.library-modal-open {
    overflow: hidden;
}


.library-detail-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 26px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
            opacity
            0.18s
            ease,
            visibility
            0.18s
            ease;
}


.library-detail-modal.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.library-detail-backdrop {
    position: absolute;

    inset: 0;

    background:
            rgba(
                    15,
                    25,
                    39,
                    0.60
            );

    backdrop-filter:
            blur(
                    5px
            );
}


/* =========================================================
   MODAL DIALOG
   ========================================================= */

.library-detail-dialog {
    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    width: 100%;
    max-width: 760px;

    max-height: 86vh;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
            0
            30px
            90px
            rgba(
                    10,
                    20,
                    35,
                    0.30
            );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.library-detail-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex:
            0
            0
            auto;

    padding:
            18px
            22px;

    border-bottom:
            1px
            solid
            #ebedf1;

    background: #ffffff;
}


.library-detail-eyebrow {
    display: block;

    margin-bottom: 2px;

    color: #d9367c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.library-detail-header h2 {
    margin: 0;

    color: #172338;

    font-size: 21px;
    font-weight: 800;
}


/* =========================================================
   MODAL X
   ========================================================= */

.library-detail-close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;

    border-radius: 11px;

    background: #f5f6f8;

    color: #697384;

    font-size: 23px;

    cursor: pointer;
}


.library-detail-close:hover {
    background: #fff0f6;

    color: #d9367c;
}


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

.library-detail-content {
    flex:
            1
            1
            auto;

    overflow-y: auto;

    padding:
            20px
            22px
            25px;
}


.library-detail-section +
.library-detail-section {
    margin-top: 24px;
}


.library-detail-section h3 {
    margin:
            0
            0
            12px;

    padding-bottom: 9px;

    border-bottom:
            1px
            solid
            #eceff3;

    color: #1b273b;

    font-size: 15px;
    font-weight: 800;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.library-detail-grid {
    display: grid;

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

    gap: 8px;
}


.library-detail-item {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    min-height: 47px;

    padding:
            11px
            12px;

    border:
            1px
            solid
            #e8ebef;

    border-radius: 11px;

    background: #fafbfc;
}


.library-detail-item-label {
    color: #8b95a4;

    font-size: 11px;
    font-weight: 650;
}


.library-detail-item-value {
    color: #263148;

    font-size: 12px;
    font-weight: 800;

    text-align: right;

    word-break: break-word;
}


/* =========================================================
   DETAIL LOADING / ERROR
   ========================================================= */

.library-detail-loading,
.library-detail-error {
    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 260px;

    padding: 30px;

    color: #747e8e;

    text-align: center;
}


.library-detail-error strong {
    margin-bottom: 5px;

    color: #273249;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.library-detail-footer {
    display: flex;

    justify-content: flex-end;

    flex:
            0
            0
            auto;

    padding:
            13px
            22px;

    border-top:
            1px
            solid
            #ebedf1;

    background: #ffffff;
}


.library-detail-close-button {
    min-width: 90px;
    height: 39px;

    border: 0;

    border-radius: 10px;

    background: #15253d;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


.library-detail-close-button:hover {
    background: #d9367c;
}


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

@media
(
max-width: 991px
) {

    .library-search-form {

        grid-template-columns:
            150px
            minmax(0, 1fr)
            110px;

    }


    .library-result-card {

        grid-template-columns:
            45px
            minmax(0, 1fr)
            80px;

    }

}


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

@media
(
max-width: 767px
) {

    .library-search-heading h1 {

        font-size: 27px;

    }


    .library-search-heading p {

        font-size: 13px;

    }


    .library-search-panel {

        padding: 12px;

        border-radius: 18px;

    }


    .library-search-form {

        grid-template-columns: 1fr;

    }


    .library-search-type select,
    .library-search-input input,
    .library-search-button {

        height: 48px;

    }


    .library-search-result-section {

        padding: 14px;

        border-radius: 18px;

    }


    .library-search-result-header h2 {

        font-size: 21px;

    }


    .library-result-card {

        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 11px;

        padding: 14px;

    }


    .library-result-number {

        width: 37px;
        height: 37px;

    }


    .library-result-title {

        font-size: 15px;

    }


    .library-result-meta {

        display: grid;

    }


    .library-result-meta span {

        width: 100%;

        box-sizing: border-box;

    }


    .library-result-copy {

        grid-column:
                1
            /
            -1;

        flex-direction: row;

        gap: 7px;

        min-height: auto;

        padding:
                9px
                12px;

        justify-content: flex-start;

    }


    .library-result-copy strong {

        font-size: 15px;

    }


    .library-detail-modal {

        align-items: flex-end;

        padding: 0;

    }


    .library-detail-dialog {

        max-height: 92vh;

        border-radius:
                20px
                20px
                0
                0;

    }


    .library-detail-header {

        padding:
                15px
                17px;

    }


    .library-detail-content {

        padding: 17px;

    }


    .library-detail-grid {

        grid-template-columns: 1fr;

    }


    .library-detail-footer {

        padding:
                11px
                17px;

    }

}