/*
 * Page-builder layout and widget styles, shared by the English and Arabic sites (loaded after
 * custom.css / custom_ar.css). Use logical properties (inline-start / inline-end) so one rule
 * works in both directions; Arabic-only details are scoped to html[lang=ar].
 */

/* Statistics widget (page builder): figures fill the column, up to 4 per row, 2 per row on phones.
   Values and labels sit on shared grid rows (subgrid), and blocks placed side by side are given the
   same height (custom.js), so headings, figures and labels line up across columns.
   Value sizes follow each figure's width (container query units) so long values fit narrow columns. */
.row.align-items-center:has(> [class*="col-"] .stats-block) {
    align-items: flex-start !important;
}

.stats-block {
    margin-bottom: 48px;
}

.stats-block .stats-block-title {
    margin-bottom: 28px;
}

.stats-grid {
    --stats-gap: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(120px, calc((100% - 3 * var(--stats-gap)) / 4)), 1fr));
    column-gap: var(--stats-gap);
    row-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stats-item {
    container-type: inline-size;
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding-bottom: 32px;
}

.stats-value {
    font-family: "aktiv-grotesk";
    font-size: 32px;
    font-size: clamp(26px, 21cqi, 36px);
    font-weight: 700;
    white-space: nowrap; /* custom.js shrinks the figures of a block that do not fit */
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--suad-primary-white);
    margin: 0 0 10px;
}

.stats-value .stats-suffix {
    font-size: 0.55em;
    top: -0.75em;
    margin-inline-start: 2px;
}

.stats-label {
    font-size: 17px;
    line-height: 1.4;
    color: var(--suad-primary-gold);
    margin: 0;
}

@media (max-width: 767px) {
    .stats-block {
        margin-bottom: 32px;
    }

    .stats-grid {
        --stats-gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-item {
        padding-bottom: 24px;
    }

    .stats-label {
        font-size: 15px;
    }
}

/* Page-builder sections line up with the header: whatever container setting a section has, its
   content spans the same column as the header (logo to "Apply Now"). */
.builder-section-col > .container,
.builder-section-col > .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* "No padding" sections drop the column's side padding (p-0), so their container keeps it instead:
   same alignment, and the inner row's negative margins stay inside the page. */
.builder-section-col.p-0 > .container,
.builder-section-col.p-0 > .container-fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}


/* Inner page banner title starts under the header logo. The logo sits at 12.5% of the page + 3px;
   the title's column starts at 1/12 of the page + 12px padding, and 12.5% of that column's content
   box is 1/24 of the page - 3px, so the offset is 12.5% - 6px. */
.inner-main-banner-caption {
    inset-inline-start: calc(12.5% - 6px);
}

/* Gallery thumbnails scroll inside their strip instead of widening the page on phones (in Arabic the
   overflow went past the left edge and the whole page was zoomed out). */
.thumbs {
    overflow-x: auto;
    scrollbar-width: thin;
}

.thumbs img {
    flex: none;
}

/* Arabic */
/* Menu close button on phones and tablets: style_ar.css placed it 65px above the screen; same round
   button in the header row as in English. */
