/* EagleTagz demo: one button set on Load Media, Micro and Price & Copyright (change #3,
 * October 2026). buttons.js gives each button one of four styles:
 *   primary      logo gold, filled, dark text: the one main action in view
 *   secondary    gray
 *   plain        text only
 *   destructive  red text with a red outline; Delete and Reset Tags ask first
 * All 44px tall with 10px corners and semibold labels (Apple HIG buttons; one prominent
 * button per view). Red text is #FF7B73 so it stays readable (4.5:1) on the gray cards. */

.etz-b {
  min-height: 44px !important; /* some page buttons set a smaller min-height of their own */
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.etz-b i { color: inherit !important; }
.etz-b:focus-visible { outline: 2px solid #f1c50e !important; outline-offset: 2px; }
.etz-b:disabled { opacity: 0.45; cursor: not-allowed; }

.etz-b-primary {
  background: #f1c50e !important;
  border-color: #f1c50e !important;
  color: #111827 !important;
}
.etz-b-primary:hover:not(:disabled) { background: #f5d23f !important; border-color: #f5d23f !important; }

.etz-b-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f9fafb !important;
}
.etz-b-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16) !important; }

.etz-b-plain {
  background: transparent !important;
  border-color: transparent !important;
  color: #e5e7eb !important;
}
.etz-b-plain:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08) !important; }

.etz-b-destructive {
  background: transparent !important;
  border: 1px solid rgba(255, 123, 115, 0.45) !important;
  color: #ff7b73 !important;
}
.etz-b-destructive:hover:not(:disabled) { background: rgba(255, 69, 58, 0.12) !important; }

/* a small list action (Recently Uploaded's Preview): 32px on a computer, 44px on touch screens */
.etz-b-compact { min-height: 32px !important; }
@media (pointer: coarse) { .etz-b-compact { min-height: 44px !important; } }

/* ---------- confirmation inside the page (Delete, Reset Tags) ---------- */
.etz-dialog-back {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}
.etz-dialog {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #1a2430;
  color: #f9fafb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.etz-dialog h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.etz-dialog p { margin: 0 0 20px; font-size: 16px; line-height: 1.45; color: #d1d5db; overflow-wrap: anywhere; }
.etz-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.etz-dialog-actions .etz-b { padding: 0 16px; font-size: 16px; border: 1px solid transparent; cursor: pointer; }
.etz-b-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.etz-b-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
@media (max-width: 480px) {
  .etz-dialog-actions { flex-direction: column-reverse; }
  .etz-dialog-actions .etz-b { width: 100%; }
}

/* Price & Copyright: the panel around the cards pulsed everything inside it 50% brighter every
   3 seconds (the page's neon-pulse), which turned the gold yellow and made the page flicker.
   Keep its gradient border with a steady soft glow instead. */
.neon-border {
  animation: none !important;
  filter: none !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.22);
}

/* Price & Copyright: an item that is for sale says so, with View, and has Remove from Store */
.etz-instore { display: flex; align-items: center; gap: 8px; margin: 0; color: #4ade80; font-size: 13px; font-weight: 600; }
.etz-instore-by { color: #9ca3af; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* change #22, part 2 */
.etz-instore a { margin-left: auto; color: #e5e7eb; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.etz-instore a:hover { color: #fff; }
.etz-instore a:focus-visible { outline: 2px solid #f1c50e; outline-offset: 2px; border-radius: 4px; }