/* ============================================================================
   payspot-theme.css — the single shared theme layer for the web portal.
   ----------------------------------------------------------------------------
   RULES (see DESIGN.md §3.3):
   1. Every reusable themed class lives HERE. Not in a page's @push('head').
   2. Everything is prefixed `ps-` so it can never collide with Bootstrap 5,
      style.css, or a plugin.
   3. Loaded AFTER style.css in new_dashboard_layout, so `--ps-brand` wins over
      style.css's legacy `--primary-color: #4743c9`.
   4. NO INLINE CSS in new markup. Need a themed value? Add the class HERE on
      the FIRST use and use it. Inline `style=""` is reserved for computed
      values (a progress width, a per-row status color) and true one-offs.
   5. Adding a class here is non-breaking: existing pages style these same
      elements with inline `style=""`, which has higher specificity and still
      wins. New pages drop the inline style and use the class.

   TWO HARD SAFETY RULES (both learned from real near-misses):
   A. NEVER style a bare, non-`ps-` class in this file. This file loads after
      bootstrap.min.css and style.css, so an unprefixed rule of equal
      specificity silently wins over Bootstrap on every existing page. See the
      `.range-btn` note below for the case that caught us.
   B. NEVER name a class `ps-{number}` or `ps-{breakpoint}-{number}`
      (ps-3, ps-lg-4 ...). Bootstrap 5 already owns those as padding-start
      utilities and they ARE used in this codebase. Word-named classes such as
      `ps-card` / `ps-btn-primary` cannot collide.

   Page-level `@push('head')` renders at layout line ~278, well after this
   file's <link> at line 25 — so any page can still override anything here.
   (pages/dmt_v7/index.blade.php defines its own private `--ps-*` palette that
   way; it wins locally and is unaffected by this file.)

   Values mirror payspot-app/theme/colors.json so web and app stay identical.
   ========================================================================= */

:root {
  /* --- Brand --------------------------------------------------------- */
  --ps-brand:            #1E2671;
  --ps-brand-contrast:   #FFFFFF;
  --ps-brand-container:  rgb(223, 224, 255);

  /* --- Status (matches the app palette) ------------------------------- */
  --ps-success:          #006E00;
  --ps-danger:           #BA1A1A;
  --ps-warning:          #F59E0B;
  --ps-info:             #1E2671;

  /* Soft tints of --ps-warning, for callout/instruction cards. */
  --ps-warning-soft:     rgba(245, 158, 11, .08);
  --ps-warning-line:     rgba(245, 158, 11, .35);

  /* Kanban / ticket statuses (fixed, see DESIGN.md §3.6) */
  --ps-status-initiated: #FFAD26;
  --ps-status-progress:  #007BFF;
  --ps-status-hold:      #E11F1F;
  --ps-status-resolved:  #70AE45;

  /* --- Surface & greys ------------------------------------------------ */
  --ps-surface:          #FFFFFF;
  --ps-muted:            #6C757D;
  --ps-border:           #DEE2E6;
  --ps-thead-bg:         linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);

  /* --- Radius (mirrors theme.borderRadius) ---------------------------- */
  --ps-radius-sm:        8px;
  --ps-radius:           12px;
  --ps-radius-lg:        16px;
  --ps-radius-pill:      20px;
}

/* ============================================================================
   Buttons
   ========================================================================= */

/* Navy fill — the primary action on a page. */
.ps-btn-primary {
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
  border: 1px solid var(--ps-brand);
  border-radius: var(--ps-radius-sm);
}
.ps-btn-primary:hover,
.ps-btn-primary:focus {
  background: #171d5a;
  border-color: #171d5a;
  color: var(--ps-brand-contrast);
}

/* White fill, navy outline — the secondary action next to a primary one. */
.ps-btn-ghost {
  background: var(--ps-surface);
  color: var(--ps-brand);
  border: 1px solid var(--ps-brand);
  border-radius: var(--ps-radius-sm);
}
.ps-btn-ghost:hover,
.ps-btn-ghost:focus {
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
}

