@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/ibm-plex-sans-arabic/arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/ibm-plex-sans-arabic/arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/ibm-plex-sans-arabic/latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/ibm-plex-sans-arabic/latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green-50: #EAF8F1;
  --green-100: #D3F1E1;
  --green-200: #A8E4C5;
  --green-300: #79D6A5;
  --green-400: #54C08A;
  --green-500: #1B8354;
  --green-600: #106440;
  --green-700: #074D31;

  --neutral-0: #FFFFFF;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F5F7;
  --neutral-200: #E9ECEF;
  --neutral-300: #D5D9DD;
  --neutral-400: #8B949E;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-800: #1F2937;

  --color-primary: var(--green-500);
  --color-primary-hover: var(--green-600);
  --color-primary-active: var(--green-700);
  --color-text: var(--neutral-800);
  --color-text-muted: var(--neutral-600);
  --color-border: var(--neutral-300);
  --color-surface: var(--neutral-0);
  --color-page: var(--neutral-50);

  --color-danger: #B42318;
  --color-danger-bg: #FEF3F2;
  --color-danger-border: #FECDCA;
  --color-warning: #93370D;
  --color-warning-bg: #FFFAEB;
  --color-warning-border: #FEDF89;

  --font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;

  --fs-xs: 0.9375rem;
  --fs-sm: 1rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  --fs-3xl: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  --lh-body: 1.85;
  --lh-tight: 1.45;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 6px 24px rgba(7, 77, 49, 0.08);
  --focus-ring: 0 0 0 0.25rem rgba(27, 131, 84, 0.3);

  --control-height: 3.25rem;

  --bs-body-font-family: var(--font-family);
  --bs-body-font-size: var(--fs-base);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-page);
  --bs-border-color: var(--color-border);
  --bs-primary: var(--green-500);
  --bs-primary-rgb: 27, 131, 84;
  --bs-link-color: var(--green-600);
  --bs-link-color-rgb: 16, 100, 64;
  --bs-link-hover-color: var(--green-700);
  --bs-link-hover-color-rgb: 7, 77, 49;
  --bs-secondary-color: var(--neutral-600);
  --bs-focus-ring-color: rgba(27, 131, 84, 0.3);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-emphasis-color: var(--neutral-800);
  --bs-heading-color: var(--neutral-800);
}

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-page);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

b, strong, th, dt, optgroup, legend, label, summary,
.badge, .alert-link, .fw-bold, .fw-bolder, .fw-semibold,
.btn, .nav-link, .navbar-brand, .dropdown-item, .dropdown-header,
.toast-header, .popover-header, .breadcrumb-item, .form-label {
  font-weight: var(--fw-regular);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.modal-title, .offcanvas-title, .fw-medium {
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--neutral-800);
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4 { font-size: var(--fs-md); }

p {
  margin-block-end: 0.75rem;
}

a {
  color: var(--green-600);
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--green-700);
}

:focus-visible {
  outline: 3px solid var(--green-400);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 2100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--green-700);
  color: var(--neutral-0);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 1rem;
  color: var(--neutral-0);
}

.app-main {
  min-height: 60vh;
}

.app-main:focus {
  outline: none;
}