@media (max-width: 991.98px) {
    html[lang=ar] .header-top-menu-burger-btn-close {
        position: relative;
        top: 0;
        left: auto;
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

    html[lang=ar] .header-top-menu-burger-btn-close p {
        position: absolute;
        font-size: 0;
    }
}

html[lang=ar] .stats-value {
    font-family: "aktiv-grotesk-arabic", sans-serif;
    /* Figures such as "93,000 m²" or "+1,400" keep their own reading order; Arabic words stay RTL. */
    unicode-bidi: plaintext;
    text-align: right;
}


/* ---------------------------------------------------------------------------------------------
 * Responsive layout of page-builder sections (columns: see builderColumnClass()). Columns sit side
 * by side from 992px; below that they stack (equal small columns go 2 per row on tablets).
 * ------------------------------------------------------------------------------------------- */

/* Section spacing: the theme used 16px on phones, which ran sections together. */
@media (max-width: 767.98px) {
    .section-half-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-padding {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-half-padding {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Phone gutter: 20px from the screen edge for the header, every section and the footer. */
@media (max-width: 767.98px) {
    .header-top-area > .row > .col-md-9,
    .header-bottom-menu .row > .col-md-9,
    .builder-section-col,
    footer .footer-padding > .row > .col-md-9,
    footer .footer-bottom > .row > .col-md-10 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .builder-section-col.p-0 > .container,
    .builder-section-col.p-0 > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Stacked columns: even gaps, no space taken by empty spacer columns. */
@media (max-width: 991.98px) {
    .builder-section-col > div > .row {
        row-gap: 32px;
    }

    .builder-section-col > div > .row > [class*="col-"]:empty {
        display: none;
    }

    /* A button that closed one column (e.g. "Register your interest" under the first statistics
       column) goes to the end of the section once the columns stack. */
    .builder-section-col > div > .row:has(> [class*="col-"] + [class*="col-"]):has(> [class*="col-"] > .builder-widget[data-widget="button"]:last-child) {
        row-gap: 0;
    }

    .builder-section-col > div > .row:has(> [class*="col-"] + [class*="col-"]):has(> [class*="col-"] > .builder-widget[data-widget="button"]:last-child) > [class*="col-"] {
        display: contents;
    }

    .builder-section-col > div > .row:has(> [class*="col-"] + [class*="col-"]):has(> [class*="col-"] > .builder-widget[data-widget="button"]:last-child) > [class*="col-"] > .builder-widget {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    }

    .builder-section-col > div > .row:has(> [class*="col-"] + [class*="col-"]):has(> [class*="col-"] > .builder-widget[data-widget="button"]:last-child) > [class*="col-"] > .builder-widget[data-widget="button"] {
        order: 1;
        margin-top: 8px;
    }
}

@media (max-width: 767.98px) {
    .builder-section-col > div > .row:has(> [class*="col-"] + [class*="col-"]):has(> [class*="col-"] > .builder-widget[data-widget="button"]:last-child) > [class*="col-"] > .builder-widget {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Rows whose columns hold matching cards (custom.js): top aligned, cards share a height. */
.builder-row-top {
    align-items: flex-start !important;
}

/* Text blocks pasted as cards ended with <br><br> for spacing, which gave uneven gaps; consecutive
   text blocks in a column get one regular gap instead. */
.builder-widget .department-main-info > div > br:not(:has(~ :not(br))) {
    display: none;
}

.builder-widget[data-widget="text_editor"] + .builder-widget[data-widget="text_editor"] {
    margin-top: 32px;
}

/* Buttons: text never squeezed into a fixed-height pill. */
.section-title-btn {
    height: auto;
    min-height: 46px;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Media and long text stay inside their column. */
.builder-widget iframe {
    max-width: 100%;
}

.builder-widget iframe.note-video-clip {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.builder-widget p,
.builder-widget li,
.builder-widget td,
.builder-widget h3,
.builder-widget h4 {
    overflow-wrap: break-word;
}

.builder-widget[data-widget="projects"] img,
.builder-widget[data-widget="programs"] img {
    object-fit: cover;
}

.builder-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Forms: field grid follows the form's own width (3 / 2 / 1 per row); checkbox options wrap at
   their natural width; the submit button keeps its label on one line. */
.global-form {
    container-type: inline-size;
}

@container (max-width: 720px) {
    .global-form .row > .col-4,
    .global-form .row > .col-3:not(:has(> .submit-btn)) {
        flex: 0 0 auto;
        width: 50%;
    }
}

@container (max-width: 460px) {
    .global-form .row > [class*="col-"]:not(:has(> .submit-btn)) {
        flex: 0 0 auto;
        width: 100%;
    }
}

.global-form .row > .col-2:has(> .form-group > input[type="checkbox"]) {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-inline-end: 24px;
}

.global-form .form-group:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.global-form .form-group > input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 1px 0 0;
    accent-color: var(--suad-primary-blue);
}

.global-form .form-group:has(> input[type="checkbox"]) > label {
    margin: 0;
    line-height: 1.4;
}

.global-form .row > .col-3:has(> .submit-btn) {
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
}

.global-form .submit-btn {
    padding-left: 32px;
    padding-right: 32px;
    white-space: nowrap;
}

/* Inner page banner on tablets: stacked like on phones (image, then the title). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .inner-banner,
    .inner-banner .main-banner-slide {
        height: auto;
        min-height: 0;
    }

    .inner-banner .main-banner-slide > [class*="col-md-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .inner-banner .main-banner-slide > .col-md-1 {
        display: none;
    }
}

/* Footer: no 200px blank strip under the copyright on phones; the text keeps clear of the
   floating buttons on the right. */
@media (max-width: 767.98px) {
    .footer-bottom {
        padding-bottom: 24px;
    }

    .footer-bottom .footer-copyright p {
        padding-inline: 44px;
    }
}

/* Headings scale down on phones so long words ("Amphitheatre") fit the screen. */
@media (max-width: 575.98px) {
    .builder-widget h2 {
        font-size: min(36px, 8vw);
        line-height: 1.15;
    }
}

/* "No padding" sections next to a section with another background (custom.js): that side gets
   the normal section spacing so the content does not touch the colour edge. */
.builder-section-start {
    padding-top: 66px;
}

.builder-section-end {
    padding-bottom: 66px;
}

@media (max-width: 991.98px) {
    .builder-section-start {
        padding-top: 56px;
    }

    .builder-section-end {
        padding-bottom: 56px;
    }
}

@media (max-width: 767.98px) {
    .builder-section-start {
        padding-top: 40px;
    }

    .builder-section-end {
        padding-bottom: 40px;
    }
}

/* Patterned section backgrounds draw their pattern above the section; builder content goes on top
   (the theme's own sections use z-index-9 for this). */
section.pattern-bg > .container-fluid {
    position: relative;
    z-index: 9;
}

/* Touch screens have no hover: cards show their expanded button and label from the start, so the
   first tap opens the link (on iPhones a hover effect took the first tap). */
@media (hover: none) {
    .service-card .service-card-btn,
    .service-card:hover .service-card-btn,
    .team-card .team-card-btn,
    .team-card:hover .team-card-btn,
    .department-card .department-card-btn,
    .department-card:hover .department-card-btn,
    .event-ticket-card .event-ticket-card-btn,
    .event-ticket-card:hover .event-ticket-card-btn,
    .team-research-card .team-research-card-btn,
    .team-research-card:hover .team-research-card-btn {
        width: auto;
        min-width: 160px;
        justify-content: space-between;
        padding: 15px 24px;
        transition: none;
    }

    .service-card-btn p,
    .team-card-btn p,
    .department-card-btn p,
    .event-ticket-card-btn p,
    .team-research-card-btn p {
        opacity: 1;
        color: #fff;
        transition: none;
    }
}

/* Pagination: one row on phones (previous, "page / pages", next) with 44px tap targets. */
.media-nav .pagination li.disabled a {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .media-nav ul.pagination {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 0;
    }

    /* style.css forces "ol li, ul li { display: list-item !important }" */
    .media-nav .pagination li:not(:has(svg)):not([aria-current]) {
        display: none !important;
    }

    .media-nav .pagination li a {
        width: 44px;
        height: 44px;
    }

    .media-nav .pagination li[aria-current] a {
        width: auto;
        min-width: 96px;
        padding: 0 18px;
        border-radius: 22px;
        white-space: nowrap;
    }

    .media-nav .pagination li[aria-current] a[data-pages]::after {
        content: "\00a0/\00a0" attr(data-pages);
        font-weight: 400;
    }
}

/* Publication cards: their round button hangs 27px below the card; keep it clear of the next card. */
[class*="col-"]:has(> .team-research-card) {
    margin-bottom: 48px;
}

/* Inner page breadcrumb: starts exactly under the title (no list indent); the dot separators follow
   their item, so a wrapped line never starts with a stray dot. (style.css forces list items to
   "display: list-item !important" and draws the dots before each item.) */
.inner-main-banner-breadcrumb {
    padding: 0;
    margin-inline: 0;
    gap: 8px 0;
}

.inner-main-banner-breadcrumb li {
    display: inline-flex !important;
    align-items: center;
}

.inner-main-banner-breadcrumb li::before {
    display: none !important;
}

.inner-main-banner-breadcrumb li:not(:last-child)::after {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-inline: 14px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.7;
}

.inner-main-banner-breadcrumb li:last-child {
    opacity: 0.8;
}

/* Menu on phones and tablets: "Apply Now" closes the menu list (mega-menu.blade.php); the copy in the
   menu's header row is for desktop only. */
@media (max-width: 991.98px) {
    .burger-menu .header-top-area .header-top-apply-btn {
        display: none !important;
    }

    .burger-menu .burger-menu-list li.burger-menu-apply {
        margin-top: 28px;
    }

    /* The menu's header row is as tall as its content (it had a 190px minimum) and stays on top
       while the menu scrolls; the menu items start right below it. */
    .burger-menu {
        padding-top: 0 !important;
    }

    .burger-menu .main-header {
        min-height: 0 !important;
        position: sticky !important;
        top: 0;
    }

    .burger-menu .burger-menu-list li.burger-menu-apply a.header-top-apply-btn {
        position: static;
        display: flex !important;
        width: 100%;
        max-width: 360px;
        height: 48px;
        padding: 0 24px;
        font-size: 15px;
        font-weight: 700;
        justify-content: center;
        gap: 0;
        opacity: 1;
        color: #fff !important;
        background-image: none;
    }

    .burger-menu .burger-menu-list li.burger-menu-apply a.header-top-apply-btn:hover {
        color: #fff !important;
        background-color: var(--suad-primary-red-1);
    }

    .burger-menu .burger-menu-list li.burger-menu-apply a.header-top-apply-btn::after {
        display: none;
    }
}

/* ---- Alert widget ---------------------------------------------------- */
.builder-alert {
    --alert-color: var(--suad-primary-blue);
    --alert-text: #fff;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    color: var(--suad-primary-black);
    margin-bottom: 24px;
}
.builder-alert-soft {
    background: color-mix(in srgb, var(--alert-color) 10%, #fff);
    border-inline-start: 4px solid var(--alert-color);
}
.builder-alert-outline {
    background: transparent;
    border: 1.5px solid var(--alert-color);
}
.builder-alert-solid {
    background: var(--alert-color);
    color: var(--alert-text);
}
.builder-alert-icon {
    font-size: 22px;
    line-height: 1.2;
    color: var(--alert-color);
    flex-shrink: 0;
}
.builder-alert-solid .builder-alert-icon,
.builder-alert-solid .builder-alert-link,
.builder-alert-solid .builder-alert-close { color: var(--alert-text); }
.builder-alert-body { flex: 1; min-width: 0; }
.builder-alert-title { font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.builder-alert-text { margin: 0; line-height: 1.6; }
.builder-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    font-weight: 600;
    color: var(--suad-primary-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.builder-alert-close {
    background: none;
    border: 0;
    padding: 4px;
    line-height: 1;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}
.builder-alert-close:hover, .builder-alert-close:focus-visible { opacity: 1; }

/* ---- Testimonials widget --------------------------------------------- */
.builder-testimonial {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 32px 28px 28px;
    background: var(--suad-primary-white);
    border: 1px solid #e6e8f0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.builder-testimonial-mark { font-size: 44px; line-height: 1; color: var(--suad-primary-red); }
.builder-testimonial-quote {
    margin: 0;
    flex: 1;
    font-size: 17px;
    line-height: 1.7;
    color: var(--suad-primary-black);
}
.builder-testimonial-author { display: flex; align-items: center; gap: 14px; }
.builder-testimonial-author img {
    width: 56px !important;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.builder-testimonial-author strong { display: block; color: var(--suad-primary-blue); font-size: 16px; }
.builder-testimonial-author small { display: block; color: var(--suad-muted); font-size: 14px; margin-top: 2px; }
.builder-testimonials-carousel .owl-stage { display: flex; }
.builder-testimonials-carousel .owl-item { display: flex; }
.builder-testimonials-carousel .owl-item > div { width: 100%; }

/* ---- Owl navigation shared by the builder carousels ------------------- */
.builder-testimonials-carousel .owl-nav,
.builder-carousel .owl-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.builder-testimonials-carousel .owl-nav button.owl-prev,
.builder-testimonials-carousel .owl-nav button.owl-next,
.builder-carousel .owl-nav button.owl-prev,
.builder-carousel .owl-nav button.owl-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--suad-primary-blue) !important;
    color: #fff !important;
    font-size: 18px !important;
}
.builder-testimonials-carousel .owl-nav button.disabled { opacity: .35; }
.builder-testimonials-carousel .owl-dots,
.builder-carousel .owl-dots { text-align: center; margin-top: 12px; }

/* ---- Image carousel (slider widget, display = carousel) --------------- */
.builder-carousel-slide { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.builder-carousel-slide > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.builder-carousel-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 48px 28px 24px;
    color: #fff;
    background: linear-gradient(to top, rgba(5, 18, 46, .85), rgba(5, 18, 46, 0));
}
.builder-carousel-caption h3 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.builder-carousel-text { font-size: 15px; line-height: 1.6; }
.builder-carousel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--suad-primary-red);
    color: #fff;
    font-weight: 600;
}
.builder-carousel-btn img { width: 16px !important; }
@media (max-width: 767.98px) {
    .builder-carousel-slide > img { aspect-ratio: 4 / 3; }
    .builder-carousel-caption { position: static; background: var(--suad-primary-blue); padding: 20px; }
}

/* ---- Icon boxes (featured_icons widget, box / inline styles) ---------- */
.builder-icon-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 28px 24px;
    border-radius: 16px;
    background: var(--suad-primary-white);
    border: 1px solid #e6e8f0;
    color: var(--suad-primary-black);
    transition: box-shadow .2s, transform .2s;
}
.builder-icon-box.text-center { align-items: center; }
.builder-icon-box-inline { flex-direction: row; align-items: flex-start; }
.builder-icon-box-icon { width: 56px !important; height: 56px; object-fit: contain; flex-shrink: 0; }
.builder-icon-box-title { font-size: 20px; color: var(--suad-primary-blue); margin: 0 0 6px; }
.builder-icon-box-text { margin: 0; line-height: 1.6; color: var(--suad-neutral-dark); }
a.builder-icon-box:hover, a.builder-icon-box:focus-visible { box-shadow: 0 10px 30px rgba(0, 35, 118, .12); transform: translateY(-2px); }
.service-card p { margin-top: 8px; }

/* ---- Filter chips (SDG widget) ---------------------------------------- */
.builder-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.builder-filter-chip {
    border: 1px solid var(--suad-primary-blue);
    background: transparent;
    color: var(--suad-primary-blue);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
}
.builder-filter-chip.active, .builder-filter-chip:hover { background: var(--suad-primary-blue); color: #fff; }
.sdgs li[hidden] { display: none !important; }

/* ---- Counter (statistics widget, animate) ----------------------------- */
.stats-count { font-variant-numeric: tabular-nums; }

/* ---- Arabic: carousels run left to right (style_ar.css), their content right to left */
html[lang^="ar"] .builder-testimonial,
html[lang^="ar"] .builder-carousel-caption { direction: rtl; }
html[lang^="ar"] .builder-testimonials-carousel .owl-nav,
html[lang^="ar"] .builder-carousel .owl-nav { direction: ltr; }
html[lang^="ar"] .builder-alert-link .bi { display: inline-block; transform: scaleX(-1); }

/* ---- Contact widgets (contact form, map, contact details) ---------------- */
.builder-contact-form .submit-btn { min-width: 160px; }
.builder-contact-map { position: relative; width: 100%; min-height: 250px; border-radius: 12px; overflow: hidden; }
.builder-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.builder-contact-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
.builder-contact-boxes .contact-box { align-items: flex-start; }
.builder-contact-boxes .contact-box img { flex: 0 0 60px; }
.builder-contact-boxes .contact-box p { margin: 0; overflow-wrap: anywhere; }
.builder-contact-boxes .phone-number { display: block; }
@media (max-width: 767px) { .builder-contact-map { height: 360px !important; } }
/* Next to the form (columns side by side): the map's column runs the form's height and the map
   stays in view while scrolling; contact_map.blade.php lines it up with the first field. */
@media (min-width: 992px) {
    .row > [class*="col-"]:has(> .builder-widget[data-widget="contact_map"]) { align-self: stretch; }
    .builder-widget[data-widget="contact_map"] { position: sticky; top: 170px; }
}

/* ---- Events listing: filter panel, result cards (components/listing/events, pages/events/events-list) */
[x-cloak] { display: none !important; }
.events-filter-panel {
    margin: 28px 0 8px; padding: 20px; border: 1px solid #e3e7f1; border-radius: 18px;
    background: #fff; box-shadow: 0 10px 30px rgba(7, 27, 71, .06);
}
.events-filter-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.events-search {
    position: relative; flex: 1 1 320px; display: flex; align-items: center; margin: 0;
    color: #8a91a6;
}
.events-search svg { position: absolute; inset-inline-start: 16px; pointer-events: none; }
.events-search input {
    width: 100%; height: 50px; padding: 0 44px 0 48px; border: 1px solid #d6dbe8; border-radius: 12px;
    background: #f7f8fc; color: #071B47; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html[lang^=ar] .events-search input { padding: 0 48px 0 44px; }
.events-search input::placeholder { color: #8a91a6; }
.events-search input:focus { border-color: #1c3bd9; background: #fff; box-shadow: 0 0 0 3px rgba(28, 59, 217, .14); }
.events-search input::-webkit-search-cancel-button { display: none; }
.events-search-clear {
    position: absolute; inset-inline-end: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: #e9ecf5; color: #404052; font-size: 18px; line-height: 1; cursor: pointer;
}
.events-search-clear:hover { background: #dfe3ee; }
.events-toggle { display: inline-flex; padding: 4px; border-radius: 12px; background: #f1f3f9; gap: 4px; }
.events-toggle button {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 9px;
    background: transparent; color: #404052; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s;
}
.events-toggle button:hover { color: var(--suad-primary-blue); }
.events-toggle button.active { background: #fff; color: var(--suad-primary-blue); box-shadow: 0 2px 8px rgba(7, 27, 71, .12); }
.events-view-toggle { margin-inline-start: auto; }
.events-filter-grid {
    display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f6;
}
.events-filter { flex: 1 1 190px; min-width: 0; }
.events-filter.events-filter-clear { flex: 0 0 auto; }
.events-filter label { display: block; margin: 0 0 6px; color: #6b7286; font-size: 13px; font-weight: 600; }
.events-filter .ts-wrapper .ts-control { min-height: 46px; border-radius: 10px; }
.events-filter-clear button {
    display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border: 0; background: none;
    color: var(--suad-primary-red, #de3831); font-weight: 600; cursor: pointer;
}
.events-filter-clear button:hover { text-decoration: underline; }

.events-results { margin-top: 36px; }
.events-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.events-results-head h2 { margin: 0; color: var(--suad-primary-blue); font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.events-results-count { color: #6b7286; font-size: 15px; font-weight: 600; white-space: nowrap; }
.events-empty { padding: 56px 20px; border: 1px dashed #d6dbe8; border-radius: 18px; background: #fafbfd; color: #6b7286; text-align: center; }
.events-empty svg { color: #b4bdd3; margin-bottom: 12px; }
.events-empty h3 { margin: 0 0 6px; color: #071B47; font-size: 20px; font-weight: 700; }
.events-empty p { margin: 0 0 16px; }
.events-empty-btn { height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--suad-primary-blue); color: #fff; font-weight: 600; cursor: pointer; }

.ev-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #e6e9f2; border-radius: 18px;
    background: #fff; color: inherit; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ev-card:hover { transform: translateY(-4px); border-color: #d4dbf2; box-shadow: 0 18px 40px rgba(7, 27, 71, .12); }
.ev-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--suad-primary-blue); }
.ev-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ev-card:hover .ev-card-media img { transform: scale(1.04); }
.ev-card-media.is-empty { background: linear-gradient(135deg, #002376 0%, #1c3bd9 100%); }
.ev-card-date {
    position: absolute; top: 14px; inset-inline-start: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 58px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(7, 27, 71, .18); line-height: 1;
}
.ev-card-day { color: var(--suad-primary-blue); font-size: 24px; font-weight: 800; }
.ev-card-month { margin-top: 4px; color: var(--suad-primary-red, #de3831); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ev-card-category {
    position: absolute; bottom: 12px; inset-inline-start: 14px; max-width: calc(100% - 28px); padding: 5px 12px; border-radius: 999px;
    background: rgba(7, 27, 71, .78); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(4px);
}
.ev-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.ev-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 12px; color: #071B47; font-size: 19px; font-weight: 700; line-height: 1.35;
}
.ev-card-meta { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; color: #404052; font-size: 14px; line-height: 1.45; }
.ev-card-meta li { display: flex; align-items: flex-start; gap: 8px; }
.ev-card-meta svg { flex: 0 0 18px; margin-top: 1px; color: #1c3bd9; }
.ev-card-more { margin-inline-start: 4px; color: #6b7286; font-style: normal; font-size: 13px; }
.ev-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.ev-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-tag { padding: 4px 10px; border-radius: 999px; background: #eef1f8; color: #404052; font-size: 12px; font-weight: 700; }
.ev-tag-free { background: #e3f6ea; color: #17633a; }
.ev-tag-paid { background: #fff3d6; color: #8a5a00; }
.ev-tag-public { background: #e6f2fb; color: #135f8f; }
.ev-tag-private { background: #f1ecfb; color: #5b3a9b; }
.ev-tag-online { background: #eef1fd; color: #1c3bd9; }
.ev-card-arrow {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--suad-primary-red, #de3831); color: #fff; transition: transform .2s;
}
.ev-card:hover .ev-card-arrow { transform: translate(2px, -2px); }
html[lang^=ar] .ev-card-arrow svg { transform: scaleX(-1); }
@media (max-width: 767px) {
    .events-filter-panel { padding: 14px; border-radius: 14px; }
    .events-view-toggle { margin-inline-start: 0; }
    .events-toggle { width: 100%; }
    .events-toggle button { flex: 1; justify-content: center; }
    .events-filter { flex-basis: calc(50% - 8px); }
}

/* ---- Events calendar (FullCalendar) and the event popup ------------------------------------- */
.events-calendar-section { margin-top: 36px; }
.events-calendar-card { padding: 20px; border: 1px solid #e3e7f1; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(7, 27, 71, .06); }
.events-calendar-card .fc { --fc-border-color: #e9ecf3; --fc-today-bg-color: #f2f5ff; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f7f8fc; --fc-list-event-hover-bg-color: #f2f5ff; font-size: 14px; }
.events-calendar-card .fc .fc-toolbar { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.events-calendar-card .fc .fc-toolbar-title { color: #071B47; font-size: 22px; font-weight: 700; }
.events-calendar-card .fc .fc-button {
    height: 40px; padding: 0 14px; border: 1px solid #d6dbe8; border-radius: 10px !important; background: #fff; color: #071B47;
    font-weight: 600; font-size: 14px; text-transform: none; box-shadow: none !important; transition: background-color .15s, color .15s, border-color .15s;
}
.events-calendar-card .fc .fc-button-group { gap: 6px; }
.events-calendar-card .fc .fc-button:hover { background: #f2f5ff; border-color: #c5cdea; color: var(--suad-primary-blue); }
.events-calendar-card .fc .fc-button-primary:not(:disabled).fc-button-active, .events-calendar-card .fc .fc-button-primary:not(:disabled):active {
    background: var(--suad-primary-blue); border-color: var(--suad-primary-blue); color: #fff;
}
.events-calendar-card .fc .fc-button:disabled { opacity: .5; }
.events-calendar-card .fc .fc-col-header-cell { padding: 10px 0; background: #f7f8fc; }
.events-calendar-card .fc .fc-col-header-cell-cushion { color: #6b7286; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.events-calendar-card .fc .fc-daygrid-day-number { padding: 8px 10px; color: #404052; font-weight: 600; text-decoration: none; }
.events-calendar-card .fc .fc-day-today .fc-daygrid-day-number {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin: 4px; padding: 0 6px;
    border-radius: 999px; background: var(--suad-primary-blue); color: #fff;
}
.events-calendar-card .fc .fc-scrollgrid { border-radius: 12px; overflow: hidden; }
.events-calendar-card .fc .fc-daygrid-event {
    margin: 2px 4px; padding: 3px 8px; border: 0; border-radius: 6px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .15s, transform .15s;
}
.events-calendar-card .fc .fc-daygrid-event:hover { filter: brightness(1.08); transform: translateY(-1px); }
.events-calendar-card .fc .fc-daygrid-event .fc-event-time { font-weight: 700; opacity: .9; }
.events-calendar-card .fc .fc-daygrid-more-link { margin: 2px 6px; color: var(--suad-primary-blue); font-weight: 700; font-size: 12.5px; }
.events-calendar-card .fc .fc-popover { border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(7, 27, 71, .16); }
.events-calendar-card .fc .fc-timegrid-event { border-radius: 6px; padding: 2px 4px; cursor: pointer; }
/* The phone list view hides its table header 10000px to the left; in Arabic (right to left) that
   widened the page and left it blank. Hide it in place instead. */
.events-calendar-card .fc .fc-list-table thead { position: absolute; left: auto; right: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.events-calendar-card .fc .fc-list-event { cursor: pointer; }
.events-calendar-card .fc .fc-list-event-dot { border-color: var(--ev-color, #1c3bd9); }
.events-calendar-card .fc .fc-list-day-cushion { background: #f7f8fc; }
.events-calendar-card .fc .fc-list-event-title a { color: #071B47; font-weight: 600; text-decoration: none; }
.events-calendar-card .fc a { text-decoration: none; }

.ev-modal {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(5, 18, 46, .55); backdrop-filter: blur(3px);
}
.ev-modal-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(5, 18, 46, .35); }
.ev-modal-media { position: relative; aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--ev-color, #002376) 0%, #002376 100%); }
.ev-modal-media img { width: 100%; height: 100%; object-fit: cover; }
.ev-modal-close {
    position: absolute; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #071B47; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.ev-modal-close:hover { background: #fff; }
.ev-modal-body { padding: 22px 24px 24px; }
.ev-modal-body h3 { margin: 0 0 14px; color: #071B47; font-size: 22px; font-weight: 700; line-height: 1.3; }
.ev-modal-summary { margin: 0 0 18px; color: #404052; font-size: 15px; line-height: 1.6; }
.ev-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #edf0f6; }
.ev-modal-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px;
    background: var(--suad-primary-red, #de3831); color: #fff !important; font-weight: 700; text-decoration: none !important; transition: background-color .15s;
}
.ev-modal-btn:hover { background: #b01414; }
html[lang^=ar] .ev-modal-btn svg { transform: scaleX(-1); }
@media (max-width: 767px) {
    .events-calendar-card { padding: 12px; }
    .events-calendar-card .fc .fc-toolbar { justify-content: center; }
    .events-calendar-card .fc .fc-toolbar-title { font-size: 18px; }
    .ev-modal { align-items: flex-end; padding: 0; }
    .ev-modal-box { max-width: none; border-radius: 20px 20px 0 0; }
}

/* Full-width rows inside .container-fluid.p-0 reach 12px past the screen (row gutters): never let the
   page scroll or show a strip sideways (Arabic pages showed one on the left). clip, unlike hidden,
   keeps position: sticky working. */
html, body {
    overflow-x: clip;
}

/* Phones: the floating school buttons step aside while the visitor scrolls (they covered the text). */
@media (max-width: 767.98px) {
    .sticky-schools {
        gap: 10px;
        transition: opacity .2s ease, transform .2s ease;
    }
    .sticky-schools.is-scrolling {
        opacity: 0;
        transform: translateX(-12px);
        pointer-events: none;
    }
}