/* ============================================================================
   Pill date-range filter

   NOTE: do NOT style bare `.range-btn` / `.active-range` here. Those are JS
   hooks used by pages/sales/_range_filter.blade.php, where the INACTIVE state
   relies on Bootstrap's `.btn-outline-secondary` and carries no inline style.
   A bare `.range-btn` rule has the same specificity (0,1,0) and loads later,
   so it would silently repaint every inactive pill navy on agent_details,
   merchant_performance and system_summary. Use `ps-pill` on new markup instead.
   ========================================================================= */

.ps-pill {
  border: 1px solid var(--ps-brand);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-surface);
  color: var(--ps-brand);
}
.ps-pill:hover {
  background: var(--ps-brand-container);
  color: var(--ps-brand);
}
.ps-pill.active {
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
}

/* ============================================================================
   Cards
   ========================================================================= */

/* Standard content card: white, borderless, soft shadow, 12px radius. */
.ps-card {
  background: var(--ps-surface);
  border: 0;
  border-radius: var(--ps-radius);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* KPI chip. Pair with `col-6 col-md-3` so it is 2-up on mobile, 4-up on desktop. */
.ps-kpi {
  background: var(--ps-surface);
  border: 0;
  border-radius: var(--ps-radius);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  padding: .5rem;
  text-align: center;
}
.ps-kpi-label {
  color: var(--ps-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.ps-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ps-brand);          /* override with .text-success / .text-warning / .text-danger */
}

/* ============================================================================
   Tables
   ========================================================================= */

.ps-table-wrap {
  background: var(--ps-surface);
  border-radius: var(--ps-radius);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  overflow: hidden;
}
.ps-thead th {
  background: var(--ps-thead-bg);
  color: #212529;
  font-weight: 600;
  white-space: nowrap;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* ============================================================================
   Modals
   ========================================================================= */

.ps-modal .modal-content {
  border: 0;
  border-radius: var(--ps-radius-lg);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}
.ps-modal .modal-header {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Long modal bodies stay scrollable so footer buttons remain reachable. */
.ps-modal-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

/* ============================================================================
   Text / accents
   ========================================================================= */

.ps-text-brand { color: var(--ps-brand) !important; }
.ps-bg-brand   { background-color: var(--ps-brand) !important; color: var(--ps-brand-contrast); }
.ps-border-brand { border-color: var(--ps-brand) !important; }

/* ============================================================================
   ADD NEW CLASSES BELOW THIS LINE
   Only when a pattern appears a second time. Prefix `ps-`, use the variables
   above, and add a one-line comment saying what it is for.
   ========================================================================= */

/* Numbered step marker for an ordered "do this in order" flow. */
.ps-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--ps-border);
}
.ps-step:last-child { border-bottom: 0; }
.ps-step-num {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-step.is-done .ps-step-num { background: var(--ps-success); }
.ps-step-body { flex: 1 1 auto; min-width: 0; }

/* Elevated KPI/stat card: soft border, hover lift. Pairs with .ps-kpi-icon-lg.
   Reference: pages/indisign/agreements/users.blade.php's .kpi-card. */
.ps-kpi-card {
  border-radius: var(--ps-radius);
  border: 1px solid rgba(0, 0, 0, .06);
  background: var(--ps-surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ps-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06) !important;
}
.ps-kpi-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Elevated header action button: bolder label, roomier padding+radius.
   Pair with Bootstrap's btn/btn-sm + shadow-sm + d-flex align-items-center gap-2.
   Reference: pages/indisign/agreements/users.blade.php's header buttons. */
.ps-btn-elevated {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
}

/* Elevated table header: uppercase brand-navy label, generous padding.
   Additive alongside .ps-thead — use where a data-dense admin table wants
   the heavier treatment; .ps-thead's lighter one is unaffected. */
.ps-thead-elevated th {
  background-color: #f4f6fb !important;
  color: var(--ps-brand) !important;
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 16px;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* Soft-amber callout card — "read this before you act" notes on a transfer flow. */
.ps-note-card {
  background: var(--ps-warning-soft);
  border: 1px solid var(--ps-warning-line);
  border-radius: var(--ps-radius);
}

/* Left rail that stays in view while a long workspace scrolls beside it (lg+). */
@media (min-width: 992px) {
  .ps-sticky-rail { position: sticky; top: 90px; }
}

/* "At Shop / Near Shop / Xkm away" header status chip — ghost-outline style,
   same construction as .ps-pill (white fill, brand-navy border + text).
   Fixed height so it always matches the QR/balance icons beside it,
   regardless of font-rendering quirks. */
.ps-shop-badge {
  display: none;
  align-items: center;
  gap: 5px;
  height: 36px;
  box-sizing: border-box;
  background: var(--ps-surface);
  color: var(--ps-brand);
  border: 1px solid var(--ps-brand);
  border-radius: var(--ps-radius-pill);
  padding: 0 .75rem;
  font-size: .74rem;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}
.ps-shop-badge.show { display: inline-flex; }
.ps-shop-badge i { font-size: .68rem; line-height: 1; color: var(--ps-danger); }
/* style.css has a global `span, li, label { font-size:18px; line-height:30px }`
   rule that otherwise wins on the element itself (beats inherited values) —
   this is specific enough to override it back to the badge's own sizing. */
.ps-shop-badge span {
  font-size: inherit;
  line-height: 1;
  color: inherit;
  font-weight: inherit;
}

/* Loading state: 3 pulsing dots shown immediately on load, before the first
   calculation resolves — swapped for the real label in JS once it does. */
.ps-shop-badge .ps-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  margin: 0 1px;
  animation: ps-dot-blink 1.2s infinite ease-in-out both;
}
.ps-shop-badge .ps-dot:nth-child(2) { animation-delay: .2s; }
.ps-shop-badge .ps-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ps-dot-blink {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}

/* Header "Borrowed: ₹X" chip, next to the wallet balance — links to the
   borrow page. Same treatment as the existing .qrcode navbar chip (navy
   fill, white text, small pill). */
.ps-borrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
  padding: 6px 12px;
  border-radius: var(--ps-radius-sm);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ps-borrow-chip:hover {
  color: var(--ps-brand-contrast);
  opacity: .9;
}

/* DataTables "Processing" indicator, injected via language.processing in
   custom.js (site-wide default). The library still wraps this in its own
   `div.dataTables_processing` (bare, unavoidable — that element is plugin-
   generated, not blade markup); nothing else in the codebase styles that
   class. Its own default CSS positions it via `position:absolute` relative
   to the table's own height, which looks wrong on a short/empty table (the
   "center" of a 1-row table isn't the viewport center). Overridden to
   `position:fixed` here instead, so it's dead-centered on screen like a
   SweetAlert modal regardless of table size or scroll position — the
   `!important`s are needed to beat the library's own same-or-higher-
   specificity rules, which load after this file. */
div.dataTables_processing {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  box-shadow: none;
  z-index: 2000;
}
.ps-table-processing {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ps-surface);
  color: var(--ps-brand);
  border-radius: var(--ps-radius-lg);
  padding: 24px 36px;
  font-size: 17px;
  font-weight: 600;
  max-width: 90vw;
  /* Second shadow value fakes a full-viewport dimmed backdrop (a huge solid
     spread) without adding a separate overlay element. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 0 0 9999px rgba(15, 15, 30, .35);
}
.ps-table-processing .ps-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid var(--ps-border);
  border-top-color: var(--ps-brand);
  border-radius: 50%;
  animation: ps-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes ps-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   Merchant & Direct Merchant Redesigned Dashboard
   ========================================================================= */

.ps-wallet-tile {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ps-wallet-tile:hover {
  box-shadow: 0 4px 14px rgba(30, 38, 113, .08);
}

.ps-announcement-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8f8;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .02);
}
.ps-announcement-badge {
  display: inline-flex;
  align-items: center;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-announcement-marquee {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 500;
  color: #991b1b;
  line-height: 1.4 !important;
}

.ps-service-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 10px;
}
@media (min-width: 992px) {
  .ps-service-hub-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1200px) {
  .ps-service-hub-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 576px) {
  .ps-service-hub-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

.ps-service-tile {
  background: var(--ps-surface);
  border: 1px solid #e2e8f0;
  border-radius: var(--ps-radius);
  padding: 12px 6px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #1e293b;
  position: relative;
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  min-height: 86px;
  height: 100%;
}
.ps-service-tile:hover {
  transform: translateY(-2px);
  border-color: var(--ps-brand);
  box-shadow: 0 6px 14px rgba(30, 38, 113, .10);
  color: var(--ps-brand);
  text-decoration: none;
}
.ps-service-tile img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-bottom: 6px;
  transition: transform .2s ease;
}
.ps-service-tile:hover img {
  transform: scale(1.06);
}
.ps-service-tile .ps-service-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #1e293b;
  text-align: center;
}

