/*
 * Dark theme overrides for Administrate default views.
 * Scoped to .app-container (Administrate's top-level wrapper)
 * so these styles never bleed into non-admin pages.
 */

/* ── Base / Layout ─────────────────────────────────────────── */
.app-container {
  background-color: var(--color-background, #000);
}

/* ── Navigation sidebar (Administrate's built-in — hidden, we use our own header) */
.app-container .navigation {
  display: none;
}

/* ── Main content card ─────────────────────────────────────── */
.app-container .main-content {
  background-color: var(--color-surface, #0f0f0f);
  border: 1px solid var(--color-border, #2e2e2e);
  box-shadow: none;
  color: var(--color-foreground, #f8f8f8);
  min-width: 0;
  border-radius: 0.5rem;
}

.app-container .main-content__header {
  border-bottom-color: var(--color-border, #2e2e2e);
}

.app-container .main-content__page-title {
  color: var(--color-foreground, #f8f8f8);
  font-family: var(--font-display, 'Playfair Display', serif);
}

/* ── Tables ────────────────────────────────────────────────── */
.app-container table {
  color: var(--color-foreground, #f8f8f8);
}

.app-container table a {
  color: var(--color-foreground, #f8f8f8);
}

.app-container table a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container thead {
  background-color: var(--color-muted, #1c1c1c);
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container tr {
  border-bottom-color: var(--color-border, #2e2e2e);
}

.app-container tbody tr:hover {
  background-color: var(--color-muted, #1c1c1c) !important;
}

.app-container th {
  color: var(--color-muted-foreground, #b3b3b3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-container td {
  color: var(--color-foreground, #f8f8f8);
}

/* ── Attribute detail view (show pages) ────────────────────── */
.app-container .attribute-label {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .attribute-data {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .attribute-data a {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .attribute-data a:hover {
  text-decoration: underline;
}

.app-container .attribute--nested {
  border-color: var(--color-border, #2e2e2e);
  background-color: var(--color-muted, #1c1c1c);
}

.app-container dl {
  color: var(--color-foreground, #f8f8f8);
}

/* ── Fieldsets / legends ───────────────────────────────────── */
.app-container legend {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .field-unit--nested {
  border-color: var(--color-border, #2e2e2e);
}

.app-container .field-unit__label {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Forms ──────────────────────────────────────────────────── */
.app-container label {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container input,
.app-container select,
.app-container textarea {
  color: var(--color-foreground, #f8f8f8);
}

.app-container [type="color"],
.app-container [type="date"],
.app-container [type="datetime-local"],
.app-container [type="email"],
.app-container [type="month"],
.app-container [type="number"],
.app-container [type="password"],
.app-container [type="search"],
.app-container [type="tel"],
.app-container [type="text"],
.app-container [type="time"],
.app-container [type="url"],
.app-container [type="week"],
.app-container input:not([type]),
.app-container textarea {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

.app-container [type="color"]:hover,
.app-container [type="date"]:hover,
.app-container [type="datetime-local"]:hover,
.app-container [type="email"]:hover,
.app-container [type="month"]:hover,
.app-container [type="number"]:hover,
.app-container [type="password"]:hover,
.app-container [type="search"]:hover,
.app-container [type="tel"]:hover,
.app-container [type="text"]:hover,
.app-container [type="time"]:hover,
.app-container [type="url"]:hover,
.app-container [type="week"]:hover,
.app-container input:not([type]):hover,
.app-container textarea:hover {
  border-color: var(--color-muted-foreground, #b3b3b3) !important;
}

.app-container [type="color"]:focus,
.app-container [type="date"]:focus,
.app-container [type="datetime-local"]:focus,
.app-container [type="email"]:focus,
.app-container [type="month"]:focus,
.app-container [type="number"]:focus,
.app-container [type="password"]:focus,
.app-container [type="search"]:focus,
.app-container [type="tel"]:focus,
.app-container [type="text"]:focus,
.app-container [type="time"]:focus,
.app-container [type="url"]:focus,
.app-container [type="week"]:focus,
.app-container input:not([type]):focus,
.app-container textarea:focus {
  border-color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container select {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.app-container .button,
.app-container button[type="submit"],
.app-container input[type="submit"] {
  background-color: var(--color-accent, hsl(45, 95%, 55%));
  color: var(--color-accent-contrast, hsl(30, 20%, 10%));
  border: none;
  font-weight: 600;
}

.app-container .button:not(.link):hover,
.app-container button[type="submit"]:hover,
.app-container input[type="submit"]:hover {
  background-color: var(--color-accent-secondary, hsl(35, 85%, 52%)) !important;
  color: var(--color-accent-contrast, hsl(30, 20%, 10%)) !important;
  filter: brightness(1.07);
}

.app-container .button--danger {
  background-color: #991b1b !important;
  color: #fca5a5 !important;
  border: 1px solid #7f1d1d !important;
}

.app-container .button--danger:not(.link):hover {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

.app-container .button--alt {
  background-color: transparent;
  border: 1px solid var(--color-accent, hsl(45, 95%, 55%));
  color: var(--color-accent, hsl(45, 95%, 55%));
}

/* ── Search ────────────────────────────────────────────────── */
.app-container .search__input {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

.app-container .search__input:focus {
  border-color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container .search__eyeglass-icon,
.app-container .search__clear-icon {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Pagination ────────────────────────────────────────────── */
.app-container .pagination {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .pagination a {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .pagination a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .pagination .current {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

/* ── Flashes ───────────────────────────────────────────────── */
.app-container .flashes {
  padding: 0 2rem;
}

.app-container .flashes__item {
  border-radius: 0.375rem;
}

/* ── Cell / sort labels ────────────────────────────────────── */
.app-container .cell-label a {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .cell-label a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container .cell-label__sort-indicator svg {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Nested HasMany / BelongsTo tables ─────────────────────── */
.app-container .attribute-data table {
  border: 1px solid var(--color-border, #2e2e2e);
  border-radius: 0.375rem;
  overflow: hidden;
}

.app-container .attribute-data thead {
  background-color: var(--color-muted, #1c1c1c);
}

/* ── Links ─────────────────────────────────────────────────── */
.app-container .main-content a {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .main-content a:hover {
  text-decoration: underline;
}

/* Table row links — white text, gold on hover */
.app-container .main-content table td a.action-show {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .main-content table td a.action-show:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
  text-decoration: none;
}

/* Action buttons in table rows */
.app-container .main-content table td .button,
.app-container .main-content table td a.button {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
/* Edit Session Chat UI */

#chat-messages {
  scroll-behavior: smooth;
}

#chat-messages::-webkit-scrollbar {
  width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Message animations */
.edit-message {
  animation: editMessageSlideIn 0.3s ease-out;
}

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

/* Loading placeholder pulse */
#loading-placeholder p {
  animation: editPulse 1.5s ease-in-out infinite;
}

@keyframes editPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* ==========================================================================
   GEMSTONE TYPE SELECTOR
   Visual button grid for selecting gemstone types
   ========================================================================== */

/* ---------------------------------------------------------------------
   CSS Variables - Gemstone Colors
   Each gemstone has a base color and brightened (hover) variant
   --------------------------------------------------------------------- */
:root {
  /* Diamonds */
  --gem-white-diamond: #E8E8E8;
  --gem-white-diamond-bright: #FFFFFF;
  --gem-pink-diamond: #F4B8C5;
  --gem-pink-diamond-bright: #FFCDD8;
  --gem-yellow-diamond: #F9E076;
  --gem-yellow-diamond-bright: #FFEC99;
  --gem-blue-diamond: #6CA0DC;
  --gem-blue-diamond-bright: #8FBFEF;
  --gem-black-diamond: #2C2C2C;
  --gem-black-diamond-bright: #4A4A4A;
  --gem-green-diamond: #7AC74F;
  --gem-green-diamond-bright: #9AE068;
  --gem-orange-diamond: #F5A623;
  --gem-orange-diamond-bright: #FFBE4D;
  --gem-champagne-diamond: #C9A66B;
  --gem-champagne-diamond-bright: #E0C08A;
  --gem-salt-pepper-diamond: #8A8D8F;
  --gem-salt-pepper-diamond-bright: #A8ABAE;

  /* Sapphires */
  --gem-blue-sapphire: #0F52BA;
  --gem-blue-sapphire-bright: #3A7DE8;
  --gem-teal-sapphire: #367588;
  --gem-teal-sapphire-bright: #4A9BB2;
  --gem-green-sapphire: #4A9C5D;
  --gem-green-sapphire-bright: #66BE7A;
  --gem-yellow-sapphire: #E5B73B;
  --gem-yellow-sapphire-bright: #F5D060;
  --gem-pink-sapphire: #E75480;
  --gem-pink-sapphire-bright: #FF7AA3;
  --gem-purple-sapphire: #7851A9;
  --gem-purple-sapphire-bright: #9B70D1;
  --gem-padparadscha-sapphire: #E89078;
  --gem-padparadscha-sapphire-bright: #FFAB95;
  --gem-orange-sapphire: #E86A33;
  --gem-orange-sapphire-bright: #FF8A55;
  --gem-parti-sapphire: #5B8C5A;
  --gem-parti-sapphire-bright: #78B377;

  /* Other Gemstones */
  --gem-ruby: #E0115F;
  --gem-ruby-bright: #FF3A7F;
  --gem-emerald: #50C878;
  --gem-emerald-bright: #70E898;
  --gem-aquamarine: #7FDBDB;
  --gem-aquamarine-bright: #A0F0F0;
  --gem-morganite: #E8B4B8;
  --gem-morganite-bright: #FFCDD0;
  --gem-blue-topaz: #4FC3F7;
  --gem-blue-topaz-bright: #7DD8FF;

  /* Pearl (future) */
  --gem-pearl: #F5F5DC;
  --gem-pearl-bright: #FFFFF0;
}

/* ---------------------------------------------------------------------
   Category Layout
   --------------------------------------------------------------------- */
.gemstone-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gemstone-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gemstone-category-heading {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone-btn-text);
  padding-left: 2px;
}

/* ---------------------------------------------------------------------
   Grid Layout - 6 columns
   --------------------------------------------------------------------- */
.gemstone-selector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

/* Responsive: 4 columns on smaller screens */
@media (max-width: 480px) {
  .gemstone-selector-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .gemstone-category-heading {
    font-size: 9px;
  }
}

/* ---------------------------------------------------------------------
   Base Button Styles - 3D Tactile Raised Effect (matches stone-btn)
   --------------------------------------------------------------------- */
.gemstone-btn {
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px 10px;
  aspect-ratio: 1;
  min-height: 70px;

  /* Reset */
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  /* 3D Raised Surface */
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  border-radius: 8px;

  /* Layered shadows for raised effect */
  box-shadow:
    /* Outer depth shadows */
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    /* Bottom dark edge */
    inset 0 -2px 3px var(--stone-btn-shadow),
    /* Top light edge */
    inset 0 2px 3px var(--stone-btn-highlight),
    /* Left light edge */
    inset 2px 0 3px var(--stone-btn-highlight),
    /* Right dark edge */
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    /* Inner shadow for depth */
    inset 0 0 12px var(--stone-btn-shadow-inner);

  /* Only animate transform (GPU-composited); box-shadow snaps to avoid repaints */
  transition: transform 0.1s ease;
}

/* Subtle top highlight for extra depth */
.gemstone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* Hide the radio input visually */
.gemstone-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------------
   Hover State - Slightly more raised
   --------------------------------------------------------------------- */
.gemstone-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);

  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Active/Pressed State - Pushed in effect
   --------------------------------------------------------------------- */
.gemstone-btn:active {
  transform: translateY(2px);

  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

/* ---------------------------------------------------------------------
   Icon Wrapper & SVGs (matches stone-btn sizing)
   --------------------------------------------------------------------- */
.gemstone-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}

.gemstone-svg-glow,
.gemstone-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Glow layer - behind, hidden by default */
.gemstone-svg-glow {
  z-index: 1;
  opacity: 0;
}

/* Main SVG - colored by gemstone */
.gemstone-svg-main {
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Label
   --------------------------------------------------------------------- */
.gemstone-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Base Selected State - Pushed in with glow (gemstone colors override)
   --------------------------------------------------------------------- */
.gemstone-btn.selected {
  transform: translateY(2px);

  /* Sunken surface */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
}

.gemstone-btn.selected .gemstone-label {
  color: var(--stone-btn-icon-selected);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}

/* ---------------------------------------------------------------------
   GEMSTONE COLOR CLASSES
   Default state: SVG = gemstone color, label = grey
   Hover state: SVG = brightened color, label = brightened color
   Selected state: SVG = white with colored glow, label = white
   --------------------------------------------------------------------- */

/* === DIAMONDS === */

/* White Diamond */
.gemstone-btn.white-diamond .gemstone-svg-main { color: var(--gem-white-diamond); }
.gemstone-btn.white-diamond .gemstone-svg-glow { color: var(--gem-white-diamond); }
.gemstone-btn.white-diamond:hover .gemstone-svg-main { color: var(--gem-white-diamond-bright); }
.gemstone-btn.white-diamond:hover .gemstone-label { color: var(--gem-white-diamond-bright); }
.gemstone-btn.white-diamond.selected {
  outline: 2px solid var(--gem-white-diamond);
  outline-offset: -2px;
  box-shadow:
    /* Gemstone glow */
    0 0 20px rgba(232, 232, 232, 0.4),
    0 0 40px rgba(232, 232, 232, 0.2),
    /* Pressed-in shadows */
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px rgba(232, 232, 232, 0.15);
}
.gemstone-btn.white-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.white-diamond.selected .gemstone-svg-glow {
  opacity: 1;
  color: var(--gem-white-diamond);
  filter: drop-shadow(0 0 6px var(--gem-white-diamond))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.8))
          drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
}

/* Pink Diamond */
.gemstone-btn.pink-diamond .gemstone-svg-main { color: var(--gem-pink-diamond); }
.gemstone-btn.pink-diamond .gemstone-svg-glow { color: var(--gem-pink-diamond); }
.gemstone-btn.pink-diamond:hover .gemstone-svg-main { color: var(--gem-pink-diamond-bright); }
.gemstone-btn.pink-diamond:hover .gemstone-label { color: var(--gem-pink-diamond-bright); }
.gemstone-btn.pink-diamond.selected {
  border-color: var(--gem-pink-diamond);
  box-shadow: 0 0 15px rgba(244, 184, 197, 0.5), 0 0 30px rgba(244, 184, 197, 0.25), inset 0 0 10px rgba(244, 184, 197, 0.15);
}
.gemstone-btn.pink-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pink-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pink-diamond); }

/* Yellow Diamond */
.gemstone-btn.yellow-diamond .gemstone-svg-main { color: var(--gem-yellow-diamond); }
.gemstone-btn.yellow-diamond .gemstone-svg-glow { color: var(--gem-yellow-diamond); }
.gemstone-btn.yellow-diamond:hover .gemstone-svg-main { color: var(--gem-yellow-diamond-bright); }
.gemstone-btn.yellow-diamond:hover .gemstone-label { color: var(--gem-yellow-diamond-bright); }
.gemstone-btn.yellow-diamond.selected {
  border-color: var(--gem-yellow-diamond);
  box-shadow: 0 0 15px rgba(249, 224, 118, 0.5), 0 0 30px rgba(249, 224, 118, 0.25), inset 0 0 10px rgba(249, 224, 118, 0.15);
}
.gemstone-btn.yellow-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.yellow-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-yellow-diamond); }

/* Blue Diamond */
.gemstone-btn.blue-diamond .gemstone-svg-main { color: var(--gem-blue-diamond); }
.gemstone-btn.blue-diamond .gemstone-svg-glow { color: var(--gem-blue-diamond); }
.gemstone-btn.blue-diamond:hover .gemstone-svg-main { color: var(--gem-blue-diamond-bright); }
.gemstone-btn.blue-diamond:hover .gemstone-label { color: var(--gem-blue-diamond-bright); }
.gemstone-btn.blue-diamond.selected {
  border-color: var(--gem-blue-diamond);
  box-shadow: 0 0 15px rgba(108, 160, 220, 0.5), 0 0 30px rgba(108, 160, 220, 0.25), inset 0 0 10px rgba(108, 160, 220, 0.15);
}
.gemstone-btn.blue-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-diamond); }

/* Black Diamond */
.gemstone-btn.black-diamond .gemstone-svg-main { color: var(--gem-black-diamond); }
.gemstone-btn.black-diamond .gemstone-svg-glow { color: var(--gem-black-diamond); }
.gemstone-btn.black-diamond:hover .gemstone-svg-main { color: var(--gem-black-diamond-bright); }
.gemstone-btn.black-diamond:hover .gemstone-label { color: var(--gem-black-diamond-bright); }
.gemstone-btn.black-diamond.selected {
  border-color: var(--gem-black-diamond-bright);
  box-shadow: 0 0 15px rgba(74, 74, 74, 0.5), 0 0 30px rgba(74, 74, 74, 0.25), inset 0 0 10px rgba(74, 74, 74, 0.15);
}
.gemstone-btn.black-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.black-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-black-diamond-bright); }

/* Green Diamond */
.gemstone-btn.green-diamond .gemstone-svg-main { color: var(--gem-green-diamond); }
.gemstone-btn.green-diamond .gemstone-svg-glow { color: var(--gem-green-diamond); }
.gemstone-btn.green-diamond:hover .gemstone-svg-main { color: var(--gem-green-diamond-bright); }
.gemstone-btn.green-diamond:hover .gemstone-label { color: var(--gem-green-diamond-bright); }
.gemstone-btn.green-diamond.selected {
  border-color: var(--gem-green-diamond);
  box-shadow: 0 0 15px rgba(122, 199, 79, 0.5), 0 0 30px rgba(122, 199, 79, 0.25), inset 0 0 10px rgba(122, 199, 79, 0.15);
}
.gemstone-btn.green-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.green-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-green-diamond); }

/* Orange Diamond */
.gemstone-btn.orange-diamond .gemstone-svg-main { color: var(--gem-orange-diamond); }
.gemstone-btn.orange-diamond .gemstone-svg-glow { color: var(--gem-orange-diamond); }
.gemstone-btn.orange-diamond:hover .gemstone-svg-main { color: var(--gem-orange-diamond-bright); }
.gemstone-btn.orange-diamond:hover .gemstone-label { color: var(--gem-orange-diamond-bright); }
.gemstone-btn.orange-diamond.selected {
  border-color: var(--gem-orange-diamond);
  box-shadow: 0 0 15px rgba(245, 166, 35, 0.5), 0 0 30px rgba(245, 166, 35, 0.25), inset 0 0 10px rgba(245, 166, 35, 0.15);
}
.gemstone-btn.orange-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.orange-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-orange-diamond); }

/* Champagne Diamond */
.gemstone-btn.champagne-diamond .gemstone-svg-main { color: var(--gem-champagne-diamond); }
.gemstone-btn.champagne-diamond .gemstone-svg-glow { color: var(--gem-champagne-diamond); }
.gemstone-btn.champagne-diamond:hover .gemstone-svg-main { color: var(--gem-champagne-diamond-bright); }
.gemstone-btn.champagne-diamond:hover .gemstone-label { color: var(--gem-champagne-diamond-bright); }
.gemstone-btn.champagne-diamond.selected {
  border-color: var(--gem-champagne-diamond);
  box-shadow: 0 0 15px rgba(201, 166, 107, 0.5), 0 0 30px rgba(201, 166, 107, 0.25), inset 0 0 10px rgba(201, 166, 107, 0.15);
}
.gemstone-btn.champagne-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.champagne-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-champagne-diamond); }

/* Salt & Pepper Diamond */
.gemstone-btn.salt-pepper-diamond .gemstone-svg-main { color: var(--gem-salt-pepper-diamond); }
.gemstone-btn.salt-pepper-diamond .gemstone-svg-glow { color: var(--gem-salt-pepper-diamond); }
.gemstone-btn.salt-pepper-diamond:hover .gemstone-svg-main { color: var(--gem-salt-pepper-diamond-bright); }
.gemstone-btn.salt-pepper-diamond:hover .gemstone-label { color: var(--gem-salt-pepper-diamond-bright); }
.gemstone-btn.salt-pepper-diamond.selected {
  border-color: var(--gem-salt-pepper-diamond);
  box-shadow: 0 0 15px rgba(138, 141, 143, 0.5), 0 0 30px rgba(138, 141, 143, 0.25), inset 0 0 10px rgba(138, 141, 143, 0.15);
}
.gemstone-btn.salt-pepper-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.salt-pepper-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-salt-pepper-diamond); }


/* === SAPPHIRES === */

/* Blue Sapphire */
.gemstone-btn.blue-sapphire .gemstone-svg-main { color: var(--gem-blue-sapphire); }
.gemstone-btn.blue-sapphire .gemstone-svg-glow { color: var(--gem-blue-sapphire); }
.gemstone-btn.blue-sapphire:hover .gemstone-svg-main { color: var(--gem-blue-sapphire-bright); }
.gemstone-btn.blue-sapphire:hover .gemstone-label { color: var(--gem-blue-sapphire-bright); }
.gemstone-btn.blue-sapphire.selected {
  border-color: var(--gem-blue-sapphire);
  box-shadow: 0 0 15px rgba(15, 82, 186, 0.5), 0 0 30px rgba(15, 82, 186, 0.3), inset 0 0 10px rgba(15, 82, 186, 0.2);
}
.gemstone-btn.blue-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-sapphire); }

/* Teal Sapphire */
.gemstone-btn.teal-sapphire .gemstone-svg-main { color: var(--gem-teal-sapphire); }
.gemstone-btn.teal-sapphire .gemstone-svg-glow { color: var(--gem-teal-sapphire); }
.gemstone-btn.teal-sapphire:hover .gemstone-svg-main { color: var(--gem-teal-sapphire-bright); }
.gemstone-btn.teal-sapphire:hover .gemstone-label { color: var(--gem-teal-sapphire-bright); }
.gemstone-btn.teal-sapphire.selected {
  border-color: var(--gem-teal-sapphire);
  box-shadow: 0 0 15px rgba(54, 117, 136, 0.5), 0 0 30px rgba(54, 117, 136, 0.3), inset 0 0 10px rgba(54, 117, 136, 0.2);
}
.gemstone-btn.teal-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.teal-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-teal-sapphire); }

/* Green Sapphire */
.gemstone-btn.green-sapphire .gemstone-svg-main { color: var(--gem-green-sapphire); }
.gemstone-btn.green-sapphire .gemstone-svg-glow { color: var(--gem-green-sapphire); }
.gemstone-btn.green-sapphire:hover .gemstone-svg-main { color: var(--gem-green-sapphire-bright); }
.gemstone-btn.green-sapphire:hover .gemstone-label { color: var(--gem-green-sapphire-bright); }
.gemstone-btn.green-sapphire.selected {
  border-color: var(--gem-green-sapphire);
  box-shadow: 0 0 15px rgba(74, 156, 93, 0.5), 0 0 30px rgba(74, 156, 93, 0.3), inset 0 0 10px rgba(74, 156, 93, 0.2);
}
.gemstone-btn.green-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.green-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-green-sapphire); }

/* Yellow Sapphire */
.gemstone-btn.yellow-sapphire .gemstone-svg-main { color: var(--gem-yellow-sapphire); }
.gemstone-btn.yellow-sapphire .gemstone-svg-glow { color: var(--gem-yellow-sapphire); }
.gemstone-btn.yellow-sapphire:hover .gemstone-svg-main { color: var(--gem-yellow-sapphire-bright); }
.gemstone-btn.yellow-sapphire:hover .gemstone-label { color: var(--gem-yellow-sapphire-bright); }
.gemstone-btn.yellow-sapphire.selected {
  border-color: var(--gem-yellow-sapphire);
  box-shadow: 0 0 15px rgba(229, 183, 59, 0.5), 0 0 30px rgba(229, 183, 59, 0.3), inset 0 0 10px rgba(229, 183, 59, 0.2);
}
.gemstone-btn.yellow-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.yellow-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-yellow-sapphire); }

/* Pink Sapphire */
.gemstone-btn.pink-sapphire .gemstone-svg-main { color: var(--gem-pink-sapphire); }
.gemstone-btn.pink-sapphire .gemstone-svg-glow { color: var(--gem-pink-sapphire); }
.gemstone-btn.pink-sapphire:hover .gemstone-svg-main { color: var(--gem-pink-sapphire-bright); }
.gemstone-btn.pink-sapphire:hover .gemstone-label { color: var(--gem-pink-sapphire-bright); }
.gemstone-btn.pink-sapphire.selected {
  border-color: var(--gem-pink-sapphire);
  box-shadow: 0 0 15px rgba(231, 84, 128, 0.5), 0 0 30px rgba(231, 84, 128, 0.3), inset 0 0 10px rgba(231, 84, 128, 0.2);
}
.gemstone-btn.pink-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pink-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pink-sapphire); }

/* Purple Sapphire */
.gemstone-btn.purple-sapphire .gemstone-svg-main { color: var(--gem-purple-sapphire); }
.gemstone-btn.purple-sapphire .gemstone-svg-glow { color: var(--gem-purple-sapphire); }
.gemstone-btn.purple-sapphire:hover .gemstone-svg-main { color: var(--gem-purple-sapphire-bright); }
.gemstone-btn.purple-sapphire:hover .gemstone-label { color: var(--gem-purple-sapphire-bright); }
.gemstone-btn.purple-sapphire.selected {
  border-color: var(--gem-purple-sapphire);
  box-shadow: 0 0 15px rgba(120, 81, 169, 0.5), 0 0 30px rgba(120, 81, 169, 0.3), inset 0 0 10px rgba(120, 81, 169, 0.2);
}
.gemstone-btn.purple-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.purple-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-purple-sapphire); }

/* Padparadscha Sapphire */
.gemstone-btn.padparadscha-sapphire .gemstone-svg-main { color: var(--gem-padparadscha-sapphire); }
.gemstone-btn.padparadscha-sapphire .gemstone-svg-glow { color: var(--gem-padparadscha-sapphire); }
.gemstone-btn.padparadscha-sapphire:hover .gemstone-svg-main { color: var(--gem-padparadscha-sapphire-bright); }
.gemstone-btn.padparadscha-sapphire:hover .gemstone-label { color: var(--gem-padparadscha-sapphire-bright); }
.gemstone-btn.padparadscha-sapphire.selected {
  border-color: var(--gem-padparadscha-sapphire);
  box-shadow: 0 0 15px rgba(232, 144, 120, 0.5), 0 0 30px rgba(232, 144, 120, 0.3), inset 0 0 10px rgba(232, 144, 120, 0.2);
}
.gemstone-btn.padparadscha-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.padparadscha-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-padparadscha-sapphire); }

/* Orange Sapphire */
.gemstone-btn.orange-sapphire .gemstone-svg-main { color: var(--gem-orange-sapphire); }
.gemstone-btn.orange-sapphire .gemstone-svg-glow { color: var(--gem-orange-sapphire); }
.gemstone-btn.orange-sapphire:hover .gemstone-svg-main { color: var(--gem-orange-sapphire-bright); }
.gemstone-btn.orange-sapphire:hover .gemstone-label { color: var(--gem-orange-sapphire-bright); }
.gemstone-btn.orange-sapphire.selected {
  border-color: var(--gem-orange-sapphire);
  box-shadow: 0 0 15px rgba(232, 106, 51, 0.5), 0 0 30px rgba(232, 106, 51, 0.3), inset 0 0 10px rgba(232, 106, 51, 0.2);
}
.gemstone-btn.orange-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.orange-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-orange-sapphire); }

/* Parti Sapphire */
.gemstone-btn.parti-sapphire .gemstone-svg-main { color: var(--gem-parti-sapphire); }
.gemstone-btn.parti-sapphire .gemstone-svg-glow { color: var(--gem-parti-sapphire); }
.gemstone-btn.parti-sapphire:hover .gemstone-svg-main { color: var(--gem-parti-sapphire-bright); }
.gemstone-btn.parti-sapphire:hover .gemstone-label { color: var(--gem-parti-sapphire-bright); }
.gemstone-btn.parti-sapphire.selected {
  border-color: var(--gem-parti-sapphire);
  box-shadow: 0 0 15px rgba(91, 140, 90, 0.5), 0 0 30px rgba(91, 140, 90, 0.3), inset 0 0 10px rgba(91, 140, 90, 0.2);
}
.gemstone-btn.parti-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.parti-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-parti-sapphire); }


/* === OTHER GEMSTONES === */

/* Ruby */
.gemstone-btn.ruby .gemstone-svg-main { color: var(--gem-ruby); }
.gemstone-btn.ruby .gemstone-svg-glow { color: var(--gem-ruby); }
.gemstone-btn.ruby:hover .gemstone-svg-main { color: var(--gem-ruby-bright); }
.gemstone-btn.ruby:hover .gemstone-label { color: var(--gem-ruby-bright); }
.gemstone-btn.ruby.selected {
  border-color: var(--gem-ruby);
  box-shadow: 0 0 15px rgba(224, 17, 95, 0.5), 0 0 30px rgba(224, 17, 95, 0.3), inset 0 0 10px rgba(224, 17, 95, 0.2);
}
.gemstone-btn.ruby.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.ruby.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-ruby); }

/* Emerald */
.gemstone-btn.emerald .gemstone-svg-main { color: var(--gem-emerald); }
.gemstone-btn.emerald .gemstone-svg-glow { color: var(--gem-emerald); }
.gemstone-btn.emerald:hover .gemstone-svg-main { color: var(--gem-emerald-bright); }
.gemstone-btn.emerald:hover .gemstone-label { color: var(--gem-emerald-bright); }
.gemstone-btn.emerald.selected {
  border-color: var(--gem-emerald);
  box-shadow: 0 0 15px rgba(80, 200, 120, 0.5), 0 0 30px rgba(80, 200, 120, 0.3), inset 0 0 10px rgba(80, 200, 120, 0.2);
}
.gemstone-btn.emerald.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.emerald.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-emerald); }

