/*
 * Adsrek Pay — Redesign v1.7
 * P2P orders page polish.
 * UI only.
 */

/* Overall page rhythm */
.page-p2p-orders .pc-content,
body:has(.po) .pc-content{
  gap:12px!important;
}
.po{
  gap:12px!important;
}

/* Hero becomes compact and balanced */
.po-hero{
  padding:16px 18px!important;
  border-radius:16px!important;
  min-height:86px!important;
  background:var(--rd-surface)!important;
  box-shadow:var(--rd-shadow-xs)!important;
}
.po-hero h2{
  margin:0 0 3px!important;
  font-size:21px!important;
}
.po-hero .po-muted{
  font-size:12px!important;
  line-height:1.45!important;
}

/* Tabs with stronger contrast so labels stay readable */
.po-tabs{
  gap:4px!important;
  padding:4px!important;
  border:1px solid #d6e0ef!important;
  border-radius:12px!important;
  background:#eef4fb!important;
}
.po-tab{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#48617f!important;
  font-size:11px!important;
  font-weight:900!important;
}
.po-tab:hover{
  background:#e1ecfb!important;
  color:#163a63!important;
}
.po-tab.active{
  background:#ffffff!important;
  color:#0f5fd7!important;
  box-shadow:inset 0 0 0 1px rgba(15,95,215,.22), 0 1px 2px rgba(12,43,92,.08)!important;
}

/* Main orders card no longer looks like a giant empty box */
.po-card{
  padding:14px 16px!important;
  border-radius:16px!important;
  box-shadow:var(--rd-shadow-xs)!important;
}
.po-list{
  gap:9px!important;
}

/* Useful empty state */
.po-empty{
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
}
.po-empty__icon{
  width:42px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:13px!important;
  background:var(--rd-primary-soft)!important;
  color:var(--rd-primary)!important;
  font-size:20px!important;
  font-weight:900!important;
}
.po-empty__copy{
  min-width:0!important;
}
.po-empty__copy b{
  display:block!important;
  margin-bottom:3px!important;
  color:var(--rd-text-strong)!important;
  font-size:13px!important;
}
.po-empty__copy small{
  display:block!important;
  color:var(--rd-muted)!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
.po-empty__action{
  min-height:36px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  background:var(--rd-surface-2)!important;
  border:1px solid var(--rd-border)!important;
  color:var(--rd-text)!important;
  box-shadow:none!important;
}

/* Existing orders become denser */
.po-order{
  grid-template-columns:minmax(250px,1.45fr) minmax(150px,.72fr) minmax(130px,.55fr) auto!important;
  gap:12px!important;
  padding:12px 13px!important;
  border-radius:14px!important;
}
.po-pair{
  font-size:13px!important;
}
.po-meta{
  margin-top:3px!important;
  font-size:10.5px!important;
}
.po-amount b{
  font-size:13px!important;
}
.po-status{
  padding:6px 9px!important;
  font-size:10px!important;
}
.po-btn{
  min-height:36px!important;
  font-size:10.5px!important;
  border-radius:10px!important;
}

/* Events = lighter timeline instead of a heavy giant panel */
.po-events-card{
  padding:0!important;
  overflow:hidden!important;
}
.po-events-head{
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:11px 16px!important;
  border-bottom:1px solid var(--rd-border)!important;
}
.po-events-head span{
  display:block!important;
  margin-bottom:1px!important;
  color:var(--rd-primary)!important;
  font-size:8.5px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.po-events-head h3{
  margin:0!important;
  font-size:16px!important;
}
.po-events-head a{
  color:var(--rd-muted)!important;
  font-size:10px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.po-events-head a:hover{
  color:var(--rd-primary)!important;
}
.po-events{
  gap:0!important;
  padding:0 16px!important;
}
.po-event{
  grid-template-columns:8px minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:10px 0!important;
}
.po-event i{
  width:7px!important;
  height:7px!important;
  margin-top:5px!important;
  background:var(--rd-primary)!important;
}
.po-event.unread i{
  background:var(--rd-red)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rd-red) 14%,transparent)!important;
}
.po-event b{
  font-size:11.5px!important;
}
.po-event small{
  font-size:10px!important;
  line-height:1.4!important;
}
.po-event > small:last-child{
  white-space:nowrap!important;
  color:var(--rd-muted)!important;
}

/* Dark theme: keep everything calm */
html[data-theme="dark"] .po-hero,
html[data-theme="dark"] .po-card{
  background:#132236!important;
  border-color:#2a3e57!important;
  box-shadow:0 8px 20px rgba(0,0,0,.14)!important;
}
html[data-theme="dark"] .po-tabs{
  background:#101e30!important;
  border-color:#2b4059!important;
}
html[data-theme="dark"] .po-tab{
  color:#9db1c9!important;
}
html[data-theme="dark"] .po-tab:hover{
  background:#15273b!important;
  color:#edf4ff!important;
}
html[data-theme="dark"] .po-tab.active{
  background:#214064!important;
  color:#ffffff!important;
  box-shadow:inset 0 0 0 1px rgba(128,180,255,.28), 0 1px 3px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .po-empty__action{
  background:#17283b!important;
  border-color:#30465f!important;
  color:#dce7f3!important;
}

/* Responsive */
@media(max-width:820px){
  .po-hero{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .po-tabs{
    width:100%!important;
  }
  .po-tab{
    flex:1 1 auto!important;
    justify-content:center!important;
  }
  .po-empty{
    grid-template-columns:42px minmax(0,1fr)!important;
  }
  .po-empty__action{
    grid-column:2!important;
    justify-self:start!important;
  }
}
@media(max-width:620px){
  .po-empty{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .po-empty__icon{
    margin:0 auto!important;
  }
  .po-empty__action{
    grid-column:auto!important;
    justify-self:center!important;
  }
  .po-events-head{
    align-items:flex-start!important;
  }
}

/* P2P empty-state action: keep text and button visible in every theme */
.po-empty__action{background:#2563eb!important;border-color:#1d4ed8!important;color:#fff!important;opacity:1!important;visibility:visible!important;box-shadow:0 7px 16px rgba(37,99,235,.18)!important}.po-empty__action span{color:#fff!important;opacity:1!important;visibility:visible!important}.po-empty__action:hover{background:#1d4ed8!important;border-color:#1e40af!important;color:#fff!important}html[data-theme="dark"] .po-empty__action{background:#2563eb!important;border-color:#3b82f6!important;color:#fff!important}