/* Adapted from Al Dar Employee Portal assets/css/emp-theme.css, 2026-10-17.
   Shared brand tokens and component patterns; customer-specific integration follows below. */
/* ==========================================================================
   Al Dar Exchange - Customer Portal theme
   Brand tokens follow the Refer-A-Friend landing page and the 5.0.7 app.
   Loaded after the legacy stylesheets so it wins without !important where
   possible. Everything new is prefixed "customer-".
   ========================================================================== */

:root {
    --customer-brand-950: #1b1464;
    --customer-brand-900: #052f84;
    --customer-brand-800: #123e91;
    --customer-brand-700: #315db5;
    --customer-brand-100: #e7edfb;
    --customer-brand-50: #f3f6fd;
    --customer-gold-600: #b3864f;
    --customer-gold-500: #c69c6d;
    --customer-gold-200: #ead5bd;
    --customer-ink: #121a38;
    --customer-text: #3a4260;
    --customer-muted: #6b7390;
    --customer-line: #e1e5ef;
    --customer-line-strong: #cfd6e6;
    --customer-surface: #ffffff;
    --customer-page: #f4f6fb;
    --customer-success: #198754;
    --customer-success-bg: #e3f4ea;
    --customer-danger: #c62a3c;
    --customer-danger-bg: #fbe5e8;
    --customer-warning: #a76400;
    --customer-warning-bg: #fff1d9;
    --customer-info: #1f63c6;
    --customer-info-bg: #e3edfc;
    --customer-neutral-bg: #eef0f5;
    --customer-radius-sm: 8px;
    --customer-radius: 12px;
    --customer-radius-lg: 18px;
    --customer-shadow-sm: 0 2px 6px rgba(18, 26, 56, .06);
    --customer-shadow: 0 10px 30px rgba(5, 47, 132, .10);
    --customer-font: Montserrat, "Segoe UI", Tahoma, Arial, sans-serif;
    --customer-header-h: 72px;
}

/* ---------- Base ---------- */
body.customer-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--customer-page);
    color: var(--customer-text);
    font-family: var(--customer-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.customer-body h1, .customer-body h2, .customer-body h3, .customer-body h4, .customer-body h5,
.customer-body .btn, .customer-body input, .customer-body select, .customer-body textarea, .customer-body p {
    font-family: var(--customer-font);
}

.customer-body a { color: var(--customer-brand-900); }
.customer-body a:hover, .customer-body a:focus { color: var(--customer-brand-950); }

/* The body is a flex column with a fixed height from the legacy CSS; without this its children shrink,
   and the overflow:hidden landing hero collapsed to 0px so the Home page opened on "About us". */
body.customer-body > * { flex-shrink: 0; }

.customer-body :focus-visible { outline: 3px solid var(--customer-gold-500); outline-offset: 2px; }

.customer-body ::placeholder { color: #8e95ab; opacity: 1; }
.customer-body ::-webkit-input-placeholder { color: #8e95ab; opacity: 1; }
.customer-body ::-moz-placeholder { color: #8e95ab; opacity: 1; }
.customer-body :-ms-input-placeholder { color: #8e95ab; opacity: 1; }

.customer-skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 3000;
    padding: 8px 14px;
    border-radius: var(--customer-radius-sm);
    background: var(--customer-brand-900);
    color: #fff !important;
}
.customer-skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.customer-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--customer-surface);
    box-shadow: 0 1px 0 var(--customer-line), var(--customer-shadow-sm);
}

.customer-header-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--customer-brand-950) 0%, var(--customer-brand-900) 60%, var(--customer-gold-500) 100%);
}

.customer-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--customer-header-h);
    padding: 0 24px;
}

.customer-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
}

.customer-brand img { display: block; width: auto; height: 44px; }

.customer-brand-tag {
    padding-left: 14px;
    border-left: 1px solid var(--customer-line-strong);
    color: var(--customer-brand-900);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
}

.customer-brand-tag span { display: block; color: var(--customer-gold-600); font-weight: 600; letter-spacing: .08em; }

.customer-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-nav > li { position: relative; list-style: none; }

.customer-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--customer-text) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.customer-nav-link:hover, .customer-nav-link:focus, .customer-nav-link.is-active {
    background: var(--customer-brand-50);
    color: var(--customer-brand-900) !important;
}

.customer-nav-link.is-active { box-shadow: inset 0 0 0 1px var(--customer-brand-100); }

.customer-nav-link .fa { color: var(--customer-gold-600); }

/* Header dropdown presentation; behavior is provided by Bootstrap 5. */
.customer-nav .dropdown-menu,
.customer-user .dropdown-menu {
    min-width: 260px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius);
    box-shadow: var(--customer-shadow);
}

.customer-nav .dropdown-header,
.customer-user .dropdown-header {
    padding: 8px 12px 4px;
    color: var(--customer-gold-600);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.customer-nav .dropdown-menu > li > a,
.customer-user .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--customer-radius-sm);
    color: var(--customer-text);
    font-size: 13px;
    font-weight: 500;
}

.customer-user .dropdown-menu > li > a .fa,
.customer-nav .dropdown-menu > li > a .fa { width: 16px; color: var(--customer-brand-700); text-align: center; }

.customer-nav .dropdown-menu > li > a:hover,
.customer-nav .dropdown-menu > li > a:focus,
.customer-user .dropdown-menu > li > a:hover,
.customer-user .dropdown-menu > li > a:focus {
    background: var(--customer-brand-50);
    color: var(--customer-brand-900);
}

.customer-nav .dropdown-menu .divider,
.customer-user .dropdown-menu .divider { margin: 6px 4px; background: var(--customer-line); }

.customer-user {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.customer-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--customer-line);
    border-radius: 999px;
    background: var(--customer-brand-50);
    color: var(--customer-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.customer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--customer-brand-950), var(--customer-brand-800));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-user-chip small { display: block; color: var(--customer-muted); font-size: 11px; font-weight: 500; }

.customer-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius-sm);
    background: var(--customer-surface);
    color: var(--customer-brand-900);
    font-size: 18px;
}

/* ---------- Main ---------- */
.customer-main { flex: 1 0 auto; width: 100%; }

.customer-container { width: 100%; max-width: 1680px; margin: 0 auto; padding: 24px; }

/* Legacy wrappers used by every internal page */
.customer-body #main-content { margin-left: 0 !important; }
.customer-body #main-content > .wrapper {
    display: block;
    width: 100% !important;
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
}

/* ---------- Page header ---------- */
.customer-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.customer-page-title { display: flex; align-items: center; gap: 14px; min-width: 0; }

.customer-page-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--customer-brand-950), var(--customer-brand-800));
    box-shadow: 0 8px 18px rgba(5, 47, 132, .22);
    color: #fff;
    font-size: 20px;
}

.customer-page-title h1 {
    margin: 0;
    color: var(--customer-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.customer-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
    color: var(--customer-muted);
    font-size: 12px;
    list-style: none;
}

.customer-breadcrumb li { list-style: none; }
.customer-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--customer-line-strong); }
.customer-breadcrumb a { color: var(--customer-muted) !important; text-decoration: none; }
.customer-breadcrumb a:hover { color: var(--customer-brand-900) !important; }

.customer-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards ---------- */
.customer-card {
    max-width: 100%;
    margin-bottom: 20px;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius-lg);
    background: var(--customer-surface);
    box-shadow: var(--customer-shadow-sm);
}

.customer-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--customer-line);
}

.customer-card-head h2 { margin: 0; color: var(--customer-ink); font-size: 15px; font-weight: 700; }
.customer-card-body { padding: 20px; }

/* ---------- Filter / search bar ---------- */
.customer-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 16px;
    padding: 18px 20px;
}

.customer-field { display: flex; flex: 0 1 auto; flex-direction: column; gap: 6px; min-width: 150px; }
.customer-field--grow { flex: 1 1 260px; }
.customer-field--wide { min-width: 300px; }

.customer-field > label, .customer-field-label {
    margin: 0;
    color: var(--customer-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-range { display: flex; align-items: center; gap: 8px; }
.customer-range > input, .customer-range > select { flex: 1 1 0; min-width: 0; }
.customer-range > span { color: var(--customer-muted); font-size: 12px; }

.customer-input, .customer-select,
.customer-body .customer-filter input[type="text"],
.customer-body .customer-filter input[type="date"],
.customer-body .customer-filter input[type="search"],
.customer-body .customer-filter select {
    display: block;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm);
    background-color: var(--customer-surface);
    box-shadow: none;
    color: var(--customer-ink);
    font-family: var(--customer-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.customer-body .customer-filter select, .customer-select {
    padding-right: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23052f84' stroke-width='1.8' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
}

.customer-body .customer-filter select::-ms-expand { display: none; }

.customer-input:focus, .customer-select:focus,
.customer-body .customer-filter input:focus,
.customer-body .customer-filter select:focus {
    border-color: var(--customer-brand-700);
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 93, 181, .18);
}

.customer-search { position: relative; }
.customer-search > .fa {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--customer-muted);
    transform: translateY(-50%);
    pointer-events: none;
}
.customer-body .customer-search input[type="text"],
.customer-body .customer-search input[type="search"] { padding-left: 38px; }

/* Segmented "search by" toggle. Keeps the legacy radio + label markup. */
.customer-seg {
    display: inline-flex;
    height: 42px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm);
    background: var(--customer-brand-50);
}

