@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- HBMSU Smart University Brand Design System --- */
    --hbmsu-blue: #004B87;
    --hbmsu-blue-rgb: 0, 75, 135;
    --hbmsu-blue-dark: #002855;
    --hbmsu-blue-dark-rgb: 0, 40, 85;
    --hbmsu-blue-deep: #001833;
    --hbmsu-sky: #00A3E0;
    --hbmsu-sky-rgb: 0, 163, 224;
    --hbmsu-sky-light: #E1F0FA;
    --hbmsu-sky-soft: #F0F7FF;
    --hbmsu-pink: #E61E78;
    --hbmsu-lime: #8CB811;
    --hbmsu-lime-rgb: 140, 184, 17;
    --hbmsu-orange: #FF6B35;
    --hbmsu-dark: #0B1F3A;
    --hbmsu-body: #1E293B;
    --hbmsu-muted: #556877;
    --hbmsu-muted-rgb: 85, 104, 119;
    --hbmsu-light: #FAFCFF;
    --hbmsu-white: #FFFFFF;
    --hbmsu-white-rgb: 255, 255, 255;
    --hbmsu-black-rgb: 0, 0, 0;
    --hbmsu-radius: 14px;
    --hbmsu-radius-pill: 50px;

    /* Semantic accents used across slides */
    --hbmsu-danger: #B91C1C;
    --hbmsu-danger-rgb: 185, 28, 28;
    --hbmsu-danger-bright: #DC2626;
    --hbmsu-danger-bright-rgb: 220, 38, 38;
    --hbmsu-success: #2E7D32;
    --hbmsu-success-rgb: 46, 125, 50;
    --hbmsu-accent-gold: #F39200;
    --hbmsu-accent-gold-rgb: 243, 146, 0;
    --hbmsu-orange-deep: #C05600;
    --hbmsu-teal: #009688;
    --hbmsu-teal-rgb: 0, 150, 136;
    --hbmsu-teal-light: #4db6ac;
    --hbmsu-ocean: #0082A6;
    --hbmsu-link: #0072CE;
    --hbmsu-link-rgb: 0, 114, 206;
    --hbmsu-ink: #070B0E;
    --hbmsu-ink-warm: #0F0A06;
    --hbmsu-ink-warm-rgb: 15, 10, 6;
    --hbmsu-navy-overlay: #002B49;
    --hbmsu-navy-overlay-rgb: 0, 43, 73;
    --hbmsu-burgundy: #7A1F2B;
    --hbmsu-burgundy-rgb: 122, 31, 43;

    /* Four Guiding Pillars — shared icon/color system */
    --pillar-ambition: #004B87;   /* compass */
    --pillar-ambition-rgb: 0, 75, 135;
    --pillar-people: #00A3E0;     /* heart */
    --pillar-people-rgb: 0, 163, 224;
    --pillar-arsenal: #E87722;    /* cpu */
    --pillar-arsenal-rgb: 232, 119, 34;
    --pillar-partners: #5B7B07;   /* network */
    --pillar-partners-rgb: 91, 123, 7;

    /* Ethics framework badge gradients */
    --ethics-privacy-from: #1a73e8;
    --ethics-privacy-from-rgb: 26, 115, 232;
    --ethics-privacy-to: #0d47a1;
    --ethics-bias-from: #0288d1;
    --ethics-bias-from-rgb: 2, 136, 209;
    --ethics-bias-to: #4fc3f7;
    --ethics-accountability-from: #F5A623;
    --ethics-accountability-from-rgb: 245, 166, 35;
    --ethics-accountability-to: #e65100;
    --ethics-environment-from: #5B7B07;
    --ethics-environment-to: #8bc34a;
    --ethics-transparency-from: #009688;
    --ethics-transparency-to: #4db6ac;

    /* GenAI landscape node greens (light → deep) */
    --genai-green-1: #A8C66C;
    --genai-green-2: #8FB84A;
    --genai-green-3: #5B9A3C;
    --genai-green-4: #3F7D2A;
    --genai-green-5: #2F6B28;
    --genai-green-6: #1F4F1C;
    --genai-green-7: #163E16;
    --genai-green-8: #0F2C10;
}

* {
    box-sizing: border-box;
}

body {
    background: #FAFBFD !important;
    color: var(--hbmsu-dark);
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    direction: rtl;
    text-align: right;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* --- HBMSU Ambient Wavy Ribbon Background (Clean, hardware-isolated static vectors) --- */
.bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: #FAFBFD;
    contain: strict;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.bg-blobs svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.50;
    shape-rendering: geometricPrecision;
}

/* --- HBMSU Fixed Footer Banner Pattern --- */
.bg-footer-banner-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.95;
    contain: paint;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.bg-footer-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

/*
 * Fix Reveal's native ?print-pdf backgrounds (do not replace print layout).
 * Reveal copies getComputedStyle(.reveal-viewport).background onto each
 * .pdf-page. On screen the viewport is transparent (fixed .bg-blobs show
 * through). For print only, give the viewport a real background so Reveal
 * can copy it — keep screen layers/performance unchanged.
 */
html.print-pdf,
html.reveal-print,
html.print-pdf *,
html.reveal-print * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

html.print-pdf .bg-blobs,
html.reveal-print .bg-blobs,
html.print-pdf .bg-footer-banner-wrapper,
html.reveal-print .bg-footer-banner-wrapper {
    display: none !important;
}

html.print-pdf .reveal-viewport,
html.reveal-print .reveal-viewport {
    background-color: #FAFBFD !important;
    background-image:
        url('assets/hbmsu-footer-mosaic.png'),
        url('assets/hbmsu-wave-bg.svg') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 100% 75px, cover !important;
}

html.print-pdf body,
html.reveal-print body {
    background-color: #FAFBFD !important;
}

