/* Coin ownership styling */
.coinHeaderMeta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.headerOwnedWrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.headerOwnedBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:#e8f7ee;
  border:1px solid #bbf7d0;
  color:#166534;
  font-weight:600;
  font-size:14px;
}

.headerOwnedQty{
  font-size:14px;
  opacity:.72;
}

.collectionRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width:700px){
  .coinHeaderMeta{
    align-items:flex-start;
  }

  .headerOwnedWrap{
    width:100%;
  }

  .collectionRow{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

/* ------------------------------ */
/* Add to collection modal polish */
/* ------------------------------ */

@media (max-width:700px){
  #addModal{
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(0,0,0,.45);
    overflow:hidden;
  }

  #addModal.open{
    display:flex;
  }

  #addModal .modal-card{
    width:100%;
    max-width:none;
    height:auto;
    max-height:calc(100dvh - 10px);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    margin:0;
  }

  /* top section */
  #addModal .modal-sheet-head{
    margin-bottom:8px;
  }

  #addModal .modal-sheet-head h2{
    margin:0;
    font-size:18px;
    line-height:1.2;
  }

  #addCoinTitle{
    margin-top:4px;
    line-height:1.3;
  }

  #addModal .modal-sheet-head .row.gap-8.mt-6{
    display:flex;
    align-items:flex-start;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
  }

  #addGradePill{
    flex:0 0 auto;
  }

  #addGradeNote{
    flex:1 1 160px;
    line-height:1.3;
    font-size:14px;
  }

  /* body spacing */
  #addModal .grid-gap-10{
    display:grid;
    gap:10px;
  }

  #addModal .mt-12{
    margin-top:10px !important;
  }

  #addModal .mt-8{
    margin-top:8px !important;
  }

  #addModal .mt-6{
    margin-top:6px !important;
  }

  #addModal label.muted.small{
    display:block;
    margin-bottom:4px;
    line-height:1.25;
    font-size:13px;
  }

  #addModal .input{
    min-height:44px;
  }

  /* qty + currency row */
  #addModal .grid-gap-10 > .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:end;
  }

  #addModal .grid-gap-10 > .row:first-child{
    grid-template-columns:minmax(0,1fr) 118px;
  }

  #addModal .flex-1,
  #addModal .w-160{
    width:auto;
    min-width:0;
  }

  /* gift button row */
  #giftToggleBtn{
    width:100%;
    min-height:44px;
  }

  #giftToggleBtn[aria-pressed="true"]{
    background:#f8fafc;
    border-color:#cbd5e1;
  }

  #giftHint,
  #perCoinHint,
  #fxPreview{
    line-height:1.3;
  }

  #perCoinHint{
    font-size:13px;
  }

  /* summary card */
  #addModal .card.card-subtle{
    padding:12px;
    border-radius:14px;
    margin-bottom:8px;
  }

  #addModal .card.card-subtle .row:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  #allInTotal{
    font-size:16px;
  }

  /* bottom actions */
  #addModal .grid-gap-10.mt-6{
    margin-top:4px !important;
    gap:8px;
  }

  #saveMsg{
    min-height:0;
    line-height:1.3;
    font-size:13px;
    margin:0;
  }

  #saveHoldingBtn,
  #closeModalBtn{
    width:100%;
    min-height:42px;
  }
}

@media (max-width:420px){
  #addModal .modal-card{
    max-height:calc(100dvh - 6px);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;
  }

  #addModal .modal-sheet-head h2{
    font-size:17px;
  }

  #addModal .grid-gap-10{
    gap:8px;
  }

  #addModal .grid-gap-10 > .row,
  #addModal .grid-gap-10 > .row:first-child{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  #addModal .input{
    min-height:42px;
  }

  #giftToggleBtn,
  #saveHoldingBtn,
  #closeModalBtn{
    min-height:42px;
  }

  #addGradeNote{
    font-size:13px;
  }
}