/* Legacy emerald accents, retaining original responsive selectors. */
.swiper-pagination .swiper-pagination-bullet {
    background-color: rgba(10, 92, 54, 0.2);
}
.section-header .section-sub-titel {
    background-color: rgba(10, 92, 54, 0.2);
}
.btn--base:focus,
.btn--base:hover {
    -webkit-box-shadow: 0 10px 20px rgba(10, 92, 54, 0.4);
    box-shadow: 0 10px 20px rgba(10, 92, 54, 0.4);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(10, 92, 54, 0.2);
}

.sub-menu-wrapper .sub-menu-item {
    border: 1px solid rgba(10, 92, 54, 0.1);
}
.sub-menu-wrapper .sub-menu-item:hover .icon {
    background-color: rgba(10, 92, 54, 0.2);
}
.sub-menu-wrapper .sub-menu-item .icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.banner-section .banner-sub-titel {
    background: rgba(10, 92, 54, 0.2);
}
.banner-floting-right-area .banner-floting-right-list li i {
    background-color: rgba(10, 92, 54, 0.2);
}
.how-it-works-item .how-it-works-icon-wrapper .how-it-works-icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.faq-wrapper .faq-item .right-icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.account .account-wrapper .account-form .forgot-item a {
    color: rgba(10, 92, 54, 0.7);
}
.account .account-wrapper .account-form .account-item a {
    color: rgba(10, 92, 54, 0.7);
}
.account .account-wrapper .account-form .custom-check-group label a {
    color: rgba(10, 92, 54, 0.7);
}
.sidebar-menu .sidebar-menu-item a .menu-icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.sidebar-menu .sidebar-menu-item.active {
    background-color: rgba(10, 92, 54, 0.1);
}
.dashbord-item .dashboard-icon {
    background: rgba(10, 92, 54, 0.1);
}
.dashboard-list-user-wrapper .dashboard-list-user-icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.dashboard-list-item-wrapper
    .preview-list-wrapper
    .preview-list-item
    .preview-list-user-wrapper
    .preview-list-user-icon {
    background-color: rgba(10, 92, 54, 0.1);
}
.preview-list-user-wrapper .preview-list-user-icon {
    background-color: rgba(10, 92, 54, 0.1);
}

.exchange-area {
    background-color: rgba(10, 92, 54, 0.1);
}
.paste-wrapper .paste-badge {
    background-color: rgba(10, 92, 54, 0.1);
}

.virtual-card-btn-area a {
    background-color: rgba(10, 92, 54, 0.2);
}

.available-badge {
    background-color: rgba(10, 92, 54, 0.1);
}
.developer-page-container
    .developer-bar
    .developer-bar-wrapper
    .developer-bar-main-menu
    li.active
    a {
    background-color: rgba(10, 92, 54, 0.1);
}
.developer-page-container
    .developer-bar
    .developer-bar-wrapper
    .developer-bar-main-menu
    li
    a:hover {
    background-color: rgba(10, 92, 54, 0.1);
}
.gift-card-radio-item [type="radio"] + label {
    background-color: rgba(10, 92, 54, 0.1);
}
.details-banner-wrapper .section-sub-titel {
    background-color: rgba(10, 92, 54, 0.2);
}

.marketplace-item .base-amount {
    background-color: rgba(10, 92, 54, 0.3);
}

/* Sultan Pay: emerald from the supplied SVGs, gold and warm ivory from the brand boards.
   Loaded after legacy styles across public, authentication, portal and checkout layouts. */
