/* =========================================================
   UI BUTTON SYSTEM V2
   Reference style: main navigation buttons
   Smaller, cleaner, less bold.
========================================================= */

:root{
  --ui-btn-h:42px;
  --ui-btn-radius:14px;
  --ui-btn-pad-x:14px;
  --ui-btn-gap:10px;
  --ui-btn-font:15px;
  --ui-btn-weight:700;
}

/* Shared standard button size */
.btn,
button.btn,
.login-btn,
.register-btn,
.mobile-login-btn,
.mobile-register-btn,
.primary-btn,
.ghost-btn,
.danger-btn,
.market-open-btn,
.market-offer-btn,
.market-edit-btn,
.small-btn.primary,
.small-btn.ghost,
.small-btn.danger,
.coin-open-btn,
.coin-edit-btn,
.collection-filter,
.collection-print-icon,
.market-tabs button,
.market-actions .btn,
.market-form .btn,
.catalog-admin-actions .btn,
.coin-admin-actions .btn,
.form-actions .btn,
.bulk-paste-actions .btn,
.coin-editor-actions .btn,
.account-head-actions .btn,
.hero-actions .btn{
  min-height:var(--ui-btn-h) !important;
  height:var(--ui-btn-h) !important;
  border-radius:var(--ui-btn-radius) !important;
  padding:0 var(--ui-btn-pad-x) !important;
  font-size:var(--ui-btn-font) !important;
  font-weight:var(--ui-btn-weight) !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:0 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
  cursor:pointer !important;
  letter-spacing:.1px !important;
  transition:transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease !important;
}

/* Keep icon-only buttons compact */
.collection-print-icon{
  width:42px !important;
  min-width:42px !important;
  padding:0 !important;
}

.modal-close,
.bulk-paste-close,
.mobile-menu-btn,
#mobileMenuBtn,
#headerNotificationBell,
.lightbox-nav,
.image-side-arrow,
.collection-remove,
.remove-row,
#closeCoinEditor{
  padding:0 !important;
}

/* Button groups */
.coin-admin-actions,
.catalog-admin-actions,
.form-actions,
.bulk-paste-actions,
.coin-editor-actions,
.market-actions,
.account-head-actions,
.hero-actions,
.card-actions,
.collection-filter-buttons{
  display:flex !important;
  align-items:center !important;
  gap:var(--ui-btn-gap) !important;
  column-gap:var(--ui-btn-gap) !important;
  row-gap:var(--ui-btn-gap) !important;
  flex-wrap:wrap !important;
}

/* Colors */
.btn.gold,
.login-btn,
.primary-btn,
.small-btn.primary,
.market-tabs button.active{
  background:var(--gold, #f5a400) !important;
  color:#0b1120 !important;
  border:1px solid var(--gold, #f5a400) !important;
}

.btn.dark,
.register-btn,
.mobile-login-btn,
.mobile-register-btn,
.market-open-btn,
.ghost-btn,
.small-btn.ghost,
.market-tabs button,
.collection-filter,
.collection-print-icon{
  background:#202b3f !important;
  color:#ffffff !important;
  border:1px solid #334155 !important;
}

.collection-filter.active{
  background:var(--gold, #f5a400) !important;
  color:#0b1120 !important;
  border-color:var(--gold, #f5a400) !important;
}

.btn.danger,
.small-btn.danger,
.register-btn.logout-mode,
.mobile-register-btn.logout-mode,
.danger-btn,
.danger{
  background:#8b1d1d !important;
  color:#ffffff !important;
  border:1px solid #9f2929 !important;
}

.btn:hover,
.login-btn:hover,
.register-btn:hover,
.mobile-login-btn:hover,
.mobile-register-btn:hover,
.primary-btn:hover,
.ghost-btn:hover,
.danger-btn:hover,
.small-btn:hover,
.collection-filter:hover,
.market-tabs button:hover{
  transform:translateY(-1px) !important;
  filter:brightness(.97) !important;
}

/* Card primary buttons can fill width when the layout asks for it */
.coin-open-btn{
  width:100% !important;
}

/* Admin row buttons should remain compact */
.admin-market-actions .btn,
.admin-market-actions .small-btn,
.admin-market-actions .primary-btn,
.admin-market-actions .ghost-btn,
.admin-market-actions .danger-btn{
  min-height:36px !important;
  height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:10px !important;
  font-weight:700 !important;
}

/* Tiny utility buttons */
.small-btn:not(.primary):not(.ghost),
.collection-remove,
.remove-row{
  min-height:34px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:12px !important;
  border-radius:10px !important;
  font-weight:700 !important;
}

/* Bulk paste buttons same size as standard buttons, not huge */
.clean-bulk-paste-panel .bulk-paste-actions .btn{
  min-width:110px !important;
  height:42px !important;
  font-size:15px !important;
  font-weight:700 !important;
}

/* Mobile */
@media(max-width:860px){
  :root{
    --ui-btn-h:42px;
    --ui-btn-radius:14px;
    --ui-btn-pad-x:14px;
    --ui-btn-gap:10px;
    --ui-btn-font:15px;
    --ui-btn-weight:700;
  }

  .hero-actions .btn,
  .market-actions .btn,
  .form-actions .btn,
  .bulk-paste-actions .btn{
    width:100% !important;
  }

  .catalog-admin-actions .btn,
  .coin-admin-actions .btn{
    width:auto !important;
    min-width:auto !important;
  }

  .collection-filter-buttons{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
  }

  .collection-filter{
    width:100% !important;
    min-width:0 !important;
    padding:0 8px !important;
    font-size:14px !important;
  }
}

@media(max-width:520px){
  .catalog-admin-actions,
  .coin-admin-actions{
    display:flex !important;
    gap:10px !important;
  }

  .catalog-admin-actions .btn,
  .coin-admin-actions .btn{
    width:auto !important;
    min-width:0 !important;
    padding:0 12px !important;
    font-size:14px !important;
  }
}