/* Gallery page styles */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #ffffff; }

.collection-header .stat-label { display:block; font-size: .75rem; text-transform: uppercase; color: #00ff88; letter-spacing: 1px; }
.collection-header .stat-value { font-size: 1.25rem; font-weight: 700; color: #ffffff; }

/* AppKit button theme override - green accent */
appkit-button {
  --w3m-accent: #00ff88 !important;
  --w3m-accent-rgb: 0, 255, 136 !important;
  --w3m-color-mix: #00ff88 !important;
  --w3m-color-mix-strength: 30 !important;
}

/* Wallet connection button */
#connect-wallet-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}
#connect-wallet-btn.btn-success {
  background: rgba(0,255,136,0.2);
  border-color: #00ff88;
  color: #00ff88;
}
#connect-wallet-btn.btn-success:hover {
  background: rgba(0,255,136,0.3);
  border-color: #00ff88;
}
#wallet-address-display {
  font-size: 0.7rem;
  color: #00ff88;
  margin-top: 0.25rem;
}

/* Search input styling */
#search-input {
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.3);
  color: #ffffff;
  transition: all 0.3s ease;
}
#search-input::placeholder {
  color: #9aa0a6;
}
#search-input:focus {
  outline: none;
  border-color: #00ff88;
  background: rgba(0,0,0,.8);
  box-shadow: 0 0 8px rgba(0,255,136,0.3);
}