/* Aquamarine */
.gemstone-btn.aquamarine .gemstone-svg-main { color: var(--gem-aquamarine); }
.gemstone-btn.aquamarine .gemstone-svg-glow { color: var(--gem-aquamarine); }
.gemstone-btn.aquamarine:hover .gemstone-svg-main { color: var(--gem-aquamarine-bright); }
.gemstone-btn.aquamarine:hover .gemstone-label { color: var(--gem-aquamarine-bright); }
.gemstone-btn.aquamarine.selected {
  border-color: var(--gem-aquamarine);
  box-shadow: 0 0 15px rgba(127, 219, 219, 0.5), 0 0 30px rgba(127, 219, 219, 0.3), inset 0 0 10px rgba(127, 219, 219, 0.2);
}
.gemstone-btn.aquamarine.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.aquamarine.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-aquamarine); }

/* Morganite */
.gemstone-btn.morganite .gemstone-svg-main { color: var(--gem-morganite); }
.gemstone-btn.morganite .gemstone-svg-glow { color: var(--gem-morganite); }
.gemstone-btn.morganite:hover .gemstone-svg-main { color: var(--gem-morganite-bright); }
.gemstone-btn.morganite:hover .gemstone-label { color: var(--gem-morganite-bright); }
.gemstone-btn.morganite.selected {
  border-color: var(--gem-morganite);
  box-shadow: 0 0 15px rgba(232, 180, 184, 0.5), 0 0 30px rgba(232, 180, 184, 0.3), inset 0 0 10px rgba(232, 180, 184, 0.2);
}
.gemstone-btn.morganite.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.morganite.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-morganite); }

