/* Copy Animation */
.base-color {
  color: hsl(var(--base)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: hsl(var(--base));
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}

.cookies-card__desc {
  font-size: 0.875rem;
}

.cookies-card__desc a {
  color: hsl(var(--white));
  text-decoration: underline;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}

.cookies-card {
  width: 720px;
  padding: 24px;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all 0.5s;
  background: hsl(var(--surface));
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.cookies-card-content {
  flex: 1;
}

.cookies-card__btn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 120px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  border-radius: 50%;
  background-color: transparent;
  color: hsl(var(--white));
  font-size: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: #363636;
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: #363636;
}

@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}

@media (max-width: 575px) {
  .cookies-card {
    flex-direction: column;
  }

  .cookies-card__btn {
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
  }
}

.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: "";
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: "";
  font-family: "Line Awesome Free";
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}

.show-filter {
  display: none;
}

@media (max-width: 767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}

/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05),
    6px 4px 19px rgb(115 103 240 / 20%);
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: hsl(var(--border-color)) !important;
  padding: 10px 20px;
  border-radius: 4px !important;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: 0.3s;
}

/* select2's own RTL handling moves the arrow box itself to the left edge
   of the field, but this `right: 10px` offset still assumes the box sits
   on the right (LTR default), so the glyph gets pushed past the box's
   outer/left edge and spills across the field's border. */
[dir="rtl"] .select2-container--default
  .select2-selection--single
  .select2-selection__arrow:after {
  right: auto;
  left: 10px;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 2px !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 28px !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 10px !important;
}


.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}
.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
}

/* PAYMENT CARD */
.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: hsl(var(--base));
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: hsl(var(--black) / 0.1);
}

.payment-system-list {
  --thumb-width: 80px;
  --thumb-height: 32px;
  --border-color: hsl(var(--black) / 0.1);
  background-color: hsl(var(--white));
  border-radius: 10px;
  padding-block: 24px;
  padding-inline: 16px;
  height: 100%;
}

.payment-system-list.border-style {
  border-left: 1px solid hsl(var(--black) / 0.1);
  border-radius: 0;
}

@media (max-width: 991px) {
  .payment-system-list.border-style {
    border-left: 0;
    border-top: 1px solid hsl(var(--black) / 0.1);
  }
}

hr {
  border-top: 1px solid hsl(var(--black) / 0.1);
  opacity: 1;
}

.payment-system-list.is-scrollable {
  max-height: min(600px, 70vh);
  overflow-x: auto;
}

.modal .payment-system-list.is-scrollable {
  max-height: min(452px, 70vh);
  overflow-x: auto;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: hsl(var(--black) / 0.2);
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all linear 0.3s;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid hsl(var(--black) / 0.1);
  border-radius: 8px;
  cursor: pointer;
}

.payment-item:has(.payment-item__radio:checked) {
  border-color: hsl(var(--base) / 0.2);
  background-color: hsl(var(--base) / 0.07);
}

.payment-item:has(.payment-item__radio:checked) .payment-item__name {
  color: hsl(var(--base));
}

.payment-item:has(.payment-item__radio:checked) .check-type-icon {
  border-color: hsl(var(--success));
}

.payment-item:has(.payment-item__radio:checked) .check-circle {
  display: block;
  color: hsl(var(--success));
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width));
  gap: 10px;
}

.payment-item__check {
  width: 10px;
  height: 10px;
  border: 1px solid hsl(var(--base));
  display: inline-block;
  border-radius: 100%;
}

.payment-item__name {
  transition: all 0.3s;
  text-align: end;
}

.payment-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.payment-item__thumb {
  padding: 3px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  background-color: hsl(var(--black) / 0.1);
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}

.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 16px;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid hsl(var(--black) / 0.1);
  border-radius: 5px;
}

.deposit-info__input-group-text {
  align-self: center;
  padding-inline: 16px;
  border: 0;
  background: transparent;
}

.deposit-info__input-group:has(.form--control:disabled),
.deposit-info__input-group:has(.form--control:read-only) {
  background: hsl(var(--white) / 0.05);
}

.deposit-info__input-group:has(.form--control:disabled) .form--control,
.deposit-info__input-group:has(.form--control:read-only) .form--control {
  background: transparent;
  border: 0 !important;
}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 45px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;
  color: hsl(var(--black));
}

.note-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-item__btn-text,
.payment-item__btn__icon {
  color: hsl(var(--success));
  font-size: 14px;
  font-weight: 600;
}

/* END GATEWAY */

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

.select2-container--default .select2-selection--single {
  border-color: hsl(var(--black) / 0.1);
  border-width: 1px !important;
  border-radius: 4px !important;
  padding: 7px 16px !important;
  height: 100% !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
  padding-left: 0px !important;
}
.select2-container--default .select2-selection--single {
  border-color: hsl(var(--black) / 0.1) !important;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--white)) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  margin-top: 10px !important;
}

.select2-container .selection {
  width: 100%;
  display: inline-block;
}

.select2-container--default .select2-selection--multiple,
.select2-selection--multiple {
  border-color: #cacaca73 !important;
  height: unset !important;
  min-height: 45px !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid hsl(var(--black) / 0.1);
}

.bg--primary {
  color: #fff !important;
}

.select2-container {
  width: 100% !important;
  min-width: 120px;
}

.select2-parent:has(.select2) {
  min-width: 200px;
}

span.select2-selection.select2-selection--single:focus-visible {
  border: 1px solid hsl(var(--base));
  outline: none !important;
}

.dropdown-list__item.langSel .text:hover {
  color: hsl(var(--white)) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker .ranges li.active {
  background-color: hsl(var(--base)) !important;
}

/* ========================= Design tokens (v3) ========================= */
:root {
  --notch: 22px;
  --paper: hsl(var(--body-bg));
  /* Card/ticket surface. Same value as --white at rest; dark mode redefines
     this alone so "white card" components flip without touching --white
     itself (which stays literal white for text-on-dark-band usages). */
  --surface: var(--white);
  /* Heading/body text ink. Same value as --heading-color at rest; dark mode
     redefines this alone so text flips to a light tone while the dark
     "band" backgrounds that also read --heading-color (hero, facility,
     subscribe-panel, milestone-ticket, faq-help) stay dark in both themes. */
  --heading-text: 43 19% 7%;
}

/* ========================= Ticket component ========================= */
/* Signature shape sitewide: a corner-notched card, like a ticket stub or price tag. */
.ticket {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

[dir="rtl"] .ticket {
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}

/* ========================= Hero (v3) ========================= */
.hero {
  position: relative;
  overflow: hidden;
  background: hsl(var(--heading-color));
  padding-block: 88px;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.hero__content {
  flex: 1 1 480px;
  min-width: 0;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--base-l-500));
  margin-block-end: 28px;
}

.hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--base-l-500));
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: hsl(var(--white));
  text-wrap: balance;
  max-width: 14ch;
  margin-block-end: 24px;
}

.hero__desc {
  color: hsl(var(--white) / 0.6);
  font-size: 1.125rem;
  max-width: 42ch;
  margin-block-end: 40px;
}

.hero__search {
  display: flex;
  align-items: stretch;
  background: hsl(var(--white));
  padding: 8px;
  gap: 4px;
  max-width: 580px;
}

.hero__search-icon {
  display: flex;
  align-items: center;
  padding-inline-start: 14px;
  color: hsl(var(--text-color));
  font-size: 1.125rem;
}

.hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding-inline: 10px;
  font-family: var(--body-font);
  font-size: 0.9375rem;
  color: hsl(var(--heading-text));
}

.hero__search-input:focus {
  outline: none;
}

.hero__search-select {
  border: 0;
  border-inline-start: 1px solid hsl(var(--border-color));
  background: transparent;
  padding-inline: 14px;
  font-family: var(--body-font);
  font-size: 0.9375rem;
  color: hsl(var(--heading-text));
  min-width: 100px;
}

.hero__search-btn {
  border: 0;
  padding-inline: 28px;
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--white));
  background: hsl(var(--base));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background-color 0.2s ease;
}