.customer-seg input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.customer-seg label,
.customer-body .customer-seg .cb-enable,
.customer-body .customer-seg .cb-disable {
    display: inline-flex;
    float: none;
    align-items: center;
    margin: 0;
    padding: 0 14px;
    border-radius: 6px;
    background: transparent;
    color: var(--customer-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.customer-body .customer-seg .cb-enable span,
.customer-body .customer-seg .cb-disable span {
    display: inline;
    float: none;
    padding: 0;
    background: transparent !important;
    color: inherit !important;
    font-weight: inherit;
    line-height: 1;
}

.customer-seg label.selected,
.customer-seg input[type="radio"]:checked + label,
.customer-body .customer-seg .cb-enable.selected,
.customer-body .customer-seg .cb-disable.selected {
    background: var(--customer-surface);
    box-shadow: 0 1px 3px rgba(18, 26, 56, .14);
    color: var(--customer-brand-900);
}

.customer-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- Buttons ---------- */
.customer-btn,
.customer-body .btn.customer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--customer-radius-sm);
    box-shadow: none;
    cursor: pointer;
    font-family: var(--customer-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    text-shadow: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.customer-btn[disabled], .customer-btn.disabled { opacity: .6; cursor: not-allowed; }

.customer-btn--primary { background: var(--customer-brand-900); color: #fff !important; }
.customer-btn--primary:hover, .customer-btn--primary:focus { background: var(--customer-brand-950); box-shadow: 0 6px 16px rgba(5, 47, 132, .25); }

.customer-btn--gold { background: linear-gradient(110deg, #d8bd8b, var(--customer-gold-500)); color: var(--customer-brand-950) !important; }
.customer-btn--gold:hover, .customer-btn--gold:focus { background: var(--customer-gold-600); color: #fff !important; }

.customer-btn--success { background: var(--customer-success); color: #fff !important; }
.customer-btn--success:hover, .customer-btn--success:focus { background: #136c43; }

.customer-btn--danger { background: var(--customer-danger); color: #fff !important; }
.customer-btn--danger:hover, .customer-btn--danger:focus { background: #a31f30; }

.customer-btn--outline { border-color: var(--customer-line-strong); background: var(--customer-surface); color: var(--customer-brand-900) !important; }
.customer-btn--outline:hover, .customer-btn--outline:focus { border-color: var(--customer-brand-700); background: var(--customer-brand-50); }

.customer-btn--excel { border-color: #b9dfc8; background: var(--customer-success-bg); color: var(--customer-success) !important; }
.customer-btn--excel:hover, .customer-btn--excel:focus { border-color: var(--customer-success); background: var(--customer-success); color: #fff !important; }

.customer-btn--sm { height: 34px; padding: 0 12px; font-size: 12px; }
.customer-btn--block { width: 100%; }

/* Small square action buttons inside grid rows */
.customer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 2px;
    padding: 0;
    border: 1px solid var(--customer-line);
    border-radius: 7px;
    background: var(--customer-surface);
    color: var(--customer-brand-900);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.customer-icon-btn:hover, .customer-icon-btn:focus { border-color: var(--customer-brand-900); background: var(--customer-brand-900); color: #fff; }
.customer-icon-btn--danger { color: var(--customer-danger); }
.customer-icon-btn--danger:hover, .customer-icon-btn--danger:focus { border-color: var(--customer-danger); background: var(--customer-danger); color: #fff; }
.customer-icon-btn--success { color: var(--customer-success); }
.customer-icon-btn--success:hover, .customer-icon-btn--success:focus { border-color: var(--customer-success); background: var(--customer-success); color: #fff; }
.customer-icon-btn--gold { color: var(--customer-gold-600); }
.customer-icon-btn--gold:hover, .customer-icon-btn--gold:focus { border-color: var(--customer-gold-600); background: var(--customer-gold-600); color: #fff; }

/* ---------- Status pills ---------- */
.customer-pill {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--customer-neutral-bg);
    color: var(--customer-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.customer-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; opacity: .85; vertical-align: middle; }
.customer-pill--icon::before { display: none; }
.customer-pill .fa { margin-right: 4px; font-size: 12px; }
.customer-pill--success { background: var(--customer-success-bg); color: var(--customer-success); }
.customer-pill--danger { background: var(--customer-danger-bg); color: var(--customer-danger); }
.customer-pill--warning { background: var(--customer-warning-bg); color: var(--customer-warning); }
.customer-pill--info { background: var(--customer-info-bg); color: var(--customer-info); }

.customer-muted { color: var(--customer-muted); }

.customer-badge {
    display: inline-block;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--customer-gold-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ---------- Sigma Grid (gt_grid) skin ---------- */
.customer-grid { max-width: 100%; padding: 0 20px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.customer-body .customer-grid #gridbox,
.customer-body .customer-grid [id^="gridbox"] { padding: 0 !important; border: 0 !important; background: transparent !important; }

.customer-body .gt-grid { font-family: var(--customer-font); }

.customer-body .gt-viewport {
    overflow: hidden;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius) var(--customer-radius) 0 0;
    background: var(--customer-surface);
}

.customer-body .gt-head-div,
.customer-body .gt-skin-vista .gt-head-div {
    border-bottom: 1px solid var(--customer-line-strong);
    background: var(--customer-brand-50);
}

.customer-body .gt-hd-row td,
.customer-body .gt-skin-vista .gt-hd-row td,
.customer-body .gt-table thead tr td,
.customer-body .gt-skin-vista .gt-table thead tr td {
    height: 38px;
    border-right: 1px solid var(--customer-line);
    border-bottom: 1px solid var(--customer-line);
    background: var(--customer-brand-50);
    color: var(--customer-brand-950);
    font-family: var(--customer-font);
    font-size: 11px;
    vertical-align: middle;
}

.customer-body .gt-hd-row .gt-hd-row-over,
.customer-body .gt-skin-vista .gt-hd-row .gt-hd-row-over { background: var(--customer-brand-100); }

.customer-body .gt-hd-row td .gt-inner,
.customer-body .gt-skin-vista .gt-hd-row td .gt-inner {
    height: auto;
    padding: 0 8px;
    color: var(--customer-brand-950);
    font-family: var(--customer-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 37px;
    text-transform: uppercase;
}

/* Grouped header row from customHead (e.g. Customer / Beneficiary / Transaction) */
.customer-body .gt-hd-row:first-child td[colspan] .gt-inner,
.customer-body .gt-hd-row td[colspan] .gt-inner { color: var(--customer-gold-600); text-align: center; }

.customer-body .gt-row td,
.customer-body .gt-skin-vista .gt-row td {
    height: 40px;
    border-right: 1px solid #f0f2f7;
    border-bottom: 1px solid #edf0f6;
    color: var(--customer-text);
    font-family: var(--customer-font);
    font-size: 12px;
    vertical-align: middle;
}

.customer-body .gt-inner { height: auto; padding: 0 8px; line-height: 39px; }
.customer-body .gt-b-ie .gt-row td .gt-inner { margin-top: 0; }

.customer-body .gt-row { background: var(--customer-surface); }
.customer-body .gt-row-even,
.customer-body .gt-skin-vista .gt-row-even { background-color: #fafbfe; }

.customer-body .gt-row-over td,
.customer-body .gt-skin-vista .gt-row-over td { border-bottom-color: #edf0f6; background-color: #eef3fd; }

.customer-body .gt-row-selected td,
.customer-body .gt-skin-vista .gt-row-selected td,
.customer-body .gt-row-selected td.gt-cell-group {
    background-color: #e4ecfc;
    color: var(--customer-ink);
    font-weight: 600;
}

.customer-body .gt-cell-group { background-color: transparent; }

.customer-body .gt-row td.gt-index-col,
.customer-body .gt-skin-vista .gt-row td.gt-index-col { background: var(--customer-brand-50); color: var(--customer-muted); font-family: var(--customer-font); }

.customer-body .gt-row-empty td { border-color: transparent; }

.customer-body .gt-nodata-cell div { margin: 0; padding: 32px 0; color: var(--customer-muted); text-align: center; }

.customer-body .gt-hd-split { background: none; border-right: 1px solid var(--customer-line-strong); height: 18px; margin-top: 10px; }

.customer-body .gt-split-line { background: var(--customer-brand-700); }

/* Grid pager / toolbar */
.customer-body .gt-toolbar-box,
.customer-body .gt-skin-vista .gt-toolbar-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto !important;
    min-height: 52px;
    padding: 8px 12px;
    overflow: visible;
    border: 1px solid var(--customer-line);
    border-top: 0;
    border-radius: 0 0 var(--customer-radius) var(--customer-radius);
    background: var(--customer-surface);
}

.customer-body .gt-toolbar-box > table,
.customer-body .gt-toolbar-box > div { float: none; }

.customer-body .gt-toolbar-box td { vertical-align: middle; }

.customer-body .gt-image-button {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 0 3px;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius-sm);
    background: var(--customer-surface) !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.customer-body .gt-image-button:hover { border-color: var(--customer-brand-700); background: var(--customer-brand-50) !important; }
.customer-body .gt-image-button-down { background: var(--customer-brand-100) !important; }
.customer-body .gt-button-disable:hover { border-color: var(--customer-line); background: var(--customer-surface) !important; }

.customer-body .gt-image-button div,
.customer-body .gt-image-button button {
    position: relative;
    background-image: none !important;
    color: var(--customer-brand-900);
    font-size: 13px;
}

.customer-body .gt-image-button div::before,
.customer-body .gt-image-button button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: FontAwesome;
    font-size: 13px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.customer-body .gt-first-page::before { content: "\f100"; }
.customer-body .gt-prev-page::before { content: "\f104"; }
.customer-body .gt-next-page::before { content: "\f105"; }
.customer-body .gt-last-page::before { content: "\f101"; }
.customer-body .gt-goto-page::before { content: "\f061"; }
.customer-body .gt-tool-reload::before { content: "\f021"; }
.customer-body .gt-tool-add::before, .customer-body .mybutton-cls::before { content: "\f067"; }
.customer-body .gt-tool-del::before { content: "\f1f8"; }
.customer-body .gt-tool-save::before { content: "\f0c7"; }
.customer-body .gt-tool-print::before { content: "\f02f"; }
.customer-body .gt-tool-xls::before { content: "\f1c3"; }
.customer-body .gt-tool-pdf::before { content: "\f1c1"; }
.customer-body .gt-tool-csv::before { content: "\f0f6"; }
.customer-body .gt-tool-filter::before { content: "\f0b0"; }
.customer-body .gt-tool-chart::before { content: "\f080"; }
.customer-body .gt-tool-gridmenu::before { content: "\f0c9"; }

.customer-body .gt-button-split { width: 1px; height: 22px; margin: 0 8px; background: var(--customer-line); }

.customer-body .gt-toolbar-text {
    margin: 0 6px;
    color: var(--customer-muted);
    font: 500 12px/32px var(--customer-font);
}

.customer-body .gt-page-input,
.customer-body .gt-pagesize-select {
    width: 52px;
    height: 32px;
    margin: 0 4px;
    padding: 0 6px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm);
    background: var(--customer-surface);
    color: var(--customer-ink);
    font: 600 12px var(--customer-font);
    text-align: center;
}

.customer-body .gt-pagesize-select { width: 66px; }

.customer-body .gt-page-state {
    margin-left: auto;
    padding: 0;
    color: var(--customer-muted);
    font: 500 12px/32px var(--customer-font);
}

.customer-body .gt-page-state div { padding: 0 4px; }

.customer-body .gt-grid-mask-bg { background: rgba(255, 255, 255, .6); }

/* Legacy grid row actions: <i class="fa ..." onclick="..." style="color:red"> rendered as icon buttons */
.customer-body .gt-row td i[onclick],
.customer-body .gt-row td img[onclick],
.customer-body .ui-jqgrid tr.jqgrow td i[onclick] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 1px !important;
    padding: 0 !important;
    float: none !important;
    border: 1px solid var(--customer-line);
    border-radius: 7px;
    background: var(--customer-surface);
    color: var(--customer-brand-900) !important;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    vertical-align: middle;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.customer-body .gt-row td img[onclick] { padding: 4px !important; object-fit: contain; }

.customer-body .gt-row td .gt-inner:has(> i[onclick]),
.customer-body .gt-row td .gt-inner:has(> .customer-icon-btn),
.customer-body .gt-row td .gt-inner:has(> .customer-ops) { padding: 0 2px; text-overflow: clip; }

.customer-body .gt-row td i[onclick][style*="red"],
.customer-body .ui-jqgrid tr.jqgrow td i[onclick][style*="red"] { color: var(--customer-danger) !important; }
.customer-body .gt-row td i[onclick][style*="green"],
.customer-body .ui-jqgrid tr.jqgrow td i[onclick][style*="green"] { color: var(--customer-success) !important; }
.customer-body .gt-row td i[onclick][style*="orange"],
.customer-body .ui-jqgrid tr.jqgrow td i[onclick][style*="orange"] { color: var(--customer-gold-600) !important; }

.customer-body .gt-row td i[onclick]:hover,
.customer-body .ui-jqgrid tr.jqgrow td i[onclick]:hover { border-color: currentColor; background: var(--customer-brand-50); }

/* Checkbox option in the filter bar */
.customer-check { display: inline-flex; align-items: center; gap: 8px; height: 42px; }
.customer-body .customer-check input[type="checkbox"] { display: inline-block !important; width: 18px; height: 18px; margin: 0; accent-color: var(--customer-brand-900); }
.customer-body .customer-check input[type="checkbox"] + label {
    display: inline !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--customer-text) !important;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3 !important;
}
.customer-body .customer-check input[type="checkbox"] + label::before,
.customer-body .customer-check input[type="checkbox"] + label::after { display: none !important; content: none !important; }
.customer-body .customer-check label span { background: none !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; }

/* ---------- jqGrid skin (Customers, Search, etc.) ---------- */
.customer-body .ui-jqgrid {
    overflow: hidden;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius);
    font-family: var(--customer-font);
}

.customer-body .ui-jqgrid .ui-jqgrid-titlebar { padding: 12px 16px; border: 0; background: var(--customer-brand-900); color: #fff; font-size: 14px; }
.customer-body .ui-jqgrid .ui-jqgrid-hdiv { border-bottom: 1px solid var(--customer-line-strong); background: var(--customer-brand-50); }

.customer-body .ui-jqgrid .ui-jqgrid-htable th,
.customer-body .ui-jqgrid .ui-th-column {
    height: 38px;
    border-color: var(--customer-line);
    background: var(--customer-brand-50);
    color: var(--customer-brand-950);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.customer-body .ui-jqgrid tr.jqgrow td {
    height: 38px;
    padding: 0 8px;
    border-color: #edf0f6;
    color: var(--customer-text);
    font-size: 12px;
}

.customer-body .ui-jqgrid tr.jqgrow:nth-child(even) td { background: #fafbfe; }
.customer-body .ui-jqgrid tr.ui-state-hover td { background: #eef3fd; }
.customer-body .ui-jqgrid tr.ui-state-highlight td { background: #e4ecfc; color: var(--customer-ink); }

.customer-body .ui-jqgrid .ui-pager-control,
.customer-body .ui-jqgrid .ui-jqgrid-pager {
    height: auto;
    min-height: 48px;
    border: 0;
    border-top: 1px solid var(--customer-line);
    background: var(--customer-surface);
    font-size: 12px;
}

.customer-body .ui-jqgrid .ui-pg-table td { padding: 0 3px; }
.customer-body .ui-jqgrid .ui-pg-button { border-radius: var(--customer-radius-sm); }
.customer-body .ui-jqgrid .ui-pg-button:hover { background: var(--customer-brand-50); }
.customer-body .ui-jqgrid .ui-pg-input,
.customer-body .ui-jqgrid .ui-pg-selbox { height: 28px; border: 1px solid var(--customer-line-strong); border-radius: 6px; }

/* ---------- Popups and modals ----------
   One standard look for every legacy popup:
   - .popup (CSS :target popups with .input-group / .input-group-addon rows)
   - .modal / .modal1 (JS toggled, e.g. Change Password)
   Labels sit above fields, two columns on desktop, one on phones,
   the body scrolls inside the dialog and actions sit in a footer bar. */
.customer-body .popup,
.customer-body .modal-content,
.customer-body .modal1-content {
    display: flex;
    flex-direction: column;
    width: min(960px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--customer-radius-lg);
    background: var(--customer-surface);
    box-shadow: 0 30px 80px rgba(18, 26, 56, .35);
    text-align: left;
}

.customer-body .modal-content,
.customer-body .modal1-content { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 120px); }

.customer-body .popupoverlay,
.customer-body .modal,
.customer-body .modal1 { background-color: rgba(18, 26, 56, .62); }

.customer-body .modal h2,
.customer-body .modal1 h2,
.customer-body .popup h2 {
    flex-shrink: 0;
    margin: 0;
    padding: 18px 64px 18px 24px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(110deg, var(--customer-brand-950), var(--customer-brand-900));
    color: #fff;
    font-family: var(--customer-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
}

.customer-body .popup > .container,
.customer-body .modal-body,
.customer-body .modal1-body {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 24px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grid of fields */
.customer-body .popup .row,
.customer-body .modal-body .row { margin-right: -8px; margin-left: -8px; }

.customer-body .popup [class*="col-"],
.customer-body .modal-body [class*="col-"] { margin-bottom: 14px; padding-right: 8px; padding-left: 8px; }

.customer-body .popup .row[style*="padding"] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* .input-group-addon becomes a label above its field */
.customer-body .popup .input-group,
.customer-body .modal .input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-collapse: separate;
}

.customer-body .popup .input-group-addon,
.customer-body .modal .input-group-addon {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    margin: 0;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--customer-muted) !important;
    font-family: var(--customer-font);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    line-height: 1.3;
    text-align: left !important;
    text-transform: uppercase;
    white-space: normal;
}

.customer-body .popup .form-control,
.customer-body .popup .input-group .form-control,
.customer-body .modal .form-control,
.customer-body .popup input[type="text"],
.customer-body .popup input[type="date"],
.customer-body .popup input[type="email"],
.customer-body .popup input[type="number"],
.customer-body .popup select {
    float: none;
    display: block;
    width: 100% !important;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm) !important;
    background-color: var(--customer-surface);
    box-shadow: none;
    color: var(--customer-ink) !important;
    font-family: var(--customer-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.customer-body .popup textarea.form-control,
.customer-body .popup textarea,
.customer-body .modal textarea.form-control {
    width: 100% !important;
    height: auto;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm) !important;
    resize: vertical;
}

.customer-body .popup .form-control:focus,
.customer-body .popup select:focus,
.customer-body .popup textarea:focus,
.customer-body .modal .form-control:focus { border-color: var(--customer-brand-700); outline: none; box-shadow: 0 0 0 3px rgba(49, 93, 181, .18); }

.customer-body .popup .form-control[readonly],
.customer-body .popup .form-control[disabled],
.customer-body .modal .form-control[readonly] { background-color: var(--customer-brand-50); color: var(--customer-text) !important; }

.customer-body .popup .ErrorControl { border-color: var(--customer-danger) !important; background-color: var(--customer-danger-bg) !important; }

/* bootstrap-select dropdowns */
.customer-body .popup .bootstrap-select,
.customer-body .modal .bootstrap-select { width: 100% !important; }

.customer-body .popup .bootstrap-select > .dropdown-toggle,
.customer-body .modal .bootstrap-select > .dropdown-toggle {
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius-sm) !important;
    background: var(--customer-surface);
    box-shadow: none;
    color: var(--customer-ink);
    font-size: 13px;
}

.customer-body .popup .bootstrap-select.form-control,
.customer-body .modal .bootstrap-select.form-control { height: auto; padding: 0; border: 0 !important; background: none; box-shadow: none; }

.customer-body .popup .bootstrap-select .dropdown-menu { border-radius: var(--customer-radius-sm); box-shadow: var(--customer-shadow); }

/* Buttons inside dialogs */
.customer-body .popup .btn,
.customer-body .modal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--customer-radius-sm);
    box-shadow: none;
    font-family: var(--customer-font);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
    text-transform: none;
}

.customer-body .popup .btn-success,
.customer-body .popup .btn-primary,
.customer-body .modal .btn-success,
.customer-body .modal .btn-primary { background: var(--customer-brand-900) !important; color: #fff !important; }

.customer-body .popup .btn-success:hover,
.customer-body .popup .btn-primary:hover,
.customer-body .modal .btn-success:hover,
.customer-body .modal .btn-primary:hover { background: var(--customer-brand-950) !important; box-shadow: 0 6px 16px rgba(5, 47, 132, .25); }

.customer-body .popup .btn-danger,
.customer-body .modal .btn-danger { background: var(--customer-danger) !important; color: #fff !important; }

.customer-body .popup .btn-warning,
.customer-body .modal .btn-warning { background: var(--customer-gold-500) !important; color: var(--customer-brand-950) !important; }

.customer-body .popup .btn-default,
.customer-body .modal .btn-default,
.customer-body .modal #btncancelChangePWD { border-color: var(--customer-line-strong) !important; background: var(--customer-surface) !important; color: var(--customer-brand-900) !important; }

/* Action row: the column holding the save / submit buttons */
.customer-body .popup .text-right,
.customer-body .modal .text-right,
.customer-body .modal .form-row[style*="text-align:right"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 6px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid var(--customer-line);
}

.customer-body .popup .text-right .loader { margin-right: auto; }

/* The save column is usually col-lg-6 beside an empty column; stretch it into a full-width footer */
.customer-body .popup [class*="col-"].text-right { float: none; clear: both; width: 100%; }
.customer-body .popup [class*="col-"]:empty { display: none; }
.customer-body .popup .row:has(> .text-right) { margin-top: 4px; }

/* Images / documents shown in dialogs */
.customer-body .popup img:not(.loader) { max-width: 100%; height: auto; border-radius: var(--customer-radius-sm); }

/* Close button */
.customer-body .popup .close,
.customer-body .modal .close,
.customer-body .modal1 .close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 0;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
}

.customer-body .popup .close::before { content: "\00d7"; color: #fff; font-size: 22px; line-height: 1; text-shadow: none; }
.customer-body .modal .close, .customer-body .modal1 .close { font-size: 22px; }
.customer-body .popup .close:hover,
.customer-body .modal .close:hover { background: rgba(255, 255, 255, .3); color: #fff; }

.customer-body #cboxOverlay { background: rgba(18, 26, 56, .7); }

@media (max-width: 767px) {
    .customer-body .popup,
    .customer-body .modal-content,
    .customer-body .modal1-content { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
    .customer-body .modal, .customer-body .modal1 { padding-top: 12px; }
    .customer-body .popup > .container, .customer-body .modal-body { padding: 16px 16px 4px; }
    .customer-body .popup [class*="col-"], .customer-body .modal-body [class*="col-"] { width: 100%; }
    .customer-body .popup .text-right .btn, .customer-body .modal .text-right .btn { flex: 1 1 auto; }
}

/* ---------- Info note and clickable counts ---------- */
.customer-note {
    display: flex;
    gap: 10px;
    margin: 0 20px 18px;
    padding: 12px 14px;
    border: 1px solid #f1dcc0;
    border-radius: var(--customer-radius);
    background: #fdf6ec;
    color: #7a5626;
    font-size: 12px;
    line-height: 1.55;
}

.customer-note .fa { margin-top: 2px; color: var(--customer-gold-600); font-size: 14px; }

.customer-body a.customer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.customer-body a.customer-count--danger { background: var(--customer-danger-bg); color: var(--customer-danger) !important; }
.customer-body a.customer-count--danger:hover { background: var(--customer-danger); color: #fff !important; }
.customer-body a.customer-count--info { background: var(--customer-info-bg); color: var(--customer-info) !important; }
.customer-body a.customer-count--info:hover { background: var(--customer-info); color: #fff !important; }

.customer-body .customer-filter input[type="number"] { height: 42px; }

/* ---------- Detail pages (Customer Search) ---------- */
.customer-search-form { display: contents; }

.customer-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.customer-result-card--wide { grid-column: 1 / -1; }
.customer-results > .customer-card { min-width: 0; }

.customer-card-head h2 .fa { margin-right: 6px; color: var(--customer-gold-600); }
.customer-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.customer-card-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--customer-line); }

.customer-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--customer-line); }
.customer-avatar--lg { width: 52px; height: 52px; font-size: 20px; }
.customer-profile-main { flex: 1 1 260px; min-width: 0; }
.customer-body .customer-profile-name { display: block; margin: 0; color: var(--customer-ink); font-size: 18px; font-weight: 700; }
.customer-body .customer-profile-sub { display: block; margin: 2px 0 0; color: var(--customer-muted); font-size: 13px; font-weight: 500; }
.customer-profile-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.customer-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
.customer-dl--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; }
.customer-dl--full { grid-template-columns: 1fr; margin-top: 16px; }
.customer-dl-item { min-width: 0; }
.customer-dl-item--wide { grid-column: 1 / -1; }

.customer-dl-label { display: block; margin-bottom: 3px; color: var(--customer-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.customer-body .customer-dl-value { display: block; margin: 0; color: var(--customer-ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.customer-body .customer-dl-value:empty::before,
.customer-body .customer-profile-name:empty::before,
.customer-body .customer-amount-val:empty::before { content: "\2013"; color: var(--customer-line-strong); }

.customer-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.customer-subpanel { padding: 14px 16px; border: 1px solid var(--customer-line); border-radius: var(--customer-radius); background: #fbfcfe; }
.customer-subpanel h3 { margin: 0 0 12px; color: var(--customer-brand-900); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.customer-subpanel .customer-btn { margin-top: 14px; }

.customer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.customer-stat { padding: 14px; border: 1px solid var(--customer-line); border-radius: var(--customer-radius); background: var(--customer-brand-50); }
.customer-body .customer-stat-value { display: block; margin: 4px 0 0; color: var(--customer-brand-950); font-size: 22px; font-weight: 800; }

.customer-amounts { display: grid; gap: 2px; }
.customer-amount-row { display: grid; grid-template-columns: 1fr auto minmax(90px, auto); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--customer-line); }
.customer-amount-row .customer-dl-label { margin: 0; }
.customer-body .customer-amount-cur { margin: 0; color: var(--customer-muted); font-size: 12px; font-weight: 600; }
.customer-body .customer-amount-val { margin: 0; color: var(--customer-ink); font-size: 13px; font-weight: 600; text-align: right; }
.customer-amount-row.is-total { border-bottom: 0; }
.customer-body .customer-amount-row.is-total .customer-amount-val { color: var(--customer-brand-950); font-size: 16px; font-weight: 800; }

/* Plain data tables filled by script */
.customer-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--customer-line); border-radius: var(--customer-radius); }
.customer-body .customer-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--customer-font); font-size: 12px; }
.customer-body .customer-table th { position: sticky; top: 0; z-index: 1; padding: 10px; border: 0; border-bottom: 1px solid var(--customer-line-strong); background: var(--customer-brand-50); color: var(--customer-brand-950); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.customer-body .customer-table td { height: auto; padding: 9px 10px; border: 0; border-bottom: 1px solid #edf0f6; background: transparent; color: var(--customer-text); font-size: 12px; vertical-align: middle; }
.customer-body .customer-table tr:nth-child(even) td { background: #fafbfe; }
.customer-body .customer-table tr:hover td { background: #eef3fd; }

@media (max-width: 991px) {
    .customer-results { grid-template-columns: 1fr; }
    .customer-profile-status { align-items: flex-start; }
}

/* ---------- Grid loaders (jqGrid "Loading..." and Sigma Grid mask) ---------- */
.customer-body .ui-jqgrid .loading,
.customer-body .gt-grid-waiting-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px !important;
    border: 1px solid var(--customer-line) !important;
    border-radius: var(--customer-radius) !important;
    background: var(--customer-surface) !important;
    box-shadow: var(--customer-shadow) !important;
    color: var(--customer-brand-900) !important;
    font: 600 13px var(--customer-font) !important;
}

.customer-body .ui-jqgrid .loading::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid var(--customer-brand-100);
    border-top-color: var(--customer-brand-900);
    border-radius: 50%;
    animation: customer-spin .8s linear infinite;
}

.customer-body .ui-jqgrid .ui-jqgrid-bdiv { background: var(--customer-surface); }
.customer-body .gt-grid-mask-bg { background: rgba(255, 255, 255, .7) !important; }

/* ---------- Result tabs (Customer Search) ---------- */
.customer-results#searchResults { display: block; }

.customer-tabs {
    position: sticky;
    top: calc(var(--customer-header-h) + 4px);
    z-index: 20;
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--customer-line);
    border-radius: var(--customer-radius-lg);
    background: var(--customer-surface);
    box-shadow: var(--customer-shadow-sm);
    scrollbar-width: thin;
}

.customer-body .customer-tab {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--customer-radius);
    background: transparent;
    color: var(--customer-muted);
    cursor: pointer;
    font-family: var(--customer-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.customer-body .customer-tab .fa { color: var(--customer-gold-600); font-size: 15px; }
.customer-body .customer-tab:hover { background: var(--customer-brand-50); color: var(--customer-brand-900); }

.customer-body .customer-tab.is-active {
    background: linear-gradient(110deg, var(--customer-brand-950), var(--customer-brand-900));
    box-shadow: 0 6px 16px rgba(5, 47, 132, .25);
    color: #fff;
}

.customer-body .customer-tab.is-active .fa { color: var(--customer-gold-200); }

.customer-tab-count {
    display: none;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--customer-gold-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.customer-tab.is-active .customer-tab-count { background: rgba(255, 255, 255, .22); }

.customer-tab-panel { display: none; }
.customer-tab-panel.is-active { display: block; animation: customer-tab-in .18s ease; }
.customer-tab-panel--split.is-active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.customer-tab-panel > .customer-card { min-width: 0; }

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

.customer-body .customer-table tr.customer-row--danger td { background: #fdf3f4; }
.customer-body .customer-table tr.customer-row--danger td:first-child { box-shadow: inset 3px 0 0 var(--customer-danger); }
.customer-body .customer-table tr.customer-row--success td:first-child { box-shadow: inset 3px 0 0 var(--customer-success); }
.customer-body .customer-table tr.customer-empty-row td { padding: 22px; color: var(--customer-muted); text-align: center; background: transparent; }

@media (max-width: 1199px) {
    .customer-body .customer-tab { flex: 0 0 auto; }
}

@media (max-width: 991px) {
    .customer-tab-panel--split.is-active { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .customer-body .customer-tab { min-height: 40px; padding: 0 12px; font-size: 12px; }
}

/* ---------- Key-field emphasis (PUN, Amount, QID) ---------- */
.customer-body .customer-em { font-weight: 700; letter-spacing: .01em; }
.customer-body .customer-em--pun,
.customer-body td.customer-em--pun { color: var(--customer-brand-900) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.customer-body .customer-em--qid,
.customer-body td.customer-em--qid { color: var(--customer-brand-950) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.customer-body .customer-em--amount,
.customer-body td.customer-em--amount { color: #0d5c38 !important; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Grid operation buttons ---------- */
.customer-ops { display: inline-flex; align-items: center; gap: 6px; }

.customer-body .customer-op-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--customer-line-strong);
    border-radius: 7px;
    background: var(--customer-surface);
    color: var(--customer-brand-900);
    cursor: pointer;
    font-family: var(--customer-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.customer-body .customer-op-btn .fa { font-size: 12px; }
.customer-body .customer-op-btn:hover, .customer-body .customer-op-btn:focus { border-color: var(--customer-brand-900); background: var(--customer-brand-900); color: #fff; }
.customer-body .customer-op-btn--gold { color: var(--customer-gold-600); }
.customer-body .customer-op-btn--gold:hover, .customer-body .customer-op-btn--gold:focus { border-color: var(--customer-gold-600); background: var(--customer-gold-600); color: #fff; }

/* ---------- Footer ---------- */
.customer-footer {
    flex-shrink: 0;
    margin-top: 24px;
    background: var(--customer-brand-950);
    color: #c6cce0;
    font-size: 12px;
}

.customer-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 1680px;
    margin: 0 auto;
    padding: 18px 24px;
}

.customer-footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.customer-footer-brand img { width: auto; height: 34px; }
.customer-footer-brand strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.customer-footer-brand span { color: #aeb8d5; font-size: 11px; }
.customer-footer p { margin: 0; font-size: 12px; }

.customer-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.customer-footer-links a { color: #dfe4f3 !important; text-decoration: none; }
.customer-footer-links a:hover { color: var(--customer-gold-200) !important; text-decoration: underline; }

/* ---------- Login page ---------- */
.customer-login {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 16px;
    background:
        radial-gradient(circle at 85% 12%, rgba(198, 156, 109, .28), transparent 26rem),
        radial-gradient(circle at 6% 92%, rgba(65, 110, 198, .45), transparent 26rem),
        linear-gradient(125deg, #1b1464 0%, #052f84 64%, #123e91 100%);
}

.customer-login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    max-width: 980px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--customer-surface);
    box-shadow: 0 40px 90px rgba(5, 10, 40, .45);
}

.customer-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 44px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(27, 20, 100, .96), rgba(5, 47, 132, .96));
    color: #dfe4f3;
}

.customer-login-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(198, 156, 109, .35);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02);
}

.customer-login-brand img { position: relative; z-index: 1; width: 200px; max-width: 100%; height: auto; }

.customer-login-brand h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.customer-login-brand h1 span { display: block; color: var(--customer-gold-500); }
.customer-login-brand p { position: relative; z-index: 1; margin: 0; color: #c6cce0; font-size: 14px; line-height: 1.6; }

.customer-login-points { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.customer-login-points li { display: flex; align-items: center; gap: 10px; color: #dfe4f3; font-size: 13px; list-style: none; }
.customer-login-points .fa { width: 28px; height: 28px; border-radius: 8px; background: rgba(198, 156, 109, .18); color: var(--customer-gold-500); line-height: 28px; text-align: center; }

.customer-login-form { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; }

.customer-eyebrow {
    margin: 0 0 8px;
    color: var(--customer-gold-600);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.customer-login-form h2 { margin: 0 0 6px; color: var(--customer-ink); font-size: 26px; font-weight: 800; }
.customer-login-form .customer-login-sub { margin: 0 0 28px; color: var(--customer-muted); font-size: 13px; }

.customer-form-group { margin-bottom: 18px; }
.customer-form-group > label { display: block; margin-bottom: 6px; color: var(--customer-text); font-size: 12px; font-weight: 700; }

.customer-input-icon { position: relative; }
.customer-input-icon > .fa { position: absolute; top: 50%; left: 16px; color: var(--customer-muted); transform: translateY(-50%); pointer-events: none; }

.customer-body .customer-input-icon .customer-input,
.customer-body .customer-input-icon input.form-control1 {
    width: 100%;
    height: 50px;
    padding: 10px 44px;
    border: 1px solid var(--customer-line-strong);
    border-radius: var(--customer-radius);
    background: var(--customer-surface);
    color: var(--customer-ink);
    font-family: var(--customer-font);
    font-size: 14px;
}

.customer-body .customer-input-icon input.form-control1:focus { border-color: var(--customer-brand-700); outline: none; box-shadow: 0 0 0 3px rgba(49, 93, 181, .18); }
.customer-body .customer-input-icon input.ErrorControl { border-color: var(--customer-danger); background: var(--customer-danger-bg); }

/* Field with a fixed prefix after the icon, e.g. the +974 country code on mobile numbers */
.customer-input-prefix .customer-input-code { position: absolute; top: 50%; left: 40px; color: var(--customer-ink); font-size: 14px; font-weight: 700; transform: translateY(-50%); pointer-events: none; }
.customer-body .customer-input-prefix input.form-control1 { padding-left: 88px; }

.customer-pass-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--customer-muted);
    transform: translateY(-50%);
}
.customer-pass-toggle:hover { background: var(--customer-brand-50); color: var(--customer-brand-900); }

.customer-body .customer-login-form .customer-btn { height: 50px; margin-top: 8px; font-size: 14px; }

.customer-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: customer-spin .8s linear infinite;
}

.customer-spinner[style*="inline"], .customer-spinner[style*="block"] { display: inline-block !important; }

@keyframes customer-spin { to { transform: rotate(360deg); } }

.customer-login-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--customer-line); color: var(--customer-muted); font-size: 12px; }
.customer-login-foot .fa { color: var(--customer-gold-600); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .customer-brand-tag { display: none; }
}

@media (max-width: 991px) {
    .customer-header-inner { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; }
    .customer-menu-toggle { display: inline-flex; }
    .customer-nav-wrap { display: none; flex-basis: 100%; order: 3; padding: 8px 0 16px; border-top: 1px solid var(--customer-line); }
    .customer-nav-wrap.is-open { display: block; }
    .customer-nav { flex-direction: column; align-items: stretch; }
    .customer-nav-link { width: 100%; border-radius: var(--customer-radius-sm); }
    .customer-nav .dropdown-menu { position: static; float: none; width: 100%; margin: 4px 0 8px; box-shadow: none; }
    .customer-user { order: 2; margin-left: 0; }
    .customer-user-chip .customer-user-meta { display: none; }
    .customer-user-chip { padding-right: 4px; }

    .customer-login-card { grid-template-columns: 1fr; max-width: 520px; }
    .customer-login-brand { padding: 32px; }
    .customer-login-brand .customer-login-points { display: none; }
}

@media (max-width: 767px) {
    .customer-container, .customer-body #main-content > .wrapper { padding: 16px; }
    .customer-brand img { height: 36px; }
    .customer-page-title h1 { font-size: 18px; }
    .customer-page-icon { width: 40px; height: 40px; font-size: 17px; }
    .customer-filter { padding: 16px; }
    .customer-field, .customer-field--wide { flex: 1 1 100%; min-width: 0; }
    .customer-seg { width: 100%; height: auto; min-height: 42px; flex-wrap: wrap; gap: 3px; }
    .customer-seg label, .customer-body .customer-seg .cb-enable, .customer-body .customer-seg .cb-disable { min-height: 34px; flex-basis: calc(50% - 3px); }
    .customer-seg label, .customer-body .customer-seg .cb-enable, .customer-body .customer-seg .cb-disable { flex: 1 1 0; justify-content: center; }
    .customer-filter-actions { width: 100%; margin-left: 0; }
    .customer-filter-actions .customer-btn { flex: 1 1 auto; }
    .customer-grid { padding: 0 12px 12px; }
    .customer-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .customer-footer-inner { flex-direction: column; text-align: center; }
    .customer-login-form { padding: 32px 24px; }
    .customer-login-brand h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .customer-body *, .customer-body *::before, .customer-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Customer integration: Bootstrap 5, Tom Select and retained MVC view markup. */
.customer-body { --bs-body-font-family:var(--customer-font); --bs-body-font-size:14px; }
.customer-body h1,.customer-body h2,.customer-body h3,.customer-body h4 { text-transform:none; letter-spacing:normal; }
.customer-body .customer-header { flex-shrink:0; }
.customer-header-inner { max-width:1680px; margin:auto; }
.customer-brand img { width:190px; max-width:100%; object-fit:contain; }
.customer-nav-wrap { flex:1; min-width:0; }
button.customer-nav-link { border:0; background:transparent; font-family:inherit; }
.customer-user-chip { cursor:pointer; font-family:inherit; }
.customer-user .dropdown-menu { right:0; left:auto; max-width:calc(100vw - 24px); }
.customer-body .customer-header .dropdown-menu:not(.show) { display:none; }
.customer-body .customer-header .dropdown-menu.show { display:block; }
.customer-user-meta { text-align:left; }
.customer-user-meta strong,.customer-user-meta small { display:block; line-height:1.4; }
.customer-user-meta strong { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--customer-ink); font-size:12px; }
.customer-user-meta small { color:var(--customer-muted); font-size:10px; }
.customer-sign-in { padding:10px; white-space:nowrap; font-weight:600; font-size:13px; text-decoration:none; }
.customer-register { white-space:nowrap; }
.customer-mobile-only { display:none; }
.customer-announcement { padding:10px 24px; background:var(--customer-warning-bg); color:#6c470c; font-size:13px; text-align:center; }
.customer-page-description { margin:6px 0 0; color:var(--customer-muted); font-size:13px; line-height:1.6; }
.customer-page-head .customer-eyebrow { margin:0 0 4px; }
/* legacy signed-in CSS centres h1, which pushed "Your dashboard" away from its icon and eyebrow */
.customer-body .customer-page-title h1,.customer-body .customer-page-title p { text-align:left; }
.customer-body .customer-main { margin:0; padding:0; min-width:0; background:var(--customer-page); }
.customer-container { max-width:1440px; }
.customer-public-heading { padding-bottom:0; }
.customer-page-content { min-width:0; }
.customer-page-content > .container,.customer-page-content > #page-wrap > .container { width:100%; max-width:none; }
.customer-page-content > #page-wrap { width:100%; }
.customer-body .customer-footer { width:100%; margin-top:auto; }
.customer-body .customer-footer-brand strong { color:#fff; }
.customer-body .customer-footer-brand span { color:#b8c3df; }
.customer-body .customer-footer a { font-size:12px; }

/* Authenticated dashboard: the same card rhythm as the employee dashboard. */
.customer-welcome { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 32px; margin-bottom:24px; border-radius:18px; background:linear-gradient(115deg,var(--customer-brand-950),var(--customer-brand-800)); box-shadow:var(--customer-shadow); }
.customer-welcome .customer-eyebrow { color:var(--customer-gold-200); }
.customer-welcome h2 { margin:0 0 8px; color:#fff; font-size:26px; font-weight:700; }
.customer-welcome p { margin:0; color:#dfe4f3; }
.customer-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.customer-body .customer-action-card { display:flex; flex-direction:column; align-items:flex-start; min-height:220px; padding:24px; border:1px solid var(--customer-line); border-radius:18px; background:var(--customer-surface); color:var(--customer-text); text-decoration:none; box-shadow:var(--customer-shadow-sm); transition:box-shadow .15s,border-color .15s,transform .15s; }
.customer-body .customer-action-card:hover { transform:translateY(-3px); border-color:var(--customer-gold-500); box-shadow:var(--customer-shadow); }
.customer-action-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:var(--customer-brand-50); color:var(--customer-brand-900); font-size:20px; }
.customer-action-card h3 { margin:18px 0 8px; color:var(--customer-ink); font-size:16px; font-weight:700; }
.customer-action-card p { margin:0 0 20px; font-size:13px; line-height:1.7; color:var(--customer-muted); }
.customer-action-link { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-top:auto; color:var(--customer-brand-900); font-size:12px; font-weight:700; }
.customer-action-link .fa { color:var(--customer-gold-600); }

/* Dashboard: recent transfers and account status */
.customer-account-status { display:grid; grid-template-columns:repeat(2,minmax(150px,auto)); gap:10px 18px; padding:16px 18px; border:1px solid #ffffff26; border-radius:14px; background:#ffffff0f; }
.customer-account-status > div { display:grid; gap:4px; }
.customer-account-status span { color:var(--customer-gold-200); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.customer-account-status .customer-pill { justify-self:start; }
.customer-account-status .customer-pill--{ background:#ffffff1f; color:#fff; }
.customer-body .customer-account-status-link { grid-column:1 / -1; color:#fff; font-size:12px; font-weight:700; }
@media(max-width:767px) { .customer-account-status { grid-template-columns:1fr 1fr; width:100%; } }
.customer-recent { margin-top:24px; overflow:hidden; }
.customer-card-head h2 .fa { margin-right:8px; color:var(--customer-gold-600); }
.customer-recent-empty { margin:0; padding:24px 20px; color:var(--customer-muted); font-size:13px; }
.customer-recent .customer-table-wrap { overflow-x:auto; }
.customer-recent-table { width:100%; border-collapse:collapse; font-size:13px; }
.customer-recent-table th { padding:10px 16px; border-bottom:1px solid var(--customer-line-strong); background:var(--customer-brand-50); color:var(--customer-brand-950); font-size:11px; font-weight:700; letter-spacing:.04em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.customer-recent-table td { padding:12px 16px; border-bottom:1px solid #edf0f6; color:var(--customer-text); vertical-align:middle; }
.customer-recent-table tr:last-child td { border-bottom:0; }
.customer-recent-table td small { display:block; color:var(--customer-muted); font-size:11px; }
.customer-recent-table .text-end { text-align:right; white-space:nowrap; }
.customer-recent-ref { color:var(--customer-brand-900); font-weight:700; white-space:nowrap; }

/* Small dialogs (Change address / Change password): narrow, single column, buttons bottom-right */
.customer-body #updateaddssModal .modal-content,.customer-body #changepwdModal .modal-content { width:min(520px,calc(100% - 32px)); max-width:520px; }
.customer-body .customer-dialog-form { display:block!important; padding:0!important; }
.customer-body .customer-dialog-form .customer-form-group { margin-bottom:16px; }
.customer-body .customer-dialog-form p,.customer-body .customer-dialog-form label { text-align:left; text-transform:none; letter-spacing:0; }
.customer-body .customer-dialog-form .customer-dialog-intro { margin:0 0 16px; color:var(--customer-muted); font-size:13px; font-weight:500; }
.customer-body .customer-dialog-form .customer-form-group > label { display:block; margin:0 0 6px; padding:0; color:var(--customer-text); font-size:12px; font-weight:700; }
.customer-body .customer-dialog-form .customer-input-icon > .fa { z-index:1; display:block; }
.customer-body .customer-dialog-form .customer-input-icon input.form-control1 { height:46px; padding-left:42px!important; }
.customer-body .customer-dialog-form .customer-dialog-actions .customer-btn { min-width:110px; }

/* legacy .modal button rules painted the show-password eye as a dark navy block */
.customer-body .modal .customer-pass-toggle { min-width:0; height:34px; margin:0; padding:0; border:0; border-radius:8px; background:transparent!important; box-shadow:none; color:var(--customer-muted)!important; }
.customer-body .modal .customer-pass-toggle:hover { background:var(--customer-brand-50)!important; color:var(--customer-brand-900)!important; }
.customer-body .customer-strength .button_strength { text-align:left; }

/* Password strength widget inside the Change password dialog: rule list sits under the field, not over Confirm */
.customer-body .customer-strength .strength_wrapper { position:relative; width:100%; }
.customer-body .customer-strength .strength_input { display:block; width:100%; height:46px; padding:10px 14px; border:1px solid var(--customer-line-strong); border-radius:var(--customer-radius); background:#fff; color:var(--customer-ink); font-family:var(--customer-font); font-size:14px; }
.customer-body .customer-strength .strength_input:focus { border-color:var(--customer-brand-700); outline:none; box-shadow:0 0 0 3px rgba(49,93,181,.18); }
.customer-body .customer-strength .button_strength { display:inline-block; margin:6px 0 0; color:var(--customer-brand-700); font-size:12px; font-weight:600; }
.customer-body .customer-strength .t_strength_meter { margin-top:6px; }
.customer-body .customer-strength .pswd_info { position:static!important; width:auto!important; margin:8px 0 0!important; padding:10px 14px!important; border:1px solid var(--customer-line)!important; border-radius:10px!important; background:var(--customer-brand-50)!important; box-shadow:none!important; font-size:12px; }
.customer-body .customer-strength .pswd_info::before,.customer-body .customer-strength .pswd_info::after { display:none!important; }
.customer-body .customer-strength .pswd_info h4 { margin:0 0 6px; color:var(--customer-ink); font-size:12px; font-weight:700; }
.customer-body .customer-strength .pswd_info ul { margin:0; padding:0; list-style:none; }
.customer-body .customer-strength .pswd_info li { padding:2px 0 2px 20px; background:none!important; color:var(--customer-danger); line-height:1.5; }
.customer-body .customer-strength .pswd_info li.valid { color:var(--customer-success); }
.customer-body .customer-strength .pswd_info li::before { content:"\f00d"; margin-left:-18px; margin-right:6px; font-family:FontAwesome; }
.customer-body .customer-strength .pswd_info li.valid::before { content:"\f00c"; }

/* My account: label / value grid inside cards */
.customer-account-card { margin-bottom:20px; }
.customer-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 24px; margin:0; padding:20px; }
.customer-detail-grid > div { min-width:0; }
.customer-detail-grid--wide { grid-column:1 / -1; }
.customer-detail-grid dt { margin:0 0 4px; color:var(--customer-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.customer-detail-grid dd { margin:0; color:var(--customer-ink); font-size:14px; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:767px) { .customer-detail-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .customer-detail-grid { grid-template-columns:1fr; } }

/* Public landing and sign-in mirror the employee brand panel. */
.customer-hero { position:relative; overflow:hidden; background:linear-gradient(115deg,var(--customer-brand-950),var(--customer-brand-800)); }
.customer-hero::after { content:''; position:absolute; pointer-events:none; width:520px; height:520px; border-radius:50%; border:1px solid #ffffff20; right:-260px; bottom:-320px; box-shadow:0 0 0 60px #ffffff05,0 0 0 120px #ffffff05; }
.customer-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:72px; align-items:center; max-width:1240px; margin:auto; padding:64px 32px; }
.customer-hero .customer-eyebrow { color:var(--customer-gold-200); }
.customer-hero h1 { margin:0 0 22px; color:#fff; font-size:clamp(32px,4vw,50px); font-weight:800; line-height:1.15; letter-spacing:-.03em; }
.customer-hero h1 span { color:var(--customer-gold-500); }
.customer-hero p:not(.customer-eyebrow) { max-width:500px; color:#dfe4f3; font-size:15px; line-height:1.8; }
.customer-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:28px; }
.customer-body .customer-hero-link { color:#fff; font-size:13px; font-weight:600; }
.customer-hero-services { display:grid; gap:12px; }
.customer-hero-services > div { display:grid; grid-template-columns:44px 1fr; column-gap:16px; padding:20px; border:1px solid #ffffff24; border-radius:14px; background:#ffffff08; }
.customer-hero-services .fa { grid-row:span 2; align-self:center; color:var(--customer-gold-500); font-size:24px; text-align:center; }
.customer-hero-services strong { color:#fff; font-size:14px; }
.customer-hero-services span { margin-top:4px; color:#c6cce0; font-size:12px; }
.customer-login { min-height:calc(100vh - 220px); padding:36px 24px; background:var(--customer-page); }
.customer-login-card { width:100%; max-width:1000px; }
.customer-login-brand img { width:200px; max-height:90px; object-fit:contain; object-position:left; }
.customer-login-links { display:flex; justify-content:flex-end; margin:-2px 0 16px; font-size:12px; font-weight:600; }
.customer-login-create { margin:22px 0 0; color:var(--customer-muted); text-align:center; font-size:12px; }
.customer-login-create a { font-weight:700; }
.customer-body .customer-login-form form { margin:0; padding:0; background:transparent; box-shadow:none; }
.customer-body .customer-login-form .customer-btn { display:flex; justify-content:center; gap:10px; }
.customer-body .customer-pass-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:0; margin:0; padding:0; }
.customer-body .customer-pass-toggle .fa { position:static; pointer-events:none; }
.customer-body .customer-login-form #loading-indicator { padding:0; margin:0; background:transparent; }
.customer-login #DigiCertClickID_IgzOQ8lq { margin-top:12px; text-align:center; }

/* Unify customer forms without changing their names, IDs or visibility controls. */
.customer-page-content .form-basic,.customer-registration .form-basic { max-width:none; margin:0; padding:24px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-body .customer-page-content .form-control,
.customer-body .customer-page-content input.form-control1,
.customer-body .customer-registration input.form-control1,
.customer-body .customer-registration .form-control,
.customer-body .customer-transfer-filters input[type=text] { min-height:44px; border:1px solid var(--customer-line-strong)!important; border-radius:8px!important; background-color:#fff; color:var(--customer-ink); font-family:var(--customer-font); font-size:13px; box-shadow:none!important; }
.customer-body input:focus,.customer-body textarea:focus { outline-offset:2px; }
.customer-body .customer-page-content .form-control:focus,.customer-body .customer-registration .form-control:focus { border-color:var(--customer-brand-700)!important; box-shadow:0 0 0 3px #315db520!important; }
.customer-page-content .ts-wrapper,.customer-registration .ts-wrapper { min-width:0; font-size:13px; }
.customer-body .ts-wrapper .ts-control { min-height:44px; border:1px solid var(--customer-line-strong); border-radius:8px; padding:10px 12px; font-family:var(--customer-font); font-size:13px; box-shadow:none; }
.customer-body .ts-wrapper.focus .ts-control { border-color:var(--customer-brand-700); box-shadow:0 0 0 3px #315db520; }
.customer-body .ts-dropdown { overflow:hidden; border:1px solid var(--customer-line); border-radius:10px; box-shadow:var(--customer-shadow); font-size:13px; }
.customer-body .ts-dropdown .active { background:var(--customer-brand-50); color:var(--customer-brand-900); }
.customer-body .customer-page-content .btn:not(.btn-danger),.customer-body .customer-page-content .button,.customer-body .customer-registration .btn { min-height:40px; padding:10px 18px; border:1px solid transparent; border-radius:8px; background:var(--customer-brand-900); color:#fff; font-family:var(--customer-font); font-size:12px; font-weight:600; text-transform:none; }
.customer-body .customer-page-content .btn:not(.btn-danger):hover,.customer-body .customer-page-content .button:hover { background:var(--customer-brand-950); }
.customer-page-content .customer-list-card { padding:0; overflow:hidden; }
.customer-body .customer-transfer-filters { margin:0!important; padding:20px; row-gap:12px; border-bottom:1px solid var(--customer-line); }
.customer-transfer-filters label { display:inline-flex; align-items:center; gap:7px; margin:0; min-height:40px; font-size:11px!important; font-weight:600!important; color:var(--customer-text)!important; }
.customer-transfer-filters input[type=radio] { width:16px!important; height:16px!important; margin:0!important; padding:0!important; appearance:auto; accent-color:var(--customer-brand-900); flex-shrink:0; box-shadow:none; }
.customer-transfer-filters > [class*=col-] { flex:1 1 150px; width:auto; padding:0 8px; }
.customer-transfer-filters .row { width:100%; margin:0 0 8px; }
.customer-body .customer-grid #gridbox { padding:0!important; background:#fff!important; border:0!important; }
.customer-body .customer-grid { padding:16px; }
.customer-body .customer-page-content #page-wrap > .container { margin:0 0 20px!important; padding:24px; border:1px solid var(--customer-line); border-radius:18px; background:#fff!important; }
.customer-body .customer-page-content #page-wrap > .container > .row:first-child { margin:-24px -24px 20px!important; padding:14px 20px; border-radius:18px 18px 0 0; background:var(--customer-brand-50)!important; }
.customer-body .customer-page-content #page-wrap > .container > .row:first-child h6 { padding:0!important; margin:0!important; color:var(--customer-ink)!important; font-size:14px; font-weight:700; }
.customer-body .customer-registration .register-area { margin:24px auto; padding:0 16px 24px; border:0!important; background:transparent!important; }
.customer-registration .register-area > .container { padding:24px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-registration .box-header2 { padding:0 0 20px; border-bottom:1px solid var(--customer-line); }
.customer-registration .box-header2 h2 { color:var(--customer-ink); text-align:left; }
.customer-registration .blinking { animation:none; }
.customer-body .modal,.customer-body .modal1 { z-index:1100!important; }
.customer-body .popupoverlay { z-index:1100!important; }
.customer-body .popup { z-index:1101!important; }
.customer-body .modal .close,.customer-body .popup .close { z-index:2; background:transparent; }
.customer-body .modal .close::before { content:none; }
.customer-body #smartAlert { z-index:2000; }
.customer-page-content .form-row { display:flex; flex-wrap:wrap; align-items:flex-start; width:100%; }
.customer-page-content .form-row > label { width:100%; }
.customer-page-content form.form-basic { display:flex; flex-wrap:wrap; }
.customer-page-content form.form-basic > .form-row { flex:0 0 100%; }
.customer-page-content form.form-basic > .form-title-row,
.customer-page-content form.form-basic > div:not([class*="col-"]) { flex:0 0 100%; width:100%; }
.customer-body .customer-page-content form.form-basic input[type=text],
.customer-body .customer-page-content form.form-basic input[type=password],
.customer-body .customer-page-content form.form-basic input[type=number],
.customer-body .customer-page-content form.form-basic textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--customer-line-strong); border-radius:8px; background:#fff; font-family:var(--customer-font); font-size:13px; box-shadow:none; }
.customer-body .customer-page-content form.form-basic input[readonly] { background:var(--customer-brand-50); color:var(--customer-text); }
.customer-body .customer-page-content form.form-basic label { max-width:100%; }
.customer-body .customer-page-content form.form-basic .row > [class*=col-] > label { width:100%; }
.customer-body .customer-page-content form.form-basic .inside + input { padding-left:34px; }
.customer-body .modal .form-basic { width:100%; max-width:none; margin:0; padding:0; border:0; box-shadow:none; }
.customer-body .modal-content { margin-left:auto; margin-right:auto; }
.customer-body .customer-labelled-field { display:block; width:100%; margin-bottom:16px; }
.customer-body .customer-labelled-field > .inside { display:none; }
.customer-body .customer-field-label { display:block; margin:0 0 6px; color:var(--customer-text); font-family:var(--customer-font); font-size:12px; font-weight:600; text-transform:none; }
.customer-body .customer-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; margin:8px 0 16px!important; padding-top:16px; border-top:1px solid var(--customer-line); }
.customer-body .customer-dialog-actions .btn { flex:0 0 auto; width:auto!important; margin:0!important; }
.customer-body .customer-dialog-intro { margin-bottom:20px; }
.customer-body .ErrorControl,.customer-body .ErrorControl1,.customer-body .ErrorControl2 { border-color:var(--customer-danger)!important; background-color:var(--customer-danger-bg)!important; }

/* ---------- Public content pages (Services, Terms, Contact, Feedback) ----------
   Legacy "blog-page" markup: an article column and a sidebar with the branch locator and rates. */
.customer-body .content-area.blog-page { padding:0 0 40px!important; background:transparent!important; }
.customer-body .blog-page > .container { width:100%; max-width:1440px; padding:0 24px; }
.customer-body .blog-page > .container > .row:has(> .blog-asside-right) { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; margin:0; }
.customer-body .blog-page > .container > .row::before,.customer-body .blog-page > .container > .row::after { content:none; }
.customer-body .blog-page .blog-lst,.customer-body .blog-page .blog-asside-right { float:none; width:auto; max-width:none; padding:0; }
.customer-body .blog-page .post.single { margin:0; padding:28px 32px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
/* the page banner above already carries the title, so the legacy in-page heading only duplicated it */
.customer-body .blog-page .post-header.single { display:none; }
.customer-body .blog-page .post-body { padding:0; }
.customer-body .blog-page .post-body h3 { margin:28px 0 8px; color:var(--customer-ink); font-size:16px; font-weight:700; }
.customer-body .blog-page .post-body h3:first-child { margin-top:0; }
.customer-body .blog-page .post-body p,.customer-body .blog-page .post-body li { color:var(--customer-text); font-size:14px; line-height:1.75; text-align:left!important; }
.customer-body .blog-page .post-body p:empty { display:none; }
.customer-body .blog-page .post-body ul { margin:0; padding-left:20px; }
.customer-body .blog-page .post-body li { margin-bottom:8px; }
.customer-body .blog-page .blog-asside-right > .row { display:grid; gap:20px; margin:0; }
.customer-body .blog-page .blog-asside-right > .row > section { min-width:0; }

/* Legacy icon fields (.icon-addon + .form-control + label.fa) used by the public forms:
   Contact, Feedback, Track transfer, Update QID, eKYC, Amend and Upload documents. */
.customer-body .icon-addon { position:relative; margin:0; }
.customer-body .icon-addon > .form-control,
.customer-body .icon-addon > input.form-control1,
.customer-body .icon-addon > select,
.customer-body .icon-addon > textarea { display:block; width:100%!important; height:auto; min-height:46px; margin:0; padding:11px 14px 11px 42px!important; border:1px solid var(--customer-line-strong)!important; border-radius:10px!important; background:#fff; box-shadow:none!important; color:var(--customer-ink); font-family:var(--customer-font); font-size:14px; line-height:1.5; }
.customer-body .icon-addon > textarea { min-height:130px; resize:vertical; }
/* legacy style.css paints .form-control placeholders near-black, so hints looked like typed values */
.customer-body .form-control::placeholder,.customer-body .form-control1::placeholder { color:#8e95ab; opacity:1; }
.customer-body .form-control::-webkit-input-placeholder,.customer-body .form-control1::-webkit-input-placeholder { color:#8e95ab; opacity:1; }
.customer-body .icon-addon > .form-control:focus,
.customer-body .icon-addon > input.form-control1:focus,
.customer-body .icon-addon > textarea:focus { border-color:var(--customer-brand-700)!important; outline:none; box-shadow:0 0 0 3px rgba(49,93,181,.18)!important; }
.customer-body .icon-addon > label.fa,
.customer-body .icon-addon > .fa,
.customer-body .icon-addon > .glyphicon { position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:42px; height:46px; margin:0; padding:0!important; color:var(--customer-muted); font-size:14px; pointer-events:none; }
.customer-body .icon-addon > textarea + label.fa { align-items:flex-start; padding-top:16px!important; }
.customer-body .icon-addon > .form-control:focus + .fa,
.customer-body .icon-addon > textarea:focus + .fa { color:var(--customer-brand-900); }
.customer-body .blog-page .form-group,.customer-body .customer-public-form .form-group { margin-bottom:14px; }
/* Text captcha (jquery.realperson) */
.customer-body .realperson-challenge { display:inline-block; margin:0 12px 0 0; padding:6px 10px; border-radius:10px; background:var(--customer-brand-50); color:var(--customer-brand-950); vertical-align:middle; }
.customer-body .realperson-text { color:var(--customer-brand-950); }
.customer-body .realperson-regen { color:var(--customer-brand-700); font-size:11px; }
.customer-body #defaultReal { height:46px!important; padding:10px 14px; border:1px solid var(--customer-line-strong)!important; border-radius:10px!important; vertical-align:middle; }
/* Legacy red outline submit buttons (Send, Submit, Check status) become primary buttons */
.customer-body .blog-page .btn-danger,
.customer-body .customer-public-form .btn-danger,
.customer-body .blog-page .mbr-buttons__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:120px; height:46px; padding:0 22px; border:1px solid transparent!important; border-radius:10px!important; background:var(--customer-brand-900)!important; color:#fff!important; font-family:var(--customer-font); font-size:14px; font-weight:600; text-transform:none; box-shadow:none; }
.customer-body .blog-page .btn-danger:hover,
.customer-body .customer-public-form .btn-danger:hover,
.customer-body .blog-page .mbr-buttons__btn:hover { background:var(--customer-brand-950)!important; box-shadow:0 6px 16px rgba(5,47,132,.25); }

/* ---------- Home (landing) page body under the hero ---------- */
.customer-home { padding:32px 24px 40px; }
.customer-home-inner { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; max-width:1440px; margin:0 auto; }
.customer-home-main,.customer-home-aside { display:grid; gap:24px; min-width:0; }
.customer-home-card { padding:28px 32px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-home-card h2 { margin:0 0 10px; color:var(--customer-ink); font-size:22px; font-weight:800; letter-spacing:-.01em; }
.customer-home-card p { margin:0; color:var(--customer-text); font-size:14px; line-height:1.75; }
.customer-home-about { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center; }
.customer-home-about img,.customer-home-steps img { width:100%; height:auto; border-radius:14px; object-fit:cover; }
.customer-home-title { margin-bottom:20px!important; }
.customer-home-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.customer-home-feature { padding:20px; border:1px solid var(--customer-line); border-radius:14px; background:var(--customer-brand-50); }
.customer-home-feature h3 { margin:14px 0 6px; color:var(--customer-ink); font-size:15px; font-weight:700; }
.customer-home-feature p { font-size:13px; line-height:1.65; color:var(--customer-muted); }
.customer-home-steps { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:center; }
.customer-home-lead { margin-bottom:18px!important; }
.customer-steps { display:grid; gap:14px; margin:0 0 24px; padding:0; list-style:none; counter-reset:customer-step; }
.customer-steps li { position:relative; display:grid; gap:2px; padding-left:46px; list-style:none; counter-increment:customer-step; }
.customer-steps li::before { content:counter(customer-step); position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--customer-brand-950),var(--customer-brand-800)); color:#fff; font-size:13px; font-weight:700; }
.customer-steps strong { color:var(--customer-ink); font-size:14px; }
.customer-steps span { color:var(--customer-muted); font-size:13px; line-height:1.6; }
/* Testimonial slider inside a widget */
.customer-testimonials { padding:18px 20px; }
.customer-testimonials .testimonial > div { width:auto; float:none; padding:0; }
.customer-testimonials .client-text p { margin:0 0 10px; color:var(--customer-text); font-size:13px; font-style:italic; line-height:1.7; text-align:left!important; }
.customer-testimonials .client-text h4 { margin:0; color:var(--customer-ink); font-size:13px; }
.customer-testimonials .client-text h4 i { color:var(--customer-muted); font-weight:500; }
.customer-testimonials .client-face img { width:48px; height:48px; margin-top:10px; border-radius:50%; object-fit:cover; }
@media(max-width:1199px) { .customer-home-features { grid-template-columns:1fr; } }
@media(max-width:991px) { .customer-home-inner { grid-template-columns:1fr; } .customer-home-steps { grid-template-columns:1fr; } }
@media(max-width:767px) { .customer-home { padding:20px 16px 32px; } .customer-home-card { padding:20px; } .customer-home-about { grid-template-columns:1fr; } }

/* "You can trust us" strip (_trustUs) */
.customer-trust { padding:8px 24px 48px; }
.customer-trust-inner { max-width:1440px; margin:0 auto; }
.customer-trust h2 { margin:0 0 20px; color:var(--customer-ink); font-size:22px; font-weight:800; text-align:center; }
.customer-trust-items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.customer-trust-item { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--customer-line); border-radius:16px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-trust-item strong { color:var(--customer-ink); font-size:14px; font-weight:700; }
@media(max-width:991px) { .customer-trust-items { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) { .customer-trust { padding:4px 16px 32px; } .customer-trust-items { grid-template-columns:1fr; } }

/* ---------- Create account (Register) ---------- */
.customer-body .customer-registration .register-area { margin:0 auto 32px; }
/* the page banner carries the title; keep the "recent branch customer" line as a note */
.customer-registration .box-header2 h2 { display:none; }
.customer-body .customer-registration .box-header2 { margin-bottom:20px!important; padding:0 0 18px; }
.customer-body .customer-registration .box-header2 h4 { margin:0!important; padding:12px 16px!important; border:1px solid var(--customer-line); border-radius:12px; background:var(--customer-brand-50); color:var(--customer-text)!important; font-size:13px; font-weight:500!important; text-align:left!important; }
.customer-body .customer-registration .box-header2 h4 a { color:var(--customer-brand-900)!important; font-weight:700!important; }
.customer-body .customer-registration .box-header2 h4 a.blinking { color:var(--customer-gold-600)!important; }
.customer-body .customer-registration .row { margin-left:-8px; margin-right:-8px; }
.customer-body .customer-registration .row > [class*=col-] { padding-left:8px; padding-right:8px; }
.customer-body .customer-registration .form-group { margin-bottom:14px; }
/* Dropdown wrappers drew a dark box around the Tom Select control */
.customer-body .select-style { height:auto; margin:0 0 14px; padding:0; overflow:visible; border:0!important; border-radius:0; background:none!important; }
.customer-body .select-style .ts-wrapper .ts-control { min-height:46px; border-radius:10px; }
.customer-body .select-style.ErrorControl .ts-control,.customer-body .select-style.ErrorControl1 .ts-control { border-color:var(--customer-danger); background:var(--customer-danger-bg); }
/* +974 prefix label on mobile fields */
.customer-body .icon-addon > label.fa[style*="width:45px"] { width:72px!important; gap:6px; color:var(--customer-ink); font-family:var(--customer-font); font-size:13px; }
.customer-body .icon-addon > input:has(+ label.fa[style*="width:45px"]) { padding-left:80px!important; }
.customer-body .customer-registration p[style*="font-size:12px"] { margin:6px 0 0; padding:0 8px; color:var(--customer-muted)!important; font-size:12px!important; line-height:1.7; }
.customer-body .customer-registration a.btn.btn-default { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:200px; height:48px; padding:0 28px; border:1px solid transparent!important; border-radius:10px!important; background:var(--customer-brand-900)!important; color:#fff!important; font-family:var(--customer-font); font-size:14px; font-weight:700; letter-spacing:.02em; text-shadow:none; box-shadow:none; }
.customer-body .customer-registration a.btn.btn-default:hover { background:var(--customer-brand-950)!important; box-shadow:0 6px 16px rgba(5,47,132,.25); }
.customer-body .customer-registration .center a[href*="KycVerify"] { display:inline-block; margin-top:14px; color:var(--customer-brand-900)!important; font-size:13px; font-weight:600; }
.customer-body .customer-registration .center a.blinking { color:var(--customer-gold-600)!important; font-weight:700; }

/* Branch locator page: branch picker above the map instead of a grey box floating beside it */
.customer-body .blog-page > .container > .row:not(:has(> .blog-asside-right)) { margin:0; }
.customer-body .blog-page > .container > .row:not(:has(> .blog-asside-right)) > .blog-lst { flex:1 1 100%; width:100%; }
.customer-body .venue-map-detail.customer-branch-picker { position:static; display:block; float:none; width:auto; max-width:360px; margin:0 0 16px; padding:0; border:0; background:transparent; box-shadow:none; }
.customer-branch-picker form { display:grid; gap:6px; margin:0; text-align:left; }
.customer-body .customer-branch-picker .customer-select { height:44px; }
.customer-body .customer-branch-map { overflow:hidden; border:1px solid var(--customer-line); border-radius:14px; }

/* Sidebar widgets (_branchLocator / _exchangeRate) */
.customer-widget { overflow:hidden; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-widget-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--customer-line); }
.customer-widget-head h3 { margin:0; color:var(--customer-ink); font-size:15px; font-weight:700; }
.customer-widget-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--customer-brand-50); color:var(--customer-brand-900); font-size:15px; }
.customer-widget-body { display:grid; gap:6px; margin:0; padding:18px 20px 20px; }
.customer-widget-label { margin:8px 0 0; color:var(--customer-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.customer-widget-label:first-child { margin-top:0; }
.customer-widget-body .customer-select { height:42px; }
.customer-widget-body .customer-btn { margin-top:14px; }
.customer-rates table.TFtable { width:100%; margin:0; border:0; border-collapse:collapse; table-layout:fixed; }
.customer-rates table.TFtable tr { display:table-row; }
.customer-rates table.TFtable th,.customer-rates table.TFtable td { display:table-cell; float:none; padding:9px 12px; border:0; border-bottom:1px solid #edf0f6; background:transparent; color:var(--customer-text); font-size:12px; text-align:left; }
.customer-rates table.TFtable th:last-child,.customer-rates table.TFtable td:last-child { text-align:right!important; }
.customer-rates table.TFtable .col-xs-6 { width:50%; }
.customer-rates table.TFtable .col-xs-3 { width:25%; }
.customer-rates .customer-rates-head th { white-space:nowrap; background:var(--customer-brand-50); color:var(--customer-brand-950); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.customer-rates #mydiv { height:240px; }
.customer-rates table.TFtable tr:nth-child(even) td { background:#fafbfe; }
.customer-widget-note { margin:0; padding:12px 20px; border-top:1px solid var(--customer-line); color:var(--customer-muted); font-size:11px; line-height:1.5; }
.customer-widget-note .fa { color:var(--customer-gold-600); }
/* Single-column flow pages (Track transfer, Update QID, eKYC, Amend, Upload documents): the whole form is one card */
.customer-body .blog-page > .container:not(:has(.blog-lst)) { width:calc(100% - 48px); max-width:1392px; margin:0 auto 8px; padding:28px 32px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow-sm); }
.customer-body .blog-page > .container:not(:has(.blog-lst)) .row { margin-left:-8px; margin-right:-8px; }
.customer-body .blog-page > .container:not(:has(.blog-lst)) .row > [class*=col-] { padding-left:8px; padding-right:8px; }
.customer-body .blog-page > .container h3 { margin:0 0 16px!important; color:var(--customer-ink); font-size:17px; font-weight:700; }
.customer-body .blog-page > .container h3 .fa { margin-right:8px; color:var(--customer-gold-600); }
/* Instruction lines were coloured red / blue / green labels; show them as one readable note */
.customer-body .blog-page .col-md-12:has(> label[style*="color:blue"]) { margin-bottom:18px; padding:14px 18px; border:1px solid #f1dcc0; border-radius:12px; background:#fdf6ec; }
.customer-body .blog-page .col-md-12:has(> label[style*="color:blue"]) br { display:none; }
.customer-body .blog-page label[style*="color:blue"],
.customer-body .blog-page label[style*="color:red"],
.customer-body .blog-page label[style*="color:green"] { display:block; margin:0 0 6px; color:#7a5626!important; font-size:13px; font-weight:500; line-height:1.6; }
.customer-body .blog-page label[style*="color:blue"] { margin-bottom:8px; color:var(--customer-ink)!important; font-weight:700; }
.customer-body .blog-page label[style*="color:green"] { color:var(--customer-muted)!important; font-size:12px; }
/* Field captions written as bold spans */
.customer-body .blog-page .form-group > span[style*="font-weight"] { display:block; margin-bottom:6px; color:var(--customer-text); font-size:12px; font-weight:700!important; }
.customer-body .blog-page .form-group > .form-control:not(.icon-addon *) { min-height:46px; border:1px solid var(--customer-line-strong)!important; border-radius:10px!important; box-shadow:none!important; font-size:14px; }
/* Inline-coloured legacy action links (Check status, Send OTP, Verify OTP, Cancel) */
.customer-body .blog-page a.btn.btn-default { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; margin:0 6px 6px 0; padding:0 22px; border:1px solid transparent!important; border-radius:10px!important; background:var(--customer-brand-900)!important; color:#fff!important; font-family:var(--customer-font); font-size:14px; font-weight:600; text-shadow:none; box-shadow:none; }
.customer-body .blog-page a.btn.btn-default:hover { background:var(--customer-brand-950)!important; box-shadow:0 6px 16px rgba(5,47,132,.25); }
.customer-body .blog-page a.btn.btn-default[style*="#b50505"] { border-color:var(--customer-line-strong)!important; background:#fff!important; color:var(--customer-danger)!important; }
.customer-body .blog-page a.btn.btn-default[style*="#b50505"]:hover { border-color:var(--customer-danger)!important; background:var(--customer-danger-bg)!important; box-shadow:none; }
/* Small print under a form */
.customer-body .blog-page label[style*="font-size:9.5px"] { color:var(--customer-muted); font-size:12px!important; font-weight:500; }
@media(max-width:991px) { .customer-body .blog-page > .container > .row:has(> .blog-asside-right) { grid-template-columns:1fr; } }
@media(max-width:767px) { .customer-body .blog-page > .container:not(:has(.blog-lst)) { width:calc(100% - 32px); padding:20px; } }
@media(max-width:767px) { .customer-body .blog-page > .container { padding:0 16px; } .customer-body .blog-page .post.single { padding:20px; } }

/* ---------- Message popups ($.alert / Smart Alert) ----------
   Success, error, confirm and info messages across the portal (address updated, support sent,
   transaction under process, delete beneficiary...) used the grey gradient Smart Alert skin. */
.customer-body #smartAlert { background:rgba(18,26,56,.55)!important; }
.customer-body #smartAlertBox { min-width:300px; max-width:440px; margin:16px; overflow:hidden; border:0!important; border-radius:18px!important; background:#fff!important; box-shadow:0 30px 80px rgba(18,26,56,.35)!important; font-family:var(--customer-font)!important; font-size:14px; }
.customer-body #smartAlertHeader { padding:16px 52px 16px 20px!important; border:0!important; background:linear-gradient(110deg,var(--customer-brand-950),var(--customer-brand-900))!important; box-shadow:none!important; cursor:move; }
.customer-body #smartAlertTitle { color:#fff!important; font-family:var(--customer-font)!important; font-size:14px!important; font-weight:700!important; letter-spacing:.04em; text-shadow:none!important; text-transform:uppercase; }
.customer-body #smartAlertClose { top:50%!important; right:14px!important; width:30px!important; height:30px!important; margin-top:-15px!important; border-radius:50%; background:rgba(255,255,255,.16)!important; opacity:1!important; }
.customer-body #smartAlertClose::before { content:"\00d7"; display:block; color:#fff; font-size:20px; line-height:30px; text-align:center; }
.customer-body #smartAlertBody { display:flex; align-items:flex-start; gap:14px; padding:22px 22px 8px!important; border:0!important; background:#fff!important; }
.customer-body #smartAlertIcon { position:static!important; flex:0 0 40px; width:40px!important; height:40px!important; margin:0!important; border-radius:50%; background:var(--customer-info-bg)!important; color:var(--customer-info); }
.customer-body #smartAlertIcon::before { content:"\f129"; display:block; font-family:FontAwesome; font-size:18px; line-height:40px; text-align:center; }
.customer-body #smartAlert[data-icon="error"] #smartAlertIcon { background:var(--customer-danger-bg)!important; color:var(--customer-danger); }
.customer-body #smartAlert[data-icon="error"] #smartAlertIcon::before { content:"\f00d"; }
.customer-body #smartAlert[data-icon="warning"] #smartAlertIcon { background:var(--customer-warning-bg)!important; color:var(--customer-warning); }
.customer-body #smartAlert[data-icon="warning"] #smartAlertIcon::before { content:"\f12a"; }
.customer-body #smartAlert[data-icon="prompt"] #smartAlertIcon { background:var(--customer-success-bg)!important; color:var(--customer-success); }
.customer-body #smartAlert[data-icon="prompt"] #smartAlertIcon::before { content:"\f00c"; }
.customer-body #smartAlert[data-icon="confirm"] #smartAlertIcon,
.customer-body #smartAlert[data-icon="question"] #smartAlertIcon { background:var(--customer-brand-50)!important; color:var(--customer-brand-900); }
.customer-body #smartAlert[data-icon="confirm"] #smartAlertIcon::before,
.customer-body #smartAlert[data-icon="question"] #smartAlertIcon::before { content:"\f128"; }
.customer-body #smartAlertContent { flex:1 1 auto; margin:0!important; padding:9px 0 0!important; color:var(--customer-text)!important; font-family:var(--customer-font)!important; font-size:14px!important; line-height:1.6!important; text-shadow:none!important; }
.customer-body #smartAlertPrompt input { height:42px; padding:8px 12px; border:1px solid var(--customer-line-strong); border-radius:10px; font-family:var(--customer-font); }
.customer-body #smartAlertButtons { display:flex; justify-content:flex-end; gap:8px; padding:14px 22px 20px!important; border:0!important; background:#fff!important; box-shadow:none!important; }
.customer-body #smartAlertButtons .smartAlertButton { float:none!important; display:inline-flex; align-items:center; justify-content:center; min-width:96px; height:40px; margin:0!important; padding:0 18px!important; border:1px solid var(--customer-line-strong)!important; border-radius:10px!important; background:#fff!important; box-shadow:none!important; color:var(--customer-brand-900)!important; font-family:var(--customer-font)!important; font-size:13px!important; font-weight:600!important; text-shadow:none!important; cursor:pointer; }
.customer-body #smartAlertButtons .smartAlertButton.smartAlertActive,
.customer-body #smartAlertButtons .smartAlertButton[data-id="ok"],
.customer-body #smartAlertButtons .smartAlertButton[data-id="yes"] { border-color:transparent!important; background:var(--customer-brand-900)!important; color:#fff!important; }
.customer-body #smartAlertButtons .smartAlertButton:hover { box-shadow:0 6px 16px rgba(5,47,132,.18)!important; }

/* Transfer history: Search button beside the date range, grid grows with its rows (page scrolls, not the grid). */
.customer-body .customer-history-search { width:100%; height:42px; justify-content:center; gap:8px; }
.customer-body .customer-grid .gt-grid,
.customer-body .customer-grid .gt-viewport { height:auto!important; }
.customer-body .customer-grid .gt-body-div { height:auto!important; max-height:none!important; overflow-y:hidden!important; overflow-x:auto!important; }
.customer-body .customer-grid .gt-body-div .gt-table { margin-bottom:0; }

/* Beneficiary list: View details popups use labelled read-only fields in a grid. */
.customer-body .customer-view-modal .modal-content { width:min(640px,calc(100% - 32px)); max-width:640px; }
.customer-body .customer-view-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.customer-body .customer-view-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.customer-body .customer-view-field--wide { grid-column:1 / -1; }
.customer-body .customer-view-form input[readonly],
.customer-body .customer-view-form .ts-wrapper.disabled .ts-control { height:44px; width:100%; padding:0 14px!important; border:1px solid var(--customer-line)!important; border-radius:10px; background:var(--customer-neutral-bg)!important; color:var(--customer-text); font-size:14px; font-weight:600; opacity:1; box-shadow:none; cursor:default; }
.customer-body .customer-view-form .ts-wrapper.disabled .ts-control { display:flex; align-items:center; }
@media (max-width: 575.98px) { .customer-body .customer-view-grid,.customer-body .customer-view-grid--three { grid-template-columns:1fr; } }

/* Remittance details: Terms and Conditions dialog fits the screen, list scrolls, buttons stay visible. */
.customer-body #myModal.customer-terms-modal { padding:24px 16px!important; }
.customer-body .customer-terms-modal .modal-content { display:flex; flex-direction:column; width:min(720px,100%)!important; max-width:720px; max-height:calc(100vh - 48px); margin:0 auto; overflow:hidden; border:0; border-radius:18px; }
.customer-body .customer-terms-modal .modal-header { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; padding:16px 20px!important; }
.customer-body .customer-terms-modal .modal-header h2 { margin:0!important; padding:0!important; background:none!important; color:#fff; font-size:15px; font-weight:700; text-align:left; text-transform:uppercase; letter-spacing:.04em; }
.customer-body .customer-terms-modal .modal-header .close { position:static; float:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:20px; line-height:1; opacity:1; }
.customer-body .customer-terms-body { flex:1 1 auto; overflow-y:auto; padding:20px 24px 4px!important; margin:0!important; }
.customer-body .customer-terms-body ul { margin:0; padding-left:18px; }
.customer-body .customer-terms-body li { margin-bottom:10px; color:var(--customer-text); font-size:13px; line-height:1.6; text-align:left; }
.customer-body .customer-terms-actions { flex:0 0 auto; margin:0!important; padding:14px 24px 18px!important; background:#fff; }
.customer-body .customer-terms-actions .customer-btn { min-width:110px; }

/* Dashboard dialogs (Leave a testimonial, Get support): labelled fields, multi-line comments, counters and inline errors. */
.customer-body .customer-form-modal .modal-content { width:min(560px,calc(100% - 32px)); max-width:560px; }
.customer-body .customer-textarea { display:block; width:100%; min-height:110px; padding:12px 14px; border:1px solid var(--customer-line-strong); border-radius:12px; background:#fff; color:var(--customer-text); font-family:var(--customer-font); font-size:14px; line-height:1.5; resize:vertical; }
.customer-body .customer-textarea:focus { border-color:var(--customer-brand-700); outline:none; box-shadow:0 0 0 3px rgba(49,93,181,.18); }
.customer-body .customer-textarea.ErrorControl,
.customer-body .customer-dialog-form input.ErrorControl { border-color:var(--customer-danger)!important; background:#fff!important; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.customer-body .customer-field-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; }
.customer-body .customer-char-counter { margin-left:auto; color:var(--customer-muted); font-size:12px; font-weight:600; }
.customer-body .customer-char-counter.is-limit { color:var(--customer-danger); }
.customer-body .customer-field-error { display:block; margin-top:6px; color:var(--customer-danger); font-size:12px; font-weight:600; text-align:left; }
.customer-body .customer-field-meta .customer-field-error { margin-top:0; }
.customer-body .customer-field-error[hidden] { display:none; }
.customer-body .customer-required { color:var(--customer-danger); }

/* Add Beneficiary popups fit the screen: only the fields scroll, the action bar stays pinned at the bottom. */
.customer-body #benfModal1,
.customer-body #benfModal2 { padding:24px 16px!important; }
.customer-body #benfModal1 .modal-content,
.customer-body #benfModal2 .modal-content { max-height:calc(100vh - 48px); }
.customer-body #benfModal1 .modal-body,
.customer-body #benfModal2 .modal-body { padding-bottom:0; overscroll-behavior:contain; }
.customer-body .customer-benef-actions { position:sticky; bottom:0; z-index:3; margin:8px -24px 0!important; padding:14px 24px 16px!important; background:var(--customer-surface); box-shadow:0 -8px 16px rgba(18,26,56,.06); }
@media (max-width: 575.98px) {
    .customer-body #benfModal1,
    .customer-body #benfModal2 { padding:12px 8px!important; }
    .customer-body #benfModal1 .modal-content,
    .customer-body #benfModal2 .modal-content { max-height:calc(100vh - 24px); }
}

/* Review your transfer: detail cards on the left, amount summary with the actions on the right. */
.customer-body .customer-review-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; margin:0 0 32px; }
.customer-body .customer-review-intro { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:12px 16px; border-radius:12px; background:var(--customer-info-bg); color:var(--customer-brand-900); font-size:13px; font-weight:600; }
.customer-body .customer-detail-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.customer-body .customer-review-summary { position:sticky; top:96px; }
.customer-body .customer-summary-list { margin:0; padding:8px 20px 4px; }
.customer-body .customer-summary-list > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--customer-line); }
.customer-body .customer-summary-list dt { color:var(--customer-muted); font-size:13px; font-weight:600; }
.customer-body .customer-summary-list dd { margin:0; color:var(--customer-ink); font-size:14px; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.customer-body .customer-summary-receive dd { color:var(--customer-success); }
.customer-body .customer-summary-total { border-bottom:0!important; margin-top:4px; padding:16px 0 8px!important; }
.customer-body .customer-summary-total dt { color:var(--customer-ink); font-size:15px; font-weight:700; }
.customer-body .customer-summary-total dd { color:var(--customer-brand-900); font-size:22px; font-weight:800; }
.customer-body .customer-review-actions { display:flex; flex-direction:column; gap:10px; padding:8px 20px 20px; }
.customer-body .customer-review-actions .customer-btn { width:100%; height:46px; justify-content:center; font-size:14px; }
.customer-body .customer-review-actions .customer-btn[disabled] { opacity:.7; cursor:progress; }
@media (max-width: 991.98px) {
    .customer-body .customer-review-layout { grid-template-columns:1fr; }
    .customer-body .customer-review-summary { position:static; }
}
@media (max-width: 480px) { .customer-body .customer-detail-grid--two { grid-template-columns:1fr; } }

/* Payment method page: centred wider card, three methods per row, logos kept to their own proportions. */
.customer-body.customer-standalone .container-box.customer-pay { max-width:760px; padding:28px; }
.customer-body .customer-pay-group { margin-top:24px; }
.customer-body .customer-pay-group-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--customer-ink); font-size:14px; font-weight:700; }
.customer-body .customer-pay-group-title .fa { color:var(--customer-gold-600); }
.customer-body .customer-pay-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.customer-body .customer-pay-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:112px; padding:16px 12px; border:1px solid var(--customer-line); border-radius:14px; background:#fff; color:var(--customer-text); font-family:var(--customer-font); cursor:pointer; box-shadow:var(--customer-shadow-sm); transition:border-color .15s,background .15s,box-shadow .15s; }
.customer-body .customer-pay-option:hover,
.customer-body .customer-pay-option.active { border-color:var(--customer-brand-700); background:var(--customer-brand-50); box-shadow:0 8px 20px rgba(5,47,132,.12); }
.customer-body .customer-pay-option:focus-visible { outline:3px solid var(--customer-gold-500); outline-offset:2px; }
.customer-body .customer-pay-option[disabled]:not(.active) { opacity:.5; cursor:default; }
.customer-body .customer-pay-option.is-loading { cursor:progress; }
.customer-body .customer-pay-logo { display:flex; align-items:center; justify-content:center; width:100%; height:44px; }
.customer-body .customer-pay-logo img { display:block; max-width:132px; max-height:44px; width:auto; height:auto; object-fit:contain; }
.customer-body .customer-pay-name { color:var(--customer-ink); font-size:13px; font-weight:600; line-height:1.3; text-align:center; }
.customer-body .customer-pay-footer { display:flex; justify-content:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--customer-line); }
@media (max-width: 640px) {
    .customer-body.customer-standalone .container-box.customer-pay { padding:20px 16px; }
    .customer-body .customer-pay-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Transaction success: status hero with the reference number, then details and the payment summary. */
.customer-body .customer-receipt-hero { display:flex; align-items:flex-start; gap:20px; margin-bottom:20px; padding:24px; border-left:4px solid var(--customer-success); }
.customer-body .customer-receipt-icon { display:inline-flex; flex:0 0 56px; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--customer-success-bg); color:var(--customer-success); font-size:24px; }
.customer-body .customer-receipt-hero-text { flex:1 1 auto; min-width:0; }
.customer-body .customer-receipt-hero h2 { margin:4px 0 16px; color:var(--customer-ink); font-size:22px; font-weight:700; }
.customer-body .customer-receipt-meta { display:flex; flex-wrap:wrap; gap:16px 40px; margin:0; }
.customer-body .customer-receipt-meta dt { margin:0 0 4px; color:var(--customer-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.customer-body .customer-receipt-meta dd { margin:0; color:var(--customer-ink); font-size:14px; font-weight:600; }
.customer-body .customer-receipt-ref dd { color:var(--customer-brand-900); font-size:24px; font-weight:800; letter-spacing:.02em; }
.customer-body .customer-summary-discount dd { color:var(--customer-success); }
@media (max-width: 575.98px) {
    .customer-body .customer-receipt-hero { flex-direction:column; padding:20px; }
    .customer-body .customer-receipt-ref dd { font-size:20px; }
}

/* Colorbox popups (receipt, transfer details): close button top-right, chat launcher hidden while open. */
.customer-body.customer-popup-open #kommunicate-widget-iframe { visibility:hidden!important; }
.customer-body #cboxClose { top:8px!important; right:8px!important; bottom:auto!important; z-index:2; width:32px!important; height:32px!important; border-radius:50%; background:var(--customer-brand-900)!important; color:#fff; text-indent:0!important; font-size:0; box-shadow:0 4px 12px rgba(18,26,56,.25); }
.customer-body #cboxClose::before { content:"\00d7"; display:block; color:#fff; font-size:20px; line-height:32px; text-align:center; }

/* Money transfer table: Send / Activate buttons fit inside their column. */
.customer-body .customer-grid .gt-row span.btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:92px; padding:7px 10px!important; white-space:nowrap; }

/* Message popups: Cancel is always the outline button; named action buttons (e.g. Proceed) are primary. */
.customer-body #smartAlertButtons .smartAlertButton[data-id="cancel"],
.customer-body #smartAlertButtons .smartAlertButton[data-id="no"] { border-color:var(--customer-line-strong)!important; background:#fff!important; color:var(--customer-brand-900)!important; }
.customer-body #smartAlertButtons .smartAlertButton[data-id="procbtn"] { border-color:transparent!important; background:var(--customer-brand-900)!important; color:#fff!important; }

/* ---------- Loading states ----------
   One loader for every data fetch: a navy ring with a gold arc. Used for the table overlays
   (Money transfer, Transfer history), the old page preloader, the Send money wait box, and a
   slim progress bar at the top of the page while any other request is running. */
.customer-loader-ring { display:inline-block; flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:4px solid var(--customer-brand-100, #dbe4f5); border-top-color:var(--customer-brand-900); border-right-color:var(--customer-gold-500); animation:customer-spin .9s cubic-bezier(.55,.15,.45,.85) infinite; }
.customer-loader-ring--sm { width:22px; height:22px; border-width:3px; }

.customer-body .customer-grid { position:relative; }
.customer-body .customer-grid.is-loading { min-height:280px; }
.customer-body .customer-loading-overlay { position:absolute; inset:0; z-index:20; display:none; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; padding-top:min(120px, 30%); border-radius:14px; background:rgba(255,255,255,.82); backdrop-filter:blur(1.5px); color:var(--customer-brand-900); font-family:var(--customer-font); font-size:13px; font-weight:600; letter-spacing:.02em; }
.customer-body .customer-grid.is-loading .customer-loading-overlay { display:flex; }
.customer-body .customer-loading-overlay .customer-loading-text::after { content:""; display:inline-block; width:1.2em; text-align:left; animation:customer-dots 1.2s steps(4) infinite; }
@keyframes customer-dots { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
/* Skeleton rows behind the overlay while the table has nothing to show yet. */
.customer-body .customer-grid.is-loading:not(.has-rows)::before { content:""; position:absolute; inset:52px 16px 16px; z-index:19; border-radius:10px; background:repeating-linear-gradient(180deg, #eef2f9 0 34px, transparent 34px 46px); -webkit-mask:linear-gradient(90deg, #000 30%, rgba(0,0,0,.35) 50%, #000 70%) 0 0 / 300% 100%; mask:linear-gradient(90deg, #000 30%, rgba(0,0,0,.35) 50%, #000 70%) 0 0 / 300% 100%; animation:customer-shimmer 1.4s linear infinite; }
@keyframes customer-shimmer { to { -webkit-mask-position:-150% 0; mask-position:-150% 0; } }
/* Sigma's own grey "loading" box is replaced by the overlay. */
.customer-body .customer-grid .gt-grid-mask { display:none!important; }

/* Top progress bar for any other request (dropdowns, lookups, saves). */
.customer-body .customer-progress { position:fixed; top:0; left:0; right:0; z-index:4000; height:3px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s; }
.customer-body .customer-progress::before { content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:3px; background:linear-gradient(90deg, var(--customer-gold-500), var(--customer-brand-900)); animation:customer-progress 1.1s ease-in-out infinite; }
.customer-body.customer-is-fetching .customer-progress { opacity:1; }
@keyframes customer-progress { to { left:100%; } }

/* Legacy page preloader and the Send money wait box use the same ring. */
.customer-body #preloader { background:var(--customer-bg, #f4f6fb)!important; }
.customer-body #status { display:flex; align-items:center; justify-content:center; background:none!important; }
.customer-body #status::before { content:""; width:52px; height:52px; border-radius:50%; border:4px solid var(--customer-brand-100, #dbe4f5); border-top-color:var(--customer-brand-900); border-right-color:var(--customer-gold-500); animation:customer-spin .9s cubic-bezier(.55,.15,.45,.85) infinite; }
.customer-body .ajaxMaskedLoader .loadingContainer { display:flex; flex-direction:column; align-items:center; gap:12px; margin:0!important; padding:24px 28px!important; border:0!important; border-radius:16px!important; background:#fff!important; box-shadow:0 20px 50px rgba(18,26,56,.25)!important; transform:translate(-50%,-50%); }
.customer-body .ajaxMaskedLoader .loadingContent img { display:none; }
.customer-body .ajaxMaskedLoader .loadingContent::before { content:""; display:block; width:44px; height:44px; margin:0 auto; border-radius:50%; border:4px solid var(--customer-brand-100, #dbe4f5); border-top-color:var(--customer-brand-900); border-right-color:var(--customer-gold-500); animation:customer-spin .9s cubic-bezier(.55,.15,.45,.85) infinite; }
.customer-body .ajaxMaskedLoader .loadingContent::after { content:"Please wait"; display:block; margin-top:12px; color:var(--customer-brand-900); font:600 13px var(--customer-font); text-align:center; }
@media (prefers-reduced-motion: reduce) {
    .customer-loader-ring, .customer-body #status::before, .customer-body .ajaxMaskedLoader .loadingContent::before { animation-duration:2.4s; }
    .customer-body .customer-grid.is-loading::before, .customer-body .customer-progress::before { animation:none; }
}

/* ---------- Send money (remittance details) ----------
   Beneficiary, Amount and Transfer details cards with labelled fields, amount inputs with a
   currency tag, themed dropdowns and a right-aligned action bar. */
.customer-body .customer-send { margin:0 0 32px; }
.customer-body .customer-send-form { display:block; margin:0; padding:0; background:none; box-shadow:none; }
.customer-body .customer-send-card { margin-bottom:20px; overflow:visible; }
.customer-body .customer-send-body,
.customer-body .customer-send-card > .customer-send-grid { padding:20px; }
.customer-body .customer-send-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; }
.customer-body .customer-send-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.customer-body .customer-send-wide { grid-column:1 / -1; }
.customer-body .customer-send .customer-form-group { margin-bottom:16px; min-width:0; }
.customer-body .customer-send .customer-form-group > label { display:block; max-width:none; margin:0 0 6px; padding:0; color:var(--customer-text); font-size:12px; font-weight:700; text-align:left; text-transform:none; letter-spacing:0; }
.customer-body .customer-send input.customer-send-readonly,
.customer-body .customer-send input.customer-send-input { display:block; width:100%; height:46px; margin:0; padding:0 14px!important; border:1px solid var(--customer-line-strong)!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; color:var(--customer-ink)!important; font-family:var(--customer-font); font-size:14px; font-weight:600; }
.customer-body .customer-send input.customer-send-readonly,
.customer-body .customer-send input.readonlytxt { border-color:var(--customer-line)!important; background:var(--customer-neutral-bg)!important; cursor:default; }
.customer-body .customer-send input.customer-send-input:focus { border-color:var(--customer-brand-700)!important; outline:none; box-shadow:0 0 0 3px rgba(49,93,181,.18)!important; }
.customer-body .customer-send input.date-picker { cursor:pointer; }
/* Amounts */
.customer-body .customer-send-amounts { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:0 16px; }
.customer-body .customer-amount { position:relative; display:flex; align-items:stretch; }
.customer-body .customer-amount input.customer-send-input { height:54px; padding-right:76px!important; font-size:20px; font-weight:700; letter-spacing:.01em; }
.customer-body .customer-amount-currency { position:absolute; top:7px; right:7px; bottom:7px; display:inline-flex; align-items:center; justify-content:center; min-width:60px; padding:0 10px; border-radius:9px; background:var(--customer-brand-50); color:var(--customer-brand-900); font-size:13px; font-weight:700; letter-spacing:.04em; pointer-events:none; }
.customer-body .customer-send-swap { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:23px; border-radius:50%; background:var(--customer-gold-500); color:#fff; font-size:15px; }
.customer-body .customer-send-limit { display:flex; align-items:center; gap:8px; margin:0 0 18px; padding:10px 14px; border-radius:10px; background:var(--customer-warning-bg); color:var(--customer-text); font-size:13px; font-weight:500; text-align:left; }
.customer-body .customer-send-limit .fa { color:var(--customer-warning); }
.customer-body .customer-send-hint { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:0; color:var(--customer-muted); font-size:12px; text-align:left; }
.customer-body .customer-send-rate { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--customer-success-bg); color:var(--customer-success); font-size:12px; font-weight:700; }
.customer-body .customer-send-rate:has(#spnExchangeRate:empty) { display:none; }
.customer-body .customer-send-rate-cell { display:flex; align-items:flex-end; padding-bottom:10px; }
.customer-body .customer-send-provider { max-width:520px; }
/* Dropdowns (Tom Select) */
.customer-body .customer-send .ts-wrapper { width:100%; }
.customer-body .customer-send .ts-wrapper .ts-control { min-height:46px; padding:10px 40px 10px 14px!important; border:1px solid var(--customer-line-strong)!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; color:var(--customer-ink); font-family:var(--customer-font); font-size:14px; font-weight:600; }
.customer-body .customer-send .ts-wrapper.focus .ts-control { border-color:var(--customer-brand-700)!important; box-shadow:0 0 0 3px rgba(49,93,181,.18)!important; }
.customer-body .customer-send .ts-dropdown { border:1px solid var(--customer-line)!important; border-radius:12px!important; box-shadow:0 16px 40px rgba(18,26,56,.16)!important; font-family:var(--customer-font); font-size:14px; overflow:hidden; }
.customer-body .customer-send .ts-dropdown .option { padding:10px 14px; }
.customer-body .customer-send .ts-dropdown .active { background:var(--customer-brand-50); color:var(--customer-brand-900); }
/* Errors */
.customer-body .customer-send input.ErrorControl { border-color:var(--customer-danger)!important; background:#fff!important; box-shadow:0 0 0 3px rgba(220,38,38,.12)!important; }
.customer-body .customer-send .ErrorControl2 .ts-control { border-color:var(--customer-danger)!important; box-shadow:0 0 0 3px rgba(220,38,38,.12)!important; }
.customer-body .customer-send .ErrorControl2 > label { color:var(--customer-danger); }
.customer-body .customer-send .customer-form-group.ErrorControl2 { background:none!important; border:0!important; box-shadow:none!important; }
/* Terms */
.customer-body .customer-send-terms { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px 8px; text-align:left; margin-top:4px; padding:14px 16px; border:1px solid var(--customer-line); border-radius:12px; background:var(--customer-neutral-bg); font-size:14px; }
.customer-body .customer-send-terms input[type=checkbox] { width:20px; height:20px; margin:0; accent-color:var(--customer-brand-900); cursor:pointer; }
.customer-body .customer-send-terms label { display:inline; max-width:none; margin:0; padding:0; color:var(--customer-text); font-size:14px; font-weight:500; cursor:pointer; }
.customer-body .customer-send-terms-link { color:var(--customer-brand-900); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
/* Actions */
.customer-body .customer-send-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.customer-body .customer-send-actions .customer-btn { min-width:130px; height:46px; justify-content:center; gap:8px; font-size:14px; }
.customer-loader-ring--light { border-color:rgba(255,255,255,.35); border-top-color:#fff; border-right-color:var(--customer-gold-500); vertical-align:middle; }
@media (max-width: 767.98px) {
    .customer-body .customer-send-grid,
    .customer-body .customer-send-grid--three { grid-template-columns:1fr; }
    .customer-body .customer-send-amounts { grid-template-columns:1fr; }
    .customer-body .customer-send-swap { margin:0 auto 12px; transform:rotate(90deg); }
    .customer-body .customer-send-actions { flex-direction:column-reverse; align-items:stretch; }
}

/* Transaction failed: danger hero with the reason and reference, next steps and customer care. */
.customer-body .customer-failed-hero { border-left-color:var(--customer-danger); }
.customer-body .customer-failed-icon { background:var(--customer-danger-bg); color:var(--customer-danger); }
.customer-body .customer-failed-hero h2 { margin-bottom:6px; }
.customer-body .customer-failed-lead { margin:0 0 14px; color:var(--customer-muted); font-size:14px; text-align:left; }
.customer-body .customer-failed-reason { display:flex; align-items:flex-start; gap:8px; margin:0 0 16px; padding:10px 14px; border-radius:10px; background:var(--customer-danger-bg); color:var(--customer-danger); font-size:13px; font-weight:600; text-align:left; }
.customer-body .customer-failed-reason .fa { margin-top:2px; }
.customer-body .customer-failed-steps { margin:0; padding:8px 20px 12px; list-style:none; counter-reset:failstep; }
.customer-body .customer-failed-steps li { position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 0 12px 46px; border-bottom:1px solid var(--customer-line); counter-increment:failstep; text-align:left; }
.customer-body .customer-failed-steps li:last-child { border-bottom:0; }
.customer-body .customer-failed-steps li::before { content:counter(failstep); position:absolute; top:12px; left:0; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--customer-brand-50); color:var(--customer-brand-900); font-size:13px; font-weight:800; }
.customer-body .customer-failed-steps strong { color:var(--customer-ink); font-size:14px; }
.customer-body .customer-failed-steps span { color:var(--customer-muted); font-size:13px; line-height:1.5; }
.customer-body .customer-failed-contact { margin:0; padding:8px 20px 4px; list-style:none; }
.customer-body .customer-failed-contact li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--customer-line); text-align:left; }
.customer-body .customer-failed-contact li:last-child { border-bottom:0; }
.customer-body .customer-failed-contact .fa { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:var(--customer-brand-50); color:var(--customer-brand-900); }
.customer-body .customer-failed-contact span { display:flex; flex-direction:column; min-width:0; }
.customer-body .customer-failed-contact small { color:var(--customer-muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.customer-body .customer-failed-contact a { color:var(--customer-brand-900); font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.customer-body .customer-failed-contact:empty { display:none; }

/* Add Beneficiary popups: fields, dropdowns and buttons use the same controls as Send money. */
.customer-body :is(#benfModal1, #benfModal2) .customer-field-label,
.customer-body :is(#benfModal1, #benfModal2) .customer-labelled-field > span:first-child { display:block; margin:0 0 6px; padding:0; color:var(--customer-text)!important; font-family:var(--customer-font)!important; font-size:12px!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; text-align:left; }
.customer-body :is(#benfModal1, #benfModal2) .customer-labelled-field { display:block; width:100%; max-width:none; margin:0 0 16px; padding:0; letter-spacing:0; text-transform:none; }
.customer-body :is(#benfModal1, #benfModal2) .customer-labelled-field > .inside { display:none!important; }
.customer-body :is(#benfModal1, #benfModal2) input[type=text],
.customer-body :is(#benfModal1, #benfModal2) input[type=tel],
.customer-body :is(#benfModal1, #benfModal2) input[type=number] { display:block; width:100%; height:46px; margin:0; padding:0 14px!important; border:1px solid var(--customer-line-strong)!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; color:var(--customer-ink)!important; font-family:var(--customer-font)!important; font-size:14px!important; font-weight:600; letter-spacing:0!important; text-transform:none!important; }
.customer-body :is(#benfModal1, #benfModal2) input::placeholder { color:var(--customer-muted); font-weight:500; letter-spacing:0; text-transform:none; opacity:1; }
.customer-body :is(#benfModal1, #benfModal2) input:focus { border-color:var(--customer-brand-700)!important; outline:none; box-shadow:0 0 0 3px rgba(49,93,181,.18)!important; }
.customer-body :is(#benfModal1, #benfModal2) input[readonly] { border-color:var(--customer-line)!important; background:var(--customer-neutral-bg)!important; cursor:default; }
.customer-body :is(#benfModal1, #benfModal2) input.ErrorControl { border-color:var(--customer-danger)!important; box-shadow:0 0 0 3px rgba(220,38,38,.12)!important; }
/* Dropdowns (Tom Select) */
.customer-body :is(#benfModal1, #benfModal2) .ts-wrapper { width:100%; }
.customer-body :is(#benfModal1, #benfModal2) .ts-wrapper .ts-control { min-height:46px; padding:10px 40px 10px 14px!important; border:1px solid var(--customer-line-strong)!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; color:var(--customer-ink)!important; font-family:var(--customer-font)!important; font-size:14px!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; }
.customer-body :is(#benfModal1, #benfModal2) .ts-wrapper .ts-control input::placeholder { font-weight:500; }
.customer-body :is(#benfModal1, #benfModal2) .ts-wrapper .ts-control > input { display:inline-block!important; width:auto!important; min-width:4rem; height:auto!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; font-size:14px!important; }
.customer-body :is(#benfModal1, #benfModal2) .ts-wrapper.focus .ts-control { border-color:var(--customer-brand-700)!important; box-shadow:0 0 0 3px rgba(49,93,181,.18)!important; }
.customer-body :is(#benfModal1, #benfModal2) .ts-dropdown { border:1px solid var(--customer-line)!important; border-radius:12px!important; box-shadow:0 16px 40px rgba(18,26,56,.16)!important; font-family:var(--customer-font); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; overflow:hidden; }
.customer-body :is(#benfModal1, #benfModal2) .ts-dropdown .option { padding:10px 14px; }
.customer-body :is(#benfModal1, #benfModal2) .ts-dropdown .active { background:var(--customer-brand-50); color:var(--customer-brand-900); }
.customer-body :is(#benfModal1, #benfModal2) .ts-dropdown .dropdown-input { height:40px; margin:0; border:0; border-bottom:1px solid var(--customer-line); font-size:14px; }
.customer-body :is(#benfModal1, #benfModal2) .ErrorControl .ts-control,
.customer-body :is(#benfModal1, #benfModal2) .ErrorControl2 .ts-control { border-color:var(--customer-danger)!important; box-shadow:0 0 0 3px rgba(220,38,38,.12)!important; }
.customer-body :is(#benfModal1, #benfModal2) .customer-labelled-field.ErrorControl { background:none!important; border:0!important; }
.customer-body :is(#benfModal1, #benfModal2) .customer-labelled-field.ErrorControl > .customer-field-label { color:var(--customer-danger)!important; }
/* Transfer type radios and the IFSC search button */
.customer-body :is(#benfModal1, #benfModal2) .label-theme,
.customer-body :is(#benfModal1, #benfModal2) .form-radio-buttons + * { letter-spacing:0; }
.customer-body :is(#benfModal1, #benfModal2) input[type=radio] { width:18px!important; height:18px!important; margin:0 8px 0 0!important; accent-color:var(--customer-brand-900); vertical-align:-3px; }
.customer-body #div_ifsc { display:flex; align-items:flex-end; gap:10px; margin:0 0 16px!important; }
.customer-body #div_ifsc[style*="display: none"], .customer-body #div_ifsc[style*="display:none"] { display:none!important; }
.customer-body #div_ifsc > div { flex:1 1 auto; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; }
.customer-body #div_ifsc > div:last-child { flex:0 0 46px; }
.customer-body #div_ifsc .customer-labelled-field { margin:0; }
.customer-body #btnsrchIFSC { display:inline-flex!important; align-items:center; justify-content:center; width:46px!important; height:46px!important; margin:0!important; padding:0!important; border:0!important; border-radius:12px!important; background:var(--customer-brand-900)!important; color:#fff!important; box-shadow:none!important; font-size:15px; cursor:pointer; }
.customer-body #btnsrchIFSC:hover { background:var(--customer-brand-950)!important; }
.customer-body :is(#benfModal1, #benfModal2) .customer-benef-intro { margin:0 0 14px!important; color:var(--customer-muted)!important; font-size:13px!important; font-weight:500; letter-spacing:0!important; text-align:left!important; text-transform:none!important; }

/* Hosted pages keep their payment contracts and mobile layouts. */
.customer-standalone { --navy:var(--customer-brand-950); --navy-2:var(--customer-brand-900); --gold:var(--customer-gold-500); }
.customer-body.customer-standalone .container-box { width:calc(100% - 32px); max-width:520px; margin:32px auto; padding:24px; border:1px solid var(--customer-line); border-radius:18px; background:#fff; box-shadow:var(--customer-shadow); }
.customer-standalone .group-title { margin:20px 0 12px; color:var(--customer-ink); font-size:14px; font-weight:700; }
.customer-payment-heading { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--customer-line); text-align:center; }
.customer-payment-heading img { display:block; max-width:100%; width:190px; height:auto; margin:0 auto 24px; }
.customer-payment-heading h1 { margin:0 0 8px; color:var(--customer-ink); font-size:22px; font-weight:700; }
.customer-payment-heading > p:last-child { margin:0; color:var(--customer-muted); font-size:12px; }
.customer-body.customer-standalone .container-box .card { padding:18px 12px; border:1px solid var(--customer-line); border-radius:12px; background:#fff; color:var(--customer-text); box-shadow:var(--customer-shadow-sm); transition:border-color .15s,background .15s; }
.customer-body.customer-standalone .container-box .card:hover,.customer-body.customer-standalone .container-box .card.active { border-color:var(--customer-brand-700); background:var(--customer-brand-50); }
.customer-body.customer-standalone .container-box .card:focus-visible { outline:3px solid var(--customer-gold-500); outline-offset:2px; }
.customer-standalone .btn-modern,.customer-standalone .btn { font-family:var(--customer-font); }
@media(max-width:1199px) { .customer-header-inner { gap:12px; } .customer-nav-link { padding:10px; font-size:12px; } }
@media(max-width:991px) {
 .customer-nav-wrap { flex:1 0 100%; }
 .customer-menu-toggle { margin-left:auto; }
 .customer-user { margin-left:0; gap:6px; }
 .customer-user-meta { display:none; }
 .customer-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .customer-hero-inner { grid-template-columns:1fr; gap:32px; padding:44px 24px; }
 .customer-hero-services { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .customer-hero-services > div { grid-template-columns:1fr; gap:8px; padding:16px; }
 .customer-hero-services .fa { grid-row:auto; text-align:left; }
 .customer-login-card { max-width:640px; }
}
@media(max-width:767px) {
 .customer-header-inner { min-height:68px; padding:0 12px; }
 .customer-brand img { width:140px; height:36px; }
 .customer-register { display:none; }
 .customer-mobile-only { display:block; }
 .customer-page-title { align-items:flex-start; }
 .customer-page-head { margin-bottom:20px; }
 .customer-page-description { font-size:12px; }
 .customer-welcome { padding:24px; flex-direction:column; align-items:flex-start; gap:20px; }
 .customer-welcome h2 { font-size:22px; }
 .customer-quick-actions { grid-template-columns:1fr; gap:14px; }
 .customer-action-card { min-height:190px; }
 .customer-hero-services { grid-template-columns:1fr; }
 .customer-hero-services > div { grid-template-columns:32px 1fr; }
 .customer-hero-services .fa { grid-row:span 2; }
 .customer-login { padding:24px 16px; }
 .customer-login-brand { padding:28px; gap:24px; }
 .customer-login-brand img { width:160px; }
 .customer-login-form { padding:28px 24px; }
 .customer-login-form h2 { font-size:22px; }
 .customer-body .customer-transfer-filters { padding:12px; }
 .customer-body .customer-page-content .orange-2 { width:auto; max-width:100%; margin:4px; }
 .customer-body .customer-page-content .form-basic { padding:16px; }
 .customer-body.customer-standalone .container-box { margin:20px auto; padding:20px; }
}

/* CP-57 / CP-60: Edge adds its own reveal (eye) and clear buttons to password fields. They doubled our
   eye button and sat on top of it, so clicking did nothing. Our button is the only one shown. */
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear,
input::-ms-clear { display: none !important; width: 0; height: 0; }

/* CP-59 / CP-66: message popups. The scroll plugin kept a 30px+ gutter for a scrollbar that only shows
   on very long messages, so the text stopped well short of the button and left an empty band. */
.customer-body #smartAlert .mCSB_container { margin-right: 0 !important; }
.customer-body #smartAlert .mCSB_scrollTools[style*="block"] ~ .mCSB_container,
.customer-body #smartAlert .mCustomScrollBox:has(.mCSB_scrollTools[style*="block"]) .mCSB_container { margin-right: 14px !important; }
.customer-body #smartAlertBox { max-width: 420px; }
.customer-body #smartAlertBody { align-items: center; padding: 22px 22px 6px !important; }
.customer-body #smartAlertContent { padding: 0 !important; }
.customer-body #smartAlertButtons { padding: 12px 22px 20px !important; }

/* CP-61 / CP-64: dropdowns. The search box now sits inside the open list (Tom Select dropdown_input), so
   the field itself is not typed into; short lists have no search box at all. */
.customer-body .ts-wrapper.single .ts-control { cursor: pointer; }
.customer-body .ts-wrapper.single .ts-control .item { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.customer-body .ts-wrapper.single .ts-control > input,
.customer-body .ts-wrapper.single .ts-control > input::placeholder { color: var(--customer-muted); }
.customer-body .ts-dropdown .dropdown-input-wrap { padding: 8px; border-bottom: 1px solid var(--customer-line); }
.customer-body .ts-dropdown .dropdown-input { width: 100%; height: 38px; padding: 6px 10px; border: 1px solid var(--customer-line-strong); border-radius: 8px; font-family: var(--customer-font); font-size: 13px; box-shadow: none; }
.customer-body .ts-dropdown .dropdown-input:focus { border-color: var(--customer-brand-700); outline: none; box-shadow: 0 0 0 3px rgba(49, 93, 181, .18); }
.customer-body .ts-wrapper.ts-no-search .ts-dropdown .dropdown-input-wrap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* CP-61: the "+974" label uses the text font, which left its phone icon as an empty box. */
.customer-body .icon-addon > label.fa::before { font-family: FontAwesome; font-weight: normal; }

/* ---------- Create account (Register) ---------- */
.customer-reg { padding-bottom: 40px; }
.customer-reg-card { display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--customer-line); border-radius: 24px; background: var(--customer-surface); box-shadow: var(--customer-shadow); }
.customer-reg-side { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 36px 30px; overflow: hidden; background: linear-gradient(160deg, var(--customer-brand-950), var(--customer-brand-900)); color: #dfe4f3; }
.customer-reg-side::after { content: ""; position: absolute; right: -130px; bottom: -130px; width: 300px; height: 300px; border: 1px solid rgba(198, 156, 109, .35); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02); pointer-events: none; }
.customer-reg-side > * { position: relative; z-index: 1; }
.customer-reg-eyebrow { margin: 0; color: var(--customer-gold-500); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.customer-body .customer-reg-side-title { margin: -14px 0 0; color: #fff; font-family: var(--customer-font); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-transform: none; }
.customer-reg-side-title span { display: block; color: var(--customer-gold-500); }
.customer-reg-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.customer-reg-points li { display: flex; align-items: center; gap: 10px; color: #dfe4f3; font-size: 13px; line-height: 1.4; list-style: none; }
.customer-reg-points .fa { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: rgba(198, 156, 109, .18); color: var(--customer-gold-500); line-height: 28px; text-align: center; }
.customer-reg-callouts { display: grid; gap: 10px; margin-top: auto; }
.customer-body a.customer-reg-callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #dfe4f3; font-size: 12px; line-height: 1.45; text-decoration: none; transition: background .15s, border-color .15s; }
.customer-body a.customer-reg-callout:hover, .customer-body a.customer-reg-callout:focus { border-color: rgba(198, 156, 109, .6); background: rgba(255, 255, 255, .1); color: #fff; }
.customer-reg-callout strong { display: block; color: #fff; font-size: 13px; }
.customer-reg-callout > .fa:first-child { flex: 0 0 auto; color: var(--customer-gold-500); font-size: 18px; }
.customer-reg-callout > .fa:last-child { margin-left: auto; color: var(--customer-gold-500); }

.customer-reg-form { display: flex; flex-direction: column; gap: 4px; padding: 32px 36px; }
.customer-reg-section { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--customer-line); }
.customer-body .customer-reg-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--customer-ink); font-family: var(--customer-font); font-size: 15px; font-weight: 700; text-transform: none; }
.customer-reg-section-title span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--customer-brand-50); color: var(--customer-brand-900); font-size: 12px; font-weight: 800; }
.customer-reg-hint { margin: 0 0 14px 36px; color: var(--customer-muted); font-size: 12px; }
.customer-reg-section-title + .customer-reg-grid { margin-top: 14px; }
.customer-reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.customer-reg-grid + .customer-reg-grid { margin-top: 14px; }
.customer-reg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-reg-field { min-width: 0; }
.customer-body .customer-reg-field > label { display: block; margin: 0 0 6px; color: var(--customer-text); font-family: var(--customer-font); font-size: 12px; font-weight: 600; text-transform: none; }
.customer-reg-field > label em { color: var(--customer-danger); font-style: normal; }
.customer-reg-control { position: relative; }
.customer-reg-control > .fa { position: absolute; top: 50%; left: 15px; z-index: 1; color: var(--customer-muted); font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.customer-body .customer-reg input.form-control1,
.customer-body .customer-reg input.ErrorControl { display: block; width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 10px 14px 10px 40px !important; border: 1px solid var(--customer-line-strong) !important; border-radius: 10px !important; background: #fff; color: var(--customer-ink); font-family: var(--customer-font); font-size: 13px; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.customer-body .customer-reg input::placeholder { color: #8c93ab; opacity: 1; }
.customer-body .customer-reg input:focus { border-color: var(--customer-brand-700) !important; outline: none; box-shadow: 0 0 0 3px rgba(49, 93, 181, .18) !important; }
.customer-body .customer-reg input[readonly] { background: var(--customer-brand-50); cursor: not-allowed; }
.customer-body .customer-reg input.ErrorControl { border-color: var(--customer-danger) !important; background: var(--customer-danger-bg) !important; }
.customer-reg-control--prefix .customer-reg-prefix { position: absolute; top: 1px; bottom: 1px; left: 1px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--customer-line); border-radius: 9px 0 0 9px; background: var(--customer-brand-50); color: var(--customer-ink); font-size: 13px; font-weight: 700; pointer-events: none; }
.customer-reg-prefix .fa { color: var(--customer-brand-700); }
.customer-body .customer-reg .customer-reg-control--prefix input.form-control1,
.customer-body .customer-reg .customer-reg-control--prefix input.ErrorControl { padding-left: 96px !important; }
.customer-body .customer-reg .select-style { width: 100%; margin: 0; border: 0; background: none; }
.customer-body .customer-reg .select-style .ts-wrapper .ts-control { min-height: 46px; padding: 10px 40px 10px 14px !important; border: 1px solid var(--customer-line-strong) !important; border-radius: 10px !important; }
.customer-body .customer-reg .select-style.ErrorControl { border: 0 !important; background: none !important; }
.customer-body .customer-reg .select-style.ErrorControl .ts-control { border-color: var(--customer-danger) !important; background: var(--customer-danger-bg) !important; }
.customer-reg-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.customer-reg-captcha > label { flex: 0 0 100%; }
.customer-body .customer-reg-captcha .realperson-challenge { margin: 0; padding: 8px 14px; border: 1px solid var(--customer-line); }
.customer-body .customer-reg .customer-reg-captcha input.form-control1,
.customer-body .customer-reg .customer-reg-captcha input.ErrorControl { flex: 1 1 220px; width: auto; max-width: 320px; padding-left: 14px !important; letter-spacing: .08em; text-transform: uppercase; }
.customer-reg-notes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 18px; padding: 0; color: var(--customer-muted); font-size: 12px; list-style: none; }
.customer-reg-notes li { position: relative; padding-left: 14px; list-style: none; }
.customer-reg-notes li::before { content: ""; position: absolute; top: 7px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--customer-gold-500); }
.customer-reg-actions { display: grid; justify-items: center; gap: 12px; }
.customer-body .customer-reg-actions .customer-btn--block { width: 100%; max-width: 360px; height: 48px; font-size: 14px; }
.customer-reg-actions #loading-indicator { display: none !important; }
.customer-reg-signin { margin: 0; color: var(--customer-muted); font-size: 13px; }
.customer-body .customer-reg-signin a { color: var(--customer-brand-900); font-weight: 700; }

@media (max-width: 991px) {
    .customer-reg-card { grid-template-columns: 1fr; }
    .customer-reg-side { padding: 28px 24px; }
    .customer-reg-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
}
@media (max-width: 767px) {
    .customer-reg-form { padding: 24px 18px; }
    .customer-reg-grid, .customer-reg-grid--3, .customer-reg-callouts { grid-template-columns: 1fr; }
    .customer-reg-hint { margin-left: 0; }
}
.customer-registration .customer-public-heading, .customer-registration .customer-reg { max-width: 1200px; margin-left: auto; margin-right: auto; }
.customer-body .customer-reg .select-style .ts-control .item { color: var(--customer-ink); }
.customer-body .customer-reg .select-style .ts-control .item[data-value=""] { color: #8c93ab; }
@media (max-width: 767px) { .customer-reg-points { display: none; } .customer-reg-side { gap: 18px; padding: 22px 18px; } .customer-body .customer-reg-side-title { font-size: 20px; } }