/* Blue Topaz */
.gemstone-btn.blue-topaz .gemstone-svg-main { color: var(--gem-blue-topaz); }
.gemstone-btn.blue-topaz .gemstone-svg-glow { color: var(--gem-blue-topaz); }
.gemstone-btn.blue-topaz:hover .gemstone-svg-main { color: var(--gem-blue-topaz-bright); }
.gemstone-btn.blue-topaz:hover .gemstone-label { color: var(--gem-blue-topaz-bright); }
.gemstone-btn.blue-topaz.selected {
  border-color: var(--gem-blue-topaz);
  box-shadow: 0 0 15px rgba(79, 195, 247, 0.5), 0 0 30px rgba(79, 195, 247, 0.3), inset 0 0 10px rgba(79, 195, 247, 0.2);
}
.gemstone-btn.blue-topaz.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-topaz.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-topaz); }

/* Pearl (future - uses special SVG) */
.gemstone-btn.pearl .gemstone-svg-main { color: var(--gem-pearl); }
.gemstone-btn.pearl .gemstone-svg-glow { color: var(--gem-pearl); }
.gemstone-btn.pearl:hover .gemstone-svg-main { color: var(--gem-pearl-bright); }
.gemstone-btn.pearl:hover .gemstone-label { color: var(--gem-pearl-bright); }
.gemstone-btn.pearl.selected {
  border-color: var(--gem-pearl);
  box-shadow: 0 0 15px rgba(245, 245, 220, 0.5), 0 0 30px rgba(245, 245, 220, 0.3), inset 0 0 10px rgba(245, 245, 220, 0.2);
}
.gemstone-btn.pearl.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pearl.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pearl); }


