:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light;
  color: #213547;
  background-color: #ffffff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Hide scrollbars globally */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbars for WebKit browsers (Chrome, Safari, Edge) */
:root::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

/* Green dropdown highlight for select elements */
select:focus {
  outline: none !important;
  border-color: #4a6f4a !important;
  box-shadow: 0 0 0 2px rgba(74, 111, 74, 0.2) !important;
}

/* Green option highlight when hovering in dropdown */
select option:checked,
select option:hover {
  background-color: #4a6f4a !important;
  color: white !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  background-color: #ffffff;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #ffffff;
  }
}

/* Modal animation styles */
@keyframes modalFadeIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Foil effect for card names */
@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(360deg);
  }
}

.foil-active-text {
  background: linear-gradient(
    125deg,
    #ff0000,
    #ffa500,
    #ffff00,
    #00ff00,
    #0000ff,
    #ee82ee
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-shift 8s linear infinite;
  font-weight: bold;
}
/* Theme Variables */
:root {
  /* Light theme colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --border-color: #dee2e6;
  --hover-bg: #f8f9fa;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
  /* Dark theme colors */
  --bg-primary: #1a1d20;
  --bg-secondary: #242729;
  --bg-tertiary: #2e3236;
  --text-primary: #e8dcc0;
  --text-secondary: #b8d4b8;
  --text-tertiary: #8b9a8b;
  --border-color: #3d4246;
  --hover-bg: #2e3236;
  --card-bg: #242729;
  --input-bg: #1a1d20;
  --input-border: #3d4246;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
}

/* Global overflow prevention - only prevent horizontal scroll */
html, body {
  max-width: 100%;
}

#root {
  max-width: 100%;
}

/* PERFORMANCE: BuildPage deck table hover effects using CSS instead of JS */
.deck-table-row {
  transition: background-color 0.2s ease;
}

.deck-table-row:hover {
  background-color: var(--hover-bg) !important;
}

.deck-table-group-header {
  transition: background-color 0.2s ease;
}

.deck-delete-button {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.deck-table-row:hover .deck-delete-button {
  opacity: 1;
}

.deck-create-button {
  transition: background-color 0.2s ease;
}

.deck-create-button:hover {
  background-color: #4a6f4a !important;
}

/* Deck card row styles */
.deck-card-row {
  display: flex;
  align-items: center; /* Changed back to center for proper alignment with hover background */
  padding: 3px 0; /* Slightly increased padding for better spacing */
  font-size: 10pt; /* Changed from 1rem to 10pt */
  border-bottom: none;
  min-height: 22px; /* Keep minimum height but allow expansion */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Bulk edit hover state */
.deck-card-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
  /* Don't add padding/margin on hover - causes column reflow in list view */
}

/* Bulk edit selected state */
.deck-card-row.bulk-selected {
  background-color: rgba(25, 118, 210, 0.08) !important;
}

.deck-card-row.bulk-edit-mode {
  cursor: pointer;
  padding: 3px 0; /* Match the regular row padding */
  border-radius: 3px;
  min-height: 22px; /* Remove fixed height, allow expansion */
  align-items: center; /* Center align for consistency */
  outline: none !important;
}

.deck-card-row.bulk-edit-mode:hover {
  background-color: rgba(25, 118, 210, 0.05);
  /* Don't add padding/margin on hover - causes column reflow in list view */
}
.deck-card-row .card-count {
  font-size: inherit;
  font-weight: 500;
  margin-right: 2px;
  padding-right: 2px;
  color: #444;
  line-height: 1.2; /* Add consistent line height */
  align-self: center; /* Center align with other elements */
}
.deck-card-row .card-name {
  font-size: inherit;
  font-weight: 500;
  margin-right: 8px; /* Increase margin to create more space between name and price */
  line-height: 1.2; /* Add consistent line height for better text wrapping */
  flex: 1; /* Allow the card name to take up available space */
  min-width: 0; /* Allow flex item to shrink below its content size */
  max-width: calc(100% - 180px); /* Increased to accommodate larger right group */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto; /* Enable automatic hyphenation */
  white-space: normal; /* Ensure text can wrap to multiple lines */
  color: #333; /* Visible text color for non-foil cards */
  align-self: center; /* Center align with other elements */
}

/* Non-foil cards need visible text */
.deck-card-row .card-name:not(.foil-active-text) {
  color: #333 !important;
}

/* Illegal cards get red text (higher specificity) */
.deck-card-row .card-name.illegal-card {
  color: #dc2626 !important;
  font-weight: bold;
}

.deck-card-row .card-mana {
  margin-right: 8px;
  display: flex;
  align-items: center; /* Center mana symbols */
}

/* Group for right-aligned price and mana column */
  .card-right-group {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    max-width: 160px; /* Increased to accommodate right-aligned content */
    flex-shrink: 0;
    overflow: visible; /* Changed from hidden to allow content to display */
    box-sizing: border-box; /* Include padding and border in width calculations */
    margin-left: auto; /* Push entire group to the right */
  }

/* Smooth wave animation */
@keyframes smooth-rainbow-wave {
  0% {
    background-position: -100% -100%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: -100% -100%;
  }
}

/* Ensure mana column aligns properly with text wrapping */
.deck-card-row .card-mana-column {
  min-width: 60px; /* Reduced from 70px to save space */
  max-width: 60px; /* Fixed width to prevent shrinking */
  display: flex;
  justify-content: center; /* Center align mana symbols horizontally */
  align-items: center; /* Center align mana symbols vertically */
  text-align: center;
  flex-shrink: 0;
}

.deck-card-row .card-price {
    min-width: 60px; /* Set minimum width for consistent alignment */
    max-width: 60px; /* Increased from 45px */
    font-size: 0.7rem;
    color: #666;
    align-self: center; /* Center align price vertically */
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; /* Prevent shrinking */
  }

/* Responsive and accessible base styles */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#root {
  /* No maximum width to allow full browser width */
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-primary);
  transition: background-color 0.3s ease;
}

/* Lock content to the left */
.content-container {
  margin: 0;
  width: 100%;
  max-width: none;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--card-bg);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.read-the-docs {
  color: var(--text-tertiary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  transition: color 0.3s ease;
}

h1, h2 {
  text-align: left; /* Changed from center for deck name */
}

form, .container {
  max-width: 500px;
  margin: 2rem 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 2rem;
  width: 100%;
}

.deck-container {
  max-width: none;
  margin: 1rem 0;
  width: 100%;
  box-sizing: border-box;
  /* Ensure no overflow constraints that could interfere with sticky positioning */
}

.deck-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 100vw;
  width: 100%;
  min-height: 0; /* Prevent flex items from growing beyond viewport */
  /* Remove overflow-x: hidden to prevent interference with sticky positioning */
}

.deck-sidebar {
  flex: 0 0 280px;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  overflow: visible; /* Must be visible for sticky positioning to work */
  padding: 1rem;
  position: sticky;
  top: 80px; /* Account for navbar height (navbar is ~70px + some padding) */
  align-self: flex-start; /* Ensure it aligns to the top of its container */
  max-height: calc(100vh - 100px); /* Limit height to viewport minus navbar and padding */
  /* No internal scrolling - the sidebar should be sticky as a whole unit */
  z-index: 10; /* Ensure sidebar stays above other content */
  max-width: 280px; /* Prevent expansion beyond intended width */
  min-width: 250px; /* Ensure minimum usable width */
}

.deck-sidebar > div:first-child {
  margin-bottom: 8px !important;
}

/* Remove bottom margin from Display Options and dropdowns */
.deck-sidebar label,
.deck-sidebar .display-options,
.deck-sidebar select,
.deck-sidebar .card-group-sort-options {
  margin-bottom: 0 !important;
}

