/*
 * ClickBee — Wallet Transactions
 * 107
 * One card for the full transaction history.
 * Every transaction is a single horizontal row.
 */

.cb-wallet-transactions{
  width:100%!important;
  min-width:0!important;
  margin-top:12px!important;
}

.cb-wallet-transactions-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;

  margin:0 0 8px;
  padding:0 2px;
}

.cb-wallet-transactions-head > div{
  min-width:0;
}

.cb-wallet-transactions-head strong{
  display:block;
  color:#f1f3fb;
  font-size:11px;
  font-weight:780;
  line-height:1.1;
}

.cb-wallet-transactions-head small{
  display:block;
  margin-top:4px;
  color:#68728e;
  font-size:7.4px;
  font-weight:620;
  line-height:1;
}

.cb-wallet-transactions-head > span{
  display:inline-flex;
  align-items:center;

  min-height:24px;
  padding:5px 8px;

  border:1px solid rgba(191,193,247,.07);
  border-radius:999px;

  color:#6f7995;
  background:rgba(255,255,255,.012);

  font-size:7.3px;
  font-weight:700;
  line-height:1;
}

/* Match the existing compact Recent activity pill rather than adding a new UI. */
.cb-wallet-history-tabs{display:inline-flex!important;align-items:center;gap:4px;flex:0 0 auto;}
.cb-wallet-history-tab{display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:5px 8px;border:1px solid rgba(191,193,247,.07);
  border-radius:999px;color:#6f7995;background:rgba(255,255,255,.012);
  font-size:7.3px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;}
.cb-wallet-history-tab.is-active{color:#f1f3fb;border-color:rgba(191,193,247,.23);
  background:rgba(191,193,247,.10);}
.cb-wallet-history-tab:focus-visible{outline:2px solid #8695ff;outline-offset:2px;}
@media(max-width:390px){.cb-wallet-transactions-head{gap:5px;}
  .cb-wallet-history-tabs{gap:3px}.cb-wallet-history-tab{padding:5px 6px;font-size:7px;}}

/* One surface for all history rows. */
#transactions{
  display:block!important;

  width:100%!important;
  min-width:0!important;
  margin:0!important;

  overflow:hidden!important;

  border:1px solid rgba(191,193,247,.085)!important;
  border-radius:14px!important;

  background:
    linear-gradient(
      145deg,
      rgba(27,34,75,.70),
      rgba(19,25,63,.78)
    )!important;

  box-shadow:
    0 8px 22px rgba(3,6,28,.08),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* No individual cards. */
#transactions .accordion-item{
  width:100%!important;
  min-width:0!important;

  margin:0!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;
  box-shadow:none!important;

  overflow:hidden!important;
}

#transactions .accordion-item + .accordion-item{
  border-top:1px solid rgba(191,193,247,.055)!important;
}

#transactions .accordion-header{
  margin:0!important;
}

/* One-line transaction row. */
#transactions .btn-expandable{
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;

  display:grid!important;
  grid-template-columns:
    28px
    minmax(78px,.78fr)
    minmax(90px,.95fr)
    minmax(88px,.9fr)
    minmax(70px,.72fr)
    16px!important;

  grid-template-areas:"txicon txtype txamount txdate txstatus txchev"!important;

  align-items:center!important;
  gap:8px!important;

  width:100%!important;
  min-width:0!important;
  min-height:48px!important;

  margin:0!important;
  padding:7px 10px!important;

  border:0!important;
  border-radius:0!important;

  color:#dfe3f1!important;
  background:transparent!important;
  box-shadow:none!important;

  text-align:left!important;
  cursor:pointer!important;

  transition:background .14s ease!important;
}

/* Flatten old wrappers into the single grid row. */
#transactions .btn-expandable > span:first-child,
#transactions .btn-expandable > span:nth-child(2){
  display:contents!important;
}

/* Direction icon */
#transactions .btn-expandable > span:first-child > i{
  grid-area:txicon!important;

  display:grid!important;
  place-items:center!important;

  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;

  margin:0!important;
  padding:7px!important;

  border:0!important;
  border-radius:50%!important;

  background:rgba(255,255,255,.025)!important;
  box-shadow:none!important;
}