.surface {
  background: var(--color-surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.page-section {
  padding-block: 2.5rem;
}

.page-section--tint {
  background: var(--green-50);
}

.section-heading {
  margin-block-end: 1.75rem;
  max-width: 46rem;
}

.section-heading__title {
  margin-block-end: 0.5rem;
}

.section-heading__text {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  margin: 0;
}

.btn {
  --bs-btn-font-weight: 400;
  --bs-btn-font-size: var(--fs-base);
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  font-weight: var(--fw-regular);
  border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-lg {
  --bs-btn-font-size: var(--fs-md);
  --bs-btn-padding-x: 1.85rem;
  --bs-btn-padding-y: 0.75rem;
  min-height: 3.5rem;
  border-radius: var(--radius-pill);
}

.btn-sm {
  --bs-btn-font-size: var(--fs-sm);
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.35rem;
  min-height: 2.75rem;
  border-radius: var(--radius-pill);
}

.btn-primary {
  --bs-btn-bg: var(--green-500);
  --bs-btn-border-color: var(--green-500);
  --bs-btn-color: var(--neutral-0);
  --bs-btn-hover-bg: var(--green-600);
  --bs-btn-hover-border-color: var(--green-600);
  --bs-btn-hover-color: var(--neutral-0);
  --bs-btn-active-bg: var(--green-700);
  --bs-btn-active-border-color: var(--green-700);
  --bs-btn-active-color: var(--neutral-0);
  --bs-btn-disabled-bg: var(--green-500);
  --bs-btn-disabled-border-color: var(--green-500);
  --bs-btn-disabled-color: var(--neutral-0);
  --bs-btn-focus-shadow-rgb: 27, 131, 84;
}

.btn-outline-primary {
  --bs-btn-color: var(--green-600);
  --bs-btn-border-color: var(--green-500);
  --bs-btn-hover-bg: var(--green-50);
  --bs-btn-hover-border-color: var(--green-600);
  --bs-btn-hover-color: var(--green-700);
  --bs-btn-active-bg: var(--green-100);
  --bs-btn-active-border-color: var(--green-700);
  --bs-btn-active-color: var(--green-700);
  --bs-btn-disabled-color: var(--green-600);
  --bs-btn-disabled-border-color: var(--green-300);
  --bs-btn-focus-shadow-rgb: 27, 131, 84;
  background: var(--neutral-0);
}

.btn-light {
  --bs-btn-bg: var(--neutral-100);
  --bs-btn-border-color: var(--neutral-200);
  --bs-btn-color: var(--neutral-800);
  --bs-btn-hover-bg: var(--neutral-200);
  --bs-btn-hover-border-color: var(--neutral-300);
  --bs-btn-hover-color: var(--neutral-800);
  --bs-btn-active-bg: var(--neutral-300);
  --bs-btn-active-border-color: var(--neutral-300);
}

.btn:disabled,
.btn.disabled,
.btn[aria-busy="true"] {
  opacity: 0.75;
  cursor: not-allowed;
}

.btn-icon {
  width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
  font-size: 1.15rem;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  background: var(--green-100);
  color: var(--green-700);
  border-color: var(--green-400);
}

.btn .spinner-border-sm {
  --bs-spinner-width: 1.15rem;
  --bs-spinner-height: 1.15rem;
  --bs-spinner-border-width: 0.18em;
}

.btn-close:focus {
  box-shadow: var(--focus-ring);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.pill--soft {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}

.badge-beta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  border: 1px dashed var(--green-400);
  font-size: var(--fs-xs);
  line-height: 1.7;
  white-space: nowrap;
}

.badge-beta--lg {
  font-size: var(--fs-sm);
  padding: 0.3rem 1rem;
  margin-block-end: 1rem;
}

.badge-beta--on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--green-100);
  border-color: var(--green-300);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.96);
  border-block-end: 1px solid var(--neutral-200);
  backdrop-filter: saturate(1.4) blur(8px);
}

.site-header .navbar {
  padding-block: 0.65rem;
}

.site-header__inner {
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--green-700);
  text-decoration: none;
}

.brand:hover {
  color: var(--green-700);
}

.brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  border: 1px solid var(--green-200);
  font-size: 1.2rem;
}

.brand__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.nav-toggle {
  margin-inline-start: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--neutral-200);
  color: var(--green-700);
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle:focus {
  box-shadow: var(--focus-ring);
}

.site-nav__title {
  font-size: var(--fs-lg);
  margin: 0;
}

.site-nav__list {
  gap: 0.25rem;
}

.site-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--neutral-800);
  font-size: var(--fs-base);
  background: none;
  border: 0;
}

