/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !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 .3s;
  -o-transition: all .3s;
  transition: all .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: #FF7000;
  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 {
  width: 520px;
  padding: 30px;
  color: #1E2337;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all .5s;
  background: #d1d1d1;
  border-radius: 5px;
}

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

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

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  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;
  }
}

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

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 80%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px !important;
  -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;
  }
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  opacity: 0.5;
  background-color: hsl(var(--black) / 0.5);
  border-color: hsl(var(--black) / 0.01);
}

.h-45 {
  height: 50px;
}

.h-none {
  height: 37px !important;
}

.input-group-text {
  color: #747474;
  background-color: #fff;
  border-color: hsl(var(--black) / 0.08);
  transition: all linear .15s;
}

.account-form .input-group-text {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15);
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-left: 0;
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-right: 0;
}

@media screen and (min-width:768px) and (max-width:1024px) {
  .hover-input-popup .input-popup {
    left: 70% !important;
  }
}

.input-group-text.removeFile{
  border-color: hsl(var(--black) / 0.1) !important;
  border-style: dashed;
}


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

/* ==========================================================================
   Hord Credit Union — brand refresh
   Institutional navy + brass accent, serif/sans pairing, quieter cards.
   Additive only — does not modify main.css or the dynamic color system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --heading-font: "Fraunces", serif;
  --body-font: "Public Sans", sans-serif;

  /* Warm paper background instead of stark white/cyan-tinted sections */
  --section-bg: 40 20% 96%;
}