.token-card { 
  background: transparent !important; 
  background-color: transparent !important;
  border: 1px solid rgba(0,255,136,0.3); 
  transition: all 0.3s ease; 
}
.token-card:hover { border-color: rgba(0,255,136,0.6); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,255,136,0.2); }
.token-card .card-img-top { aspect-ratio: 1 / 1; object-fit: cover; background: #111; }
.token-card .card-title { font-weight: 700; font-size: 1rem; color: #ffffff; }
.token-card .card-text { font-size: .9rem; color: #e0e0e0; }
/* Card body transparent style - multiple selectors to ensure priority */
.token-card .card-body,
.card.token-card .card-body,
div.token-card .card-body { 
  background: transparent !important; 
  background-color: transparent !important;
  color:#ffffff; 
  padding:.6rem .75rem; 
}
.token-card .card-body .text-muted { color:#b0b9c2 !important; }

/* Inline trait filters (collapsed bar) */
.traits-inline-box { background: rgba(255,255,255,0.08); border:1px solid rgba(0,255,136,0.3); padding:.75rem 1rem; border-radius:.5rem; margin-bottom:1rem; }
.traits-inline-box h6 { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:#00ff88; }
.traits-inline-box #traits-toggle { white-space:nowrap; }
.traits-wrapper { transition:height .25s ease-out; will-change:height; overflow:hidden; position:relative; }
.traits-wrapper.collapsed::after { content:''; position:absolute; top:0; right:0; bottom:0; width:90px; background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.7)); pointer-events:none; z-index:1; }
.token-card .price-pill { font-size: .7rem; font-weight:600; letter-spacing:.5px; padding:.35rem .5rem; background:rgba(0,255,136,.15); border:1px solid rgba(0,255,136,.4); border-radius:.4rem; display:inline-flex; align-items:center; gap:.35rem; }
.token-card .price-pill span { display:inline-block; }
.token-card .price-pill .amt { color:#00ff88; }
.token-card .price-pill .cur { color:#ffffff; font-weight:500; }
.token-card .pill-bid { background:rgba(0,200,255,.15); border-color: rgba(0,200,255,.4); }
.listing-row { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem; }

/* Image wrapper and fallback badge */
.img-wrapper { position: relative; }
.fallback-badge {
  position: absolute;
  top: .4rem;
  left: .4rem;
  padding: .2rem .35rem;
  font-size: .6rem;
  line-height: 1;
  border-radius: .3rem;
  background: rgba(0, 200, 255, 0.15);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #ffffff;
  letter-spacing: .3px;
  text-transform: uppercase;
  opacity: 0.0; /* default hidden; JS may toggle */
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.img-wrapper:hover .fallback-badge { opacity: 0.6; }

.fallback-badge.show { opacity: 0.6; }
.fallback-badge.hide { opacity: 0.0; }

.badge-placeholder { background:#ff6b00; color:#fff; font-size:.6rem; padding:.25rem .4rem; border-radius:.3rem; text-transform:uppercase; letter-spacing:.5px; }

#grid-empty { color: #e0e0e0; }

.output { background: transparent; }

/* Ensure content appears above background layers on gallery page */
.bgall,
.stars,
.stars2,
.stars3 {
	z-index: -1;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
}

/* Lift main content layers above background */
.collection-header,
#gallery-grid,
#grid-empty,
#load-more,
.modal,
.container {
	position: relative;
	z-index: 1;
}

/* Trait Filters */
.trait-filter-box { background: rgba(255,255,255,0.08); border:1px solid rgba(0,255,136,0.3); padding:1rem; border-radius:.5rem; max-height:420px; overflow-y:auto; }
.trait-groups .trait-group { margin-bottom:1rem; }
.trait-groups .trait-group-title { font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:#00ff88; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight: 600; }
.trait-groups .trait-values { margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.trait-value { font-size:.65rem; padding:.35rem .55rem; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.3); border-radius:.45rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; line-height:1; color: #ffffff; transition: all 0.2s ease; }
.trait-value:hover { border-color: rgba(0,255,136,.5); background: rgba(0,255,136,.1); }
.trait-value .tv-count { color:#00ff88; }
.trait-value.active { background:rgba(0,255,136,.25); border-color:#00ff88; }
.trait-group.collapsed .trait-values { display:none; }
.trait-search { width:100%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.3); color:#ffffff; font-size:.7rem; padding:.3rem .45rem; border-radius:.3rem; margin-top:.4rem; }
.trait-search::placeholder { color: #9aa0a6; }
.trait-search:focus { outline: none; border-color:#00ff88; background: rgba(0,0,0,.7); }

/* Owners list */
.owners-box { background: rgba(255,255,255,0.08); border:1px solid rgba(0,255,136,0.3); padding:.75rem 1rem; border-radius:.5rem; max-height:260px; overflow-y:auto; }
.owners-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.owner-chip { background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.3); padding:.35rem .55rem; font-size:.6rem; border-radius:.45rem; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:.4rem; color: #ffffff; transition: all 0.2s ease; }
.owner-chip:hover { border-color: rgba(0,255,136,.5); background: rgba(0,255,136,.1); }
.owner-chip.active { background:rgba(0,255,136,.25); border-color:#00ff88; }
.owner-chip .oc-count { color:#00ff88; }
.owner-chip .oc-ens { color:#ffffff; font-weight:600; }

/* Marketplace Modal Enhancements */
.modal-content {
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.nav-tabs {
  border-bottom: 2px solid rgba(0, 255, 136, 0.3);
}

.nav-tabs .nav-link {
  color: #9aa0a6;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
  color: #00ff88;
  border-bottom-color: rgba(0, 255, 136, 0.5);
}

.nav-tabs .nav-link.active {
  color: #00ff88;
  background: transparent;
  border-bottom-color: #00ff88;
}

.marketplace-help {
  background: rgba(0, 255, 136, 0.05);
  border-left: 3px solid rgba(0, 255, 136, 0.4);
  padding: 0.75rem;
  border-radius: 0.25rem;
  line-height: 1.5;
}

.input-group-text {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
  color: #00ff88;
  font-weight: 700;
  font-size: 1.2rem;
}

.form-control {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.form-control:focus {
  background: rgba(0, 0, 0, 0.7);
  border-color: #00ff88;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.form-control::placeholder {
  color: #9aa0a6;
}

.btn-icon {
  margin-right: 0.5rem;
  font-size: 1.1em;
}

.btn-lg .btn-icon {
  font-size: 1.3em;
}

/* Alert improvements */
.alert {
  border-radius: 0.5rem;
  border-left-width: 4px;
}

.alert-success {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00ff88;
  color: #ffffff;
}

.alert-info {
  background: rgba(0, 200, 255, 0.15);
  border-color: rgba(0, 200, 255, 0.6);
  color: #ffffff;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.6);
  color: #ffffff;
}

.alert-danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.6);
  color: #ffffff;
}

.alert-link {
  color: #00ff88;
  font-weight: 600;
  text-decoration: underline;
}

.alert-link:hover {
  color: #00cc6e;
}

/* Spinner */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* Button state improvements */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-success {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
  color: #00ff88;
}

.btn-success:hover:not(:disabled) {
  background: rgba(0, 255, 136, 0.3);
  border-color: #00ff88;
  color: #ffffff;
}

.btn-primary {
  background: rgba(0, 123, 255, 0.2);
  border-color: #007bff;
  color: #4da3ff;
}

.btn-primary:hover:not(:disabled) {
  background: rgba(0, 123, 255, 0.3);
  border-color: #007bff;
  color: #ffffff;
}

.btn-info {
  background: rgba(0, 200, 255, 0.2);
  border-color: #00c8ff;
  color: #00c8ff;
}

.btn-info:hover:not(:disabled) {
  background: rgba(0, 200, 255, 0.3);
  border-color: #00c8ff;
  color: #ffffff;
}

.btn-warning {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
  color: #ffc107;
}

.btn-warning:hover:not(:disabled) {
  background: rgba(255, 193, 7, 0.3);
  border-color: #ffc107;
  color: #ffffff;
}
/* Marketplace action controls (hidden until connected) */
#list-controls,
#offer-controls {
  display: none;
}

#list-controls.visible,
#offer-controls.visible {
  display: block;
}

/* Gallery mint controls */
#gallery-mint-controls {
  display: none;
}

#gallery-mint-controls.visible {
  display: block;
}

#gallery-mint-amount-display {
  cursor: default;
}

/* Mint modal styling */
#mint-minted-count {
  font-size: 1.2em;
  font-weight: bold;
}

.mint-progress-container {
  height: 1.5rem;
}

#mint-price-display {
  font-size: 1.1em;
}

#mint-total-price {
  font-size: 1.1em;
  font-weight: bold;
}