.ps-service-tab-btn {
  border-radius: var(--ps-radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.ps-service-tab-btn.active, .ps-service-tab-btn:hover {
  background: var(--ps-brand);
  color: var(--ps-brand-contrast);
}

.ps-kpi-tile {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .02);
  border-left: 4px solid var(--ps-brand);
  height: 100%;
}
.ps-kpi-tile.ps-kpi-success { border-left-color: var(--ps-success); }
.ps-kpi-tile.ps-kpi-warning { border-left-color: var(--ps-warning); }
.ps-kpi-tile.ps-kpi-danger  { border-left-color: var(--ps-danger); }
.ps-kpi-tile.ps-kpi-info    { border-left-color: #0284c7; }
.ps-kpi-tile.ps-kpi-primary { border-left-color: var(--ps-brand); }

.ps-badge-pulsing {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 8px;
  font-weight: 700;
  background: #ef4444;
  color: #ffffff;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  animation: ps-pulse 1.5s infinite;
}
@keyframes ps-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .75; transform: scale(.92); }
}

.ps-merchant-overlay {
  padding-top: 84px !important;
  margin-top: 0 !important;
}
@media (max-width: 991px) {
  .ps-merchant-overlay {
    padding-top: 74px !important;
  }
}



/* Thin progress bar — Direct Fund Transfer monthly-limit usage bars (ops review page + merchant tab) */
.ps-progress-thin {
  height: 6px;
}