.site-nav .nav-link i {
  color: var(--green-500);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  background: var(--green-50);
  color: var(--green-700);
}

.site-nav .nav-link.active {
  background: var(--green-50);
  color: var(--green-700);
  box-shadow: inset 0 0 0 1px var(--green-200);
}

.site-nav__menu {
  --bs-dropdown-link-active-bg: var(--green-50);
  --bs-dropdown-link-active-color: var(--green-700);
  --bs-dropdown-link-hover-bg: var(--green-50);
  --bs-dropdown-link-hover-color: var(--green-700);
  --bs-dropdown-font-size: var(--fs-base);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  border-color: var(--neutral-200);
  box-shadow: var(--shadow-md);
  min-width: 20rem;
}

.site-nav__menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  white-space: normal;
}

.site-nav__menu .dropdown-item i {
  width: 1.25rem;
  text-align: center;
  color: var(--green-500);
}

.dropdown-toggle::after {
  margin-inline-start: 0.4rem;
}

@media (min-width: 992px) {
  .site-nav {
    margin-inline-start: auto;
  }
}

@media (max-width: 991.98px) {
  .site-header__inner > .badge-beta {
    font-size: 0.8125rem;
    padding-inline: 0.6rem;
  }

  .site-nav .offcanvas-body {
    padding-block-start: 0.5rem;
  }

  .site-nav__list {
    width: 100%;
  }

  .site-nav .nav-link {
    width: 100%;
    min-height: 3.25rem;
    font-size: var(--fs-md);
  }

  .site-nav__menu {
    position: static;
    border: 0;
    box-shadow: none;
    padding-inline-start: 1rem;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .brand__text {
    font-size: var(--fs-base);
  }

  .brand__icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}

.hero {
  padding-block: 3rem 2.5rem;
  background:
    radial-gradient(60rem 22rem at 100% 0%, var(--green-50), transparent 70%),
    var(--neutral-0);
  border-block-end: 1px solid var(--neutral-200);
}

.hero__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero__title {
  margin-block-end: 1rem;
  color: var(--green-700);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 40rem;
  margin-block-end: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__stats {
  display: grid;
  gap: 1rem;
}

.hero__stats-note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--neutral-0);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-500);
  color: var(--neutral-0);
  font-size: 1.35rem;
}

.stat-card__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.stat-card__value {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--green-700);
  line-height: 1.3;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 992px) {
  .hero {
    padding-block: 4.5rem 4rem;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .hero__stats {
    grid-template-columns: 1fr 1fr;
  }

  .hero__stats-note {
    grid-column: 1 / -1;
  }
}

.calc-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.calc-card:hover,
.calc-card:focus-within {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.calc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-600);
  font-size: 1.35rem;
}

.calc-card__title {
  font-size: var(--fs-md);
  margin: 0.25rem 0 0;
}

.calc-card__title a {
  color: var(--neutral-800);
  text-decoration: none;
}

.calc-card__title a:focus-visible {
  outline: none;
}

.calc-card__title a:focus-visible::after {
  outline: 3px solid var(--green-400);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.calc-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
  flex: 1 1 auto;
}

.calc-card__ref {
  align-self: flex-start;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.steps__item {
  padding: 1.5rem;
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  border: 1px solid var(--green-100);
}

.steps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  margin-block-end: 0.75rem;
  font-size: 1.2rem;
}

.steps__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-block-end: 0.25rem;
}

.steps__text {
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.disclaimer {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem;
  border-color: var(--green-200);
  background: var(--green-50);
}

.disclaimer__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--neutral-0);
  color: var(--green-600);
  font-size: 1.35rem;
}

.disclaimer__title {
  font-size: var(--fs-lg);
}

.disclaimer p {
  color: var(--neutral-600);
}

@media (max-width: 575.98px) {
  .disclaimer {
    flex-direction: column;
    padding: 1.25rem;
  }
}