[dir="rtl"] .hero__search-btn {
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

/* .table-search-text is pinned with a physical `right: 0` in main.css,
   so it stays glued to the input's trailing edge in LTR. In RTL the input's
   own text/placeholder also anchors right, so the button ends up on top of
   it instead of at the opposite edge — pin it to the left instead. */
[dir="rtl"] .table-search-text {
  right: auto;
  left: 0;
}

/* .slick-prev/.slick-next (shared by every carousel on the site) are pinned
   with physical `right` offsets, positioned to float clear of a heading
   block above them that's constrained to max-width and sits at the
   writing-direction's start edge (left in LTR, so the arrows' right-edge
   anchor lands in the empty space beside it). In RTL the heading shifts to
   the right (its own start edge) while the arrows stay right-anchored too,
   so both now compete for the same space — the arrows land on top of the
   right-aligned heading text instead of beside it. Mirror them to the left. */
[dir="rtl"] .slick-next {
  right: auto;
  left: 10px;
}

[dir="rtl"] .slick-prev {
  right: auto;
  left: 60px;
}

/* The icon glyphs themselves (la-angle-left for prev, la-angle-right for
   next) are hardcoded in the JS markup and never flip with direction, so
   after mirroring the buttons' positions above, the outer (now left-side)
   "next" button shows a rightward "›" and the inner "prev" button shows a
   leftward "‹" — backwards for the direction each now points. Mirror the
   glyphs themselves rather than touching the JS. */
[dir="rtl"] .slick-prev i,
[dir="rtl"] .slick-next i {
  display: inline-block;
  transform: scaleX(-1);
}

.hero__search-btn:hover {
  background: hsl(var(--base-d-200));
}

/* Each Odometer.js digit (e.g. "9" then "6" for 96) is a separate inline-block
   span; under [dir="rtl"] the browser's bidi algorithm visually reorders those
   sibling boxes, so multi-digit counters render backwards (96 -> "69",
   110 -> "011"). Force an LTR embedding context so digits stay in order. */
[dir="rtl"] .odometer {
  direction: ltr;
  unicode-bidi: isolate;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 28px;
}

.hero__tag {
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: hsl(var(--white) / 0.7);
  border: 1px solid hsl(var(--white) / 0.2);
  padding: 7px 14px;
}

.hero__tag--more {
  color: hsl(var(--base-l-500));
  border-color: hsl(var(--base) / 0.4);
}

/* ---- CSS-only ticket stack graphic (no raster images) ---- */
.hero__stack {
  flex: 0 1 380px;
  position: relative;
  min-width: 280px;
  height: 380px;
}

/* Unlike the sitewide .ticket notch (an intentional signature shape kept
   as-is on account/feature cards elsewhere), this hero illustration reads
   better fully rounded: it's three overlapping, rotated cards, and a sharp
   clip-path corner catches the eye at odd angles in a way a plain rounded
   rect doesn't. Drop the notch clip-path here and round normally instead. */
.hero__stack .ticket {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  padding: 28px 26px;
  transition: transform 0.3s ease;
  clip-path: none;
  border-radius: 20px;
}

/* Third card is a bare outline, not a filled smudge — it reads as "more of
   the stack" peeking out instead of a flat, purposeless tint. Rotated
   further out than the other two so all three fan open clearly instead of
   converging on nearly the same angle. */
.ticket--ghost {
  top: 60px;
  height: 300px;
  background: transparent;
  border: 1.5px solid hsl(var(--white) / 0.16);
  transform: rotate(7deg);
}

.ticket--accent {
  top: 24px;
  height: 300px;
  background: hsl(var(--base));
  transform: rotate(-5deg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 28px 48px -20px hsl(var(--base) / 0.55);
}

.ticket--paper {
  top: 190px;
  height: 190px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--white) / 0.08);
  transform: rotate(1.5deg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 28px 48px -20px rgba(0, 0, 0, 0.45);
}

/* Front card settles flat on hover — a small, deliberate bit of life on an
   otherwise static illustration. */
.hero__stack:hover .ticket--paper {
  transform: rotate(0deg) translateY(-4px);
}

.hero__stack:hover .ticket--accent {
  transform: rotate(-6deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__stack .ticket {
    transition: none;
  }
}

.ticket__label {
  font-family: var(--mono-font);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: hsl(var(--heading-text) / 0.55);
}

.ticket--accent .ticket__label {
  color: hsl(var(--white) / 0.75);
}

.ticket__bar {
  display: block;
  height: 10px;
  width: 85%;
  border-radius: 999px;
  background: hsl(var(--heading-text) / 0.85);
}

.ticket__bar--sm {
  width: 55%;
  height: 8px;
  background: hsl(var(--heading-text) / 0.35);
}

.ticket__bar--light {
  background: hsl(var(--white) / 0.9);
}

.ticket__bar--light.ticket__bar--sm {
  background: hsl(var(--white) / 0.4);
}

.ticket__price {
  margin-block-start: auto;
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 1.375rem;
  color: hsl(var(--white));
}

/* Keep the accent ticket's price inside its own exposed strip above the
   paper ticket stacked in front of it, instead of anchored to the bottom
   edge where it would sit behind paper's card. */
.ticket--accent .ticket__price {
  margin-block-start: 0;
}

.ticket__foot {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ticket__avatars {
  display: flex;
}

.ticket__avatars i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsl(var(--base));
  border: 2px solid hsl(var(--white));
  margin-inline-start: -8px;
  font-style: normal;
}

.ticket__avatars i:first-child {
  margin-inline-start: 0;
}

.ticket__stars {
  color: hsl(var(--gold));
  font-size: 0.8125rem;
  letter-spacing: 1px;
}

@media (max-width: 991px) {
  .hero { padding-block: 56px; }
  .hero__stack { order: -1; margin-inline: auto; }
  .hero__title { max-width: none; }
}

@media (max-width: 575px) {
  .hero__search { flex-wrap: wrap; }
  .hero__search-select { border-inline-start: 0; border-block-start: 1px solid hsl(var(--border-color)); flex: 1 1 100%; }
  .hero__search-btn { flex: 1 1 100%; padding-block: 12px; }
}
/* ========================= End Hero (v3) ========================= */

/* ========================= Section head (v3) ========================= */
.section-head {
  max-width: 640px;
  margin-block-end: 56px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__eyebrow {
  display: block;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--base));
  margin-block-end: 14px;
}

.section-head__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  color: hsl(var(--heading-text));
  text-wrap: balance;
  margin-block-end: 14px;
}

.section-head__desc {
  color: hsl(var(--text-color));
  font-size: 1.0625rem;
  margin: 0;
}

.section--dark .section-head__title,
.section--green .section-head__title {
  color: hsl(var(--white));
}

.section--dark .section-head__desc,
.section--green .section-head__desc {
  color: hsl(var(--white) / 0.65);
}

.section--dark .section-head__eyebrow {
  color: hsl(var(--base-l-500));
}

.section--green .section-head__eyebrow {
  color: hsl(var(--white));
}

/* ========================= Steps rail (how it works) ========================= */
.steps-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.step-ticket {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border-color));
  padding: 32px 28px 28px;
}

.step-ticket__index {
  display: block;
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: hsl(var(--white));
  background: hsl(var(--heading-color));
  width: fit-content;
  padding: 4px 10px;
  margin-block-end: 20px;
}

.step-ticket__title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.125rem;
  color: hsl(var(--heading-text));
  margin-block-end: 8px;
}

.step-ticket__desc {
  color: hsl(var(--text-color));
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* ========================= Footer polish ========================= */
.footer-item__title {
  font-family: var(--mono-font) !important;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* .sign-up-content itself has no background (the green fill belongs to its
   parent .footer-area__top), so clipping it cuts nothing visible - the
   notch has to live on .footer-area__top directly. main.css's ::before/
   ::after pair tried to fake corner accents there with rotated boxes, but
   they're small enough to read as invisible at normal viewing size and
   they use physical left/right (no RTL awareness). Cut both top corners
   of the actual green box directly instead: one symmetric shape, correct
   in both directions, with no separate LTR/RTL rule needed. */
.footer-area__top {
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%, 0 var(--notch));
}

.footer-area__top::before,
.footer-area__top::after {
  display: none;
}

/* main.css's 10px title margin assumed a description paragraph would sit
   between the title and the button; the footer panel no longer has one
   (terse close, not a repeat of the mid-page pitch), so restore the
   breathing room the description's own margin used to provide. */
.sign-up-wrapper .sign-up-content__title {
  margin-bottom: 32px;
}

/* ========================= Subscribe panel ========================= */
.subscribe-panel {
  background: hsl(var(--heading-color));
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Same rounded treatment as the hero stack, for the same reason — see
   DESIGN.md's marketing-shape-language note, updated alongside this.
   Needs the compound `.subscribe-panel.ticket` selector (not just
   `.subscribe-panel`) to match the [dir="rtl"] .ticket notch rule's own
   specificity — otherwise RTL would win the tie and the notch would
   reappear in Arabic. */
.subscribe-panel.ticket {
  clip-path: none;
  border-radius: 20px;
}

.subscribe-panel__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  color: hsl(var(--white));
  margin-block-end: 8px;
}

.subscribe-panel__desc {
  color: hsl(var(--white) / 0.6);
  margin: 0;
}

.subscribe-panel .subscribe-form {
  flex: 0 1 380px;
  min-width: 260px;
}

.subscribe-panel .input-group {
  background: hsl(var(--white));
}

/* ========================= Counter numbers ========================= */
.counterup-item__title {
  font-family: var(--mono-font) !important;
  letter-spacing: -0.01em;
}

/* ========================= Account CTA (signup panels) ========================= */
.account-item.account-item--dark,
.account-item.account-item--green {
  border-radius: 0;
  padding: 56px 52px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

.account-item.account-item--dark {
  background: hsl(var(--heading-color));
}

.account-item.account-item--green {
  background: hsl(var(--base-two));
}

.account-item__tag {
  font-family: var(--mono-font);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--base-l-500));
  margin-block-end: 24px;
}

