/* =========================================================
   TAJ AL KHALIJ
   CATALOGUE PAGE
   SECTION 01 — FULL-WIDTH DIGITAL CATALOGUE
========================================================= */


/* =========================================================
   FULL-BLEED SECTION
========================================================= */

.tk-catalogue-section {

    position: relative;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 70px 0 90px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f2f5fa 0%,
            #ffffff 48%,
            #fff8e6 100%
        );
}


/* Ambient navy glow */

.tk-catalogue-section::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -330px;
    top: -330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24,27,60,.08) 0%,
            rgba(24,27,60,.02) 45%,
            transparent 72%
        );

    pointer-events: none;
}


/* Ambient gold glow */

.tk-catalogue-section::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -360px;
    bottom: -380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,186,3,.16) 0%,
            rgba(255,186,3,.025) 45%,
            transparent 72%
        );

    pointer-events: none;
}



/* =========================================================
   INNER
========================================================= */

.tk-catalogue-section-inner {

    position: relative;

    z-index: 2;

    width:
        min(
            1480px,
            calc(100% - 48px)
        );

    margin-inline: auto;
}



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

.tk-catalogue-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 38px;

    font-size: 12px;

    line-height: 1.5;
}


.tk-catalogue-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #181B3C;

    text-decoration: none;

    font-weight: 500;

    transition:
        color .2s ease;
}


.tk-catalogue-breadcrumb a:hover {

    color: #A06E00;
}


.tk-catalogue-breadcrumb a i {

    color: #FFBA03;

    font-size: 14px;
}


.tk-catalogue-breadcrumb .separator {

    color: #9CA3AF;

    font-size: 10px;
}


.tk-catalogue-breadcrumb span {

    color: #667085;

    font-weight: 500;
}



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

.tk-catalogue-heading {

    max-width: 820px;

    margin:
        0 auto 38px;

    text-align: center;
}


.tk-catalogue-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #A06E00;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.tk-catalogue-eyebrow::before,
.tk-catalogue-eyebrow::after {

    content: "";

    width: 32px;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #FFBA03,
            #FFD35A
        );
}


.tk-catalogue-heading h1 {

    margin: 0 0 14px;

    color: #181B3C;

    font-family:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 38px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.02em;
}


.tk-catalogue-heading p {

    max-width: 720px;

    margin: 0 auto;

    color: #626A78;

    font-size: 15px;

    line-height: 1.8;
}



/* =========================================================
   READER
========================================================= */

.tk-catalogue-reader {

    position: relative;

    width: 100%;

    overflow: hidden;

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

    border:
        1px solid rgba(24,27,60,.09);

    border-radius: 24px;

    box-shadow:
        0 28px 75px
        rgba(24,27,60,.13);

    backdrop-filter:
        blur(10px);
}



/* =========================================================
   TOP BAR
========================================================= */

.tk-catalogue-reader-top {

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        10px 18px;

    background:
        linear-gradient(
            135deg,
            #181B3C 0%,
            #263266 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.tk-catalogue-reader-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.92);

    font-size: 12px;

    font-weight: 600;
}


.tk-catalogue-reader-label i {

    color: #FFBA03;

    font-size: 17px;
}


.tk-catalogue-reader-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}


.tk-catalogue-top-action {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        8px 14px;

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

    border-radius: 8px;

    color:
        rgba(255,255,255,.90);

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

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        .2s ease;
}


.tk-catalogue-top-action:hover {

    color: #181B3C;

    background: #FFBA03;

    border-color: #FFBA03;
}



/* =========================================================
   BOOK STAGE
========================================================= */

.tk-catalogue-stage {

    position: relative;

    width: 100%;

    min-height: 820px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        42px 30px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f5f7fb 58%,
            #edf1f7 100%
        );
}



/* =========================================================
   FLIP BOOK CONTAINER
========================================================= */

.tk-catalogue-book-wrap {

    position: relative;

    width: min(
        1180px,
        100%
    );

    height: 760px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


#tk-catalogue-book {

    width: 100%;

    height: 100%;
}



/* StPageFlip generated book */

.tk-catalogue-book-wrap .stf__parent {

    margin-inline: auto;
}



/* =========================================================
   LOADING
========================================================= */