:root {
    --sultan-emerald: #0a5c36;
    --sultan-emerald-dark: #06452a;
    --sultan-gold: #c5a24d;
    --sultan-gold-light: #eed99b;
    --sultan-gold-ink: #776024;
    --sultan-cream: #f6f1e5;
    --sultan-surface: #ffffff;
    --sultan-ink: #303533;
    --sultan-muted: #626b65;
    --sultan-border: #e4dcc8;
    --sultan-shadow: 0 6px 24px rgb(10 60 36 / 7%);
    --primary-color: var(--sultan-emerald);
    --bs-primary: var(--sultan-emerald);
    --bs-primary-rgb: 10, 92, 54;
    --bs-body-color: var(--sultan-ink);
    --bs-body-bg: #fcfbf7;
    --bs-link-color: var(--sultan-emerald);
    --bs-link-hover-color: var(--sultan-emerald-dark);
}
body {
    background-color: #fcfbf7;
    color: var(--sultan-ink);
    font-family: "Outfit", "Segoe UI", sans-serif;
}
h1, h2, h3, h4, h5, h6, label, button, .btn, .menu-title {
    font-family: "Outfit", "Segoe UI", sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
::selection { background: var(--sultan-gold-light); color: var(--sultan-emerald-dark); }
.bg--gray, .bg-light, .page-wrapper, .main-wrapper, .main-body-wrapper {
    background-color: #fcfbf7 !important;
}
.bg--base, .bg--primary { background-color: var(--sultan-emerald) !important; }
.text--base, .text--primary, .text-primary { color: var(--sultan-emerald) !important; }
.bg--section, .bg--secondary { background-color: var(--sultan-cream); }

/* Primary, secondary, disabled and keyboard states. Semantic danger/success remain intact. */
.btn--base, .btn--primary, .btn-primary, .cookie-btn, .qr-scan, .scrollToTop {
    background: var(--sultan-emerald);
    border: 1px solid var(--sultan-emerald);
    color: var(--sultan-gold-light);
    border-radius: 8px;
    box-shadow: 0 3px 8px rgb(10 60 36 / 10%);
    font-weight: 600;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.btn--base:hover, .btn--base:focus, .btn--primary:hover, .btn--primary:focus,
.btn-primary:hover, .btn-primary:focus, .cookie-btn:hover {
    background: var(--sultan-emerald-dark);
    border-color: var(--sultan-gold);
    color: var(--sultan-gold-light);
    box-shadow: 0 4px 12px rgb(10 60 36 / 16%);
}
.btn--base.active, .btn-outline-primary, .btn--secondary {
    background: var(--sultan-cream);
    border: 1px solid var(--sultan-gold);
    color: var(--sultan-gold-ink);
    border-radius: 8px;
}
.btn--base.active:hover, .btn--base.active:focus, .btn-outline-primary:hover,
.btn--secondary:hover { background: var(--sultan-gold-light); color: var(--sultan-emerald-dark); }
.btn:disabled, .btn.disabled, .btn--base.disabled, .btn--base:disabled,
.btn--base.disabled:hover, .btn--base:disabled:hover {
    background: #e0e2df;
    border-color: #c8cdc8;
    color: #626862;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--sultan-gold);
    outline-offset: 3px;
}

/* Emerald outlines, warm surfaces and legible gold-toned hints. */
.form-control, .form--control, .form-select, .nice-select,
.input-group input, .custom--card .card-body .card-form-wrapper input,
.custom--card .card-body .card-form-wrapper select,
.select2-container--default .select2-selection--single {
    background-color: var(--sultan-surface);
    border-color: var(--sultan-emerald);
    border-radius: 7px;
    color: var(--sultan-ink);
}
.form-control:focus, .form--control:focus, .form-select:focus,
.input-group input:focus, .custom--card .card-body .card-form-wrapper input:focus {
    background-color: #fff;
    border-color: var(--sultan-emerald);
    color: var(--sultan-ink);
    box-shadow: 0 0 0 3px rgb(197 162 77 / 22%);
}
input::placeholder, textarea::placeholder,
.custom--card .card-body .card-form-wrapper input::placeholder {
    color: var(--sultan-gold-ink); opacity: 1;
}
.form-control:disabled, .form-control[readonly], .form--control:disabled {
    background: #f0f0eb; border-color: #c8cdc8; color: var(--sultan-muted);
}
.form-control.is-invalid, .form--control.is-invalid { border-color: #b42332; }
.form-control.is-valid { border-color: var(--sultan-emerald); }
.form-check-input:checked { background-color: var(--sultan-emerald); border-color: var(--sultan-emerald); }
.input-group-text { background: var(--sultan-cream); color: var(--sultan-emerald); border-color: var(--sultan-emerald); }
.nice-select .option:hover, .nice-select .option.selected,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sultan-cream); color: var(--sultan-emerald-dark);
}

/* Shared cards and transaction surfaces. */
.custom--card, .dashbord-item, .dashboard-list-wrapper .dashboard-list-item,
.dashboard-list-item-wrapper, .chart-wrapper, .table-area, .modal-content {
    background: var(--sultan-surface);
    border: 1px solid var(--sultan-border);
    border-radius: 12px;
    box-shadow: var(--sultan-shadow);
}
.custom--card .card-header {
    background: var(--sultan-cream); border-bottom: 1px solid var(--sultan-border);
}
.custom--card .card-header .card-title, .dashboard-content .title {
    color: var(--sultan-emerald-dark);
}
.dashbord-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(10 60 36 / 12%); }
.dashbord-item .dashboard-icon, .dashboard-list-user-wrapper .dashboard-list-user-icon {
    background: var(--sultan-cream); color: var(--sultan-emerald); border: 1px solid var(--sultan-border);
}
.custom-table thead tr { background: var(--sultan-emerald); }
.custom-table thead tr th { color: var(--sultan-gold-light); }
.custom-table tbody tr { background: #fff; border-color: var(--sultan-border); }
.custom-table tbody tr td { color: var(--sultan-ink); }
.table-area.two .custom-table thead tr th { color: var(--sultan-emerald); }
.custom-table tbody tr:hover, .table-area.two .custom-table tbody tr:hover { background: #faf7ef; }
.pagination .page-item.active .page-link { background: var(--sultan-emerald); border-color: var(--sultan-emerald); color: #fff; }
.page-link { color: var(--sultan-emerald); }

/* Light navigation keeps existing full-color logos legible. */
.sidebar, .navbar-wrapper {
    background: #fff; border-color: var(--sultan-border); box-shadow: var(--sultan-shadow);
}
.sidebar-logo { border-bottom: 1px solid var(--sultan-border); }
.sidebar .sidebar-menu .sidebar-menu-item > a { color: var(--sultan-emerald-dark); }
.sidebar .sidebar-menu .sidebar-menu-item > a .menu-icon,
.sidebar .sidebar-menu .sidebar-menu-item > a .submenu-icon { color: var(--sultan-emerald); }
.sidebar .sidebar-menu .sidebar-menu-item > a:hover,
.sidebar .sidebar-menu .sidebar-menu-item > a.active {
    background: var(--sultan-emerald); color: var(--sultan-gold-light); border-radius: 8px;
}
.sidebar .sidebar-menu .sidebar-menu-item > a:hover .menu-icon,
.sidebar .sidebar-menu .sidebar-menu-item > a.active .menu-icon,
.sidebar .sidebar-menu .sidebar-menu-item > a:hover .submenu-icon,
.sidebar .sidebar-menu .sidebar-menu-item > a.active .submenu-icon { color: var(--sultan-gold-light) !important; }
.sidebar .sidebar-submenu { background: #faf7ef; }
.header-section .header-bottom { border-bottom: 1px solid var(--sultan-border); }
.footer-section { background-color: var(--sultan-emerald-dark); }
.progress { background-color: var(--sultan-border); }
.progress-bar { background: linear-gradient(90deg, var(--sultan-emerald), var(--sultan-gold)); }
.spinner-border { color: var(--sultan-emerald); }

/* Icon masks use the supplied SVG geometry and inherit contextual text colors.
   Legacy classes are retained for existing password-toggle and navigation handlers. */
.sultan-icon { display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; mask: var(--sultan-icon) center / contain no-repeat; -webkit-mask: var(--sultan-icon) center / contain no-repeat; vertical-align: -.2em; }
@media (prefers-reduced-motion: reduce) {
    .btn, .btn--base, .dashbord-item { transition: none; }
    .dashbord-item:hover { transform: none; }
    .spinner-border, .spinner-grow, .progress-bar { animation: none; }
}

/* Supplied icon catalog and compatible font-icon aliases. */
.sultan-icon--alerts { --sultan-icon: url('../images/sultan-pay/icons/alerts.svg'); }
i.fa-bell::before, span.fa-bell::before,
i.la-bell::before, span.la-bell::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/alerts.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/alerts.svg') center / contain no-repeat;
}
.sultan-icon--bills { --sultan-icon: url('../images/sultan-pay/icons/bills.svg'); }
i.fa-file-invoice::before, span.fa-file-invoice::before,
i.fa-file-invoice-dollar::before, span.fa-file-invoice-dollar::before,
i.la-file-invoice::before, span.la-file-invoice::before,
i.la-file-invoice-dollar::before, span.la-file-invoice-dollar::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/bills.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/bills.svg') center / contain no-repeat;
}
.sultan-icon--camera { --sultan-icon: url('../images/sultan-pay/icons/camera.svg'); }
i.fa-camera::before, span.fa-camera::before,
i.la-camera::before, span.la-camera::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/camera.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/camera.svg') center / contain no-repeat;
}
.sultan-icon--check { --sultan-icon: url('../images/sultan-pay/icons/check.svg'); }
i.fa-check::before, span.fa-check::before,
i.la-check::before, span.la-check::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/check.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/check.svg') center / contain no-repeat;
}
.sultan-icon--chevron-right { --sultan-icon: url('../images/sultan-pay/icons/chevron-right.svg'); }
i.fa-chevron-right::before, span.fa-chevron-right::before,
i.la-angle-right::before, span.la-angle-right::before,
i.fa-angle-right::before, span.fa-angle-right::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/chevron-right.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/chevron-right.svg') center / contain no-repeat;
}
.sultan-icon--contactless { --sultan-icon: url('../images/sultan-pay/icons/contactless.svg'); }
i.fa-wifi::before, span.fa-wifi::before,
i.la-wifi::before, span.la-wifi::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/contactless.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/contactless.svg') center / contain no-repeat;
}
.sultan-icon--ecommerce { --sultan-icon: url('../images/sultan-pay/icons/ecommerce.svg'); }
i.fa-shopping-bag::before, span.fa-shopping-bag::before,
i.fa-shopping-cart::before, span.fa-shopping-cart::before,
i.la-shopping-bag::before, span.la-shopping-bag::before,
i.la-shopping-cart::before, span.la-shopping-cart::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/ecommerce.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/ecommerce.svg') center / contain no-repeat;
}
.sultan-icon--electric { --sultan-icon: url('../images/sultan-pay/icons/electric.svg'); }
i.fa-bolt::before, span.fa-bolt::before,
i.la-bolt::before, span.la-bolt::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/electric.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/electric.svg') center / contain no-repeat;
}
.sultan-icon--eye { --sultan-icon: url('../images/sultan-pay/icons/eye.svg'); }
i.fa-eye::before, span.fa-eye::before,
i.la-eye::before, span.la-eye::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/eye.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/eye.svg') center / contain no-repeat;
}
.sultan-icon--financing { --sultan-icon: url('../images/sultan-pay/icons/financing.svg'); }
i.fa-chart-line::before, span.fa-chart-line::before,
i.la-chart-line::before, span.la-chart-line::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/financing.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/financing.svg') center / contain no-repeat;
}
.sultan-icon--fingerprint { --sultan-icon: url('../images/sultan-pay/icons/fingerprint.svg'); }
i.fa-fingerprint::before, span.fa-fingerprint::before,
i.la-fingerprint::before, span.la-fingerprint::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/fingerprint.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/fingerprint.svg') center / contain no-repeat;
}
.sultan-icon--home { --sultan-icon: url('../images/sultan-pay/icons/home.svg'); }
i.fa-home::before, span.fa-home::before,
i.la-home::before, span.la-home::before,
i.fa-rocket::before, span.fa-rocket::before,
i.la-rocket::before, span.la-rocket::before,
i.fa-tachometer-alt::before, span.fa-tachometer-alt::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/home.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/home.svg') center / contain no-repeat;
}
.sultan-icon--lock { --sultan-icon: url('../images/sultan-pay/icons/lock.svg'); }
i.fa-lock::before, span.fa-lock::before,
i.la-lock::before, span.la-lock::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/lock.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/lock.svg') center / contain no-repeat;
}
.sultan-icon--plus { --sultan-icon: url('../images/sultan-pay/icons/plus.svg'); }
i.fa-plus::before, span.fa-plus::before,
i.fa-plus-circle::before, span.fa-plus-circle::before,
i.la-plus::before, span.la-plus::before,
i.la-plus-circle::before, span.la-plus-circle::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/plus.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/plus.svg') center / contain no-repeat;
}
.sultan-icon--profile { --sultan-icon: url('../images/sultan-pay/icons/profile.svg'); }
i.fa-user::before, span.fa-user::before,
i.la-user::before, span.la-user::before,
i.fa-user-circle::before, span.fa-user-circle::before,
i.la-user-circle::before, span.la-user-circle::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/profile.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/profile.svg') center / contain no-repeat;
}
.sultan-icon--qr-pay { --sultan-icon: url('../images/sultan-pay/icons/qr-pay.svg'); }
i.fa-qrcode::before, span.fa-qrcode::before,
i.la-qrcode::before, span.la-qrcode::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/qr-pay.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/qr-pay.svg') center / contain no-repeat;
}
.sultan-icon--request { --sultan-icon: url('../images/sultan-pay/icons/request.svg'); }
i.fa-hand-holding-usd::before, span.fa-hand-holding-usd::before,
i.la-hand-holding-usd::before, span.la-hand-holding-usd::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/request.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/request.svg') center / contain no-repeat;
}
.sultan-icon--search { --sultan-icon: url('../images/sultan-pay/icons/search.svg'); }
i.fa-search::before, span.fa-search::before,
i.la-search::before, span.la-search::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/search.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/search.svg') center / contain no-repeat;
}
.sultan-icon--send { --sultan-icon: url('../images/sultan-pay/icons/send.svg'); }
i.fa-paper-plane::before, span.fa-paper-plane::before,
i.la-paper-plane::before, span.la-paper-plane::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/send.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/send.svg') center / contain no-repeat;
}
.sultan-icon--shariah-compliant { --sultan-icon: url('../images/sultan-pay/icons/shariah-compliant.svg'); }
i.fa-shield-alt::before, span.fa-shield-alt::before,
i.la-shield-alt::before, span.la-shield-alt::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/shariah-compliant.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/shariah-compliant.svg') center / contain no-repeat;
}
.sultan-icon--wallet { --sultan-icon: url('../images/sultan-pay/icons/wallet.svg'); }
i.fa-wallet::before, span.fa-wallet::before,
i.la-wallet::before, span.la-wallet::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/wallet.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/wallet.svg') center / contain no-repeat;
}
.sultan-icon--water { --sultan-icon: url('../images/sultan-pay/icons/water.svg'); }
i.fa-tint::before, span.fa-tint::before,
i.la-tint::before, span.la-tint::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url('../images/sultan-pay/icons/water.svg') center / contain no-repeat;
    mask: url('../images/sultan-pay/icons/water.svg') center / contain no-repeat;
}
.sultan-icon--zakat { --sultan-icon: url('../images/sultan-pay/icons/zakat.svg'); }

