/* Shared button-consistency fixes for UGO | MARKET.
   Loaded on every page (same mechanism as css/theme-overrides.css).

   This app's pages were generated independently, so several buttons that
   share the same ROLE (and in most cases the same semantic class name,
   added for JS hooks) ended up with different Tailwind utilities on
   different pages — different heights, border-radius values outside the
   app's own defined scale (DEFAULT/lg/xl/full only; "rounded-md" falls
   back to Tailwind's stock 6px, not a token this app defines), hover-only
   vs always-on color, and font-size tokens vs arbitrary px values. Each
   rule below picks the more deliberate-looking existing variant as the
   canonical spec and normalizes every page to it. Only sizing/shape/
   typography properties are touched — color STATE (selected vs
   unselected, active vs inactive) is left to each page's own class
   toggling and is not a consistency bug. */

/* ---------- Grid-card "Bid" / "Buy Now" buttons ---------- */
/* explore.html's .grid-bid-btn (h-9, rounded-lg, solid bg-primary-container)
   vs index.html's .grid-bid-btn/.buy-now-btn (no explicit height — relies on
   py-1.5 padding, giving ~29px — rounded-md/6px which isn't one of this
   app's defined radius tokens, hover-only color, arbitrary text-[11px]
   instead of the text-label-md token). Standardized on the explore.html
   version: a full-strength orange CTA is more legible at this size than a
   neutral chip that only reveals its color on hover (which touch devices
   can't even trigger). */
.grid-bid-btn,
.buy-now-btn,
.quick-bid-patek-btn {
  height: 2.25rem !important; /* h-9 */
  border-radius: 0.5rem !important; /* rounded-lg */
  font-size: 0.875rem !important; /* text-label-md */
  line-height: 1.25rem !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
}

/* ---------- Category / filter chips ---------- */
/* index.html's .cat-pill (px-space-md py-space-xs ≈ 24px tall) vs
   explore.html's .cat-chip (px-space-sm py-1.5 ≈ 30px tall) are the same
   horizontal-scroll category selector, just named and padded differently
   per page. Standardized to one comfortable chip height; .cat-pill's
   list-row variant (p-3, rounded-xl, used in a vertical "All Categories"
   dropdown rather than a horizontal chip row) is a different layout, not
   this same role, and is left alone via :not(). */