/* ---------------------------------------------------------------------
   Selected state label - adapts to skin (dark on light backgrounds)
   --------------------------------------------------------------------- */
.gemstone-btn.selected .gemstone-label {
  color: var(--stone-btn-icon-selected);
}


/* ==========================================================================
   REAL GEMS SECTION (UC Pre-selected Gemstones)
   ========================================================================== */

/* Real gem button - 2x2 grid cells (size of 4 normal buttons) */
.real-gem-btn {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  background: var(--stone-btn-surface);
  border: 2px solid #d0d0d0;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

/* Inactive gem hover state - hint that it can be clicked */
.real-gem-btn:not(.selected):hover {
  border-color: #b0b0b0;
  opacity: 0.85;
}

/* Active/selected real gem - gold border and glow */
.real-gem-btn.selected {
  border-color: var(--stone-btn-accent);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  opacity: 1;
}

/* Label color changes based on active state */
.real-gem-btn:not(.selected) .real-gem-label {
  color: #888888;
}

.real-gem-btn.selected .real-gem-label {
  color: var(--stone-btn-accent);
}

/* On mobile (4-column grid), span 2x2 */
@media (max-width: 480px) {
  .real-gem-btn {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Cancel button in top-right */
.real-gem-cancel-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.real-gem-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Gemstone thumbnail - fills most of the button */
.real-gem-thumbnail {
  width: 100%;
  height: 70%;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.real-gem-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dimensions in bottom-left corner */
.real-gem-dimensions {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 500;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Gemstone name label - color set via .real-gem-btn.selected/.real-gem-btn:not(.selected) rules above */
.real-gem-label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 4px 0;
  line-height: 1.2;
}


/* ==========================================================================
   LOCK ICON FOR DISABLED GEMSTONE BUTTONS
   ========================================================================== */

/* Locked state for gemstone buttons when real gem is selected - white/neutral appearance */
.gemstone-btn.locked {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: none;
}

.gemstone-btn.locked .gemstone-svg-main,
.gemstone-btn.locked .gemstone-svg-glow {
  color: #cccccc;
  opacity: 0.5;
}

.gemstone-btn.locked .gemstone-label {
  color: #999999;
}

/* Line-art lock icon in top-right corner */
.gemstone-btn.locked::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Lock indicator for weight field */
.lock-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.lock-indicator svg {
  width: 14px;
  height: 14px;
  stroke: #666666;
}


/* ==========================================================================
   GEMSTONE DURABILITY WARNING
   Warning displayed for softer gemstones when used for engagement rings
   ========================================================================== */

.gemstone-durability-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
}

.gemstone-durability-warning.hidden {
  display: none;
}

.durability-warning-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.durability-warning-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #b45309;
  margin-top: 1px;
}

.durability-warning-text {
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
}

.durability-warning-text strong {
  color: #92400e;
  font-weight: 700;
}

.durability-warning-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 152, 0, 0.2);
  cursor: pointer;
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
}

.durability-warning-confirm input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #F59E0B;
  cursor: pointer;
}

.durability-warning-confirm span {
  user-select: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .gemstone-durability-warning {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
  }

  .durability-warning-icon {
    color: #fbbf24;
  }

  .durability-warning-text {
    color: #fef3c7;
  }

  .durability-warning-text strong {
    color: #fcd34d;
  }

  .durability-warning-confirm {
    border-top-color: rgba(251, 191, 36, 0.3);
    color: #fef3c7;
  }
}

/* Shake animation for unconfirmed durability warning */
@keyframes shake-warning {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.gemstone-durability-warning.shake-warning {
  animation: shake-warning 0.6s ease-in-out;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}
/* =============================================================================
   JWLDRAW — Procreate-Inspired Drawing Tool
   ============================================================================= */

body.jwldraw-page {
  background-color: #2a2a2a !important;
}

body.jwldraw-page .desktop-sidebar,
body.jwldraw-page .mobile-header,
body.jwldraw-page footer,
body.jwldraw-page .mobile-nav-bar {
  display: none !important;
}

body.jwldraw-page .sidebar-layout {
  margin-left: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto;
}

/* Container */
.jwldraw-container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  touch-action: none;
}

/* ── TOP TOOLBAR ── */
.jwldraw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  gap: 8px;
  flex-shrink: 0;
  z-index: 10;
}

.jwldraw-toolbar__left,
.jwldraw-toolbar__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jwldraw-toolbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Tool Buttons */
.jwldraw-tool-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
}

.jwldraw-tool-btn:hover:not(:disabled) {
  background: #333;
  color: #fff;
}

.jwldraw-tool-btn--active {
  background: #444;
  color: #fff;
}

.jwldraw-tool-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.jwldraw-tool-btn--danger:hover:not(:disabled) {
  background: #4a1a1a;
  color: #f87171;
}

/* Save Button */
.jwldraw-save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--color-accent, #D4AF37);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}

.jwldraw-save-btn:hover {
  filter: brightness(1.1);
}

/* Title Input */
.jwldraw-title-input {
  background: transparent;
  border: 1px solid transparent;
  color: #ccc;
  font-size: 14px;
  text-align: center;
  padding: 4px 12px;
  border-radius: 4px;
  max-width: 250px;
  width: 100%;
}

.jwldraw-title-input:focus {
  border-color: #555;
  outline: none;
  background: #222;
}

.jwldraw-toolbar-divider {
  width: 1px;
  height: 24px;
  background: #444;
  margin: 0 4px;
}

/* ── BRUSH PRESET DROPDOWN ── */
.jwldraw-preset-dropdown {
  position: relative;
}

.jwldraw-preset-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #333;
  color: #ccc;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.jwldraw-preset-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  z-index: 20;
  min-width: 130px;
}

.jwldraw-preset-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}

.jwldraw-preset-option:hover {
  background: #383838;
}