.account-item__title.account-item__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  color: hsl(var(--white));
  letter-spacing: -0.02em;
  margin-block-end: 16px;
}

.account-item__text {
  color: hsl(var(--white) / 0.65);
  font-size: 1.0625rem;
  max-width: 34ch;
  margin-block-end: auto;
  padding-block-end: 32px;
}

.account-item__btn {
  display: inline-flex;
  width: fit-content;
  font-family: var(--heading-font);
  font-weight: 700;
  color: hsl(var(--white));
  border-bottom: 2px solid hsl(var(--base));
  padding-block-end: 4px;
}

.account-item__btn:hover {
  color: hsl(var(--base-l-500));
}

/* ========================= Feature tickets (why choose) — full-bleed green block ========================= */
.feature-section {
  background: hsl(var(--base-two));
  padding-block: 96px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background: hsl(var(--surface));
  padding: 30px 26px;
}

.feature-card__index {
  display: block;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(var(--base));
  margin-block-end: 16px;
}

.feature-card__title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.0625rem;
  color: hsl(var(--heading-text));
  margin-block-end: 8px;
}

.feature-card__desc {
  color: hsl(var(--text-color));
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* ========================= Facility (dark block) ========================= */
.section--dark {
  background: hsl(var(--heading-color));
  padding-block: 96px;
}

.facility-item {
  display: flex;
  gap: 20px;
  padding-block: 24px;
  border-block-end: 1px solid hsl(var(--white) / 0.12);
}

.facility-item:first-child {
  padding-block-start: 0;
}

.facility-item__index {
  font-family: var(--mono-font);
  font-weight: 700;
  font-size: 0.8125rem;
  color: hsl(var(--base-l-500));
  flex-shrink: 0;
  padding-block-start: 3px;
}

.facility-item__title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.0625rem;
  color: hsl(var(--white));
  margin-block-end: 6px;
}

.facility-item__desc {
  color: hsl(var(--white) / 0.6);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.stamp-panel {
  background: hsl(var(--white) / 0.04);
  border: 1px solid hsl(var(--white) / 0.14);
  padding: 56px 44px;
  text-align: center;
}

.stamp-panel__badge {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--base-l-500));
  border: 1px solid hsl(var(--base) / 0.5);
  padding: 8px 18px;
  transform: rotate(-3deg);
  margin-block-end: 32px;
}

.stamp-panel__quote {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  color: hsl(var(--white));
  line-height: 1.4;
  text-wrap: balance;
  margin-block-end: 16px;
}

.stamp-panel__sig {
  font-family: var(--mono-font);
  font-size: 0.8125rem;
  color: hsl(var(--white) / 0.5);
}

/* ========================= Milestone (completion work) ========================= */
.milestone-wrapper {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.milestone-content {
  flex: 1 1 440px;
  min-width: 0;
}

.milestone-content__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  color: hsl(var(--heading-text));
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-block: 14px 32px;
}

.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.milestone-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: hsl(var(--heading-text));
}

.milestone-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: hsl(var(--base));
  color: hsl(var(--white));
  font-size: 0.75rem;
  flex-shrink: 0;
}

.milestone-ticket {
  flex: 1 1 360px;
  min-width: 280px;
  max-width: 420px;
  background: hsl(var(--heading-color));
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.milestone-ticket__label {
  font-family: var(--mono-font);
  font-size: 0.75rem;
  color: hsl(var(--white) / 0.5);
}

.milestone-ticket__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.milestone-ticket__bar {
  flex: 1 1 auto;
  height: 10px;
  background: hsl(var(--white) / 0.12);
}

.milestone-ticket__bar--done {
  background: hsl(var(--base));
}

.milestone-ticket__row i {
  color: hsl(var(--base-l-500));
  font-size: 1.125rem;
  flex-shrink: 0;
}

.milestone-ticket__progress {
  height: 6px;
  background: hsl(var(--white) / 0.12);
  margin-block-start: 8px;
}

.milestone-ticket__progress span {
  display: block;
  height: 100%;
  background: hsl(var(--base));
}

.milestone-ticket__percent {
  font-family: var(--mono-font);
  font-size: 0.8125rem;
  color: hsl(var(--base-l-500));
}

/* ========================= Task (find your task) ========================= */
.task-wrapper {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.task-content {
  flex: 1 1 440px;
  min-width: 0;
}

.task-content__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  color: hsl(var(--heading-text));
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-block: 14px 14px;
}

.task-content__desc {
  color: hsl(var(--text-color));
  font-size: 1.0625rem;
  margin-block-end: 28px;
  max-width: 46ch;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-end: 32px;
}

.task-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: hsl(var(--heading-text));
}

.task-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: hsl(var(--base) / 0.1);
  color: hsl(var(--base));
  font-size: 0.75rem;
  flex-shrink: 0;
}

.task-tickets {
  flex: 1 1 340px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-ticket {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border-color));
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.task-ticket--one { margin-inline-end: 40px; }
.task-ticket--two { margin-inline: 20px; }
.task-ticket--three { margin-inline-start: 40px; }

.task-ticket__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: hsl(var(--base) / 0.1);
  color: hsl(var(--base));
  font-size: 1.25rem;
  flex-shrink: 0;
}

.task-ticket__bar {
  display: block;
  height: 10px;
  width: 60%;
  background: hsl(var(--heading-text) / 0.85);
}

.task-ticket__bar--sm {
  width: 35%;
  height: 8px;
  background: hsl(var(--border-color));
}

@media (max-width: 767px) {
  .task-ticket--one, .task-ticket--two, .task-ticket--three { margin-inline: 0; }
}

/* ========================= Testimonials ========================= */
.testimonail-card,
.testimonails-card {
  padding: 8px;
}

.testimonial-item {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border-color));
  padding: 40px 32px;
  height: 100%;
}

.testimonial-item__mark {
  display: block;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: hsl(var(--base));
  margin-block-end: 4px;
}

.testimonial-item__desc {
  color: hsl(var(--heading-text));
  font-size: 1rem;
  line-height: 1.7;
  margin-block-end: 28px;
}

.testimonial-item__info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-item__thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid hsl(var(--base) / 0.15);
}

.testimonial-item__name {
  font-weight: 700;
  color: hsl(var(--heading-text));
  margin: 0;
}

.testimonial-item__designation {
  color: hsl(var(--text-color));
  font-size: 0.875rem;
}

/* ========================= Freelancer board empty state ========================= */
.freelancer-empty {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: 48px 44px;
  background: hsl(var(--white) / 0.06);
  border: 1px solid hsl(var(--white) / 0.16);
}

.freelancer-empty__label {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--base-l-500));
  border: 1px solid hsl(var(--base) / 0.5);
  padding: 8px 18px;
  margin-block-end: 24px;
}

.freelancer-empty__title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  color: hsl(var(--white));
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-block-end: 12px;
}

.freelancer-empty__desc {
  color: hsl(var(--white) / 0.65);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin-inline: auto;
  margin-block-end: 28px;
}

.freelancer-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 700;
  color: hsl(var(--white));
  background: hsl(var(--base));
  padding: 13px 28px;
  transition: background-color 0.2s ease;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

