/* =========================================================
   JewelryCalculator.online - calculator.css
   Scoped calculator app fixes only. Keep all selectors under #jc-app-mount where possible.
   ========================================================= */

#jc-app-mount {
  color: var(--jc-text);
  font-family: var(--jc-font-body);
}

#jc-app-mount p.hint,
#jc-app-mount .hint,
#jc-app-mount p.small,
#jc-app-mount div.small,
#jc-app-mount .constraint-hint {
  font-size: 0.75rem !important;
  font-style: italic !important;
  opacity: 0.68 !important;
  color: var(--jc-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

#jc-app-mount input[type="text"],
#jc-app-mount input[type="number"],
#jc-app-mount input[inputmode="decimal"],
#jc-app-mount input[inputmode="numeric"],
#jc-app-mount select,
#jc-app-mount textarea,
.app-main input[type="text"],
.app-main input[type="number"],
.app-main input[inputmode="decimal"],
.app-main input[inputmode="numeric"],
.app-main select,
.app-main textarea {
  background: #2e2318 !important;
  border: 1px solid #6b5040 !important;
  border-bottom: 2px solid var(--jc-copper) !important;
  color: var(--jc-text) !important;
  border-radius: var(--jc-radius-sm) !important;
  padding: 8px 10px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#jc-app-mount input:focus,
#jc-app-mount select:focus,
#jc-app-mount textarea:focus,
.app-main input:focus,
.app-main select:focus,
.app-main textarea:focus {
  border-color: var(--jc-copper) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196,112,74,0.16) !important;
}

#jc-app-mount .grid,
.app-main .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

#jc-app-mount .card,
#jc-app-mount .panel,
#jc-app-mount fieldset,
#jc-app-mount .box {
  background: var(--jc-surface) !important;
  border: 1px solid var(--jc-border) !important;
  color: var(--jc-text) !important;
  border-radius: var(--jc-radius) !important;
}

#jc-app-mount .tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
}

#jc-app-mount .tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--jc-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.65rem 0.75rem !important;
}

#jc-app-mount .tab-btn[aria-selected="true"] {
  color: var(--jc-copper) !important;
  border-bottom-color: var(--jc-copper) !important;
  background: transparent !important;
}

#jc-app-mount .mobile-tabs {
  display: none !important;
}

@media (max-width: 640px) {
  #jc-app-mount .mobile-tabs {
    display: block !important;
  }

  #jc-app-mount .tabs {
    display: none !important;
  }
}

/* Dropdown submenu */
#jc-app-mount li.submenu {
  position: relative !important;
  cursor: pointer !important;
}

#jc-app-mount li.submenu > button {
  background: none !important;
  border: none !important;
  color: var(--jc-text) !important;
  cursor: pointer !important;
  font-size: inherit !important;
  padding: 0 !important;
}

#jc-app-mount li.submenu > ul {
  display: none !important;
  position: absolute !important;
  background: var(--jc-surface-3) !important;
  border: 1px solid var(--jc-border) !important;
  border-radius: var(--jc-radius-sm) !important;
  padding: 4px 0 !important;
  z-index: 100 !important;
  min-width: 180px !important;
}

#jc-app-mount li.submenu:hover > ul,
#jc-app-mount li.submenu.open > ul {
  display: block !important;
}

#jc-app-mount li.submenu > ul > li {
  padding: 6px 16px !important;
  list-style: none !important;
  color: var(--jc-copper) !important;
  font-size: 0.85rem !important;
}

#jc-app-mount li.submenu > ul > li:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Action rows and buttons */
#jc-app-mount .btn-row,
#jc-app-mount .row,
#jc-app-mount .row-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

#jc-app-mount button,
#jc-app-mount input[type="button"],
#jc-app-mount input[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
}

#jc-app-mount button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#jc-app-mount button[id$="resetBtn"] {
  border-color: #5b4638 !important;
  color: #9a8472 !important;
}

#jc-app-mount button[id$="resetBtn"]:hover {
  border-color: var(--jc-copper) !important;
  color: #14110f !important;
}