@media print {
    html,
    body,
    .reveal-viewport {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .bg-blobs,
    .bg-footer-banner-wrapper {
        display: none !important;
    }

    .reveal-viewport {
        background-color: #FAFBFD !important;
        background-image:
            url('assets/hbmsu-footer-mosaic.png'),
            url('assets/hbmsu-wave-bg.svg') !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: center bottom, center center !important;
        background-size: 100% 75px, cover !important;
    }
}

/* --- Slide Header Container (HBMSU Logos & Header text) --- */
.slide-header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 0 4px !important;
}

.logo-right-wrapper {
    display: none !important;
}

.logo-left-wrapper {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 4px !important;
}

.slide-logo-hbmsu {
    height: 44px !important;
    max-width: 220px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.slide-logo-campus {
    height: 40px !important;
    max-width: 190px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* --- Reveal.js Customizations (Hardware Accelerated & Isolated) --- */
.reveal-viewport {
    background: transparent !important;
    isolation: isolate;
}

.reveal {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 26px !important;
    color: var(--hbmsu-dark) !important;
    z-index: 3;
    isolation: isolate;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.reveal .slides,
.reveal .slides section {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform-style: flat !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    font-family: 'Cairo', sans-serif !important;
    color: var(--hbmsu-blue) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.reveal h1 {
    font-size: 2.1em !important;
    line-height: 1.25 !important;
    color: var(--hbmsu-blue-dark) !important;
}

/* --- Slide Header Block --- */
.slide-header {
    flex: 1 1 auto !important;
    max-width: 900px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.slide-header>* {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.slide-header .badge {
    align-self: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.reveal h2 {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    text-align: left !important;
    font-size: 1.15em !important;
    line-height: 1.25 !important;
    z-index: 10 !important;
    white-space: normal !important;
    max-width: 100% !important;
    color: var(--hbmsu-blue) !important;
    unicode-bidi: plaintext !important;
}

/* Presenter cue: skip these slides for a ~30-slide Day 2 cut */
.reveal section.skip-short h2,
.reveal section.skip-short .subtitle {
    color: var(--pillar-arsenal) !important;
}

.reveal .subtitle {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    color: var(--hbmsu-muted) !important;
    font-size: 0.6em !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    unicode-bidi: plaintext !important;
}

/* RTL Arabic Content Slides */
.reveal section[dir="rtl"] .slide-header {
    align-items: flex-start !important;
    text-align: right !important;
}

.reveal section[dir="rtl"] .slide-header .badge {
    align-self: flex-start !important;
}

.reveal section[dir="rtl"] h2,
.reveal section[dir="rtl"] .reveal h2 {
    text-align: right !important;
}

.reveal section[dir="rtl"] .subtitle,
.reveal section[dir="rtl"] .reveal .subtitle {
    text-align: right !important;
}

/* LTR English Content Slides & Review Deck (Guaranteed Left Alignment) */
.reveal section[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

.reveal section[dir="ltr"] .slide-header-container,
.reveal section[dir="ltr"] .slide-header {
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] .slide-header .badge {
    align-self: flex-start !important;
}

.reveal section[dir="ltr"] h1,
.reveal section[dir="ltr"] h2,
.reveal section[dir="ltr"] h3,
.reveal section[dir="ltr"] h4,
.reveal section[dir="ltr"] h5,
.reveal section[dir="ltr"] h6,
.reveal section[dir="ltr"] .subtitle {
    text-align: left !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] .grid-container,
.reveal section[dir="ltr"] .row {
    direction: ltr !important;
    text-align: left !important;
}

.reveal section[dir="ltr"] [class*="col-"] {
    text-align: left !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] .slide-card:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]) {
    text-align: left !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] .slide-card:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]) * {
    direction: ltr !important;
}

.reveal section[dir="ltr"] .slide-card.align-start,
.reveal section[dir="ltr"] .slide-card.text-start,
.reveal section[dir="ltr"] .text-start {
    text-align: left !important;
    align-items: flex-start !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] p:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
.reveal section[dir="ltr"] span:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
.reveal section[dir="ltr"] strong:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
.reveal section[dir="ltr"] div:not(.text-center):not([style*="text-align: center"]):not([style*="text-align:center"]) {
    text-align: left !important;
}

/* Explicit preservation for centered elements */
.reveal section[dir="ltr"] .text-center,
.reveal section[dir="ltr"] .text-center *,
.reveal section[dir="ltr"] [style*="text-align: center"],
.reveal section[dir="ltr"] [style*="text-align: center"] *,
.reveal section[dir="ltr"] [style*="text-align:center"],
.reveal section[dir="ltr"] [style*="text-align:center"] * {
    text-align: center !important;
}

/* --- Thank You / Closing Slide Content (Header remains standard like all other pages) --- */
.reveal section.is-thank-you-slide .grid-container,
.reveal section[dir="ltr"].is-thank-you-slide .grid-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.reveal section.is-thank-you-slide .row,
.reveal section[dir="ltr"].is-thank-you-slide .row {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.reveal section.is-thank-you-slide .slide-card,
.reveal section[dir="ltr"].is-thank-you-slide .slide-card {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.reveal section.is-thank-you-slide .slide-card *,
.reveal section[dir="ltr"].is-thank-you-slide .slide-card * {
    text-align: center !important;
}

.reveal section[dir="ltr"] ul:not(.text-center) {
    text-align: left !important;
    direction: ltr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.reveal section[dir="ltr"] li:not(.text-center) {
    text-align: left !important;
    direction: ltr !important;
}

.reveal section[dir="ltr"] table,
.reveal section[dir="ltr"] th,
.reveal section[dir="ltr"] td {
    text-align: left !important;
    direction: ltr !important;
}

.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: fit-content;
    background: var(--hbmsu-sky-soft);
    color: var(--hbmsu-blue);
    padding: 4px 16px;
    border-radius: var(--hbmsu-radius-pill);
    font-size: 0.55em;
    font-weight: 700;
    border: 1px solid rgba(0, 75, 135, 0.18);
    box-shadow: 0 2px 6px rgba(0, 75, 135, 0.04);
}

.reveal section:not(.stack) {
    padding: 35px 50px 30px 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
}

/* --- Bootstrap Grid Mapping to 12x4 CSS Grid --- */
.grid-container {
    height: 360px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.grid-container .row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.grid-container .row>div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Col Spans */
.grid-container .col-1 { grid-column-end: span 1 !important; }
.grid-container .col-2 { grid-column-end: span 2 !important; }
.grid-container .col-3 { grid-column-end: span 3 !important; }
.grid-container .col-4 { grid-column-end: span 4 !important; }
.grid-container .col-5 { grid-column-end: span 5 !important; }
.grid-container .col-6 { grid-column-end: span 6 !important; }
.grid-container .col-7 { grid-column-end: span 7 !important; }
.grid-container .col-8 { grid-column-end: span 8 !important; }
.grid-container .col-9 { grid-column-end: span 9 !important; }
.grid-container .col-10 { grid-column-end: span 10 !important; }
.grid-container .col-11 { grid-column-end: span 11 !important; }
.grid-container .col-12 { grid-column-end: span 12 !important; }

/* Row Spans */
.grid-container .h-25,
.grid-container .row-1 { grid-row-end: span 1 !important; }
.grid-container .h-45 { grid-row-end: span 2 !important; }
.grid-container .h-50,
.grid-container .row-2 { grid-row-end: span 2 !important; }
.grid-container .h-55 { grid-row-end: span 2 !important; }
.grid-container .h-75,
.grid-container .row-3 { grid-row-end: span 3 !important; }
.grid-container .h-100,
.grid-container .row-4 { grid-row-end: span 4 !important; }

/* Offsets */
.grid-container [class*="offset-"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.grid-container .offset-1 { grid-column-start: 2 !important; }
.grid-container .offset-2 { grid-column-start: 3 !important; }
.grid-container .offset-3 { grid-column-start: 4 !important; }
.grid-container .offset-4 { grid-column-start: 5 !important; }
.grid-container .offset-5 { grid-column-start: 6 !important; }
.grid-container .offset-6 { grid-column-start: 7 !important; }
.grid-container .offset-7 { grid-column-start: 8 !important; }
.grid-container .offset-8 { grid-column-start: 9 !important; }
.grid-container .offset-9 { grid-column-start: 10 !important; }
.grid-container .offset-10 { grid-column-start: 11 !important; }
.grid-container .offset-11 { grid-column-start: 12 !important; }

/* Col & Row Starts */
.grid-container .col-start-1 { grid-column-start: 1 !important; }
.grid-container .col-start-2 { grid-column-start: 2 !important; }
.grid-container .col-start-3 { grid-column-start: 3 !important; }
.grid-container .col-start-4 { grid-column-start: 4 !important; }
.grid-container .col-start-5 { grid-column-start: 5 !important; }
.grid-container .col-start-6 { grid-column-start: 6 !important; }
.grid-container .col-start-7 { grid-column-start: 7 !important; }
.grid-container .col-start-8 { grid-column-start: 8 !important; }
.grid-container .col-start-9 { grid-column-start: 9 !important; }
.grid-container .col-start-10 { grid-column-start: 10 !important; }
.grid-container .col-start-11 { grid-column-start: 11 !important; }
.grid-container .col-start-12 { grid-column-start: 12 !important; }

.grid-container .row-start-1 { grid-row-start: 1 !important; }
.grid-container .row-start-2 { grid-row-start: 2 !important; }
.grid-container .row-start-3 { grid-row-start: 3 !important; }
.grid-container .row-start-4 { grid-row-start: 4 !important; }

/* --- HBMSU Premium Slide Cards & High-Contrast Typography --- */
.slide-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(0, 75, 135, 0.22) !important;
    box-shadow: 0 4px 16px rgba(0, 40, 85, 0.06) !important;
    border-radius: var(--hbmsu-radius) !important;
    padding: 12px 16px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.65em !important;
    font-weight: 600;
    line-height: 1.65 !important;
    color: var(--hbmsu-dark) !important;
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Explicit high-contrast text color defaults for cards */
.slide-card,
.slide-card p,
.slide-card li,
.slide-card ul,
.slide-card span,
.slide-card div,
.slide-card strong {
    color: var(--hbmsu-dark);
}

/* Highlight border and add vibrant glow on hover without altering background color or removing border */
.slide-card:not(.bg-transparent):not(.border-none):not(.no-hover):hover {
    border: 1.5px solid var(--hbmsu-sky) !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 10px 28px rgba(0, 163, 224, 0.25) !important;
    cursor: pointer !important;
}

.slide-card.bg-white:hover {
    background: #FFFFFF !important;
    border-color: var(--hbmsu-sky) !important;
}

.slide-card:not(.bg-transparent):not(.border-none):hover strong {
    color: var(--hbmsu-blue) !important;
}

.slide-card:hover strong.no-color-change,
.slide-card:hover strong[style*="color: #FFFFFF"],
.slide-card:hover strong[style*="color: white"],
.slide-card:hover strong[style*="color: rgb(255, 255, 255)"] {
    color: #FFFFFF !important;
}

.bio-icon-box {
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

.slide-card:hover .bio-icon-box {
    background: var(--hbmsu-sky) !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
}

/* Disable hover effects completely on title slide and transparent cards */
.slide-card.bg-transparent:hover,
.slide-card.border-none:hover,
.slide-card.no-hover:hover,
.is-title-slide-section .slide-card:hover {
    background: transparent !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* Prevent title box from altering background, border, or transform on hover */
.hbmsu-title-box,
.hbmsu-title-box:hover,
.is-title-slide-section .hbmsu-title-box,
.is-title-slide-section .hbmsu-title-box:hover {
    background: #001B54 !important;
    border: 2px solid #002878 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: default !important;
    transition: none !important;
}

.is-title-slide-section,
.is-title-slide-section * {
    cursor: default !important;
}

/* Links inside slide cards */
.slide-card a {
    color: var(--hbmsu-blue) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.slide-card a:hover {
    color: var(--hbmsu-sky) !important;
    text-decoration: underline !important;
}

/* --- Content Slide Images (Hidden for now as requested, except logos, QR codes, and explicitly shown images) --- */
.grid-container img:not([src*="logo"]):not([src*="Logo"]):not([src*="HBMSU"]):not([src*="qr"]):not([src*="QR"]):not(.show-img):not(.clip-art-img) {
    display: none !important;
}

.grid-container img[src*="logo"],
.grid-container img[src*="Logo"],
.grid-container img[src*="HBMSU"],
.grid-container img[src*="qr"],
.grid-container img[src*="QR"],
.grid-container img.show-img:not(.clip-art-img) {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.grid-container img.clip-art-img {
    display: inline-block !important;
    object-fit: contain !important;
}

.slide-card:has(> img:only-child) {
    padding: 6px !important;
}

/* --- Typography Font Override --- */
.reveal,
.reveal .slides,
.reveal section,
.slide-card,
.slide-card * {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- Visual Utility Classes --- */

/* Backgrounds (Glass & Solid) */
.slide-card.bg-white {
    background: rgba(var(--hbmsu-white-rgb), 0.94) !important;
    color: var(--hbmsu-dark) !important;
    border-color: rgba(var(--hbmsu-blue-rgb), 0.12) !important;
}

.slide-card.bg-green-soft,
.slide-card.bg-hbmsu-sky-soft {
    background: color-mix(in srgb, var(--hbmsu-sky-soft) 94%, transparent) !important;
    color: var(--hbmsu-blue-dark) !important;
    border-color: rgba(var(--hbmsu-sky-rgb), 0.32) !important;
}

.slide-card.bg-green-soft *,
.slide-card.bg-hbmsu-sky-soft * {
    color: var(--hbmsu-blue-dark) !important;
}

.slide-card.bg-gold-light,
.slide-card.bg-hbmsu-sky-light {
    background: rgba(225, 240, 250, 0.92) !important;
    color: var(--hbmsu-blue) !important;
    border-color: rgba(0, 75, 135, 0.25) !important;
}

.slide-card.bg-gold-light *,
.slide-card.bg-hbmsu-sky-light * {
    color: var(--hbmsu-blue) !important;
}

.slide-card.bg-green-dark,
.slide-card.bg-hbmsu-dark {
    background: linear-gradient(135deg, var(--hbmsu-blue-dark) 0%, var(--hbmsu-blue-deep) 100%) !important;
    color: var(--hbmsu-white) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.slide-card.bg-green-dark *,
.slide-card.bg-hbmsu-dark * {
    color: var(--hbmsu-white) !important;
}

.slide-card.bg-green,
.slide-card.bg-hbmsu-blue {
    background: linear-gradient(135deg, var(--hbmsu-blue) 0%, #003766 100%) !important;
    color: var(--hbmsu-white) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.slide-card.bg-green *,
.slide-card.bg-hbmsu-blue * {
    color: var(--hbmsu-white) !important;
}

.slide-card.bg-gold,
.slide-card.bg-hbmsu-sky {
    background: linear-gradient(135deg, var(--hbmsu-sky) 0%, #0084B8 100%) !important;
    color: var(--hbmsu-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.slide-card.bg-gold *,
.slide-card.bg-hbmsu-sky * {
    color: var(--hbmsu-white) !important;
}

.slide-card.bg-pink,
.slide-card.bg-hbmsu-pink {
    background: linear-gradient(135deg, var(--hbmsu-pink) 0%, #C2135F 100%) !important;
    color: var(--hbmsu-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.slide-card.bg-pink *,
.slide-card.bg-hbmsu-pink * {
    color: var(--hbmsu-white) !important;
}

.slide-card.bg-dark-glass {
    background: rgba(11, 31, 58, 0.92) !important;
    color: var(--hbmsu-white) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.slide-card.bg-dark-glass * {
    color: var(--hbmsu-white) !important;
}

.slide-card.bg-danger-light {
    background: rgba(254, 242, 242, 0.92) !important;
    color: #991b1b !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.slide-card.bg-warning-light {
    background: rgba(255, 251, 235, 0.92) !important;
    color: #92400e !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.slide-card.bg-info-light {
    background: rgba(239, 246, 255, 0.92) !important;
    color: #1e40af !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.slide-card.bg-transparent {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Card Text Colors */
.slide-card.text-white,
.text-white {
    color: var(--hbmsu-white) !important;
}

.slide-card.text-white *,
.text-white * {
    color: var(--hbmsu-white) !important;
}

.slide-card.text-dark,
.text-dark {
    color: var(--hbmsu-dark) !important;
}

.slide-card.text-dark *,
.text-dark * {
    color: var(--hbmsu-dark) !important;
}

.slide-card.text-green,
.slide-card.text-hbmsu-blue,
.text-green,
.text-hbmsu-blue {
    color: var(--hbmsu-blue) !important;
}

.slide-card.text-green *,
.slide-card.text-hbmsu-blue *,
.text-green *,
.text-hbmsu-blue * {
    color: var(--hbmsu-blue) !important;
}

.slide-card.text-gold,
.slide-card.text-hbmsu-sky,
.text-gold,
.text-hbmsu-sky {
    color: var(--hbmsu-sky) !important;
}

.slide-card.text-gold *,
.slide-card.text-hbmsu-sky *,
.text-gold *,
.text-hbmsu-sky * {
    color: var(--hbmsu-sky) !important;
}

.slide-card.text-muted,
.text-muted {
    color: var(--hbmsu-muted) !important;
}

.slide-card.text-muted *,
.text-muted * {
    color: var(--hbmsu-muted) !important;
}

/* Card Text Alignment */
.slide-card.text-start { text-align: left !important; direction: ltr !important; }
section[dir="rtl"] .slide-card.text-start { text-align: right !important; direction: rtl !important; }
.slide-card.text-center { text-align: center !important; }
.slide-card.text-end { text-align: right !important; }
section[dir="rtl"] .slide-card.text-end { text-align: left !important; }

/* Card Layout Alignments */
.slide-card.align-start { align-items: flex-start !important; text-align: left !important; direction: ltr !important; }
section[dir="rtl"] .slide-card.align-start { align-items: flex-start !important; text-align: right !important; direction: rtl !important; }
.slide-card.align-center { align-items: center !important; }
.slide-card.align-end { align-items: flex-end !important; text-align: right !important; }
section[dir="rtl"] .slide-card.align-end { text-align: left !important; }

.slide-card.justify-start { justify-content: flex-start !important; }
.slide-card.justify-center { justify-content: center !important; }
.slide-card.justify-end { justify-content: flex-end !important; }

/* Card Borders */
.slide-card.border-green,
.slide-card.border-hbmsu-blue {
    border-color: var(--hbmsu-blue) !important;
}

.slide-card.border-gold,
.slide-card.border-hbmsu-sky {
    border-color: var(--hbmsu-sky) !important;
}

.slide-card.border-danger {
    border-color: #ef4444 !important;
}

.slide-card.border-dashed {
    border-style: dashed !important;
}

.slide-card.border-none {
    border-style: none !important;
    border-width: 0 !important;
}

/* --- Slide Footer (Symmetrical, HBMSU Slogan & Numbers) --- */
.slide-footer {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 100 !important;
    min-height: 28px !important;
}

/* Reference block: positioned right below the grid */
.slide-reference-container {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    font-size: 0.52em !important;
    font-weight: 700 !important;
    color: var(--hbmsu-muted) !important;
    opacity: 0.85 !important;
}

/* Left-aligned for English slides */
section[dir="ltr"] .slide-reference-container,
.slide-reference-container.ref-ltr {
    text-align: left !important;
    direction: ltr !important;
}

/* Right-aligned for Arabic slides */
section[dir="rtl"] .slide-reference-container,
.slide-reference-container.ref-rtl {
    text-align: right !important;
    direction: rtl !important;
}

.slide-reference-container a,
.slide-reference-container a:hover {
    color: var(--hbmsu-blue) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--hbmsu-sky) !important;
    margin: 0 4px !important;
    transition: color 0.2s ease !important;
}

.slide-reference-container a:hover {
    color: var(--hbmsu-blue-dark) !important;
}

/* Horizontal separator line between reference/content and footer */
.slide-footer-divider {
    width: calc(100% - 20px) !important;
    margin: 8px auto !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 75, 135, 0.12) !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Bottom Right (first item in RTL): Date Container */
.footer-date-container {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    font-size: 0.52em !important;
    font-weight: 700 !important;
    color: var(--hbmsu-muted) !important;
    opacity: 0.85 !important;
    gap: 8px !important;
}

/* Minimalist Lucide SVG Icon Styles */
.lucide {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.2px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    position: relative !important;
    top: -1px !important;
}

li .lucide {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2.5px !important;
}

/* Bottom Center: Slogan — absolute center so LTR left-align overrides cannot shift it */
.reveal section .footer-slogan,
.reveal section[dir="ltr"] .footer-slogan,
.reveal section[dir="rtl"] .footer-slogan,
.footer-slogan {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: 58% !important;
    text-align: center !important;
    direction: ltr !important; /* keep centered bilingual stack stable under LTR slide rules */
    font-size: 0.50em !important;
    font-weight: 700 !important;
    color: var(--hbmsu-muted) !important;
    letter-spacing: 0.3px !important;
    opacity: 0.85 !important;
    line-height: 1.3 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Bottom Left (last item in RTL): Page Number Container */
.footer-page-num-container {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.footer-date-container .footer-date {
    display: inline-flex !important;
    align-items: center !important;
    direction: ltr !important;
    gap: 6px !important;
    font-size: 1em !important;
    font-weight: 700 !important;
}

.btn-slide-num {
    background: var(--hbmsu-sky-soft) !important;
    color: var(--hbmsu-blue) !important;
    border: 1px solid rgba(0, 75, 135, 0.18) !important;
    border-radius: 8px !important;
    padding: 3px 10px !important;
    font-size: 0.52em !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 75, 135, 0.04) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-slide-num:hover {
    background: var(--hbmsu-blue) !important;
    color: var(--hbmsu-white) !important;
    border-color: var(--hbmsu-blue) !important;
}

/* Adjust Reveal.js navigation controls slightly higher so they don't overlap the footer */
.reveal .controls {
    bottom: 75px !important;
    right: 20px !important;
}

/* --- Slide Card Interactive Micro-animations & Hover-Reveal --- */
.hover-reveal-card {
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.hover-reveal-card:hover,
.hover-reveal-card.is-revealed,
.hover-reveal-card.is-active {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(var(--hbmsu-blue-dark-rgb), 0.16) !important;
}

/* Hide revealable content (icon, title, body, footer) by default */
.hover-reveal-card > *,
.hover-reveal-card .card-reveal-body,
.hover-reveal-card .card-reveal-footer {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s !important;
    pointer-events: none !important;
}

/* Reveal content on mouse hover or active toggle */
.hover-reveal-card:hover > *,
.hover-reveal-card.is-revealed > *,
.hover-reveal-card.is-active > *,
.hover-reveal-card:hover .card-reveal-body,
.hover-reveal-card.is-revealed .card-reveal-body,
.hover-reveal-card.is-active .card-reveal-body,
.hover-reveal-card:hover .card-reveal-footer,
.hover-reveal-card.is-revealed .card-reveal-footer,
.hover-reveal-card.is-active .card-reveal-footer {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.hover-reveal-card .card-reveal-prompt {
    display: none !important;
}

/* Print and PDF Export overrides: cards MUST be 100% revealed */
@media print {
    .hover-reveal-card {
        transform: none !important;
        box-shadow: none !important;
    }
    .hover-reveal-card .card-reveal-body,
    .hover-reveal-card .card-reveal-footer,
    .hover-reveal-card>* {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        display: block !important;
    }
    .hover-reveal-card .card-reveal-prompt {
        display: none !important;
    }
}

html.print-pdf .hover-reveal-card,
body.print-pdf .hover-reveal-card,
.print-pdf .hover-reveal-card {
    transform: none !important;
    box-shadow: none !important;
}

html.print-pdf .hover-reveal-card .card-reveal-body,
body.print-pdf .hover-reveal-card .card-reveal-body,
.print-pdf .hover-reveal-card .card-reveal-body,
html.print-pdf .hover-reveal-card .card-reveal-footer,
body.print-pdf .hover-reveal-card .card-reveal-footer,
.print-pdf .hover-reveal-card .card-reveal-footer,
html.print-pdf .hover-reveal-card>*,
body.print-pdf .hover-reveal-card>*,
.print-pdf .hover-reveal-card>* {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html.print-pdf .hover-reveal-card .card-reveal-prompt,
body.print-pdf .hover-reveal-card .card-reveal-prompt,
.print-pdf .hover-reveal-card .card-reveal-prompt {
    display: none !important;
}

/* --- HBMSU Authentic Title Slide Style (Perfect Vertical & Horizontal Centering) --- */
.reveal section.is-title-slide-section {
    padding: 0 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.reveal section.is-title-slide-section .grid-container,
.hbmsu-title-slide-wrapper {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/*
 * Title slide print fix: Reveal's print CSS forces section { display:block },
 * which collapses the flex title layout — mosaic drops to the page edge and
 * speaker details clip off-page. Restore the screen flex stack for print only.
 */
html.print-pdf .reveal section.is-title-slide-section,
html.reveal-print .reveal section.is-title-slide-section,
html.print-pdf .reveal .slides .pdf-page > section.is-title-slide-section,
html.reveal-print .reveal .slides .pdf-page > section.is-title-slide-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 720px !important;
    max-height: 720px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html.print-pdf .reveal section.is-title-slide-section .grid-container,
html.reveal-print .reveal section.is-title-slide-section .grid-container,
html.print-pdf .hbmsu-title-slide-wrapper,
html.reveal-print .hbmsu-title-slide-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

html.print-pdf .hbmsu-title-top,
html.reveal-print .hbmsu-title-top,
html.print-pdf .hbmsu-title-bottom,
html.reveal-print .hbmsu-title-bottom {
    flex: 1 1 0 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.print-pdf .hbmsu-title-center-mosaic,
html.reveal-print .hbmsu-title-center-mosaic {
    flex: 0 0 160px !important;
    height: 160px !important;
    min-height: 160px !important;
    background-image: url('assets/hbmsu-title-mosaic-banner.png') !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto 100% !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

html.print-pdf .hbmsu-title-box,
html.reveal-print .hbmsu-title-box,
html.print-pdf .hbmsu-speaker-name,
html.reveal-print .hbmsu-speaker-name,
html.print-pdf .hbmsu-speaker-email,
html.reveal-print .hbmsu-speaker-email {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Top: HBMSU Logo Centered */
.hbmsu-title-top {
    flex: 1 1 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
}

.hbmsu-title-logo {
    max-height: 65px !important;
    max-width: 380px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Center: Horizontal Mosaic Banner Repeating the Cropped Triangle Pattern */
.hbmsu-title-center-mosaic {
    flex: 0 0 160px !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 150px !important;
    background-image: url('assets/hbmsu-title-mosaic-banner.png') !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto 100% !important;
    border-radius: var(--hbmsu-radius);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Refined Centered Title Box - Matches Presentation Design System */
.hbmsu-title-box {
    background: var(--hbmsu-blue-dark) !important;
    border: 1.5px solid rgba(0, 163, 224, 0.45) !important;
    border-radius: var(--hbmsu-radius) !important;
    padding: 10px 32px !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 5;
    max-width: 85%;
    transform: none !important;
}

.hbmsu-title-box h1 {
    color: #FFFFFF !important;
    font-size: 1.30em !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    font-family: 'Cairo', 'Inter', -apple-system, sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Bottom: Presenter Details Centered */
.hbmsu-title-bottom {
    flex: 1 1 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
}

.hbmsu-speaker-name {
    font-size: 0.90em !important;
    font-weight: 700 !important;
    color: var(--hbmsu-blue-dark) !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
}

.hbmsu-speaker-email {
    font-size: 0.65em !important;
    font-weight: 600 !important;
    color: var(--hbmsu-muted) !important;
    line-height: 1.25 !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    letter-spacing: 0.3px !important;
}

/* --- Full Content Slide (e.g. Illusion of Automation centered image) --- */
.reveal section.is-full-content-slide {
    padding: 20px 40px 30px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.reveal section.is-full-content-slide .grid-container {
    height: 520px !important;
    max-height: 80vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.illusion-image-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.illusion-img {
    max-height: 480px !important;
    max-width: 85% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 40, 85, 0.14) !important;
    display: block !important;
}

/* --- Global Image Modal Lightbox --- */
.image-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.image-modal-overlay.active {
    display: flex !important;
}

.image-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 25, 47, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.image-modal-dialog {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 88vh !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(0, 75, 135, 0.2) !important;
    box-shadow: 0 25px 60px rgba(0, 20, 50, 0.4) !important;
    padding: 20px 24px 18px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000000 !important;
    animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.image-modal-close {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(0, 75, 135, 0.08) !important;
    border: none !important;
    color: var(--hbmsu-dark) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.image-modal-close:hover {
    background: var(--hbmsu-sky) !important;
    color: #FFFFFF !important;
    transform: rotate(90deg) !important;
}

.image-modal-body {
    max-width: 100% !important;
    max-height: 72vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.image-modal-body img {
    max-width: 100% !important;
    max-height: 72vh !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.image-modal-caption {
    font-size: 0.92em !important;
    font-weight: 700 !important;
    color: var(--hbmsu-blue) !important;
    margin-top: 12px !important;
    text-align: center !important;
}

.clickable-study-card {
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.clickable-study-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 75, 135, 0.18) !important;
    border-color: var(--hbmsu-sky) !important;
}

/* Small subtle icon in the card corner for image preview */
.card-preview-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 75, 135, 0.08);
    color: var(--hbmsu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
    z-index: 3;
    pointer-events: none;
}

.card-preview-icon.top-right {
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    top: 12px !important;
}

.clickable-study-card:hover .card-preview-icon {
    background: var(--hbmsu-sky) !important;
    color: #FFFFFF !important;
    transform: scale(1.12);
}

.clickable-study-card .badge-zoom-hint {
    display: none !important;
}

/* --- Subtle, Micro-Pixel Motion System (Overriding Animate.css defaults) --- */
/* Elements shift just 14–16px while fading in, seamlessly assembling the slide */
.animate__animated {
    --animate-duration: 0.48s;
    animation-duration: 0.48s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Subtle staggered delays for fluid cascading assembly (replacing 1s-4s long pauses) */
.animate__delay-100ms {
    animation-delay: 0.06s !important;
}

.animate__delay-200ms {
    animation-delay: 0.12s !important;
}

.animate__delay-1s {
    animation-delay: 0.08s !important;
}

.animate__delay-2s {
    animation-delay: 0.16s !important;
}

.animate__delay-3s {
    animation-delay: 0.24s !important;
}

.animate__delay-4s {
    animation-delay: 0.32s !important;
}

/* Micro-Pixel Keyframes: Moving subtle pixels instead of 100% outside the screen */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-16px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-16px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInLeft {
    animation-name: fadeInLeft !important;
    -webkit-animation-name: fadeInLeft !important;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(16px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(16px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInRight {
    animation-name: fadeInRight !important;
    -webkit-animation-name: fadeInRight !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInUp {
    animation-name: fadeInUp !important;
    -webkit-animation-name: fadeInUp !important;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -14px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInDown {
    animation-name: fadeInDown !important;
    -webkit-animation-name: fadeInDown !important;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
    }
}
.animate__zoomIn {
    animation-name: zoomIn !important;
    -webkit-animation-name: zoomIn !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animate__fadeIn {
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;
}

@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .animate__animated {
        animation: none !important;
        opacity: 1 !important;
    }
}

.history-photo {
    max-height: 94% !important;
    max-width: 94% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: var(--hbmsu-radius) !important;
    box-shadow: 0 14px 32px rgba(0, 40, 85, 0.16) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.history-photo:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 18px 38px rgba(0, 40, 85, 0.22) !important;
}

.clickable-video-card {
    cursor: pointer !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.clickable-video-card:hover {
    transform: translateY(-2px) !important;
}
.clickable-video-card:hover .video-play-badge {
    background: var(--hbmsu-blue) !important;
    color: #FFFFFF !important;
    border-color: var(--hbmsu-blue) !important;
    box-shadow: 0 4px 14px rgba(0, 75, 135, 0.25) !important;
}
.clickable-video-card:hover .video-play-badge i,
.clickable-video-card:hover .video-play-badge svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: #FFFFFF !important;
    transform: scale(1.12);
}
.clickable-video-card.video-overlay-btn:hover {
    transform: translateX(-50%) translateY(-2px) !important;
}

.enlargeable-img {
    cursor: zoom-in !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.enlargeable-img:hover {
    transform: scale(1.015) !important;
    box-shadow: 0 10px 28px rgba(0, 40, 85, 0.18) !important;
}

/* --- Plyr.js Video Player Customization (HBMSU Sky Theme) --- */
:root {
    --plyr-color-main: #0072CE;
    --plyr-video-control-color: #FFFFFF;
    --plyr-video-control-color-hover: #FFFFFF;
    --plyr-video-control-background-hover: #0072CE;
    --plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
    --plyr-menu-background: rgba(13, 27, 42, 0.95);
    --plyr-menu-color: #FFFFFF;
    --plyr-badge-text-color: #0072CE;
    --plyr-badge-background: #FFFFFF;
}

.video-modal-dialog {
    width: 90vw !important;
    max-width: 960px !important;
    max-height: 90vh !important;
    padding: 22px 24px 18px 24px !important;
    background: #0b1524 !important;
    border: 1.5px solid rgba(0, 114, 206, 0.45) !important;
    box-shadow: 0 30px 80px rgba(0, 10, 30, 0.75) !important;
    border-radius: 20px !important;
}

.video-modal-container {
    width: 100% !important;
    max-height: 72vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.video-modal-container .plyr,
.video-modal-container video {
    width: 100% !important;
    max-height: 72vh !important;
    border-radius: 12px !important;
}

.youtube-modal-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    max-height: 72vh !important;
    background: #000000 !important;
}
.youtube-modal-wrap[hidden] {
    display: none !important;
}
.youtube-modal-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

#video-modal-caption {
    color: #E2F1FC !important;
    font-size: 1.08em !important;
    font-weight: 700 !important;
    margin-top: 14px !important;
    text-align: center !important;
    letter-spacing: 0.2px;
}

/* Video Preview Card on Slide */
.video-preview-wrapper {
    position: relative !important;
    cursor: pointer !important;
    border-radius: var(--hbmsu-radius) !important;
    box-shadow: 0 14px 32px rgba(0, 40, 85, 0.16) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
}

.video-preview-wrapper:hover {
    transform: translateY(-3px) scale(1.015) !important;
    box-shadow: 0 20px 42px rgba(0, 75, 135, 0.28) !important;
}

.video-play-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 20, 50, 0.28) !important;
    transition: background 0.25s ease !important;
}

.video-preview-wrapper:hover .video-play-overlay {
    background: rgba(0, 20, 50, 0.45) !important;
}

.video-play-overlay .play-btn-circle {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--hbmsu-sky, #0072CE) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease !important;
}

.video-preview-wrapper:hover .play-btn-circle {
    transform: scale(1.14) !important;
    background: #FFFFFF !important;
    color: var(--hbmsu-blue-dark, #002855) !important;
    box-shadow: 0 12px 30px rgba(0, 114, 206, 0.45) !important;
}

/* --- Table Zoom Modal Lightbox --- */
.zoomable-table-card {
    cursor: zoom-in !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.zoomable-table-card table,
.zoomable-table-card th,
.zoomable-table-card td {
    cursor: zoom-in !important;
}

.zoomable-table-card:hover {
    border-color: var(--hbmsu-sky) !important;
    box-shadow: 0 12px 32px rgba(0, 40, 85, 0.16) !important;
}

.zoomable-table-card:hover .card-preview-icon {
    background: var(--hbmsu-sky) !important;
    color: #FFFFFF !important;
    border-color: var(--hbmsu-sky) !important;
    transform: scale(1.04);
}

.table-modal-dialog {
    width: 96vw !important;
    max-width: 1480px !important;
    max-height: 94vh !important;
    height: auto !important;
    padding: 20px 24px 22px 24px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(0, 75, 135, 0.22) !important;
    box-shadow: 0 30px 80px rgba(0, 20, 50, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.table-modal-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid rgba(var(--hbmsu-blue-rgb), 0.12) !important;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.table-modal-body {
    width: 100% !important;
    max-height: calc(88vh - 90px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
    padding: 2px !important;
}

/* Custom sleek scrollbar for table modal */
.table-modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-modal-body::-webkit-scrollbar-track {
    background: rgba(var(--hbmsu-blue-rgb), 0.05);
    border-radius: 4px;
}
.table-modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--hbmsu-blue-rgb), 0.25);
    border-radius: 4px;
}
.table-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--hbmsu-sky);
}

/* Enlarged table inside modal */
.table-modal-body table {
    width: 100% !important;
    height: auto !important;
    border-collapse: collapse !important;
    font-size: 0.84em !important;
    line-height: 1.46 !important;
    table-layout: fixed !important;
    color: var(--hbmsu-dark) !important;
    margin-bottom: 6px !important;
    background: #FFFFFF !important;
}

.table-modal-body th {
    padding: 12px 12px !important;
    font-size: 0.94em !important;
    font-weight: 800 !important;
    background: var(--hbmsu-sky-soft) !important;
    color: var(--hbmsu-blue-dark) !important;
    border: 1px solid rgba(var(--hbmsu-blue-rgb), 0.18) !important;
    text-align: left !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

.table-modal-body td {
    padding: 11px 12px !important;
    border: 1px solid rgba(var(--hbmsu-blue-rgb), 0.14) !important;
    vertical-align: top !important;
    font-size: 0.94em !important;
    line-height: 1.44 !important;
}

.table-modal-body tr:hover td {
    background: rgba(var(--hbmsu-sky-rgb), 0.05) !important;
}

.table-modal-body div[style*="justify-content: space-between"] {
    font-size: 0.82em !important;
    padding: 8px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
}

/* --- Empirical Research / Fact Modal Lightbox --- */
.fact-modal-dialog {
    width: 92vw !important;
    max-width: 860px !important;
    max-height: 90vh !important;
    height: auto !important;
    padding: 22px 26px 20px 26px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
    box-shadow: 0 30px 80px rgba(0, 20, 50, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

.fact-modal-body {
    width: 100% !important;
    max-height: calc(88vh - 40px) !important;
    overflow-y: auto !important;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
    padding: 4px 2px !important;
}

.fact-modal-body::-webkit-scrollbar {
    width: 6px;
}
.fact-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 40, 85, 0.04);
    border-radius: 3px;
}
.fact-modal-body::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.35);
    border-radius: 3px;
}
.fact-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.6);
}

.clickable-fact-card {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.clickable-fact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.2) !important;
    border-top-color: #059669 !important;
}

.clickable-fact-card:hover .card-preview-icon {
    background: #059669 !important;
    color: #FFFFFF !important;
    border-color: #059669 !important;
    transform: scale(1.04);
}

.fact-modal-dialog.download-modal-dialog {
    max-width: 440px !important;
    border-color: rgba(0, 120, 212, 0.32) !important;
}

.rpa-download-chip {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 120, 212, 0.22);
    border-radius: 10px;
    padding: 6px 10px 6px 6px;
    box-shadow: 0 8px 18px rgba(0, 20, 50, 0.18);
    z-index: 3;
    pointer-events: none;
}

.rpa-download-chip img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 7px;
    display: block;
    flex-shrink: 0;
}

.rpa-download-chip span {
    font-size: 0.68em;
    font-weight: 800;
    color: var(--hbmsu-blue-dark);
    line-height: 1.15;
    white-space: nowrap;
}