[dir="rtl"] .freelancer-empty__btn {
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.freelancer-empty__btn:hover {
  background: hsl(var(--base-d-200));
  color: hsl(var(--white));
}

@media (max-width: 575px) {
  .freelancer-empty {
    padding: 36px 24px;
  }
}

/* ========================= Slick carousel dots ========================= */
/* main.css's inactive dot is white-on-white (a 1px border/0.15 is not a
   usable affordance). Border-color alone was still too pale against the
   page background (~1.07:1) — use the body-text tone instead, which reads
   as a clearly visible, muted dot without competing with the active
   green fill. */
.slick-dots li button {
  background: hsl(var(--text-color));
  border-color: hsl(var(--text-color));
}

/* ========================= FAQ accordion ========================= */
.custom--accordion .accordion-item {
  border: 1px solid hsl(var(--border-color));
  border-block-end: 0;
}

.custom--accordion .accordion-item:last-of-type {
  border-block-end: 1px solid hsl(var(--border-color));
}

.custom--accordion .accordion-button {
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.4;
  padding: 24px 62px 24px 26px;
}

@media (max-width: 575px) {
  .custom--accordion .accordion-button {
    padding: 20px 56px 20px 20px;
  }
}

.custom--accordion .accordion-button:not(.collapsed) {
  background: hsl(var(--base) / 0.05);
  color: hsl(var(--base));
  box-shadow: none;
}

/* main.css positions the toggle icon with `position: absolute; right: 0`
   and no vertical anchor, so it falls back to static placement instead of
   staying centered once the question wraps to two lines — pin it. */
.custom--accordion .accordion-button[aria-expanded="true"]::after,
.custom--accordion .accordion-button[aria-expanded="false"]::after {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* "Show more" sits flush with the card's own edge at the same padding as
   the accordion items, but with no border/icon to visually buffer it —
   nudge it in a bit further so it doesn't read as clipped. */
.custom--accordion .load-more-button {
  margin-inline-end: 16px;
}

.custom--accordion .accordion-button__number {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono-font);
  color: hsl(var(--base));
  font-size: 0.8125rem;
  font-weight: 700;
  margin-inline-end: 18px;
  flex-shrink: 0;
}

.custom--accordion .accordion-body {
  padding: 0 26px 24px 66px;
  color: hsl(var(--text-color));
  line-height: 1.7;
}

[dir="rtl"] .custom--accordion .accordion-body {
  padding: 0 66px 24px 26px;
}

/* main.css pins the sidebar filter's toggle icon to `right: 0` — correct
   for an LTR button, but this button's text is right-aligned RTL, so the
   icon lands on the exact same edge the heading text starts from and
   overlaps/sits on top of its first letters. Move the icon to the left
   edge (opposite the text) and reserve room there instead, and give it an
   explicit box + flex centering rather than `top: 50%` alone — the icon
   font's glyph metrics sit near the top of its line box, so centering by
   height alone still reads as floating above the text. */
.sidebar--acordion .accordion-button {
  position: relative;
  padding-inline-end: 20px;
}

.sidebar--acordion .accordion-button[aria-expanded="true"]::after,
.sidebar--acordion .accordion-button[aria-expanded="false"]::after {
  top: 50%;
  right: auto;
  left: 0;
  width: 16px;
  height: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.faq-help {
  background: hsl(var(--heading-color));
  padding: 40px 32px;
  position: sticky;
  top: 100px;
}

.faq-help__label {
  display: block;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--base-l-500));
  margin-block-end: 14px;
}

.faq-help__desc {
  color: hsl(var(--white) / 0.65);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-block-end: 20px;
}

.faq-help__link {
  font-family: var(--heading-font);
  font-weight: 700;
  color: hsl(var(--white));
  border-bottom: 2px solid hsl(var(--base));
  padding-block-end: 2px;
}

.faq-help__link:hover {
  color: hsl(var(--base-l-500));
}

/* ========================= Theme toggle control ========================= */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid hsl(var(--border-color));
  background: transparent;
  color: hsl(var(--heading-text));
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background: hsl(var(--base) / 0.08);
  border-color: hsl(var(--base) / 0.4);
  color: hsl(var(--base));
}

.theme-toggle {
  margin-inline-end: 20px;
}

/* Standalone auth screens (login/register/etc.) have no header to hold the
   toggle, so it floats in its own corner instead. Some auth-flow routes
   (password reset, 2FA) render a view that DOES extend the full frontend
   layout and already has a header toggle — hide the redundant floating
   one whenever a real header is present on the page. */
.theme-toggle--floating {
  position: fixed;
  top: 20px;
  inset-inline-end: 20px;
  z-index: 1000;
}

body:has(.header) .theme-toggle--floating {
  display: none;
}

.theme-toggle--floating .theme-toggle {
  margin-inline-end: 0;
  background: hsl(var(--surface));
}

/* ========================= Legacy heading-color text migration =========================
   main.css has many pre-v3 classes still reading text color from
   `--heading-color`, which stays fixed across themes because it also
   backs permanent-dark bands elsewhere. Any of those classes used as
   plain body text (not on a permanent-dark band) needs the theme-aware
   `--heading-text` token instead, or it renders near-black on dark mode's
   dark background. */
.section-heading.two .section-heading__title {
  color: hsl(var(--heading-text));
}

/* .about-item__title (an <h5>) has no color of its own, so it falls back
   to the global h1-h6 rule's `--heading-color` — same frozen-token bug. */
.about-wrapper .about-item__title {
  color: hsl(var(--heading-text));
}

.theme-toggle__icon--moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

/* Login/register role-switcher radio labels reserve room for the radio
   circle with a physical `padding-left: 40px` in main.css. This swaps the
   padding to the right for RTL to match where Arabic text starts — but
   the circle itself (`.form-check-input`, next rule) is *also* pinned to
   a physical `left: 10px` in main.css with no RTL override of its own, so
   without flipping it too, the circle stayed on the left while its
   clearance padding moved to the right, leaving only 10px to clear a
   16px-wide circle — text rendered right on top of it. Flip both. */
[dir="rtl"] .account-form .radio-btn-wrapper .form--radio .form-check-label {
  padding-left: 10px;
  padding-right: 40px;
}

[dir="rtl"] .account-form .radio-btn-wrapper .form--radio .form-check-input {
  left: auto;
  right: 10px;
}

/* Same role-switcher: .form--radio is a flex row with no align-items set,
   so the fixed 16px-tall circle just sits at the row's cross-start (top)
   instead of centering against the label. Barely visible with a one-line
   label, but the longer Arabic labels ("تسجيل الدخول كطالب" etc.) wrap to
   two lines at common widths, and the circle stays pinned at the top
   instead of following — reading as "floating above the words" instead
   of a checkbox beside them. Not actually RTL-specific (English wraps
   too, just less often), so this one isn't [dir="rtl"]-scoped. */
.account-form .radio-btn-wrapper .form--radio {
  align-items: center;
}

/* Same bug, different .radio-btn-wrapper variant — the one used by the
   task-posting form's skill-level/scope/duration pill choices (a separate
   main.css block, not the .account-form one above). Its radio circle is
   pinned to a physical `right: 10px`, which sits directly under the
   right-aligned Arabic label text in RTL instead of beside it. Move the
   circle to the opposite edge, matching where the text now ends instead
   of where it starts. */
[dir="rtl"] .radio-btn-wrapper .form--radio .form-check-input {
  right: auto;
  left: 10px;
}

/* Filter sidebar checkboxes: `.form-check-label` reserves space for the
   checkbox with a physical `padding-left: 12px` in main.css. In RTL the
   checkbox sits on the right (label flows to its left), so the gap needs
   to be on the label's right side instead. */
[dir="rtl"] .form--check .form-check-label {
  padding-left: 0;
  padding-right: 12px;
}

/* Talent profile "My Specializations" list: each item reserves room for a
   leading dash marker with a physical `padding-left: 30px`, and the dash
   itself (::before) is pinned to `left: 0`. In RTL the item's text is
   right-aligned, so the dash — still stuck on the left — ends up
   stranded on the opposite end instead of leading the text. Move the
   marker and its padding to the other side. */
[dir="rtl"] .proficiency-wrapper .proficiency-list__item {
  padding-left: 0;
  padding-right: 30px;
}

[dir="rtl"] .proficiency-wrapper .proficiency-list__item::before {
  left: auto;
  right: 0;
}

/* Header logo swap: both images render, CSS shows the one matching theme.
   logo.png (light) is 1166x480 and logo_dark.png (dark) is 991x480 — different
   aspect ratios. main.css only caps the img at max-height:45px with no fixed
   width, so the light logo renders ~109px wide and the dark one ~93px wide.
   That width delta reflows every header item after the logo (theme toggle,
   language switch, login/register) on every theme switch. Give the logo a
   fixed-width box and let the image contain itself inside it so the box's
   footprint stays constant regardless of which variant is showing. */
.navbar-brand.logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 110px;
  height: 45px;
}

.navbar-brand.logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.navbar-brand.logo .logo--for-dark {
  display: none;
}

[data-theme="dark"] .navbar-brand.logo .logo--for-light {
  display: none;
}

[data-theme="dark"] .navbar-brand.logo .logo--for-dark {
  display: inline-block;
}

/* Bootstrap's .me-auto compiles to a physical `margin-right: auto`
   (not the logical margin-inline-end), so it doesn't flip for RTL — the
   nav menu was hugging the wrong side, leaving a large gap between it and
   the logo instead of sitting next to it. */
[dir="rtl"] .navbar-nav.me-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* ========================= Dark mode ========================= */
/* Scoped to body.is-public-frontend so dashboard/admin pages — which share
   this same stylesheet — are never affected, even if data-theme is somehow
   set there. --white and --heading-color are deliberately left untouched:
   they back "text/overlay on a permanently-dark band" (hero, facility,
   subscribe-panel, milestone-ticket, faq-help, footer) and those bands stay
   dark in both themes by design, so nothing reading them needs to change. */
html[data-theme="dark"] body.is-public-frontend {
  --base-h: 152;
  --base-s: 62%;
  --base-l: 46%;
  --base-two-h: 153;
  --base-two-s: 55%;
  --base-two-l: 24%;

  --surface: 40 8% 16%;
  --heading-text: 45 20% 95%;
  --body-bg: 40 10% 11%;
  --body-color: 45 8% 68%;
  --text-color: 45 8% 68%;
  --border-color: 45 8% 24%;
  --section-bg: 150 15% 13%;
}

