/* ============================================================
   ZP UI Fixes v1.0 — surgical contrast + dropdown fixes
   Loaded LAST so it wins specificity races without touching
   the original CSS files.
   Targets: select2, nice-select, native <select>, form inputs,
   modals, popups, tables, buttons, navy-bg text inheritance.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1) NATIVE <select> AND <option>
   Force readable text everywhere.
   ───────────────────────────────────────────────────────────── */
select,
.form-control,
.form-select {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

select option,
select optgroup {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* Selects on navy/dark backgrounds get an inverted look */
[class*="zp-hero"] select,
[class*="zp-dark"] select,
.user-panel .zp-hero select,
.bg-navy select,
.bg-dark select {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* But options ALWAYS render on white because browsers can't style them */
[class*="zp-hero"] select option,
[class*="zp-dark"] select option {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   2) SELECT2 v4 — full restyle
   Common pain points: selection text invisible, dropdown
   options unreadable, focus state lost.
   ───────────────────────────────────────────────────────────── */
.select2-container .select2-selection--single {
    height: 42px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    background-color: #ffffff !important;
    padding: 4px 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 28px !important;
    padding-right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    top: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #475569 transparent transparent transparent !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    outline: none !important;
}

/* Multi-select */
.select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 3px 9px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    margin-inline-end: 5px !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Select2 DROPDOWN popup — this is where most contrast bugs live */
.select2-container--default .select2-dropdown {
    background-color: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

.select2-container--default .select2-results__option {
    color: #0f172a !important;
    background-color: transparent !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 11px !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-results__group {
    color: #475569 !important;
    background-color: #f8fafc !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* ─────────────────────────────────────────────────────────────
   3) NICE-SELECT — closely related dropdown library
   ───────────────────────────────────────────────────────────── */
.nice-select {
    background-color: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    color: #0f172a !important;
    border-radius: 9px !important;
    height: 42px !important;
    line-height: 38px !important;
    padding-left: 14px !important;
    padding-right: 32px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

[dir="rtl"] .nice-select {
    padding-left: 32px !important;
    padding-right: 14px !important;
}

.nice-select .current {
    color: #0f172a !important;
    display: block !important;
    line-height: 38px !important;
}

.nice-select:hover,
.nice-select:focus,
.nice-select.open {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.nice-select::after {
    border-color: #475569 !important;
    border-width: 0 0 1.5px 1.5px !important;
}

/* Nice-select DROPDOWN list (where invisibility happens) */
.nice-select .list {
    background-color: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
}

.nice-select .option {
    color: #0f172a !important;
    background-color: transparent !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    min-height: 36px !important;
    list-style: none !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.nice-select .option.selected {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.nice-select .option.disabled {
    color: #cbd5e1 !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
}

/* ─────────────────────────────────────────────────────────────
   4) FORM INPUTS — make text+placeholder readable on every bg
   ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Inputs sitting on top of navy/dark hero sections */
[class*="zp-hero"] input,
[class*="zp-hero"] textarea,
.user-panel .zp-hero input,
.user-panel .zp-hero textarea {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[class*="zp-hero"] input::placeholder,
[class*="zp-hero"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ─────────────────────────────────────────────────────────────
   5) NAVY / DARK HERO BACKGROUNDS — text must be light
   The User panel uses navy gradients heavily. Force any leaked
   black text back to white when it sits on navy.
   ───────────────────────────────────────────────────────────── */
.zp-hero,
.zp-hero h1, .zp-hero h2, .zp-hero h3, .zp-hero h4, .zp-hero h5, .zp-hero h6,
.zp-hero p, .zp-hero span, .zp-hero label, .zp-hero a:not(.btn):not(.zp-btn):not(.utp-book-btn):not(.tp-btn-primary),
.utp-header,
.utp-header h2, .utp-header p,
.utpd-head, .utpd-head h2, .utpd-head p,
.ptp-hero, .ptp-hero h1, .ptp-hero p,
.ptps-hero-content, .ptps-hero-content h1 {
    color: #ffffff !important;
}

/* Children explicitly tinted (like opacity-75 text) keep their look */
.zp-hero [style*="opacity"],
.utp-header [style*="opacity"] {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ─────────────────────────────────────────────────────────────
   6) BOOTSTRAP MODALS — readable text on white modal body
   ───────────────────────────────────────────────────────────── */
.modal-content {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-radius: 14px !important;
}

.modal-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #0f172a !important;
}

.modal-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.modal-body {
    color: #334155 !important;
}

.modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e5e7eb !important;
}

.modal-backdrop {
    background-color: #000 !important;
}

.modal-backdrop.show {
    opacity: 0.6 !important;
}

/* Close button must stay visible on any header */
.modal .btn-close,
.modal .close {
    opacity: 0.7 !important;
    color: #0f172a !important;
}

.modal .btn-close:hover,
.modal .close:hover {
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   7) MAGNIFIC POPUP — used by virtual cards / image popups
   ───────────────────────────────────────────────────────────── */
.mfp-content {
    color: #0f172a !important;
}

.mfp-bg {
    background-color: #0f172a !important;
}

.mfp-title, .mfp-counter {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   8) SWEETALERT 2 — used by notifications & confirms
   ───────────────────────────────────────────────────────────── */
.swal2-popup {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

.swal2-title, .swal2-html-container {
    color: #0f172a !important;
}

/* ─────────────────────────────────────────────────────────────
   9) DATEPICKER / FLATPICKR
   ───────────────────────────────────────────────────────────── */
.flatpickr-calendar {
    background-color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.15) !important;
    border-radius: 10px !important;
}

.flatpickr-day {
    color: #0f172a !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
}

.flatpickr-day.today {
    border-color: #3b82f6 !important;
    color: #1e3a8a !important;
}

.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    color: #cbd5e1 !important;
}

/* Bootstrap datepicker fallback */
.datepicker {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.datepicker td, .datepicker th {
    color: #0f172a !important;
}

.datepicker td.active {
    background: #1e3a8a !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   10) TABLES — header + cells contrast
   ───────────────────────────────────────────────────────────── */
table th {
    color: #475569 !important;
    background-color: #f8fafc !important;
    font-weight: 700 !important;
}

table td {
    color: #334155 !important;
}

/* Tables on navy/dark headers (e.g. dashboards) keep their look —
   only target generic tables, not branded ones */
.table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom-color: #e5e7eb !important;
}

/* ─────────────────────────────────────────────────────────────
   11) BUTTONS — disabled state visible everywhere
   ───────────────────────────────────────────────────────────── */
.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ─────────────────────────────────────────────────────────────
   12) DROPDOWN MENU (Bootstrap) — used in nav, profile, etc.
   ───────────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 11px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.13) !important;
    padding: 6px !important;
}

.dropdown-item {
    color: #334155 !important;
    padding: 8px 12px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

.dropdown-divider {
    border-top: 1px solid #f1f5f9 !important;
    margin: 5px 0 !important;
}

.dropdown-header {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 6px 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   13) Z-INDEX safety net — dropdowns must always be above
   sticky headers / sidebars
   ───────────────────────────────────────────────────────────── */
.select2-container {
    z-index: 1056 !important;
}

.select2-dropdown {
    z-index: 1057 !important;
}

.nice-select .list {
    z-index: 1050 !important;
}

.dropdown-menu.show {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1054 !important;
}

/* ─────────────────────────────────────────────────────────────
   14) FOCUS RINGS — visible accessibility everywhere
   ───────────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    outline: none !important;
}

/* ─────────────────────────────────────────────────────────────
   15) AGENT PANEL ACCENT FIX (teal instead of navy on focus)
   The Agent panel uses teal #0d9488. Keep its focus rings on-brand.
   ───────────────────────────────────────────────────────────── */
.agent-panel input:focus,
.agent-panel textarea:focus,
.agent-panel select:focus,
.agent-panel .select2-container--default.select2-container--focus .select2-selection--single,
.agent-panel .select2-container--default.select2-container--open .select2-selection--single,
.agent-panel .nice-select:hover,
.agent-panel .nice-select.open {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.13) !important;
}

.agent-panel .select2-container--default .select2-results__option--highlighted,
.agent-panel .nice-select .option.selected {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   16) MERCHANT PANEL ACCENT FIX (purple)
   ───────────────────────────────────────────────────────────── */
.merchant-panel input:focus,
.merchant-panel textarea:focus,
.merchant-panel select:focus,
.merchant-panel .nice-select:hover,
.merchant-panel .nice-select.open {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13) !important;
}

.merchant-panel .select2-container--default .select2-results__option--highlighted,
.merchant-panel .nice-select .option.selected {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   17) LABELS — readable on light forms
   ───────────────────────────────────────────────────────────── */
label,
.form-label {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* On navy hero, labels go light */
.zp-hero label,
[class*="zp-hero"] label {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* ─────────────────────────────────────────────────────────────
   18) CARDS / WHITE SURFACES — text contrast safeguard
   ───────────────────────────────────────────────────────────── */
.card,
.card-bg-white {
    color: #334155 !important;
    background-color: #ffffff !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card-bg-white h1, .card-bg-white h2, .card-bg-white h3, .card-bg-white h4, .card-bg-white h5, .card-bg-white h6 {
    color: #0f172a !important;
}

/* ─────────────────────────────────────────────────────────────
   19) Dark-mode safety net (when [data-theme="dark"] is set)
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .nice-select,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .card,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color: #f1f5f9 !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .nice-select .list,
[data-theme="dark"] .select2-container--default .select2-dropdown,
[data-theme="dark"] .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .nice-select .option,
[data-theme="dark"] .select2-container--default .select2-results__option,
[data-theme="dark"] .dropdown-item {
    color: #f1f5f9 !important;
}

[data-theme="dark"] table th {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] table td {
    color: #cbd5e1 !important;
}

/* ============================================================
   ZP UI FIXES v1.1 — additions after screenshot feedback
   Targets: zi-hero, zp-panel-hero, nice-select .current visibility,
   top-nav compactness, user dropdown.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   20) ALL HERO/BANNER VARIANTS — force white text on dark bg
   ───────────────────────────────────────────────────────────── */
.zi-hero,
.zi-hero *,
.zp-panel-hero,
.zp-panel-hero *,
[class*="-hero"]:not([class*="-hero-stat"]):not([class*="-hero-card"]) {
    color: #ffffff !important;
}

/* Re-allow specific colored sub-elements inside heroes */
.zi-hero-stat .val.green,
.zi-hero .val.green { color: #86efac !important; }
.zi-hero-stat .val.red,
.zi-hero .val.red { color: #fda4af !important; }
.zi-hero-stat .chg.up,
.zi-hero .chg.up { color: #fda4af !important; }
.zi-hero-stat .chg.down,
.zi-hero .chg.down { color: #86efac !important; }

/* Hero icons keep their gradient — but inner SVG/i text stays white */
.zp-panel-hero-icon,
.zi-hero h2 i,
.zp-panel-hero-icon i {
    color: #ffffff !important;
}

/* Subtitles get softer white */
.zp-panel-hero-sub,
.zi-hero p {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Hero titles stay bold white */
.zp-panel-hero-title,
.zi-hero h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────
   21) NICE-SELECT .current visibility hardening
   Strongest fix: the wrapper div generated by nice-select.js had
   an invisible .current span on some pages. Force visibility.
   ───────────────────────────────────────────────────────────── */
div.nice-select {
    background-color: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    color: #0f172a !important;
    height: 44px !important;
    line-height: 40px !important;
    padding: 0 32px 0 14px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 9px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    overflow: visible !important;
}

[dir="rtl"] div.nice-select {
    padding: 0 14px 0 32px !important;
}

div.nice-select > .current,
div.nice-select span.current {
    color: #0f172a !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 40px !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-indent: 0 !important;
}

/* Empty .current fallback — show placeholder via JS-style hint */
div.nice-select > .current:empty::after {
    content: '—' !important;
    color: #94a3b8 !important;
}

/* Native <select> with nice-select class but JS not yet run: hide raw select */
select.nice-select,
select.form--control.nice-select {
    display: none !important;
}

/* The arrow stays visible */
div.nice-select::after {
    content: '' !important;
    position: absolute !important;
    inset-inline-end: 14px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border-style: solid !important;
    border-color: #475569 !important;
    border-width: 0 0 1.5px 1.5px !important;
    transform: rotate(-45deg) !important;
    transition: transform 0.2s ease !important;
    pointer-events: none !important;
}

div.nice-select.open::after {
    transform: rotate(135deg) !important;
}

/* The list (already styled) — strengthen against z-index issues */
div.nice-select .list {
    background-color: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    margin-top: 6px !important;
    padding: 4px 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    z-index: 9999 !important;
    position: absolute !important;
    top: 100% !important;
    inset-inline-start: 0 !important;
}

div.nice-select .option {
    color: #0f172a !important;
    background-color: transparent !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    min-height: 38px !important;
    cursor: pointer !important;
    list-style: none !important;
    text-align: start !important;
}

div.nice-select .option:hover,
div.nice-select .option.focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

div.nice-select .option.selected {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────
   22) TOP NAVIGATION BAR — compact + readable
   Issues: navbar-wrapper too tall, language dropdown empty,
   no logout button.
   ───────────────────────────────────────────────────────────── */
.navbar-wrapper {
    padding: 8px 18px !important;
    min-height: auto !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
}

.dashboard-title-part {
    min-height: 50px !important;
    padding: 4px 0 !important;
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.dashboard-title-part .right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Clock — compact pill */
.zp-nav-clock {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    line-height: 1 !important;
    padding: 4px 10px !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
}

.zp-nav-time {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.3px !important;
}

.zp-nav-date {
    font-size: 10.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}

/* Language selector compact */
.dash-lang-select {
    position: relative !important;
}

.zp-lang-dd {
    position: relative !important;
}

.zp-lang-btn {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9px !important;
    padding: 6px 28px 6px 12px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 90px !important;
}

[dir="rtl"] .zp-lang-btn {
    padding: 6px 12px 6px 28px !important;
}

.zp-lang-label {
    color: #0f172a !important;
}

.zp-lang-arrow {
    position: absolute !important;
    inset-inline-end: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #64748b !important;
    pointer-events: none !important;
}

.zp-lang-menu {
    list-style: none !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15) !important;
    padding: 4px !important;
    margin: 0 !important;
    min-width: 140px !important;
    z-index: 9999 !important;
    display: none !important;
    position: fixed !important;
}

.zp-lang-menu.open {
    display: block !important;
}

.zp-lang-item {
    padding: 8px 12px !important;
    color: #334155 !important;
    cursor: pointer !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.zp-lang-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.zp-lang-item.active {
    background: #1e3a8a !important;
    color: #ffffff !important;
}

/* Notification bell + user avatar — compact size */
.push-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #475569 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
}

.push-icon:hover {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
}

.zp-notif-badge {
    position: absolute !important;
    top: -4px !important;
    inset-inline-end: -4px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 8px !important;
    min-width: 16px !important;
    text-align: center !important;
    line-height: 1 !important;
}

.header-user-wrapper {
    position: relative !important;
}

.header-user-thumb img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #1e3a8a !important;
    cursor: pointer !important;
}

/* New: user dropdown (Profile + Logout) — appended by E.3 modification */
.zp-user-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    inset-inline-end: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 11px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15) !important;
    padding: 6px !important;
    min-width: 200px !important;
    z-index: 9999 !important;
    display: none !important;
}

.zp-user-menu.open {
    display: block !important;
}

.zp-user-menu-header {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 4px !important;
}

.zp-user-menu-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.zp-user-menu-email {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 2px !important;
    word-break: break-all !important;
}

.zp-user-menu a,
.zp-user-menu button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: start !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

.zp-user-menu a:hover,
.zp-user-menu button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.zp-user-menu .logout-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
}

.zp-user-menu i {
    width: 18px !important;
    font-size: 14px !important;
    text-align: center !important;
}

.zp-user-menu form {
    margin: 0 !important;
}

/* Sidebar bars button compact */
.sidebar-menu-bar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #475569 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.sidebar-menu-bar:hover {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
}

/* Mobile responsive: stack on small screens */
@media (max-width: 768px) {
    .zp-nav-clock { display: none !important; }
    .navbar-wrapper { padding: 8px 12px !important; }
    .dashboard-title-part .right { gap: 6px !important; }
}

/* ============================================================
   ZP UI FIXES v1.2 — surgical fixes for screenshot 3
   1) .zp-travel-hero h2/p must be white
   2) navbar height capped, no extra empty space
   3) Hide native lang select reliably (avoid double dropdown look)
   4) push-wrapper hidden by default before JS runs
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   23) ALL TRAVEL/PANEL HEROES — explicit child selectors
   The `[class*="-hero"]` catch-all only matched the element,
   not its children. Spell out the common children here.
   ───────────────────────────────────────────────────────────── */
.zp-travel-hero,
.zp-travel-hero > div,
.zp-travel-hero h1,
.zp-travel-hero h2,
.zp-travel-hero h3,
.zp-travel-hero h4,
.zp-travel-hero p,
.zp-travel-hero span:not(.badge),
.zp-travel-hero label,
.zp-travel-hero a:not(.btn):not([class*="tab"]),
.zp-travel-hero i {
    color: #ffffff !important;
}

.zp-travel-hero h2 {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.zp-travel-hero > p,
.zp-travel-hero > div > p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Search form box INSIDE the travel hero — keep its dark text */
.zp-travel-hero .zp-tsearch,
.zp-travel-hero .zp-tsearch *,
.zp-travel-hero .zp-tsearch-grid,
.zp-travel-hero .zp-tsearch-grid * {
    color: #0f172a !important;
}

.zp-travel-hero .zp-tsearch label,
.zp-travel-hero .zp-tsearch-group label,
.zp-travel-hero .zp-tsearch i {
    color: #475569 !important;
}

.zp-travel-hero .zp-tsearch-submit,
.zp-travel-hero .zp-tsearch-submit * {
    color: #ffffff !important;
}

/* Travel tabs inside the hero */
.zp-travel-hero .zp-travel-tab {
    color: rgba(255, 255, 255, 0.75) !important;
}
.zp-travel-hero .zp-travel-tab.active {
    color: #0f172a !important;
    background: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   24) NAVBAR HEIGHT CAP — prevent the empty tall white box
   ───────────────────────────────────────────────────────────── */
.navbar-wrapper {
    height: auto !important;
    min-height: 60px !important;
    max-height: 76px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.dashboard-title-part {
    width: 100% !important;
    align-items: center !important;
}

.dashboard-title-part > .right {
    align-items: center !important;
    display: flex !important;
    height: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   25) HIDE NATIVE <select> AND DUPLICATE LANG DROPDOWN
   The JS replaces .dash-lang-select select with .zp-lang-dd,
   but until the JS runs (or if it fails), the raw select adds
   vertical height. Force-hide it.
   ───────────────────────────────────────────────────────────── */
.dash-lang-select > select,
.dash-lang-select select.langSel,
.dash-lang-select select.form--control,
.dash-lang-select .form--control {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
}

/* But the custom .zp-lang-btn stays visible */
.dash-lang-select .zp-lang-dd,
.dash-lang-select .zp-lang-btn {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
}

/* ─────────────────────────────────────────────────────────────
   26) PUSH-WRAPPER (notification panel) DEFAULT HIDDEN
   It's `position: absolute` so shouldn't take flow space, but
   add display:none as a safety net for SSR/first paint.
   ───────────────────────────────────────────────────────────── */
.push-wrapper {
    display: none !important;
}

/* When JS opens it, override via inline style (JS uses .style.setProperty(important))
   which beats this rule because they share specificity but inline > stylesheet for !important. */

/* ─────────────────────────────────────────────────────────────
   27) MERCHANT/AGENT panel heroes (in case they have same issue)
   ───────────────────────────────────────────────────────────── */
.zp-agent-hero,
.zp-agent-hero *:not(.btn):not([class*="card"]),
.zp-merchant-hero,
.zp-merchant-hero *:not(.btn):not([class*="card"]) {
    color: #ffffff !important;
}

/* Generic catch — any hero followed by white text descendants */
[class*="hero-title"],
[class*="hero-subtitle"],
[class*="hero-desc"] {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   28) TOP-NAV alignment & spacing polish
   ───────────────────────────────────────────────────────────── */
.dashboard-title-part .left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dashboard-title-part .right > * {
    flex-shrink: 0 !important;
}

/* Make sure header-user-wrapper does not stretch vertically */
.header-user-wrapper {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

.header-user-thumb {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
}

/* ============================================================
   ZP UI FIXES v1.3 — navbar layout fix + dropdown content fix
   Root cause: v1.1 set background on .navbar-wrapper directly,
   but .navbar-wrapper is width:100%, so the white background
   stretched across the page = big empty box.
   Fix: make .navbar-wrapper TRANSPARENT, put background on the
   inner .right container only (it becomes a compact pill).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   29) NAVBAR — fully transparent wrapper, pill on right only
   ───────────────────────────────────────────────────────────── */
.navbar-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 18px 6px 18px !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
}

.dashboard-title-part {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
}

.dashboard-title-part > .left {
    background: transparent !important;
    flex-shrink: 0 !important;
}

.dashboard-title-part > .right {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    margin-inline-start: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 50px !important;
    max-height: 60px !important;
}

/* ─────────────────────────────────────────────────────────────
   30) NICE-SELECT — empty .current placeholder visibility
   Sometimes the first <option> has no text or no .selected
   attribute → .current renders empty. Force a non-empty fallback.
   ───────────────────────────────────────────────────────────── */
div.nice-select .current {
    display: inline-block !important;
    min-width: 80px !important;
    min-height: 18px !important;
    line-height: 38px !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Empty .current → show first option text via JS data attribute */
div.nice-select .current:empty::before {
    content: attr(data-placeholder) !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Currency-specific dropdowns (wallet_currency / gateway_select) */
div.nice-select.wallet-currency,
div.nice-select.gateway-select {
    min-width: 110px !important;
}

div.nice-select.wallet-currency .current,
div.nice-select.gateway-select .current {
    min-width: 60px !important;
    text-align: start !important;
}

/* If .current is literally empty AND nice-select has no useful data,
   render an em-dash so the box doesn't look broken */
div.nice-select .current:empty {
    position: relative !important;
}

div.nice-select .current:empty::after {
    content: '—' !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

/* ─────────────────────────────────────────────────────────────
   31) FORCE NICE-SELECT JS INIT FALLBACK — append small script
   This is CSS-only; the JS init is done by the inline <script>
   at the end of this file (loaded via top-nav).
   But meanwhile, ensure native selects are visible enough so
   user can still see options.
   ───────────────────────────────────────────────────────────── */
/* When nice-select wrapper not yet rendered, show native select */
select.nice-select.form--control:not(.zp-hidden-by-nice) {
    display: inline-block !important;
    height: 44px !important;
    padding: 8px 28px 8px 12px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}

/* Once nice-select successfully wraps (div.nice-select sibling appears),
   the previously hidden native select can stay hidden. Detection:
   if a div.nice-select directly follows a select.nice-select, hide select. */
select.nice-select + div.nice-select {
    /* nothing — the next-sibling case is handled by JS adding `display:none` */
}

/* Stronger: if any parent has both, the select gets hidden */
.field-wrapper:has(div.nice-select) > select.nice-select,
.form-group:has(div.nice-select) > select.nice-select {
    display: none !important;
}