.jwldraw-preset-option--active {
  color: var(--color-accent, #D4AF37);
}

/* ── WORKSPACE ── */
.jwldraw-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Sliders */
.jwldraw-sliders {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  gap: 16px;
  background: #1a1a1a;
  border-right: 1px solid #333;
  flex-shrink: 0;
}

.jwldraw-slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.jwldraw-slider-label {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.jwldraw-slider-value {
  font-size: 10px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

.jwldraw-vertical-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 28px;
  flex: 1;
  accent-color: var(--color-accent, #D4AF37);
  cursor: pointer;
}

/* ── CANVAS ── */
.jwldraw-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #3a3a3a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jwldraw-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.jwldraw-canvas--active {
  z-index: 1;
}

/* ── COLOR PICKER PANEL ── */
.jwldraw-color-panel {
  position: absolute;
  top: 54px;
  left: 60px;
  width: 240px;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 12px;
  z-index: 30;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.jwldraw-color-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.jwldraw-color-panel__close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.jwldraw-color-wheel {
  display: block;
  margin: 0 auto 10px;
  border-radius: 50%;
  cursor: crosshair;
}

.jwldraw-brightness-row {
  margin-bottom: 10px;
}

.jwldraw-brightness-row label {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.jwldraw-brightness-row input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent, #D4AF37);
}

.jwldraw-preset-colors__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.jwldraw-preset-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #444;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
}

.jwldraw-preset-color:hover {
  border-color: #888;
}

.jwldraw-preset-color--white {
  border-color: #666;
}

.jwldraw-preset-colors-label {
  font-size: 11px;
  color: #888;
  display: block;
  margin-bottom: 6px;
}

.jwldraw-hex-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jwldraw-hex-row label {
  font-size: 11px;
  color: #888;
}

.jwldraw-hex-field {
  flex: 1;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #ccc;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

.jwldraw-hex-field:focus {
  outline: none;
  border-color: #666;
}

/* Color swatch in toolbar */
.jwldraw-color-swatch {
  padding: 4px;
}

.jwldraw-swatch {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #666;
}

/* ── SAVING OVERLAY ── */
.jwldraw-saving-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  z-index: 50;
}

.jwldraw-saving-overlay--active {
  display: flex;
}

.jwldraw-saving-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #555;
  border-top-color: var(--color-accent, #D4AF37);
  border-radius: 50%;
  animation: jwldraw-spin 0.7s linear infinite;
}

@keyframes jwldraw-spin {
  to { transform: rotate(360deg); }
}

/* ── LAYER PANEL ── */
.jwldraw-layer-panel {
  width: 100px;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  background: #1a1a1a;
  border-left: 1px solid #333;
  flex-shrink: 0;
  gap: 2px;
}

.jwldraw-layer-panel__title {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 4px;
}

.jwldraw-layer-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.jwldraw-layer-btn:hover {
  background: #2a2a2a;
}

.jwldraw-layer-btn--active {
  background: #333;
  outline: 1px solid #555;
}

.jwldraw-layer-btn__name {
  font-size: 10px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jwldraw-layer-vis {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  flex-shrink: 0;
}

.jwldraw-layer-vis:hover {
  color: #fff;
}

.jwldraw-layer-vis--hidden {
  opacity: 0.3;
}

/* ── CURSOR ── */
.jwldraw-canvas--active {
  cursor: crosshair;
}

.jwldraw-canvas--active.jwldraw-cursor-eraser {
  cursor: cell;
}

.jwldraw-canvas--active.jwldraw-cursor-eyedropper {
  cursor: copy;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .jwldraw-sliders {
    width: 36px;
    padding: 8px 2px;
  }

  .jwldraw-toolbar__center {
    display: none;
  }

  .jwldraw-color-panel {
    left: 4px;
    right: 4px;
    width: auto;
  }

  .jwldraw-preset-dropdown {
    display: none;
  }

  .jwldraw-layer-panel {
    width: 60px;
  }

  .jwldraw-layer-btn__name {
    font-size: 8px;
  }
}
/* =============================================================================
   JWLRY.DESIGN - METAL SELECTOR BUTTONS
   ============================================================================= */

/* Metal selector grid - 3 columns for 6 items */
.metal-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .metal-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   METAL BUTTON - Same 3D tactile style as stone buttons
   ============================================================================= */

.metal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  min-height: 90px;
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 3px var(--stone-btn-highlight),
    inset 2px 0 3px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

.metal-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.metal-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transform: translateY(-1px);
}

.metal-btn:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

.metal-btn.selected {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px var(--stone-btn-accent-glow);
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}

.metal-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}


/* =============================================================================
   METAL ICON WRAPPER - Dual SVG layers for glow effect
   ============================================================================= */

.metal-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}

.metal-svg-glow,
.metal-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.metal-svg-glow {
  z-index: 1;
  opacity: 0;
}

.metal-svg-main {
  z-index: 2;
  color: #777777;
}


/* =============================================================================
   METAL-SPECIFIC COLORS
   ============================================================================= */