/* Header */
html[data-theme="dark"] body.is-public-frontend .header {
  background-color: hsl(var(--surface));
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.35);
}

/* main.css's `.nav-menu .nav-item .nav-link` (desktop) and
   `.dropdown-menu li .dropdown-item` (mobile) both set color with
   `!important`, which beats this override on specificity alone —
   match it with `!important` too. */
html[data-theme="dark"] body.is-public-frontend .nav-link,
html[data-theme="dark"] body.is-public-frontend .login-registration-list__link,
html[data-theme="dark"] body.is-public-frontend .dropdown-item {
  color: hsl(var(--heading-text)) !important;
}

html[data-theme="dark"] body.is-public-frontend .navbar-toggler,
html[data-theme="dark"] body.is-public-frontend #hiddenNav {
  color: hsl(var(--heading-text));
}

/* Language switcher ("العربية") text — main.css hardcodes `--black` /
   `--heading-color` with `!important` for the selected label and dropdown
   list items. */
html[data-theme="dark"] body.is-public-frontend .dropdown-list > .dropdown-list__item .text,
html[data-theme="dark"] body.is-public-frontend .custom--dropdown > .custom--dropdown__selected .text,
html[data-theme="dark"] body.is-public-frontend .custom--dropdown__selected.dropdown-list__item .text {
  color: hsl(var(--heading-text)) !important;
}