/* Toolbar */
#jc-app-mount .jc-toolbar-shell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-left: auto !important;
  padding: 0 0.5rem !important;
}

#jc-app-mount .jc-units {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#jc-app-mount .jc-unit-btn {
  background: transparent !important;
  border: none !important;
  color: #8f8478 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  min-height: auto !important;
}

#jc-app-mount .jc-unit-btn:hover {
  color: var(--jc-text) !important;
}

#jc-app-mount .jc-unit-btn.is-active,
#jc-app-mount .jc-unit-btn[aria-pressed="true"] {
  color: #ffffff !important;
  border-bottom: 2px solid var(--jc-copper) !important;
  background: transparent !important;
}

#jc-app-mount .jc-unit-btn:focus,
#jc-app-mount .jc-unit-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

#jc-app-mount .jc-lang-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

#jc-app-mount .jc-lang-btn {
  background: transparent !important;
  border: none !important;
  color: var(--jc-muted) !important;
  padding: 0 !important;
  min-height: auto !important;
}

#jc-app-mount .jc-lang-btn:hover {
  color: var(--jc-text) !important;
}

#jc-app-mount .jc-lang-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
}

#jc-app-mount .jc-lang-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  display: none !important;
  min-width: 170px !important;
  background: var(--jc-surface) !important;
  border: 1px solid var(--jc-border) !important;
  border-radius: var(--jc-radius) !important;
  padding: 0.65rem !important;
  box-shadow: var(--jc-shadow) !important;
  z-index: 9999 !important;
}

#jc-app-mount .jc-lang-menu.is-open {
  display: block !important;
}

#jc-app-mount .jc-lang-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.3rem !important;
}

#jc-app-mount .jc-lang-flag {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--jc-radius-sm) !important;
  color: var(--jc-muted) !important;
  min-height: 42px !important;
  padding: 0.35rem 0.2rem !important;
}

#jc-app-mount .jc-lang-flag:hover,
#jc-app-mount .jc-lang-flag.is-active {
  background: rgba(196,112,74,0.12) !important;
  border-color: rgba(196,112,74,0.35) !important;
  color: var(--jc-copper) !important;
}

/* Ring template preview */
#jc-app-mount #rw-templatePreview {
  background: #1e1812 !important;
  border: 1px dashed var(--jc-border) !important;
  color: var(--jc-text) !important;
  border-radius: var(--jc-radius) !important;
}

#jc-app-mount #rw-tplIllustration,
#jc-app-mount #rw-tplIllustration svg {
  max-width: 120px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
}

/* Stones thumbnails and preview */
#jc-app-mount .stone-shape-grid,
#jc-app-mount .stones-grid,
#jc-app-mount #stone-shape-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  gap: 0.65rem !important;
}

#jc-app-mount .stone-shape-grid button,
#jc-app-mount .stones-grid button,
#jc-app-mount button.stone-card,
#jc-app-mount .stone-card {
  min-height: auto !important;
  padding: 0.65rem !important;
  background: var(--jc-surface-2) !important;
  border: 1px solid var(--jc-border) !important;
  color: var(--jc-text) !important;
  border-radius: var(--jc-radius) !important;
}

#jc-app-mount .stone-shape-grid svg,
#jc-app-mount .stones-grid svg,
#jc-app-mount .stone-card svg {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  display: block !important;
  margin: 0 auto 0.35rem !important;
}

#jc-app-mount #stone-preview svg,
#jc-app-mount #stones-preview svg,
#jc-app-mount .stone-preview svg {
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Decorative previews */
#jc-app-mount .preview,
#jc-app-mount .preview-box,
#jc-app-mount #sp-preview,
#jc-app-mount #ro-preview,
#jc-app-mount #ft-preview,
#jc-app-mount #lf-preview {
  background: var(--jc-cream) !important;
  border: 1px solid var(--jc-border) !important;
  border-radius: var(--jc-radius) !important;
  padding: 1rem !important;
  overflow: auto !important;
  color: #111 !important;
}