.calc-hero {
  padding-block: 1.5rem 2rem;
  background: var(--neutral-0);
  border-block-end: 1px solid var(--neutral-200);
}

.app-breadcrumb {
  --bs-breadcrumb-divider-color: var(--neutral-400);
  --bs-breadcrumb-item-active-color: var(--neutral-600);
  font-size: var(--fs-sm);
  margin-block-end: 1rem;
}

.app-breadcrumb a {
  text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
  float: inline-start;
  padding-inline-end: var(--bs-breadcrumb-item-padding-x);
}

.calc-hero__body {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.calc-hero__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  background: var(--green-500);
  color: var(--neutral-0);
  font-size: 1.6rem;
}

.calc-hero__title {
  font-size: var(--fs-2xl);
  color: var(--green-700);
  margin-block-end: 0.5rem;
}

.calc-hero__summary {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-block-end: 1rem;
  max-width: 48rem;
}

.calc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .calc-hero__icon {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.3rem;
  }
}

.calc-layout {
  padding-block: 2rem 3rem;
}

.calc-form {
  padding: 1.75rem;
}

@media (max-width: 575.98px) {
  .calc-layout {
    padding-inline: 0.75rem;
  }

  .calc-form {
    padding: 1.15rem;
    border-radius: var(--radius-md);
  }
}

@media (min-width: 992px) {
  .calc-layout__result {
    position: sticky;
    inset-block-start: 6rem;
  }
}

.form-section {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
  min-width: 0;
}

.form-section + .form-section {
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--neutral-200);
}

.form-section__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  float: none;
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--green-700);
  margin-block-end: 1.25rem;
}

.form-section__title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  font-size: 1.05rem;
}

.field {
  margin-block-end: 1.25rem;
  min-width: 0;
}

.row > * > .field {
  margin-block-end: 0;
}

.form-label {
  display: block;
  font-size: var(--fs-base);
  color: var(--neutral-800);
  margin-block-end: 0.45rem;
  line-height: 1.6;
}

.field__required {
  color: var(--color-danger);
  margin-inline-start: 0.15rem;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0.4rem 0 0;
  line-height: 1.7;
}

.field-error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  line-height: 1.7;
}

.field-error:not(:empty) {
  margin-block-start: 0.4rem;
}

.form-control,
.form-select {
  min-height: var(--control-height);
  font-size: var(--fs-md);
  color: var(--neutral-800);
  background-color: var(--neutral-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding-inline: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select {
  padding-inline-end: 2.75rem;
  background-position: left 1rem center;
}

.form-control::placeholder {
  color: var(--neutral-400);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--neutral-400);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--green-500);
  box-shadow: var(--focus-ring);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
  background-image: none;
  padding-inline-end: 1.25rem;
}

.form-select.is-invalid {
  padding-inline-end: 2.75rem;
  background-image: var(--bs-form-select-bg-img);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(180, 35, 24, 0.18);
}

.form-control[dir="ltr"] {
  text-align: right;
}

.input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-unit .form-control {
  padding-inline-end: 4.25rem;
}

.input-unit__suffix {
  position: absolute;
  inset-inline-end: 0.5rem;
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  font-size: var(--fs-sm);
  pointer-events: none;
}

.input-unit--narrow {
  max-width: 16rem;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  max-width: 100%;
}

.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.35rem 1.25rem;
  border-radius: var(--radius-pill);
  color: var(--neutral-600);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.segmented__option:hover {
  color: var(--green-700);
}

.btn-check:checked + .segmented__option {
  background: var(--neutral-0);
  color: var(--green-700);
  box-shadow: 0 1px 3px rgba(7, 77, 49, 0.18), inset 0 0 0 1px var(--green-300);
}