html[data-theme="dark"] body.is-public-frontend .custom--dropdown > .dropdown-list {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .custom--dropdown.open > .dropdown-list {
  background-color: hsl(var(--surface)) !important;
}

/* Bootstrap's `.accordion-item { color: var(--bs-accordion-color) }` is a
   completely separate hardcoded variable (`#212529`), outside our theme
   system entirely — it wins for any accordion content (FAQ, sidebar
   filters) that doesn't set its own color. */
html[data-theme="dark"] body.is-public-frontend .accordion-item {
  color: hsl(var(--text-color));
}

/* Bootstrap's `.text-muted` is a fixed `#6c757d !important`, used all over
   for empty-state copy ("No job found!" etc.) — too low-contrast against
   the dark background. */
html[data-theme="dark"] body.is-public-frontend .text-muted {
  color: hsl(var(--text-color)) !important;
}

/* Talent/job list filter bar: "Filter" label + result count. */
html[data-theme="dark"] body.is-public-frontend .filter-wrapper__content-title,
html[data-theme="dark"] body.is-public-frontend .filter-wrapper__right-text {
  color: hsl(var(--heading-text));
}

/* Form field labels site-wide (contact, auth, job post forms). */
html[data-theme="dark"] body.is-public-frontend .form--label {
  color: hsl(var(--heading-text));
}

/* Contact page: "Contact Us" card title (<h5>, no own color — falls back
   to the frozen global h1-h6 default). */
html[data-theme="dark"] body.is-public-frontend .contact-item-wrapper__title {
  color: hsl(var(--heading-text));
}

/* Blanket fix for the same frozen global `h1..h6 { color: heading-color }`
   rule the dashboard's equivalent blanket fix above targets. The public
   frontend has just as many bare, unclassed headings across pages this
   pass didn't individually audit (task detail, talent detail, filters,
   verification badges, etc.) — e.g. task title, "About the task",
   "Skills and experience", "Share:", company verification text all
   rendered near-black on dark cards. Any heading meant to stay a fixed
   color already has its own higher-specificity class rule that wins over
   this plain-tag selector, same reasoning as the dashboard version. */
html[data-theme="dark"] body.is-public-frontend h1,
html[data-theme="dark"] body.is-public-frontend h2,
html[data-theme="dark"] body.is-public-frontend h3,
html[data-theme="dark"] body.is-public-frontend h4,
html[data-theme="dark"] body.is-public-frontend h5,
html[data-theme="dark"] body.is-public-frontend h6 {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .contact-item-wrapper__bottom .social-list-wrapper .title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .navbar-collapse,
html[data-theme="dark"] body.is-public-frontend .dropdown-menu {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

/* Cards and surfaces defined in main.css that this pass doesn't token-drive */
html[data-theme="dark"] body.is-public-frontend .custom--accordion,
html[data-theme="dark"] body.is-public-frontend .freelancer-item {
  background-color: hsl(var(--surface));
}

/* .freelancer-item__name has no explicit color in main.css, so it inherits
   the near-black default heading color meant for the white card above —
   the card flipped dark here but the name text was never repointed,
   leaving it almost unreadable against its own card. */
html[data-theme="dark"] body.is-public-frontend .freelancer-item__name {
  color: hsl(var(--heading-text));
}

/* Same issue on the "students who bid on this task" cards: .bid-item__name
   and .freelancer-title both pin color to --heading-color (a static near-
   black token, never redefined for dark mode), so the bidder's name and
   tagline render as near-invisible dark-on-dark text. */
html[data-theme="dark"] body.is-public-frontend .bid-item__name,
html[data-theme="dark"] body.is-public-frontend .bid-item .freelancer-title {
  color: hsl(var(--heading-text));
}

/* .btn-outline--dark (the "Cancel" button on profile-setup steps, back
   buttons, etc.) hardcodes both its border and text to --dark, a static
   near-black token never redefined for dark mode, so the button reads as
   near-invisible dark-on-dark. */
html[data-theme="dark"] body.is-public-frontend .btn-outline--dark,
html[data-theme="dark"] body.is-dashboard .btn-outline--dark {
  border-color: hsl(var(--heading-text)) !important;
  color: hsl(var(--heading-text)) !important;
}

html[data-theme="dark"] body.is-public-frontend .custom--accordion .accordion-item {
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .form--control {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .form--control::placeholder {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-public-frontend .form--control:disabled,
html[data-theme="dark"] body.is-public-frontend .form--control[readonly] {
  background-color: hsl(var(--body-bg));
}

html[data-theme="dark"] body.is-public-frontend .contact-form-wrapper {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .contact-form-wrapper__title,
html[data-theme="dark"] body.is-public-frontend .contact-form-wrapper__desc {
  color: hsl(var(--heading-text));
}

/* Job/talent listing filter sidebar + results panel */
html[data-theme="dark"] body.is-public-frontend .category-sidebar,
html[data-theme="dark"] body.is-public-frontend .job-category-wrapper .job-category-body__content {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .sidebar--acordion .accordion-button {
  color: hsl(var(--heading-text));
}

/* Shared "no results" empty-state (partials/empty.blade.php), used across
   job/talent listings, FAQ, and elsewhere on the public site. */
html[data-theme="dark"] body.is-public-frontend .empty-message {
  background: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .empty-message h6 {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-public-frontend .filter-wrapper {
  background-color: hsl(var(--surface));
  color: hsl(var(--heading-text));
}

/* Select2-enhanced dropdowns (skill/rating filters, etc.) */
html[data-theme="dark"] body.is-public-frontend .select2-container--default .select2-selection--single {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color)) !important;
}

html[data-theme="dark"] body.is-public-frontend .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: hsl(var(--heading-text));
}

/* Multi-select/tags variant (e.g. the register form's "Language" field) —
   only the single-select variant above was themed, so this rendered as a
   plain white box against the dark page. */
html[data-theme="dark"] body.is-public-frontend .select2-container--default .select2-selection--multiple {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color)) !important;
}

html[data-theme="dark"] body.is-public-frontend .select2-selection--multiple .select2-selection__choice {
  background-color: hsl(var(--body-bg));
  border-color: hsl(var(--border-color));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .select2-selection--multiple .select2-selection__choice__remove {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-public-frontend .select2-selection--multiple .select2-search--inline .select2-search__field {
  background-color: transparent;
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .select2-dropdown {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .select2-results__option {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .select2-search--dropdown .select2-search__field {
  background-color: hsl(var(--body-bg));
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color)) !important;
}

/* Hero search field stays white-on-dark-band by design in both themes
   (see the note above), but its text/icon color was still reading the
   theme-adaptive `--heading-text`/`--text-color` tokens, which flip to a
   near-white value in dark mode — invisible against the fixed white bar.
   Pin them back to the light-mode values instead. */
html[data-theme="dark"] body.is-public-frontend .hero__search-input,
html[data-theme="dark"] body.is-public-frontend .hero__search-select {
  color: hsl(43 19% 7%);
}

html[data-theme="dark"] body.is-public-frontend .hero__search-icon {
  color: hsl(53 4% 40%);
}

/* Password show/hide eye icon: fixed black/0.4, invisible on a dark field. */
html[data-theme="dark"] body.is-public-frontend .password-show-hide {
  color: hsl(var(--text-color));
}

/* Social login buttons (Google/Facebook/LinkedIn): frozen heading-color
   text plus a black/0.1 border that's invisible against a dark surface,
   so the buttons read as plain black blocks with no legible label. */
html[data-theme="dark"] body.is-public-frontend .social-login-wrapper__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .social-login-list .social-login-btn {
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color));
}

/* Pagination and select2 chrome ride the tokens above automatically through
   --text-color and --base; the only hardcoded main.css color they still
   carry is a black/0.1 hairline border, left as a minor known gap. */

/* ========================= Auth pages (login/register/etc.) =========================
   These extend layouts.app directly and never include partials.header, so
   none of the component classes above ever applied to them — the whole
   `.account-*` family was still on main.css's hardcoded light-mode values. */
html[data-theme="dark"] body.is-public-frontend .account-form-wrapper {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .account-form__title {
  color: hsl(var(--heading-text));
}

/* main.css's decorative oval behind the illustration panel bleeds into
   the form panel in this RTL layout (`.account-inner__left` renders on
   the physical right, but the shape's hardcoded `left: -157px` still
   assumes it's on the physical left) — removed rather than repositioned. */
.account-inner__left::before {
  display: none;
}

/* main.css's autofill fix hardcodes the text itself to `--black` with
   `!important`, so autofilled fields (very common on login/register) go
   invisible-on-dark once the browser fills them in — that part this
   rule already corrected. But the field's actual fill in Chrome isn't
   controlled by `background-color` at all once autofilled: Chrome paints
   its own internal highlight layer that ignores it, and only responds to
   `-webkit-box-shadow`. main.css's box-shadow trick sets that inset
   shadow to `transparent` (correct for light mode, where the true white
   background shows through untouched) but was never overridden for dark
   mode, so autofilled fields stayed a bright white box regardless of
   theme — the bug this whole block was written to prevent, just for the
   background instead of the text. */
html[data-theme="dark"] body.is-public-frontend input:-webkit-autofill,
html[data-theme="dark"] body.is-public-frontend textarea:-webkit-autofill,
html[data-theme="dark"] body.is-public-frontend select:-webkit-autofill {
  -webkit-text-fill-color: hsl(var(--heading-text)) !important;
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--surface)) inset !important;
  caret-color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .account-form .radio-btn-wrapper .form--radio .form-check-label {
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .account-form .radio-btn-wrapper .form--radio .form-check-input {
  border-color: hsl(var(--border-color));
}

/* "I agree with ..." checkbox on register: its border is drawn at
   hsl(var(--black) / 0.2) in main.css, which reads as a faint dark line on
   light backgrounds but disappears entirely against the dark theme's
   near-black page, leaving the checkbox invisible until checked. */
html[data-theme="dark"] body.is-public-frontend .form--check .form-check-input {
  border-color: hsl(var(--border-color));
}

/* "or" divider between social login and the form: the text sits on a
   hardcoded white patch to mask the <hr> line behind it. */
html[data-theme="dark"] body.is-public-frontend .another-login .text {
  background-color: hsl(var(--surface));
  color: hsl(var(--text-color));
}

/* Password reset / verify-email / 2FA / banned pages use this generic
   Bootstrap-card wrapper instead of .account-form-wrapper. */
html[data-theme="dark"] body.is-public-frontend .custom--card,
html[data-theme="dark"] body.is-public-frontend .custom--card .card-body {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .custom--card .card-header {
  border-color: hsl(var(--border-color));
}

/* Email/mobile/2FA verification and password-reset code pages: the card
   itself (.verification-code-wrapper, from verification-code.css) is
   hardcoded to a permanent white background (`background-color: #fff`),
   but its heading/label/paragraph text reads the theme-aware
   --heading-text/--body-color tokens, which flip to near-white in dark
   mode. That leaves near-white text sitting on a permanent white card —
   invisible. Give the card a dark surface to match its already
   theme-aware text. */
html[data-theme="dark"] body.is-public-frontend .verification-code-wrapper {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .proposal-top-content h5 {
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color)) !important;
}

/* Cookie/Privacy/Terms policy pages: CMS rich-text headings render bare
   h1-h6 tags with no class, straight on the page body. */
html[data-theme="dark"] body.is-public-frontend .privacy-page h1,
html[data-theme="dark"] body.is-public-frontend .privacy-page h2,
html[data-theme="dark"] body.is-public-frontend .privacy-page h3,
html[data-theme="dark"] body.is-public-frontend .privacy-page h4,
html[data-theme="dark"] body.is-public-frontend .privacy-page h5,
html[data-theme="dark"] body.is-public-frontend .privacy-page h6 {
  color: hsl(var(--heading-text));
}

/* ========================= Dashboard header layout ========================= *
   Non-theme-dependent: main.css defines `.dashboard-header__right` with
   only `gap`, expecting a flex parent that was never wired up before this
   toggle/language group existed. */
.dashboard-header__right {
  display: flex;
  align-items: center;
}

.dashboard-header__toggles {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================= Dashboard dark mode =========================
   The freelancer/buyer dashboard (layouts.master / layouts.buyer_master)
   never included partials.header, so none of the is-public-frontend rules
   above ever reached it — same token system, new body-class scope. */
html[data-theme="dark"] body.is-dashboard {
  --base-h: 152;
  --base-s: 62%;
  --base-l: 46%;
  --base-two-h: 153;
  --base-two-s: 55%;
  --base-two-l: 24%;

  --surface: 40 8% 16%;
  --heading-text: 45 20% 95%;
  --body-bg: 40 10% 11%;
  --body-color: 45 8% 68%;
  --text-color: 45 8% 68%;
  --border-color: 45 8% 24%;
  --section-bg: 150 15% 13%;
}

/* Shared low-level components (forms, empty-states, select2, language
   switcher) reused verbatim from the public pages — same fix applies. */
html[data-theme="dark"] body.is-dashboard .form--control {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .form--control::placeholder {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-dashboard .form--control:disabled,
html[data-theme="dark"] body.is-dashboard .form--control[readonly] {
  background-color: hsl(var(--body-bg));
}

html[data-theme="dark"] body.is-dashboard .form--label {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .text-muted {
  color: hsl(var(--text-color)) !important;
}

html[data-theme="dark"] body.is-dashboard .empty-message {
  background: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .empty-message h6 {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-dashboard .dropdown-list > .dropdown-list__item .text,
html[data-theme="dark"] body.is-dashboard .custom--dropdown > .custom--dropdown__selected .text,
html[data-theme="dark"] body.is-dashboard .custom--dropdown__selected.dropdown-list__item .text {
  color: hsl(var(--heading-text)) !important;
}

html[data-theme="dark"] body.is-dashboard .custom--dropdown > .dropdown-list {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .custom--dropdown.open > .dropdown-list {
  background-color: hsl(var(--surface)) !important;
}

html[data-theme="dark"] body.is-dashboard .select2-container--default .select2-selection--single {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color)) !important;
}

html[data-theme="dark"] body.is-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: hsl(var(--heading-text));
}

/* Multi-select/tags variant (e.g. the corporation profile's "Language"
   field and the student profile's "Skills" field) — only the single-select
   variant above was themed, so this rendered as a plain white box. */
html[data-theme="dark"] body.is-dashboard .select2-container--default .select2-selection--multiple {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color)) !important;
}

html[data-theme="dark"] body.is-dashboard .select2-selection--multiple .select2-selection__choice {
  background-color: hsl(var(--body-bg));
  border-color: hsl(var(--border-color));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .select2-selection--multiple .select2-selection__choice__remove {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-dashboard .select2-selection--multiple .select2-search--inline .select2-search__field {
  background-color: transparent;
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .select2-dropdown {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-dashboard .select2-results__option {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .select2-search--dropdown .select2-search__field {
  background-color: hsl(var(--body-bg));
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color)) !important;
}

/* Same background gap as the public-frontend autofill fix above — Chrome
   ignores background-color on autofilled fields and only responds to
   -webkit-box-shadow, which was never dark-mode-overridden here either. */
html[data-theme="dark"] body.is-dashboard input:-webkit-autofill,
html[data-theme="dark"] body.is-dashboard textarea:-webkit-autofill,
html[data-theme="dark"] body.is-dashboard select:-webkit-autofill {
  -webkit-text-fill-color: hsl(var(--heading-text)) !important;
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--surface)) inset !important;
  caret-color: hsl(var(--heading-text));
}

/* ApexCharts' own export menu (chart "..." icon → Download SVG/PNG/CSV) is
   a third-party-rendered popup with its own hardcoded white background —
   never covered by this pass since it doesn't exist in markup until the
   chart library injects it at runtime. */
html[data-theme="dark"] body.is-dashboard .apexcharts-menu {
  background: hsl(var(--surface)) !important;
  border-color: hsl(var(--border-color)) !important;
}

html[data-theme="dark"] body.is-dashboard .apexcharts-menu-item {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .apexcharts-menu-item:hover {
  background: hsl(var(--body-bg));
}

/* Dashboard-specific white surfaces (header bar, stat widgets, chart card,
   delivery-list card, table) — same "hardcoded --white card" pattern
   already migrated on the public side, mirrored here. */
html[data-theme="dark"] body.is-dashboard .dashboard-header,
html[data-theme="dark"] body.is-dashboard .dashboard-widget,
html[data-theme="dark"] body.is-dashboard .chart-box,
html[data-theme="dark"] body.is-dashboard .dashboard-item,
html[data-theme="dark"] body.is-dashboard .dashboard-table,
html[data-theme="dark"] body.is-dashboard .custom--card,
html[data-theme="dark"] body.is-dashboard .custom--card .card-body {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .custom--card .card-header {
  border-color: hsl(var(--border-color));
}

/* Bootstrap `.table` (used inside .dashboard-table for bids/projects/
   transactions lists): hardcoded white header/body + heading-color text. */
html[data-theme="dark"] body.is-dashboard .table thead tr th,
html[data-theme="dark"] body.is-dashboard .table tbody {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .table thead tr th,
html[data-theme="dark"] body.is-dashboard .table tbody tr td,
html[data-theme="dark"] body.is-dashboard .table tbody tr td::before {
  color: hsl(var(--heading-text));
  border-color: hsl(var(--border-color)) !important;
}

/* User menu (top-right avatar dropdown): link/name text reads frozen
   heading-color; dropdown panel itself already rides --section-bg. */
html[data-theme="dark"] body.is-dashboard .user-info .user-info-dropdown__link {
  color: hsl(var(--heading-text)) !important;
}

html[data-theme="dark"] body.is-dashboard .user-info__name {
  color: hsl(var(--heading-text));
}

/* Bootstrap modals (KYC rejection reason, profile-completion guide, etc.)
   use Bootstrap's own hardcoded `--bs-modal-bg`/`--bs-modal-color`. */
html[data-theme="dark"] body.is-dashboard .modal-content {
  background-color: hsl(var(--surface));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .custom--modal .modal-header,
html[data-theme="dark"] body.is-dashboard .custom--modal .modal-footer {
  border-color: hsl(var(--border-color));
}

/* Blanket fix for the frozen global `h1..h6 { color: heading-color }`
   rule: the dashboard has many bare, unclassed headings across pages this
   pass can't individually audit (modals, step wizards, cards). Any
   heading that's deliberately meant to stay a fixed color already has its
   own higher-specificity class rule (e.g. `.upgrade-profile__content
   .title`, three classes) that wins over this plain-tag selector. */
html[data-theme="dark"] body.is-dashboard h1,
html[data-theme="dark"] body.is-dashboard h2,
html[data-theme="dark"] body.is-dashboard h3,
html[data-theme="dark"] body.is-dashboard h4,
html[data-theme="dark"] body.is-dashboard h5,
html[data-theme="dark"] body.is-dashboard h6 {
  color: hsl(var(--heading-text));
}

/* Dashboard page title (top bar, e.g. "Bid List", "Transactions") — an h6
   with no color of its own, falls back to the frozen global h1-h6 rule. */
html[data-theme="dark"] body.is-dashboard .dashboard-header__left .title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .dashboard-body__bar-icon {
  color: hsl(var(--heading-text));
}

/* Remaining `--heading-color` text usages across main.css found by a full
   sweep, not caught by the component-level fixes above. Most are
   dashboard-only (project/bid/chat detail pages); a few — profile pages,
   category sidebar filter label, search icon, job list links, generic
   `.text-wrapper` — also render on public pages, so both scopes get them
   rather than auditing each one's exact reach. */
html[data-theme="dark"] body.is-public-frontend .custom--dropdown > .custom--dropdown__selected::before,
html[data-theme="dark"] body.is-dashboard .custom--dropdown > .custom--dropdown__selected::before {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .profile-wrapper__body .body-content .proficiency-wrapper__title,
html[data-theme="dark"] body.is-dashboard .profile-wrapper__body .body-content .proficiency-wrapper__title,
html[data-theme="dark"] body.is-public-frontend .profile-wrapper__body .review-content__name,
html[data-theme="dark"] body.is-dashboard .profile-wrapper__body .review-content__name {
  color: hsl(var(--heading-text));
}

/* .profile-wrapper__profile (the talent/company profile banner card) uses
   the "always dark" tokens (--white text, --heading-color background)
   instead of the theme-aware --surface/--heading-text pair its sibling
   card (.profile-wrapper__body, fixed above) uses — so unlike that one,
   it renders as a solid black card with invisible white-on-white controls
   in light mode instead of a normal light card. Both token pairs resolve
   dark in dark mode, so this fix is unscoped rather than dark-mode-only. */
.profile-wrapper__profile {
  background-color: hsl(var(--surface));
}

.profile-wrapper__profile .profile-content__name,
.profile-wrapper__profile .profile-content__title,
.profile-wrapper__profile .profile-content__info .info-item__text {
  color: hsl(var(--heading-text));
}

.profile-wrapper .profile-action-btn__bid {
  border-color: hsl(var(--heading-text) / 0.5);
  /* .btn forces color: white !important sitewide (its default-filled-button
     look); this ghost-style button needs its own !important to win. */
  color: hsl(var(--heading-text)) !important;
}

.profile-wrapper .profile-action-btn__share {
  background: hsl(var(--heading-text) / 0.08);
}

/* The share button (35px) and "Invite to bid" button (42px incl. border)
   are different heights, but the row aligns them to flex-start, so the
   shorter share button visibly sits higher than the button instead of
   level with it. */
.profile-wrapper .profile-action-btn {
  align-items: center;
}

html[data-theme="dark"] body.is-public-frontend .sidebar-wrapper .sidebar-item__title,
html[data-theme="dark"] body.is-dashboard .sidebar-wrapper .sidebar-item__title,
html[data-theme="dark"] body.is-public-frontend .sidebar-wrapper .sidebar-item__verify .verify-item__title,
html[data-theme="dark"] body.is-dashboard .sidebar-wrapper .sidebar-item__verify .verify-item__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .buyer-info-item .buyer-info__name,
html[data-theme="dark"] body.is-dashboard .buyer-info-item .buyer-info__name,
html[data-theme="dark"] body.is-public-frontend .job-list__link,
html[data-theme="dark"] body.is-dashboard .job-list__link {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .category-sidebar .sidebar-header__filter,
html[data-theme="dark"] body.is-public-frontend .job-category-wrapper .job-category-body__top .search-container__icon {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .expert-developer .left .text,
html[data-theme="dark"] body.is-dashboard .expert-developer .left .text,
html[data-theme="dark"] body.is-public-frontend .expert-developer .right .bid-price,
html[data-theme="dark"] body.is-dashboard .expert-developer .right .bid-price,
html[data-theme="dark"] body.is-public-frontend .expert-developer .right .total-bid,
html[data-theme="dark"] body.is-dashboard .expert-developer .right .total-bid,
html[data-theme="dark"] body.is-public-frontend .expert-developer__time,
html[data-theme="dark"] body.is-dashboard .expert-developer__time,
html[data-theme="dark"] body.is-public-frontend .expert-developer__title,
html[data-theme="dark"] body.is-dashboard .expert-developer__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .details-item__key .title,
html[data-theme="dark"] body.is-dashboard .details-item__key .title,
html[data-theme="dark"] body.is-public-frontend .project-info__icon,
html[data-theme="dark"] body.is-dashboard .project-info__icon,
html[data-theme="dark"] body.is-public-frontend .project-info__item .title,
html[data-theme="dark"] body.is-dashboard .project-info__item .title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .skill-expert-wrapper .skill-wrapper__title,
html[data-theme="dark"] body.is-dashboard .skill-expert-wrapper .skill-wrapper__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .bid-item__number,
html[data-theme="dark"] body.is-dashboard .bid-item__name,
html[data-theme="dark"] body.is-dashboard .bid-item .freelancer-title,
html[data-theme="dark"] body.is-dashboard .bid-job-item__text {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .proposal-wrapper .form--radio .form-check-label {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .profile-category__title,
html[data-theme="dark"] body.is-dashboard .profile-category__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .price-rate__title,
html[data-theme="dark"] body.is-dashboard .price-rate__text,
html[data-theme="dark"] body.is-dashboard .price-rate__right .rate,
html[data-theme="dark"] body.is-dashboard .price-rate__right .time,
html[data-theme="dark"] body.is-dashboard .attachment .title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .project-details .project-info__title,
html[data-theme="dark"] body.is-dashboard .project-details .inner-content__text,
html[data-theme="dark"] body.is-dashboard .profile-bio__item .text,
html[data-theme="dark"] body.is-dashboard .page-list .nav-item .profile-item__title,
html[data-theme="dark"] body.is-dashboard .project-category__title {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .text-wrapper .text,
html[data-theme="dark"] body.is-dashboard .text-wrapper .text {
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-dashboard .chat-item .title,
html[data-theme="dark"] body.is-dashboard .chat-item .time,
html[data-theme="dark"] body.is-dashboard .single-message .message-text,
html[data-theme="dark"] body.is-dashboard .chating-btn svg {
  color: hsl(var(--heading-text));
}

/* Container backgrounds for the text-color fixes above: these cards were
   always a hardcoded white `--white` regardless of theme (never fixed by
   the public-page pass since they're dashboard-only), so pairing them
   with the new light `--heading-text` made the text invisible instead of
   just visually inconsistent. Give the card itself a dark surface too. */
html[data-theme="dark"] body.is-public-frontend .profile-bio,
html[data-theme="dark"] body.is-dashboard .profile-bio,
html[data-theme="dark"] body.is-public-frontend .expert-developer,
html[data-theme="dark"] body.is-dashboard .expert-developer,
html[data-theme="dark"] body.is-public-frontend .bid-job-item,
html[data-theme="dark"] body.is-dashboard .bid-job-item,
html[data-theme="dark"] body.is-public-frontend .project-details,
html[data-theme="dark"] body.is-dashboard .project-details,
html[data-theme="dark"] body.is-public-frontend .details-item,
html[data-theme="dark"] body.is-dashboard .details-item,
html[data-theme="dark"] body.is-public-frontend .sidebar-wrapper .sidebar-item,
html[data-theme="dark"] body.is-dashboard .sidebar-wrapper .sidebar-item {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .expert-developer,
html[data-theme="dark"] body.is-dashboard .expert-developer,
html[data-theme="dark"] body.is-public-frontend .bid-job-item,
html[data-theme="dark"] body.is-dashboard .bid-job-item,
html[data-theme="dark"] body.is-public-frontend .details-item,
html[data-theme="dark"] body.is-dashboard .details-item {
  border-color: hsl(var(--border-color));
}

/* Chat: sticky message-input bar (hardcoded `#fff`) and the "their
   message" bubble (hardcoded light blue `#e2eefd`). The tiny bubble-tail
   corner triangles keep their light-mode hex accents — a minor, low-
   visibility known gap rather than chasing every pseudo-element. */
html[data-theme="dark"] body.is-dashboard .chat-box {
  background: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-dashboard .single-message.message--right .message-content {
  background-color: hsl(var(--base) / 0.18);
  border-color: hsl(var(--base) / 0.18);
}

/* The message-input bar itself: main.css pins its background to a literal
   `#fff` with !important, which the .form--control dark override above
   can't beat on specificity/!important grounds. */
html[data-theme="dark"] body.is-dashboard .chat-send-field textarea.form--control {
  background-color: hsl(var(--surface)) !important;
  border-color: hsl(var(--border-color)) !important;
  color: hsl(var(--heading-text));
}

/* The bar *wrapping* the message input (padding around it) is a second,
   separate white fill — not covered by the textarea fix above. It comes
   from an inline <style> block duplicated in both
   buyer/conversation/index.blade.php and user/conversation/index.blade.php
   (`.chat-box__footer { background: #fff; }`), which loads after this
   stylesheet, so needs !important to win. */
html[data-theme="dark"] body.is-dashboard .chat-box__footer {
  background: hsl(var(--surface)) !important;
  border-color: hsl(var(--border-color)) !important;
}

/* Conversation list panel (left column: search box + thread list). */
html[data-theme="dark"] body.is-dashboard .chatboard-chat-left,
html[data-theme="dark"] body.is-dashboard .chatboard-chat-left__search {
  background: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .chat-item .desc {
  color: hsl(var(--text-color));
}

/* Buyer dashboard "latest jobs"/list-table card wrapper (used across
   several buyer dashboard pages for table sections). */
html[data-theme="dark"] body.is-dashboard .table-wrapper {
  background: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-dashboard .table-wrapper-header {
  border-color: hsl(var(--border-color));
}

/* Deposit/withdraw amount card and payment-gateway picker: hardcoded
   hsl(var(--white)) in main.css, never re-pointed at the dark surface
   token, so both panels stayed a plain white card on the dark dashboard. */
html[data-theme="dark"] body.is-dashboard .payment-system-list {
  background-color: hsl(var(--surface));
}

/* .info-text/.deposit-info__input labels (amount, limit, processing fee)
   are pinned to literal hsl(var(--black)) — correct against the white card
   above in light mode, but left as dark-on-dark once that card goes dark. */
html[data-theme="dark"] body.is-dashboard .info-text .text,
html[data-theme="dark"] body.is-dashboard .deposit-info__input .text {
  color: hsl(var(--heading-text));
}

/* ========================= Final white-card sweep =========================
   A comprehensive grep of every remaining `background: hsl(var(--white))`
   in main.css, filtered down to selectors actually referenced by current
   blade views (dead/legacy classes like `.facility-wrapper`, `.user-profile`,
   `.cmn-btn`, `.trust-section`, `.client-slider` excluded — unused). */
html[data-theme="dark"] body.is-public-frontend .job-post-content,
html[data-theme="dark"] body.is-dashboard .job-post-content {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

html[data-theme="dark"] body.is-public-frontend .empty-message,
html[data-theme="dark"] body.is-dashboard .empty-message {
  background: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .empty-message h6 {
  color: hsl(var(--text-color));
}

html[data-theme="dark"] body.is-public-frontend .header.fixed-header {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-dashboard .action-btn .action-dropdown {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .search-container .form--control {
  background-color: hsl(var(--surface));
  color: hsl(var(--heading-text));
}

html[data-theme="dark"] body.is-public-frontend .profile-wrapper__body,
html[data-theme="dark"] body.is-dashboard .profile-wrapper__body {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .contact-item-wrapper {
  background-color: hsl(var(--surface));
}

html[data-theme="dark"] body.is-public-frontend .blog-sidebar {
  background-color: hsl(var(--surface));
  border-color: hsl(var(--border-color));
}

/* Profile settings sidebar card (avatar + name), inside .custom--card. */
html[data-theme="dark"] body.is-dashboard .user-profile {
  background-color: hsl(var(--surface));
}

/* ========================= Dashboard RTL layout ========================= */
/* main.css pins the dashboard sidebar with a physical `left: 0` and gives
   the content pane a matching `margin-left: 300px`, so in Arabic the sidebar
   still sits on the left instead of the right. Mirror both for RTL. */
[dir="rtl"] .dashboard .sidebar-menu {
  left: auto;
  right: 0;
}

[dir="rtl"] .dashboard__right {
  margin-left: 0;
  margin-right: 300px;
}

@media screen and (max-width: 991px) {
  [dir="rtl"] .dashboard__right {
    margin-right: 0;
  }

  /* Off-canvas sidebar slides in from the edge it's pinned to — now the
     right edge in RTL, so the hidden state needs to translate the other way. */
  [dir="rtl"] .dashboard .sidebar-menu {
    transform: translateX(100%);
  }

  [dir="rtl"] .dashboard .sidebar-menu.show-sidebar {
    transform: translateX(0);
  }
}

/* The close (X) button sits 16px from the sidebar's inner edge (the one
   facing the main content). That's the right edge when the sidebar is on
   the left; flip it to the left edge now that the sidebar is on the right. */
[dir="rtl"] .dashboard .sidebar-menu__close {
  right: auto;
  left: 16px;
}

/* Table row action menu (.action-dropdown) is pinned with a physical
   `right: 0` against its trigger button, so it always opens toward the
   left. In LTR that button sits in the table's last (rightmost) column,
   leaving room to open leftward. In RTL that same column becomes the
   table's leftmost, so the 200px-wide menu opens off the edge of the
   viewport instead of into the table. Anchor it from the left instead. */
[dir="rtl"] .dashboard .action-btn .action-dropdown {
  right: auto;
  left: 0;
}

[dir="rtl"] .table tbody tr:nth-last-child(2) .action-dropdown {
  right: auto !important;
  left: 24px;
}

/* Sidebar dropdown items (المهام, سحب, تذكرة الدعم, الإعدادات, ...) get a
   collapse/expand chevron via ::after, hardcoded as the right-pointing
   Font Awesome glyph \f105 pinned 16px from the link's right edge. That
   reads correctly in LTR (arrow points toward where the submenu opens,
   at the trailing edge). In RTL the sidebar and its text both flip, but
   this arrow never did: it stays right-pointing and pinned to the link's
   right edge, which is now the sidebar's outer edge — stranded past the
   item's own icon and label instead of sitting at the reading-trailing
   (left) edge next to them. Mirror the glyph and reposition it. */
[dir="rtl"] .dashboard .sidebar-menu-list__item.has-dropdown > a:after {
  content: "\f104";
  right: auto;
  left: 16px;
}

[dir="rtl"] .dashboard .sidebar-menu-list__item.has-dropdown.active > a:after {
  right: auto;
  left: 18px;
}

/* Header row: .dashboard-header__left (title) and __right (theme/language
   toggles + notifications + avatar) are laid out with justify-content:
   space-between, so bidi auto-mirroring in RTL puts the toggles/avatar
   cluster on the left — away from the sidebar, which is now on the right.
   Reorder so that cluster renders first in flex flow, which lands it on
   the right (the RTL inline-start) next to the sidebar, title on the left. */
[dir="rtl"] .dashboard-header__right {
  order: -1;
}