#jc-app-mount .preview svg,
#jc-app-mount .preview-box svg,
#jc-app-mount #sp-preview svg,
#jc-app-mount #ro-preview svg,
#jc-app-mount #ft-preview svg,
#jc-app-mount #lf-preview svg {
  background: #fffdf8 !important;
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}

#jc-app-mount .preview svg path,
#jc-app-mount .preview svg circle,
#jc-app-mount .preview svg ellipse,
#jc-app-mount .preview svg line,
#jc-app-mount .preview svg polyline,
#jc-app-mount .preview svg polygon {
  stroke: #111 !important;
}

#jc-app-mount .preview::before,
#jc-app-mount .preview-box::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 0.75rem;
  background: linear-gradient(to right, transparent, rgba(196,112,74,0.35), transparent);
}

/* App panel width */
#jc-app-mount #panel-pendant,
#jc-app-mount #panel-decorative {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 720px) {
  #jc-app-mount .jc-toolbar-shell {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: space-between !important;
    padding: 0.6rem 0 !important;
  }
}




/* ============================================
   CALCULATOR WIDTH FIXES
   ============================================ */

#jc-app-mount .panel,
#jc-app-mount .card,
#jc-app-mount .preview,
#jc-app-mount .grid2,
#jc-app-mount .grid3,
#jc-app-mount .row,
#jc-app-mount .btn-row,
#jc-app-mount .stone-layout,
#jc-app-mount .stone-detail {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   PENDANT + DECORATIVE FULL WIDTH
   ============================================ */

#panel-pendant .card,
#panel-decorative .card,
#panel-pendant .preview,
#panel-decorative .preview {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   STONE GRID FIX
   ============================================ */

#stone-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 0 !important;
}

/* ============================================
   STONE CARD SVG FIX
   ============================================ */

#stone-grid .stone-card svg {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    display: block !important;
    margin: 0 auto 1rem auto !important;
}

/* ============================================
   STONE DETAIL PREVIEW FIX
   ============================================ */

.stone-detail {
    padding-top: 1rem !important;
}

.stone-detail svg {
    width: 220px !important;
    height: auto !important;
    max-width: 220px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ============================================
   MINI STONE PREVIEW FIX
   ============================================ */

.stone-mini {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem !important;
}

.stone-mini svg {
    width: 120px !important;
    height: auto !important;
    max-width: 120px !important;
}

/* ============================================
   PREVENT GLOBAL SVG OVERRIDES
   ============================================ */

#jc-app-mount svg {
    overflow: visible !important;
}

#jc-app-mount .stone-detail svg,
#jc-app-mount .stone-mini svg,
#jc-app-mount .stone-card svg {
    flex-shrink: 0 !important;
}



/* ============================================
   STONES FINAL POLISH
   ============================================ */

/* Smaller stone cards */
#stone-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 0.35rem !important;
}

/* Smaller icons in cards */
#stone-grid .stone-card svg {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin: 0 auto 0.65rem auto !important;
}

/* Reduce card height */
#stone-grid .stone-card {
    padding: 1rem 0.75rem !important;
    min-height: 165px !important;
}

/* Smaller typography */
#stone-grid .stone-name {
    font-size: 0.95rem !important;
}

#stone-grid .stone-meta {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}

/* ============================================
   FIX GIANT PRONGS / BEZEL BUTTONS
   ============================================ */

#jc-app-mount .segmented,
#jc-app-mount .toggle-row,
#jc-app-mount .mode-switch {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

#jc-app-mount .segmented button,
#jc-app-mount .toggle-row button,
#jc-app-mount .mode-switch button,
#jc-app-mount button[data-mode],
#jc-app-mount button[data-view] {
    width: auto !important;
    min-width: 110px !important;
    max-width: 140px !important;
    flex: 0 0 auto !important;

    background: #3a3a46 !important;
    border: 1px solid #666 !important;
    color: #fff !important;

    padding: 0.75rem 1rem !important;
    border-radius: 0 !important;

    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Active state */
#jc-app-mount button[aria-pressed="true"],
#jc-app-mount button.is-active,
#jc-app-mount button.active {
    background: #c4704a !important;
    border-color: #c4704a !important;
    color: #141414 !important;
}