#transactions .btn-expandable > span:first-child > .icon-deposit{
  background:rgba(62,190,102,.045)!important;
}
#transactions .btn-expandable > span:first-child > .icon-deposit:before{
  background-color:#8fdfa7!important;
}

#transactions .btn-expandable > span:first-child > .icon-withdraw{
  background:rgba(126,91,225,.045)!important;
}
#transactions .btn-expandable > span:first-child > .icon-withdraw:before{
  background-color:#ad98ec!important;
}

/* Type */
#transactions .btn-expandable > span:nth-child(2) > span{
  grid-area:txtype!important;

  display:block!important;
  min-width:0!important;
  margin:0!important;

  color:#d8ddec!important;
  font-size:8.8px!important;
  font-weight:720!important;
  line-height:1!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Amount */
#transactions .btn-expandable > span:first-child > span{
  grid-area:txamount!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;

  min-width:0!important;
  margin:0!important;
}

#transactions .btn-expandable > span:first-child > span img{
  width:12px!important;
  height:12px!important;
  min-width:12px!important;

  margin:0!important;
  border-radius:50%!important;
}

#transactions .btn-expandable > span:first-child > span strong{
  display:block!important;

  color:#e6e9f5!important;
  font-size:8.8px!important;
  font-weight:760!important;
  line-height:1!important;

  white-space:nowrap!important;
}

#transactions .btn-expandable > span:first-child > .icon-deposit + span strong{
  color:#a3e4b5!important;
}
#transactions .btn-expandable > span:first-child > .icon-deposit + span strong:before{
  content:"+";
  margin-right:1px;
}

#transactions .btn-expandable > span:first-child > .icon-withdraw + span strong:before{
  content:"−";
  margin-right:1px;
  color:#8993af;
}

/* Date */
#transactions .btn-expandable > span:nth-child(2) > p{
  grid-area:txdate!important;

  display:block!important;
  min-width:0!important;
  margin:0!important;

  color:#65708c!important;
  font-size:7.5px!important;
  font-weight:600!important;
  line-height:1!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Status is compact — still on same row. */
#transactions .btn-expandable > span:nth-child(2) > i{
  grid-area:txstatus!important;
  justify-self:start!important;

  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;

  width:auto!important;
  min-width:0!important;
  height:auto!important;
  flex:0 0 auto!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;

  font-size:0!important;
  line-height:1!important;
}

#transactions .btn-expandable > span:nth-child(2) > i:before{
  display:block!important;

  width:5px!important;
  height:5px!important;
  flex:0 0 5px!important;

  border-radius:50%!important;

  -webkit-mask:none!important;
  mask:none!important;

  background:#65ef91!important;
  box-shadow:0 0 5px rgba(101,239,145,.20)!important;
}

#transactions .btn-expandable > span:nth-child(2) > .icon-checkmark-circle:after{
  content:"Done";

  color:#7ecf95;
  font-size:6.8px;
  font-weight:700;
  line-height:1;
}

#transactions .btn-expandable > span:nth-child(2) > .icon-pending:before{
  background:#efb746!important;
  box-shadow:0 0 5px rgba(239,183,70,.18)!important;
}

#transactions .btn-expandable > span:nth-child(2) > .icon-pending:after{
  content:"Pending";

  color:#c8a55f;
  font-size:6.8px;
  font-weight:700;
  line-height:1;
}

/* Small disclosure chevron */
#transactions .btn-expandable > span.icon.no-ml{
  grid-area:txchev!important;

  display:grid!important;
  place-items:center!important;

  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  flex:0 0 16px!important;

  margin:0!important;
  padding:0!important;
}

#transactions .btn-expandable > span.icon.no-ml > i{
  display:grid!important;
  place-items:center!important;

  width:14px!important;
  height:14px!important;
  min-width:14px!important;

  margin:0!important;
  padding:3px!important;

  border-radius:5px!important;

  background:rgba(255,255,255,.018)!important;

  transition:transform .16s cubic-bezier(.22,1,.36,1)!important;
}

#transactions .btn-expandable > span.icon.no-ml > i:before{
  background-color:#6d7793!important;
}

#transactions .btn-expandable[aria-expanded="true"] > span.icon.no-ml > i{
  transform:rotate(180deg)!important;
}

