/*
 * Adsrek Pay — Unified UI Redesign v1.4
 * Final P2P polish based on light/dark real-browser screenshots.
 * UI only. No P2P or financial logic changes.
 */

/* =========================================================
   1. P2P informational strip — neutral, not a blue banner
   ========================================================= */
.page-p2p .p2-alert:not(.err){
  position:relative!important;
  overflow:hidden!important;
  padding:10px 14px 10px 16px!important;
  border:1px solid #dce5ef!important;
  border-left:3px solid #8ba7cf!important;
  border-radius:10px!important;
  background:#f7f9fc!important;
  color:#30445d!important;
  box-shadow:none!important;
}
.page-p2p .p2-alert:not(.err) b{
  color:#243850!important;
}
html[data-theme="dark"] .page-p2p .p2-alert:not(.err){
  border-color:#2a3d55!important;
  border-left-color:#718dbc!important;
  background:#142238!important;
  color:#b6c6d8!important;
}
html[data-theme="dark"] .page-p2p .p2-alert:not(.err) b{
  color:#e5edf6!important;
}

/* =========================================================
   2. Amount field — clearly editable, but still secondary
   ========================================================= */
.page-p2p .p2-search-amount{
  background:#fff!important;
  border-color:#cfdbe8!important;
  color:#1d334e!important;
  box-shadow:inset 0 1px 2px rgba(28,52,81,.035)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.page-p2p .p2-search-amount::placeholder{
  color:#8297ae!important;
  opacity:1!important;
  font-weight:800!important;
}
.page-p2p .p2-search-amount:hover{
  border-color:#b6c7da!important;
}
.page-p2p .p2-search-amount:focus{
  border-color:#7d9dcc!important;
  box-shadow:0 0 0 3px rgba(94,128,184,.10)!important;
}
.page-p2p .p2-side__amount-hint{
  color:#758aa1!important;
  opacity:1!important;
}
html[data-theme="dark"] .page-p2p .p2-search-amount{
  background:#18283b!important;
  border-color:#344a63!important;
  color:#edf3fa!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] .page-p2p .p2-search-amount::placeholder{
  color:#9eb0c4!important;
}
html[data-theme="dark"] .page-p2p .p2-search-amount:hover{
  border-color:#435d79!important;
}
html[data-theme="dark"] .page-p2p .p2-search-amount:focus{
  border-color:#708dba!important;
  box-shadow:0 0 0 3px rgba(103,132,184,.12)!important;
}
html[data-theme="dark"] .page-p2p .p2-side__amount-hint{
  color:#91a5ba!important;
}

/* =========================================================
   3. Search CTA — a little stronger in dark mode, no neon
   ========================================================= */
html[data-theme="dark"] .page-p2p .p2-btn--search{
  background:#5f7fb9!important;
  border-color:#708dc2!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] .page-p2p .p2-btn--search:hover{
  background:#6c8bc2!important;
  border-color:#7a98cc!important;
  box-shadow:0 7px 18px rgba(0,0,0,.19)!important;
}

/* =========================================================
   4. Empty results state — ~30% more compact
   ========================================================= */
.page-p2p .p2-empty-state{
  min-height:96px!important;
  padding:15px 18px!important;
  border-radius:15px!important;
}
.page-p2p .p2-empty-state__icon{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  font-size:21px!important;
}
.page-p2p .p2-empty-state h3{
  margin:10px 0 0!important;
  font-size:17px!important;
}
.page-p2p .p2-empty-state p{
  max-width:680px!important;
  margin:5px 0 0!important;
  font-size:10.5px!important;
  line-height:1.5!important;
}
.page-p2p .p2-empty-state__actions{
  margin-top:11px!important;
  gap:8px!important;
}
.page-p2p .p2-empty-state__actions .p2-btn{
  min-height:36px!important;
  padding:0 12px!important;
}

/* Results title should sit closer to the compact state/list. */
.page-p2p .p2-results-head{
  margin-top:0!important;
  margin-bottom:8px!important;
}

/* =========================================================
   5. Small visual balance for the whole exchange form
   ========================================================= */
.page-p2p .p2-filter-form{
  padding-bottom:15px!important;
}
.page-p2p .p2-filter-footer{
  margin-top:10px!important;
  padding-top:10px!important;
}
.page-p2p .p2-receive-estimate{
  border-color:#d7e1ec!important;
  background:#f8fafc!important;
}
html[data-theme="dark"] .page-p2p .p2-receive-estimate{
  border-color:#30465f!important;
  background:#18283c!important;
}

@media(max-width:680px){
  .page-p2p .p2-empty-state{
    min-height:auto!important;
    padding:16px!important;
  }
  .page-p2p .p2-empty-state__icon{
    width:44px!important;
    height:44px!important;
  }
}