/* Yellow Gold */
.metal-btn.yellow-gold .metal-svg-main { color: #D4AF37; }
.metal-btn.yellow-gold .metal-svg-glow { color: #D4AF37; }
.metal-btn.yellow-gold:hover .metal-svg-main { color: #E5C048; }
.metal-btn.yellow-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 1))
          drop-shadow(0 0 12px rgba(212, 175, 55, 0.8))
          drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
}
.metal-btn.yellow-gold.selected .metal-svg-main { color: #F5D058; }

/* White Gold */
.metal-btn.white-gold .metal-svg-main { color: #C0C0C0; }
.metal-btn.white-gold .metal-svg-glow { color: #E8E8E8; }
.metal-btn.white-gold:hover .metal-svg-main { color: #E8E8E8; }
.metal-btn.white-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(232, 232, 232, 1))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.8))
          drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
}
.metal-btn.white-gold.selected .metal-svg-main { color: #FFFFFF; }

/* Rose Gold */
.metal-btn.rose-gold .metal-svg-main { color: #B76E79; }
.metal-btn.rose-gold .metal-svg-glow { color: #B76E79; }
.metal-btn.rose-gold:hover .metal-svg-main { color: #D4909A; }
.metal-btn.rose-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(183, 110, 121, 1))
          drop-shadow(0 0 12px rgba(183, 110, 121, 0.8))
          drop-shadow(0 0 20px rgba(183, 110, 121, 0.5));
}
.metal-btn.rose-gold.selected .metal-svg-main { color: #E4A0AA; }

/* Platinum */
.metal-btn.platinum .metal-svg-main { color: #A8A8A8; }
.metal-btn.platinum .metal-svg-glow { color: #E5E4E2; }
.metal-btn.platinum:hover .metal-svg-main { color: #D0D0D0; }
.metal-btn.platinum.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(229, 228, 226, 1))
          drop-shadow(0 0 12px rgba(229, 228, 226, 0.8))
          drop-shadow(0 0 20px rgba(229, 228, 226, 0.5));
}
.metal-btn.platinum.selected .metal-svg-main { color: #F0F0EE; }

/* Silver */
.metal-btn.silver .metal-svg-main { color: #A0A0A0; }
.metal-btn.silver .metal-svg-glow { color: #C0C0C0; }
.metal-btn.silver:hover .metal-svg-main { color: #C8C8C8; }
.metal-btn.silver.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 1))
          drop-shadow(0 0 12px rgba(192, 192, 192, 0.8))
          drop-shadow(0 0 20px rgba(192, 192, 192, 0.5));
}
.metal-btn.silver.selected .metal-svg-main { color: #E0E0E0; }

/* Two-tone Yellow/White */
.metal-btn.two-tone-yellow-white .metal-svg-main { color: #D4AF37; }
.metal-btn.two-tone-yellow-white .metal-svg-glow { color: #D4AF37; }
.metal-btn.two-tone-yellow-white:hover .metal-svg-main { color: #E5C048; }
.metal-btn.two-tone-yellow-white.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.6))
          drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}
.metal-btn.two-tone-yellow-white.selected .metal-svg-main { color: #F5D058; }

/* Two-tone Rose/White */
.metal-btn.two-tone-rose-white .metal-svg-main { color: #B76E79; }
.metal-btn.two-tone-rose-white .metal-svg-glow { color: #B76E79; }
.metal-btn.two-tone-rose-white:hover .metal-svg-main { color: #D4909A; }
.metal-btn.two-tone-rose-white.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(183, 110, 121, 0.8))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.6))
          drop-shadow(0 0 20px rgba(183, 110, 121, 0.4));
}
.metal-btn.two-tone-rose-white.selected .metal-svg-main { color: #E4A0AA; }


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.metal-btn .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
}

.metal-btn:hover .label {
  color: var(--stone-btn-text-hover);
}

.metal-btn.selected .label {
  color: var(--stone-btn-text-active);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) {
  .metal-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .metal-btn:hover .metal-svg-main {
    color: inherit;
  }

  .metal-btn:hover .label {
    color: var(--stone-btn-text);
  }
}
/* Mood Board Aesthetic Card */

.mood-board-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mood-board-card--active {
  border-left: 4px solid rgb(147, 51, 234);
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.15);
}

.mood-board-card--ready {
  border-left: 4px solid transparent;
}

/* Questionnaire sections when mood-controlled */

.questionnaire-section {
  transition: opacity 0.3s ease, margin 0.3s ease;
}

/* Hide entire section when mood-controlled so it doesn't occupy grid space */
.questionnaire-section.mood-controlled {
  display: none;
}

.questionnaire-section.mood-controlled > [data-mood-section-target="content"] {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Questionnaire sections when user-controlled (overridden) */

.questionnaire-section.user-controlled > [data-mood-section-target="content"] {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Mood toggle bar styling */

.mood-toggle-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(147, 51, 234, 0.08);
  border: 1px solid rgba(147, 51, 234, 0.2);
}

.questionnaire-section:not(.mood-controlled):not(.user-controlled) .mood-toggle-bar {
  display: none;
}

/* Mood Control Panel — compact section overrides card */

.mood-control-panel-inner {
  border-left: 4px solid rgb(147, 51, 234);
}

/* Hide individual toggle bars when the control panel is active */
form.mood-panel-active .mood-toggle-bar {
  display: none !important;
}
/* =============================================================================
   JWLRY.DESIGN - TEXT-ONLY OPTION BUTTONS
   Simpler variant of stone buttons - no icons, just labels
   ============================================================================= */

/* Option selector grids - various column counts */
.option-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.option-selector-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.option-selector-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.option-selector-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.option-selector-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 600px) {
  .option-selector-grid { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .option-selector-grid,
  .option-selector-grid.cols-2,
  .option-selector-grid.cols-3,
  .option-selector-grid.cols-4,
  .option-selector-grid.cols-5,
  .option-selector-grid.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   OPTION BUTTON - Text-only tactile button
   ============================================================================= */

.option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  min-height: 48px;
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 3px var(--stone-btn-highlight),
    inset 2px 0 3px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

.option-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.option-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transform: translateY(-1px);
}

.option-btn:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

.option-btn.selected {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px var(--stone-btn-accent-glow);
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}

.option-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}

/* Disabled state */
.option-btn.disabled,
.option-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.option-btn .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.3;
}

.option-btn:hover .label {
  color: var(--stone-btn-text-hover);
}

.option-btn.selected .label {
  color: var(--stone-btn-text-active);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}

.option-btn.disabled .label {
  color: var(--stone-btn-text);
}


/* =============================================================================
   MULTI-SELECT VARIANT (checkboxes instead of radio)
   ============================================================================= */

.option-btn.multi-select.selected {
  /* Same as selected but can have multiple */
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) {
  .option-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .option-btn:hover .label {
    color: var(--stone-btn-text);
  }
}
/* =============================================================================
   JWLRY.DESIGN - RAISED PANEL CARDS
   Subtle embossed/raised panel effect for form section containers
   Creates the appearance of physical panels slightly lifted off the background
   ============================================================================= */

/* CSS Variables (inheriting from skin tokens via body) */
body {
  --panel-surface: var(--color-surface, #1a1a1a);
  --panel-surface-light: var(--color-surface-light, #2a2a2a);
  --panel-surface-dark: var(--btn-surface-dark, #0d0d0d);
  --panel-highlight: rgba(255, 255, 255, 0.04);
  --panel-highlight-edge: rgba(255, 255, 255, 0.06);
  --panel-shadow: rgba(0, 0, 0, 0.35);
  --panel-shadow-soft: rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   RAISED PANEL - Subtle embossed container effect
   ============================================================================= */

.raised-panel {
  position: relative;

  /* Semi-transparent white glass effect */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Clean shadow for lifted appearance */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}

/* Solid beige panels on light ombre pages — no blur needed */
body.home-beige .raised-panel {
  background: #efeae5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #dfd5cb;
}

/* Top highlight pseudo-element - disabled for clean white look */
.raised-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  border-radius: inherit;
}


/* =============================================================================
   VARIANT: Slightly more pronounced for larger/important sections
   ============================================================================= */

.raised-panel--prominent {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08);
}


/* =============================================================================
   VARIANT: Even more subtle for nested/secondary panels
   ============================================================================= */

.raised-panel--subtle {
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.raised-panel--subtle::before {
  background: none;
}


/* =============================================================================
   ENSURE NESTED FORM ELEMENTS FEEL INSET
   ============================================================================= */

/* Input fields inside raised panels - more opaque for readability */
.raised-panel input[type="text"],
.raised-panel input[type="email"],
.raised-panel input[type="number"],
.raised-panel textarea,
.raised-panel select {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.raised-panel input[type="text"]:focus,
.raised-panel input[type="email"]:focus,
.raised-panel input[type="number"]:focus,
.raised-panel textarea:focus,
.raised-panel select:focus {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--stone-btn-accent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 2px var(--stone-btn-accent-glow);
}

/* Nested card sections (like inside Toi et Moi or Three-Stone) */
.raised-panel .bg-muted\/10 {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}


/* =============================================================================
   REAL GEM MODE - White/neutral panels when UC gemstone is pre-selected
   ============================================================================= */

.real-gem-mode .raised-panel {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

.real-gem-mode .raised-panel::before {
  background: none;
}

/* Keep input fields styled appropriately in glass panels */
.real-gem-mode .raised-panel input[type="text"],
.real-gem-mode .raised-panel input[type="email"],
.real-gem-mode .raised-panel input[type="number"],
.real-gem-mode .raised-panel textarea,
.real-gem-mode .raised-panel select {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.real-gem-mode .raised-panel input[type="text"]:focus,
.real-gem-mode .raised-panel input[type="email"]:focus,
.real-gem-mode .raised-panel input[type="number"]:focus,
.real-gem-mode .raised-panel textarea:focus,
.real-gem-mode .raised-panel select:focus {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--stone-btn-accent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 2px var(--stone-btn-accent-glow);
}


/* =============================================================================
   GLASS BUTTON - Translucent glass effect for buttons
   ============================================================================= */

.glass-btn {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
}


/* =============================================================================
   COLLAPSIBLE CARD - Real Gem Mode Collapse/Expand Animation
   ============================================================================= */

/* Container that wraps the card content for collapse animation */
.card-collapsible-content {
  overflow: hidden;
  max-height: 1000px; /* Large enough for any content */
  opacity: 1;
  transition: max-height 0.3s ease-out,
              opacity 0.2s ease-out;
}

/* Collapsed state - hides the options grid/slider */
.raised-panel.collapsed .card-collapsible-content {
  max-height: 0;
  opacity: 0;
}

/* Normal header hides when collapsed */
.raised-panel .card-normal-header {
  opacity: 1;
  max-height: 50px;
  margin-bottom: 0.75rem;
  transition: opacity 0.2s ease-out,
              max-height 0.3s ease-out,
              margin 0.3s ease-out;
}

.raised-panel.collapsed .card-normal-header {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* Collapsed header - hidden by default, shown when collapsed */
.card-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in,
              max-height 0.3s ease-in;
}

.raised-panel.collapsed .card-collapsed-header {
  opacity: 1;
  max-height: 50px;
}

/* Collapsed header title with Premium badge */
.card-collapsed-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-collapsed-title .label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* Locked value display on right side */
.card-collapsed-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.card-collapsed-value .lock-icon {
  width: 14px;
  height: 14px;
  color: #9ca3af;
}

/* Animate the card padding shrinking when collapsed */
.raised-panel.collapsed {
  padding-top: 12px;
  padding-bottom: 12px;
  transition: padding 0.3s ease-out;
}

/* Subtle background change when collapsed to indicate locked state */
.raised-panel.collapsed {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(200, 200, 200, 0.5);
}

/* =============================================================================
   GEMSTONE CATEGORIES - Lock & Collapse when Real Gem is active
   ============================================================================= */

/* Lock icon in category headings - hidden by default */
.gemstone-category-heading .category-lock-icon {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: #9ca3af;
  vertical-align: middle;
}

/* Show lock icons when categories are locked */
.gemstone-categories-wrapper.locked .category-lock-icon {
  display: inline-block;
}

/* Collapse the gemstone grid when locked (keep heading visible) */
.gemstone-categories-wrapper.locked .gemstone-selector-grid {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
}

/* Normal state - grid is visible */
.gemstone-categories-wrapper .gemstone-selector-grid {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
}

/* Reduce spacing between categories when locked */
.gemstone-categories-wrapper.locked .gemstone-category {
  margin-bottom: 0.25rem;
}

/* Ensure Real Gems section always stays visible */
.real-gems-section {
  display: block !important;
  opacity: 1 !important;
  max-height: none !important;
}

/* Override locked wrapper styles for Real Gems section grid */
/* This ensures the Real Gems grid stays visible even if it ends up inside the wrapper */
.real-gems-section .gemstone-selector-grid {
  max-height: 1000px !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-top: 0.5rem !important;
}

.gemstone-categories-wrapper.locked .real-gems-section .gemstone-selector-grid {
  max-height: 1000px !important;
  opacity: 1 !important;
  overflow: visible !important;
}
/* =============================================================================
   RING LOADER - Design Generation Loading Animation
   Shimmer gradient background with rotating status messages
   ============================================================================= */

.ring-loader {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
}

.ring-loader__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    #98ccc2,
    #9ed3c7,
    #e9d79b,
    #9ed3c7,
    #98ccc2
  );
  background-size: 300% 300%;
  animation: ringLoaderPulse 8s ease-in-out infinite;
}

.ring-loader__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
}

.ring-loader__message {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.75rem, 2.5cqi, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.ring-loader__dots {
  display: flex;
  gap: 8px;
}

.ring-loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.5s ease;
}

.ring-loader__dot--active {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.25);
}

@keyframes ringLoaderPulse {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0%;
  }
}

/* Fade-in animation for message text */
.ring-loader .animate-fade-in {
  animation: ringLoaderFadeIn 0.6s ease-out;
}

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

/* Mini variant for dashboard variation grid */
.ring-loader--mini {
  border-radius: 4px;
}

.ring-loader--mini .ring-loader__content {
  gap: 8px;
  padding: 8px;
}

.ring-loader--mini .ring-loader__message {
  font-size: clamp(0.7rem, 4cqi, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  line-height: 1.3;
  max-width: 90%;
}

/* Gentle float animation for moderation upload text */
.moderation-text-animate {
  animation: moderationFloat 2.5s ease-in-out infinite;
}

@keyframes moderationFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.95;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
/* =============================================================================
   JWLRY.DESIGN - 3D TACTILE STONE SHAPE BUTTONS
   Inspired by vintage hardware button aesthetics
   ============================================================================= */

/* CSS Custom Properties - mapped to skin tokens
   Defined on body to inherit from skin's inline styles */
body {
  /* Button surface colors - derived from skin tokens */
  --stone-btn-surface: var(--btn-surface, var(--color-surface, #1a1a1a));
  --stone-btn-surface-light: var(--btn-surface-light, var(--color-surface-light, #2a2a2a));
  --stone-btn-surface-dark: var(--btn-surface-dark, #0d0d0d);
  --stone-btn-highlight: var(--btn-highlight, rgba(255, 255, 255, 0.08));
  --stone-btn-shadow: var(--btn-shadow, rgba(0, 0, 0, 0.6));
  --stone-btn-shadow-soft: var(--btn-shadow-soft, rgba(0, 0, 0, 0.3));
  --stone-btn-shadow-inner: var(--btn-shadow-inner, rgba(0, 0, 0, 0.2));

  /* Accent colors - from skin */
  --stone-btn-accent: var(--color-accent, #c9a227);
  --stone-btn-accent-glow: var(--color-accent-glow, rgba(201, 162, 39, 0.25));

  /* Label/text colors */
  --stone-btn-text: var(--btn-text, var(--color-muted-foreground, #888888));
  --stone-btn-text-hover: var(--btn-text-hover, var(--color-foreground, #ffffff));
  --stone-btn-text-active: var(--color-accent, #c9a227);

  /* SVG icon colors */
  --stone-btn-icon: var(--btn-icon, var(--color-muted-foreground, #777777));
  --stone-btn-icon-hover: var(--btn-icon-hover, var(--color-foreground, #ffffff));
  --stone-btn-icon-active: var(--color-accent, #c9a227);
  --stone-btn-icon-selected: var(--btn-icon-selected, #ffffff);
}


/* =============================================================================
   BASE BUTTON STYLES - Raised 3D Effect
   ============================================================================= */

.stone-btn {
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  min-height: 90px;

  /* Reset */
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  /* 3D Raised Surface */
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  border-radius: 8px;

  /* The magic: layered shadows create the raised illusion */
  box-shadow:
    /* Outer depth shadows */
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    /* Bottom dark edge (appears to be shadow from button height) */
    inset 0 -2px 3px var(--stone-btn-shadow),
    /* Top light edge (appears to catch light from above) */
    inset 0 2px 3px var(--stone-btn-highlight),
    /* Left light edge */
    inset 2px 0 3px var(--stone-btn-highlight),
    /* Right dark edge */
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    /* Subtle inner shadow for depth */
    inset 0 0 12px var(--stone-btn-shadow-inner);

  /* Smooth transitions */
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

/* Subtle top highlight for extra depth */
.stone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}


/* =============================================================================
   HOVER STATE - Slightly more raised
   ============================================================================= */

.stone-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);

  transform: translateY(-1px);
}


/* =============================================================================
   ACTIVE/PRESSED STATE - Pushed in effect
   ============================================================================= */

.stone-btn:active,
.stone-btn.active {
  /* Push down */
  transform: translateY(2px);

  /* Inverted gradient - darker on top creates sunken illusion */
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  /* Inverted shadows - top shadow inside, bottom highlight */
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}


/* =============================================================================
   SELECTED STATE - Pushed in + Gold accent
   ============================================================================= */

.stone-btn.selected {
  transform: translateY(2px);

  /* Sunken surface with accent tint */
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  box-shadow:
    /* Accent outer glow */
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    /* Pressed-in shadows */
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    /* Accent inner glow */
    inset 0 0 15px var(--stone-btn-accent-glow);

  /* Gold border */
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}


/* =============================================================================
   ICON STYLING - Layered SVG approach (white glow behind, gold on top)
   ============================================================================= */

.stone-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}

/* Mount selector icons - twice the size */
[data-controller="mount-selector"] .stone-icon-wrapper {
  width: 72px;
  height: 72px;
}

/* Mount selector - brighter icons (override the duller stone shape colors) */
[data-controller="mount-selector"] .stone-svg-main {
  color: #888888;
}

[data-controller="mount-selector"] .stone-btn:hover .stone-svg-main {
  color: var(--stone-btn-icon-hover);
}

[data-controller="mount-selector"] .stone-btn.selected .stone-svg-main {
  color: var(--stone-btn-icon-selected);
}

/* Rotate Kite shape so point faces upward like pear */
[data-shape="Kite"] .stone-icon-wrapper {
  transform: rotate(180deg);
}

.stone-svg-glow,
.stone-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Glow layer - behind, hidden by default */
.stone-svg-glow {
  z-index: 1;
  color: white;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}

/* Main layer - on top */
.stone-svg-main {
  z-index: 2;
  color: var(--stone-btn-icon);
}

/* Hover state */
.stone-btn:hover .stone-svg-main {
  color: var(--stone-btn-icon-hover);
}

/* Selected state - accent glow behind, light color on top */
.stone-btn.selected .stone-svg-glow {
  opacity: 1;
  color: var(--stone-btn-icon-active);
  filter: drop-shadow(0 0 6px var(--stone-btn-accent))
          drop-shadow(0 0 12px var(--stone-btn-accent-glow))
          drop-shadow(0 0 20px var(--stone-btn-accent-glow))
          drop-shadow(0 0 30px var(--stone-btn-accent-glow));
}

.stone-btn.selected .stone-svg-main {
  color: var(--stone-btn-icon-selected);
}

/* Fallback for simple svg/icon usage */
.stone-btn svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn .icon {
  width: 36px;
  height: 36px;
  color: var(--stone-btn-icon);
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, filter 0.2s ease;
}

.stone-btn:hover svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn:hover .icon {
  color: var(--stone-btn-icon-hover);
}

.stone-btn.selected svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn.selected .icon {
  color: var(--stone-btn-icon-active);
}


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.stone-btn .label,
.stone-btn span:last-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}

.stone-btn:hover .label,
.stone-btn:hover span:last-child {
  color: var(--stone-btn-text-hover);
}

.stone-btn.selected .label,
.stone-btn.selected span:last-child {
  color: var(--stone-btn-text-active);
  /* Subtle shadow for depth */
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}


/* =============================================================================
   ACCESSIBILITY - Focus state
   ============================================================================= */

.stone-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}


/* =============================================================================
   OPTIONAL: Touch device optimizations
   ============================================================================= */

@media (hover: none) {
  .stone-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .stone-btn:hover svg {
    color: var(--stone-btn-icon);
  }

  .stone-btn:hover .label {
    color: var(--stone-btn-text);
  }
}


/* =============================================================================
   LOCKED STATE - For Real Gems pre-selection
   ============================================================================= */

/* Locked state for stone shape buttons when real gem is selected - white/neutral appearance */
.stone-btn.locked {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: none;
}

.stone-btn.locked svg {
  color: #cccccc;
  opacity: 0.5;
}

.stone-btn.locked .label {
  color: #999999;
}

/* Line-art lock icon in top-right corner */
.stone-btn.locked::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}
/* =============================================================================
   JWLRY.DESIGN - DESIGN TOKEN SYSTEM
   Centralized CSS custom properties for multi-skin theming
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-primary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* -------------------------------------------------------------------------
     SPACING & DENSITY
     Multiply spacing values by --density for skin-specific adjustments
     density: 0.8 = compact, 1.0 = normal, 1.2 = generous
     ------------------------------------------------------------------------- */
  --density: 1;
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5 * var(--density));
  --spacing-sm: calc(var(--spacing-unit) * 1 * var(--density));
  --spacing-md: calc(var(--spacing-unit) * 2 * var(--density));
  --spacing-lg: calc(var(--spacing-unit) * 3 * var(--density));
  --spacing-xl: calc(var(--spacing-unit) * 4 * var(--density));

  /* -------------------------------------------------------------------------
     COLORS - Core Palette (current dark/gold luxury theme)
     ------------------------------------------------------------------------- */
  /* Backgrounds */
  --color-background: hsl(0, 0%, 0%);
  --color-foreground: hsl(0, 0%, 98%);
  --color-surface: hsl(0, 0%, 6%);
  --color-surface-light: hsl(0, 0%, 12%);

  /* Muted/Secondary */
  --color-muted: hsl(0, 0%, 14%);
  --color-muted-foreground: hsl(0, 0%, 70%);
  --color-border: hsl(0, 0%, 18%);

  /* Accent (Gold) */
  --color-accent: hsl(45, 95%, 55%);
  --color-accent-secondary: hsl(35, 85%, 52%);
  --color-accent-stroke: hsl(45, 70%, 45%);
  --color-accent-contrast: hsl(30, 20%, 10%);
  --color-accent-glow: hsla(45, 95%, 55%, 0.35);

  /* Semantic colors */
  --color-success: hsl(142, 76%, 36%);
  --color-warning: hsl(38, 92%, 50%);
  --color-error: hsl(0, 84%, 60%);

  /* -------------------------------------------------------------------------
     ANIMATION & MOTION
     animation-level: 0 = none, 1 = subtle, 2 = expressive
     ------------------------------------------------------------------------- */
  --animation-level: 1;
  --transition-speed: 200ms;
  --transition-speed-fast: 100ms;
  --transition-speed-slow: 300ms;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --max-content-width: 1200px;
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --border-radius-lg: 8px;

  /* -------------------------------------------------------------------------
     COMPONENT TOKENS - Buttons (derived from core tokens)
     These map the component-specific variables to the global tokens
     ------------------------------------------------------------------------- */
  --btn-surface: var(--color-surface);
  --btn-surface-light: var(--color-surface-light);
  --btn-surface-dark: hsl(0, 0%, 3%);
  --btn-highlight: hsla(0, 0%, 100%, 0.08);
  --btn-shadow: hsla(0, 0%, 0%, 0.6);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.3);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.2);
  --btn-accent: var(--color-accent);
  --btn-accent-glow: var(--color-accent-glow);
  --btn-text: var(--color-muted-foreground);
  --btn-text-hover: var(--color-foreground);
  --btn-text-active: var(--color-accent);
  --btn-icon: hsl(0, 0%, 47%);
  --btn-icon-hover: var(--color-foreground);
  --btn-icon-active: var(--color-accent);
  /* SVG color when selected - defaults to white for dark backgrounds */
  --btn-icon-selected: #ffffff;
}


/* =============================================================================
   SKIN CLASSES - Override tokens per skin
   Applied via body class: <body class="skin-{slug}">
   ============================================================================= */

/* Default skin (current design) - no overrides needed, uses :root values */
.skin-modern-romantic {
  /* This is the current dark/gold luxury aesthetic - base values */
}

/* Classic Heirloom skin - higher contrast, larger text, traditional colors */
.skin-classic-heirloom {
  --font-primary: 'Georgia', serif;
  --font-display: 'Georgia', serif;
  --font-size-base: 18px;
  --density: 1.0;

  /* Lighter background, navy accent */
  --color-background: hsl(0, 0%, 100%);
  --color-foreground: hsl(0, 0%, 13%);
  --color-surface: hsl(0, 0%, 98%);
  --color-surface-light: hsl(0, 0%, 100%);
  --color-muted: hsl(0, 0%, 94%);
  --color-muted-foreground: hsl(0, 0%, 40%);
  --color-border: hsl(0, 0%, 85%);

  /* Navy/burgundy accent */
  --color-accent: hsl(213, 50%, 35%);
  --color-accent-secondary: hsl(345, 50%, 35%);
  --color-accent-stroke: hsl(213, 45%, 30%);
  --color-accent-contrast: hsl(0, 0%, 100%);
  --color-accent-glow: hsla(213, 50%, 35%, 0.2);

  /* Button tokens for light skin - softer shadows, subtle depth */
  --btn-surface: hsl(0, 0%, 94%);
  --btn-surface-light: hsl(0, 0%, 100%);
  --btn-surface-dark: hsl(0, 0%, 88%);
  --btn-highlight: hsla(0, 0%, 100%, 0.8);
  --btn-shadow: hsla(0, 0%, 0%, 0.12);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.08);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.06);
  --btn-text: hsl(0, 0%, 40%);
  --btn-text-hover: hsl(0, 0%, 13%);
  --btn-icon: hsl(0, 0%, 50%);
  --btn-icon-hover: hsl(0, 0%, 20%);
  /* Dark icon color on light background when selected */
  --btn-icon-selected: hsl(0, 0%, 13%);

  /* Reduced animation */
  --animation-level: 0;
  --transition-speed: 150ms;

  --border-radius: 2px;
}

/* Utopian Creations skin - bright & modern, teal/bronze accents */
.skin-utopian-creations {
  --density: 1.0;

  /* Warm beige background */
  --color-background: #cab6a6;
  --color-foreground: hsl(200, 5%, 11%);      /* #1c1d1d */
  --color-surface: hsl(210, 7%, 96%);         /* #f0f1f3 */
  --color-surface-light: hsl(0, 0%, 100%);    /* white */
  --color-muted: hsl(210, 7%, 96%);
  --color-muted-foreground: hsl(204, 5%, 26%); /* #3d4246 */
  --color-border: hsl(210, 7%, 94%);

  /* Teal accents */
  --color-accent: hsl(166, 55%, 38%);         /* #2d9982 - teal */
  --color-accent-secondary: hsl(166, 55%, 28%); /* darker teal */
  --color-accent-stroke: hsl(166, 50%, 32%);
  --color-accent-contrast: hsl(0, 0%, 100%);
  --color-accent-glow: hsla(166, 55%, 38%, 0.2);

  /* Button tokens for light skin - softer shadows, subtle depth */
  --btn-surface: hsl(210, 7%, 93%);           /* light grey with slight blue tint */
  --btn-surface-light: hsl(0, 0%, 100%);      /* white */
  --btn-surface-dark: hsl(210, 5%, 86%);      /* darker grey */
  --btn-highlight: hsla(0, 0%, 100%, 0.9);
  --btn-shadow: hsla(210, 10%, 0%, 0.1);
  --btn-shadow-soft: hsla(210, 10%, 0%, 0.06);
  --btn-shadow-inner: hsla(210, 10%, 0%, 0.04);
  --btn-text: hsl(204, 5%, 35%);
  --btn-text-hover: hsl(200, 5%, 11%);
  --btn-icon: hsl(204, 5%, 45%);
  --btn-icon-hover: hsl(200, 5%, 15%);
  /* Dark icon color on light background when selected */
  --btn-icon-selected: hsl(200, 5%, 11%);

  --animation-level: 1;
  --border-radius: 4px;
}

/* Home page beige background - keeps gold accents from default skin */
body.home-beige {
  --color-background: #bfaa98;
  --color-foreground: hsl(200, 5%, 11%);
  --color-surface: hsl(30, 15%, 92%);
  --color-surface-light: hsl(0, 0%, 100%);
  --color-muted: hsl(30, 10%, 88%);
  --color-muted-foreground: hsl(200, 5%, 35%);
  --color-border: hsl(30, 10%, 80%);

  /* Override bg-background directly since Tailwind @theme inline
     creates a self-referencing --color-background var */
  background-color: #bfaa98 !important;

  /* Button tokens for light background */
  --btn-surface: hsl(30, 10%, 90%);
  --btn-surface-light: hsl(0, 0%, 100%);
  --btn-surface-dark: hsl(30, 8%, 82%);
  --btn-highlight: hsla(0, 0%, 100%, 0.8);
  --btn-shadow: hsla(0, 0%, 0%, 0.1);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.06);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.04);
  --btn-text: hsl(200, 5%, 35%);
  --btn-text-hover: hsl(200, 5%, 11%);
  --btn-icon: hsl(200, 5%, 45%);
  --btn-icon-hover: hsl(200, 5%, 15%);
  --btn-icon-selected: hsl(200, 5%, 11%);
}
/* =============================================================================
   VARIATION GRID & TILES
   Styles for the 4-variation selection interface
   ============================================================================= */

/* Individual Variation Tile */
.variation-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Completed tile - interactive */
.variation-tile--completed {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.2);
}

.variation-tile--completed:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Selected tile - highlighted */
.variation-tile--selected {
  border-color: #14b8a6 !important; /* teal-500 */
  box-shadow: 0 0 0 2px #14b8a6, 0 8px 32px rgba(20, 184, 166, 0.3);
}

.variation-tile--selected:hover {
  transform: scale(1.02);
}

/* Loading tile */
.variation-tile--loading {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Failed tile */
.variation-tile--failed {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Image container */
.variation-tile__image {
  width: 100%;
  height: 100%;
  padding: 0;
}

.variation-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Heart button on variation tile (selection phase) */
.variation-tile__heart {
  cursor: pointer;
}

.variation-tile__heart:hover svg {
  transform: scale(1.15);
}

.variation-tile__heart:active svg {
  transform: scale(0.95);
}

.variation-tile__heart svg {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* When tile is selected, heart gets special styling */
.variation-tile--selected .variation-tile__heart {
  animation: heartAppear 0.3s ease-out;
}

.variation-tile--selected .variation-tile__heart svg {
  animation: heartPulse 0.4s ease-out;
}

/* Selection checkmark (legacy, kept for compatibility) */
.variation-tile__checkmark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: #14b8a6; /* teal-500 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.5);
}

.variation-tile--selected .variation-tile__checkmark {
  opacity: 1;
  transform: scale(1);
}

/* Error state container */
.variation-tile__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  text-align: center;
}

/* Variant label at bottom */
.variation-tile__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* Loading state uses existing ring-loader styles */
.variation-tile--loading .ring-loader {
  border-radius: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .variation-tile {
    border-radius: 12px;
  }

  .variation-tile__image {
    padding: 0;
  }

  .variation-tile__image img {
    border-radius: 10px;
  }

  .variation-tile__checkmark {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }

  .variation-tile__checkmark svg {
    width: 14px;
    height: 14px;
  }

  .variation-tile__heart {
    top: 6px !important;
    right: 6px !important;
    padding: 6px !important;
  }

  .variation-tile__heart svg {
    width: 18px;
    height: 18px;
  }

  .variation-tile__label {
    padding: 6px 10px;
  }

  .variation-tile__error span {
    font-size: 10px;
  }
}

/* Animation for tile appearing */
@keyframes tileAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.variation-tile--completed {
  animation: tileAppear 0.3s ease-out;
}

/* =============================================================================
   HEART-BASED VARIATION SWITCHING
   Styles for the heart icons on thumbnails and main image
   ============================================================================= */

/* Heart button on thumbnails */
.variation-heart {
  z-index: 10;
}

.variation-heart:hover svg {
  transform: scale(1.15);
}

.variation-heart:active svg {
  transform: scale(0.95);
}

.variation-heart svg {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Filled heart animation when activated */
@keyframes heartPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.variation-heart--active svg {
  animation: heartPulse 0.4s ease-out;
}

/* Selected heart badge on main image */
.selected-heart-badge {
  animation: heartAppear 0.3s ease-out;
}

@keyframes heartAppear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Thumbnail variation styles */
.variation-thumbnail {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.variation-thumbnail:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   LIGHTBOX
   Full-screen image viewer for expanded variations
   ============================================================================= */

#unified-lightbox {
  animation: lightboxFadeIn 0.2s ease-out;
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#unified-lightbox img {
  animation: lightboxZoomIn 0.2s ease-out;
}

@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#unified-lightbox button {
  transition: transform 0.2s ease, background-color 0.15s ease;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Desktop sidebar */
.desktop-sidebar {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 14rem; /* w-56 = 224px */
  height: 100dvh; /* fix iOS/iPadOS Safari dynamic viewport */
  flex-direction: column;
  background-color: #efeae5;
  border-right: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .desktop-sidebar {
    display: flex;
  }
}

/* Sidebar layout — desktop sidebar offset + mobile bottom nav clearance */
.sidebar-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 4rem; /* clear mobile bottom nav (h-16 = 64px) */
}

@media (min-width: 768px) {
  .sidebar-layout {
    margin-left: 14rem; /* w-56 = 224px */
    padding-bottom: 0;
  }
}

/* Mobile bottom nav bar */
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-surface, #0f0f0f);
  border-top: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .mobile-nav-bar {
    display: none;
  }
}

/* Mobile top header */
.mobile-header {
  background-color: var(--color-surface, #0f0f0f);
  border-bottom: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .mobile-header {
    display: none;
  }
}

/* Desktop header — horizontal nav bar for home page */
.desktop-header {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 60px;
  align-items: center;
  background-color: #efeae5;
  border-bottom: 1px solid var(--color-border, #2e2e2e);
}

/* Home page: hide sidebar, show desktop header, remove sidebar offset */
body.home-index .desktop-sidebar {
  display: none !important;
}

@media (min-width: 768px) {
  body.home-index .desktop-header {
    display: flex;
  }

  body.home-index .sidebar-layout {
    margin-left: 0;
  }
}

/* Help chat widget offset — clears mobile bottom nav */
.help-chat-offset {
  bottom: 5rem; /* 80px above mobile nav */
}

@media (min-width: 768px) {
  .help-chat-offset {
    bottom: 1rem; /* back to normal on desktop */
  }
}

/* Base typography — fonts provided by skin CSS variables on body */
body {
  font-family: var(--font-primary), system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

h1, h2, h3 {
  font-family: var(--font-display), 'Georgia', serif;
  letter-spacing: -0.01em;
}

/* Gold CTA button */
.btn-gold {
  background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-secondary) 50%, var(--color-accent) 100%);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
  box-shadow: 0 8px 24px var(--color-accent-glow, rgba(0,0,0,0.35));
  background-size: 200% auto;
  transition: all 0.3s ease;
  animation: shimmer 3s linear infinite;
}

.btn-gold:hover {
  filter: brightness(1.07);
}

.bg-secondary {
  background-color: var(--color-surface-light);
}

/* Stone Shape Visual Selector */
.shape-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 400px) {
  .shape-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Pricing page background — skip when home-beige provides its own bg */
body:has(.pricing-section):not(.home-beige) {
  background: transparent !important;
}

body:has(.pricing-section):not(.home-beige) main {
  background-color: transparent !important;
}

body:has(.pricing-section):not(.home-beige) main > .w-full {
  background: transparent !important;
}

.pricing-section {
  background-image: url(https://www.jwlry.design/assets/pricing-bg-2374d1e0e0c9e0663990c92866792fef4aacd8c2da6f2dfb709339b16628b47f.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: calc(75vh - 60px); /* Balanced spacing */
}

/* Parallax only on desktop — background-attachment:fixed kills mobile scroll perf */
@media (min-width: 769px) {
  .pricing-section {
    background-attachment: fixed;
  }
}

.pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pricing-section > * {
  position: relative;
  z-index: 1;
}

/* Hide radio but keep accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tooltip styles */
.tooltip-trigger:hover + .tooltip-content,
.tooltip-trigger:focus + .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.tooltip-content {
  transition: opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out;
}

/* Tooltip arrow */
.tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}

.tooltip-arrow-top {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}

.tooltip-arrow-bottom {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}