@font-face {
    font-family: 'tajawal';
    src: url('../../../../../modules/custom/admin_theme_modifications/css/Tajawal/Tajawal-Bold.ttf');
}

#toolbar-administration,
#toolbar-administration h1,
#toolbar-administration h2,
#toolbar-administration h3,
#toolbar-administration h4,
#toolbar-administration h5,
#toolbar-administration p,
#toolbar-administration a {
    font-family: 'tajawal', sans-serif !important;
}

.header-home p {
    padding: 0px !important;
    margin: 0px !important;
}

.book-list-card.cardType-6 .book-list-card-image {
    width: -webkit-fill-available;
}

.aspect-ratio-229-336 .book-aspect {
    aspect-ratio: 229 / 336 !important;
}

figure .contextual-region {
    height: -webkit-fill-available;
}

figure .placeholder-img {
    height: -webkit-fill-available;
}

.audio-book-content-top h5 {
    overflow-wrap: break-word;
}

.pointer {
    cursor: pointer;
}

.share-social-dropdown {
    position: absolute !important;
    z-index: 1000 !important;
}

input:disabled,
textarea:disabled,
select:disabled {
    /* Your custom styles here */
    background-color: #e0e0e0;
    /* Example: light gray background */
    color: #888888;
    /* Example: darker gray text color */
    border: 1px solid #cccccc;
    /* Example: light gray border */
}

body.scroll-up .header:not(.open) {

    @media (max-width: 991.98px) {
        background: transparent !important;
    }
}

/* drag and drop video upload styles */
.competition-program-form .video-drag-drop {
    position: relative;
    border: 2px dashed #b9d7df;
    border-radius: 12px;
    /* padding: 80px 20px; */
    text-align: center;
    background: #f7fbfc;
    cursor: pointer;
    transition: all .25s ease;
}

.competition-program-form .video-drag-drop:hover {
    background: #eef7fa;
    border-color: #7fc4d3;
}

/* make file input cover entire section */
.competition-program-form .video-drag-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/* optional drag active state */
.competition-program-form .video-drag-drop.dragover {
    background: #e6f6fb;
    border-color: #2da8c8;
}

.competition-program-form .form-required::after {
    content: '*';
    color: #70203D;
    margin-inline-start: 3px;
}

/* .ajax-progress-throbber .throbber{
    display: inline;
    padding: 1px 6px 2px;
    background: transparent url(/themes/custom/moc/progress.gif) no-repeat 0 center !important;
} */

.competition-program-form .ajax-progress-throbber {
    display: flex !important;
    text-align: center !important;
    justify-content: center !important;
    width: -webkit-fill-available;
}

.competition-program-form .ajax-progress-throbber .throbber {
    content: "";
    display: block;
    height: 6px;
    width: 300px;
    background: linear-gradient(90deg, #4caf50 25%, #ddd 25%);
    animation: progressAnim 2s linear infinite;
}

@keyframes progressAnim {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 0;
    }
}


/* Red border */
.competition-program-form .form-item--error input,
.competition-program-form .form-item--error select,
.competition-program-form .form-item--error textarea {
    border: 2px solid #dc3545 !important;
}

/* Error message styling */
.competition-program-form .form-item--error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 6px;
}

/* Remove Bootstrap override if needed */
.competition-program-form .form-control.error {
    border-color: #dc3545 !important;
}

.competition-program-form .video-drag-drop:has(.form-item--error-message) {
    border-color: #dc3545 !important;
}

.competition-program-form [role="alert"],
.competition-program-form [role="contentinfo"] {
    display: none;
}

.competition-program-form .form-item--error-message .placeholder {
    background-color: transparent !important;
    font-weight: bolder;
    opacity: 1;
}

/* Audio player: spinner shown over the disc while the next cover image loads. */
.audio-disc-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -28px;
    width: 56px;
    height: 56px;
    border: 4px solid rgba(8, 158, 191, 0.2);
    border-top-color: #089EBF;
    border-radius: 50%;
    animation: audioDiscSpin 0.8s linear infinite;
    display: none;
    z-index: 2;
    pointer-events: none;
}

.audio-discImage-image.is-loading .audio-disc-loader {
    display: block;
}

@keyframes audioDiscSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Banner slider arrows: keep them always clickable and fully visible so manual
   navigation can loop continuously (wrap-around is handled in home.js). Swiper
   otherwise sets pointer-events:none on a disabled arrow, which would block
   looping at the first/last slide. */
.banner-thumbs-wrap .swiper-button-next.swiper-button-disabled,
.banner-thumbs-wrap .swiper-button-prev.swiper-button-disabled {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
    to { transform: rotate(360deg); }
}

/* Featured audiobook: keep the title/button column a stable width so the
   "listen" button no longer grows or shrinks with the length of the
   rotating title. */
@media (min-width: 992px) {
    .audio-title-content {
        width: 360px;
        max-width: 100%;
        flex-shrink: 0;
    }
}

/* Lock the audio section's interactive controls (Listen button + slider arrows)
   until the JS has initialised, so a click before the scripts are ready can't
   open a half-loaded player. home.js adds `audio-ready` to the section once both
   the slider and the audio player are set up. No visual change — the controls
   just aren't clickable for the brief moment before the JS is ready. */
.audiobooks-section-02 .swiper-button-next-08,
.audiobooks-section-02 .swiper-button-prev-08,
.audiobooks-section-02 [data-bs-target="#audioPlayerWidget"] {
    pointer-events: none;
}
.audiobooks-section-02.audio-ready .swiper-button-next-08,
.audiobooks-section-02.audio-ready .swiper-button-prev-08,
.audiobooks-section-02.audio-ready [data-bs-target="#audioPlayerWidget"] {
    pointer-events: auto;
}
.about-section .space-thumbs-button .slider-btn-wrap{
    flex-direction: row-reverse;
}
.video-landscape-thumbnail {
    aspect-ratio: 15 / 9;
}
._df_book .share-control-wrap {
    display: flex;
    gap: 12px;
}