/* ==========================================================================
   PS Contact & Office Support Modal Styles
   ========================================================================== */
.header-section .navbar-area .dashboard-nav .single-item.help-area,
.header-section .navbar-area .dashboard-nav .single-item.notifications-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  line-height: 1 !important;
}

.header-section .navbar-area .dashboard-nav .single-item.help-area .help-btn,
.header-section .navbar-area .dashboard-nav .single-item.notifications-area .notifications-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  height: 25px !important;
  width: 25px !important;
  position: relative !important;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.header-section .navbar-area .dashboard-nav .single-item.help-area .help-btn:hover,
.header-section .navbar-area .dashboard-nav .single-item.notifications-area .notifications-btn:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

.header-section .navbar-area .dashboard-nav .single-item.help-area .headset-icon,
.header-section .navbar-area .dashboard-nav .single-item.notifications-area .bell-icon {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-section .navbar-area .dashboard-nav .single-item.notifications-area .notifications-btn::before {
  display: none !important;
}

.ps-contact-modal .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  font-family: var(--body-font, "Jost", sans-serif);
}

.ps-contact-modal .modal-header {
  background: #ffffff;
  border-bottom: 1px solid #eef2f6;
  padding: 16px 22px;
}

.ps-contact-modal .modal-title {
  color: #1e2671;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-contact-card {
  background: #f8faff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.ps-contact-card:hover {
  border-color: #cbd5e1;
}

.ps-contact-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1e2671;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-contact-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(30, 38, 113, 0.1);
  color: #1e2671;
}

.ps-contact-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.ps-contact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ps-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ps-contact-btn-primary {
  background: #1e2671;
  color: #ffffff !important;
}
.ps-contact-btn-primary:hover {
  background: #151a52;
}

.ps-contact-btn-whatsapp {
  background: #25d366;
  color: #ffffff !important;
}
.ps-contact-btn-whatsapp:hover {
  background: #1ea952;
}

.ps-contact-btn-outline {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155 !important;
}
.ps-contact-btn-outline:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.ps-contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #334155;
}
.ps-contact-detail-row i {
  color: #1e2671;
  font-size: 14px;
  margin-top: 3px;
  width: 16px;
  text-align: center;
}

.ps-auth-help-link {
  font-size: 13px;
  font-weight: 600;
  color: #1e2671;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  transition: opacity 0.2s;
}
.ps-auth-help-link:hover {
  opacity: 0.8;
  text-decoration: underline;
  color: #1e2671;
}

.ps-auth-float-help {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e2671;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.ps-auth-float-help:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 38, 113, 0.15);
  color: #1e2671;
}