/* Public landing surfaces and compact responsive brand artwork. */
.banner-section { background-image: none !important; background-color: #faf8f1; padding: 64px 0; }
.banner-section .row { align-items: center; }
.banner-section .banner-content { padding: 24px 0; }
.banner-section .banner-thumb-area { position: static; }
.banner-section .banner-thumb-area img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--sultan-border); box-shadow: var(--sultan-shadow); }
.banner-section .banner-title { color: var(--sultan-emerald-dark); }
.banner-section .banner-sub-titel { background: var(--sultan-cream); color: var(--sultan-emerald); border: 1px solid var(--sultan-border); }
.navbar-right .header-action .btn-auth { border-color: var(--sultan-gold); color: var(--sultan-gold-ink); background: var(--sultan-cream); }
.navbar-right .header-action .btn-auth:hover { background: var(--sultan-gold-light); color: var(--sultan-emerald-dark); }
.cookie-main-wrapper { background: var(--sultan-emerald-dark); border: 1px solid var(--sultan-gold); }
.cookie-main-wrapper .cookie-btn-area button { background: var(--sultan-cream); color: var(--sultan-emerald-dark); border: 1px solid var(--sultan-gold); }
.cookie-main-wrapper .cookie-btn-area button:hover { background: var(--sultan-gold-light); color: var(--sultan-emerald-dark); }
/* The footer bg_image is a light texture, so footer text uses dark brand colors. */
.footer-section, .footer-section p, .footer-section a, .footer-section .title { color: var(--sultan-emerald-dark); }
.footer-section .widget-title { color: var(--sultan-emerald-dark); }
.footer-section a:hover { color: var(--sultan-gold-ink); }
@media (max-width: 767px) {
    .banner-section { padding: 28px 0; }
    .banner-section .banner-content { padding: 12px 0; }
    .banner-section .banner-title { font-size: clamp(28px, 7vw, 38px); }
}