/* Reduce vertical space between Display Options and card preview */
.display-options {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Style dropdowns for compactness */
.deck-sidebar select {
  padding: 4px 6px !important;
  font-size: 12px !important;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  margin-bottom: 0 !important;
}

.deck-main-content {
  flex: 1 1 0;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 2rem; /* Increased from 1rem for more breathing room */
  min-height: 600px;
  min-width: 0; /* Allow shrinking below content width */
  max-width: 100%; /* Prevent overflow */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  /* Remove overflow properties to allow natural scrolling for sticky positioning */
}

/* Dark mode enhancements */
[data-theme="dark"] .deck-sidebar,
[data-theme="dark"] .deck-main-content {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Dark mode: Cream color for card text */
[data-theme="dark"] .card-name,
[data-theme="dark"] .deck-card-row .card-name,
[data-theme="dark"] .card-type-name,
[data-theme="dark"] .card-type-count {
  color: #d4c5a0 !important;
}

/* Dark mode: Cream color for SVGs (mana symbols, type icons) */
/* Apply cream filter to all mana symbols by default */
[data-theme="dark"] .mana-symbol {
  filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(85%) !important;
}

/* Dark mode: Keep dual/hybrid mana symbols with their original colors */
/* Dual mana symbols have 2-letter filenames: wu.svg, br.svg, ub.svg, etc. */
[data-theme="dark"] .mana-symbol[src*="/wu.svg"],
[data-theme="dark"] .mana-symbol[src*="/ub.svg"],
[data-theme="dark"] .mana-symbol[src*="/br.svg"],
[data-theme="dark"] .mana-symbol[src*="/rg.svg"],
[data-theme="dark"] .mana-symbol[src*="/gw.svg"],
[data-theme="dark"] .mana-symbol[src*="/wb.svg"],
[data-theme="dark"] .mana-symbol[src*="/ur.svg"],
[data-theme="dark"] .mana-symbol[src*="/bg.svg"],
[data-theme="dark"] .mana-symbol[src*="/rw.svg"],
[data-theme="dark"] .mana-symbol[src*="/gu.svg"],
[data-theme="dark"] .mana-symbol[src*="/2w.svg"],
[data-theme="dark"] .mana-symbol[src*="/2u.svg"],
[data-theme="dark"] .mana-symbol[src*="/2b.svg"],
[data-theme="dark"] .mana-symbol[src*="/2r.svg"],
[data-theme="dark"] .mana-symbol[src*="/2g.svg"],
[data-theme="dark"] .mana-symbol[src*="/wp.svg"],
[data-theme="dark"] .mana-symbol[src*="/up.svg"],
[data-theme="dark"] .mana-symbol[src*="/bp.svg"],
[data-theme="dark"] .mana-symbol[src*="/rp.svg"],
[data-theme="dark"] .mana-symbol[src*="/gp.svg"] {
  filter: none !important;
}

/* Type icons should use cream filter, but NOT dual/hybrid mana symbols */
[data-theme="dark"] img[src*="/svgs/"]:not(.mana-symbol):not([src*="/wu.svg"]):not([src*="/ub.svg"]):not([src*="/br.svg"]):not([src*="/rg.svg"]):not([src*="/gw.svg"]):not([src*="/wb.svg"]):not([src*="/ur.svg"]):not([src*="/bg.svg"]):not([src*="/rw.svg"]):not([src*="/gu.svg"]):not([src*="/2w.svg"]):not([src*="/2u.svg"]):not([src*="/2b.svg"]):not([src*="/2r.svg"]):not([src*="/2g.svg"]):not([src*="/wp.svg"]):not([src*="/up.svg"]):not([src*="/bp.svg"]):not([src*="/rp.svg"]):not([src*="/gp.svg"]) {
  filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(85%) !important;
}

/* Dark mode: Cream color for prices and quantities */
[data-theme="dark"] .card-price,
[data-theme="dark"] .deck-card-row .card-price,
[data-theme="dark"] .card-count,
[data-theme="dark"] .deck-card-row .card-count {
  color: #d4c5a0 !important;
}

/* Dark mode: Subtle dark hover for card type headers */
[data-theme="dark"] .card-type-header.clickable-header:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom-color: #3d5e3d;
}

/* Dark mode: Ensure stats bar is fully opaque */
[data-theme="dark"] .deck-stats-sticky-bar,
[data-theme="dark"] div.deck-stats-sticky-bar {
  background: #242729 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark mode: Grid view card backgrounds */
[data-theme="dark"] .grid-card-container {
  background-color: var(--color-surface) !important;
}

/* Hide scrollbars completely while maintaining scroll functionality */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@media (max-width: 1024px) {
  .deck-sidebar {
    display: none; /* Hide sidebar on tablets too */
  }
  
  .deck-stats-bar {
    display: none; /* Hide stats bar on tablets and mobile */
  }
  
  .mobile-view-controls {
    display: block !important; /* Show mobile controls when sidebar is hidden */
  }
  
  .deck-main-content {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .deck-layout {
    flex-direction: column;
    gap: 0 !important;
  }
  
  .deck-sidebar {
    display: none !important; /* Hide sidebar completely on mobile */
  }
  
  .deck-stats-bar {
    display: none !important; /* Hide stats bar on mobile */
  }
  
  .mobile-view-controls {
    display: block !important; /* Show mobile controls on mobile */
  }

  .deck-main-content {
    padding: 0.5rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .deck-title-bar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .deck-main-content {
    padding: 1rem; /* Reduce padding on mobile */
    width: 100%;
    max-width: 100%;
  }
}

/* Add responsive grid adjustments */
@media (max-width: 480px) {
  .deck-main-content {
    padding: 0.5rem;
  }
  
  /* Mobile grid optimization */
  .deck-main-content [style*="gridTemplateColumns"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Additional responsive breakpoints for better grid scaling */
@media (max-width: 900px) and (min-width: 769px) {
  .deck-main-content [style*="gridTemplateColumns"] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}

/* Ensure consistent alignment on very wide screens */
@media (min-width: 1630px) {
  .deck-card-row .card-right-group {
    max-width: 110px; /* Keep compact even on wide screens */
  }
  
  .deck-card-row .card-mana-column {
    min-width: 60px; /* Match our reduced width */
    max-width: 60px;
  }
  
  .deck-card-row .card-price {
    max-width: 45px;
  }
}

input:not([type="checkbox"]), button, select, textarea {
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 0;
  padding: 0.5rem;
  box-sizing: border-box;
  color: #000;
  /* width: 100%; REMOVED - add individually where needed */
}

button {
  background: #3d5e3d;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 18px;
}
button:disabled {
  background: #aaa;
  cursor: not-allowed;
}
button:focus, input:focus {
  outline: 2px solid #3d5e3d;
}

/* Quantity control buttons for deck cards */
.quantity-btn {
  min-height: 22px !important;
  height: 22px !important;
  width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000 !important;
  background: #f5f5f5 !important;
  border: 1px solid #ccc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  cursor: pointer !important;
  user-select: none !important;
}

.quantity-btn:hover {
  background: #e0e0e0 !important;
  border-color: #aaa !important;
}

.quantity-btn:active {
  background: #d0d0d0 !important;
  border-color: #999 !important;
}

/* Card grouping and sorting options styles */
.card-group-sort-options {
  background: #fff;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.card-group-sort-options h3 {
  font-size: 14px;
  margin: 0 0 8px 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #333;
}

.card-group-sort-options select {
  margin-bottom: 8px;
  font-size: 12px;
  padding: 6px 8px;
  color: #000 !important; /* Force black text color */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

.card-group-sort-options label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
  display: block;
}

/* Hide large standalone buttons in the Display Options section */
.card-group-sort-options > button:not(.toggle-button),
.card-group-sort-options > .btn-primary {
  display: none !important;
}

/* Card grid layout - vertical columns like Moxfield */
/* List view - single column layout */
.card-type-grid {
  column-count: 1; /* Single column for list view */
  column-gap: 16px;
  width: 100%;
  column-fill: balance;
  padding: 12px;
}

/* For grid view, use 2-column grid layout on mobile */
.card-type-grid.grid-view-mode {
  column-count: unset;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
}

@media (min-width: 769px) {
  .card-type-grid.grid-view-mode {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 12px;
  }
}

@media (min-width: 1201px) {
  .card-type-grid.grid-view-mode {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card sections container - no column layout, let content flow naturally */
.card-sections-container {
  width: 100%;
  /* Removed column-count - stacks handle their own layout */
}

/* Card type section - no container, just logical grouping */
.card-type-section {
  width: 100%;
  break-inside: avoid; /* Prevent column breaks inside sections */
  page-break-inside: avoid; /* For older browsers */
  margin-bottom: 16px; /* Space between sections */
}

/* Card type list - single column for list view on mobile, up to 3 columns on desktop */
.card-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1200px) {
  .card-type-list {
    display: block; /* CSS columns don't work with flexbox */
    column-count: 2;
    column-gap: 16px;
  }
  
  /* Re-add spacing for list items since we removed flex gap */
  .card-type-list > * {
    margin-bottom: 4px;
    break-inside: avoid; /* Prevent items from breaking across columns */
  }
}

/* Desktop: 3 columns */
@media (min-width: 1201px) {
  .card-type-list {
    display: block; /* CSS columns don't work with flexbox */
    column-count: 3;
    column-gap: 16px;
  }
  
  /* Re-add spacing for list items since we removed flex gap */
  .card-type-list > * {
    margin-bottom: 4px;
    break-inside: avoid; /* Prevent items from breaking across columns */
  }
}

/* Grid view mode: 2-column grid layout on mobile */
.grid-view-mode .card-type-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  column-count: unset; /* Override column layout for grid view */
}

@media (min-width: 769px) {
  .grid-view-mode .card-type-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  /* Reset list item margins for grid view */
  .grid-view-mode .card-type-list > * {
    margin-bottom: 0;
  }
}

@media (min-width: 1201px) {
  .grid-view-mode .card-type-list {
    /* Disabled grid columns for desktop - let cards size naturally like stacks */
    /* grid-template-columns: repeat(4, 1fr); */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Card list container for simple list layout */
.card-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Card type containers - styled like Moxfield with proper column breaking */
.card-type-container {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  display: block; /* Changed from flex to block for better column behavior */
  width: 100%;
  box-sizing: border-box;
  height: fit-content;
  break-inside: avoid; /* Prevent column breaks inside containers */
  page-break-inside: avoid; /* For older browsers */
  margin-bottom: 16px; /* Increased space between containers */
  border: 1px solid #f0f0f0; /* Add subtle border for better separation */
  transition: box-shadow 0.2s ease;
  overflow: hidden; /* Prevent content from overflowing container */
}

/* Enhanced styling for grid view card type containers */
.grid-view-mode .card-type-container {
  margin-bottom: 20px; /* More space between groups in grid view */
  border: 1px solid #e0e0e0; /* Slightly more visible border */
  box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Subtle shadow for better separation */
  -webkit-column-break-inside: avoid; /* Safari and Chrome */
}

/* Card type header styling (Moxfield style) */
.card-type-header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

/* Clickable header styling for bulk edit mode */
.card-type-header.clickable-header {
  border-radius: 4px;
  transition: background-color 0.2s ease;
  user-select: none;
}

.card-type-header.clickable-header:hover {
  background-color: rgba(111, 169, 111, 0.08) !important;
  border-bottom-color: #3d5e3d;
}

.card-type-header.clickable-header:active {
  background-color: #e3f2fd;
}

.card-type-name {
  color: #333;
}

.card-type-count {
  color: #666;
  margin-left: 4px;
  font-size: 12px;
}

/* Card type color indicators */
.card-type-header::before {
  content: '';
  width: 4px;
  height: 16px;
  margin-right: 8px;
  background-color: #999; /* Default color */
  border-radius: 2px;
  display: inline-block;
}

/* Type-specific colors */
.card-type-header[data-type="Commander"]::before {
  background-color: #8a5c97; /* Purple for commanders */
}

.card-type-header[data-type="Creature"]::before {
  background-color: #5c8a97; /* Blue-teal for creatures */
}

.card-type-header[data-type="Sorcery"]::before {
  background-color: #a34141; /* Red for sorceries */
}

.card-type-header[data-type="Instant"]::before {
  background-color: #277b8c; /* Blue for instants */
}

.card-type-header[data-type="Artifact"]::before {
  background-color: #7b7b7b; /* Gray for artifacts */
}

.card-type-header[data-type="Enchantment"]::before {
  background-color: #917f28; /* Gold for enchantments */
}

.card-type-header[data-type="Land"]::before {
  background-color: #487b3a; /* Green for lands */
}

/* Mana value and other grouping colors */
.card-type-header[data-type^="0 MV"]::before {
  background-color: #666666; /* Dark gray for 0 mana */
}

.card-type-header[data-type^="1 MV"]::before {
  background-color: #4287f5; /* Blue for 1 mana */
}

.card-type-header[data-type^="2 MV"]::before {
  background-color: #42b0f5; /* Light blue for 2 mana */
}

.card-type-header[data-type^="3 MV"]::before {
  background-color: #42f5e3; /* Teal for 3 mana */
}

.card-type-header[data-type^="4 MV"]::before {
  background-color: #42f59e; /* Green-blue for 4 mana */
}

.card-type-header[data-type^="5 MV"]::before {
  background-color: #5df542; /* Light green for 5 mana */
}

.card-type-header[data-type^="6 MV"]::before {
  background-color: #bff542; /* Yellow-green for 6 mana */
}

.card-type-header[data-type^="7 MV"]::before {
  background-color: #f5da42; /* Yellow for 7 mana */
}

.card-type-header[data-type^="8 MV"]::before,
.card-type-header[data-type^="9 MV"]::before {
  background-color: #f59e42; /* Orange for 8-9 mana */
}

.card-type-header[data-type^="10 MV"]::before,
.card-type-header[data-type^="11 MV"]::before,
.card-type-header[data-type^="12 MV"]::before,
.card-type-header[data-type^="13 MV"]::before,
.card-type-header[data-type^="14 MV"]::before,
.card-type-header[data-type^="15 MV"]::before {
  background-color: #f54242; /* Red for 10+ mana */
}

.card-type-header[data-type="Unknown MV"]::before {
  background-color: #666666; /* Gray for unknown mana value */
}

/* Card list item styling for better readability */
.card-list-item {
  display: flex;
  align-items: flex-start; /* Align to top to allow vertical expansion */
  gap: 6px;
  padding: 2px;
  border-radius: 2px;
  transition: background-color 0.1s;
  width: 100%;
  margin-bottom: 2px;
  min-height: 20px; /* Minimum height but allow expansion */
  box-sizing: border-box;
}

.mana-cost {
  text-align: center;
}

.mana-symbol {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 2px;
  margin-left: 0;
  display: inline-block;
}

.card-list-item:hover {
  background-color: #f5f7fa;
}

/* Card quantity styling */
.card-quantity {
  min-width: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.card-name {
  flex: 1;
  cursor: pointer;
  text-decoration: none;
  color: #3d5e3d;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  /* max-width: 200px; Removed to allow deck rows to control their own width */
  padding: 0;
  transition: color 0.2s;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2; /* Tighter line height for better appearance */
  hyphens: auto; /* Enable automatic hyphenation */
}

.card-name:hover {
  color: #4a6f4a;
  text-decoration: underline;
}

.card-price {
  margin-left: 8px;
  margin-right: 0;
  font-size: 12px;
  color: #47a147;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.card-price.no-price {
  color: #999;
  font-style: italic;
}

.card-price.basic-land-price {
  color: #6a8f6a;
  font-style: normal;
}

.card-price.foil-price {
  color: #222;
  font-weight: 600;
}

/* Digital-only card price */
.card-price.digital-price {
  color: #9c27b0;
  font-style: italic;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05), rgba(156, 39, 176, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Special treatments for promo cards */
.card-price.promo-price {
  color: #ff6d00;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255, 109, 0, 0.05), rgba(255, 109, 0, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Etched finish cards */
.card-price.etched-price {
  color: #795548;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(121, 85, 72, 0.05), rgba(121, 85, 72, 0.05));
  border-radius: 3px;
  padding: 0 3px;
  text-shadow: 0 0 1px rgba(121, 85, 72, 0.3);
}

/* Textured/Boosterfun cards */
.card-price.special-finish-price {
  color: #e91e63;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.05), rgba(233, 30, 99, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Special set types (duel decks, masters sets, etc.) */
.card-price.special-set-price {
  color: #009688;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(0, 150, 136, 0.05), rgba(0, 150, 136, 0.05));
  border-radius: 3px;
  padding: 0 3px;
}

/* Card mana cost styles */
.card-mana-cost {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 1px 4px;
  display: inline-block;
  letter-spacing: 1px;
}

/* Card preview styles - floating preview removed */
/* Only keeping styles for the sidebar preview */

/* Nav styles removed - handled by Navbar component inline styles */

@media (max-width: 600px) {
  form, .container {
    padding: 1rem;
    max-width: 98vw;
    min-width: 0;
  }
  h1, h2 {
    font-size: 1.5rem;
  }
}

/* Toggle buttons for display options */
.toggle-button {
  padding: 6px 12px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 500;
  width: auto;
  display: inline-block;
  border-radius: 4px;
  margin: 0;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggle-button.active {
  background-color: #3d5e3d;
  color: #fff;
}

.toggle-button.inactive {
  background-color: #e0e0e0;
  color: #333;
}

/* Bulk edit button styles */
.bulk-edit-button {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 32px;
  width: 120px;
  margin-bottom: 0;
}

.bulk-edit-button.active {
  background-color: #3d5e3d;
  color: #fff;
  border-color: #4a6f4a;
}

.bulk-edit-button:hover {
  background-color: #e0e0e0;
}

.bulk-edit-button.active:hover {
  background-color: #4a6f4a;
}

/* Dark mode: Bulk Edit button styling */
[data-theme="dark"] .bulk-edit-button {
  background-color: #3d5e3d;
  color: #d4c5a0;
  border: 1px solid #4a6f4a;
}

[data-theme="dark"] .bulk-edit-button:hover {
  background-color: #4a6f4a;
}

[data-theme="dark"] .bulk-edit-button.active {
  background-color: #4a6f4a;
  color: #fff;
  border-color: #5a7f5a;
}

[data-theme="dark"] .bulk-edit-button.active:hover {
  background-color: #5a7f5a;
}

/* Bulk edit action buttons container */
.bulk-actions-container {
  position: sticky;
  top: 365px;
  z-index: 24;
  background: white;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
}

/* Remove padding from bulk edit button container div */
div[style*="background: white"][style*="padding: 8px 0px"][style*="display: flex"][style*="justify-content: center"] {
  padding: 0 !important;
}

/* Bulk select all button styling */
.bulk-select-all-text {
  margin-bottom: 6px !important;
}

.bulk-actions-counter {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  text-align: center;
}

.bulk-actions-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
}

.bulk-action-button {
  border: none;
  border-radius: 3px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  margin: 0;
}

.bulk-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bulk-action-button.collection {
  background-color: #4caf50;
  color: #fff;
}

.bulk-action-button.collection:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.wishlist {
  background-color: #ff9800;
  color: #fff;
}

.bulk-action-button.wishlist:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.sideboard {
  background-color: #9c27b0;
  color: #fff;
}

.bulk-action-button.sideboard:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.tech-ideas {
  background-color: #607d8b;
  color: #fff;
}

.bulk-action-button.tech-ideas:disabled {
  background-color: #e0e0e0;
  color: #999;
}

.bulk-action-button.utility {
  background-color: #6b7280;
  color: white;
}

.bulk-action-button.utility:hover {
  background-color: #4b5563;
}

/* Tooltip styles for card special characteristics */
.card-tooltip {
  position: relative;
  display: inline-block;
}

.card-tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: rgba(51, 51, 51, 0.95);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 11px;
  pointer-events: none;
}

.card-tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(51, 51, 51, 0.95) transparent transparent transparent;
}

.card-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Background pattern for special finish cards */
.card-list-item.special-finish {
  background-image: linear-gradient(45deg, rgba(233, 30, 99, 0.03) 25%, transparent 25%, transparent 50%, rgba(233, 30, 99, 0.03) 50%, rgba(233, 30, 99, 0.03) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

.card-list-item.etched {
  background-image: linear-gradient(45deg, rgba(121, 85, 72, 0.03) 25%, transparent 25%, transparent 50%, rgba(121, 85, 72, 0.03) 50%, rgba(121, 85, 72, 0.03) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

.card-list-item.promo {
  background-image: linear-gradient(45deg, rgba(255, 109, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(255, 109, 0, 0.03) 50%, rgba(255, 109, 0, 0.03) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

/* Enhanced hover effects for special cards */
.card-name.textured:hover, .card-name.boosterfun:hover, 
.card-name.etched:hover, .card-name.promo:hover, 
.card-name.special-set:hover, .card-name.masterpiece:hover {
  text-shadow: 0 0 1px currentColor;
}

/* Modal styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 90%;
  max-width: 500px;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content label {
  margin-top: 1rem;
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.modal-content input[type="date"],
.modal-content input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff; /* Ensure background is white */
  color: #000; /* Ensure text is black */
  font-size: 1rem;
}

.modal-content input[disabled] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.button-group button {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
}

.button-group button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.modal-content .btn {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.modal-content .btn-primary {
    background-color: #007bff;
    color: white;
}

/* ALL FOIL EFFECTS REMOVED */

/* SMOOTH RAINBOW FOIL EFFECT - Matching reference gif */

/* Keep only the basic card preview structure */
.card-preview-container {
  position: relative;
  display: inline-block;
  border-radius: 14px; /* Match the card image border radius */
  overflow: hidden; /* Clip the foil overlay to the rounded corners */
  z-index: 1; /* Normal layering within sidebar context */
}

.card-preview-container img {
  border-radius: 14px;
  position: relative;
  z-index: 1;
  display: block;
}

/* Fresh foil overlay for card previews */
.fresh-foil-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px; /* Match the card image border radius */
  pointer-events: none;
  z-index: 2;
  transform: none !important; /* Disable any scaling to prevent overlay extending beyond card boundaries */
}

/* End of foil effects section */

/* All foil animations removed for testing */

/* Bulk edit checkbox styling */
.bulk-edit-checkbox {
  margin: 0 6px 0 0 !important;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  outline: none !important;
  box-shadow: none !important;
}

.bulk-edit-checkbox:checked {
  background-color: #3d5e3d !important;
  border-color: #3d5e3d !important;
}

.bulk-edit-checkbox:checked::after {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.bulk-edit-checkbox:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove input margins that might affect checkboxes */
input[type="checkbox"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Select All container styling */
.bulk-select-all-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

.bulk-select-all-container input[type="checkbox"] {
  margin-right: 6px !important;
  margin-bottom: 0 !important;
}

/* Ensure all child containers in sidebar don't create scrollbars */
/* .deck-sidebar * {
  overflow: visible !important; DISABLED - causes foil overlays to extend beyond card boundaries
} */

/* ==================================
   THEME-AWARE COMPONENT STYLES
   ================================== */

/* Input elements */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), 
textarea, 
select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

input::placeholder, textarea::placeholder {
  color: var(--text-tertiary);
}

/* Research page specific theming */
[data-research-page="sidebar"] {
  background-color: var(--bg-primary) !important;
}

[data-research-page="list"] {
  background-color: var(--bg-secondary) !important;
}

[data-research-page="detail"] {
  background-color: var(--bg-primary) !important;
}

/* Build page theming */
[data-build-page] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Tables */
table {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

thead {
  background-color: var(--bg-secondary);
}

tbody tr {
  border-color: var(--border-color);
}

tbody tr:hover {
  background-color: var(--hover-bg);
}

/* Modal theming */
[data-research-page="modal"],
[data-build-page="modal"],
.modal,
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Button theming */
[data-research-page="button"],
[data-build-page="button"],
.btn,
button:not(.theme-toggle) {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Empty states and messages */
.empty-state,
.no-results,
.loading-message {
  color: var(--text-secondary);
}

/* Card list items */
.card-list-item,
.deck-card,
[data-research-page="result-card"] {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: background-color 0.3s;
}

.card-list-item:hover,
.deck-card:hover {
  background-color: var(--hover-bg);
}

/* Shopping Cart / Wishlist */
.wishlist-container,
.shopping-cart-container,
[data-page="wishlist"],
[data-page="cart"] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.wishlist-card,
.cart-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.wishlist-header,
.cart-header {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Deck list and build page */
[data-build-page] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.deck-list-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s;
}

.deck-list-item:hover {
  background-color: var(--hover-bg);
  border-color: var(--accent-green);
}

/* Form elements in modals */
.modal input,
.modal textarea,
.modal select,
[data-research-page="modal"] input,
[data-research-page="modal"] textarea,
[data-research-page="modal"] select,
[data-build-page="modal"] input,
[data-build-page="modal"] textarea,
[data-build-page="modal"] select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

/* Scrollbar theming */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

*::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Dividers */
hr {
  border-color: var(--border-color);
}

/* Code/pre blocks */
code,
pre {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
/**
 * Mobile Optimization - Global Styles
 * 
 * Applied only on mobile devices (max-width: 768px)
 * Desktop functionality remains untouched
 */

/* ============================================
   MOBILE-ONLY STYLES (768px and below)
   ============================================ */

@media (max-width: 768px) {
  
  /* ========== BASE LAYOUT ========== */
  * {
    box-sizing: border-box !important;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }

  /* Ensure full width on mobile - but NOT nav */
  #root,
  .container:not(nav),
  .main-container,
  [data-search-modal],
  [data-card-actions-modal] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* ========== TYPOGRAPHY ========== */
  h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  /* ========== HAMBURGER MENU ========== */
  /* Fix mobile menu overlay styling */
  nav > div[style*="position: fixed"] {
    background: linear-gradient(180deg, #2c3e2e 0%, #3d5240 100%) !important;
    width: 100% !important;
    padding: 1rem !important;
  }

  /* Center menu items and remove odd button styling */
  nav > div[style*="position: fixed"] a,
  nav > div[style*="position: fixed"] button {
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* ========== TOUCH TARGETS ========== */
  /* DISABLED - User prefers component-level sizing */
  /* 
  button:not([aria-label="Menu"]):not([data-view-mode]):not([data-modal]):not(.close-button):not([data-search-helper]),
  a.btn:not([data-modal]),
  input[type="button"]:not([data-modal]),
  input[type="submit"]:not([data-modal]),
  .button:not([data-modal]),
  .btn:not([data-modal]) {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    font-size: 16px;
  }
  
  select:not([data-modal]) {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 14px;
  }
  */

  /* ========== FORMS ========== */
  /* Only prevent zoom on iOS - exempt modal search inputs */
  input:not([data-deck-view-search]),
  textarea:not([data-deck-view-search]),
  select:not([data-deck-view-search]) {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Touch-friendly form inputs - but NOT search modal */
  input:not([data-deck-view-search]):not([data-modal]),
  textarea:not([data-deck-view-search]):not([data-modal]),
  select:not([data-deck-view-search]):not([data-modal]) {
    min-height: 44px;
    padding: 10px;
  }

  /* ========== DECK VIEW - GLOBAL MOBILE STYLES ========== */
  /* Hide sticky deck stats bar at bottom on mobile */
  .deck-stats-sticky-bar {
    display: none !important;
  }

  /* Remove bottom padding from deck container */
  .deck-container {
    padding-bottom: 0 !important;
  }

  /* ========== MODALS ========== */
  /* CardActionsModal now handles its own mobile styles via CSS modules */
  /* Removed global modal overrides that were causing conflicts */

  /* CardActionsModal mobile overrides moved to CardActionsModal.module.css */

  /* ========== TABLES ========== */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== CARD GRIDS ========== */
  .card-grid,
  .grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Make card images more compact on mobile */
  .card-grid img,
  .grid img,
  [class*="CardGrid"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reduce card padding/spacing in list view */
  [class*="cardRow"],
  [class*="card-row"] {
    padding: 8px !important;
    gap: 8px !important;
  }

  /* ========== FLEXBOX LAYOUTS ========== */
  /* Stack flex items on mobile ONLY for specific containers */
  .mobile-stack,
  [data-mobile-stack="true"] {
    flex-direction: column !important;
  }

  /* ========== SPACING ========== */
  /* Reduce spacing on mobile */
  .mt-4, .my-4 { margin-top: 1rem !important; }
  .mb-4, .my-4 { margin-bottom: 1rem !important; }
  .pt-4, .py-4 { padding-top: 1rem !important; }
  .pb-4, .py-4 { padding-bottom: 1rem !important; }

  /* ========== SCROLLING ========== */
  /* Smooth scrolling for overflows */
  * {
    -webkit-overflow-scrolling: touch !important;
  }

  /* ========== IMAGES ========== */
  img:not(nav img):not([alt="Constant Lists"]) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========== PREVENT TEXT SELECTION ON DRAG ========== */
  /* Makes drag-and-drop feel more native */
  [draggable="true"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* ========== DECK VIEW - GLOBAL MOBILE STYLES ========== */
  /* Compact deck title bar */
  .deck-title-bar {
    padding: 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .deck-title-bar input[type="text"] {
    font-size: 1.25rem !important;
    max-width: 100% !important;
  }

  /* UNFREEZE bottom stats bar on mobile - let it scroll naturally */
  .deck-main-content > div[style*="position: sticky"],
  .deck-main-content > div[style*="position: fixed"] {
    position: relative !important;
    bottom: auto !important;
  }

  /* Hide card printing artwork comparison on mobile */
  .deck-main-content > div > div[style*="gridTemplateColumns"] {
    display: none !important;
  }

  /* CardActionsModal mobile overrides moved to CardActionsModal.module.css */

  /* ========== BUILD PAGE DECK CARDS ========== */
  /* Force all deck metadata on one line */
  .deck-table-row {
    padding: 0.75rem 0.5rem !important;
  }

  .deck-table-row > div {
    white-space: nowrap !important;
  }

  /* ========== HIDE DESKTOP-ONLY ELEMENTS ========== */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

/* ============================================
   TABLET STYLES (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 15px !important;
  }

  /* Reduce columns on tablet */
  .card-grid,
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   MOBILE LANDSCAPE (max-height: 500px)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce header sizes in landscape */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  
  /* Reduce padding to maximize content area */
  .container {
    padding: 5px !important;
  }
  
  /* Make modals scrollable in landscape */
  .modal {
    max-height: 85vh !important;
  }
}
/* AuthForm Component Styles - Constant Lists Theme */

._authForm_ddtl8_3 {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(61, 94, 61, 0.15);
  border: 2px solid rgba(111, 169, 111, 0.3);
  backdrop-filter: blur(10px);
}

._authForm_ddtl8_3 h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #2d3e2d;
  font-weight: 600;
}

._formGroup_ddtl8_21 {
  margin-bottom: 1rem;
}

._formGroup_ddtl8_21 label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333333;
}

._formGroup_ddtl8_21 input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

._formGroup_ddtl8_21 input:focus {
  outline: none;
  border-color: #6fa96f;
  box-shadow: 0 0 0 3px rgba(111, 169, 111, 0.15);
}

._formGroup_ddtl8_21 input::placeholder {
  color: #999;
  opacity: 1;
}

._authButton_ddtl8_55 {
  width: 100%;
  padding: 0.75rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(61, 94, 61, 0.2);
}

._authButton_ddtl8_55:hover {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 94, 61, 0.3);
}

._authButton_ddtl8_55:disabled {
  background: #a8b5a8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

._errorMessage_ddtl8_82 {
  color: #dc3545;
  font-size: 14px;
  margin-bottom: 1rem;
  text-align: center;
}

._successMessage_ddtl8_89 {
  color: #28a745;
  font-size: 14px;
  margin-bottom: 1rem;
  text-align: center;
}

._authLink_ddtl8_96 {
  text-align: center;
  margin-top: 1rem;
}

._authLink_ddtl8_96 a {
  color: #3d5e3d;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

._authLink_ddtl8_96 a:hover {
  color: #4a6f4a;
  text-decoration: underline;
}

._loadingSpinner_ddtl8_113 {
  text-align: center;
  margin: 1rem 0;
}

._passwordStrength_ddtl8_118 {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 500;
}

._passwordStrength_ddtl8_118._weak_ddtl8_124 {
  color: #dc3545;
}

._passwordStrength_ddtl8_118._medium_ddtl8_128 {
  color: #fd7e14;
}

._passwordStrength_ddtl8_118._strong_ddtl8_132 {
  color: #28a745;
}

._passwordRequirements_ddtl8_136 {
  font-size: 12px;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: rgba(111, 169, 111, 0.08);
  border: 1px solid rgba(111, 169, 111, 0.2);
  border-radius: 8px;
}

._requirement_ddtl8_145 {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

._requirement_ddtl8_145:last-child {
  margin-bottom: 0;
}

._requirement_ddtl8_145._met_ddtl8_156 {
  color: #28a745;
}

._requirement_ddtl8_145._unmet_ddtl8_160 {
  color: #666666;
}

._checkmark_ddtl8_164 {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 6px;
  font-weight: bold;
}

._passwordMatch_ddtl8_172 {
  font-size: 12px;
  margin-bottom: 1rem;
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Oracle Tags Integration Styles */

._oracleTagsIntegration_14xxl_3 {
  margin: 10px 0 20px 0; /* Set top margin to 10px, keep bottom margin */
  padding: 16px;
  background-color: rgb(15, 26, 15);
  border-radius: 12px;
  border: 2px solid #2d4a2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  /* Remove fixed height and overflow to let parent handle scrolling */
  display: flex;
  flex-direction: column;
  /* Prevent any layout reflow that could affect parent containers */
  contain: layout style !important;
  /* Lock position to prevent shifting */
  position: relative !important;
}

/* Hide scrollbar for WebKit browsers */
._oracleTagsIntegration_14xxl_3::-webkit-scrollbar {
  display: none;
}

._oracleTagsIntegration_14xxl_3._loading_14xxl_25,
._oracleTagsIntegration_14xxl_3._error_14xxl_26,
._oracleTagsIntegration_14xxl_3._noTags_14xxl_27 {
  text-align: center;
  padding: 24px 16px;
}

._oracleTagsHeader_14xxl_32 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0; /* Removed bottom margin */
  flex-shrink: 0; /* Prevent header from shrinking */
  position: sticky;
  top: 0;
  background: transparent; /* Remove background to match main content */
  z-index: 1;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

._oracleTagsHeader_14xxl_32 ._oracleTagsTitle_14xxl_46 {
  color: #ffffff !important; /* White color for better visibility against gradient */
}

._oracleTagsHeader_14xxl_32 ._oracleTagsIcon_14xxl_50 {
  color: #ffffff !important; /* White color for better visibility against gradient */
}

._oracleTagsIcon_14xxl_50 {
  font-size: 18px;
  color: #fbbf24; /* Gold/yellow for the lightning bolt */
}

._oracleTagsTitle_14xxl_46 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9; /* Light color for title against dark background */
}

._oracleTagsContent_14xxl_65 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
  flex: 1; /* Take up remaining space */
  overflow-y: auto; /* Allow scrolling within content area */
  min-height: 0; /* Allow content to shrink below its natural size */
  /* Hide scrollbar for WebKit browsers */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for WebKit browsers */
._oracleTagsContent_14xxl_65::-webkit-scrollbar {
  display: none;
}

._oracleTagsIntegration_14xxl_3::-webkit-scrollbar-track,
._oracleTagsContent_14xxl_65::-webkit-scrollbar-track {
  background: rgba(203, 213, 225, 0.3);
  border-radius: 3px;
}

._oracleTagsIntegration_14xxl_3::-webkit-scrollbar-thumb,
._oracleTagsContent_14xxl_65::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

._oracleTagsIntegration_14xxl_3::-webkit-scrollbar-thumb:hover,
._oracleTagsContent_14xxl_65::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}

._oracleTagsColumn_14xxl_101 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Prevent column overflow */
}

._oracleTagsCategory_14xxl_108 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  break-inside: avoid; /* Prevent category breaks across columns */
}

._categoryHeader_14xxl_115 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

._categoryName_14xxl_122 {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._categoryCount_14xxl_130 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

._oracleTagsList_14xxl_136 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

._oracleTag_14xxl_3 {
  background: var(--tag-bg, #f1f5f9);
  border: 1.5px solid var(--tag-border, #64748b);
  color: var(--tag-text, #334155);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  min-height: 26px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

._oracleTag_14xxl_3:hover {
  /* AGGRESSIVE LAYOUT FIX: Minimal hover effects to prevent any layout shifts */
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  /* Removed all box-shadow and opacity changes that might cause reflow */
}

._oracleTag_14xxl_3:active {
  /* AGGRESSIVE LAYOUT FIX: No active state changes to prevent click issues */
  filter: brightness(0.95);
  transform: translateY(0);
}

/* AGGRESSIVE CLICK FIX: Ensure buttons always capture pointer events */
._oracleTag_14xxl_3 {
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Ensure button doesn't shift during interaction */
  position: relative !important;
  will-change: auto !important;
  /* Prevent any layout reflow during interaction */
  contain: layout style !important;
  /* Ensure stable height */
  min-height: 24px !important;
  max-height: 24px !important;
  /* Disable user selection to prevent text selection interfering with clicks */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

._oracleTagsFooter_14xxl_194 {
  margin-top: 0; /* Removed top margin */
  text-align: center;
  border-top: 1px solid #475569;
  padding-top: 12px;
  flex-shrink: 0; /* Prevent footer from shrinking */
  background: transparent; /* Remove background to match main content */
  position: sticky;
  bottom: 0;
}

._searchHint_14xxl_205 {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* Loading states */
._loadingSpinner_14xxl_212 {
  margin: 16px auto;
  width: 24px;
  height: 24px;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: _spin_14xxl_1 1s linear infinite;
}

@keyframes _spin_14xxl_1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

._errorMessage_14xxl_227 {
  color: #dc2626;
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

._noTagsMessage_14xxl_237 {
  color: #64748b;
  font-size: 12px;
  margin-top: 8px;
  font-style: italic;
}

/* Responsive design */
@media (max-width: 768px) {
  ._oracleTagsIntegration_14xxl_3 {
    margin: 16px 0;
    padding: 12px;
    max-height: 250px; /* Smaller max height on mobile */
  }
  
  ._oracleTagsContent_14xxl_65 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  ._oracleTagsList_14xxl_136 {
    gap: 4px;
  }
  
  ._oracleTag_14xxl_3 {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 20px;
  }
  
  ._oracleTagsTitle_14xxl_46 {
    font-size: 14px;
  }
}

/* Dark mode support (if your app uses it) */
@media (prefers-color-scheme: dark) {
  ._oracleTagsIntegration_14xxl_3 {
    background-color: rgb(15, 26, 15);
    border-color: #475569;
  }
  
  ._oracleTagsTitle_14xxl_46 {
    color: #f1f5f9;
  }
  
  ._categoryName_14xxl_122 {
    color: #94a3b8;
  }
  
  ._categoryCount_14xxl_130 {
    color: #64748b;
  }
  
  ._searchHint_14xxl_205 {
    color: #94a3b8;
  }
  
  ._oracleTagsFooter_14xxl_194 {
    border-top-color: #475569;
  }
}

/* Tag appearance - no animation to prevent layout shift */
._oracleTag_14xxl_3 {
  /* Animation removed to prevent background image resizing */
}

/* Hover effects for categories */
._oracleTagsCategory_14xxl_108:hover ._categoryName_14xxl_122 {
  color: #475569;
  transition: color 0.2s ease;
}

/* Focus states for accessibility */
._oracleTag_14xxl_3:focus {
  outline: 2px solid var(--tag-border, #64748b);
  outline-offset: 2px;
}

/* Loading state variations */
._oracleTagsIntegration_14xxl_3._loading_14xxl_25 ._oracleTagsHeader_14xxl_32 {
  opacity: 0.7;
}

._oracleTagsIntegration_14xxl_3._error_14xxl_26 ._oracleTagsHeader_14xxl_32 {
  color: #dc2626;
}

._oracleTagsIntegration_14xxl_3._noTags_14xxl_27 ._oracleTagsHeader_14xxl_32 {
  opacity: 0.8;
}
/* Override parent flex container that forces column layout */
._contentContainer_khk4j_2:has(._tradePageContainer_khk4j_2) {
  display: block !important;
  align-items: stretch !important;
}

/* Trade page layout - Constant Mists Theme */
._tradePageContainer_khk4j_2 {
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
  background: #ffffff;
  display: block !important;
}

._tradePageContent_khk4j_16 {
  position: relative;
  max-width: 1800px !important;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 40px;
  display: block !important;
  box-sizing: border-box;
}

._tradePageHeader_khk4j_26 {
  margin-bottom: 40px;
}

._tradePageHeader_khk4j_26 h1 {
  color: #1a202c;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

._createTradeBtn_khk4j_38 {
  background: #3d5e3d;
  color: white;
  border: 1px solid rgba(111, 169, 111, 0.3);
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

._createTradeBtn_khk4j_38:hover {
  background: #4a6f4a;
}

/* Trade status sections */
._tradeStatusSection_khk4j_55 {
  margin-bottom: 50px;
  width: 100% !important;
  display: block !important;
}

._statusHeader_khk4j_61 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #cbd5e0;
}

._statusHeader_khk4j_61 h2 {
  color: #1a202c;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

._statusBadge_khk4j_77 {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._statusBadge_khk4j_77._proposed_khk4j_86 {
  background-color: rgba(203, 213, 224, 0.4);
  color: #4a5568;
  border: 1px solid rgba(74, 85, 104, 0.3);
}

._statusBadge_khk4j_77._inProgress_khk4j_92 {
  background-color: rgba(237, 242, 247, 0.6);
  color: #2d3748;
  border: 1px solid rgba(45, 55, 72, 0.3);
}

._statusBadge_khk4j_77._completed_khk4j_98 {
  background-color: rgba(26, 32, 44, 0.1);
  color: #1a202c;
  border: 1px solid rgba(26, 32, 44, 0.3);
}

/* Trade cards grid - side by side layout */
._tradesGrid_khk4j_105 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 280px)) !important;
  gap: 20px;
  width: 100% !important;
  grid-auto-flow: row;
  justify-content: start;
}

/* Drag and drop styles */
._tradeCard_khk4j_115._dragging_khk4j_115 {
  opacity: 0.5;
  cursor: grabbing;
}

._tradeStatusSection_khk4j_55._dragOver_khk4j_120 {
  background-color: rgba(61, 94, 61, 0.05);
  border-radius: 8px;
}

/* Individual trade card */
._tradeCard_khk4j_115 {
  background: #ffffff;
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(74, 85, 104, 0.15);
}

._tradeCard_khk4j_115:hover {
  transform: translateY(-4px);
  border-color: #4a5568;
  box-shadow: 0 6px 16px rgba(45, 55, 72, 0.25);
}

/* Delete button - top right corner */
._tradeDeleteBtn_khk4j_144 {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 100;
  opacity: 0.4;
  line-height: 1;
  width: auto;
  min-width: auto;
}

._tradeDeleteBtn_khk4j_144:hover {
  opacity: 1;
  transform: scale(1.15);
}

._tradeCardHeader_khk4j_166 {
  margin-bottom: 12px;
  padding-right: 35px; /* More space for delete button */
}

._tradeName_khk4j_171 {
  color: #1a202c;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._tradeDate_khk4j_181 {
  display: none; /* Hidden per user request */
}

/* Compact trade details box */
._tradeDetails_khk4j_186 {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 5px;
  border: 1px solid #cbd5e0;
}

._tradeParticipant_khk4j_195 {
  flex: 1;
  text-align: center;
}

._participantName_khk4j_200 {
  color: #2d3748;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._participantCards_khk4j_210 {
  color: #4a5568;
  font-size: 10px;
  font-weight: 500;
}

._participantCards_khk4j_210 strong {
  color: #1a202c;
  font-size: 13px;
}

._tradeDivider_khk4j_221 {
  width: 1px;
  background: #a0aec0;
  margin: 0 8px;
}

/* Empty state */
._emptyState_khk4j_228 {
  text-align: center;
  padding: 50px 20px;
  color: #4a5568;
  font-style: italic;
  font-size: 14px;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 8px;
  border: 2px dashed #a0aec0;
}

/* Responsive */
@media (max-width: 768px) {
  ._tradePageContainer_khk4j_2 {
    padding: 20px 12px;
  }

  ._tradePageHeader_khk4j_26 h1 {
    font-size: 2rem;
  }

  ._tradesGrid_khk4j_105 {
    grid-template-columns: 1fr;
  }
}
._cardPreviewContainer_10o69_1 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 242px; /* Match sidebar width */
  aspect-ratio: 5 / 7; /* MTG card aspect ratio */
  z-index: 1; /* Normal layering within sidebar context */
  border-radius: 14px; /* Fixed pixel value for consistent corner coverage */
  overflow: hidden; /* Clip image to rounded corners */
  background-color: #1a1a1a; /* Dark background fills any gaps */
}

._cardPreviewImage_10o69_13 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill container while maintaining aspect ratio */
  border-radius: 14px; /* Match container */
  transform: scale(1.02); /* Slight scale to fully cover corners */
  display: block;
}

._freshFoilOverlay_10o69_25 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.5) 0%,
    rgba(255, 154, 0, 0.5) 10%,
    rgba(208, 222, 33, 0.5) 20%,
    rgba(79, 220, 74, 0.5) 30%,
    rgba(63, 218, 216, 0.5) 40%,
    rgba(47, 201, 226, 0.5) 50%,
    rgba(28, 127, 238, 0.5) 60%,
    rgba(95, 21, 242, 0.5) 70%,
    rgba(186, 12, 248, 0.5) 80%,
    rgba(251, 7, 217, 0.5) 90%,
    rgba(255, 0, 0, 0.5) 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  animation: _foil-shimmer_10o69_1 3s linear infinite;
}

@keyframes _foil-shimmer_10o69_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._fixedPreview_10o69_65 {
  /* position: fixed; */
  z-index: 1000;
  pointer-events: none;
}

/* Debug styles removed - FOIL text overlay no longer needed */
._tradeProgressTracker_15qp5_1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  flex-shrink: 0;
}

._progressStep_15qp5_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 6px 16px;
  border-radius: 6px;
  border: 2px solid var(--step-color);
  background-color: white;
  min-width: 120px;
  height: 36px;
}

/* Proposed - Red */
._progressStep_15qp5_9:nth-child(1) {
  --step-color: #dc3545;
}

/* In Progress - Yellow */
._progressStep_15qp5_9:nth-child(2) {
  --step-color: #ffc107;
}

/* Completed - Green */
._progressStep_15qp5_9:nth-child(3) {
  --step-color: #28a745;
}

/* Active state - filled with color */
._progressStep_15qp5_9._active_15qp5_40 {
  background-color: var(--step-color);
}

._progressStep_15qp5_9._active_15qp5_40 ._stepLabel_15qp5_44 {
  color: white;
}

/* Completed state - also filled */
._progressStep_15qp5_9._completed_15qp5_49 {
  background-color: var(--step-color);
}

._progressStep_15qp5_9._completed_15qp5_49 ._stepLabel_15qp5_44 {
  color: white;
}

/* Inactive/future steps - white background with border */
._progressStep_15qp5_9:not(._active_15qp5_40):not(._completed_15qp5_49) {
  opacity: 0.6;
}

._progressStep_15qp5_9:not(._active_15qp5_40):not(._completed_15qp5_49) ._stepLabel_15qp5_44 {
  color: #000;
}

._progressStep_15qp5_9:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._stepLabel_15qp5_44 {
  font-size: 13px;
  white-space: nowrap;
  font-weight: 700;
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  ._tradeProgressTracker_15qp5_1 {
    height: 50px;
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }

  ._progressStep_15qp5_9 {
    min-width: 0;
    padding: 0 12px;
  }

  ._stepNumber_15qp5_93 {
    font-size: 14px;
  }

  ._stepLabel_15qp5_44 {
    font-size: 12px;
  }
}
/* Trade Management Page Styles */
._tradeManagementContainer_1rmdo_2 {
  padding: 20px;
  max-width: 100%;
  min-height: 100vh;
}

._tradeManagementContainer_1rmdo_2 ._container_1rmdo_8 {
  background: transparent;
}

._tradeManagementContainer_1rmdo_2 h1 {
  color: #1a202c;
}

._backLink_1rmdo_16 {
  color: #6c757d;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all 0.2s ease;
}

._backLink_1rmdo_16:hover {
  color: #007bff;
  border-bottom-color: #007bff;
}

/* Legacy styles for existing functionality */
._tradeColumns_1rmdo_31 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
}

._tradeColumn_1rmdo_31 {
  flex: 1;
  border: 2px solid #4a5568;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._cardItem_1rmdo_47 {
  padding: 12px;
  margin-bottom: 8px;
  background-color: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._cardItem_1rmdo_47:hover {
  border-color: #4a5568;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

._columnActions_1rmdo_63, ._tradeActions_1rmdo_63 {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

._statusPending_1rmdo_69 {
  color: orange;
  font-weight: bold;
}

._statusConfirmed_1rmdo_74 {
  color: green;
  font-weight: bold;
}

._btnDanger_1rmdo_79 {
    background-color: #dc3545;
    color: white;
}

/* NEW: Enhanced Trade Card Modal Styles */
._tradeCardModal_1rmdo_85 {
  max-width: 600px !important;
  max-height: 80vh !important;
}

._tradeCardModal_1rmdo_85 ._modalHeader_1rmdo_90 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

._tradeCardModal_1rmdo_85 ._closeButton_1rmdo_99 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._tradeCardModal_1rmdo_85 ._closeButton_1rmdo_99:hover {
  color: #333;
}

._tradeCardModal_1rmdo_85 ._formGroup_1rmdo_117 {
  margin-bottom: 15px;
}

._tradeCardModal_1rmdo_85 ._formGroup_1rmdo_117 label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

._tradeCardModal_1rmdo_85 ._formGroup_1rmdo_117 input[type="checkbox"] {
  margin-right: 8px;
}

/* Search Container Styles */
._searchContainer_1rmdo_133 {
  position: relative;
}

._searchDropdown_1rmdo_137 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 2px solid #4a5568;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

._searchDropdownItem_1rmdo_152 {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}

._searchDropdownItem_1rmdo_152:last-child {
  border-bottom: none;
}

._searchDropdownItem_1rmdo_152:hover,
._searchDropdownItem_1rmdo_152._selected_1rmdo_164 {
  background-color: #f8f9fa;
}

._searchDropdownItem_1rmdo_152 ._cardName_1rmdo_168 {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

._searchDropdownItem_1rmdo_152 ._cardDetails_1rmdo_174 {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

/* User Column Styles */
._userColumn_1rmdo_181 {
  display: flex;
  flex-direction: column;
  border: 2px solid #4a5568;
  border-radius: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._userNameHeader_1rmdo_191 {
  margin-bottom: 15px;
}

._userNameInput_1rmdo_195 {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
}

._userNameDisplay_1rmdo_204 {
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
  color: #1a202c;
  font-size: 1.3rem;
  padding-bottom: 12px;
  border-bottom: 2px solid #4a5568;
}

._userNameDisplay_1rmdo_204:hover {
  color: #2d3748;
}

/* Card List Styles */
._cardList_1rmdo_222 {
  flex: 1;
  min-height: 400px;
  margin-bottom: 20px;
}

._cardListItem_1rmdo_228 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._cardListItem_1rmdo_228:hover {
  background-color: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

._cardListItemInfo_1rmdo_247 ._cardName_1rmdo_168 {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

._cardListItemInfo_1rmdo_247 ._cardDetails_1rmdo_174 {
  font-size: 12px;
  color: #666;
  display: flex;
  gap: 12px;
}

._cardListItemRemove_1rmdo_260 {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

._cardListItemRemove_1rmdo_260:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

._emptyState_1rmdo_275 {
  color: #666;
  font-style: italic;
  text-align: center;
  margin-top: 50px;
  padding: 20px;
}

._userTotal_1rmdo_283 {
  border-top: 2px solid #ddd;
  padding-top: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

/* Trade Actions Styles */
._tradeActions_1rmdo_63 {
  margin-top: 30px;
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top: 25px;
}

._tradeDifference_1rmdo_300 {
  margin-bottom: 15px;
  font-size: 16px;
}

._tradeDifference_1rmdo_300 ._differenceAmount_1rmdo_305 {
  font-weight: bold;
}

._tradeDifference_1rmdo_300._positive_1rmdo_309 {
  color: #28a745;
}

._tradeDifference_1rmdo_300._negative_1rmdo_313 {
  color: #dc3545;
}

._tradeDifference_1rmdo_300._balanced_1rmdo_317 {
  color: #6c757d;
}

/* Preview Container Styles */
._previewContainer_1rmdo_322 {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #f9f9f9;
  margin-bottom: 20px;
  min-height: 300px;
}

._previewContainer_1rmdo_322 h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

._previewPlaceholder_1rmdo_337 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* ============================================
   MOBILE RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  /* Stack layout vertically on mobile */
  ._tradeLayout_1rmdo_353 {
    flex-direction: column !important;
  }
  
  /* Full width preview on mobile */
  ._tradePreviewColumn_1rmdo_358 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px;
    position: sticky !important;
    top: 60px !important;
    z-index: 100 !important;
  }
  
  /* Full width user columns */
  ._userColumn_1rmdo_181 {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Reduce padding on mobile */
  ._tradeManagementContainer_1rmdo_2 {
    padding: 10px !important;
  }

  ._tradeColumn_1rmdo_31 {
    padding: 15px !important;
  }

  /* Make card rows more touch-friendly */
  ._cardRow_1rmdo_384 {
    padding: 12px 8px !important;
    min-height: 50px !important;
  }

  /* Larger, more touch-friendly buttons */
  ._cardRow_1rmdo_384 button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }

  /* Stack card info vertically if needed */
  ._cardRow_1rmdo_384 > div {
    flex-wrap: wrap !important;
  }

  /* Make card name more prominent on mobile */
  ._cardName_1rmdo_168 {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Adjust dropdown width for mobile */
  ._printingDropdown_1rmdo_408 {
    left: 5px !important;
    right: 5px !important;
    width: calc(100vw - 10px) !important;
    max-width: none !important;
  }

  /* Mobile-friendly search */
  ._searchBar_1rmdo_416 {
    width: 100% !important;
  }

  /* Stack buttons vertically on mobile */
  ._buttonGroup_1rmdo_421 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  ._buttonGroup_1rmdo_421 button {
    width: 100% !important;
  }

  /* Hide or minimize less important info on mobile */
  ._collectorNumber_1rmdo_431 {
    display: none !important;
  }

  /* Make drag handles more visible on mobile */
  [draggable="true"] {
    cursor: grab !important;
    touch-action: none !important;
  }

  [draggable="true"]:active {
    cursor: grabbing !important;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  ._tradeLayout_1rmdo_353 {
    flex-direction: column !important;
  }

  ._tradePreviewColumn_1rmdo_358 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* Mobile landscape */
@media (max-width: 900px) and (orientation: landscape) {
  ._tradePreviewColumn_1rmdo_358 {
    width: 40% !important;
  }

  ._userColumn_1rmdo_181 {
    width: 48% !important;
  }

  ._tradeLayout_1rmdo_353 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

/* Loading States */
._loadingSpinner_1rmdo_475 {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: _spin_1rmdo_1 1s linear infinite;
}

@keyframes _spin_1rmdo_1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Button Styles */
._btn_1rmdo_79 {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

._btnPrimary_1rmdo_502 {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

._btnPrimary_1rmdo_502:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

._btnSecondary_1rmdo_513 {
  background-color: #6c757d;
  color: white;
  border-color: #6c757d;
}

._btnSecondary_1rmdo_513:hover {
  background-color: #545b62;
  border-color: #545b62;
}

._btnSuccess_1rmdo_524 {
  background-color: #28a745;
  color: white;
  border-color: #28a745;
}

._btnSuccess_1rmdo_524:hover {
  background-color: #1e7e34;
  border-color: #1e7e34;
}

/* Foil Indicator */
._foilIndicator_1rmdo_536 {
  color: #ffd700;
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
}

/* Card Row Styles */
._cardRow_1rmdo_384 {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  cursor: grab;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 4px;
  padding: 0;
  outline: none;
  gap: 8px;
}

._cardRow_1rmdo_384:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

._cardRowActive_1rmdo_560 {
  border: 1px solid #4a5568 !important;
  background-color: #f5f5f5 !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 2px !important;
  outline: 2px solid #4a5568 !important;
  outline-offset: 1px !important;
}

._cardName_1rmdo_168 {
  font-weight: bold;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: block;
  padding: 4px 0;
  user-select: none;
  transition: color 0.2s ease;
}

._cardName_1rmdo_168:hover {
  color: #4a5568 !important;
  text-decoration: underline;
}

._cardNameFoil_1rmdo_587 {
  color: #d4af37;
}

._cardNameNormal_1rmdo_591 {
  color: #333;
}

._printingDropdown_1rmdo_408 {
  position: fixed;
  background-color: white;
  border: 1px solid #007bff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
}

/* Hide scrollbars for trade containers */
._tradeContainerUser1_1rmdo_607::-webkit-scrollbar,
._tradeContainerUser2_1rmdo_608::-webkit-scrollbar {
  display: none;
}

._tradeContainerUser1_1rmdo_607::-webkit-scrollbar-track,
._tradeContainerUser2_1rmdo_608::-webkit-scrollbar-track {
  background: transparent;
}

._tradeContainerUser1_1rmdo_607::-webkit-scrollbar-thumb,
._tradeContainerUser2_1rmdo_608::-webkit-scrollbar-thumb {
  background: transparent;
}
._modalBackdrop_dp9vk_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99998; /* High z-index like search modal */
    overflow-y: auto; /* Allow scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

._cardActionsModal_dp9vk_16 {
    /* Container class for the modal */
}

._modalContent_dp9vk_20 {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 95%;
    max-width: 1000px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    margin: auto; /* Center in viewport */
}

@media (max-width: 768px) {
    ._modalContent_dp9vk_20 {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 8px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

._modalHeader_dp9vk_47 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Prevent card name from wrapping but don't truncate with ellipsis */
._cardNameTitle_dp9vk_56 {
    white-space: nowrap;
    margin: 0;
    max-width: calc(100% - 40px); /* Leave room for close button */
    font-size: 1.4rem;
    font-weight: 600;
}

._closeButton_dp9vk_64 {
    position: absolute;
    top: -18px;
    right: -18px;
    background: #fff;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #666;
    z-index: 1100;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
    line-height: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    vertical-align: baseline;
}

._closeButton_dp9vk_64:hover {
    background-color: #f8f9fa;
    color: #333;
}

/* Navigation arrow buttons - positioned outside modal */
._navArrowExternal_dp9vk_100 {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: #3d5e3d;
    border: 2px solid rgba(111, 169, 111, 0.3);
    font-size: 2.5rem;
    cursor: pointer;
    color: white;
    z-index: 1060;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 600;
    line-height: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    vertical-align: baseline;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._navArrowLeft_dp9vk_131 {
    left: 20px;
}

._navArrowRight_dp9vk_135 {
    right: 20px;
}

._navArrowExternal_dp9vk_100:hover {
    background-color: #4a6f4a;
    border-color: #6fa96f;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

._navArrowExternal_dp9vk_100:active {
    transform: translateY(-50%) scale(0.95);
    background-color: #2d4a2d;
}

/* Modal header for navigation arrows - positioned relative to modal content */
._modalHeader_dp9vk_47 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to modal content */
    z-index: 1000;
}

/* Allow navigation arrows to receive pointer events */
._modalHeader_dp9vk_47 ._navArrow_dp9vk_100 {
    pointer-events: auto;
}

._modalBody_dp9vk_167 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow: hidden; /* Prevent modal body from scrolling - children handle their own scrolling */
    flex: 1; /* Take available space */
    min-height: 0; /* Important: allows flex items to shrink below content size */
}

._printingsGrid_dp9vk_176 {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout to prevent cutoff */
    gap: 12px;
    padding-right: 10px;
    align-content: flex-start;
}

._printingsGrid_dp9vk_176 img {
    width: 100% !important;
    cursor: pointer;
    border: none !important; /* Remove border completely to prevent any sizing issues */
    transition: outline-color 0.2s;
    /* Removed border-radius to fix rounded blue corners */
    /* Override global box-sizing to fix layout issues */
    box-sizing: content-box !important;
}

/* Additional more specific selector to ensure override */
._printingsGrid_dp9vk_176 img {
    box-sizing: content-box !important;
    border: none !important;
    width: 100% !important;
}

._printingItem_dp9vk_201 {
    transition: transform 0.2s ease;
}

._printingItem_dp9vk_201:hover {
    transform: scale(1.05);
    z-index: 5;
}

._printingsGrid_dp9vk_176 ._printingItem_dp9vk_201._selected_dp9vk_210 img {
    outline: 2px solid #000000; /* Black outline instead of blue */
    outline-offset: -2px; /* Keep outline inside the element bounds */
    /* Removed box-shadow to eliminate drop shadow */
}

/* Prevent the blue outline from affecting current printing info area */
._currentPrintingInfo_dp9vk_217._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218._selected_dp9vk_210,
._currentPrintingInfo_dp9vk_217 img,
._currentPrintingContainer_dp9vk_218 img,
._currentPrintingInfo_dp9vk_217 img._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218 img._selected_dp9vk_210 {
    outline: none !important;
    box-shadow: none !important;
}

._cardActions_dp9vk_16 {
    flex: 0 0 360px; /* Fixed width column */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 360px;
    max-width: 360px;
    /* Force specific height to enable scrolling */
    height: calc(90vh - 80px); /* Account for modal padding and header */
    max-height: calc(90vh - 80px);
    overflow-y: scroll; /* Scrolling - can be overridden by mobile */
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* Show scrollbar for better UX */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox - show thin scrollbar */
    border-bottom: 1px solid #ddd; /* Added bottom border to left column */
    padding-right: 8px; /* Add padding to prevent content from touching edge */
}

/* Style scrollbar for WebKit browsers */
._cardActions_dp9vk_16::-webkit-scrollbar {
    width: 8px;
}

._cardActions_dp9vk_16::-webkit-scrollbar-track {
    background: #f1f1f1;
}

._cardActions_dp9vk_16::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

._cardActions_dp9vk_16::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* New printings section styles */
._printingsSection_dp9vk_265 {
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

._printingsSection_dp9vk_265 h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

._printingsList_dp9vk_278 {
    flex: 1; /* Take remaining space to align bottom with right-hand div */
    min-height: 400px; /* Minimum height for usability */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    padding: 8px; /* Padding for grid */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 12px; /* Space between items */
    align-content: start; /* Align items to top */
    /* Hide scrollbar for WebKit browsers */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for WebKit browsers */
._printingsList_dp9vk_278::-webkit-scrollbar {
    display: none;
}

/* Ensure proper scrolling behavior for printings list */
._printingsList_dp9vk_278 {
    overflow-y: scroll; /* Scrolling - can be overridden by mobile */
    scroll-behavior: smooth;
}

/* Version Dropdown Styling */
._versionDropdownContainer_dp9vk_308 {
    margin-bottom: 12px;
}

._versionDropdown_dp9vk_308 {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

._versionDropdown_dp9vk_308:hover {
    border-color: #999;
}

._versionDropdown_dp9vk_308:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

._cardActions_dp9vk_16 h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 16px;
    color: #333;
}

/* Remove margins from "Select Printing" h3 specifically */
._cardActions-modal_dp9vk_341 h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

._actionRow_dp9vk_349 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

._controlLabel_dp9vk_356 {
    min-width: 70px;
    width: 70px;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
}

/* Toggle switch styling */
._foilSelector_dp9vk_367 {
    align-items: center;
}

._toggleSwitch_dp9vk_371 {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-left: 5px;
}

._toggleSwitch_dp9vk_371 input {
    opacity: 0;
    width: 0;
    height: 0;
    outline: none !important; /* Remove focus outline */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any shadows */
}

/* Remove focus indicators completely */
._toggleSwitch_dp9vk_371 input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

._toggleSlider_dp9vk_395 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: background-color 0.05s ease-out; /* ⚡ ULTRA-fast transition for instant feel */
    border-radius: 34px;
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

._toggleSlider_dp9vk_395:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.05s ease-out; /* ⚡ ULTRA-fast transition for instant feel */
    border-radius: 50%;
    will-change: transform; /* ⚡ GPU acceleration hint */
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

input:checked + ._toggleSlider_dp9vk_395 {
    background-color: #1976d2;
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

/* Remove the focus styling that was causing blue square */
input:focus + ._toggleSlider_dp9vk_395 {
    outline: none !important; /* Remove focus outline */
    border: none !important; /* Remove focus border */
    box-shadow: none !important; /* Remove focus shadow */
}

input:checked + ._toggleSlider_dp9vk_395:before {
    transform: translateX(26px);
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

/* Disabled toggle switch styling */
._toggleSwitch_dp9vk_371._disabled_dp9vk_448 {
    cursor: not-allowed;
    opacity: 0.6;
}

._toggleSwitch_dp9vk_371._disabled_dp9vk_448 input {
    cursor: not-allowed;
}

._toggleSlider_dp9vk_395._disabled_dp9vk_448 {
    cursor: not-allowed;
}

._toggleSlider_dp9vk_395._disabled_dp9vk_448:before {
    background-color: #f5f5f5;
}

/* ⚡ Optimized lightweight shimmer animation for better performance */
@keyframes _lightweight-shimmer_dp9vk_1 {
    0% {
        opacity: 0.8;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(0%);
    }
    100% {
        opacity: 0.8;
        transform: translateX(100%);
    }
}

/* ⚡ Performance optimized foil toggle - lighter animation */
._toggleSlider_dp9vk_395._foilActive_dp9vk_482 {
    background: linear-gradient(45deg, #1976d2, #42a5f5, #1976d2);
    position: relative;
    overflow: hidden;
}

/* ⚡ Lightweight shimmer overlay */
._toggleSlider_dp9vk_395._foilActive_dp9vk_482::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: _lightweight-shimmer_dp9vk_1 2s ease-in-out infinite;
    pointer-events: none;
}

/* Override states with lighter approach */
._toggleSwitch_dp9vk_371 input:checked + ._toggleSlider_dp9vk_395._foilActive_dp9vk_482,
._toggleSwitch_dp9vk_371._disabled_dp9vk_448 ._toggleSlider_dp9vk_395._foilActive_dp9vk_482,
input:checked + ._toggleSlider_dp9vk_395._foilActive_dp9vk_482,
input:focus + ._toggleSlider_dp9vk_395._foilActive_dp9vk_482 {
    background: linear-gradient(45deg, #1976d2, #42a5f5, #1976d2);
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */ 
    box-shadow: none !important; /* Remove any shadow */
}

/* ⚡ MAXIMUM FORCE toggle visibility - nuclear option */
._modalContent_dp9vk_20 ._toggleSwitch_dp9vk_371,
._modalContent_dp9vk_20 ._toggleSwitch_dp9vk_371._disabled_dp9vk_448,
._modalContent_dp9vk_20 ._toggleSlider_dp9vk_395,
._modalContent_dp9vk_20 ._toggleSlider_dp9vk_395._disabled_dp9vk_448,
._toggleSwitch_dp9vk_371,
._toggleSwitch_dp9vk_371._disabled_dp9vk_448,
._toggleSlider_dp9vk_395,
._toggleSlider_dp9vk_395._disabled_dp9vk_448 {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 50px !important;
    height: 24px !important;
    background-color: #ccc !important;
    border-radius: 34px !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

._modalContent_dp9vk_20 ._toggleSwitch_dp9vk_371._disabled_dp9vk_448,
._toggleSwitch_dp9vk_371._disabled_dp9vk_448 {
    opacity: 0.6 !important; /* Maintain disabled appearance */
}

/* Force the slider to be visible */
._toggleSlider_dp9vk_395,
._modalContent_dp9vk_20 ._toggleSlider_dp9vk_395 {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    cursor: pointer !important;
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any shadow */
}

/* Force input to have no blue highlighting */
._toggleSwitch_dp9vk_371 input,
._modalContent_dp9vk_20 ._toggleSwitch_dp9vk_371 input {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Animated text for foil card names with dynamic delays */
._foilActiveText_dp9vk_564 {
    background: linear-gradient(110deg, #ff99cc, #cc99ff, #99ccff, #99ffcc, #ccff99, #ffcc99, #ff99cc);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animation with dynamic delay set via inline styles */
    animation: _holographic-shimmer_dp9vk_1 8s linear infinite;
    
    /* Hardware acceleration */
    will-change: background-position;
    transform: translateZ(0);
    
    /* Smooth transition for hover effects */
    transition: text-decoration 0.2s ease;
    cursor: pointer;
}

/* Add underline on hover for foil cards */
._deckCardRow_dp9vk_584:hover ._foilActiveText_dp9vk_564 {
    text-decoration: underline;
    text-decoration-color: #ff99cc; /* Use a solid foil gradient color */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Animated border for foil card preview - apply only to the card image container */
._currentPrintingCard_dp9vk_592._foilActiveBorder_dp9vk_592 {
    position: relative;
}

/* Apply animation base to the card image container only */
._currentPrintingCard_dp9vk_592::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px; /* card radius + border width */
    background: linear-gradient(110deg, 
      rgba(255, 190, 220, 0.7), 
      rgba(200, 190, 255, 0.7), 
      rgba(190, 220, 255, 0.7), 
      rgba(190, 255, 220, 0.7), 
      rgba(220, 255, 190, 0.7), 
      rgba(255, 220, 190, 0.7), 
      rgba(255, 190, 220, 0.7)) !important;
    background-size: 700% 700% !important;
    animation-name: _holographic-shimmer_dp9vk_1 !important;
    animation-duration: 15s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    opacity: 0;
    filter: blur(1px);
    z-index: -1;
    will-change: background-position;
    transform: translateZ(0); /* Hardware acceleration */
    transition: opacity 0.3s ease; /* Smooth transition for opacity changes */
}

/* Only change the opacity and animation play state, not the animation itself */
._currentPrintingCard_dp9vk_592._foilActiveBorder_dp9vk_592::before {
    opacity: 0.4;
    animation-play-state: running;
    transform: translateZ(0); /* Hardware acceleration */
}

/* Layout for the printings area */
._printingsLayout_dp9vk_636 {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap to minimize spacing around "Select Printing" */
    height: 100%; /* Take full height of container */
    min-height: 600px; /* Minimum height to match printings-list max-height */
}

/* Current printing container - info only, no image */
._currentPrintingContainer_dp9vk_218 {
    display: flex;
    gap: 0; /* Remove gap since we're removing the image */
    align-items: flex-start;
    padding: 0;
    background-color: transparent;
    border-radius: 0 !important; /* Force remove border-radius to prevent affecting child elements */
    -webkit-border-radius: 0 !important; /* WebKit override */
    -moz-border-radius: 0 !important; /* Mozilla override */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none;
    outline: none !important;
    justify-content: center; /* Center the container content */
    /* Allow natural height to expand with content - let parent printings-container handle scrolling */
    min-height: 0; /* Allow shrinking if needed */
}

/* Hide the card image entirely */
._currentPrintingCard_dp9vk_592 {
    display: none !important; /* Hide the large card image display */
}

._currentCardImage_dp9vk_670 {
    max-width: 320px; /* Increased from default to make card art larger */
    max-height: 448px; /* Proportional height for Magic card aspect ratio */
    width: auto;
    height: auto;
    border-radius: 12px; /* Slightly more rounded corners */
    box-shadow: 0 6px 16px rgba(0,0,0,0.25); /* Restored shadow for depth */
    display: block; /* Ensure no inline spacing */
    margin: 0 auto; /* Center the image */
    padding: 0; /* Remove any padding */
    border: none !important; /* Ensure no border */
    outline: none !important; /* Prevent focus outlines */
    position: relative; /* For proper stacking with overlay */
    cursor: pointer; /* Indicate it's interactive */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
}

._currentCardImage_dp9vk_670:hover {
    transform: scale(1.02); /* Slight zoom on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Enhanced shadow on hover */
}

/* Ensure the main card preview is never affected by selection styles */
._currentCardImage_dp9vk_670._selected_dp9vk_210,
._currentPrintingCard_dp9vk_592 ._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218 ._selected_dp9vk_210,
._currentPrintingInfo_dp9vk_217,
._currentPrintingInfo_dp9vk_217._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218,
._currentPrintingContainer_dp9vk_218 *,
._currentPrintingInfo_dp9vk_217 * {
    outline: none !important;
    border: none !important;
    /* Removed box-shadow to eliminate drop shadows */
}

/* Smooth shimmer overlay for foil card preview image */
._currentPrintingCard_dp9vk_592._foilActive-border_dp9vk_707 ._currentCardImage_dp9vk_670 {
    position: relative;
    overflow: hidden;
}

._currentPrintingCard_dp9vk_592._foilActive-border_dp9vk_707 ._currentCardImage_dp9vk_670::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Very smooth gradient with subtle color transitions */
    background: linear-gradient(
        125deg,
        transparent 20%,
        rgba(255, 255, 255, 0.1) 35%,
        rgba(255, 220, 255, 0.15) 40%,
        rgba(220, 255, 255, 0.15) 45%,
        rgba(255, 255, 220, 0.15) 50%,
        rgba(255, 220, 255, 0.15) 55%,
        rgba(220, 255, 255, 0.15) 60%,
        rgba(255, 255, 255, 0.1) 65%,
        transparent 80%
    );
    
    /* Large background size for smooth transitions */
    background-size: 400% 400%;
    
    /* Smooth, continuous animation */
    animation: _card-shimmer_dp9vk_1 6s ease-in-out infinite;
    
    /* Blend mode for subtle effect */
    mix-blend-mode: overlay;
    
    /* Hardware acceleration */
    will-change: background-position;
    transform: translateZ(0);
    
    /* Ensure it doesn't interfere with interactions */
    pointer-events: none;
}

/* Smooth shimmer animation for card image */
@keyframes _card-shimmer_dp9vk_1 {
    0%, 100% {
        background-position: -50% -50%;
    }
    25% {
        background-position: 50% 20%;
    }
    50% {
        background-position: 150% 150%;
    }
    75% {
        background-position: 50% 20%;
    }
}

._currentPrintingInfo_dp9vk_217 {
    display: flex;
    flex-direction: column;
    padding: 12px; /* Reduced padding for tighter spacing */
    margin-top: 0;
    background-color: rgba(248, 250, 252, 0.95); /* Slightly different background */
    border: 1px solid rgba(0, 123, 255, 0.2) !important; /* Lighter border */
    border-radius: 8px !important; /* Restored subtle border radius */
    width: 100%; /* Expand to full width */
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible; /* Let parent handle scrolling */
    outline: none !important;
    /* Use box-sizing to include padding and borders in height calculation */
    box-sizing: border-box !important; /* Include padding and border in the element's total dimensions */
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Add subtle shadow */
    /* Ensure pointer events are not blocked */
    pointer-events: auto !important;
}

/* No longer need to hide scrollbar since overflow is visible */
._currentPrintingInfo_dp9vk_217::-webkit-scrollbar {
    display: none;
}

/* NUCLEAR OPTION: Force border and border-radius with maximum specificity */
._modalContent_dp9vk_20 ._modalBody_dp9vk_167 ._printingsContainer_dp9vk_794 ._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217,
._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217,
._currentPrintingInfo_dp9vk_217,
div._currentPrintingInfo_dp9vk_217 {
    border: 1px solid rgba(0, 123, 255, 0.3) !important;
    border-bottom: 1px solid rgba(0, 123, 255, 0.5) !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ULTIMATE OVERRIDE: CSS with highest possible specificity */
html body ._modalContent_dp9vk_20 ._modalBody_dp9vk_167 ._printingsContainer_dp9vk_794 ._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217,
html body div._cardActions-modal_dp9vk_341 div._modalContent_dp9vk_20 div._modalBody_dp9vk_167 div._printingsContainer_dp9vk_794 div._currentPrintingContainer_dp9vk_218 div._currentPrintingInfo_dp9vk_217,
[class*="current-printing-info"],
*[class*="current-printing-info"] {
    border: 1px solid rgba(0, 123, 255, 0.3) !important;
    border-bottom: 1px solid rgba(0, 123, 255, 0.5) !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Force border style */
    border-style: solid !important;
    border-width: 1px !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
    border-bottom-color: rgba(0, 123, 255, 0.5) !important;
}

/* CONTAINER OVERRIDE: Force border-radius removal on container */
html body ._modalContent_dp9vk_20 ._modalBody_dp9vk_167 ._printingsContainer_dp9vk_794 ._currentPrintingContainer_dp9vk_218,
html body div._cardActions-modal_dp9vk_341 div._modalContent_dp9vk_20 div._modalBody_dp9vk_167 div._printingsContainer_dp9vk_794 div._currentPrintingContainer_dp9vk_218,
._currentPrintingContainer_dp9vk_218,
[class*="current-printing-container"],
*[class*="current-printing-container"] {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* CRITICAL: Force bottom border visibility */
html body ._modalContent_dp9vk_20 ._modalBody_dp9vk_167 ._printingsContainer_dp9vk_794 ._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217,
html body div._cardActions-modal_dp9vk_341 div._modalContent_dp9vk_20 div._modalBody_dp9vk_167 div._printingsContainer_dp9vk_794 div._currentPrintingContainer_dp9vk_218 div._currentPrintingInfo_dp9vk_217,
._currentPrintingInfo_dp9vk_217,
[class*="current-printing-info"] {
    border-bottom: 1px solid rgba(0, 123, 255, 0.5) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: rgba(0, 123, 255, 0.5) !important;
}

/* Comprehensive override to prevent any blue outline/border on current printing display */
._currentPrintingInfo_dp9vk_217,
._currentPrintingInfo_dp9vk_217:focus,
._currentPrintingInfo_dp9vk_217:active,
._currentPrintingContainer_dp9vk_218:focus,
._currentPrintingContainer_dp9vk_218:active,
._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217 {
    outline: none !important;
    border: 1px solid rgba(0, 123, 255, 0.3) !important; /* Keep the original light blue border */
    border-bottom: 1px solid rgba(0, 123, 255, 0.5) !important; /* Maintain bottom border */
    border-radius: 0 !important; /* Remove border-radius to fix curvature conflicts */
    box-shadow: none !important;
}

/* Prevent any selection styling from affecting the current printing area */
._currentPrintingInfo_dp9vk_217._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218._selected_dp9vk_210,
._printingsLayout_dp9vk_636 ._selected_dp9vk_210 ._currentPrintingInfo_dp9vk_217,
._printingsLayout_dp9vk_636 ._selected_dp9vk_210 ._currentPrintingContainer_dp9vk_218,
._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217._selected_dp9vk_210,
._currentPrintingContainer_dp9vk_218 ._currentPrintingInfo_dp9vk_217 {
    outline: none !important;
    border: 1px solid rgba(0, 123, 255, 0.3) !important; /* Maintain original styling */
    border-bottom: 1px solid rgba(0, 123, 255, 0.5) !important; /* Maintain bottom border */
    border-radius: 0 !important; /* Remove border-radius to fix curvature conflicts */
    box-shadow: none !important;
}

/* Current label styling moved to printing-item.selected above */

._currentPrintingName_dp9vk_886 {
    font-size: 16px;
    margin-bottom: 6px;
    padding: 0; /* Remove extra padding since container now has padding */
}

._printingDetails_dp9vk_892 {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
    padding: 0; /* Remove padding since container has it */
}

._frameType_dp9vk_899 {
    margin-top: 4px;
    font-style: italic;
    color: #666;
    padding: 0; /* Remove padding since container has it */
}

._printingPrice_dp9vk_906 {
    margin-top: 0; /* Removed top margin */
    font-size: 14px;
    color: #333;
    font-weight: 500;
    padding: 0; /* Remove padding since container has it */
}

._oracleText_dp9vk_914 {
    margin-top: 0; /* Removed top margin */
    border-top: 1px solid #eee;
    padding-top: 12px; /* Add some top padding for spacing */
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    display: flex; /* Added flex display */
    flex-direction: column; /* Stack paragraphs vertically */
    /* Remove flex: 1 to prevent taking remaining space and causing scroll */
    overflow-y: visible; /* Show all content without scrolling */
}

._oracleText_dp9vk_914 p {
    margin: 6px 0;
}

/* Updated printing item styles for two-column grid */
._printingItem_dp9vk_201 {
    position: relative;
    border-radius: 8px; /* Restore border-radius */
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Column layout for stacked arrangement */
    background: white;
    transition: all 0.2s ease-in-out;
    margin: 0; /* Remove auto margins for grid layout */
    border: 1px solid #e0e0e0;
    align-items: center;
    width: 100%; /* Fill grid column width */
}

/* Specific override for printings list items */
._printingsList_dp9vk_278 ._printingItem_dp9vk_201 ._setInfo_dp9vk_947 {
    display: flex;
    flex-direction: column; /* Changed to column to center the set icon */
    align-items: center; /* Center the set icon and text */
    justify-content: center;
    gap: 4px; /* Space between icon and text */
    margin-top: 6px;
    width: 100%;
    font-size: 9px;
}

._printingsList_dp9vk_278 ._printingItem_dp9vk_201 ._setInfo_dp9vk_947 span {
    text-align: center; /* Center the text */
    white-space: nowrap;
    color: #333;
    font-weight: 600;
    min-width: 0;
    max-width: 100%; /* Allow full width since we're stacking vertically */
    overflow: hidden;
    text-overflow: ellipsis;
}

._printingsList_dp9vk_278 ._printingItem_dp9vk_201 ._collectionIndicator_dp9vk_969 {
    text-align: center; /* Center align since we're now in vertical layout */
    margin: 0;
    font-size: 7px;
    padding: 1px 2px;
    border-radius: 2px;
    min-width: fit-content;
    max-width: 100%; /* Allow full width since we're stacking vertically */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%; /* Take full width of container */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Update set info for two-row layout with set-details-row and price-row */
._setInfo_dp9vk_947 {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: center; /* Center everything */
    justify-content: center;
    gap: 2px; /* Reduced gap between rows */
    width: 100%;
    min-width: 0;
    outline: none !important;
    border: none !important;
    margin-bottom: 4px; /* Space before next element */
}

._setSymbol_dp9vk_998 {
    width: 16px !important; /* Match JSX size */
    height: 16px !important; /* Match JSX size */
    max-width: 16px !important; /* Override any max-width */
    max-height: 16px !important; /* Override any max-height */
    min-width: 16px !important; /* Override any min-width */
    min-height: 16px !important; /* Override any min-height */
    flex-shrink: 0 !important; /* Don't shrink */
    flex-basis: 16px !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important; /* Remove margins for centered layout */
    object-fit: contain !important; /* Ensure proper scaling */
    display: inline-block !important; /* Inline block for better alignment */
}

/* Image container for list items - flexible width with max height */
._printingsList_dp9vk_278 ._printingItem_dp9vk_201 img {
    width: 100% !important; /* Fill column width */
    height: auto !important;
    max-height: 200px !important; /* Reduced from 300px for two-column layout */
    object-fit: contain !important;
    border-radius: 6px !important;
    margin-right: 0 !important; /* Remove right margin */
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* Current banner overlay for selected printing */
._printingItem_dp9vk_201._selected_dp9vk_210 ._currentLabel_dp9vk_1028 {
    position: absolute; /* Position absolutely over the card image */
    top: 0; /* At the very top - no margin */
    left: 0; /* Align to left edge */
    right: 0; /* Span full width of card - no margin */
    display: block; /* Show the "CURRENT" banner */
    background-color: #28a745; /* Strong green background */
    color: white; /* White text for contrast */
    font-weight: bold;
    font-size: 10px; /* Smaller font for printing cards */
    text-align: center;
    padding: 4px 6px; /* Smaller padding for printing cards */
    margin: 0; /* Remove all margins */
    /* border-radius: 8px 8px 0 0; */ /* Commented out for seamless flush */
    z-index: 10; /* Ensure it appears above the image */
}

/* Removed hover animation for printing items */

._printingItem_dp9vk_201._selected_dp9vk_210 {
    border: none; /* Remove border to prevent sizing issues */
    outline: 2px solid #28a745; /* Use outline instead of border to avoid affecting layout */
    outline-offset: -2px; /* Keep outline inside the element bounds */
    /* Removed box-shadow to eliminate drop shadow on selected items */
}

._printingLabel_dp9vk_1054 {
    font-size: 12pt;
    padding: 0;
    text-align: center; /* Center align everything */
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center align items */
    width: 100%; /* Full width */
    min-height: auto;
    gap: 4px; /* Slightly larger gap for better spacing */
}

/* Update set info for vertical layout with icon on top */
._setInfo_dp9vk_947 {
    display: flex;
    flex-direction: column; /* Changed to column to stack icon above text */
    align-items: center; /* Center everything */
    justify-content: center;
    gap: 4px; /* Space between icon and text */
    width: 100%;
    min-width: 0;
    outline: none !important;
    border: none !important;
    margin-bottom: 4px; /* Space before collection status */
}

._setSymbol_dp9vk_998 {
    width: 21px !important; /* Force fixed width - 75% larger than 12px */
    height: 21px !important; /* Force fixed height - 75% larger than 12px */
    max-width: 21px !important; /* Override any max-width */
    max-height: 21px !important; /* Override any max-height */
    min-width: 21px !important; /* Override any min-width */
    min-height: 21px !important; /* Override any min-height */
    flex-shrink: 0;
    flex-basis: 21px;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: contain; /* Ensure proper scaling */
    display: block; /* Ensure it displays properly */
}

._setInfo_dp9vk_947 span {
    width: 100%; /* Take full width */
    min-width: 0;
    text-align: center; /* Center the text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 9px; /* Slightly smaller to fit better */
    line-height: 1.2;
}

/* Collection indicator styling for neat placement under set info */
._collectionIndicator_dp9vk_969 {
    font-size: 9px;
    text-align: center; /* Center the text */
    padding: 2px 6px;
    margin-top: 4px; /* Space from set info */
    border-radius: 3px;
    font-weight: 500;
    line-height: 1.1;
    display: block; /* Full width block */
    width: 100%; /* Take full width of container */
    box-sizing: border-box;
}

/* Current label for selected printing in list */
._printingsList_dp9vk_278 ._printingItem_dp9vk_201._selected_dp9vk_210 ._currentLabel_dp9vk_1028 {
    position: absolute;
    /* top: 2px; */ /* Commented out - set to 0 for flush positioning */
    /* right: 2px; */ /* Commented out - set to 0 for flush positioning */
    top: 0;
    left: 0;
    right: 0;
    display: block;
    background-color: #28a745;
    color: white;
    font-weight: bold;
    font-size: 8px;
    text-align: center;
    padding: 2px 4px;
    margin: 0;
    /* border-radius: 3px; */ /* Commented out for seamless flush */
    z-index: 10;
}

._printingsList_dp9vk_278 ._printingItem_dp9vk_201:hover {
    background-color: #f5f5f5;
    transform: none; /* Remove vertical transform for list items */
}

._printingsList_dp9vk_278 ._printingItem_dp9vk_201._selected_dp9vk_210 {
    border: 2px solid #28a745;
    background-color: #f0fff4;
}

/* Set details row: horizontal layout for set icon + code + number */
._setDetailsRow_dp9vk_1156 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important; /* Reduced from 4px to 2px to bring icon even closer to text */
    margin-bottom: 4px !important;
    /* Removed width: 100% to allow natural width and bring elements closer */
    flex-wrap: nowrap !important;
}

/* Price row: horizontal layout for price and collection status */
._priceRow_dp9vk_1167 {
    display: flex !important;
    justify-content: center !important; /* Center the price and dot together */
    align-items: center !important;
    /* Removed width: 100% to allow natural width and bring elements closer */
    font-size: 12px !important;
    color: #333 !important;
    padding: 4px 8px !important;
    background-color: transparent !important; /* Removed grey background */
    border-radius: 4px !important;
    gap: 4px !important; /* Reduced from 6px to 4px to bring price and dot even closer */
    margin-top: 4px !important;
}

/* Ensure price text visibility with stronger styles */
._priceRow_dp9vk_1167 span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background-color: transparent !important;
}

/* Stronger override for any inherited styles that might be hiding text */
._priceRow_dp9vk_1167 span:first-child {
    color: #333 !important;
    font-weight: 600 !important;
}

/* Collection status dots */
._collectionDot_dp9vk_1201 {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

._collectionDot_dp9vk_1201._notOwned_dp9vk_1209 {
    background-color: #dc3545 !important; /* Red dot for not in collection */
}

._collectionDot_dp9vk_1201._partial_dp9vk_1213 {
    background-color: #ffc107 !important; /* Yellow dot for different version in collection */
}

._collectionDot_dp9vk_1201._owned_dp9vk_1217 {
    background-color: #28a745 !important; /* Green dot for selected version in collection */
}

/* Legacy collection status variations (kept for backwards compatibility) */
._collectionIndicator_dp9vk_969._owned_dp9vk_1217 {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

._collectionIndicator_dp9vk_969._partial_dp9vk_1213 {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

._collectionIndicator_dp9vk_969._notOwned_dp9vk_1209 {
    background-color: #e2e3e5;
    color: #6c757d;
    border: 1px solid #d6d8db;
}

._collectionIndicator_dp9vk_969._unknown_dp9vk_1240 {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

._setSymbol_dp9vk_998 {
    width: 21px; /* Fixed reasonable size - 75% larger than 12px */
    height: 21px; /* Fixed height - no auto */
    flex-shrink: 0; /* Prevent shrinking */
    flex-basis: 21px; /* Fixed size basis */
    outline: none !important; /* Remove any outline */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove any box shadow */
}

._setSymbol_dp9vk_998 img {
    outline: none !important; /* Remove outline from the img element */
    border: none !important; /* Remove border from the img element */
    box-shadow: none !important; /* Remove any box shadow from the img element */
}

/* Override any selection styles specifically for set symbols */
._printingItem_dp9vk_201._selected_dp9vk_210 ._setSymbol_dp9vk_998,
._printingItem_dp9vk_201._selected_dp9vk_210 ._setSymbol_dp9vk_998 img,
._printingItem_dp9vk_201._selected_dp9vk_210 ._setInfo_dp9vk_947 {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

._setInfo_dp9vk_947 span {
    flex: 1; /* Take remaining space */
    min-width: 0; /* Allow text to shrink */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for long text */
    font-weight: bold; /* Make set code and number bold */
    font-size: 10px; /* Reduced to 10pt font */
}

._setSymbol_dp9vk_998 svg {
    width: 100%;
    height: 100%;
    display: block;
}

._selectedIndicator_dp9vk_1287 {
    color: white; /* White text for contrast */
    font-weight: bold;
    font-size: 11px;
    margin-top: 2px;
    background-color: #28a745; /* Strong green background instead of light green */
    padding: 4px 0; /* Vertical padding only - let it span full width */
    border-radius: 0; /* Remove rounded corners to span full width */
    display: block; /* Make it a block element to span full width */
    width: 100%; /* Ensure it spans the full width */
    margin-left: -6px; /* Offset the container's horizontal padding */
    margin-right: -6px; /* Offset the container's horizontal padding */
}

._loadingPrintings_dp9vk_1301 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
}

._spinner_dp9vk_1310 {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 3px solid #007bff;
    width: 20px;
    height: 20px;
    animation: _spin_dp9vk_1310 1s linear infinite;
    margin-top: 10px;
}

._spinnerSmall_dp9vk_1320 {
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 2px solid #007bff;
    width: 14px;
    height: 14px;
    animation: _spin_dp9vk_1310 1s linear infinite;
    vertical-align: middle;
    margin-right: 5px;
}

._updatingIndicator_dp9vk_1332 {
    display: block;
    font-size: 0.8em;
    color: #007bff;
    margin-top: 4px;
    font-weight: normal;
}

/* Action buttons styling */
._actionButtons_dp9vk_1341 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 8px;
    margin-top: 8px;
}

._cardActions_dp9vk_16 ._actionButton_dp9vk_1341 {
    padding: 8px 15px;
    border-radius: 6px;
    background-color: #3d5e3d;
    color: white;
    border: 1px solid rgba(111, 169, 111, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: bold;
    min-height: 36px;
    text-align: center;
    margin-bottom: 4px;
}

._cardActions_dp9vk_16 ._actionButton_dp9vk_1341:hover {
    background-color: #4a6f4a;
    outline: none;
}

/* Quantity controls styling */
._quantityRow_dp9vk_1369 {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

._quantityControls_dp9vk_1375 {
    display: flex;
    align-items: center;
    height: 32px;
}

._quantityBtn_dp9vk_1381 {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 16px;
    border-radius: 6px;
    background-color: #3d5e3d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(111, 169, 111, 0.3);
    transition: all 0.2s ease;
}

._quantityBtn_dp9vk_1381:hover {
    background-color: #4a6f4a;
}

._quantityBtn_dp9vk_1381:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

._quantitySelect_dp9vk_1407 {
    width: 60px;
    height: 28px;
    text-align: center;
    font-size: 14px;
    margin: 0 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    padding: 0 4px;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}

._quantityInput_dp9vk_1423 {
    width: 60px;
    height: 28px;
    text-align: center;
    font-size: 14px;
    margin: 0 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    padding: 0 4px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Remove number input arrows */
._quantityInput_dp9vk_1423::-webkit-outer-spin-button,
._quantityInput_dp9vk_1423::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

._quantityInput_dp9vk_1423[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Improved quantity input editing state */
._quantityInput_dp9vk_1423._editing_dp9vk_1452 {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    background-color: #f8f9fa;
}

._quantityInput_dp9vk_1423:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

._quantityInput_dp9vk_1423:hover {
    border-color: #999;
}

/* Foil availability indicators */
._foilOnlyIndicator_dp9vk_1469 {
    color: #1976d2;
    font-size: 12px;
    font-weight: 500;
}

._nonFoilOnlyIndicator_dp9vk_1475 {
    color: #757575;
    font-size: 12px;
    font-weight: 500;
}

/* New styles for printings container (right side with current printing display) */
._printingsContainer_dp9vk_794 {
    flex: 1; /* Take remaining space after card-actions */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 20px; /* Add some spacing from the left sidebar */
    min-width: 400px; /* Minimum width to ensure content fits */
    /* Force specific height to enable scrolling */
    height: calc(90vh - 80px); /* Account for modal padding and header */
    max-height: calc(90vh - 80px);
    overflow-y: scroll; /* Scrolling - can be overridden by mobile */
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* Enable touch/trackpad scrolling */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* Allow vertical touch scrolling */
    overscroll-behavior: contain; /* Prevent scroll chaining to parent */
    scrollbar-width: auto; /* Show scrollbar */
    padding-right: 8px; /* Add padding to prevent content from touching edge */
}

/* Ensure content inside has proper min-height to enable scrolling */
._printingsContainer_dp9vk_794 > * {
    min-height: min-content; /* Ensure natural content height */
}

/* Style scrollbar for WebKit browsers for printings container */
._printingsContainer_dp9vk_794::-webkit-scrollbar {
    width: 8px;
}

._printingsContainer_dp9vk_794::-webkit-scrollbar-track {
    background: #f1f1f1;
}

._printingsContainer_dp9vk_794::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

._printingsContainer_dp9vk_794::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==============================================
   SIMPLE CARD MODAL STYLES (Research Page)
   ============================================== */

/* Additional styles for deck selection controls */
._deckSelectionControls_dp9vk_1530 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

._deckSelectionControls_dp9vk_1530 ._deckSelect_dp9vk_1530 {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

/* Enhanced printing item styles for better display */
._printingItem_dp9vk_201 ._printingNumber_dp9vk_1548 {
    font-size: 10px;
    color: #666;
    margin: 2px 0;
}

._printingItem_dp9vk_201._selected_dp9vk_210 ._printingNumber_dp9vk_1548 {
    color: #ccc;
}

/* Current printing info styles to match original */
._currentPrintingInfo_dp9vk_217 ._cardDetails_dp9vk_1559 {
    margin: 8px 0;
}

._currentPrintingInfo_dp9vk_217 ._detailRow_dp9vk_1563 {
    display: flex;
    margin-bottom: 4px;
    align-items: flex-start;
}

._currentPrintingInfo_dp9vk_217 ._detailLabel_dp9vk_1569 {
    font-weight: 600;
    color: #333;
    min-width: 80px;
    font-size: 13px;
    flex-shrink: 0;
}

._currentPrintingInfo_dp9vk_217 ._detailValue_dp9vk_1577 {
    color: #555;
    font-size: 13px;
    flex: 1;
    margin-left: 8px;
}

._currentPrintingInfo_dp9vk_217 ._priceHighlight_dp9vk_1584 {
    color: #28a745;
    font-weight: 700;
    font-size: 14px;
}

._currentPrintingInfo_dp9vk_217 ._oracleTextSection_dp9vk_1590 {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

._currentPrintingInfo_dp9vk_217 ._oracleTextTitle_dp9vk_1596 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

._currentPrintingInfo_dp9vk_217 ._oracleTextContent_dp9vk_1603 {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}

/* Card image sizing for SimpleCardModal */
._cardImageContainer_dp9vk_1614 {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

._currentCardImage_dp9vk_670 {
    max-width: 240px;
    max-height: 336px;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

._currentCardImage_dp9vk_670:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Collection action buttons styling */
._wishlistButton_dp9vk_1636:hover {
    background-color: #f57c00 !important;
}

._collectionButton_dp9vk_1640:hover {
    background-color: #388e3c !important;
}

/* Enhanced printing item hover effects */
._printingItem_dp9vk_201 {
    transition: all 0.15s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: white;
    margin-bottom: 8px;
}

._printingItem_dp9vk_201:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-color: #1976d2;
}

._printingItem_dp9vk_201._selected_dp9vk_210 {
    border-color: #4caf50;
    background: #f8fff8;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
}

/* Printing image preview styling */
._printingImagePreview_dp9vk_1671 {
    flex-shrink: 0;
    width: 240px;
    height: 335px; /* Maintains 5:7 aspect ratio */
    overflow: visible;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

._printingPreviewImg_dp9vk_1685 {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
    /* Removed hover zoom animation transitions */
}

/* Removed hover zoom animation */

._printingDetails_dp9vk_892 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    width: 100%;
}

/* Card name title styling */
._cardNameTitle_dp9vk_56 {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

/* Columnized card details layout */
._cardDetailsColumns_dp9vk_1719 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

._detailColumn_dp9vk_1726 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Compact oracle text without header */
._oracleTextContentCompact_dp9vk_1733 {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #333;
    margin-bottom: 8px;
}

/* Oracle Tags Integration styling - ensure full visibility and proper rounding */
._oracleTagsIntegration_dp9vk_1745 {
    border-radius: 8px !important; /* Full border radius, not just bottom */
    overflow: visible !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important; /* Add bottom padding to prevent cutoff */
}

/* Ensure Oracle Tags container has proper styling and visibility */
._currentPrintingInfo_dp9vk_217 > div:last-child {
    margin-bottom: 8px !important; /* Add margin to prevent cutoff */
    border-radius: 8px !important; /* Full border radius */
    overflow: visible !important;
    padding-bottom: 8px !important; /* Ensure content is fully visible */
}

/* Fix any container that might be cutting off Oracle Tags */
._currentPrintingInfo_dp9vk_217 {
    padding-bottom: 16px !important; /* Extra bottom padding */
    overflow: visible !important; /* Ensure no clipping */
}

/* Mana symbol styling */
._manaSymbol_dp9vk_1767 {
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0.5px !important;
}

/* SimpleCardModal specific printings grid styling */
._printingsGrid_dp9vk_176 {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr; /* Single column layout to prevent cutoff */
    gap: 8px;
    align-content: start;
    /* Hide scrollbar for WebKit browsers */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for printings grid */
._printingsGrid_dp9vk_176::-webkit-scrollbar {
    display: none;
}

/* ========== MOBILE OPTIMIZATIONS ========== */
@media (max-width: 768px) {
    /* ===== MODAL STRUCTURE ===== */
    ._modalBackdrop_dp9vk_1 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        align-items: flex-start;
        justify-content: center;
        z-index: 99998;
        overflow-y: auto;
    }

    ._modalContent_dp9vk_20 {
        width: 100%;
        height: auto;
        min-height: 100vh;
        max-height: none;
        border-radius: 0;
        padding: 12px;
        margin: 0;
        overflow-y: visible;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    /* ===== MODAL HEADER ===== */
    ._modalHeader_dp9vk_47 {
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 12px;
        position: relative;
    }

    ._cardNameTitle_dp9vk_56 {
        font-size: 1.2rem;
        padding-right: 40px;
    }

    ._closeButton_dp9vk_64 {
        top: -8px;
        right: -8px;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        font-size: 1.3rem;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    ._closeButton_dp9vk_64:hover {
        background: rgba(255, 255, 255, 1);
    }

    /* ===== MODAL BODY ===== */
    ._modalBody_dp9vk_167 {
        flex-direction: column;
        gap: 0;
        overflow-y: visible;
        overflow-x: hidden;
        min-height: 0;
        max-height: none;
        flex: 1;
        background: transparent;
    }

    /* ===== CARD ACTIONS SECTION ===== */
    ._cardActions_dp9vk_16 {
        flex: none;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 12px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
        background: transparent;
        -webkit-overflow-scrolling: touch;
    }

    ._cardActions_dp9vk_16 h3 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* ===== FORM CONTROLS ===== */
    ._actionRow_dp9vk_349 {
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    ._controlLabel_dp9vk_356 {
        min-width: 60px;
        font-size: 14px;
    }

    /* Quantity controls */
    ._quantitySelector_dp9vk_1906 {
        gap: 8px;
    }

    ._quantityBtn_dp9vk_1381 {
        width: 40px;
        height: 40px;
        min-height: 40px;
        min-width: 40px;
        font-size: 18px;
    }

    ._quantityDisplay_dp9vk_1918 {
        font-size: 18px;
        min-width: 40px;
        padding: 8px 12px;
    }

    /* ===== ACTION BUTTONS ===== */
    ._actionButtons_dp9vk_1341 {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    ._actionButton_dp9vk_1341 {
        padding: 14px 16px;
        font-size: 15px;
        min-height: 48px;
        white-space: normal;
        line-height: 1.4;
        text-align: center;
    }

    ._primaryButton_dp9vk_1940,
    ._secondaryButton_dp9vk_1941,
    ._warningButton_dp9vk_1942 {
        width: 100%;
    }

    /* ===== PRINTINGS SECTION ===== */
    ._printingsSection_dp9vk_265 {
        overflow-y: visible;
        max-height: none;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #eee;
        width: 100%;
    }

    ._printingsSection_dp9vk_265 h3 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* Hide desktop right column on mobile */
    ._printingsContainer_dp9vk_794 {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: -9999px;
    }

    /* Hide large card images on mobile */
    ._currentPrintingCard_dp9vk_592,
    ._currentCardImage_dp9vk_670,
    ._printingItem_dp9vk_201 {
        display: none;
    }

    /* Printings list - visible on mobile */
    ._printingsList_dp9vk_278 {
        max-height: none;
        overflow-y: visible;
        min-height: 0;
        background: transparent;
        border: none;
        padding: 0;
        gap: 12px;
        margin-bottom: 20px;
    }

    ._printingsGrid_dp9vk_176 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-right: 0;
    }

    /* Current printing info on mobile */
    ._currentPrintingContainer_dp9vk_218 {
        width: 100%;
        padding: 12px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        margin-bottom: 16px;
    }

    ._currentPrintingInfo_dp9vk_217 {
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    ._currentPrintingName_dp9vk_886 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    ._printingDetails_dp9vk_892 {
        font-size: 13px;
        line-height: 1.5;
    }

    ._printingPrice_dp9vk_906 {
        font-size: 15px;
        margin-top: 8px;
        font-weight: 600;
    }

    ._oracleText_dp9vk_914 {
        font-size: 14px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    /* ===== SET INFO & SYMBOLS ===== */
    ._setInfo_dp9vk_947 {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }

    ._setSymbol_dp9vk_998 {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        max-width: 18px;
        max-height: 18px;
    }

    ._setInfo_dp9vk_947 span {
        font-size: 13px;
        text-align: left;
    }

    ._collectionIndicator_dp9vk_969 {
        font-size: 11px;
        padding: 3px 6px;
        margin-top: 6px;
    }

    /* ===== NAVIGATION ARROWS ===== */
    ._navArrowExternal_dp9vk_100,
    ._navArrowLeft_dp9vk_131,
    ._navArrowRight_dp9vk_135 {
        display: none;
    }

    /* ===== DECK USAGE ===== */
    ._deckUsageSection_dp9vk_2076 {
        margin-top: 16px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 6px;
    }

    ._deckUsageList_dp9vk_2083 {
        font-size: 13px;
    }

    /* ===== ORACLE TAGS ===== */
    ._oracleTagsContainer_dp9vk_2088,
    [data-oracle-tags],
    #_oracle-tags-integration_dp9vk_1 {
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
        padding: 0;
        position: relative;
        left: 0;
        right: 0;
    }

    /* ===== VERSION DROPDOWN ===== */
    ._versionDropdown_dp9vk_308 {
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }

    /* ===== TOGGLE SWITCHES ===== */
    ._toggleSwitch_dp9vk_371 {
        width: 50px;
        height: 26px;
    }

    ._toggleSlider_dp9vk_395:before {
        height: 20px;
        width: 20px;
    }

    input:checked + ._toggleSlider_dp9vk_395:before {
        transform: translateX(24px);
    }

    /* ===== FOIL EFFECTS ===== */
    ._foilActiveText_dp9vk_564 {
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
    }

    /* ===== PRINTING LABELS ===== */
    ._printingLabel_dp9vk_1054 {
        font-size: 13px;
        padding: 8px;
    }

    ._currentLabel_dp9vk_1028 {
        font-size: 11px;
        padding: 4px 8px;
    }
}
/* HomePage - Dramatic Minimal Dark Theme */
/* "Every breath of fog remembers a death" */

._homepage_1cf0k_4 {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #0a120a 0%, #000000 100%);
  position: relative;
  overflow-x: hidden;
  color: #8a9d8a;
}

/* Layered Fog - Living, breathing atmosphere */
._fogLayer_1cf0k_13 {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  transition: transform 0.3s ease-out;
  mix-blend-mode: screen;
}

._fogBack_1cf0k_24 {
  background: radial-gradient(ellipse 800px 600px at 30% 50%, rgba(34, 60, 34, 0.4) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 20s ease-in-out infinite;
  z-index: 1;
}

._fogMid_1cf0k_30 {
  background: radial-gradient(ellipse 1000px 700px at 70% 40%, rgba(45, 65, 45, 0.3) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 25s ease-in-out infinite reverse;
  animation-delay: -10s;
  z-index: 2;
}

._fogFront_1cf0k_37 {
  background: radial-gradient(ellipse 600px 800px at 50% 60%, rgba(56, 76, 56, 0.25) 0%, transparent 50%);
  animation: _breathe_1cf0k_1 30s ease-in-out infinite;
  animation-delay: -5s;
  z-index: 3;
}

@keyframes _breathe_1cf0k_1 {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Vignette - Frame the darkness */
._vignette_1cf0k_56 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 4;
}

/* Hero Section - Dramatic entrance */
._heroSection_1cf0k_68 {
  position: relative;
  z-index: 10;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

._heroContent_1cf0k_79 {
  text-align: center;
  margin-bottom: 3rem;
  animation: _fadeInUp_1cf0k_1 1.5s ease-out;
}

@keyframes _fadeInUp_1cf0k_1 {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._siteTitle_1cf0k_96 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 5rem;
  font-weight: 300;
  color: #c8d5c8;
  text-transform: uppercase;
  letter-spacing: 12px;
  margin: 0;
  text-shadow: 
    0 0 40px rgba(138, 157, 138, 0.5),
    0 0 80px rgba(138, 157, 138, 0.3);
  opacity: 0.95;
}

._titleUnderline_1cf0k_110 {
  width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, #8a9d8a, transparent);
  margin: 2rem auto;
  opacity: 0.6;
}

._siteTagline_1cf0k_118 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: #6a7a6a;
  letter-spacing: 2px;
  margin: 0;
  opacity: 0.8;
}

/* Navigation Cards - Minimal gates */
._navGrid_1cf0k_130 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 900px;
  width: 100%;
  animation: _fadeInUp_1cf0k_1 1.5s ease-out 0.3s both;
}

._navCard_1cf0k_139 {
  position: relative;
  padding: 3rem 2rem;
  background: rgba(15, 25, 15, 0.6);
  border: 1px solid rgba(138, 157, 138, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

._navCard_1cf0k_139::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(138, 157, 138, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

._navCard_1cf0k_139:hover {
  border-color: rgba(138, 157, 138, 0.6);
  background: rgba(20, 30, 20, 0.8);
  transform: translateY(-4px);
}

._navCard_1cf0k_139:hover::before {
  opacity: 1;
}

._navCard_1cf0k_139 h3 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #c8d5c8;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

._navCard_1cf0k_139 p {
  font-size: 0.9rem;
  color: #6a7a6a;
  font-style: italic;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
}

._cardGlow_1cf0k_191 {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(138, 157, 138, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

._navCard_1cf0k_139:hover ._cardGlow_1cf0k_191 {
  opacity: 1;
}

/* Featured Card in Fog */
._featuredCardContainer_1cf0k_208 {
  position: fixed;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 3;
  width: 350px;
  height: 488px;
  pointer-events: none;
}

._featuredCard_1cf0k_208 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: _fadeInOut_1cf0k_1 7s ease-in-out forwards;
  filter: drop-shadow(0 0 30px rgba(138, 157, 138, 0.3));
  border-radius: 16px;
}

@keyframes _fadeInOut_1cf0k_1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  20% {
    opacity: 0.6;
    transform: scale(1);
  }
  80% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Content Sections */
._contentSections_1cf0k_249 {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem 2rem;
}

._section_1cf0k_257 {
  margin-bottom: 3rem;
}

._sectionTitle_1cf0k_261 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 300;
  color: #a8b5a8;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Recent Decks - Minimal arsenal */
._recentDecks_1cf0k_274 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

._deckItem_1cf0k_282 {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._deckItem_1cf0k_282:hover {
  transform: translateY(-8px);
}

._deckImageContainer_1cf0k_292 {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  overflow: hidden;
  background: rgba(10, 18, 10, 0.8);
  border: 1px solid rgba(138, 157, 138, 0.2);
}

._deckImage_1cf0k_292 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

._deckItem_1cf0k_282:hover ._deckImage_1cf0k_292 {
  transform: scale(1.05);
}

._deckOverlay_1cf0k_316 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

._deckItem_1cf0k_282:hover ._deckOverlay_1cf0k_316 {
  opacity: 0.3;
}

._deckDetails_1cf0k_331 {
  padding: 1.5rem 0;
}

._deckName_1cf0k_335 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #c8d5c8;
  letter-spacing: 2px;
  margin: 0 0 0.5rem 0;
}

._deckMeta_1cf0k_344 {
  font-size: 0.85rem;
  color: #6a7a6a;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Community Section - Dark and minimal */
._communitySection_1cf0k_352 {
  border-top: 1px solid rgba(138, 157, 138, 0.1);
  padding-top: 2rem;
}

._communityGrid_1cf0k_357 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

._communityCard_1cf0k_363 {
  padding: 1.5rem 1.25rem;
  background: rgba(15, 25, 15, 0.4);
  border: 1px solid rgba(138, 157, 138, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._communityCard_1cf0k_363:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1cf0k_363._disabled_1cf0k_375 {
  opacity: 0.5;
}

._communityCard_1cf0k_363._disabled_1cf0k_375:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1cf0k_384 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 300;
  color: #a8b5a8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}

._communityText_1cf0k_394 {
  font-size: 0.85rem;
  color: #7a8a7a;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  font-style: italic;
}

._linkButton_1cf0k_402 {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: transparent;
  border: 1px solid #8a9d8a;
  color: #a8b5a8;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

._linkButton_1cf0k_402:hover {
  background: rgba(138, 157, 138, 0.1);
  border-color: #a8b5a8;
  color: #c8d5c8;
  box-shadow: 0 0 20px rgba(138, 157, 138, 0.2);
}

._disabledButton_1cf0k_424 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1cf0k_424:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

._communityCard_1cf0k_363 {
  padding: 3rem 2rem;
  background: rgba(15, 25, 15, 0.4);
  border: 1px solid rgba(138, 157, 138, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

._communityCard_1cf0k_363:hover {
  border-color: rgba(138, 157, 138, 0.3);
  background: rgba(20, 30, 20, 0.6);
}

._communityCard_1cf0k_363._disabled_1cf0k_375 {
  opacity: 0.5;
}

._communityCard_1cf0k_363._disabled_1cf0k_375:hover {
  border-color: rgba(138, 157, 138, 0.15);
  background: rgba(15, 25, 15, 0.4);
}

._communityTitle_1cf0k_384 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #a8b5a8;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
}

._communityText_1cf0k_394 {
  font-size: 0.95rem;
  color: #7a8a7a;
  line-height: 1.8;
  margin: 0 0 2rem 0;
  font-style: italic;
}

._linkButton_1cf0k_402 {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  background: transparent;
  border: 1px solid #8a9d8a;
  color: #a8b5a8;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

._linkButton_1cf0k_402:hover {
  background: rgba(138, 157, 138, 0.1);
  border-color: #a8b5a8;
  color: #c8d5c8;
  box-shadow: 0 0 20px rgba(138, 157, 138, 0.2);
}

._disabledButton_1cf0k_424 {
  opacity: 0.4;
  cursor: not-allowed;
}

._disabledButton_1cf0k_424:hover {
  background: transparent;
  border-color: #8a9d8a;
  color: #a8b5a8;
  box-shadow: none;
}

/* Bottom fade */
._bottomFade_1cf0k_510 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #000000 0%, transparent 100%);
  pointer-events: none;
  z-index: 9;
}

/* Responsive Design */
@media (max-width: 1200px) {
  ._featuredCardContainer_1cf0k_208 {
    display: none;
  }
}

@media (max-width: 768px) {
  ._siteTitle_1cf0k_96 {
    font-size: 3rem;
    letter-spacing: 6px;
  }

  ._siteTagline_1cf0k_118 {
    font-size: 0.95rem;
  }

  ._navGrid_1cf0k_130 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  ._navCard_1cf0k_139 {
    padding: 2rem 1.5rem;
  }

  ._recentDecks_1cf0k_274 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  ._communityGrid_1cf0k_357 {
    grid-template-columns: 1fr;
  }

  ._sectionTitle_1cf0k_261 {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  ._fogLayer_1cf0k_13,
  ._navCard_1cf0k_139,
  ._deckItem_1cf0k_282,
  ._communityCard_1cf0k_363,
  ._heroContent_1cf0k_79 {
    animation: none;
    transition: none;
  }

  ._fogBack_1cf0k_24,
  ._fogMid_1cf0k_30,
  ._fogFront_1cf0k_37 {
    animation: none;
  }
}
._scryfallStatusBanner_dhww2_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: _slideDown_dhww2_1 0.3s ease-out;
}

@keyframes _slideDown_dhww2_1 {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

._bannerContent_dhww2_24 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

._bannerIcon_dhww2_33 {
  font-size: 24px;
  flex-shrink: 0;
  animation: _pulse_dhww2_1 2s ease-in-out infinite;
}

@keyframes _pulse_dhww2_1 {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

._bannerMessage_dhww2_50 {
  flex: 1;
}

._bannerMessage_dhww2_50 strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

._bannerMessage_dhww2_50 p {
  margin: 0;
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.4;
}

._bannerDismiss_dhww2_68 {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

._bannerDismiss_dhww2_68:hover {
  background: rgba(255, 255, 255, 0.3);
}

._bannerDismiss_dhww2_68:active {
  background: rgba(255, 255, 255, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  ._bannerContent_dhww2_24 {
    padding: 10px 15px;
    gap: 10px;
  }

  ._bannerIcon_dhww2_33 {
    font-size: 20px;
  }

  ._bannerMessage_dhww2_50 strong {
    font-size: 14px;
  }

  ._bannerMessage_dhww2_50 p {
    font-size: 12px;
  }

  ._bannerDismiss_dhww2_68 {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}
/* Store Page Styles */

._storePage_61bm4_3 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
}

._storeContent_61bm4_10 {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

._storeSidebar_61bm4_21 {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

._storeMain_61bm4_31 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
._storeHeader_61bm4_39 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  background: white;
}

._storeTitle_61bm4_48 h1 {
  font-size: 2rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

._storeSubtitle_61bm4_54 {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
}

._cartButton_61bm4_60 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: auto;
}

._cartButton_61bm4_60:hover:not(:disabled) {
  background: #4a6f4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(61, 94, 61, 0.3);
}

._cartButton_61bm4_60:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._cartInfo_61bm4_87 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._cartText_61bm4_93 {
  font-size: 0.875rem;
  font-weight: 600;
}

._cartCount_61bm4_98 {
  background: #ef4444;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
}

._cartTotal_61bm4_106 {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filters */
._storeFilters_61bm4_112 {
  background: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._searchBox_61bm4_121 {
  width: 100%;
}

._searchInput_61bm4_125 {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.2s;
}

._searchInput_61bm4_125:focus {
  outline: none;
  border-color: #3b82f6;
}

._filterRow_61bm4_139 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._filterLabel_61bm4_145 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

._filterSelect_61bm4_154 {
  padding: 0.5rem 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
  width: 100%;
}

._filterSelect_61bm4_154:focus {
  outline: none;
  border-color: #3b82f6;
}

._foilCheckbox_61bm4_170 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

._foilCheckbox_61bm4_170 input[type="checkbox"] {
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
}

._colorIdentityFilter_61bm4_190 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  flex-wrap: wrap;
}

._colorOption_61bm4_202 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.2s;
}

._colorOption_61bm4_202:hover {
  background: #f3f4f6;
}

._colorOption_61bm4_202 input[type="checkbox"] {
  margin: 0;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  vertical-align: middle;
}

._colorOption_61bm4_202 input[type="checkbox"]:focus {
  outline: none;
}

/* Scope to store page only */
._storePage_61bm4_3 ._manaSymbol_61bm4_231 {
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

._clearFilters_61bm4_237 {
  padding: 0.5rem 0.75rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

._clearFilters_61bm4_237:hover {
  background: #dc2626;
}

/* Inventory Grid */
._inventoryScroll_61bm4_255 {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem 1rem 1rem;
}

._inventoryGrid_61bm4_261 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  align-items: start;
}

._inventoryCard_61bm4_268 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  display: block;
  height: fit-content;
}

._inventoryCard_61bm4_268:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

._cardImageContainer_61bm4_284 {
  position: relative;
  width: 100%;
  height: 240px;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
}

._cardImage_61bm4_284 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 8px 8px 0 0;
}

._rarityIndicator_61bm4_305 {
  position: absolute;
  top: 28px;
  left: 8px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.5rem;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
  border: 2px solid white;
}

._rarityCommon_61bm4_323 {
  background: #1f2937;
}

._rarityUncommon_61bm4_327 {
  background: #9ca3af;
}

._rarityRare_61bm4_331 {
  background: #d97706;
}

._rarityMythic_61bm4_335 {
  background: #dc2626;
}

._raritySpecial_61bm4_339 {
  background: #7c3aed;
}

._storePage_61bm4_3 ._foilIndicator_61bm4_343 {
  position: absolute;
  top: 48px;
  left: 12.9px;
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  max-width: 9px;
  max-height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #ff0000 0%,
    #ff7f00 16.67%,
    #ffff00 33.33%,
    #00ff00 50%,
    #0000ff 66.67%,
    #8b00ff 83.33%,
    #ff0000 100%
  );
  border: 1px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.8);
  animation: _foilPulse_61bm4_1 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes _foilPulse_61bm4_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

._foilOverlay_61bm4_381 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.4) 0%,
    rgba(255, 154, 0, 0.4) 10%,
    rgba(208, 222, 33, 0.4) 20%,
    rgba(79, 220, 74, 0.4) 30%,
    rgba(63, 218, 216, 0.4) 40%,
    rgba(47, 201, 226, 0.4) 50%,
    rgba(28, 127, 238, 0.4) 60%,
    rgba(95, 21, 242, 0.4) 70%,
    rgba(186, 12, 248, 0.4) 80%,
    rgba(251, 7, 217, 0.4) 90%,
    rgba(255, 0, 0, 0.4) 100%
  );
  background-size: 200% 200%;
  animation: _foilShimmer_61bm4_1 3s linear infinite;
  opacity: 1;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes _foilShimmer_61bm4_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

._cardPriceBadge_61bm4_421 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 3;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

._recentlyPulledBadge_61bm4_436 {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

._cardInfo_61bm4_450 {
  padding: 0.75rem;
  margin: 0;
}

._cardMeta_61bm4_455 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
}

._cardSet_61bm4_463 {
  color: #6b7280;
  font-weight: 500;
}

._cardRarity_61bm4_468 {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
}

._rarityCommon_61bm4_323 { background: #9ca3af; color: white; }
._rarityUncommon_61bm4_327 { background: #6b7280; color: white; }
._rarityRare_61bm4_331 { background: #fbbf24; color: #78350f; }
._rarityMythic_61bm4_335 { background: #ef4444; color: white; }
._raritySpecial_61bm4_339 { background: #8b5cf6; color: white; }

._cardCondition_61bm4_482,
._cardStock_61bm4_483 {
  font-size: 0.7rem;
  color: #6b7280;
  margin-bottom: 0.125rem;
}

._cardCondition_61bm4_482 strong,
._cardStock_61bm4_483 strong {
  color: #1f2937;
}

._storePage_61bm4_3 ._cardActions_61bm4_494 {
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  height: auto;
}

._cardPrice_61bm4_421 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
  margin: 0;
}

._addToCartBtn_61bm4_515 {
  padding: 0.35rem 0.75rem;
  height: 2rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  max-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

._addToCartBtn_61bm4_515:hover:not(:disabled) {
  background: #2d4a2d;
}

._addToCartBtn_61bm4_515:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._storePage_61bm4_3 ._cartQuantityControls_61bm4_544 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
  height: 2rem;
}

._storePage_61bm4_3 ._qtyBtn_61bm4_555 {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  background: #3d5e3d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

._qtyBtn_61bm4_555:hover:not(:disabled) {
  background: #2d4a2d;
}

._qtyBtn_61bm4_555:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._qtyDisplay_61bm4_583 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  min-width: 1.5rem;
  text-align: center;
  line-height: 2rem;
}

/* Loading and Error States */
._storeLoading_61bm4_593,
._storeError_61bm4_594 {
  text-align: center;
  padding: 4rem 2rem;
}

._loadingSpinner_61bm4_599 {
  width: 3rem;
  height: 3rem;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: _spin_61bm4_1 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes _spin_61bm4_1 {
  to { transform: rotate(360deg); }
}

._storeError_61bm4_594 h2 {
  color: #ef4444;
  margin-bottom: 1rem;
}

._storeError_61bm4_594 button {
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

._noResults_61bm4_630 {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 768px) {
  ._storePage_61bm4_3 {
    padding: 1rem;
  }

  ._storeHeader_61bm4_39 {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  ._cartButton_61bm4_60 {
    width: 100%;
    justify-content: center;
  }

  ._filterRow_61bm4_139 {
    flex-direction: column;
  }

  ._filterSelect_61bm4_154,
  ._foilCheckbox_61bm4_170 {
    width: 100%;
  }

  ._clearFilters_61bm4_237 {
    width: 100%;
    margin-left: 0;
  }

  ._inventoryGrid_61bm4_261 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
}
/* Cart Page Styles */

._cart-page_gmbrr_3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Header */
._cart-header_gmbrr_10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

._cart-header_gmbrr_10 h1 {
  font-size: 2rem;
  color: #1f2937;
  margin: 0;
}

._continue-shopping-link_gmbrr_25 {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

._continue-shopping-link_gmbrr_25:hover {
  color: #2563eb;
}

/* Empty Cart */
._cart-empty_gmbrr_40 {
  text-align: center;
  padding: 4rem 2rem;
}

._cart-empty_gmbrr_40 h1 {
  color: #1f2937;
  margin-bottom: 1rem;
}

._cart-empty_gmbrr_40 p {
  color: #6b7280;
  margin-bottom: 2rem;
}

._continue-shopping-btn_gmbrr_55 {
  padding: 0.75rem 2rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._continue-shopping-btn_gmbrr_55:hover {
  background: #2563eb;
}

/* Cart Layout */
._cart-layout_gmbrr_72 {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
}

/* Cart Items */
._cart-items_gmbrr_79 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._cart-item_gmbrr_79 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 1.5rem;
  align-items: center;
  transition: box-shadow 0.2s;
  position: relative;
}

._cart-item_gmbrr_79:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._cart-item-image_gmbrr_102 {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

._cart-item-image_gmbrr_102 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._foil-indicator_gmbrr_117 {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
}

._cart-item-details_gmbrr_127 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._cart-item-details_gmbrr_127 h3 {
  font-size: 1.125rem;
  color: #1f2937;
  margin: 0;
}

._cart-item-meta_gmbrr_139 {
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._separator_gmbrr_147 {
  color: #d1d5db;
}

._foil-text_gmbrr_151 {
  color: #f59e0b;
  font-weight: 600;
}

._cart-item-price_gmbrr_156 {
  font-size: 0.875rem;
  color: #6b7280;
}

._cart-item-quantity_gmbrr_161 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

._cart-item-quantity_gmbrr_161 label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
}

._quantity-controls_gmbrr_175 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.5rem;
  border-radius: 8px;
}

._qty-btn_gmbrr_184 {
  width: 2rem;
  height: 2rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

._qty-btn_gmbrr_184:hover:not(:disabled) {
  background: #2563eb;
}

._qty-btn_gmbrr_184:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._qty-input_gmbrr_206 {
  width: 3rem;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

._stock-note_gmbrr_216 {
  font-size: 0.75rem;
  color: #6b7280;
}

._cart-item-total_gmbrr_221 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #059669;
  min-width: 100px;
  text-align: right;
}

._remove-item-btn_gmbrr_229 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

._remove-item-btn_gmbrr_229:hover {
  background: #dc2626;
}

._cart-actions_gmbrr_252 {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}

._clear-cart-btn_gmbrr_258 {
  padding: 0.5rem 1rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._clear-cart-btn_gmbrr_258:hover {
  background: #dc2626;
}

/* Order Summary */
._order-summary_gmbrr_275 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

._order-summary_gmbrr_275 h2 {
  font-size: 1.5rem;
  color: #1f2937;
  margin: 0 0 1.5rem 0;
}

._summary-line_gmbrr_291 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: #6b7280;
}

._summary-divider_gmbrr_298 {
  height: 1px;
  background: #e5e7eb;
  margin: 1.5rem 0;
}

._summary-total_gmbrr_304 {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

._checkout-disabled-notice_gmbrr_313 {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

._checkout-disabled-notice_gmbrr_313 strong {
  color: #92400e;
  display: block;
  margin-bottom: 0.5rem;
}

._checkout-disabled-notice_gmbrr_313 p {
  color: #78350f;
  margin: 0;
}

._checkout-btn_gmbrr_333 {
  width: 100%;
  padding: 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 1rem;
}

._checkout-btn_gmbrr_333:hover:not(:disabled) {
  background: #2563eb;
}

._checkout-btn_gmbrr_333:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

._payment-icons_gmbrr_356 {
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
}

._payment-note_gmbrr_362 {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

._payment-methods_gmbrr_369 {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

._affiliate-section_gmbrr_376 {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

._affiliate-section_gmbrr_376 h3 {
  font-size: 1rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

._affiliate-note_gmbrr_388 {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

._affiliate-btn_gmbrr_394 {
  width: 100%;
  padding: 0.75rem;
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._affiliate-btn_gmbrr_394:hover:not(:disabled) {
  background: #7c3aed;
}

._affiliate-btn_gmbrr_394:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 1024px) {
  ._cart-layout_gmbrr_72 {
    grid-template-columns: 1fr;
  }

  ._order-summary_gmbrr_275 {
    position: static;
  }
}

@media (max-width: 768px) {
  ._cart-page_gmbrr_3 {
    padding: 1rem;
  }

  ._cart-header_gmbrr_10 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  ._cart-item_gmbrr_79 {
    grid-template-columns: 80px 1fr;
    gap: 1rem;
  }

  ._cart-item-image_gmbrr_102 {
    width: 80px;
    height: 112px;
  }

  ._cart-item-details_gmbrr_127 {
    grid-column: 1 / -1;
  }

  ._cart-item-quantity_gmbrr_161,
  ._cart-item-total_gmbrr_221 {
    grid-column: 1 / -1;
    text-align: left;
  }

  ._cart-item-quantity_gmbrr_161 {
    align-items: flex-start;
  }

  ._remove-item-btn_gmbrr_229 {
    top: 0.5rem;
    right: 0.5rem;
  }
}