/**
 * Clean Multi-Language CSS for UIN SAIZU
 * Completely suppresses Google Translate top banner, popups, and tooltips
 */

/* Suppress all Google top banners, floating bars, popups, and frames */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
#google_translate_element2,
div.skiptranslate:not(.translator),
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-ORHb,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-combo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    border: none !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Prevent body from jumping or creating empty gap at top */
html, body {
    top: 0px !important;
    position: static !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Multi-Language Translator Dropdown */
.header-translator {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.translator .dropdown-toggle,
.translator button#dropdownMenuButton {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1 !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
}

.translator .dropdown-toggle:hover,
.translator .dropdown-toggle:focus,
.translator .dropdown-toggle.show,
.translator button#dropdownMenuButton:hover,
.translator button#dropdownMenuButton:focus {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
}

.translator #active-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.translator:hover #active-flag {
    transform: scale(1.08);
}

.translator .dropdown-toggle::after,
.translator button#dropdownMenuButton::after {
    margin-left: 2px !important;
    vertical-align: middle !important;
    border-top-color: #ffffff !important;
}

.translator ul,
.translator .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    min-width: 100px !important;
    width: auto !important;
    max-width: 130px !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
    z-index: 99999 !important;
    margin-top: 6px !important;
    border: none !important;
}

.translator ul li,
.translator .dropdown-menu li {
    min-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.translator ul li:last-child,
.translator .dropdown-menu li:last-child {
    border-bottom: none !important;
}

.translator ul li a,
.translator .dropdown-menu li a,
.translator .dropdown-item {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.translator ul li a:hover,
.translator .dropdown-menu li a:hover,
.translator .dropdown-item:hover {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}

.translator .dropdown-menu:not(.show) {
    display: none !important;
}

.translator .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Arabic Text Handling: Keep div / column / row positions strictly intact (LTR), switch only text */
body.lang-ar {
    font-family: "MotoGP Text", Arial, sans-serif !important;
}

/* 1. Lock document & all container layouts to original horizontal positions (LTR) */
html,
body,
body.lang-ar,
html[dir=rtl],
body.translated-rtl {
    direction: ltr !important;
}

body.lang-ar .row,
body.translated-rtl .row,
html[dir=rtl] .row {
    direction: ltr !important;
    flex-direction: row !important;
}

body.lang-ar .d-flex:not(.flex-column),
body.translated-rtl .d-flex:not(.flex-column),
html[dir=rtl] .d-flex:not(.flex-column) {
    direction: ltr !important;
    flex-direction: row !important;
}

/* 2. Explicit Header structure protection */
.header,
body.lang-ar .header,
body.translated-rtl .header,
html[dir=rtl] .header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

.header-main-row,
body.lang-ar .header-main-row,
body.translated-rtl .header-main-row,
html[dir=rtl] .header-main-row {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    direction: ltr !important;
}

.flex-column,
body.lang-ar .flex-column,
body.translated-rtl .flex-column,
html[dir=rtl] .flex-column {
    flex-direction: column !important;
}

body.lang-ar .header-left,
body.translated-rtl .header-left,
html[dir=rtl] .header-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    direction: ltr !important;
}

body.lang-ar .header .logo,
body.translated-rtl .header .logo,
html[dir=rtl] .header .logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    direction: ltr !important;
}

body.lang-ar .header .logo img,
body.translated-rtl .header .logo img,
html[dir=rtl] .header .logo img {
    max-height: 27px !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
}