/* Expanded TXID sits inside the same single history card. */
#transactions .expandable{
  overflow:hidden!important;

  background:rgba(7,10,34,.10)!important;

  transition:height .18s cubic-bezier(.22,1,.36,1)!important;
}

#transactions .expandable-body{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;

  min-width:0!important;

  margin:0!important;
  padding:7px 10px 8px 46px!important;

  border-top:1px solid rgba(191,193,247,.038)!important;
}

#transactions .expandable-body > p{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;

  margin:0!important;

  color:#5f6985!important;
  font-size:7.2px!important;
  line-height:1.35!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#transactions .tx-link{
  color:#818ba6!important;
  text-decoration:none!important;
}

#transactions .expandable-body > .icon-copy{
  display:grid!important;
  place-items:center!important;

  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;

  margin:0!important;
  padding:6px!important;

  border:0!important;
  border-radius:7px!important;

  background:rgba(126,136,230,.03)!important;

  cursor:pointer!important;
}

#transactions .expandable-body > .icon-copy:before{
  background-color:#7f8bc7!important;
}

@media(hover:hover) and (pointer:fine){
  #transactions .btn-expandable:hover{
    background:rgba(255,255,255,.014)!important;
  }
}

@media(max-width:620px){
  #transactions .btn-expandable{
    grid-template-columns:
      27px
      minmax(66px,.72fr)
      minmax(80px,.95fr)
      minmax(64px,.72fr)
      14px!important;

    grid-template-areas:"txicon txtype txamount txstatus txchev"!important;

    gap:7px!important;
    min-height:46px!important;
    padding:7px 8px!important;
  }

  /* Date is hidden on narrow phones to preserve one-line layout. */
  #transactions .btn-expandable > span:nth-child(2) > p{
    display:none!important;
  }

  #transactions .btn-expandable > span:first-child > i{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    flex-basis:27px!important;
  }

  #transactions .expandable-body{
    padding-left:42px!important;
  }
}

@media(max-width:390px){
  #transactions .btn-expandable{
    grid-template-columns:
      25px
      minmax(60px,.66fr)
      minmax(76px,1fr)
      12px!important;

    grid-template-areas:"txicon txtype txamount txchev"!important;

    gap:6px!important;
  }

  #transactions .btn-expandable > span:nth-child(2) > i{
    display:none!important;
  }

  #transactions .btn-expandable > span:first-child > i{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    flex-basis:25px!important;
    padding:6px!important;
  }

  #transactions .btn-expandable > span:first-child > span strong{
    font-size:8.2px!important;
  }

  #transactions .btn-expandable > span:nth-child(2) > span{
    font-size:8.4px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #transactions .btn-expandable,
  #transactions .expandable,
  #transactions .btn-expandable > span.icon.no-ml > i{
    transition:none!important;
  }
}


/* 108 — larger transaction typography + explicit crypto details. */

.cb-wallet-transactions-head strong{
  font-size:13px!important;
}

.cb-wallet-transactions-head small{
  font-size:9px!important;
}

.cb-wallet-transactions-head > span{
  font-size:8.5px!important;
}

#transactions .btn-expandable{
  min-height:52px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}

#transactions .btn-expandable > span:nth-child(2) > span{
  font-size:10.5px!important;
  font-weight:760!important;
}

#transactions .btn-expandable > span:first-child > span strong{
  font-size:10.5px!important;
  font-weight:780!important;
}

#transactions .btn-expandable > span:nth-child(2) > p{
  font-size:9px!important;
}

#transactions .btn-expandable > span:nth-child(2) > .icon-checkmark-circle:after,
#transactions .btn-expandable > span:nth-child(2) > .icon-pending:after{
  font-size:8px!important;
}

#transactions .expandable-body{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 26px!important;
  gap:7px 9px!important;
  align-items:center!important;

  padding:9px 10px 10px 46px!important;
}

#transactions .cb-tx-detail-line{
  grid-column:1!important;

  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;

  min-width:0!important;
}

#transactions .cb-tx-detail-line + .cb-tx-detail-line{
  margin-top:2px!important;
}