.btn-check:focus-visible + .segmented__option {
  outline: 3px solid var(--green-400);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .segmented {
    display: flex;
    border-radius: var(--radius-md);
  }

  .segmented__option {
    flex: 1 1 auto;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
}

.calendar-toggle {
  margin-block-end: 1.5rem;
}

.contract-calendar {
  margin-block-end: 1.5rem;
}

.choice-cards {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .choice-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.choice-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.choice-card:hover {
  border-color: var(--green-300);
}

.choice-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--neutral-800);
  font-weight: var(--fw-medium);
}

.choice-card__title i {
  color: var(--green-500);
}

.choice-card__text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.btn-check:checked + .choice-card {
  border-color: var(--green-500);
  background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--green-500);
}

.btn-check:focus-visible + .choice-card,
.btn-check:focus-visible + .choice-list__option {
  outline: 3px solid var(--green-400);
  outline-offset: 2px;
}

.contract-calendar.is-invalid .choice-card,
.choice-card.is-invalid {
  border-color: var(--color-danger);
}

.unpaid-leave__intro {
  margin-block: -0.5rem 1rem;
}

.unpaid-leave__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.unpaid-leave__grid .field {
  margin: 0;
}

.unpaid-leave__agreement {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-block-start: 1rem;
  padding-inline-start: 0;
}

.unpaid-leave__agreement .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.3rem 0 0;
}

.form-check-input:checked {
  background-color: var(--green-500);
  border-color: var(--green-500);
}

.form-check-input:focus {
  border-color: var(--green-500);
  box-shadow: var(--focus-ring);
}

.month-rows {
  display: grid;
  gap: 0.6rem;
}

.month-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.month-row .field {
  margin: 0;
}

.month-row__label {
  margin: 0;
  color: var(--neutral-600);
}

.month-row--head {
  font-size: var(--fs-xs);
  color: var(--neutral-500);
}

@media (max-width: 419.98px) {
  .month-row {
    grid-template-columns: 1fr 1fr;
  }

  .month-row__label,
  .month-row--head span:first-child {
    grid-column: 1 / -1;
  }

  .month-row--head span:first-child {
    display: none;
  }
}

.choice-list {
  display: grid;
  gap: 0.5rem;
}

.choice-list__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--neutral-0);
  cursor: pointer;
}

.choice-list__option i {
  width: 1.25rem;
  text-align: center;
  color: var(--green-500);
}

.btn-check:checked + .choice-list__option {
  border-color: var(--green-500);
  background: var(--green-50);
  color: var(--green-700);
}

.date-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.date-field__legend {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  padding: 0;
}

.date-field__system {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
  font-size: var(--fs-xs);
  line-height: 1.75;
  margin-inline-start: 0.35rem;
}

.date-field__controls {
  display: grid;
  grid-template-columns: minmax(5.25rem, 0.8fr) minmax(0, 1.6fr) minmax(6.25rem, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.date-field__controls .form-select {
  padding-inline: 0.95rem 2.25rem;
  background-position: left 0.75rem center;
  font-size: var(--fs-base);
}

.date-field__controls [hidden] {
  display: none;
}

.date-field__equivalent {
  margin: 0.45rem 0 0;
  font-size: var(--fs-xs);
  color: var(--green-700);
  min-height: 0;
}

.date-field__equivalent:empty {
  display: none;
}

.date-field__equivalent--error {
  color: var(--color-danger);
}

@media (max-width: 419.98px) {
  .date-field__controls {
    grid-template-columns: minmax(4.5rem, 0.9fr) minmax(0, 1.5fr) minmax(5.5rem, 1fr);
  }

  .date-field__open {
    grid-column: 1 / -1;
    width: 100%;
    border-radius: var(--radius-pill);
    height: 2.85rem;
    min-height: 2.85rem;
  }

  .date-field__open::after {
    content: "فتح التقويم";
    margin-inline-start: 0.5rem;
    font-family: var(--font-family);
    font-size: var(--fs-sm);
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--neutral-200);
}

.form-actions__submit {
  min-width: 11rem;
}

@media (max-width: 575.98px) {
  .form-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    margin-inline: -1.15rem;
    margin-block-end: -1.15rem;
    padding: 0.85rem 1.15rem;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 -6px 18px rgba(31, 41, 55, 0.06);
  }

  .form-actions .btn {
    flex: 1 1 auto;
  }

  .form-actions__submit {
    min-width: 0;
    flex-grow: 2;
  }
}

.result-panel {
  scroll-margin-top: 6rem;
}

.result-empty {
  padding: 2.25rem 1.75rem;
  text-align: center;
  border-style: dashed;
  border-color: var(--green-200);
  background: linear-gradient(180deg, var(--neutral-0), var(--green-50));
}

.result-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-600);
  font-size: 1.6rem;
  margin-block-end: 1rem;
}