.account .account-wrapper .account-form .nice-select { border-color: var(--sultan-emerald); background: #fff; }
.account .account-wrapper { border-color: var(--sultan-border); box-shadow: var(--sultan-shadow); }
.navbar-right .header-action .btn-auth.btn--base { background: var(--sultan-emerald); color: var(--sultan-gold-light); border-color: var(--sultan-emerald); }
.navbar-right .header-action .btn-active { border-color: var(--sultan-gold); color: var(--sultan-gold-ink); box-shadow: none; }
/* Legacy form borders use !important; match that priority for branded outlines. */
.form--control, .nice-select, .account .account-wrapper .account-form .form-control,
.account .account-wrapper .account-form .nice-select { border-color: var(--sultan-emerald) !important; }
.form--control.is-invalid, .form-control.is-invalid { border-color: #b42332 !important; }
.form--control:disabled, .form-control:disabled { border-color: #c8cdc8 !important; }
.banner-floting-section { margin-top: 0; padding-top: 24px; }
.banner-floting-right-area { border-color: var(--sultan-border); box-shadow: var(--sultan-shadow); }
.navbar-toggler span { background: var(--sultan-emerald); color: var(--sultan-gold-light); }
@media (max-width: 767px) {
    .banner-section .banner-thumb-area { display: block; }
}

/* Admin navigation: a fixed brand surface in both legacy light and dark modes. */
body.sultan-admin .sidebar {
    background: linear-gradient(165deg, #0a5c36 0%, #06452a 55%, #043523 100%) !important;
    color: #f6f1e5;
    border: 0;
    border-inline-end: 1px solid rgb(197 162 77 / 45%);
    box-shadow: 6px 0 24px rgb(4 53 35 / 12%);
    scrollbar-width: thin;
    scrollbar-color: #c5a24d #06452a;
}
body.sultan-admin .sidebar .sidebar-logo {
    padding: 12px 0 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgb(197 162 77 / 35%);
}
body.sultan-admin .sidebar .sidebar-logo .sidebar-main-logo { max-width: 155px; width: 100%; }
body.sultan-admin .sidebar .sidebar-user-area { border-color: rgb(197 162 77 / 30%); padding-bottom: 22px; }
body.sultan-admin .sidebar .sidebar-user-area .sidebar-user-thumb img {
    border: 2px solid #c5a24d;
    box-shadow: 0 0 0 5px rgb(197 162 77 / 12%);
}
body.sultan-admin .sidebar .sidebar-user-area .sidebar-user-content .title { color: #fff; font-weight: 600; }
body.sultan-admin .sidebar .sidebar-user-area .sidebar-user-content .sub-title { color: #e0d8bf; }
body.sultan-admin .sidebar .sidebar-menu-header {
    color: #e2c878;
    font-size: 10px;
    letter-spacing: .09em;
    font-weight: 700;
    padding-inline-start: 8px;
    margin: 26px 0 12px;
    white-space: normal;
}
body.sultan-admin .sidebar .sidebar-menu-header::before { content: none; }
body.sultan-admin .sidebar .sidebar-menu-header:empty { display: none; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item { margin-top: 5px; letter-spacing: normal; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a {
    color: #f6f1e5 !important;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 8px;
    gap: 0;
    flex-wrap: nowrap;
    font-weight: 500;
    letter-spacing: normal;
    transition: background-color .18s, border-color .18s;
}
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a .menu-title { color: inherit !important; line-height: 1.35; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a .menu-icon {
    color: #e2c878 !important;
    flex-shrink: 0;
}
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a:hover,
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a:focus-visible {
    color: #fff !important;
    background: rgb(255 255 255 / 9%);
    border-color: rgb(197 162 77 / 40%);
    letter-spacing: normal;
}
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item.active > a,
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a.active {
    background: #eed99b;
    color: #043523 !important;
    border-color: #eed99b;
    box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
    font-weight: 700;
}
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item.active > a .menu-icon,
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a.active .menu-icon { color: #06452a !important; }
/* Keep the legacy active-arrow/collapsed behavior; recolor its indicator. */
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item.active > a::before { color: #06452a; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item::after { background: #e2c878; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item.sidebar-dropdown > a::after { color: inherit; top: 12px; right: 5px; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item.sidebar-dropdown > a { padding-inline-end: 20px; }
body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item .sidebar-submenu {
    background: rgb(0 0 0 / 12%);
    border-inline-start: 1px solid rgb(197 162 77 / 40%);
    border-radius: 0 0 8px 8px;
    margin-inline-start: 10px;
    padding-inline-start: 6px;
}
body.sultan-admin .mini-sidebar {
    background: #032d20 !important;
    border-inline-end: 1px solid rgb(197 162 77 / 28%);
}
body.sultan-admin .mini-sidebar .header-btn > button,
body.sultan-admin .mini-sidebar .header-btn > a,
body.sultan-admin .mini-sidebar .header-btn > button i,
body.sultan-admin .mini-sidebar .header-btn > a i { color: #e2c878 !important; }
body.sultan-admin .mini-sidebar .header-version-bar { background: #0a5c36; border: 1px solid rgb(197 162 77 / 50%); }
body.sultan-admin .mini-sidebar .header-btn > button:hover { background: #0a5c36; border-radius: 6px; }
body.sultan-admin .sidebar .sidebar-logo .sidebar-menu-bar { color: #e2c878; }
body.sultan-admin .sidebar::-webkit-scrollbar { width: 4px; }
body.sultan-admin .sidebar::-webkit-scrollbar-thumb { background: #c5a24d; border-radius: 4px; }
body.sultan-admin .sidebar a:focus-visible,
body.sultan-admin .mini-sidebar button:focus-visible { outline: 2px solid #eed99b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    body.sultan-admin .sidebar .sidebar-menu .sidebar-menu-item > a { transition: none; }
}