#transactions .cb-tx-detail-label{
  color:#707b98!important;

  font-size:8px!important;
  font-weight:760!important;
  line-height:1!important;

  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}

#transactions .cb-txid-link,
#transactions .cb-tx-address{
  display:block!important;

  min-width:0!important;
  overflow:hidden!important;

  color:#aeb7d2!important;

  font-size:9.3px!important;
  font-weight:650!important;
  line-height:1.25!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

#transactions .cb-txid-link{
  color:#9caaf0!important;
  text-decoration:none!important;
}

#transactions .cb-txid-link:hover{
  color:#bcc6ff!important;
  text-decoration:underline!important;
}

#transactions .cb-txid-link:after{
  content:" ↗"!important;
  color:#7f8bc7!important;
  font-size:8px!important;
}

#transactions .cb-tx-address{
  color:#9ea7c1!important;
  user-select:all!important;
}

#transactions .expandable-body > .icon-copy{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  align-self:center!important;

  width:26px!important;
  height:26px!important;
  flex-basis:26px!important;
}

@media(max-width:620px){
  #transactions .btn-expandable > span:nth-child(2) > span{
    font-size:10px!important;
  }

  #transactions .btn-expandable > span:first-child > span strong{
    font-size:10px!important;
  }

  #transactions .expandable-body{
    padding-left:42px!important;
  }

  #transactions .cb-txid-link,
  #transactions .cb-tx-address{
    font-size:8.8px!important;
  }
}

@media(max-width:390px){
  #transactions .btn-expandable > span:nth-child(2) > span{
    font-size:9.6px!important;
  }

  #transactions .btn-expandable > span:first-child > span strong{
    font-size:9.5px!important;
  }

  #transactions .cb-tx-detail-line{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:6px!important;
  }

  #transactions .cb-tx-detail-label{
    font-size:7.5px!important;
  }

  #transactions .cb-txid-link,
  #transactions .cb-tx-address{
    font-size:8.4px!important;
  }
}


/* 229 — wallet empty-state breathing room inside the history card. */
#transactions > [data-cb-wallet-empty]{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:16px 18px!important;
  color:#8f98b4!important;
  line-height:1.35!important;
}


/* 245 — safe cancellation for withdrawals that have not entered dispatch. */
#transactions .cb-withdrawal-actions{
  grid-column:1 / -1!important;display:flex!important;justify-content:flex-end!important;width:100%!important;margin-top:6px!important;
}
#transactions .cb-withdrawal-cancel{
  appearance:none!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:9px!important;background:rgba(255,255,255,.055)!important;color:#d8def3!important;padding:7px 11px!important;font:inherit!important;font-size:10px!important;font-weight:750!important;cursor:pointer!important;
}
#transactions .cb-withdrawal-cancel:hover{background:rgba(255,255,255,.09)!important;}
#transactions .cb-withdrawal-cancel:disabled{opacity:.5!important;cursor:default!important;}

/* R2601 — one clean, consistent empty/loading/retry surface for every wallet
   history tab (tasks, deposits, withdrawals, referral/commission history). */
#transactions > .cb-wallet-history-state{
  display:flex!important;box-sizing:border-box!important;align-items:center!important;
  justify-content:center!important;flex-wrap:wrap!important;gap:10px!important;
  min-height:96px!important;width:100%!important;margin:0!important;
  padding:22px 16px!important;text-align:center!important;
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;border-radius:inherit!important;
  color:#a8b6d4!important;font:500 12px/1.6 system-ui,sans-serif!important;
}
#transactions > .cb-wallet-history-state > span{
  display:block!important;max-width:100%;overflow-wrap:anywhere!important;
  background:transparent!important;color:inherit!important;
}
#transactions > .cb-wallet-history-state .cb-wallet-history-retry{
  appearance:none!important;cursor:pointer!important;border:1px solid rgba(168,188,232,.3)!important;
  padding:7px 13px!important;border-radius:10px!important;
  color:#ecf3ff!important;background:rgba(130,158,226,.12)!important;
  font:700 11px system-ui,sans-serif!important;
}
#transactions > .cb-wallet-history-state .cb-wallet-history-retry:focus-visible{
  outline:2px solid #94c7ff!important;outline-offset:2px!important;
}