:root {
  --app-inner-size: 1280px;
  --primary-color: #006fb7;
  --black-1: #424242;
  --extra-light-gray: #F3F3F3;
  --gray-light: #828282CC;
  --gray-dark: #7D7D7D;
  --padding-card: 20px;
  --spacer-1: 10px;
  --spacer-2: 20px;
  --card-title-size: clamp(1.5rem,4vw,1.6rem);
  --card-desc-size: clamp(1.4rem,3vw,1.5rem);
  --sm-text-size: clamp(1rem,3vw,1.4rem);
  --section-title-size: clamp(1.8rem,3vw,2rem);
  --page-header-size: clamp(1.8rem,3vw,2.4rem);
  --radius-card-1: 0;
  --body-size: clamp(1rem,4vw,1.4rem);
  --main-shadow: 0 4px 5px #b0b0b03d;;


  --un-blue: #009EDB;
  --stand-up-orange: #FAA31B;
  --green: #26A465;
  --forest-green: #004940;
  --yellow: #FFC101;
  --sand: #C6BD99;
  --red: #DF2626;
  --earth: #6C3928;
  --water-highlight: #55C8FF;

  --max-z-index: 10;
  --padding-section: 30px;
  --font-main: "Noto Kufi Arabic", sans-serif;
  --header-height: 82px;
  --radius-2: 24px;
  --spacer-3: 5px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--extra-light-gray);
  line-height: 1.6;
}


html[dir="rtl"], html[dir="rtl"] body { direction: rtl !important; }
html[dir="rtl"] .layout-container,
html[dir="rtl"] .region-content { direction: rtl !important; }


html[dir="rtl"] .swiper { direction: rtl; }


.section {padding: var(--padding-section) 0;}
.section:last-child {padding-bottom: calc(var(--padding-section) * 2);}
.card {overflow: hidden;}
.card-inner > * + * {margin-top: var(--spacer-1);}
.card-title {font-size: var(--card-title-size);}
.card-desc {font-size: var(--card-desc-size);text-wrap: pretty;}

.app-wrapper {width: var(--app-inner-size);max-width: 100%;margin: 0 auto;}
.primary-button {cursor: pointer;line-height: 1.9;text-align: center;width: fit-content;padding: 7px 10px;background: var(--primary-color);font-size: clamp(1.4rem, 4vw, 1.6rem);color: white;min-width: 120px;font-weight: 600;border: unset}
.secondary-button {padding: 6px 10px;background: white;font-size: clamp(1.4rem, 4vw, 1.6rem);color: black;min-width: 120px;font-weight: 600;border: 1px solid var(--gray-light);}
.page-header {position: relative;min-height: 220px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.page-header:before {content: "";position: absolute;inset: 0;background-image: url("../assets/images/aboutus.png");background-repeat: no-repeat;background-position: center;background-size: cover;}
html[dir="ltr"] .page-header:before {transform: scaleX(-1);}
.page-header .app-wrapper {z-index: 1;position: relative;color: white;}
.page-header__title {font-size: var(--page-header-size);margin-bottom: var(--spacer-3);}
.breadcrumbs {--gap: 8px;display: flex;align-items: start;gap: var(--gap);color: white;font-weight: 500;}
.breadcrumbs .breadcrumb__item:last-child a {pointer-events: none;font-weight: 800}
.breadcrumb__item:not(:last-child):after {content: ".";display: inline-block;margin-inline-start: calc(var(--gap));}
.breadcrumb__item {display: flex;align-items: start;text-shadow: 0 0 10px black}
.lg-item {inset: 0;}
.intro-section > p + p {margin-top: var(--spacer-1)}
.intro-section ul {list-style: revert;padding: revert;}
.intro-section p, .page-desc {color: var(--gray-dark)}
.inner-page .section-title {--section-title-size: clamp(1.6rem, 4vw, 2rem);}
.inner-page .section-title ~ p {color: var(--gray-dark)}
.section-title {font-size: var(--section-title-size);color: var(--primary-color);border-inline-start: 2px solid ;padding-inline-start: 10px;margin-bottom: var(--spacer-2);font-weight: 700;}
.cards-wrapper {display: grid;grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));gap: var(--spacer-2);}
.cards-wrapper .card.stacked {box-shadow: var(--main-shadow)}
.card.stacked .img-wrapper {position: relative;overflow: hidden;background-color: white;height: 220px}
.card.stacked .img-wrapper img {margin: 0 auto;}
.card.stacked .card-date {font-size: clamp(1rem, 4vw, 1.2rem);color: var(--gray-dark);}
.card.stacked .card-inner {padding: var(--padding-card);}
.card.stacked .card-desc {color:var(--gray-dark)}