.result-empty__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--green-700);
  margin-block-end: 0.5rem;
}

.result-empty__text {
  color: var(--color-text-muted);
  margin: 0;
}

.result-card {
  padding: 1.75rem;
  border-color: var(--green-200);
  box-shadow: var(--shadow-md);
  animation: result-in 0.35s ease;
}

.result-card:focus {
  outline: none;
}

.result-card:focus-visible {
  outline: 3px solid var(--green-400);
}

.result-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--green-600);
  font-size: var(--fs-sm);
  margin-block-end: 0.35rem;
}

.result-card__title {
  font-size: var(--fs-lg);
  margin-block-end: 0.75rem;
}

.result-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1.15rem 1.35rem;
  margin-block-end: 1rem;
  border-radius: var(--radius-md);
  background: var(--green-700);
  color: var(--neutral-0);
}

.result-amount__value {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 2.85rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.result-amount__currency {
  font-size: var(--fs-md);
  color: var(--green-100);
}

.result-highlight {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
  width: fit-content;
  max-width: 100%;
}

.result-pending {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  font-size: var(--fs-sm);
}

.result-pending i {
  margin-block-start: 0.35rem;
}

.result-section-title {
  font-size: var(--fs-md);
  margin: 1.5rem 0 0.75rem;
  color: var(--green-700);
}

.result-list {
  margin: 0;
}

.result-list__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-block-end: 1px dashed var(--neutral-200);
}

.result-list__row:last-child {
  border-block-end: 0;
}

.result-list dt {
  color: var(--neutral-600);
  font-weight: var(--fw-regular);
  min-width: 0;
}

.result-list dd {
  margin: 0;
  color: var(--neutral-800);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.result-list__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
}

@media (max-width: 419.98px) {
  .result-list__row {
    flex-direction: column;
    gap: 0.15rem;
  }

  .result-list dd {
    text-align: start;
    white-space: normal;
  }
}

.result-notices {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.notice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.notice i {
  margin-block-start: 0.35rem;
}

.notice--info {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-100);
}

.notice--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: 1.5rem;
}

.result-meta {
  margin: 1rem 0 0;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
}

@keyframes result-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(7, 77, 49, 0.2);
}

.app-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-block-end: 1px solid var(--neutral-200);
}

.app-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-lg);
  color: var(--green-700);
}

.app-modal .modal-title i {
  color: var(--green-500);
}

.app-modal .modal-header .btn-close {
  margin: 0;
  margin-inline-start: auto;
}

.app-modal .modal-body {
  padding: 1.5rem;
  font-size: var(--fs-md);
  line-height: 1.9;
}

.app-modal .modal-footer {
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  border-block-start: 1px solid var(--neutral-200);
}

.app-modal .modal-footer > * {
  margin: 0;
}

.modal-backdrop {
  --bs-backdrop-bg: #074D31;
  --bs-backdrop-opacity: 0.35;
}

@media (max-width: 575.98px) {
  .app-modal .modal-fullscreen-sm-down .modal-content {
    border-radius: 0;
  }

  .app-modal .modal-footer .btn {
    flex: 1 1 auto;
  }
}