.cat-pill:not([class*="rounded-xl"]),
.cat-chip {
  height: 2.25rem !important; /* h-9, matches the grid-card buttons above */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ---------- Watchlist heart-toggle buttons ---------- */
/* Same icon-toggle role, three different class names depending on which
   page it was generated for (.heart-toggle, .watchlist-btn) and two
   different sizes: w-7 h-7 (28px, explore.html/activity.html's grid-card
   overlay) vs w-8 h-8 (32px, elsewhere). Standardized to 32px — closer to
   a comfortable touch target and already the more common of the two. Not
   touching .watchlist-alert-btn (a full-width text button, a different
   role) or card.html's id="wishlist-btn" (a one-off hero-gallery icon,
   not part of this repeated grid-card pattern). */
.heart-toggle,
.watchlist-btn {
  width: 2rem !important; /* w-8 */
  height: 2rem !important; /* h-8 */
}

/* ---------- Bid-increment selector pills ---------- */
/* The "pick a counter-bid increment amount" control turns out to exist
   under FOUR different class names across the site, each with its own
   styling: card.html/product-details.html's .inc-pill (rounded-xl/12px,
   py-2.5, font-label-md — the most polished, used as the baseline here),
   activity.html's .step-increment-btn (rounded-lg/8px, py-2, font-mono
   text-xs), and activity.html/bid.html/live-room.html's .increment-btn
   (three more sub-variants between those three pages: rounded-lg+border
   vs rounded-xl+no-border, bg-primary-container/20 vs bg-surface-container
   vs bg-surface-container-lowest). font-mono reads oddly for a short
   "+30,000" next to a plain-text "Standard"/"Aggressive" caption on the
   same button, so all four are standardized on .inc-pill's spec. */
.inc-pill,
.step-increment-btn,
.increment-btn {
  border-radius: 0.75rem !important; /* rounded-xl */
  padding-top: 0.625rem !important; /* py-2.5 */
  padding-bottom: 0.625rem !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.875rem !important; /* text-label-md */
  line-height: 1.25rem !important;
  letter-spacing: 0.01em !important;
}

/* ---------- Primary "Place Bid" action button ---------- */
/* index.html's .bid-action-btn (h-13/52px, rounded-lg/8px, gradient bg) vs
   notifications.html's .action-bid-btn (auto height from py-3 ≈ 48px,
   rounded-xl/12px, solid bg) — same button, word-order-swapped class name.
   Standardized on a solid bg-primary-container at h-12/48px/rounded-xl,
   matching the vault-intake modal's "Start Verification Application"
   button, the one primary CTA spec already proven consistent site-wide
   (same gradient-vs-solid reasoning as the grid-card buttons above: a
   flat, always-on brand color reads more clearly as "the button" than a
   gradient, and is simpler to keep consistent). */
.bid-action-btn,
.action-bid-btn {
  height: 3rem !important; /* h-12 */
  border-radius: 0.75rem !important; /* rounded-xl */
  background-image: none !important;
  background-color: #e17053 !important; /* primary-container */
}

/* ---------- Segmented-tab pills (category/status filter row) ---------- */
/* activity.html's .tab-btn, my-listings.html's .listing-tab-btn and
   my-orders.html's .order-tab-btn already match each other exactly
   (px-space-md py-space-xs, rounded-full, font-label-lg text-label-lg) —
   that's the established spec. seller-profile.html's .category-tab
   (px-4 py-2 — Tailwind's stock spacing, not this app's space-* tokens —
   plus the smaller font-label-md) and payout.html's .filter-tab (px-3
   py-1.5 plus an arbitrary text-[11px]) are the same horizontal pill-tab
   row pattern but don't match it. terms.html's .filter-chip already uses
   the correct px-space-md/py-space-xs tokens; notifications.html's
   .filter-chip (same class, same role: a horizontal filter-pill row)
   instead uses arbitrary px-3.5/py-1.5, so it's included here too. Not
   touching .mode-tab (settings.html), which is a rectangular segmented
   control, not a pill row — a deliberately different component. */
.tab-btn[class*="rounded-full"],
.bid-tab-btn,
.listing-tab-btn,
.order-tab-btn,
.category-tab,
.filter-tab,
.filter-chip,
.price-chip,
.brand-chip {
  height: 2.25rem !important; /* h-9 */
  padding-left: 1rem !important; /* px-space-md */
  padding-right: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important; /* text-label-lg */
  line-height: 1.25rem !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* ---------- Rectangular segmented-control tabs ---------- */
/* Normalizes full-width 2- and 3-way segmented bars across profile.html,
   payment-methods.html, card.html, and ugo-source.html. */
[id^="tab-btn-"],
.tab-btn:not([class*="rounded-full"]),
.delivery-toggle-opt {
  min-height: 2.25rem !important; /* h-9 */
  border-radius: 0.5rem !important; /* rounded-lg */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important; /* text-label-md */
  line-height: 1rem !important;
  font-weight: 600 !important;
}

/* ---------- Modal "X" close buttons ---------- */
/* The circular close icon in a bottom-sheet modal's header is w-8 h-8
   (32px) on some modals and w-9 h-9 (36px) on others, no semantic class
   name to hook — only a predictable id="close-*" pattern. Standardized to
   36px. Deliberately excludes close-cart-btn/close-search-btn/
   close-notifications-btn: those three are a plain p-1 icon with no
   circular background at all (a different, intentionally minimal
   "drawer header dismiss" style, not this prominent-modal-header
   pattern), so forcing a circle+size onto them would be the wrong fix
   rather than a consistency one. */
[id^="close-"]:not(#close-cart-btn):not(#close-search-btn):not(#close-notifications-btn) {
  width: 2.25rem !important; /* w-9 */
  height: 2.25rem !important; /* h-9 */
}

/* ---------- System-wide Toggle Switches (Button & Checkbox Peer) ---------- */
/* Standardizes every toggle switch across the entire UGO | MARKET system:
   1. Button switches (.interactive-switch, button[role="switch"]) on
      settings.html, privacy.html, payment-methods.html, notifications.html,
      and sell.html.
   2. Checkbox peer switches (input[type="checkbox"].peer + div.rounded-full)
      on explore.html, login.html, outbid.html, signup.html, and bid.html.
   All use a 48x28px (3rem x 1.75rem) pill track, 2px internal inset,
   a crisp 24x24px (#ffffff) thumb, 0px -> 20px (1.25rem) thumb travel,
   and canonical #e17053 (primary-container) active track color across
   Obsidian, Daylight, and OLED themes. */
.interactive-switch,
button[role="switch"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 3rem !important; /* w-12 (48px) */
  height: 1.75rem !important; /* h-7 (28px) */
  padding: 0.125rem !important; /* p-0.5 (2px) */
  border-radius: 9999px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease !important;
}

html .interactive-switch:not([aria-checked="true"]):not(.is-active),
html button[role="switch"]:not([aria-checked="true"]):not(.is-active) {
  background-color: #38342f !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
html.theme-oled .interactive-switch:not([aria-checked="true"]):not(.is-active),
html.theme-oled button[role="switch"]:not([aria-checked="true"]):not(.is-active) {
  background-color: #222222 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
html.theme-daylight .interactive-switch:not([aria-checked="true"]):not(.is-active),
html.theme-daylight button[role="switch"]:not([aria-checked="true"]):not(.is-active) {
  background-color: #d6cbc1 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

html .interactive-switch[aria-checked="true"],
html .interactive-switch.is-active,
html button[role="switch"][aria-checked="true"],
html.theme-oled .interactive-switch[aria-checked="true"],
html.theme-oled .interactive-switch.is-active,
html.theme-oled button[role="switch"][aria-checked="true"],
html.theme-daylight .interactive-switch[aria-checked="true"],
html.theme-daylight .interactive-switch.is-active,
html.theme-daylight button[role="switch"][aria-checked="true"] {
  background-color: #e17053 !important; /* primary-container */
  box-shadow: 0 2px 8px rgba(225, 112, 83, 0.32) !important;
}

.interactive-switch .switch-thumb,
button[role="switch"] > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.5rem !important; /* w-6 (24px) */
  height: 1.5rem !important; /* h-6 (24px) */
  margin: 0 !important;
  position: static !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  color: #56423d !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(0) !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.interactive-switch .switch-thumb .material-symbols-outlined,
button[role="switch"] > span .material-symbols-outlined {
  color: #56423d !important;
  font-size: 13px !important;
}

.interactive-switch[aria-checked="true"] .switch-thumb,
.interactive-switch.is-active .switch-thumb,
button[role="switch"][aria-checked="true"] > span {
  transform: translateX(1.25rem) !important; /* translate-x-5 (20px) */
}

.interactive-switch[aria-checked="true"] .switch-thumb .material-symbols-outlined,
.interactive-switch.is-active .switch-thumb .material-symbols-outlined,
button[role="switch"][aria-checked="true"] > span .material-symbols-outlined {
  color: #c0533a !important;
}

/* Checkbox-peer switches (input[type="checkbox"].peer + div.rounded-full) */
input[type="checkbox"].peer + div.rounded-full {
  display: inline-block !important;
  width: 3rem !important; /* w-12 (48px) */
  height: 1.75rem !important; /* h-7 (28px) */
  border-radius: 9999px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  background-color: #38342f !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease !important;
}
html.theme-oled input[type="checkbox"].peer + div.rounded-full {
  background-color: #222222 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
html.theme-daylight input[type="checkbox"].peer + div.rounded-full {
  background-color: #d6cbc1 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}
html input[type="checkbox"].peer:checked + div.rounded-full,
html.theme-oled input[type="checkbox"].peer:checked + div.rounded-full,
html.theme-daylight input[type="checkbox"].peer:checked + div.rounded-full {
  background-color: #e17053 !important; /* primary-container */
  box-shadow: 0 2px 8px rgba(225, 112, 83, 0.32) !important;
}
input[type="checkbox"].peer + div.rounded-full::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 1.5rem !important; /* w-6 (24px) */
  height: 1.5rem !important; /* h-6 (24px) */
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(0) !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
input[type="checkbox"].peer:checked + div.rounded-full::after {
  transform: translateX(1.25rem) !important; /* 20px travel inside 48px track */
}