.card.overlay {position: relative;}
.card.overlay:hover img {scale:105%;}
.card.overlay img {position: absolute;inset: 0;width: 100%;height: 100%;filter: brightness(0.5);transition: 2s;object-fit: cover}
.card.overlay {position: relative;display: flex;align-items: end;min-height: 400px}
.card.overlay .card-inner {z-index: 1;position: relative;padding: var(--padding-card);color: white;}
.card.overlay:before {content: "";position: absolute;inset: 0;background: linear-gradient(0deg, #0000009b, transparent);z-index: 1;}
main {position: relative;z-index: 1;}
.cards-wrapper.gallery-grid .gallery-item {height: 240px;background: white;overflow: hidden;}




/*search page*/
.search-results-section .search-title {font-size: var(--card-title-size);transition: .4s;}
.search-results-section .search-title:hover {color: var(--primary-color);}
.search-results-section .search-desc {color: var(--gray-dark);}
.search-results-section ol {padding: var(--padding-card);background: white;margin-top: revert;}
.search-results-section ol > * + * {border-top: 1px solid var(--extra-light-gray);}
.search-results-section ol:has(> * + *) > li {padding-block: var(--padding-card);}
.search-results-section .search-tag {color: var(--gray-dark);font-size: var(--body-size);}
.search-results-section .search-item:first-child {padding-top: 0;}
.search-results-section .search-item:last-child {padding-bottom: 0;}
.search-results-section .empty-state-search {font-size: var(--card-title-size);font-weight: 700;text-align: center;margin-top: var(--spacer-2);}
body:has(.search-results-section) .js-pager__items:not(:has(a[rel="prev"])):before {content: unset !important;}
body:has(.search-results-section) .js-pager__items .navigation:has(.disabled) {border: 2px solid;}
body:has(.search-results-section) .js-pager__items .navigation:has(.disabled) > * {display: flex;align-items: center;justify-content: center;}
body:has(.search-results-section) .js-pager__items li:not(.navigation).active {font-weight: 900;}


/*search section*/
.search-section .form {display: flex;gap: var(--spacer-2);position: relative;overflow: hidden}
.search-section .form input {width: 100%;border: unset;background-color: transparent;padding-inline: 10px;outline: unset;}
.search-section .form .icon-search {align-self: center;margin-inline-start: 10px;}
.search-section .form select {border: unset;font-family: 'Noto Kufi Arabic';width: 100px;font-weight: 700;color: gray;outline: unset;}
.search-section .form-wrapper {flex: 1;background-color: white;display: flex;align-items: center;}



.body-text {line-height: 1.6;color: var(--gray-dark);font-weight: 500;}

/*header styles*/
.header {padding-block: 10px;background-color: white;}
.header .header-top {display: flex;align-items: center;}
.header .search-wrapper {position: relative;margin-inline-start: auto;margin-inline-end: 12px;display: flex;align-items: center;background-color: white;border: 1px solid var(--gray-light);}
.header .search-wrapper>input {border: unset;outline: unset;padding: 6.5px;max-width: 270px}

.search-wrapper .icon-search {padding: 8px;color: #535353;font-size: 2.2rem;}
.header-bottom {display: flex;align-items: center;}
.nav-header {margin-inline-end: auto;}
.nav-header .list-items {display: flex;align-items: center;gap: 10px;}
.nav-header .list-items .list-item a {position: relative;padding: 10px;font-weight: 800;color: var(--black-1);transition: .4s;}
/*.nav-header .list-items .list-item a:after {content: "";width:100%;position: absolute;right: 0;bottom: 0;height: 2px;transform: scaleX(0) rotate(0.001deg);background: var(--primary-color);transform-origin: right;transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1);}*/
/*.nav-header .list-items .list-item a:hover:after {transform-origin: left;    transform: scaleX(1) rotate(0.001deg);}*/
.nav-header .list-items .list-item a:after{content: "";position: absolute;bottom: 0em;right: 0;width: 100%;height: 0.125em;background: var(--primary-color);transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);transform-origin: left;transform: scaleX(0) rotate(0.001deg);border-radius: 0.125em;}
.nav-header .list-items .list-item a:hover:after{transform-origin: right;transform: scaleX(1) rotate(0.001deg);}
.list-item.active:has(.submenu):after {border-color: var(--primary-color);}

.submenu.list-items {display: flex;flex-direction: column;align-items: stretch;position: absolute;top: 40px;inset-inline-start: 10px;text-align: center;font-size: clamp(1.2rem,4vw,1.4rem);background-color: var(--primary-color);gap: 0;transform: scaleY(0);opacity: 0;pointer-events: none;transform-origin: top;transition: .3s;}
.list-item:has(.submenu) {position: relative;display: flex;align-items: center;}
.submenu.list-items  .list-item a {color: white !important;padding: 8px !important;position: relative;width: 100%;font-weight: 700;}
.submenu.list-items .list-item:not(:last-child) a:before {content: "";position: absolute;bottom: -2px;left: 0;right: 0;background: linear-gradient(45deg, transparent, #ffffff, transparent);height: 1px;}
.list-item:has(.submenu):hover .submenu {opacity: 1;transform: none;pointer-events: all;}
.nav-header .list-items .list-item:has(.submenu) a:after {content: unset;}
.submenu.list-items:after {border: solid currentColor;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transform: rotate(45deg);}
.list-item:has(.submenu):after {content: "";border: solid var(--black-1);border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transform: rotate(45deg);}
.list-item:has(.submenu):hover:after {border-color: var(--primary-color);}
.submenu.list-items {min-width: 240px !important;}
html[dir="ltr"] .nav-header .list-items .list-item a:after {transform-origin: right;}
html[dir="ltr"] .nav-header .list-items .list-item a:hover:after {transform-origin: left;}

.nav-header .list-items .list-item:is(:hover, :focus, .active) a {color: var(--primary-color);}
.nav-header .list-items .list-item:first-child a {padding-inline-start: 0;}
.header-bottom__links {display: flex;align-items: center;gap: 8px;}
.social-list {display: flex;align-items: center;gap: 8px;}
.social-list>li>a {background-color: var(--extra-light-gray);width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;border-radius: 50%;padding: 15px;transition: .4s}
.social-list>li>a:is(:hover, :focus)>*[class*="icon"] {color: var(--primary-color);}
.social-list>li>a:is(:hover, :focus) {background-color: rgba(0, 118, 192, 0.09);}
.social-list>li>a>*[class*="icon"] {font-size: 1.3rem;color: var(--black-1);transition: .4s}
.lang-button {font-size: clamp(1rem, 4vw, 1.4rem);font-weight: 600;color: white;transition: color .4s;background-color: #777777;border-radius: 50%;width: 30px;height: 30px;}
.card-desc ol {list-style: revert;padding: revert;}

.header-wrapper {background-color: white;padding: 10px;position: sticky;left: 0;right: 0;top: 0;z-index: 10;box-shadow: var(--main-shadow)}
.header-bottom {max-width: var(--app-inner-size);margin: 0 auto;}
.header .logo {max-width: 260px;display: flex;align-items: center;justify-content: center;}
.header .logo img {width: auto;height: auto;}

.hero-section {position: relative;padding: 0;}
.hero-section .swiper-wrapper {aspect-ratio: 16 / 5;}
@media (min-width: 768px) {
  .hero-section .swiper-wrapper img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
}
.hero-section .swiper-slide {display: flex;align-items: center;justify-content: center;color: white;}
.hero-section .swipe-content {position: relative;z-index: 2;display: flex;flex-direction: column;gap: 20px;}
.hero-section .swiper-slide:before {content: "";position: absolute;background: black;z-index: 1;inset: 0;opacity: 0.2;}
.hero-section .swipe-item {;max-width: 100%}
.hero-section .swipe-title {font-size: clamp(2rem, 4vw, 2.8rem);}
.hero-section .swipe-description {font-size: clamp(1.4rem, 4vw, 1.8rem);font-weight: 500;}
.hero-section .swiper-button-next {left: calc((50% - var(--app-inner-size) / 2 )) !important;}
.hero-section .swiper-button-prev {right: calc((50% - var(--app-inner-size) / 2) ) !important;}

html[dir="ltr"] .hero-section .swiper-button-next {left: unset !important;right: calc((50% - var(--app-inner-size) / 2 )) !important;transform:scaleX(-1)}
html[dir="ltr"] .hero-section .swiper-button-prev {right: unset !important;left: calc((50% - var(--app-inner-size) / 2) ) !important;transform:scaleX(-1)}



.swiper-button {--size:35px;width:var(--size);height: var(--size);    background-color: hsl(0deg 0% 100% / 42%);box-shadow: 0 0 10px #57575759;}
.swiper-button > *[class*="icon"] {font-size: 1.8rem;color: #fff;}.swiper-button:after {content: unset !important;}




.about-us-section {z-index: 1;position: relative;}
.about-us-section .about-details {position: relative;overflow: hidden;}
.about-us-section .about-details-wrapper {max-width: 90%}
.about-us-section .about-details-wrapper > * + * {margin-top: var(--spacer-1)}
/*.about-us-section .about-details:before {content: "";background-image: url(../assets/images/bg-logo.svg);background-position: center;background-repeat: no-repeat;position: absolute;inset: 0;right: unset;background-size: 80%;width: 200px;transform: translateX(-30px);}*/
html[dir="ltr"] .about-us-section .about-details:before {right: 0;left: unset;    transform: translateX(30px);}
.about-us-section .about-details > * + * {margin-top: var(--spacer-1);}
.about-us-section .cards-wrapper {display: grid;grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));gap: var(--spacer-2);margin-top: 24px;}
.homepage .about-us-section .section {padding-bottom: 0;}
.about-us-section .section-units-2 .cards-wrapper {width: 100%;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}


@media (min-width: 768px) {
  .about-us-section .cards-wrapper {width: 80%;margin: 0 auto;}
  .homepage .section.stats-section {
    padding-bottom: var(--padding-section);
  }
}


/*.stats-section .cards-wrapper {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}*/
.stats-section .cards-wrapper {display: flex;justify-content: center;gap: var(--spacer-2);flex-wrap: wrap;margin-inline: -10px}

.stats-section .cards-wrapper > .card {width: min(calc(25% - var(--spacer-2)), 100%);}

.stats-section .card {background-color: var(--primary-color);text-align: center;padding: var(--padding-card);color: white;}
.stats-section .card > * + * {margin-top: var(--spacer-1);}
.stats-section .card img {margin: 0 auto;width:60px;height: 60px;max-width: 100%}
.stats-section .card .number {font-size: 3rem;font-weight: 700;}
.stats-section .card .label {font-size: var(--card-title-size);}



.partners-section .cards-wrapper {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
.partners-section .cards-wrapper .card {background-color: white;padding: 8px;display: flex;align-items: center;justify-content: center;}
.partners-section .swiper-slide {display: flex;align-items: center;gap: 20px;}
.views-element-container .partners-section {display: contents;}
.partners-section .swiper.partners-swiper {padding-bottom: 40px !important;}
.partners-section .swiper-pagination-bullet {--size: 16px;width: var(--size);height: var(--size);}
.partners-section .swiper-pagination {bottom: -5px !important;}
.partners-section .views-row .card {width: 165px;aspect-ratio: 1;overflow: hidden;}

.feedback-section {max-width: calc(var(--app-inner-size) + 130px);margin: 0 auto;}
.feedback-section .section-title {max-width: var(--app-inner-size);margin: 0 auto;margin-bottom: var(--spacer-2);}
.feedback-section .swipe-content {max-width: 90%;display: flex;gap: var(--spacer-2);margin: 0 auto;background: white;padding: var(--padding-card);border-radius: var(--radius-card-1);}
.feedback-section .swipe-content .image-wrapper img {width: 90px;height: 90px;border-radius: 50%;overflow: hidden; /* border: 6px solid var(--sand); */}
.feedback-section .swipe-content .image-wrapper {overflow: hidden;border-radius: 50%;width: 90px;height: 90px;position: relative;flex-shrink: 0;    border: 6px solid var(--sand);display: flex;align-items: center;justify-content: center;}
.feedback-section .swipe-inner > * + * {margin-top: var(--spacer-1);}
.feedback-section .swiper-button {background-color: var(--primary-color);box-shadow: unset}
.feedback-section .swiper-button > *[class*="icon"] {color: white;font-size: 1.8rem;}
.feedback-section .swipe-title {display: flex;align-items: baseline;gap: 10px;font-size: clamp(1.4rem,4vw,1.8rem);}
.feedback-section .swipe-title + .job {color: var(--gray-light);font-size: clamp(1.2rem,4vw, 1.4rem);}
.feedback-section .swipe-description {color: var(--gray-dark);font-weight: 500}
.feedback-section .swiper-button.swiper-button-next {left: 0;}
.feedback-section .swiper-button.swiper-button-prev {right: 0;}
html[dir="ltr"] .feedback-section .swiper-button.swiper-button-next {left: unset;right: 0;transform: scaleX(-1);}
html[dir="ltr"] .feedback-section .swiper-button.swiper-button-prev {right: unset;left: 0;transform: scaleX(-1);}
.feedback-section .swipe-content {}
.feedback-section .feedback-section-inner {margin: 0 auto;}






*:has(footer) {display: flex;flex-direction: column;min-height: 100vh;}
footer {margin-top: auto;}
.footer {background: white;}
.footer .footer-columns {display: flex;flex-wrap: wrap;gap: var(--spacer-2);padding-block: 20px}
.footer .footer-columns > * {flex:1;}
.footer .logo-column > * + * {margin-top: var(--spacer-2);}
.footer .footer-contact__item {display: flex;align-items: center;gap: 10px;}
.footer .footer-contact__item > a {color: var(--gray-dark);font-weight: 600;font-style: normal;}
.footer .footer-contact__item > *[class*="icon"] {font-size: 2rem;}
.footer .footer-contact {display: flex;flex-direction: column;gap: 10px;}
.footer .nav-title {font-size: clamp(1.2rem,4vw,1.6rem);margin-bottom: var(--spacer-2);}
.footer :is(.nav-list, .nav-desc) {color: var(--gray-dark);font-weight: 700;font-size: var(--body-size)}
.footer .nav-list > * + * {margin-top: var(--spacer-1);}
.footer .nav-column.newsletter {margin-inline-start: auto;}
.footer .newsletter-wrapper {position: relative;display: flex;/* align-items: center; */background: var(--extra-light-gray);/* padding: 10px; */border-radius: var(--radius-card-1);margin-top: var(--spacer-1);border:1px solid transparent;transition: .3s;overflow: hidden;}
.footer .newsletter-wrapper:focus-within {border-color: var(--primary-color);box-shadow: var(--main-shadow)}
.footer .newsletter-wrapper:focus-within .send-button > *[class*="icon"] {}
.footer .newsletter-input {background: transparent;border: unset;flex: 1;outline: unset;padding: 10px;}
.footer .send-button {align-self: stretch;padding: 10px;aspect-ratio: 1;width: 51px;background: var(--primary-color);}
.footer .send-button > *[class*="icon"] {font-size:2.4rem;display: flex;align-items: center;justify-content: center;transition: .3s;color: white;}
html[dir="ltr"] .footer .send-button > *[class*="icon"] {transform: scaleX(-1);}
.footer .copyright-desc {text-align: center;color: var(--gray-light);border-top: 1px solid var(--extra-light-gray);padding-block: var(--spacer-1);}




















/*about us page*/
.flags-section {}
.flags-section .flags-section-inner {
  background-color: #fff;
  padding: var(--padding-card);
}

/* GRID */
.flags-section .flags-items {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--spacer-2);
  justify-items: center;
  align-items: start;
}

/* 🔧 Kill unexpected wrappers from Drupal field templates */
.flags-section .flags-items > div,
.flags-section .flags-items > div > div,
.flags-section .flags-items .field__items,
.flags-section .flags-items .field__item {
  display: contents; /* makes grandchildren (the <article>) participate in the grid */
}

/* ITEM */
.flags-section .flag-item {
  border-radius: var(--radius-card-1);
  text-align: center;
}

/* IMAGE */
.flags-section .img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--extra-light-gray);
  border-radius: 50%;
  padding: 20px;
  inline-size: 96px;   /* fixed circle size */
  block-size: 96px;
  margin-inline: auto; /* center in RTL/LTR */
}
.flags-section .img-wrapper img {
  width: 70px;
  aspect-ratio: 1;
  object-fit: contain;
}

/* TITLE */
.flags-section .flag-title {
  margin-top: var(--spacer-1);
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 500;
}
.manager-section {border-radius: var(--radius-card-1);color: white;position: relative;overflow: hidden;}
html[dir="ltr"] .manager-section:before {left: unset;right: -93px;}
.manager-section .inner-section {overflow: hidden;background-color: var(--primary-color);padding: var(--padding-card);display: flex;align-items: center;z-index: 1;position: relative;}

.manager-section .inner-section:before{content: "";z-index: 2;background-image: url(../assets/images/bg-logo.svg);background-repeat: no-repeat;position: absolute;left: -100px;bottom: -6px;width: 250px;aspect-ratio: 1;background-size: 100%;background-position: center;}
html[dir="ltr"]  .manager-section .inner-section:before {left: unset;right: -100px;}

.manager-section .section-info {max-width: 850px;}
.manager-section .image-wrapper {display: flex;align-items: center;justify-content: center;margin-inline-start: auto;margin-inline-end: 100px;width: 165px;aspect-ratio: 1;border-radius: 50%;overflow: hidden;box-shadow: 0 0 0 10px white;z-index: 2}
.manager-section .section-info__title {font-size: var(--card-title-size);}
.manager-section .section-info__desc {font-size: var(--card-desc-size);margin-top: var(--spacer-1);}

.team-section .cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacer-2);
}

.team-section .cards-wrapper > div,
.team-section .cards-wrapper > div > div,
.team-section .cards-wrapper .field,
.team-section .cards-wrapper .field__items,
.team-section .cards-wrapper .field__item {
  display: contents;
}

.team-section .card { background-color: #fff; padding: var(--padding-card); text-align: center; cursor: pointer; }
.team-section .image-wrapper { display: flex;align-items: center;justify-content: center;width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--extra-light-gray); overflow: hidden }
.team-section .image-wrapper img {width: 100%;height: 100%;object-fit: cover;}
.team-section .card .image-wrapper.no-image img {width: 50px;height: 50px;}


.team-section .card .image-wrapper.no-image {

}

.team-section .card-subtitle { color: var(--gray-light);font-size: var(--body-size); }
.team-section .card > * + * { margin-top: var(--spacer-1); }
.team-section .email { background-color: #55c8ff36; color: var(--un-blue); border-radius: 4px; padding: 2px; }

.section-form {background-color: white;padding: var(--padding-section);margin-block: 60px;border-radius: var(--radius-card-1)}
.section-form-inner {display: flex;gap: 70px;}
.section-form .form-title {font-size: var(--card-title-size);font-weight: 800;margin-bottom: var(--spacer-1);}
.section-form .section-form-inner > * {flex: 1;}
.section-form .form-group label {display: block;}
.section-form .form-group {display: flex;flex-direction: column;gap: var(--spacer-3);}
.section-form .form > * + * {margin-top: var(--spacer-2);}
.section-form .form-group :is(input,textarea) {width:100%;border-radius: unset !important;outline: unset;background: #F5F5F5 !important;padding: 7px 3px !important;border: 1px solid transparent !important;transition: .3s}
.section-form .form-group :is(input,textarea):focus {border-color: var(--primary-color) !important;box-shadow: var(--main-shadow);}
.section-form .form-details__item {display: flex;align-items: start;gap: var(--spacer-1);}
.section-form .form-details__item > *[class*="icon"] {margin-top: 4px;font-size: 1.8rem;color: var(--primary-color);border: 1px solid;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%}
.section-form .form-details__item .item-column {display: flex;flex-direction: column;gap: var(--spacer-3);}
.section-form .form-details__item .item-column .label {font-size: clamp(1.1rem,4vw,1.3rem);color: var(--gray-light);}
.section-form .form-details__item .item-column .value {font-weight: 600;}
.section-form .form-details > * + * {margin-top: var(--spacer-2);}
.map {height: 300px;margin-top: 30px;overflow: hidden;}
.map iframe {width: 100%}

/*news page*/
.preview-section .main-image {position: relative;overflow: hidden;height: 400px;border-radius: var(--radius-card-1);box-shadow: var(--main-shadow);margin-bottom: var(--spacer-2);}
.preview-section .main-image a {display: block}

.preview-section .main-image img {margin: 0 auto}
.preview-section time {color: var(--gray-light);}
.preview-section .news-title {color: var(--gray-dark);margin-block: var(--spacer-1);font-size: clamp(1.8rem, 4vw, 2.2rem);}
.preview-section .news-content {color: var(--gray-dark);line-height: 1.7;}
.section-album .album-wrapper {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.section-album .image-container {position: relative;overflow: hidden;aspect-ratio: 4 / 3;border-radius: var(--radius-card-1);filter: brightness(0.7);transition: .4s;}
.section-album .image-container img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.section-album .album-item {height: 240px;display: block;overflow: hidden;background: white;}
.section-album .album-item img {margin: 0 auto;display: block;}


/*training page*/
.section-announcement {background: #55c8ff36;padding: var(--padding-section);border-radius: var(--radius-card-1);display: flex;align-items: center;}
.section-announcement .section-row {max-width: 850px;}
.section-announcement .primary-button {margin-inline-start: auto;}
.section-announcement .section-row__title {color: var(--primary-color);font-size: var(--card-title-size);margin-bottom: var(--spacer-1);}
.section-announcement .section-row__desc {font-size: var(--card-desc-size);font-weight: 500;color: var(--primary-color);}




.resources-section .card {display: flex;gap: var(--spacer-2);background: white;padding: var(--padding-card);}
.resources-section .card-desc {color: var(--gray-dark);margin-bottom: var(--spacer-3);}
.resources-section .card-img {max-width: 30px;}




/*knowledge page*/
.app-inner {display: flex;align-items: start;gap: var(--spacer-2);margin-top: var(--padding-section);}
.section-video.section {overflow: hidden;}
.content {overflow: hidden;background-color: white;border-radius: var(--radius-card-1);padding: var(--padding-card);}
.sidebar {background-color: white;border-radius: var(--radius-card-1);width: 250px;/* flex: 1; */flex-shrink: 0;overflow: hidden;position: sticky;top: 90px;margin-bottom: var(--padding-section)}
.sidebar .list-item-inner {display: flex;align-items: center;gap: var(--spacer-1);overflow: hidden;}
.sidebar .list-item-inner .list-item-title {font-size: var(--body-size);color: var(--gray-dark);font-weight: 600;}
.sidebar .list-item-inner *[class*="icon"] {color: var(--primary-color);font-size: 1.8rem;}
.sidebar .list-item {padding: calc(var(--padding-card) / 2) var(--padding-card);cursor: pointer;transition: .4s;}
.sidebar .list-items > * + *:not(.not-clickable) {border-top: 1px solid var(--extra-light-gray)}
.sidebar .list-item:not(.not-clickable) {padding: 0}
.sidebar .list-item:not(.not-clickable) a {padding: calc(var(--padding-card) / 2) var(--padding-card);display: block}
.sidebar-input.search-item  {display: flex;align-items: center;background: transparent;border: 1px solid var(--extra-light-gray);padding: 4px 10px;border-radius: 60px;}
.sidebar-input.search-item input {border: unset;width: 100%;}
.sidebar-input.search-item .icon-search {color: var(--gray-light);}
div#pub-exposed-form {border: unset;}
form#views-exposed-form-publications-block-1 {display: flex;flex-direction: column;gap: 20px;}
.sidebar-input.topics-wrapper.pub-topics-dock + *.search-item {display: none;}

/*.sidebar-input.date-item {display: flex;align-items: center;background: transparent;border: 1px solid var(--extra-light-gray);padding: 4px 10px;border-radius: 60px;}*/
.sidebar-input.date-item input {border: unset;color: var(--gray-light);}

.sidebar-input.topics-wrapper select {font-family: inherit;border: 1px solid var(--extra-light-gray);padding: 4px 10px;border-radius: 60px;width: 100%;padding: 10px;-webkit-appearance: none;-moz-appearance: none;background: transparent;background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-repeat: no-repeat;background-position-x: 5%;background-position-y: 5px;}
html[dir="ltr"] .sidebar-input.topics-wrapper select {background-position-x: 95%;}
.sidebar :is(.list-item.active, .list-item:hover):not(.not-clickable)  {background: var(--water-highlight);}
.sidebar :is(.list-item.active, .list-item:hover):not(.not-clickable)  .list-item-inner :is(.list-item-title, *[class*="icon"]) {color: white;}
.sidebar select {width:100%;border-radius:9999px;border:1px solid var(--extra-light-gray);padding:10px 40px 10px 14px;font:inherit;background:#fff;appearance:none; -webkit-appearance:none; -moz-appearance:none;line-height:1.2;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 14px) 50%;background-size:12px 8px;}

.list-item.not-clickable > * + * {margin-top: var(--spacer-1);}
.details-wrapper .section {padding: 0;}
.details-wrapper .preview-section > * + * {margin-top: var(--spacer-2);}
.content-title {line-height: 1.6;color: var(--gray-dark);font-weight: 800;font-size: var(--card-title-size);margin-bottom: var(--spacer-2);}
.details-wrapper .preview-section .image-wrapper img {margin: 0 auto;height: 100%;object-fit: cover;}
.details-wrapper .preview-section .image-wrapper {height: 380px;overflow: hidden;}
.stacked-style-card .card-inner {background: white;color: var(--gray-dark);}
:is(.stacked-style-card, .section-video) .card-desc {display: none;}
.stacked-style-card.section .cards-wrapper {grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}
.stacked-style-card .card-title {font-size: clamp(1.2rem,4vw,1.5rem);margin: 0;}
body:has(.custom-modal.active) .header-wrapper {z-index: 0;}
.cards-by-type .section {padding: 0;}
.cards-by-type > .views-element-container {padding-block: var(--padding-section)}
.cards-by-type:has( .views-element-container) {padding: 0;}
.cards-by-type .cards-wrapper {margin-top: var(--spacer-2);}

main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) {display: block;}
main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) .swiper-slide {display: flex;align-items: start;gap: var(--spacer-2);}
main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) .swiper-slide .card .img-wrapper{min-height: 360px;position:relative}
main:has(#knowledge-exposed-form) .card.stacked .img-wrapper img {height: 100%;width: 100%;}
main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) .swiper-slide .card .img-wrapper div {height: 100%;}
main:has(#knowledge-exposed-form) .cards-wrapper:has(.swiper) .swiper-slide .card {max-width: 33.333%;width: 33.333%;}
main:has(#knowledge-exposed-form) .swiper {padding-bottom: 45px;}
main:has(#knowledge-exposed-form) .swiper-pagination-bullet {width: 15px;height: 15px;}
main:has(#knowledge-exposed-form) .modal-image {min-height: 400px;align-self: stretch;}
main:has(#knowledge-exposed-form) .modal-image img {height: 100%;}


.section.related-news :is(.cards-wrapper > div,
.cards-wrapper > div > div,
.cards-wrapper > div > div > div) {display: contents;}
.section.related-news .visually-hidden {display: none !important;}

.news-section .card-title {margin: 0;}
.news-section .card-desc {font-size: clamp(1.1rem,4vw,1.4rem);}
.news-section .swiper-pagination-bullet {--size: 16px;width: var(--size);height: var(--size);}
.news-section .swiper-slide {padding: 10px 4px 40px}
.news-section .swiper-pagination {bottom: -5px !important;}

.content .section:last-child {padding-bottom: 0;}
.content {margin-bottom: var(--padding-section);flex:1}
.content .cards-wrapper {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.card.overlay .play-button {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #000000;width: 50px;height: 50px;border-radius: 50%;}
.card.overlay .play-button > span {color: #ffffff;}
.card.overlay:hover img{filter:brightness(1)}




.section-video .swiper-button{position: static;--size: 35px;}
.section-video .swiper-button.swiper-button-prev {position: static;}
.section-video .swiper-button {background: var(--primary-color);}
.section-video .swiper-button > *[class*="icon"] {color: white;font-size: 1.8rem;}
.section-video .button-row {display: flex;gap: var(--spacer-1);align-items: center;flex-direction: row-reverse;justify-content: start;position: relative;z-index: 11;}
.section-video .button-row > * {margin: 0}
html[dir="ltr"] .section-video .button-row > * {transform: scaleX(-1);}
.section-video .content-title {margin-bottom: 0}
.section-video .swiper-slide {display: flex;gap: var(--spacer-2);}
.section-video .swiper-slide > * {flex: 1;max-width: 50%}
.section-video .swiper-slide .card.overlay {min-height: 240px}
.section-video .section-video-row {display: flex;align-items: center;gap: 20px;margin-bottom: var(--spacer-2)}
.section-video .card.overlay:before {background-size:cover !important;}
.section-video .swiper-pagination {bottom: 0 !important;}
.section-video .swiper.video-swiper {min-height: 240px;}
.section-video .swiper-pagination-bullet {width: 12px;height: 12px;}




.custom-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);opacity: 0;pointer-events: none;transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);z-index: 999;backdrop-filter: blur(8px);}
.custom-overlay.active {opacity: 1;pointer-events: auto;}
.custom-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -48%) scale(0.96);background: white;width: min(840px, 92vw);padding: var(--padding-card);border-radius: 10px;opacity: 0;z-index: 1000;box-shadow: var(--main-shadow);pointer-events: none;transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.custom-modal.active {opacity: 1;transform: translate(-50%, -50%) scale(1);pointer-events: auto;}
.custom-modal .close-btn {outline: unset;--size: 30px;color:var(--primary-color);position: absolute;left: calc(var(--padding-card) - var(--size) / 3);top: calc(var(--padding-card) - var(--size) / 3);background: none;border: none;cursor: pointer;width: var(--size);height: var(--size);display: flex;align-items: center;justify-content: center;font-size: 3rem;}
html[dir="ltr"] .custom-modal .close-btn {left: unset;right: calc(var(--padding-card) - var(--size) / -3);}
.modal-content > * + * + * {margin-top: var(--spacer-2);}
.modal-body {display: flex;min-height: 300px;gap: var(--spacer-2); max-height: 70vh;overflow: auto}
.modal-body .card-date {font-size: clamp(1rem, 4vw, 1.2rem);color: var(--gray-dark);}
.modal-body .card-desc {color:var(--gray-dark)}
.modal-content {display: flex;flex-direction: column;flex:3;padding-top: 20px}
.modal-buttons {display: flex;align-items: center;gap: 20px;margin-top: auto}
.modal-image {flex-shrink: 0;flex:2;border: 1px solid #f3f3f3;align-self: start;text-align: center;min-height: 280px;padding: 20px 0;}
.modal-image img {margin: 0 auto;}
.modal-title {font-size: var(--card-title-size);font-weight: 400;margin-bottom: 20px;}

.js-pager__items {display: flex;align-items: center;justify-content: center;margin-top: 30px;gap: 20px;}
.js-pager__items > .navigation {width: 30px;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;color: var(--primary-color);}
.js-pager__items .navigation:has(.disabled) {opacity: .2;pointer-events: none;}
.js-pager__items li:not(.navigation){font-weight: 500;color: var(--primary-color);}
.js-pager__items li:has(a[rel]) a span{opacity:0;width: 0;display: inline-block;height: 0;}
.js-pager__items li:has(a[rel="next"]) a:after {content: "\e91f";font-family: 'icomoon';}
.js-pager__items li:has(a[rel="prev"]) a:after {content: "\e916";font-family: 'icomoon';line-height: 1;}

.js-pager__items li:has(a[rel]) {display: flex;align-items: center;justify-content: center;}
.js-pager__items li:has(a[rel]) a {border: 2px solid;color: var(--primary-color);width: 30px;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;}


html[dir="ltr"] .js-pager__items li:has(a[rel="next"]) a:after {
  transform: scaleX(-1);
}

html[dir="ltr"] .js-pager__items li:has(a[rel="prev"]) a:after {
  transform: scaleX(-1);
}


.js-pager__items:not(:has(a[rel="prev"])):before {content: "\e916";font-family: 'icomoon';line-height: 1;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border: 2px solid;color: var(--primary-color);opacity: .4;pointer-events: none;}
.js-pager__items:not(:has(a[rel="next"])):after {content: "\e91f";font-family: 'icomoon';line-height: 1;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border: 2px solid;color: var(--primary-color);opacity: .4;pointer-events: none;}

html[dir="ltr"] .js-pager__items:not(:has(a[rel="prev"])):before {transform: scaleX(-1)}
html[dir="ltr"] .js-pager__items:not(:has(a[rel="prev"])):after {transform: scaleX(-1)}
html[dir="ltr"] .js-pager__items:not(:has(a[rel="next"])):after {transform: scaleX(-1);}



.high-commission .list-item > a {font-size: 1.4rem !important;width: 100%;text-align: center;padding-block: 13px;}
.high-commission .content .section:first-child {padding-top: 0;}
.high-commission .content  .card.stacked .img-wrapper {height: 360px}


.section-film-video .cards-wrapper {grid-template-columns: 1fr 1fr;margin-top: var(--spacer-2);grid-auto-rows: auto;grid-auto-columns: auto;}
.section-film-video .card.overlay:first-child {grid-column: 1 / 3;}
.section-film-video .card.overlay {max-height: 300px;overflow: hidden;cursor: pointer;}



.learning-online-section .cards-wrapper .card.stacked {background-color: var(--primary-color);}
.learning-online-section .card .card-img-stacked img {width: 30px}
.card-top-content {display: flex;align-items: baseline;gap: 20px;}
.learning-online-section .card .card-title {color: white;}
.learning-online-section .card .secondary-button {border: unset;width: 100%;}
.learning-online-section .cards-wrapper .views-element-container > * {display: flex;gap: 20px;}
.learning-online-section .cards-wrapper {display: block;}
.learning-online-section .cards-wrapper > * {display: block;}
.learning-online-section .cards-wrapper .views-element-container > * .views-row {width: 33.333%;}


.section-social { max-width: var(--app-inner-size);margin: 0 auto;display: flex;align-items: center;gap: 20px;}
.section-social .social-list>li>a {background-color: var(--primary-color);}
.section-social .social-list>li>a:is(:hover, :focus) {background-color: rgb(0 111 183 / 66%);}
.section-social .social-list>li>a>*[class*="icon"] {color: white;}
.contact-us-page .section-social {display: none}


.contact-page [data-drupal-messages],
.contact-page [data-drupal-messages-fallback] { color: #26A465 }

.cards-wrapper > .views-element-container {
  display: contents;
}


.member-card {
  cursor: pointer;
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--card-bg, #fff);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.member-card:focus,
.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  outline: none;
}
.member-card__image img { width: 100%; height: auto; display: block; border-radius: .75rem; }
.member-card__image--placeholder { width: 100%; aspect-ratio: 4/3; background: #f2f2f2; border-radius: .75rem; }
.member-card__name { margin: .25rem 0 0; font-size: 1.1rem; font-weight: 700; }
.member-card__role { margin: 0; opacity: .8; }

/* Modal */
.member-modal {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: none;
  padding: 20px;
  border-radius: 8px;
}

.member-modal.show {
  opacity: 1;
  transform: translateY(0);
}

.member-modal {
  width: min(840px, 92vw);
  border: none;
  border-radius: 1rem;
  padding: 0;
  box-shadow: 0 40px 80px rgba(0,0,0,.24);
}
.member-modal::backdrop { background: rgba(0,0,0,.45); }
.member-modal__close {
  position: absolute;
  top: .5rem;
  inset-inline-end: .5rem;
  color: var(--primary-color);
  border: 0;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  font-size: 4rem;
}
.member-modal__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
  padding: 2rem;
}
@media (max-width: 720px) {
  .member-modal__body { grid-template-columns: 1fr; }
}

.member-modal__image-wrap {background-color: #f7f7f7;height: 300px;overflow: hidden;border-radius: .75rem;display: flex;flex-direction: column;justify-content: center;}
.member-modal__image-wrap img {width: 100%; height: auto; display: block;}
.member-modal__image-wrap img[src*="profile"] {max-width: 50%;margin: 0 auto;}
.member-modal__name { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 800; }
.member-modal__role { margin: 0 0 .5rem; opacity: .8; }
.member-modal__email a { text-decoration: none; }
.member-modal__desc { }

.member-modal__desc-wrapper {display: inline;}
.member-modal__desc { margin-top: var(--spacer-1);display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;vertical-align: bottom;color: var(--gray-dark);font-size: clamp(1.2rem, 4vw, 1.4rem);line-height: 1.7;}
.member-modal__desc.expanded {-webkit-line-clamp: unset;display: inline;}
.member-modal__desc.fit {display: block;}
.show-toggle {color: var(--primary-color);font-weight: 600;margin-top: 4px;}
.member-modal__desc.fit + .show-toggle {
  display: none !important;
}

[data-drupal-selector="views-exposed-form-news-page-1"] > h2 {
  display: none !important;
}

#news-exposed-form .form-item-combine > label,
#views-exposed-form-news-page-1 .form-item-combine > label {
  display: none !important;
}

.news-page .section-announcement {
  margin-block-start: 24px;

}

.form-item-field-publication-date-value-min, .form-item-field-publication-date-value-max {
  display: none;
}
select#news-year-select {
  width: 100%;
  font-family: inherit;
  border: unset;
}

.section.page-header.has-bg:before {
  background-image: none !important;
}


.section.page-header.has-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  padding-block: 32px;
  position: relative;
}
.section.page-header.has-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events:none;
}
.section.page-header.has-bg .page-header__title,
.section.page-header.has-bg .breadcrumbs,
.section.page-header.has-bg .breadcrumbs a { color:#fff; }
.page-header {position: relative;min-height: 220px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
/*.page-header:before {content: "";position: absolute;inset: 0;background-image: url("../assets/images/aboutus.png");background-repeat: no-repeat;background-position: center;background-size: cover;}*/
html[dir="ltr"] .page-header:before {transform: scaleX(-1);}
.page-header .app-wrapper {z-index: 1;position: relative;color: white;}
.page-header__title {font-size: var(--page-header-size);margin-bottom: var(--spacer-3);}
.page-header__bg {width: 100%;height: 100%;position: absolute;inset: 0;transform: scaleX(-1);align-self: stretch;object-fit: cover;object-position: left;}
html[dir="ltr"] .page-header__bg {transform: unset;}
.learning-online-section:not(:has(> .card)) {display: none;}
.stacked-style-card .swiper-button-next {position: static;margin: 0;}
.stacked-style-card .swiper-navigation {display: flex;align-items: center;gap: 10px;justify-content: center;margin-top: 20px;}
.stacked-style-card .swiper-navigation > * {margin: 0;position: static;width: 30px;aspect-ratio: 1;height: unset;background: var(--primary-color);}
.stacked-style-card .swiper-button-next:after, .swiper-button-prev:after {font-size: 1.6rem;color: white;}
.stacked-style-card .swiper-button-prev:after {content: "\e98e" !important;font-family: 'icomoon' !important;}
.stacked-style-card .swiper-button-next:after {content: "\e98d"!important;font-family: 'icomoon' !important;}
html[dir="ltr"] .stacked-style-card .swiper-navigation > * {transform: scaleX(-1)}


/* 3 cards per row for the News Banners block */
.section.learning-online-section
.views-element-container
[class*="js-view-dom-id-"] > div > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;                 /* tweak spacing as you like */
}

/* remove stray gaps from the auto wrappers Drupal prints */
.section.learning-online-section
.views-element-container
[class*="js-view-dom-id-"] > div > div > div {
  margin: 0;
}

/* make each card stretch nicely */
.section.learning-online-section .card.stacked {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.section.learning-online-section .card.stacked .card-inner {
  flex: 1 1 auto;
}

/* responsive breakpoints */
@media (max-width: 1169px) {
  .section.learning-online-section
  .views-element-container
  [class*="js-view-dom-id-"] > div > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .section.learning-online-section
  .views-element-container
  [class*="js-view-dom-id-"] > div > div {
    grid-template-columns: 1fr;
  }
}

/* container */
.topics-wrapper .combo{position:relative}
/* button */
.combo-toggle{width: 100%;display: flex;justify-content: space-between;align-items: center;padding: .6rem .75rem;border: 1px solid var(--extra-light-gray);border-radius: 20px;background: #fff;}
/* panel */
.combo-panel{position:absolute;inset-inline:0;top:calc(100% + .25rem);z-index:50;background:#fff;border:1px solid #ddd;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:.5rem}
/* search */
.combo-search{padding:.25rem .5rem .5rem}
.combo-search-input{width:100%;padding:.5rem;border:1px solid #e3e3e3;border-radius:.4rem}
/* list */
.combo-list{list-style:none;margin:0;padding:.25rem 0;max-height:240px;overflow:auto}
.combo-option{padding:.5rem .75rem;cursor:pointer}
.combo-option:hover{background:#f6f6f6}
.combo-option.selected{font-weight:600}


/* ensure parent doesn’t clip; defensive only */
.topics-wrapper,
.topics-wrapper .combo { position: relative; overflow: visible; }

/* floating panel styling */
.combo-panel--floating{
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: .5rem;
  overflow: auto;
}

/* (keep your existing styles) */
.combo-search{padding:.25rem .5rem .5rem}
.combo-search-input{width:100%;padding:.5rem;border:1px solid #e3e3e3;border-radius:.4rem}
.combo-list{list-style:none;margin:0;padding:.25rem 0}
.combo-option{padding:.5rem .75rem;cursor:pointer}
.combo-option:hover{background:#f6f6f6}
.combo-option.selected{font-weight:600}


.combo-panel--floating{
  position: fixed; z-index: 9999; overflow: auto;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.5rem;
}
.combo-list{list-style:none; margin:0; padding:.25rem 0; max-height:60vh;}
.combo-option{padding:.25rem .25rem;}
.combo-check{display:flex; gap:.5rem; align-items:center; cursor:pointer;}
.combo-actions{display:flex; justify-content:space-between; gap:.5rem; padding:.5rem .25rem .25rem;}
.combo-apply,.combo-clear{padding:.4rem .75rem; border-radius:6px; border:1px solid #e5e7eb; background:#f9fafb;}
.combo-apply{background:#111827; color:#fff; border-color:#111827;}