.modal-section-title {
  font-size: var(--fs-md);
  color: var(--green-700);
  margin: 1.25rem 0 0.6rem;
}

.modal-section-title:first-child {
  margin-block-start: 0;
}

.modal-steps,
.modal-list {
  padding-inline-start: 1.4rem;
  margin-block-end: 1rem;
}

.modal-steps li,
.modal-list li {
  margin-block-end: 0.45rem;
}

.modal-steps li::marker {
  color: var(--green-500);
}

.modal-list li::marker {
  color: var(--green-400);
}

.modal-list--muted {
  color: var(--neutral-600);
}

.modal-disclaimer {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: var(--fs-sm);
}

.modal-disclaimer i {
  margin-block-start: 0.4rem;
  color: var(--green-600);
}

.details-amount {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
  font-size: var(--fs-md);
}

.details-table {
  --bs-table-bg: transparent;
  font-size: var(--fs-base);
  margin-block-end: 1rem;
}

.details-table th {
  color: var(--neutral-600);
  width: 55%;
}

.details-table td {
  color: var(--neutral-800);
}

.details-table th,
.details-table td {
  padding: 0.7rem 0.5rem;
  vertical-align: top;
  border-color: var(--neutral-200);
}

.rules-table td {
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.rules-table thead th {
  width: auto;
  color: var(--green-700);
  background: var(--green-50);
}

.rule-status {
  display: inline-block;
  padding: 0.1rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.rule-status--verified {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
}

.rule-status--open {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.picker-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  margin-block-end: 0.75rem;
}

.picker-nav .form-select {
  font-size: var(--fs-base);
  padding-inline: 0.95rem 2.25rem;
  background-position: left 0.75rem center;
}

.picker-system {
  margin: 0 0 0.75rem;
  font-size: var(--fs-sm);
  color: var(--green-700);
  text-align: center;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.picker-grid__row {
  display: contents;
}

.picker-grid__weekday {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
  padding-block: 0.25rem;
}

.picker-grid__day {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-size: var(--fs-base);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.picker-grid__alt {
  font-size: 0.6875rem;
  color: var(--neutral-500);
}

.picker-grid__day:hover {
  background: var(--green-50);
  border-color: var(--green-200);
}

.picker-grid__day:focus-visible {
  outline: 3px solid var(--green-400);
  outline-offset: 1px;
}

.picker-grid__day--today {
  border-color: var(--green-400);
}

.picker-grid__day[aria-pressed="true"] {
  background: var(--green-500);
  color: var(--neutral-0);
}

.picker-grid__day[aria-pressed="true"] .picker-grid__alt {
  color: var(--green-100);
}

.picker-grid__day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.picker-hint {
  margin: 0.85rem 0 0;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
  text-align: center;
}

.request-overlay {
  position: fixed;
  inset: 0;
  z-index: 1990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 248, 241, 0.42);
  backdrop-filter: blur(1.5px);
  cursor: progress;
  animation: overlay-in 0.2s ease;
}

.request-overlay[hidden] {
  display: none;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.toast-region {
  position: fixed;
  inset-block-start: 5.5rem;
  inset-inline-start: 1rem;
  z-index: 2050;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.app-toast {
  width: 100%;
  pointer-events: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.16);
  overflow: hidden;
  border-inline-start: 5px solid var(--toast-accent, var(--green-500));
  font-size: var(--fs-base);
}

.app-toast__body {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}

.app-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--toast-soft, var(--green-50));
  color: var(--toast-accent, var(--green-500));
  font-size: 1.1rem;
}

.app-toast__content {
  flex: 1 1 auto;
  min-width: 0;
}

.app-toast__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--neutral-800);
}

.app-toast__message {
  margin: 0.15rem 0 0;
  color: var(--neutral-600);
  line-height: 1.75;
}

.app-toast__close {
  flex: 0 0 auto;
  margin-block-start: 0.25rem;
}

.app-toast--success {
  --toast-accent: var(--green-500);
  --toast-soft: var(--green-50);
}