/* Desktop Navbar in Arabic / RTL Mode */
@media (min-width: 1200px) {
    body.lang-ar .navmenu,
    body.translated-rtl .navmenu,
    html[dir=rtl] .navmenu {
        direction: ltr !important;
        display: flex !important;
        justify-content: flex-end !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    body.lang-ar .navmenu > ul,
    body.translated-rtl .navmenu > ul,
    html[dir=rtl] .navmenu > ul {
        direction: ltr !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.lang-ar .navmenu > ul > li,
    body.translated-rtl .navmenu > ul > li,
    html[dir=rtl] .navmenu > ul > li {
        direction: ltr !important;
        flex-shrink: 0 !important;
    }

    body.lang-ar .navmenu > ul > li > a,
    body.translated-rtl .navmenu > ul > li > a,
    html[dir=rtl] .navmenu > ul > li > a {
        font-size: 13.5px !important;
        padding: 4px 4px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    body.lang-ar .navmenu > ul > li > a i,
    body.translated-rtl .navmenu > ul > li > a i,
    html[dir=rtl] .navmenu > ul > li > a i {
        margin-left: 3px !important;
        margin-right: 3px !important;
        font-size: 11.5px !important;
    }

    body.lang-ar .navmenu .dropdown ul,
    body.translated-rtl .navmenu .dropdown ul,
    html[dir=rtl] .navmenu .dropdown ul {
        direction: rtl !important;
        text-align: right !important;
    }

    body.lang-ar .navmenu .dropdown ul a,
    body.translated-rtl .navmenu .dropdown ul a,
    html[dir=rtl] .navmenu .dropdown ul a {
        direction: rtl !important;
        text-align: right !important;
        font-size: 15px !important;
    }

    body.lang-ar .navmenu > ul > li:last-child > ul,
    body.lang-ar .navmenu .dropdown-kontak > ul,
    body.lang-ar .navmenu > ul > li:last-child .dropdown ul,
    body.lang-ar .navmenu > ul > li:nth-last-child(2) .dropdown ul,
    body.translated-rtl .navmenu > ul > li:last-child > ul,
    body.translated-rtl .navmenu .dropdown-kontak > ul,
    body.translated-rtl .navmenu > ul > li:last-child .dropdown ul,
    body.translated-rtl .navmenu > ul > li:nth-last-child(2) .dropdown ul,
    html[dir=rtl] .navmenu > ul > li:last-child > ul,
    html[dir=rtl] .navmenu .dropdown-kontak > ul {
        left: auto !important;
        right: 0 !important;
    }
}

/* Mobile Navbar in Arabic / RTL Mode */
@media (max-width: 1199px) {
    body.lang-ar .navmenu,
    body.translated-rtl .navmenu,
    html[dir=rtl] .navmenu {
        display: block !important;
        width: auto !important;
        direction: rtl !important;
    }

    body.lang-ar .navmenu > ul,
    body.translated-rtl .navmenu > ul,
    html[dir=rtl] .navmenu > ul {
        direction: rtl !important;
        display: none;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        position: absolute !important;
        inset: 60px 20px 20px 20px !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        background-color: var(--nav-mobile-background-color) !important;
        border-radius: 6px !important;
    }

    .mobile-nav-active body.lang-ar .navmenu > ul,
    .mobile-nav-active body.translated-rtl .navmenu > ul,
    .mobile-nav-active html[dir=rtl] .navmenu > ul,
    body.lang-ar.mobile-nav-active .navmenu > ul,
    body.translated-rtl.mobile-nav-active .navmenu > ul,
    html[dir=rtl].mobile-nav-active .navmenu > ul,
    body.lang-ar .mobile-nav-active .navmenu > ul,
    body.translated-rtl .mobile-nav-active .navmenu > ul,
    html[dir=rtl] .mobile-nav-active .navmenu > ul {
        display: block !important;
    }

    body.lang-ar .navmenu > ul > li,
    body.translated-rtl .navmenu > ul > li,
    html[dir=rtl] .navmenu > ul > li {
        display: block !important;
        width: 100% !important;
        direction: rtl !important;
    }

    body.lang-ar #navmenu > ul > li > a,
    body.translated-rtl #navmenu > ul > li > a,
    html[dir=rtl] #navmenu > ul > li > a,
    body.lang-ar .navmenu a,
    body.translated-rtl .navmenu a,
    html[dir=rtl] .navmenu a {
        direction: rtl !important;
        text-align: right !important;
        font-size: 17.5px !important;
        padding: 10px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        white-space: normal !important;
        color: #1b2f45 !important;
    }

    body.lang-ar .navmenu a i,
    body.translated-rtl .navmenu a i,
    html[dir=rtl] .navmenu a i {
        font-size: 14px !important;
        margin-right: 8px !important;
        margin-left: 0 !important;
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
        background-color: rgba(2, 47, 34, 0.08) !important;
        color: #022f22 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    body.lang-ar .navmenu .dropdown ul,
    body.translated-rtl .navmenu .dropdown ul,
    html[dir=rtl] .navmenu .dropdown ul {
        position: static !important;
        display: none !important;
        margin: 6px 14px !important;
        padding: 8px 0 !important;
        box-shadow: none !important;
        direction: rtl !important;
        text-align: right !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    body.lang-ar .navmenu ul.dropdown-active,
    body.lang-ar .navmenu .dropdown > ul.dropdown-active,
    body.translated-rtl .navmenu ul.dropdown-active,
    body.translated-rtl .navmenu .dropdown > ul.dropdown-active,
    html[dir=rtl] .navmenu ul.dropdown-active,
    html[dir=rtl] .navmenu .dropdown > ul.dropdown-active {
        display: block !important;
    }

    body.lang-ar .navmenu .dropdown ul a,
    body.translated-rtl .navmenu .dropdown ul a,
    html[dir=rtl] .navmenu .dropdown ul a {
        padding: 8px 16px !important;
        font-size: 15.5px !important;
        direction: rtl !important;
        text-align: right !important;
        display: flex !important;
        justify-content: space-between !important;
    }
}

/* Disclaimer Dock Bar in Arabic Mode */
body.lang-ar .disclaimer-dock-wrap,
body.translated-rtl .disclaimer-dock-wrap {
    direction: ltr !important;
}

body.lang-ar .disclaimer-dock-btn,
body.translated-rtl .disclaimer-dock-btn {
    font-size: 12.5px !important;
    padding: 5px 12px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    direction: rtl !important;
}

body.lang-ar .disclaimer-dock-btn .nav-footer,
body.translated-rtl .disclaimer-dock-btn .nav-footer {
    font-size: 12.5px !important;
}

/* 3. Proper RTL Text Orientation for Arabic Content (without moving container divs) */
body.lang-ar p,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6,
body.lang-ar blockquote,
body.lang-ar .content,
body.lang-ar .article,
body.lang-ar article,
body.lang-ar .article-content,
body.lang-ar .blog-content,
body.lang-ar .description,
body.lang-ar .leader-details,
body.lang-ar .leader-details .content,
body.lang-ar .member-info,
body.lang-ar .accordion-body,
body.lang-ar .accordion-button,
body.lang-ar .tab-pane,
body.lang-ar .list-group-item,
body.lang-ar table,
body.lang-ar th,
body.lang-ar td,
html[dir=rtl] p,
html[dir=rtl] .content,
html[dir=rtl] article,
body.translated-rtl p,
body.translated-rtl .content,
body.translated-rtl article {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: isolate;
}

/* Centered text exceptions */
body.lang-ar .hero-brand p,
body.lang-ar .hero-brand h1,
body.lang-ar .text-center {
    text-align: center !important;
    direction: rtl !important;
}

/* Lists orientation in Arabic */
body.lang-ar ul:not(.navmenu ul):not(.navbar ul):not(.dropdown ul):not(.profile-nav-list),
body.lang-ar ol {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* Keep section headings, titles, and text-start elements aligned to the left matching the decorative underline */
body.lang-ar .home-section-heading,
body.lang-ar .home-section-heading h1,
body.lang-ar .home-section-heading h2,
body.lang-ar .home-section-heading p,
body.lang-ar .home-section-heading .section-intro,
body.lang-ar .akademik-heading,
body.lang-ar .akademik-heading h1,
body.lang-ar .akademik-heading p,
body.lang-ar .akademik-heading .section-intro,
body.lang-ar .home-event-heading,
body.lang-ar .home-event-heading h1,
body.lang-ar .home-event-heading p,
body.lang-ar .home-event-heading .section-intro,
body.lang-ar .home-artikel-heading,
body.lang-ar .home-artikel-heading h1,
body.lang-ar .home-artikel-heading p,
body.lang-ar .home-artikel-heading .section-intro,
body.lang-ar .home-recent-posts-heading,
body.lang-ar .home-recent-posts-heading h1,
body.lang-ar .home-recent-posts-heading p,
body.lang-ar .kerjasama-heading,
body.lang-ar .kerjasama-heading h1,
body.lang-ar .kerjasama-heading p,
body.lang-ar .galeri-heading,
body.lang-ar .galeri-heading h1,
body.lang-ar .galeri-heading p,
body.lang-ar .section-title,
body.lang-ar .section-title h1,
body.lang-ar .section-title h2,
body.lang-ar .section-title p,
body.lang-ar .text-start,
body.lang-ar .text-start * {
    text-align: left !important;
}

body.lang-ar .akademik-heading::after,
body.lang-ar .home-event-heading::after,
body.lang-ar .home-artikel-heading::after,
body.lang-ar .home-recent-posts-heading::after,
body.lang-ar .kerjasama-heading::after,
body.lang-ar .galeri-heading::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* 2-column profil menu cards in Arabic mode */
body.lang-ar .profil-menu-boxes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    direction: ltr !important;
}
body.lang-ar .profil-menu-btn {
    direction: rtl !important;
    text-align: right !important;
}
body.lang-ar .profil-menu-btn .btn-label {
    direction: rtl !important;
    justify-content: flex-start !important;
}

/* 2-column card-columns in Arabic mode */
body.lang-ar .card-columns,
body.lang-ar .categories-widget .card-columns,
body.lang-ar .profil-menu-boxes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    direction: ltr !important;
}
body.lang-ar .card-columns .card,
body.lang-ar .profil-menu-btn {
    direction: rtl !important;
    text-align: right !important;
}
body.lang-ar .card-columns .card .btn-label,
body.lang-ar .profil-menu-btn .btn-label {
    direction: rtl !important;
    justify-content: flex-start !important;
}