/**** Header and Footer Styles ****/

.hcis-header-wrapper .dropdown-toggle::after {
  border: 0 !important;
}

.hcis-header-wrapper a {
  text-decoration: none !important;
  color: var(--darker-dray) !important;
}

/* .hcis-main-header-wrapper .navbar ,.govsa-footer-bg .quick-links li a:hover{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
} */

.hcis-main-header-wrapper .navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hcis-main-header-wrapper li.nav-item {
  height: 100%;
  border-radius: var(--radius);
}

.hcis-main-header-wrapper li.nav-item.active {
  color: var(--white);
}

.hcis-main-header-wrapper li.nav-item.active a.nav-link,
.hcis-main-header-wrapper li.nav-item.current-page a.nav-link {
  background-color: var(--primary-green) !important;
  color: var(--white) !important;
  border-radius: var(--radius);
}

/* Non-active dropdown open state on the a.nav-link.show — gray bg */
.hcis-main-header-wrapper li.nav-item:not(.active):not(.current-page) a.nav-link.show,
.hcis-main-header-wrapper li.nav-item:not(.active):not(.current-page) a.nav-link.show:hover {
  background-color: #E5E7EB !important;
  outline: none;
  border-radius: var(--radius);
  color: var(--darker-dray) !important;
}

.hcis-main-header-wrapper li.nav-item a.nav-link {
  padding: 8px 24px;
  color: var(--darker-dray) !important;
  position: relative !important;
  font-size: var(--fs-16);
  font-weight: 600 !important;
  text-align: center;
  display: inline-flex;
  height: 72px;
  align-items: center;
  justify-content: center;
   gap: 2px; 
  border-radius: var(--radius);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hcis-main-header-wrapper li.nav-item a.nav-link svg {
  stroke: var(--darker-dray) !important;
}

html[dir="ltr"] .hcis-main-header-wrapper li.nav-item a.nav-link {
  padding: 24px 4px;
}

.header-search-lang-side a {
  border-radius: var(--radius);
  padding: 24px 8px;
}

/* Chevron on active/current-page: white, pointing down by default */
.hcis-main-header-wrapper li.nav-item.active img,
.hcis-main-header-wrapper li.nav-item.current-page img {
  filter: brightness(13.5) !important;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

/* Chevron rotates up when dropdown is open */
.hcis-main-header-wrapper li.nav-item.show img {
  transform: rotate(180deg) !important;
  transition: transform 0.3s ease;
}


/* Active nav item — hover + pressed: darker green on the link */
.hcis-main-header-wrapper li.nav-item.active a.nav-link:active {
  background-color: #104631 !important;
  outline: none;
}

.hcis-main-header-wrapper li.nav-item.active:hover a.nav-link {
  background-color: #166A45 !important;
  outline: none !important;
}




/* Current-page dropdown OPEN — stays green, darker shade to signal open */
.hcis-main-header-wrapper li.nav-item.current-page.show a.nav-link,
.hcis-main-header-wrapper li.nav-item.current-page a.nav-link[aria-expanded="true"] {
  background-color: var(--sa-800) !important;
  color: var(--white) !important;
  border-radius: var(--radius);
}

/* Current-page open — hover */
.hcis-main-header-wrapper li.nav-item.current-page.show:hover a.nav-link,
.hcis-main-header-wrapper li.nav-item.current-page.show a.nav-link:hover {
  background-color: var(--primary-green) !important;
  color: var(--white) !important;
}

/* Current-page open — pressed */
.hcis-main-header-wrapper li.nav-item.current-page.show a.nav-link:active {
  background-color: #22A166 !important;
  color: var(--white) !important;
}

/* Current-page open — bottom bar stays brand color */
.hcis-main-header-wrapper li.nav-item.current-page.show a.nav-link::after,
.hcis-main-header-wrapper li.nav-item.current-page a.nav-link[aria-expanded="true"]::after {
  background-color: var(--colors-brand-400) !important;
}

/* Active nav item — focused: primary green + 2px solid black outline */
/* .hcis-main-header-wrapper li.nav-item.active a.nav-link:focus, */
.hcis-main-header-wrapper li.nav-item.active a.nav-link:focus-visible {
  background: var(--primary-green) !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* DGA Active nav item — Disabled: muted/gray */
.hcis-main-header-wrapper li.nav-item.active.disabled a.nav-link,
.hcis-main-header-wrapper li.nav-item.active[aria-disabled="true"] a.nav-link {
  background-color: var(--border-color2) !important;
  opacity: 0.6;
  pointer-events: none;
}

.hcis-offcanvas {
  background: var(--white);
  overflow-y: scroll;
}

.offcanvas-close-wrapper {
  text-align: end !important;
}

.hcis-offcanvas li.nav-item .nav-link {
  color: var(--gray);
  font-weight: 500;
}

.hcis-main-header-wrapper li.nav-item a,
.header-search-lang-side a {
  position: relative !important;
}

.hcis-main-header-wrapper li.nav-item a.nav-link:after,
.header-search-lang-side a:after {
  position: absolute;
  content: "";
  width: 85%;
  height: 6px;
  background-color: transparent;
  border-radius: var(--radius);
  margin: 0 auto;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.hcis-main-header-wrapper .nav-item:not(.active):hover a.nav-link:after,
.header-search-lang-side a:hover:after {
  background-color: #9DA4AE !important;
}

.hcis-main-header-wrapper .nav-item:not(.active):active a.nav-link:after,
.header-search-lang-side a:active:after {
  background-color: #1F2A37 !important;
}

.hcis-main-header-wrapper li.nav-item.active a.nav-link:after {
  background-color: var(--colors-brand-400) !important;
}

/* .hcis-offcanvas li.nav-item .nav-link img {
    filter: brightness(13.5);
} */

.hcis-main-menu-wrapper {
  justify-content: start !important;
  max-height: 72px !important;
}

.hcis-main-menu-wrapper .dropdown-menu {
  width: 100%;
  margin-top: 0 !important;
}

.hcis-main-menu-wrapper .dropdown-menu p a {
  display: block;
  width: 100%;
  color: var(--gray) !important;
  font-weight: 500 !important;
  padding: 8px 16px;
}

.hcis-main-menu-wrapper .dropdown-menu h6 {
  padding: 8px 16px;
  color: var(--primary-green);
  font-weight: 700 !important;
  font-size: var(--fs-20) !important;
}

.hcis-main-menu-wrapper .dropdown-menu p a:hover {
  background: var(--gray-bg2);
  text-decoration: underline !important;
  border-radius: 8px;
}

/**** Footer Styles ****/

.footer-social__icon img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
  /* no filter — dark icon on light gray bg */
}

.footer-social__icon span {
  font-size: var(--fs-14);
  font-weight: 600 !important;
  color: var(--gray-700);
}

.footer-second ul li {
  margin-bottom: 10px;
}

/* .footer-second ul li a {
    color: var(--primary-green) !important;
} */

.footer-second h6:first-child {
  font-size: var(--fs-14);
  font-weight: 600 !important;
}

.footer-second h6 {
  font-size: var(--fs-14);
  font-weight: 400 !important;
}

.footer-other_links li a {
  text-decoration: underline !important;
  font-size: var(--fs-14);
  font-weight: 400;
}

.govsa-footer-bg {
  background: var(--gray-bg2);
  color: var(--dark-gray);
  padding: 48px 40px 48px;
}

.govsa-footer-bg .quick-links li,
.govsa-footer-bg .quick-links li a {
  color: var(--dark-gray);
  font-size: var(--fs-14);
  font-weight: 400 !important;
  margin: 4px 0;
}

/* DGA: Group Label — semibold, border-bottom separator */
.govsa-footer-bg .quick-links li:first-child,
.govsa-footer-bg .quick-links li:first-child a {
  border-bottom: 1px solid var(--border-color2);
  padding-bottom: 12px;
  color: var(--dga-black);
  font-weight: 600 !important;
  font-size: var(--fs-16);
}

.footer-social__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  /* 8px                                  */
  text-decoration: none !important;
  background: var(--gray-100);
  /* #F3F4F6                              */
  border: 1px solid var(--gray-300);
  /* #D2D6DB ≈ tool-btn #D1D5DB          */
  border-radius: 6px;
  /* matches .tool-btn                    */
  padding: 4px;
  /* 8 + 24px icon + 8 = 40×40px         */
  color: var(--gray-700);
  /* #384250 ≈ tool-btn #374151           */
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
  flex-shrink: 0;
}

.copyright strong,
.copyright strong span {
  color: var(--dga-black);
  font-size: var(--fs-16);
}

.mobile-menu-wrapper .nav-item.active {
  background-image: url(../images/green-check.svg);
  background-repeat: no-repeat;
  background-position: left 27px top 18px;
  background-size: 17px;
}

html[lang="en"] .mobile-menu-wrapper .nav-item.active {
  background-position: right 27px top 18px;
}

/* DGA icon sizing: chevron in nav = 16px (XS — narrow space within nav item) */
.desktop-menu-wrapper .nav-link img.chevron {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.hcis-main-header-wrapper {
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--white);
}

.hcis-navbrand-side a img {
  width: 100% !important;
  max-width: 212px !important;
  /* height: auto !important; */
}

.digital-stamp-card {
  padding: 8px 40px;
  background: var(--gray-bg2);
}

.digital-stamp-card .digital-stamp-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.digital-stamp-card .digital-stamp-header h6 {
  margin: 0px;
  color: var(--dga-black);
  font-size: var(--fs-14);
  font-weight: 600 !important;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
  cursor: pointer;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
  color: var(--primary-green);
  font-size: var(--fs-14);
  transition: color 0.2s ease;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg,
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img {
  transition: 0.3s;
}

/* Hover */
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:hover span {
  color: var(--secondary-green);
  text-decoration: underline;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:hover svg path {
  fill: var(--secondary-green);
}

/* Active / Pressed */
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:active span {
  color: var(--darker-green);
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:active svg path {
  fill: var(--darker-green);
}

/* Focus-visible */
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:focus-visible,
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:focus {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

.digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg,
.digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img {
  transform: rotate(180deg);
}

.btn-digital-stamp-card img {
  margin-right: 4px;
  margin-left: 4px;
}

.digital-stamp-card .digital-stamp-body {
  padding-top: 40px;
  padding-bottom: 32px;
  display: none;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container {
  margin-bottom: 32px;
  display: flex;
  gap: 32px;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded {
  /* padding: 14px 16px; */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--secondary-green);
  border-radius: 100%;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 {
  margin-top: 0px;
  margin-bottom: 12px;
  color: var(--dga-black);
  font-size: var(--fs-18);
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text {
  color: var(--primary-green);
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box p {
  margin: 0px;
  color: var(--dark-gray);
  font-size: var(--fs-16);
}

.digital-stamp-card .digital-stamp-body .stamp-link-box {
  padding: 8px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  background: var(--white) !important;
}

.digital-stamp-card .digital-stamp-body .stamp-link-box p {
  margin: 0px;
  color: var(--dga-black);
  font-size: var(--fs-16);
}

.digital-stamp-card .digital-stamp-body .stamp-link-box a {
  color: var(--primary-green);
  font-size: var(--fs-16);
  text-decoration: underline;
}

.stamp-ar {
  direction: rtl;
}

.stamp-en {
  direction: ltr;
}

.header-burger-side button img {
  width: 24px !important;
  height: 24px !important;
}

.mobile-menu-wrapper .hcis-offcanvas ul.navbar-nav>li.nav-item:last-child,
.header-search-lang-side a,
.header-search-lang-side a {
  display: none !important;
}

.hcis-main-header-wrapper a[href="./under-construction.html"],
.hcis-main-header-wrapper a[href="./../under-construction.html"] {
  display: none !important;
}

@media (max-width: 768px) {
  .digital-stamp-card .digital-stamp-header {
    flex-wrap: wrap;
  }

  .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
    flex: 100%;
    margin-right: 33px;
  }

  .digital-stamp-card .digital-stamp-body .digital-stamp-container {
    flex-direction: column;
  }

  [dir="ltr"] .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
    margin-right: 0px;
    margin-left: 33px;
  }
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .hcis-main-header-wrapper li.nav-item a.nav-link {
    padding: 12px 16px;
    font-size: var(--fs-14);
    text-align: center;
  }

  .header-search-lang-side a {
    padding: 24px 6px;
  }

  .hcis-navbrand-side a img {
    width: 180px !important;
  }

  .section-paddings {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media screen and (max-width: 991px) {
  .hcis-navbrand-side a img {
    width: 172px !important;
  }

  .digital-stamp-card {
    padding: 8px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DGA UNIFIED DESIGN SYSTEM — COMPLIANCE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Spacing Tokens ─────────────────────────────────────────────────────── */
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
}

/* ── External Link Icon ─────────────────────────────────────────────────── */
/* SVG uses fill="currentColor" so it inherits the link's text color automatically */
.external-link-icon {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 4px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
  width: 16px;
  height: 16px;
  /* Inherit color from parent link */
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════════
   DGA Link States — الرابط (Platforms Code)
   6 states: Default / Hovered / Pressed / Focused / Visited / Disabled
   Source: design.dga.gov.sa — Link component, Style: Primary
   ══════════════════════════════════════════════════════════════════ */

/* Hovered — slightly darker green */
a:hover {
  color: var(--secondary-green);
  text-decoration: underline;
  transition: color 0.2s ease;
}

/* Pressed — darkest green */
a:active {
  color: var(--darker-green) !important;
}

/* Focused — 2px solid black outline (DGA spec) */
a:focus,
a:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Visited — secondary green (exclude nav/footer/btn) */
a:visited:not(.btn):not(.nav-link):not(.footer-link):not(.footer-social__icon) {
  color: var(--secondary-green);
}

/* Disabled */
a[aria-disabled="true"],
a.disabled-link {
  color: var(--gray-400) !important;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none !important;
  opacity: 0.5;
}

/* Breadcrumb links — preserve original white/green colours; override generic a rules */
.breadcrumbs-list li a {
  color: var(--gray-700) !important;
  text-decoration: none !important;
}

.breadcrumb a:visited {
  color: var(--gray-500);
}

.colored-breadcrumbs-list li a {
  color: var(--white) !important;
  text-decoration: none !important;
}

.breadcrumbs-list li a.active-breadcrumb {
  /* color: var(--primary-green) !important; */
  color: var(--gray-400) !important;
}

.breadcrumbs-list.colored-breadcrumbs-list li a.active-breadcrumb {
  color: var(--sa-25) !important;
}

.breadcrumbs-list li a:hover,
.colored-breadcrumbs-list li a:hover {
  text-decoration: underline !important;
  /* colour stays as inherited above — no override */
}

.colored-breadcrumbs-list li a:hover {
  color: var(--white) !important;
}

.breadcrumbs-list li a:hover {
  color: var(--gray-800);
}


/* Middle breadcrumb items (parent nav names) — non-clickable plain text */
.breadcrumbs-list li:not(:first-child):not(:last-child) a,
.colored-breadcrumbs-list li:not(:first-child):not(:last-child) a {
  pointer-events: none;
  cursor: default;
}

.breadcrumbs-list li:not(:first-child):not(:last-child) a:hover,
.colored-breadcrumbs-list li:not(:first-child):not(:last-child) a:hover {
  text-decoration: none !important;
}

/* ── Close Button States (DGA spec) ── */
.btn-close {
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

/* Hover — light gray background */
.btn-close:hover {
  background-color: var(--gray-100);
  opacity: 1;
}

/* Active / Pressed — slightly darker */
.btn-close:active {
  background-color: var(--gray-200);
  opacity: 1;
}

/* Focus / focus-visible — DGA black outline */
.btn-close:focus,
.btn-close:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ── Button States (DGA: Default / Hover / Pressed / Focused / Disabled) ── */
.btn,
button:not(.btn-digital-stamp-card):not(.offcanvas-close-btn) {
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.1s ease;
}

.btn:hover {
  filter: brightness(0.92);
  text-decoration: none !important;
}

.btn:active,
.btn.pressed {
  transform: scale(0.97);
  filter: brightness(0.85);
  text-decoration: none !important;
}

.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible {
  outline: 2px solid var(--dga-black);
  outline-offset: 3px;
  /* box-shadow: 0 0 0 4px var(--sa-focus-ring); */
}

.btn:disabled,
button:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   DGA RADIO COMPONENT — Platforms Code Design System
   Anatomy: label.radio.radio--[brand|neutral] (tabindex="0")
              > .radio-main > .radio-main__content
                  > input[type=radio]
                  + .radio-container (empty — ::before=inner dot, ::after=ripple)
                  + .dga-flex-column > .radio__label
   ══════════════════════════════════════════════════════════════════════════ */

label.radio {
  display: block;
  cursor: pointer;
}

.radio-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radio-main__content {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  cursor: pointer;
}

.radio-main__content input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  top: 0;
  inset-inline-start: 0;
  cursor: pointer;
  z-index: 1;
  margin: 0;
}

/* Visual radio circle — 24×24px (DGA spec) */
.radio-container {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--colors-gray-neutral-500, #6c727e) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transition: border-color 0.2s ease;
}

/* ::before — inner selection dot */
.radio-container::before {
  content: "";
  border-radius: var(--radius-full, 9999px);
  background-color: var(--colors-gray-neutral-950, #0c111b);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  transition: all 0.1s ease-in-out;
}

.dga-flex-column {
  display: flex;
  flex-direction: column;
}

.radio__label {
  font: 500 16px / 24px "IBM Plex Sans Arabic", sans-serif;
  color: var(--gray-900, #111927);
  cursor: pointer;
}

.radio__helper-text {
  font-size: var(--fs-14);
  color: var(--gray-600, #4d5761);
  margin-block: 4px;
}

/* Warning row */
.radio__warning {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.radio__warning-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--danger-red, #d92c20);
}

.radio__warning-icon img {
  width: 16px;
  height: 16px;
}

.radio__warning-text {
  font-size: var(--fs-14);
  color: var(--danger-red, #d92c20);
}

/* Ripple — on parent (.radio-main__content), never touches .radio-container border */
.radio-main__content::before {
  content: "";
  border-radius: 50%;
  background: var(--colors-gray-neutral-100, #f3f4f6);
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  inset-inline-start: -12px;
  transform: translateY(-50%) scale(0);
  pointer-events: none;
  transition: transform 0.3s ease-in-out;
}

.radio-main__content:has(input:hover)::before,
.radio-main__content:has(input:checked:hover)::before {
  transform: translateY(-50%) scale(1);
}

/* Active / Pressed — ripple on parent + darker bg on container */
.radio-main__content:has(input:active)::before,
label.radio:active .radio-main__content::before {
  transform: translateY(-50%) scale(1);
}

label.radio:active .radio-container,
.radio-main__content:active .radio-container {
  background-color: var(--gray-300) !important;
}

/* Focus — 3px solid black, no border-radius (square outline) */
.radio-main__content input:focus-visible,
.radio-main__content input:focus {
  outline: 2px solid var(--dga-black, #161616) !important;
  outline-offset: 2px;
  border-radius: 0 !important;
}

/* Disabled */
label.radio:has(input:disabled),
.radio-main__content:has(input[type="radio"]:disabled) {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Brand: selected = green border + green inner dot + green label */
.radio--brand input[type="radio"]:checked~.radio-container {
  border: 1px solid var(--controls-control-primary-checked, #1b8354) !important;
}

.radio--brand input[type="radio"]:checked:hover~.radio-container::before,
.radio--brand input[type="radio"]:checked:active~.radio-container::before {
  background-color: var(--sa-800) !important;
  transform: translate(-50%, -50%) scale(1);
}

.radio--brand input[type="radio"]:checked:hover~.radio-container,
.radio--brand input[type="radio"]:checked:active~.radio-container {
  border-color: var(--sa-800) !important;
}

.radio--brand input[type="radio"]:checked:focus-visible~.radio-container::before {
  outline: 2px solid var(--dga-black, #161616) !important;
  outline-offset: 2px;
  border-radius: 0 !important;
}

.radio--brand input[type="radio"]:checked~.radio-container::before {
  background-color: var(--controls-control-primary-checked, #1b8354);
  transform: translate(-50%, -50%) scale(1);
}

.radio--brand input[type="radio"]:checked~.dga-flex-column .radio__label {
  color: var(--controls-control-primary-checked, #1b8354);
}

/* Neutral: selected = dark border + dark inner dot */
.radio--neutral input[type="radio"]:checked~.radio-container {
  border: 2px solid var(--colors-gray-neutral-950, #0c111b);
}

.radio--neutral input[type="radio"]:checked~.radio-container::before {
  background-color: var(--colors-gray-neutral-950, #0c111b);
  transform: translate(-50%, -50%) scale(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   DGA CHECKBOX — Full implementation matching DGA design system
   ══════════════════════════════════════════════════════════════════════════ */

/* checkbox: positioning context + ripple host */
.checkbox {
  position: relative;
  margin-bottom: 18px !important;
}

/* Ripple — on the PARENT (.checkbox), not on .checkbox-container,
   so it never touches .checkbox-container's border */
.checkbox::before {
  content: "";
  border-radius: 50%;
  background: var(--gray-100);
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  inset-inline-start: -8px;
  transform: translateY(-50%) scale(0);
  pointer-events: none;
  transition: transform 0.3s ease-in-out;
}

/* Hover triggers ripple via :has() */
.checkbox:has(input:hover)::before,
.checkbox:has(input:checked:hover)::before {
  transform: translateY(-50%) scale(1.1);
}

/* Native input — hidden but covers the visual .checkbox-container so
   clicks on the visual area register on the input */
.checkbox input[type="checkbox"].form-check-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  top: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
}

/* Visual checkbox — replaces native input appearance (matches DGA .checkbox--md) */
.checkbox-container {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 2px;
  border: 1px solid var(--controls-control-border, #9da4ae);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: none;
  /* background: transparent !important; */
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

/* Hover (unchecked) */
.checkbox:hover .checkbox-container,
.checkbox input:hover~.checkbox-container {
  border-color: #6C737F;
}

/* Active (unchecked) */
.checkbox:active .checkbox-container,
.checkbox input:active~.checkbox-container {
  background: #D2D6DB!important;
  border-color: #6C737F;
}

/* Checked — green background + border */
.checkbox input:checked~.checkbox-container {
  background: var(--primary-green, #1b8354);
  border-color: var(--primary-green, #1b8354)!important;
  /* border-color: #6C737F; */
}

/* Checked — label turns green */
.checkbox input:checked~.form-check-label {
  color: var(--primary-green, #1b8354);
}

/* Checked + Hover */
.checkbox input:checked:hover~.checkbox-container {
  background: #14573A;
  border-color: #14573A!important;
  /* border-color: #6C737F; */
}

/* Checked + Active */
.checkbox input:checked:active~.checkbox-container {
  background: #104631;
  border-color: #104631!important;
  /* border-color: #6C737F; */
}

/* Checkmark icon via ::before using the DGA SVG */
.checkbox input:checked~.checkbox-container::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11.474 17.306c3.013-3.224 5.922-5.411 9.576-8.508 1.094-.927 1.263-2.552.405-3.703-.912-1.224-2.645-1.469-3.817-.496-3.347 2.776-5.951 5.45-8.421 8.306-.13.15-.195.225-.262.267a.52.52 0 0 1-.555.003c-.068-.041-.133-.115-.263-.262l-1.316-1.49a2.748 2.748 0 0 0-4.358.304 2.79 2.79 0 0 0 .253 3.406l2.064 2.29C6.323 19.135 7.095 19.992 8.022 20c.926.008 1.768-.892 3.452-2.694'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  z-index: 1;
}

/* Focus — outline on the visual .checkbox-container */
/* .checkbox input:focus~.checkbox-container, */
.checkbox input:focus-visible~.checkbox-container {
  outline: 2px solid var(--dga-black, #0c111b);
  outline-offset: 2px;
}

/* input[type="checkbox"].form-check-input:focus, */
input[type="checkbox"].form-check-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Loading Spinner — DGA: primary green ── */
.spinner-border {
  color: var(--primary-green, #1b8354) !important;
}

.spinner-border.spinner--gray,
.spinner-border.text-secondary {
  color: var(--gray-400, #9da4ae) !important;
}

.spinner-grow {
  color: var(--primary-green, #1b8354) !important;
}

/* ── Featured Icon (DGA: icons larger than 24 px) ───────────────────────── */
/* Wrap any icon > 24px in <span class="featured-icon"> */
.featured-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--light-green-bg);
  border-radius: 50%;
  flex-shrink: 0;
}

.featured-icon img,
.featured-icon svg {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

/* Large standalone icons (statistics, home sections) keep a max of 48px */
.home-statistics__icon img,
.home-statistics__icon svg,
.section-icon img,
.section-icon svg {
  max-width: 48px;
  max-height: 48px;
}

/* ── DGA Field Wrapper — animated bottom line (DGA --form-field-border-pressed)
   ::after cannot be used on <textarea> or <input> (replaced elements);
   JS wraps each field in .dga-field-wrap at runtime.              ────────── */
.dga-field-wrap {
  position: relative;
  display: block;
}

.dga-field-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 2px;
  transform: translateX(-50%);
  background-color: var(--dga-black);
  /* #161616 */
  transition: width 0.2s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.dga-field-wrap:focus-within::after {
  width: 100%;
}

/* Disabled / read-only fields: no animation */
.dga-field-wrap:focus-within:has(:disabled)::after,
.dga-field-wrap:focus-within:has([readonly])::after {
  width: 0%;
}

/* ── DGA Form Footer (hint text left + char-counter right) ───────────────── */
.dga-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4px;
  gap: 8px;
}

.dga-form-footer .dga-form-text {
  margin-top: 0;
  flex: 1;
}

/* ── Character Counter ───────────────────────────────────────────────────── */
.dga-char-counter {
  font-size: 12px;
  line-height: 18px;
  color: var(--light-gray);
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  transition: color 0.2s ease;
}

.dga-char-counter.near-limit {
  color: var(--danger-red);
  font-weight: 600;
}

/* ── Feedback Comments Box ──────────────────────────────────────────────── */
.dga-comments-box {
  width: 100%;
  direction: inherit;
  text-align: start;
}

/* ── DGA Textarea field (matches .dga-textarea__field spec exactly) ──────── */
/* Border / background live on .dga-field-wrap:has(.dga-textarea) wrapper    */
.dga-textarea,
.dga-textarea::placeholder,
.dga-comments-box .form-label {
  font: 400 16px / 24px "IBM Plex Sans Arabic", sans-serif !important;
}

.dga-textarea {
  background-color: transparent;
  /* DGA spec: transparent */
  border: 0;
  /* DGA spec: border 0 — wrapper owns it */
  outline: 0;
  /* DGA spec: outline 0 */
  width: 100%;
  height: 100%;
  color: var(--dga-black);
  /* ≈ --form-field-text-filled */
  padding: 12px 16px;
  /* ≈ --spacing-lg --spacing-xl */
  resize: none;
  position: relative;
  /* DGA spec */
  min-height: 100px;
  /* ~4 visible lines */
  overflow-y: auto;
  direction: inherit;
  text-align: start;
}

/* ── Wrapper carries all visual states (DGA: .dga-textarea wrapper div) ──── */
.dga-field-wrap:has(.dga-textarea) {
  border: 1px solid var(--border-color1);
  /* Default */
  border-radius: 8px;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  /* clips ::after to rounded corners */
}

/* ── Hovered: border slightly darker ───────────────────────────────────────── */
.dga-field-wrap:has(.dga-textarea):hover {
  border-color: var(--border-color2);
  /* #D2D6DB */
}

/* ── Pressed: border darker, ::after starts animating (via :focus-within) ── */
.dga-field-wrap:has(.dga-textarea):active {
  border-color: var(--border-color2);
  box-shadow: none;
}

/* ── Focused: border stays default gray — dark bottom line (::after) is the
   focus indicator per DGA spec. No green border/ring on textarea. ────────── */
.dga-field-wrap:has(.dga-textarea):focus-within {
  border-color: var(--border-color2);
  /* slightly darker, stays gray */
  box-shadow: none;
  outline: none;
}

/* ── Disabled: muted bg, default border ──────────────────────────────────── */
.dga-field-wrap:has(.dga-textarea:disabled) {
  background-color: var(--gray-bg2);
  /* #F3F4F6 */
  border-color: var(--border-color1);
  cursor: not-allowed;
}

/* Disabled: no animated line */
.dga-field-wrap:has(.dga-textarea:disabled)::after {
  display: none;
}

/* ── Read-only: lighter bg, default border ───────────────────────────────── */
.dga-field-wrap:has(.dga-textarea[readonly]) {
  background-color: var(--gray-bg);
  /* #F9FAFB */
  border-color: var(--border-color1);
}

/* Read-only: no animated line */
.dga-field-wrap:has(.dga-textarea[readonly])::after {
  display: none;
}

/* ── Error: red border, red ::after line ─────────────────────────────────── */
.dga-field-wrap:has(.dga-textarea.is-invalid) {
  border-color: var(--danger-red);
  /* #B42318 */
}

.dga-field-wrap:has(.dga-textarea.is-invalid)::after {
  background-color: var(--danger-red);
  /* red animated line on error */
}

.dga-field-wrap:has(.dga-textarea.is-invalid):focus-within {
  border-color: var(--danger-red);
  box-shadow: none;
}

/* ── Field-level state styles (color, cursor — wrapper handles bg/border) ── */
.dga-textarea:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
  opacity: 1;
}

.dga-textarea:disabled::placeholder {
  color: var(--border-color2);
}

.dga-textarea[readonly] {
  color: var(--dark-gray);
  cursor: default;
}

/* ── Placeholder ─────────────────────────────────────────────────────────── */
.dga-textarea::placeholder {
  color: var(--gray-400);
  text-align: start;
}

/* ── Label (DGA: 14px, semibold, #161616) ────────────────────────────────── */
.dga-comments-box .form-label {
  font-size: var(--fs-14);
  font-weight: 600 !important;
  color: var(--dga-black);
  /* #161616 */
  display: block;
  text-align: start;
  margin-bottom: 4px;
}

/* ── Helper / Hint Text (DGA: 12px, #6C737F, ⓘ icon aligned) ───────────── */
.dga-form-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--light-gray);
  /* #6C737F */
  margin-top: 4px;
  text-align: start;
}

/* Error helper text: red */
.dga-form-text.is-invalid,
.dga-invalid-feedback {
  color: var(--danger-red);
  /* #B42318 */
}

/* Disabled helper text: extra muted */
.dga-form-field:has(:disabled) .dga-form-text,
.dga-form-text.is-disabled {
  opacity: 0.45;
}

/* ── Feedback Section Background: white (matches DGA white section bg) ───── */
.page-question-default,
.page-question-yes,
.page-question-no,
.page-question-successfull {
  /* background-color: var(--white) !important; */
  background: var(--gray-50) !important;
}

/* ── Ensure No section matches Yes section outer spacing ─────────────────── */
.page-question-no {
  padding-bottom: 0 !important;
}

/* ── Feedback close button states ─────────────────────────────────────────── */
.close-button {
  border-radius: 6px;
  padding: 6px 8px;
  transition: background-color 0.2s ease;
  text-decoration: none !important;
}

.close-button:hover {
  background-color: var(--gray-100);
  text-decoration: none !important;
}

.close-button:active {
  background-color: var(--gray-200);
  text-decoration: none !important;
}

.close-button:focus,
.close-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Feedback Bottom Row (DGA: justify-between, info left, submit right) ─── */
/*
 * DGA Tailwind: "w-full flex justify-between md:items-center max-md:flex-col"
 * Left  → info text + links in one <p>
 * Right → إرسال primary button
 */
.dga-feedback-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
  flex-wrap: nowrap;
}

.dga-feedback-info-text {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--dga-black);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-block: 8px;
  /* matches DGA py-2 */
}

.dga-feedback-info-text a {
  color: var(--primary-green) !important;
  text-decoration: none;
}

.dga-feedback-info-text a:hover {
  text-decoration: underline !important;
}

/* On mobile: stack vertically, button full-width below the info text */
@media (max-width: 767px) {
  .dga-feedback-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ── Feedback Two-Column Layout (DGA Unified Design System) ─────────────── */
/*
 * Matches DGA platformscode-react Feedback component:
 *   Tailwind: "w-full flex justify-between max-md:flex-col max-md:gap-8"
 *
 *  Desktop: [heading + checkboxes] | [textarea]
 *  Mobile:  stacked vertically
 */
.dga-feedback-two-col {
  display: flex;
  flex-direction: row-reverse;
  /* textarea LEFT, checkboxes RIGHT */
  align-items: flex-start;
  /* each column its own height — keeps textarea consistent between Yes/No */
  gap: 32px;
  width: 100%;
}

/* Equal columns */
.dga-feedback-questions,
.dga-feedback-textarea-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Textarea column: flex column so comments box fills height */
.dga-feedback-textarea-col {
  display: flex;
  flex-direction: column;
}

/* Comments box fills the column and aligns flush with the first checkbox */
.dga-feedback-textarea-col .dga-comments-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Field wrapper grows to fill comments box */
.dga-feedback-textarea-col .dga-field-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dga-feedback-textarea-col .dga-field-wrap:has(.dga-textarea) {
  flex: 1;
}

/* Textarea itself grows to fill the wrapper */
.dga-feedback-textarea-col .dga-textarea {
  flex: 1;
  min-height: 150px;
  /* consistent minimum so textarea looks the same in both Yes and No states */
}

/* RTL pages: row (natural RTL right→left flow)
   → questions on RIGHT, textarea on LEFT                      */
html[dir="rtl"] .dga-feedback-two-col {
  flex-direction: row;
}

@media (max-width: 767.98px) {

  .dga-feedback-two-col,
  html[dir="rtl"] .dga-feedback-two-col {
    flex-direction: column;
    gap: 24px;
  }

  .dga-feedback-questions,
  .dga-feedback-textarea-col {
    width: 100%;
  }

  .dga-feedback-textarea-col .dga-textarea {
    min-height: 100px;
    /* restore on mobile */
  }
}

/* ── Button Sizes & States (DGA Unified Design System) ──────────────────── */
/*
 * DGA button label weight: SemiBold (600)
 * DGA padding scale:
 *   btn-sm  → 8px 16px
 *   btn-md  → 12px 24px  (default)
 *   btn-lg  → 16px 24px
 * All six states: Default / Hover / Pressed / Focused / Disabled / Selected
 */

/* Label font-weight for all buttons */
.btn,
.btn-green,
.btn-primary,
.btn-gray,
.btn-darker-gray,
.btn-outline-primary {
  font-weight: 600 !important;
  letter-spacing: 0;
}

/* ── DGA Button Sizes ─────────────────────────────────────────────────────
 *  sm  → 8px 16px  / 14px / line-height 20px
 *  md  → 12px 20px / 16px / line-height 24px  (explicit .btn-md only)
 *  lg  → 16px 24px / 18px / line-height 28px  (explicit .btn-lg only)
 *
 *  Default for .btn-green (read-more / navigation buttons): sm
 *  To get md size, add class "btn-md" explicitly on the element.
 * ────────────────────────────────────────────────────────────────────── */

/* All green / primary buttons → DGA sm by default */
.btn-green,
.btn-primary,
.btn-gray,
.btn-darker-gray {
  padding: 8px 16px !important;
  font-size: var(--fs-14) !important;
  line-height: 20px !important;
}

/* Explicit size override: md */
.btn-md {
  padding: 12px 20px !important;
  font-size: var(--fs-16) !important;
  line-height: 24px !important;
}

/* Explicit size override: lg */
.btn-lg {
  padding: 16px 24px !important;
  font-size: var(--fs-18) !important;
  line-height: 28px !important;
}

/* Bootstrap .btn-sm maps to DGA sm (same token) */
.btn-sm {
  padding: 8px 16px !important;
  font-size: var(--fs-14) !important;
  line-height: 20px !important;
}

/* Default state — colour tokens already set by .btn-green / .btn-primary in main-style.css */

/* Hover state — slight darken (keeps DGA secondary-green for primary buttons) */
.btn-green:hover,
.btn-primary:hover {
  background-color: var(--secondary-green) !important;
  color: var(--white) !important;
}

/* Pressed / Active state */
.btn-green:active,
.btn-primary:active,
.btn-green.pressed,
.btn-primary.pressed {
  background-color: var(--darker-green) !important;
  transform: scale(0.97);
  color: var(--white) !important;
}

/* Focus state (keyboard) */
.btn-green:focus-visible,
.btn-green:focus,
.btn-primary:focus-visible,
.btn-primary:focus {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 3px !important;
  /* box-shadow: 0 0 0 4px var(--dga-black) !important; */
}

/* Disabled state */
.btn-green:disabled,
.btn-primary:disabled,
.btn-green.disabled,
.btn-primary.disabled,
.btn-green.disable,
.btn-primary.disable {
  background-color: var(--border-color1) !important;
  color: var(--gray-400) !important;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selected / Active nav state */
.btn-green.active,
.btn-primary.active {
  background-color: var(--darker-green) !important;
  color: var(--white) !important;
}

/* ── Card Shadows (DGA Unified Design System) ────────────────────────────── */
/*
 * DGA shadow tokens (already defined in main-style.css):
 *   Resting  : shadows-shadow-sm  → 0px 1px 3px 0px #1018281a
 *   Hover    : shadows-shadow-md  → 0px 4px 8px -2px #1018281a + 0px 2px 4px -2px #1018280f
 *
 * .dga-card          — interactive card: resting sm shadow + md shadow on hover/focus
 * .dga-card-static   — informational / non-clickable card: sm shadow, no hover effect
 */

.dga-card {
  border: 1px solid var(--border-color2);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.dga-card:hover,
.dga-card:focus-within {
  box-shadow: 0px 4px 8px -2px var(--card-shadow1),
    0px 2px 4px -2px var(--card-shadow2);
  transform: translateY(-2px);
}

.dga-card:active {
  transform: translateY(0);
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
}

/* ── Footer Links — DGA Link States ──────────────────────────────────────── */
/* Group links (main nav): no underline by default */
.footer-link,
.govsa-footer-bg .quick-links li a {
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Official/policy links (bottom row): underlined by default per DGA spec */
.footer-other_links li a {
  text-decoration: underline !important;
  transition: color 0.2s ease;
}

/* Hover: underline appears, slightly darker */
.footer-link:hover,
.footer-other_links li a:hover,
.govsa-footer-bg .quick-links li a:hover {
  text-decoration: underline !important;
  color: var(--dga-black) !important;
}

/* Pressed/Active */
.footer-link:active,
.footer-other_links li a:active,
.govsa-footer-bg .quick-links li a:active {
  color: var(--darker-green) !important;
  text-decoration: underline !important;
}

/* Visited: stay same color */
.footer-link:visited,
.footer-other_links li a:visited,
.govsa-footer-bg .quick-links li a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* Focused: 2px solid black (DGA spec) */
.footer-link:focus,
.footer-link:focus-visible,
.footer-other_links li a:focus,
.footer-other_links li a:focus-visible,
.govsa-footer-bg .quick-links li a:focus,
.govsa-footer-bg .quick-links li a:focus-visible {
  outline: 2px solid var(--dga-black);
  outline-offset: 2px;
  border-radius: 2px;
  /* text-decoration: none !important; */
}

/* Disabled */
.footer-link[aria-disabled="true"],
.footer-link.disabled-link,
.footer-other_links li a[aria-disabled="true"] {
  color: var(--gray-400) !important;
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none !important;
}

/* ── Footer Developer Credit ─────────────────────────────────────────────── */
.footer-developer-credit {
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.75;
  margin: 2px 0 0;
}

/* ── Footer Group Title — DGA: semibold (600) ────────────────────────────── */
.govsa-footer-bg .quick-links li:first-child {
  font-weight: 600 !important;
  margin-bottom: 4px;
}

/* ── Footer Social Icon Buttons — 6 states ─────────────────────────────── */
/*
 *   Default   #F3F4F6 bg · #D1D5DB border  (--gray-100 / --gray-300)
 *   Hovered   #E5E7EB bg · #9CA3AF border  (--gray-200 / --gray-400)
 *   Pressed   #D1D5DB bg              (--border-color2)
 *   Focused   3px outline · 2px offset  (primary-green — DGA brand)
 *   Selected  primary-green bg · white icon  (accessibility toggles only)
 *   Disabled  #F9FAFB bg · #E5E7EB border · opacity 0.5  (--gray-50 / --gray-200)
 */

/* Hovered */
.footer-social__icon:hover {
  background: var(--gray-200);
  /* #E5E7EB                              */
  border-color: var(--gray-400);
  /* #9DA4AE ≈ tool-btn #9CA3AF          */
  text-decoration: none !important;
}

/* Pressed */
.footer-social__icon:active {
  background: var(--border-color2);
  /* #D2D6DB ≈ tool-btn #D1D5DB          */
  text-decoration: none !important;
}

/* Focused — DGA black outline */
.footer-social__icon:focus,
.footer-social__icon:focus-visible {
  outline: 2px solid var(--dga-black);
  outline-offset: 2px;
  text-decoration: none !important;
}

/* Selected — aria-pressed="true": green fill, white icon (accessibility toggles) */
.footer-social__icon[aria-pressed="true"],
.footer-social__icon.active {
  background: var(--primary-green);
  border-color: var(--primary-green);
}

.footer-social__icon[aria-pressed="true"] img,
.footer-social__icon.active img {
  filter: brightness(0) invert(1);
}

.footer-social__icon[aria-pressed="true"] span,
.footer-social__icon.active span {
  color: var(--white);
}

/* Disabled */
.footer-social__icon[aria-disabled="true"],
.footer-social__icon.disabled {
  background: var(--gray-50);
  /* #F9FAFB                              */
  border: 1px solid var(--gray-200);
  /* #E5E7EB                              */
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Social media links (Instagram / LinkedIn / X) — no interactive states ── */
/* Overrides all hover/active/focus inherited from .footer-social__icon        */
.footer-social__link:hover,
.footer-social__link:active,
.footer-social__link:focus,
.footer-social__link:focus-visible {
  background: var(--gray-100) !important;
  /* stays at default — no state change */
  border-color: var(--gray-300) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Download button (btn-darker-gray) — DGA size sm + states ────────────── */
/* Override Bootstrap py-2 px-4 — make smaller per DGA button sm spec */
.btn-darker-gray {
  padding: 6px 14px !important;
  font-size: var(--fs-14) !important;
  font-weight: 600 !important;
  line-height: 20px;
}

.btn-darker-gray:active {
  background-color: var(--darker-green) !important;
  color: var(--white) !important;
}

.btn-darker-gray:focus,
.btn-darker-gray:focus-visible {
  background-color: var(--primary-green) !important;
  border: 2px solid var(--white) !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 0 !important;
  color: var(--white) !important;
}

/* ── Star Rating — custom color #DBA102 ─────────────────────────────────── */
/* Size: 48×48 (DGA spec), gap: 4px (already on .rating) */

/* Hover: lighter preview (before selection) */
.star.hover path:not(.half),
.star.half-hover path:not(.half),
.star.half-hover .half {
  fill: #DBA102 !important;
  opacity: 0.75;
  filter: drop-shadow(0px 4px 8px rgba(219, 161, 2, 0.2));
}

/* Locked (selected) */
.star.locked path:not(.half) {
  fill: #DBA102 !important;
  opacity: 1;
  filter: none;
}

/* Half-locked: half filled */
.star.half-locked .half {
  fill: #DBA102 !important;
  opacity: 1;
  filter: none;
}

.star.half-locked path:not(.half) {
  fill: var(--border-color1) !important;
}

/* Pressed — DGA "Pressed" state: gray circular bg, star goes muted */
.rating button:active {
  background-color: var(--gray-bg2) !important;
}

.rating button:active path:not(.half) {
  fill: var(--border-color2) !important;
  filter: none;
}

/* Focus — keyboard accessibility: black outline */
.rating button:focus,
.rating button:focus-visible {
  /* outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px; */
  border-radius: 50%;
}

/* Non-interactive / informational card — no hover animation */
.dga-card-static {
  border: 1px solid var(--border-color2);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DGA CARD COMPONENT — Platforms Code Design System
   States: Default / Hovered / Focused / Disabled
   Variants: with-shadow / without-shadow / with-image / with-content
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * DGA Card States (Platforms Code):
 *   Interactive cards  — contain .stretched-link → cursor pointer + hover/focus effects
 *   Default/static cards — no .stretched-link → no hover effects (DGA: default card type)
 */

/* Transition on all card variants (harmless on static cards) */
.card.hcis-radius,
.card.card-border,
.news-card.card,
.card.green-card {
  transition: box-shadow 0.2s ease;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD INTERACTION STATES — DGA rules
   • Card with button (no stretched-link) → button gets states, card stays static
   • Card with arrow (.card-arrow-link) OR button-as-stretched-link → card gets states
   States: Hover (shadow-md) | Active (shadow-sm) | Focus-within (outline)
   ══════════════════════════════════════════════════════════════════════════ */

/* Cursor pointer on all interactive cards */
.card.hcis-radius:has(.stretched-link),
.card.card-border:has(.stretched-link),
.news-card.card:has(.stretched-link),
.card.green-card:has(.stretched-link) {
  cursor: pointer;
}

/* Hover — shadow elevates */
.card.hcis-radius:has(.stretched-link):hover,
.card.card-border:has(.stretched-link):hover,
.news-card.card:has(.stretched-link):hover {
  background-color: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
  box-shadow: 0px 4px 8px -2px var(--card-shadow1),
    0px 2px 4px -2px var(--card-shadow2) !important;
}

/* Active / Pressed — shadow drops back */
.card.hcis-radius:has(.stretched-link):active,
.card.card-border:has(.stretched-link):active,
.news-card.card:has(.stretched-link):active {
  box-shadow: 0px 1px 3px 0px var(--card-shadow1) !important;
  transform: scale(0.99);
}

/* Focus-within — 2px dga-black outline (keyboard nav) */
.card.hcis-radius:has(.stretched-link):focus-within,
.card.card-border:has(.stretched-link):focus-within,
.news-card.card:has(.stretched-link):focus-within {
  outline: 2px solid var(--dga-black);
  outline-offset: 0px;
  border: 1px solid transparent;
  box-shadow: 0px 1px 3px 0px var(--card-shadow1);
  border-radius: 8px;
}

/* ── Arrow cards (.card-arrow-link + stretched-link) ── */
/* State is on the CARD, not on the arrow itself */
/* position: relative makes the card the bounding box for the stretched overlay */
.card:has(.card-arrow-link) {
  position: relative;
  cursor: pointer;
}

/* Replicate Bootstrap stretched-link — makes the whole card clickable */
.card-arrow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hover */
.card:has(.card-arrow-link):hover {
  background-color: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
  box-shadow: 0px 4px 8px -2px var(--card-shadow1),
    0px 2px 4px -2px var(--card-shadow2) !important;
}

/* Active / Pressed */
.card:has(.card-arrow-link):active {
  box-shadow: 0px 1px 3px 0px var(--card-shadow1) !important;
  transform: scale(0.99);
}

/* Focus — outline on card when arrow link is focused (click or keyboard) */
.card:has(.card-arrow-link:focus),
.card:has(.card-arrow-link:focus-visible) {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 0px;
  border-radius: 8px;
}

/* Arrow element itself — suppress its own outline, card shows it instead */
.card-arrow-link:focus,
.card-arrow-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Default (static/informational) cards — no interactive states ── */
/* Cards without .stretched-link get no hover shadow or focus ring */

/* Disabled state */
.card[aria-disabled="true"],
.card.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* DGA Card with shadow (resting: sm shadow, no border) */
.card.card--with-shadow,
.card.card-border-shadow {
  box-shadow: 0px 1px 3px 0px var(--card-shadow1) !important;
  border: none !important;
}

/* DGA Card without shadow */
.card.card--no-shadow {
  box-shadow: none !important;
  border: 1px solid var(--border-color2);
}

/* DGA Card title — text-lg-bold (18px semibold); no text-transform (no "cases") */
.card .card-body h4,
.card .card-body h5,
.card .card-body .card-title {
  text-transform: none !important;
  font-weight: 600;
}

/* DGA Card description — text-md-regular (16px 400) */
.card .card-body p.card-text,
.card .card-body .card-desc {
  font-size: var(--fs-16);
  font-weight: 400;
  color: var(--dark-gray);
}

/* DGA Card image — fill container, rounded top corners */
.card .card-body img:first-child,
.card>img:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
  object-fit: cover;
}

/* DGA Card action area (dual buttons: secondary-outline + primary) */
.card .card__action {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.card .card__action .btn-secondary-outline {
  background: transparent;
  border: 1.5px solid var(--primary-green);
  color: var(--primary-green);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: var(--fs-14);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card .card__action .btn-secondary-outline:hover {
  background-color: var(--light-green-bg);
  color: var(--primary-green);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DGA NAVIGATION HEADER — Platforms Code Design System
   States: Default / Hovered / Pressed / Focused / Disabled
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * The project uses Bootstrap navbar with:
 *   .hcis-main-header-wrapper → header container (72px)
 *   .hcis-main-menu-wrapper   → nav bar inner
 *   li.nav-item               → each nav item
 *   a.nav-link                → item anchor
 *   .hcis-main-menu-wrapper .dropdown-menu → sub-menu panel
 *
 * Mapping to DGA:
 *   header-menu__item         → li.nav-item
 *   header-menu__item--active → li.nav-item.active (already green bg)
 *   header-nav__actions       → .header-search-lang-side
 */

/* Dropdown open — non-current-page: light gray bg + dark bottom bar */
.hcis-main-header-wrapper li.nav-item:not(.current-page).show a.nav-link {
  background-color: var(--gray-100) !important;
  color: var(--darker-dray) !important;
  border-radius: var(--radius);
}

.hcis-main-header-wrapper li.nav-item:not(.current-page) a.nav-link[aria-expanded="true"] {
  background-color: #E5E7EB !important;
  color: var(--darker-dray) !important;
  border-radius: var(--radius);
}

.hcis-main-header-wrapper li.nav-item:not(.current-page).show a.nav-link::after,
.hcis-main-header-wrapper li.nav-item:not(.current-page) a.nav-link[aria-expanded="true"]::after {
  background-color: var(--dga-black) !important;
}

/* Hover — DGA: light gray bg, dark text on non-active items */
.hcis-main-header-wrapper li.nav-item:not(.active) a.nav-link:hover,
.header-search-lang-side a:hover {
  background-color: var(--gray-100) !important;
  color: var(--darker-dray) !important;
  border-radius: var(--radius);
}

/* Pressed — DGA: slightly darker light gray, dark text on non-active items */
.hcis-main-header-wrapper li.nav-item:not(.active) a.nav-link:active,
.header-search-lang-side a:active {
  background-color: var(--gray-200) !important;
  outline: none;
  border-radius: var(--radius);
  color: var(--darker-dray) !important;
}

/* Focus — DGA: background transparent, outline 2px solid black */
/* .hcis-main-header-wrapper li.nav-item a.nav-link:focus, */
.hcis-main-header-wrapper li.nav-item a.nav-link:focus-visible,
/* .header-search-lang-side a:focus, */
.header-search-lang-side a:focus-visible {
  background-color: white !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-radius: 4px;
  color: var(--darker-dray);
}

.hcis-main-header-wrapper li.nav-item a.nav-link:focus,
.header-search-lang-side a:focus,
.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.show:focus {
  outline: 0 !important;
}


/* Disabled nav item */
.hcis-main-header-wrapper li.nav-item.disabled>a,
.hcis-main-header-wrapper li.nav-item[aria-disabled="true"]>a {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── DGA Sub-menu (dropdown) — Simple List variant ───────────────────────── */

/* Dropdown panel — DGA: white bg, subtle shadow, rounded */
.hcis-main-menu-wrapper .dropdown-menu {
  border-radius: 8px !important;
  border: 1px solid var(--border-color2) !important;
  box-shadow: 0px 4px 8px -2px var(--card-shadow1),
    0px 2px 4px -2px var(--card-shadow2) !important;
  padding: 8px !important;
}

/* Dropdown section heading — DGA: semibold, brand green */
.hcis-main-menu-wrapper .dropdown-menu h6 {
  font-size: var(--fs-14) !important;
  font-weight: 600 !important;
  color: var(--primary-green) !important;
  padding: 8px 12px 4px !important;
  margin-bottom: 2px;
}

/* Dropdown link item — DGA: 14px/500, gray, no underline by default */
.hcis-main-menu-wrapper .dropdown-menu p a {
  font-size: var(--fs-14) !important;
  font-weight: 500 !important;
  color: var(--dark-gray) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: block;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Dropdown item hover — DGA: light gray bg, green text */
.hcis-main-menu-wrapper .dropdown-menu p a:hover {
  background-color: var(--gray-bg2) !important;
  color: var(--primary-green) !important;
  text-decoration: none !important;
}

/* Dropdown item focus */
.hcis-main-menu-wrapper .dropdown-menu p a:focus,
.hcis-main-menu-wrapper .dropdown-menu p a:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dropdown item pressed */
.hcis-main-menu-wrapper .dropdown-menu p a:active {
  background-color: var(--light-green-bg) !important;
  color: var(--secondary-green) !important;
}

/* ── Mobile offcanvas menu — DGA compliance ──────────────────────────────── */

/* Mobile nav — each direct link transitions its own text color */
.hcis-offcanvas li.nav-item>a.nav-link {
  transition: color 0.2s ease;
}

/* Mobile nav item hover — direct link only, not sub-menu items */
.hcis-offcanvas li.nav-item:not(.active)>a.nav-link:hover {
  color: var(--primary-green) !important;
  text-decoration: underline;
}

/* Mobile nav item focus — DGA: 2px solid black */
/* .hcis-offcanvas li.nav-item a.nav-link:focus, */
.hcis-offcanvas li.nav-item a.nav-link:focus-visible {
  outline: 2px solid var(--dga-black);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile nav active item — direct child only, does NOT bleed into sub-menu items */
.hcis-offcanvas li.nav-item.active>a.nav-link {
  /* color: var(--primary-green) !important; */
  font-weight: 600 !important;
}

/* Mobile nav sub-menu active item — per individual sub-item */
.hcis-offcanvas .offcanvas-menu-list li.active a {
  color: var(--primary-green) !important;
  font-weight: 600 !important;
}

/* Mobile nav sub-menu item hover */
.hcis-offcanvas .offcanvas-menu-list li:not(.active) a:hover {
  color: var(--primary-green) !important;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   DGA Link Component — Platforms Code Design System
   Source: design.dga.gov.sa/guidelines/components/actions/link
   Classes: .link  .link--{sm|md|lg}  .link--{brand|neutral|destructive}
   ══════════════════════════════════════════════════════════════════════════ */

/* Base */
.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline !important;
  /* DGA: underline required for accessibility */
  font-weight: 500;
  transition: color 0.2s ease;
  cursor: pointer;
  border-radius: 4px;
}

/* Sizes */
.link--sm {
  font-size: var(--fs-14);
  line-height: 20px;
}

.link--md {
  font-size: var(--fs-16);
  line-height: 24px;
}

.link--lg {
  font-size: var(--fs-18);
  line-height: 28px;
}

/* ── Brand (primary green) ── */
.link--brand {
  color: var(--primary-green) !important;
}

.link--brand:hover {
  color: var(--secondary-green) !important;
}

.link--brand:active {
  color: var(--darker-green) !important;
}

.link--brand:focus,
.link--brand:focus-visible {
  color: var(--primary-green) !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
}

.link--brand:visited {
  color: var(--secondary-green) !important;
}

.link--brand[aria-disabled="true"],
.link--brand.disabled {
  color: var(--gray-400) !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

/* ── Neutral (gray) ── */
.link--neutral {
  color: var(--dark-gray) !important;
}

.link--neutral:hover {
  color: var(--gray) !important;
}

.link--neutral:active {
  color: var(--dga-black) !important;
}

.link--neutral:focus,
.link--neutral:focus-visible {
  color: var(--dark-gray) !important;
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
}

.link--neutral:visited {
  color: var(--light-gray) !important;
}

.link--neutral[aria-disabled="true"],
.link--neutral.disabled {
  color: var(--gray-400) !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

/* ── Destructive (red) ── */
.link--destructive {
  color: var(--danger-red) !important;
}

.link--destructive:hover {
  color: var(--error-800) !important;
  /* #912018 — DGA error-800 */
}

.link--destructive:active {
  color: var(--error-900) !important;
  /* #7A271A — DGA error-900 */
}

.link--destructive:focus,
.link--destructive:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
}

/* ── External link — opens in new tab ──
   DGA: indicate new-tab behavior with an icon + rel="noopener noreferrer" */
.link[target="_blank"] .link__label::after,
.link--external .link__label::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 4px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='15 3 21 3 21 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='10' y1='14' x2='21' y2='3' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Override global outline:0 on <a> for .link focus */
a.link:focus,
a.link:focus-visible {
  outline: 2px solid var(--dga-black) !important;
  outline-offset: 2px;
}