.tk-catalogue-loading {

    position: absolute;

    inset: 0;

    z-index: 50;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 13px;

    background:
        rgba(245,247,251,.96);

    color: #626A78;

    font-size: 13px;

    font-weight: 500;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.tk-catalogue-loading.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.tk-catalogue-loading-spinner {

    width: 34px;

    height: 34px;

    border:
        3px solid rgba(24,27,60,.10);

    border-top-color: #FFBA03;

    border-radius: 50%;

    animation:
        tkCatalogueSpin .8s linear infinite;
}


@keyframes tkCatalogueSpin {

    to {
        transform: rotate(360deg);
    }
}



/* =========================================================
   ERROR
========================================================= */

.tk-catalogue-error {

    position: absolute;

    inset: 30px;

    z-index: 60;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 12px;

    padding: 30px;

    border-radius: 16px;

    color: #626A78;

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

    text-align: center;
}


.tk-catalogue-error.is-visible {

    display: flex;
}


.tk-catalogue-error strong {

    color: #181B3C;

    font-size: 15px;
}



/* =========================================================
   CONTROLS
========================================================= */

.tk-catalogue-controls {

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        13px 18px;

    background: #ffffff;

    border-top:
        1px solid rgba(24,27,60,.08);
}


.tk-catalogue-control {

    width: 39px;

    height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(24,27,60,.11);

    border-radius: 9px;

    color: #181B3C;

    background: #ffffff;

    cursor: pointer;

    transition:
        .2s ease;
}


.tk-catalogue-control:hover {

    color: #181B3C;

    background: #FFF8E3;

    border-color:
        rgba(255,186,3,.55);

    transform:
        translateY(-1px);
}


.tk-catalogue-page-count {

    min-width: 100px;

    margin:
        0 5px;

    color: #667085;

    text-align: center;

    font-size: 12px;

    font-weight: 600;
}


.tk-catalogue-page-count strong {

    color: #181B3C;
}



/* =========================================================
   FULLSCREEN MODE
========================================================= */

.tk-catalogue-reader:fullscreen {

    width: 100vw;

    height: 100vh;

    border-radius: 0;

    background: #edf1f7;
}


.tk-catalogue-reader:fullscreen
.tk-catalogue-stage {

    min-height: 0;

    height:
        calc(100vh - 134px);

}


.tk-catalogue-reader:fullscreen
.tk-catalogue-book-wrap {

    height:
        calc(100vh - 190px);

    max-width:
        1400px;
}



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

@media (max-width: 1100px) {

    .tk-catalogue-section-inner {

        width:
            calc(100% - 32px);
    }


    .tk-catalogue-stage {

        min-height: 700px;

        padding:
            30px 18px;
    }


    .tk-catalogue-book-wrap {

        height: 650px;
    }

}



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

@media (max-width: 700px) {

    .tk-catalogue-section {

        padding:
            50px 0 65px;
    }


    .tk-catalogue-section-inner {

        width:
            calc(100% - 20px);
    }


    .tk-catalogue-breadcrumb {

        margin-bottom: 28px;
    }


    .tk-catalogue-heading {

        margin-bottom: 28px;
    }


    .tk-catalogue-heading h1 {

        font-size: 27px;
    }


    .tk-catalogue-heading p {

        font-size: 14px;
    }


    .tk-catalogue-reader {

        border-radius: 17px;
    }


    .tk-catalogue-reader-top {

        align-items: flex-start;

        flex-direction: column;

        padding: 13px;

        gap: 10px;
    }


    .tk-catalogue-reader-actions {

        width: 100%;
    }


    .tk-catalogue-top-action {

        flex: 1;
    }


    .tk-catalogue-stage {

        min-height: 540px;

        padding:
            25px 10px;
    }


    .tk-catalogue-book-wrap {

        width: 100%;

        height: 500px;
    }


    .tk-catalogue-controls {

        min-height: 62px;

        padding:
            10px;
    }


    .tk-catalogue-control {

        width: 36px;

        height: 36px;
    }

}

/* =========================================================
   CATALOGUE READER
   COMPACT PREMIUM WIDTH
   Desktop: ~60% centered
========================================================= */

.tk-catalogue-reader {

    width: 60% !important;

    max-width: 1050px;

    margin-left: auto !important;
    margin-right: auto !important;

}


/* Keep the book proportional inside the smaller reader */

.tk-catalogue-book-wrap {

    width: min(760px, 100%);

    height: 680px;

}


/* Reduce stage height accordingly */

.tk-catalogue-stage {

    min-height: 720px;

    padding:
        35px 25px;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .tk-catalogue-reader {

        width: 60% !important;

        max-width: 1080px;

    }

    .tk-catalogue-book-wrap {

        width: 760px;

        height: 680px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1400px) {

    .tk-catalogue-reader {

        width: 70% !important;

    }

    .tk-catalogue-book-wrap {

        width: 700px;

        height: 650px;

    }

}


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

@media (max-width: 1024px) {

    .tk-catalogue-reader {

        width: 82% !important;

    }

    .tk-catalogue-book-wrap {

        width: 650px;

        height: 620px;

    }

}


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

@media (max-width: 700px) {

    .tk-catalogue-reader {

        width: 100% !important;

    }

    .tk-catalogue-stage {

        min-height: 520px;

        padding:
            25px 10px;

    }

    .tk-catalogue-book-wrap {

        width: 100%;

        height: 480px;

    }

}
/* =========================================================
   CATALOGUE BREADCRUMB
   Align with the 60% catalogue reader
========================================================= */

.tk-catalogue-breadcrumb {

    width: 60% !important;

    max-width: 1050px;

    margin-left: auto !important;
    margin-right: auto !important;

    margin-bottom: 38px;

    padding: 0;

}


/* Large desktop */

@media (min-width: 1600px) {

    .tk-catalogue-breadcrumb {

        width: 60% !important;

        max-width: 1080px;

    }

}


/* Laptop */

@media (max-width: 1400px) {

    .tk-catalogue-breadcrumb {

        width: 70% !important;

    }

}


/* Tablet */

@media (max-width: 1024px) {

    .tk-catalogue-breadcrumb {

        width: 82% !important;

    }

}


/* Mobile */

@media (max-width: 700px) {

    .tk-catalogue-breadcrumb {

        width: 100% !important;

        margin-bottom: 28px;

    }

}