.app-toast--info {
  --toast-accent: var(--green-600);
  --toast-soft: var(--green-50);
}

.app-toast--warning {
  --toast-accent: #B54708;
  --toast-soft: var(--color-warning-bg);
}

.app-toast--error {
  --toast-accent: var(--color-danger);
  --toast-soft: var(--color-danger-bg);
}

@media (max-width: 575.98px) {
  .toast-region {
    inset-inline: 0.75rem;
    inset-block-start: auto;
    inset-block-end: 6rem;
    width: auto;
  }

  .app-toast__body {
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
  }

  .app-toast__icon {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
  }

  .app-toast__title {
    font-size: var(--fs-base);
  }

  .app-toast__message {
    font-size: var(--fs-sm);
    line-height: 1.65;
  }
}

.prose {
  display: grid;
  gap: 1.25rem;
}

.prose__block {
  padding: 1.75rem;
  min-width: 0;
}

@media (max-width: 575.98px) {
  .prose__block {
    padding: 1.15rem;
  }
}

.prose__block h2 {
  font-size: var(--fs-lg);
  color: var(--green-700);
  margin-block: 0.5rem 0.75rem;
}

.prose__block h2:first-child {
  margin-block-start: 0;
}

.prose__block ul,
.prose__block ol {
  padding-inline-start: 1.4rem;
}

.prose__block li {
  margin-block-end: 0.5rem;
}

.prose__note {
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: var(--fs-sm);
  margin: 0;
}

.method-table {
  --bs-table-bg: transparent;
  margin-block: 0.5rem 1rem;
  font-size: var(--fs-sm);
}

.method-table caption {
  caption-side: top;
  color: var(--neutral-600);
}

.method-table thead th {
  color: var(--green-700);
  background: var(--green-50);
  border-color: var(--green-100);
}

.method-table th,
.method-table td {
  padding: 0.75rem;
  border-color: var(--neutral-200);
  min-width: 9rem;
}

.error-card {
  max-width: 36rem;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
}

.error-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  font-size: 1.85rem;
  margin-block-end: 1rem;
}

.error-card__title {
  font-size: var(--fs-2xl);
}

.error-card__text {
  color: var(--neutral-600);
  font-size: var(--fs-md);
}

.error-card__actions {
  margin-block: 1.5rem 0.5rem;
}

.error-card__ref {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
}

.site-footer {
  margin-block-start: 2rem;
  padding-block: 2.25rem 1.5rem;
  background: var(--green-700);
  color: var(--green-100);
}

.site-footer__grid {
  display: grid;
  gap: 1.5rem;
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--neutral-0);
}

.site-footer__note {
  max-width: 40rem;
  color: var(--green-100);
  font-size: var(--fs-sm);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(168, 228, 197, 0.45);
  color: var(--neutral-0);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--neutral-0);
}

.site-footer__meta {
  margin: 1.5rem 0 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgba(168, 228, 197, 0.25);
  font-size: var(--fs-xs);
  color: var(--green-200);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .calc-card:hover,
  .calc-card:focus-within {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .calc-hero,
  .calc-form,
  .result-actions,
  .toast-region,
  .request-overlay,
  .app-loader,
  .skip-link,
  .modal-backdrop {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    font-size: 12pt;
  }

  .calc-layout .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .calc-layout__result {
    position: static;
  }

  .result-card {
    box-shadow: none;
    border: 1px solid #D5D9DD;
    animation: none;
  }

  .result-amount {
    background: #FFFFFF;
    color: #074D31;
    border: 2px solid #074D31;
  }

  .result-amount__currency {
    color: #074D31;
  }

  body.modal-open .app-shell {
    display: none !important;
  }

  .modal.show {
    position: static;
    display: block !important;
  }

  .modal.show .modal-dialog {
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .modal.show .modal-header .btn-close,
  .modal.show .modal-footer {
    display: none !important;
  }
}