body {
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.banner-content__title,
.section-heading__title {
  font-family: var(--heading-font);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Tame the default eyebrow-label treatment to feel institutional, not SaaS */
.section-heading__subtitle {
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: hsl(var(--base-two));
}

/* Buttons: brass accent reserved for primary actions only */
.btn--base {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  font-family: var(--body-font);
  font-weight: 600;
}

.btn--base:hover {
  background-color: hsl(var(--base) / 0.88);
  border-color: hsl(var(--base) / 0.88);
}

/* Service cards: differentiate with a top accent border instead of
   identical drop shadows on every card */
.service-card {
  box-shadow: none;
  border: 1px solid hsl(var(--border-color));
  border-top: 3px solid hsl(var(--base-two));
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-top-color: hsl(var(--base));
}

.service-card__icon {
  color: hsl(var(--base));
}

/* Section rhythm: slightly tighter, more deliberate spacing */
.services-section,
.about-section,
.fdr-plans-section,
.dps-plans-section,
.loan-plans-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Stat / counter numbers: let the serif carry weight here rather than
   an oversized generic sans-bold treatment */
.counter-item__number,
.happy-user__title {
  font-family: var(--heading-font);
  font-weight: 600;
}

/* ==========================================================================
   Hord shared design system — used across dashboard, savings, cards, etc.
   ========================================================================== */
        .hord-greeting {
            margin-bottom: 20px;
        }

        .hord-greeting__title {
            font-family: Georgia, 'Times New Roman', serif;
            color: #14315B;
            font-size: 1.7rem;
            margin-bottom: 2px;
        }

        .hord-greeting__sub {
            color: #8a94a6;
            font-size: 0.85rem;
            margin-bottom: 0;
        }

        .hord-trust-note {
            font-size: 0.75rem;
            color: #8a94a6;
            margin: 10px 2px 0;
        }

        .hord-alert {
            border-radius: 12px;
            padding: 18px 22px;
            margin-bottom: 24px;
            background: #fff;
            border: 1px solid #eceef1;
            border-left: 3px solid #2DD4BF;
        }

        .hord-alert__title {
            font-family: Georgia, 'Times New Roman', serif;
            color: #14315B;
            font-weight: 700;
            margin-bottom: 6px;
        }

        /* Virtual card */
        .hord-card {
            background: linear-gradient(135deg, #14315B 0%, #0c2140 100%);
            border-radius: 18px;
            padding: 30px;
            color: #fff;
            min-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            box-shadow: 0 12px 30px rgba(20, 49, 91, 0.25);
        }

        .hord-card::after {
            content: "";
            position: absolute;
            right: -60px;
            top: -60px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(45, 212, 191, 0.12);
        }

        .hord-card__top {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-family: Georgia, 'Times New Roman', serif;
        }

        .hord-card__brand {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .hord-card__brand-sub {
            font-size: 0.72rem;
            letter-spacing: 2px;
            color: #2DD4BF;
        }

        .hord-card__chip {
            width: 44px;
            height: 32px;
            border-radius: 6px;
            margin-top: 20px;
            background: linear-gradient(135deg, #2DD4BF, #14B8A6);
        }

        .hord-card__number {
            margin-top: 24px;
            font-size: 1.2rem;
            letter-spacing: 3px;
            font-family: 'Courier New', monospace;
        }

        .hord-card__bottom {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 20px;
        }

        .hord-card__label {
            font-size: 0.72rem;
            color: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hord-card__balance {
            color: #fff;
            margin-bottom: 0;
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 2.4rem;
            font-weight: 600;
        }

        .hord-card__name {
            font-weight: 600;
        }

        /* Action strip under the card */
        .hord-action-strip {
            display: flex;
            gap: 10px;
            margin-top: 14px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .hord-action-strip__item {
            flex: 1 0 auto;
            min-width: 84px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 14px 10px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #eceef1;
            color: #14315B;
            font-size: 0.78rem;
            font-weight: 600;
            text-align: center;
            transition: 0.2s;
        }

        .hord-action-strip__item:hover {
            background: #14315B;
            border-color: #14315B;
            color: #fff;
        }

        .hord-action-strip__icon {
            font-size: 1.25rem;
        }

        /* Generic panel */
        .hord-panel {
            background: #fff;
            border: 1px solid #eceef1;
            border-radius: 14px;
            padding: 24px;
        }

        .hord-panel__title {
            font-family: Georgia, 'Times New Roman', serif;
            color: #14315B;
            margin-bottom: 14px;
        }

        .hord-detail-list {
            list-style: none;
            padding: 0;
            margin: 0 0 16px 0;
        }

        .hord-detail-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.9rem;
        }

        .hord-detail-list li:last-child {
            border-bottom: none;
        }

        .hord-detail-list li span {
            color: #8a94a6;
        }

        .hord-btn {
            display: block;
            text-align: center;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .hord-btn--dark {
            background: #14315B;
            color: #fff;
        }

        .hord-btn--dark:hover {
            background: #0c2140;
            color: #fff;
        }

        /* Stat row: flex-wrap, natural widths — never leaves a lopsided gap */
        .hord-stat-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 24px;
        }

        .hord-stat-row__refer {
            flex: 1 1 100%;
        }

        .hord-stat {
            flex: 1 1 220px;
            max-width: 280px;
            display: flex;
            align-items: center;
            gap: 14px;
            background: #fff;
            border: 1px solid #eceef1;
            border-radius: 14px;
            padding: 18px;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        .hord-stat:hover {
            transform: translateY(-2px);
            border-color: #2DD4BF;
        }

        .hord-stat__icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(20, 49, 91, 0.08);
            color: #14315B;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .hord-stat__number {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #14315B;
            line-height: 1.2;
        }

        .hord-stat__label {
            font-size: 0.78rem;
            color: #8a94a6;
        }

        .hord-refer-link {
            font-size: 0.85rem;
            color: #14315B;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 320px;
        }

        .hord-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: #F7F6F3;
            color: #14315B;
            flex-shrink: 0;
        }

        .hord-icon-btn:hover {
            background: #14315B;
            color: #fff;
        }

        .hord-chart-box {
            position: relative;
            height: 260px;
            width: 100%;
        }

        .hord-chart-empty {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #b7bec9;
        }

        .hord-chart-empty i {
            font-size: 2rem;
        }

        .hord-chart-empty p {
            margin: 0;
            font-size: 0.85rem;
        }

        /* Plain, normal-flow empty state (activity list) — deliberately NOT
           position:absolute, unlike .hord-chart-empty above, since it isn't
           overlaying anything and needs to sit in document flow. */
        .hord-empty-inline {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #b7bec9;
            padding: 50px 0;
            text-align: center;
        }

        .hord-empty-inline i {
            font-size: 2rem;
        }

        .hord-empty-inline p {
            margin: 0;
            font-size: 0.85rem;
        }

        /* Activity feed */
        .hord-activity-list__item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .hord-activity-list__item:last-child {
            border-bottom: none;
        }

        .hord-activity-list__icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hord-activity-list__icon--credit {
            background: rgba(20, 49, 91, 0.1);
            color: #14315B;
        }

        .hord-activity-list__icon--debit {
            background: rgba(45, 212, 191, 0.15);
            color: #2DD4BF;
        }

        .hord-activity-list__mid {
            flex: 1;
            min-width: 0;
        }

        .hord-activity-list__remark {
            font-size: 0.88rem;
            font-weight: 600;
            color: #222;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hord-activity-list__date {
            font-size: 0.75rem;
            color: #8a94a6;
        }

        .hord-activity-list__amount--credit {
            color: #14315B;
            font-weight: 700;
        }

        .hord-activity-list__amount--debit {
            color: #2DD4BF;
            font-weight: 700;
        }

.hord-card--savings {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
    border-radius: 18px;
    padding: 28px;
    color: #fff;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hord-empty-icon {
    display: block;
    font-size: 2rem;
    color: #2DD4BF;
    margin-bottom: 10px;
}

.hord-card--virtual {
    background: linear-gradient(135deg, #1c2b45 0%, #0c1420 100%);
    min-height: 200px;
    position: relative;
}

.hord-card--frozen {
    filter: grayscale(0.7);
    opacity: 0.7;
}

.hord-card__frozen-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
}

.hord-btn--outline {
    background: #fff;
    border: 1px solid #14315B;
    color: #14315B;
}

.hord-btn--outline:hover {
    background: #14315B;
    color: #fff;
}

.hord-order-status {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hord-order-status__step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 24px;
    position: relative;
}

.hord-order-status__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: #eceef1;
}

.hord-order-status__step.is-done:not(:last-child)::before {
    background: #14315B;
}

.hord-order-status__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F7F6F3;
    color: #b7bec9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    z-index: 1;
}

.hord-order-status__step.is-done .hord-order-status__dot {
    background: #14315B;
    color: #fff;
}

.hord-order-status__step.is-active .hord-order-status__dot {
    background: #2DD4BF;
    color: #fff;
}

.hord-order-status__label {
    font-weight: 600;
    color: #222;
    font-size: 0.92rem;
}

.hord-order-status__date {
    font-size: 0.8rem;
    color: #8a94a6;
    margin-top: 2px;
}

.hord-detail-list__row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.hord-detail-list__row:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Dark mode toggle switch (sidebar control)
   ========================================================================== */
.hord-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 0.85rem;
    color: #5f5e5a;
    border-top: 1px solid #f0f0f0;
}

.hord-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.hord-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.hord-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d3d1c7;
    border-radius: 22px;
    transition: 0.2s;
}

.hord-switch__slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.hord-switch input:checked+.hord-switch__slider {
    background-color: #14315B;
}

.hord-switch input:checked+.hord-switch__slider::before {
    transform: translateX(18px);
}

/* ==========================================================================
   Dark mode overrides — scoped to the dashboard area (Dashboard, Savings,
   Cards, sidebar, header). Other pre-existing pages (Deposit, Withdraw,
   Loan, etc.) are not yet covered by this pass and will still show light.
   ========================================================================== */
body[data-theme="dark"] {
    background-color: #0B1220;
}

body[data-theme="dark"] .dashboard,
body[data-theme="dark"] .dashboard-body {
    background-color: #0B1220;
}

body[data-theme="dark"] .sidebar-menu,
body[data-theme="dark"] .dashboard-header {
    background-color: #0F1729;
    border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .sidebar-menu-list__link .text,
body[data-theme="dark"] .sidebar-menu-list__link .icon {
    color: #8B93A7;
}

body[data-theme="dark"] .sidebar-menu-list__item.active .sidebar-menu-list__link,
body[data-theme="dark"] .sidebar-menu-list__link:hover {
    color: #F1F3F6;
}

body[data-theme="dark"] .hord-theme-toggle {
    color: #8B93A7;
    border-top-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .hord-panel,
body[data-theme="dark"] .hord-stat,
body[data-theme="dark"] .hord-action-strip__item,
body[data-theme="dark"] .hord-alert {
    background-color: #131B2E;
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .hord-panel__title,
body[data-theme="dark"] .hord-greeting__title,
body[data-theme="dark"] .hord-stat__number,
body[data-theme="dark"] .hord-detail-list li strong,
body[data-theme="dark"] .hord-activity-list__remark,
body[data-theme="dark"] .hord-order-status__label,
body[data-theme="dark"] .hord-action-strip__item {
    color: #F1F3F6;
}

body[data-theme="dark"] .hord-greeting__sub,
body[data-theme="dark"] .hord-stat__label,
body[data-theme="dark"] .hord-detail-list li span,
body[data-theme="dark"] .hord-trust-note,
body[data-theme="dark"] .hord-activity-list__date,
body[data-theme="dark"] .hord-order-status__date,
body[data-theme="dark"] text-muted {
    color: #8B93A7;
}

body[data-theme="dark"] .hord-detail-list li,
body[data-theme="dark"] .hord-activity-list__item,
body[data-theme="dark"] .hord-order-status__step:not(:last-child)::before {
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .hord-action-strip__item:hover {
    background-color: #14315B;
    color: #fff;
}

body[data-theme="dark"] .hord-stat:hover {
    border-color: #2DD4BF;
}

body[data-theme="dark"] .hord-order-status__dot {
    background-color: #1c2740;
    color: #5f6b85;
}

/* ==========================================================================
   Mobile responsiveness for the Hord dashboard components — these were
   never given phone-specific rules before, which is a real gap.
   ========================================================================== */
@media (max-width: 767px) {
    .hord-card {
        padding: 20px;
        min-height: auto;
    }

    .hord-card__balance {
        font-size: 1.8rem;
    }

    .hord-card__number {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .hord-greeting__title {
        font-size: 1.3rem;
    }

    .hord-panel {
        padding: 16px;
    }

    .hord-action-strip {
        gap: 8px;
    }

    .hord-action-strip__item {
        min-width: 72px;
        padding: 10px 6px;
        font-size: 0.7rem;
    }

    .hord-action-strip__icon {
        font-size: 1.05rem;
    }

    .hord-stat-row {
        gap: 10px;
    }

    .hord-stat {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .hord-stat__number {
        font-size: 1.05rem;
    }

    .hord-order-status__label {
        font-size: 0.85rem;
    }

    .hord-detail-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ==========================================================================
   Notification preference toggle rows
   ========================================================================== */
.hord-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.hord-toggle-row__label {
    font-weight: 600;
    color: #222;
    font-size: 0.92rem;
}

.hord-toggle-row__sub {
    font-size: 0.8rem;
    color: #8a94a6;
    margin-top: 2px;
    max-width: 420px;
}

/* ==========================================================================
   Dark mode — extended to cover stock pages (Transfer, Transactions,
   Deposit, Support, Settings) using the template's own shared classes,
   not just the new hord-* components.
   ========================================================================== */
body[data-theme="dark"] .card.custom--card,
body[data-theme="dark"] .card-header,
body[data-theme="dark"] .card-footer,
body[data-theme="dark"] .card-body {
    background-color: #131B2E;
    border-color: rgba(255, 255, 255, 0.08);
    color: #F1F3F6;
}

body[data-theme="dark"] .table {
    color: #F1F3F6;
}

body[data-theme="dark"] .table thead th {
    background-color: #0F1729;
    color: #8B93A7;
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .table td,
body[data-theme="dark"] .table th {
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] textarea {
    background-color: #0F1729;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F1F3F6;
}

body[data-theme="dark"] .form-control::placeholder {
    color: #5f6b85;
}

body[data-theme="dark"] .btn-outline--base {
    color: #F1F3F6;
    border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="dark"] .btn-outline--base:hover {
    background-color: #14315B;
    border-color: #14315B;
}

body[data-theme="dark"] .hord-toggle-row {
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .hord-toggle-row__label {
    color: #F1F3F6;
}

body[data-theme="dark"] .hord-toggle-row__sub,
body[data-theme="dark"] .text-muted {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .dashboard-widget {
    background-color: #131B2E;
    border-color: rgba(255, 255, 255, 0.08);
    color: #F1F3F6;
}

/* Fix: logout area was still showing a white background in dark mode */
body[data-theme="dark"] .user-logout {
    background-color: #0F1729;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .logout-btn,
body[data-theme="dark"] .logout-btn .icon,
body[data-theme="dark"] .logout-btn .text {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .logout-btn:hover {
    color: #F1F3F6 !important;
}

/* ==========================================================================
   Homepage hero — floating checking/activity cards
   ========================================================================== */
.hord-hero {
    background-color: #0B1220 !important;
    padding: 100px 0 120px;
}

.hord-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #2DD4BF;
    background: rgba(45, 212, 191, 0.1);
    border: 1px solid rgba(45, 212, 191, 0.25);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    font-family: var(--body-font);
}

.hord-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2DD4BF;
}

.hord-hero__title {
    color: #F1F3F6 !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    font-size: 3rem;
    line-height: 1.15;
}

.hord-hero__desc {
    color: #8B93A7;
    font-size: 1.05rem;
    max-width: 460px;
    margin: 20px 0 30px;
}

.hord-hero__ghost-btn {
    color: #F1F3F6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
}

.hord-hero__ghost-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.hord-hero__stats {
    display: flex;
    gap: 36px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hord-hero__stat-number {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #F1F3F6;
    font-family: system-ui, -apple-system, sans-serif;
}

.hord-hero__stat-label {
    font-size: 0.78rem;
    color: #8B93A7;
}

.hord-hero__visual {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 0;
}

.hord-hero__card {
    background: linear-gradient(160deg, #131B2E 0%, #0F1729 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
}

.hord-hero__card--main {
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.hord-hero__card--activity {
    margin-top: -16px;
    margin-left: 32px;
    margin-right: -8px;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.hord-hero__card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hord-hero__card-label {
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8B93A7;
}

.hord-hero__badge {
    font-size: 0.7rem;
    background: rgba(45, 212, 191, 0.15);
    color: #2DD4BF;
    padding: 3px 10px;
    border-radius: 20px;
}

.hord-hero__card-balance {
    font-size: 2rem;
    font-weight: 700;
    color: #F1F3F6;
    margin-top: 14px;
    font-family: system-ui, -apple-system, sans-serif;
}

.hord-hero__card-change {
    font-size: 0.9rem;
    color: #2DD4BF;
    font-weight: 600;
}

.hord-hero__card-sub {
    font-size: 0.8rem;
    color: #8B93A7;
    margin-top: 4px;
}

.hord-hero__card-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.hord-hero__card-actions span {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #F1F3F6;
    font-size: 0.82rem;
    font-weight: 600;
}

.hord-hero__card-actions .is-accent {
    background: #2DD4BF;
    color: #05201c;
}

.hord-hero__activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.85rem;
    color: #F1F3F6;
}

.hord-hero__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hord-hero__activity-mid {
    flex: 1;
    min-width: 0;
}

.hord-hero__activity-sub {
    font-size: 0.72rem;
    color: #8B93A7;
}

.hord-hero__activity-row .is-positive {
    color: #2DD4BF;
}

@media (max-width: 991px) {
    .hord-hero__title {
        font-size: 2.1rem;
    }

    .hord-hero__visual {
        margin-top: 40px;
    }
}

/* ==========================================================================
   CRITICAL: override the theme's own root color variables for dark mode.
   Nearly every heading, body text, border, and section background in this
   template is built from these few variables — flipping them here fixes
   text visibility across the ENTIRE site at once, not just the components
   I've individually restyled so far.
   ========================================================================== */
body[data-theme="dark"] {
    --black-l: 92%;
    --light-l: 68%;
    --border-color: 0 0% 100% / 0.1;
    --section-bg: 222 32% 9%;
    --white: 222 32% 9%;
}

body[data-theme="dark"] .header-top,
body[data-theme="dark"] header,
body[data-theme="dark"] .service-card,
body[data-theme="dark"] .about-content,
body[data-theme="dark"] .section-bg,
body[data-theme="dark"] .why-choose-us,
body[data-theme="dark"] .footer-section,
body[data-theme="dark"] .accordion-item,
body[data-theme="dark"] .faq-section {
    background-color: #0B1220 !important;
    color: #F1F3F6;
}

body[data-theme="dark"] p,
body[data-theme="dark"] li,
body[data-theme="dark"] span:not([class*="badge"]):not(.hord-card-actions span) {
    color: inherit;
}

body[data-theme="dark"] .service-card,
body[data-theme="dark"] .counter-item,
body[data-theme="dark"] .testimonial-card,
body[data-theme="dark"] .accordion-button {
    background-color: #131B2E !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .table tbody tr,
body[data-theme="dark"] .table tbody td {
    background-color: #131B2E !important;
}

/* ==========================================================================
   Hardcoded dark text colors that bypass the theme's CSS variable system
   entirely (literal hex values, not var() references) — found by
   systematically searching main.css for every hardcoded dark color.
   ========================================================================== */
body[data-theme="dark"] .account-form .form--control {
    color: #F1F3F6 !important;
    background-color: #0F1729 !important;
}

body[data-theme="dark"] .account-form .form--control::placeholder {
    color: #5f6b85 !important;
}

body[data-theme="dark"] .testimonial-item__designation {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .testimonial-item__desc {
    color: #E5E8ED !important;
}

body[data-theme="dark"] .breadcrumb__item,
body[data-theme="dark"] .breadcrumb__link {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .language_switcher__caption .text {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .table thead tr th {
    color: #8B93A7 !important;
}

/* ==========================================================================
   Round 3: Contact page, footer, and auth pages — specific classes found
   by directly inspecting each page's blade template.
   ========================================================================== */
body[data-theme="dark"] .section-heading__title,
body[data-theme="dark"] .feature-card__title,
body[data-theme="dark"] .feature-card__desc,
body[data-theme="dark"] .form--label,
body[data-theme="dark"] .form-label {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .feature-card {
    background-color: #131B2E !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] .footer-menu__link,
body[data-theme="dark"] .footer-contact-menu__item,
body[data-theme="dark"] .footer-contact-menu__item-content,
body[data-theme="dark"] .bottom-footer-text {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .footer-menu__link:hover {
    color: #2DD4BF !important;
}

body[data-theme="dark"] .footer-area {
    background-color: #0B1220 !important;
}

/* Auth pages (login/register) — safety net in case of caching, the right
   panel container never had an explicit dark background before */
body[data-theme="dark"] .account,
body[data-theme="dark"] .account__right,
body[data-theme="dark"] .account-form {
    background-color: #0B1220 !important;
}

body[data-theme="dark"] .have-account__text,
body[data-theme="dark"] .form--check label {
    color: #8B93A7 !important;
}

/* ==========================================================================
   Comprehensive sweep — every heading/text/label class used across every
   homepage section (extracted directly from all section blade files),
   forced light regardless of whether the underlying rule uses the theme's
   color variables or a hardcoded hex value.
   ========================================================================== */
body[data-theme="dark"] .about-section__content,
body[data-theme="dark"] .deposit-info__title,
body[data-theme="dark"] .payment-item__btn-text,
body[data-theme="dark"] .payment-item__name,
body[data-theme="dark"] .user-info-card__name,
body[data-theme="dark"] .chose-icon-card__desc,
body[data-theme="dark"] .chose-icon-card__title,
body[data-theme="dark"] .counter-card__desc,
body[data-theme="dark"] .counter-card__title,
body[data-theme="dark"] .faq-content__desc,
body[data-theme="dark"] .rotation-animation-content__text,
body[data-theme="dark"] .service-card__content,
body[data-theme="dark"] .service-card__desc,
body[data-theme="dark"] .service-card__heading,
body[data-theme="dark"] .service-list__content,
body[data-theme="dark"] .service-list__desc,
body[data-theme="dark"] .service-list__number,
body[data-theme="dark"] .service-list__title,
body[data-theme="dark"] .tab-pane__text,
body[data-theme="dark"] .testimonial-item__content,
body[data-theme="dark"] .testimonial-item__name,
body[data-theme="dark"] .thumb-card__content,
body[data-theme="dark"] .thumb-card__desc,
body[data-theme="dark"] .thumb-card__title,
body[data-theme="dark"] .work-card__content,
body[data-theme="dark"] .work-card__desc,
body[data-theme="dark"] .work-card__title {
    color: #F1F3F6 !important;
}

/* Cards/containers wrapping the above — same sweep for their backgrounds */
body[data-theme="dark"] .chose-icon-card,
body[data-theme="dark"] .counter-card,
body[data-theme="dark"] .faq-content,
body[data-theme="dark"] .service-list,
body[data-theme="dark"] .thumb-card,
body[data-theme="dark"] .work-card,
body[data-theme="dark"] .testimonial-item,
body[data-theme="dark"] .gateway-card,
body[data-theme="dark"] .payment-item,
body[data-theme="dark"] .deposit-info,
body[data-theme="dark"] .user-info-card {
    background-color: #131B2E !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F1F3F6 !important;
}

/* ==========================================================================
   Round 4: page titles (found the exact classes used on EVERY inner page),
   inactive tab buttons, white "Features" sections, FAQ answers, and —
   per explicit request — form inputs switched to light/white backgrounds
   for clarity instead of dark-on-dark.
   ========================================================================== */
body[data-theme="dark"] .dashboard-header__title,
body[data-theme="dark"] .breadcrumb__title {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .custom--tab .nav-link {
    color: #8B93A7 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body[data-theme="dark"] .custom--tab .nav-link.active {
    color: #05201c !important;
}

body[data-theme="dark"] .features.bg-white {
    background-color: #0B1220 !important;
}

body[data-theme="dark"] .accordion-body {
    color: #C3C9D4 !important;
}

/* Form inputs: light/white background site-wide, as requested, instead
   of dark-on-dark inputs that are hard to read */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form--control,
body[data-theme="dark"] .account-form .form--control,
body[data-theme="dark"] .contact-form .form--control,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background-color: #F7F6F3 !important;
    color: #171A21 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body[data-theme="dark"] .form-control::placeholder,
body[data-theme="dark"] .form--control::placeholder {
    color: #8a8f99 !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form--control:focus {
    background-color: #ffffff !important;
    color: #171A21 !important;
}

/* ==========================================================================
   Round 5: found the REAL class behind the still-white "Explore Our
   Features" section on About/Home (it's .section-bg-light, not .bg-white
   as I guessed before — different section, different class). Also added
   !important to guard against a more specific "light section" heading
   rule that was beating my earlier fix, and gave the map container a
   dark placeholder so it never flashes white while loading.
   ========================================================================== */
body[data-theme="dark"] .section-bg-light {
    background-color: #0B1220 !important;
}

body[data-theme="dark"] .section-bg-light .section-heading__title,
body[data-theme="dark"] .section-bg-light .section-heading__subtitle,
body[data-theme="dark"] .section-bg-light p,
body[data-theme="dark"] .section-bg-light h1,
body[data-theme="dark"] .section-bg-light h2,
body[data-theme="dark"] .section-bg-light h3,
body[data-theme="dark"] .section-bg-light h4,
body[data-theme="dark"] .section-bg-light h5,
body[data-theme="dark"] .section-bg-light h6 {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .map {
    background-color: #0B1220;
}

/* ==========================================================================
   Round 6: footer column headings and descriptions ("About Us", "Pages",
   "Useful Link" etc.) — a class I hadn't checked yet, found by reading
   the footer partial line by line.
   ========================================================================== */
body[data-theme="dark"] .footer-item__title {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .footer-item__desc {
    color: #8B93A7 !important;
}

body[data-theme="dark"] .social-list__link {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .footer-contact-menu__item-icon {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #2DD4BF !important;
}

/* Fix: this split-panel section still had its original white background,
   and my earlier "force light text everywhere" rule made its text
   invisible (light text on white bg) rather than the dark-on-dark
   problem we'd been fixing elsewhere. Give the panel itself a dark
   background so the light text is actually readable. */
body[data-theme="dark"] .img-full__left {
    background-color: #0B1220 !important;
}

/* ==========================================================================
   Round 7: systematic search of EVERY remaining hardcoded white
   background in the theme (not just text colors this time) — found by
   searching main.css directly for every background-color: #fff rule
   and checking what selector it belongs to.
   ========================================================================== */
body[data-theme="dark"] .alert {
    background-color: #131B2E !important;
    color: #F1F3F6 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .chose-us .right-section .rotation-animation .rotation-animation-content {
    background-color: #131B2E !important;
}

body[data-theme="dark"] .custom--accordion .accordion-button,
body[data-theme="dark"] .custom--accordion .accordion-body {
    background-color: #131B2E !important;
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .custom--accordion .accordion-button:not(.collapsed) {
    background-color: #14315B !important;
    color: #fff !important;
}

body[data-theme="dark"] .custom--modal .modal-content {
    background-color: #131B2E !important;
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .header.fixed-header,
body[data-theme="dark"] .navbar {
    background-color: #0B1220 !important;
}

body[data-theme="dark"] .language_switcher__list {
    background-color: #131B2E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .language_switcher__list a {
    color: #F1F3F6 !important;
}

/* Pricing cards (FDR / DPS / Loan plans on the homepage) — a whole
   section that hadn't been checked at all yet */
body[data-theme="dark"] .pricing-card__content,
body[data-theme="dark"] .pricing-card {
    background-color: #131B2E !important;
    color: #F1F3F6 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   CRITICAL: main navigation links (Home/FAQ/About/Contact) were invisible
   — I'd fixed .navbar's background to dark earlier but never gave the
   actual .nav-link text (Bootstrap's default, meant for light navbars)
   a matching light color. This is the most important fix in this pass.
   ========================================================================== */
body[data-theme="dark"] .nav-menu .nav-link {
    color: #F1F3F6 !important;
}

body[data-theme="dark"] .nav-menu .nav-link:hover,
body[data-theme="dark"] .nav-menu .nav-link.active {
    color: #2DD4BF !important;
}

body[data-theme="dark"] .navbar-toggler-icon,
body[data-theme="dark"] .menu-bar span {
    background-color: #F1F3F6 !important;
}

/* Fix (correctly this time): the white panel behind "We Make Your Life
   Comfortable With Our Services" was never the element itself — it's a
   ::after pseudo-element overlay with background: #fafafa, using a
   3-class-deep selector I hadn't matched before. Matching the exact
   selector chain here so specificity can't lose again. */
body[data-theme="dark"] .services-section .services-section-overlay .img-full__left::after {
    background: #0B1220 !important;
}

/* Found via systematic pseudo-element audit: the login/register page's
   decorative diagonal shape uses a hardcoded hex color, bypassing the
   --white variable override that fixed similar shapes elsewhere. */
body[data-theme="dark"] .account::after {
    background: #0B1220 !important;
}

/* Found via the same audit: language switcher's dropdown arrow is
   hardcoded pure black, invisible against the now-dark header. */
body[data-theme="dark"] .language_switcher::after {
    color: #F1F3F6 !important;
}