/*--------------------------------------------------------------
1. Reset & Base
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  color: #333;
  line-height: 1.5;
}

/*--------------------------------------------------------------
2. Color Palette
--------------------------------------------------------------*/
:root {
  --primary:  #030303;
  --black:    #000000;    /* ← new true-black token */
  --accent:   #B99758;
  --warn:     #D40C13;
  --gold:     #B99758;
  --success:  #6AAEAA;
  --light:    #ffffff;
  --back:     #ffffff;    /* keep your page background here */
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
}

/*--------------------------------------------------------------
3. Utility Classes
--------------------------------------------------------------*/
.hidden { display: none; }
.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.mb-2        { margin-bottom: 0.5rem; }
.mb-4        { margin-bottom: 1rem; }
.mb-6        { margin-bottom: 1.5rem; }
.mb-8        { margin-bottom: 2rem; }
.px-4        { padding-left: 1rem; padding-right: 1rem; }
.py-2        { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4        { padding-top: 1rem; padding-bottom: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.75rem; }

/*--------------------------------------------------------------
4. Page Container
--------------------------------------------------------------*/
/* Desktop container padding */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding-top:    5px;
  padding-right: 50px;
  padding-bottom:50px;
  padding-left:  50px;
}

/* Mobile: 5px padding on all sides */
@media (max-width: 600px) {
  .container {
    padding: 5px;
  }
}
/*--------------------------------------------------------------
5. Step Indicator (use SVG icons)
--------------------------------------------------------------*/
.step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1rem;
  position: relative;
}

/* hide any <img> you had in the HTML */
.step-indicator .step-icon img {
  display: none;
}

/* the 32×32 icon placeholder */
.step-indicator .step-icon {
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

/* default = “not started” */
.step-indicator .step:not(.active):not(.completed) .step-icon {
  background-image: url("/images/stepincomplete.svg");
}

/* completed steps */
.step-indicator .step.completed .step-icon {
  background-image: url("/images/stepcomplete.svg");
}

/* the one you're on */
.step-indicator .step.active .step-icon {
  background-image: url("/images/stepactive.svg");
}

/* now draw a single grey baseline behind everything */
.step-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gray-300);
  transform: translateY(-50%);
  z-index: 0;
}

/* each step wrapper must sit above it */
.step-indicator .step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* make “Step X” bigger and bold */
.step-sub {
  margin-top: 0.5rem;
  font-size: 1rem;      /* ↑ bump it up */
  font-weight: 700;     /* bold */
  color: #000;
  text-align: center;
}

/* make the descriptive title below smaller and lighter */
.step-title {
  margin-top: 0.25rem;  /* a little breathing room */
  font-size: 0.75rem;   /* ↓ shrink it */
  font-weight: 400;     /* normal weight */
  color: #555;          /* slightly subdued */
  text-align: center;
}

/* Turn off all connecting lines */
.step-indicator::before,
.step-indicator .step-icon::before,
.step-indicator .step-icon::after {
  display: none !important;
}



/*--------------------------------------------------------------
6. Grid of Cards (up to 6 across, allow overflow)
--------------------------------------------------------------*/
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  overflow: visible; /* let expanded cards overflow */
}

/*--------------------------------------------------------------
7. Card Component for Settings only
   (width-based hover expand, with left-expand on 3n)
--------------------------------------------------------------*/
#step1 .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
  display: flex;
}

#step1 .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  z-index: 10;
  margin-left: 0;
}

#step1 .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px); /* shift left on every 3rd */
}

/* front/back panes (same as before) */
#step1 .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
#step1 .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}
#step1 .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
#step1 .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}

#step1 .card-front img {
  width: 160px !important;   /* was 100px */
  height: 160px !important;  /* was 100px */
  margin-bottom: 0.5rem;     /* preserve your spacing */
  object-fit: contain;       /* unchanged */
}
#step1 .card:hover .card-front img {
  width: 200px !important;   /* match the “resting” size */
  height: 200px !important;
  margin-bottom: 0.5rem;
  object-fit: contain;
}


/*--------------------------------------------------------------
7b. “Normal” Card Component for Cuts & Metals (Steps 2 & 3)
    — no fixed width, show full content immediately
--------------------------------------------------------------*/
#step2 .grid-cards .card,
#step3 .grid-cards .card {
  width: auto;           /* let browser size to content/grid */
  height: auto;
  overflow: visible;
  transition: none;       /* no expand animation */
}



/*--------------------------------------------------------------
7c. Expansion Card Component for Cuts (Step 2)
--------------------------------------------------------------*/
#step2 .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
}

#step2 .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  z-index: 10;
  margin-left: 0;
}

#step2 .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px);
}

#step2 .grid-cards .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

#step2 .grid-cards .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}

#step2 .grid-cards .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#step2 .grid-cards .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}

#step2 .cut-details {
  margin-top: 0.5rem;
  list-style: none;
  padding-left: 0;
  font-size: 0.85rem;
}
#step2 .cut-details li + li {
  margin-top: 0.25rem;
}

/*--------------------------------------------------------------
7d. Expansion Card Component for Metals (Step 3)
--------------------------------------------------------------*/
#step3 .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
}

#step3 .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  z-index: 10;
  margin-left: 0;
}

#step3 .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px);
}

#step3 .grid-cards .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

#step3 .grid-cards .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}

#step3 .grid-cards .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

#step3 .grid-cards .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}


/*--------------------------------------------------------------
Step 1b: Band Type cards – same expand-on-hover as Steps 1/2/3
--------------------------------------------------------------*/
#step1b .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
}

#step1b .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  z-index: 10;
  margin-left: 0;
}

#step1b .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px);
}

#step1b .grid-cards .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

#step1b .grid-cards .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}

#step1b .grid-cards .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

#step1b .grid-cards .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}

/* front/back title swap (if you want text on the back) */
#step1b .card-front .front-title { display: block; }
#step1b .card-back  .back-title  { display: none; }
#step1b .card:hover .card-front .front-title { display: none; }
#step1b .card:hover .card-back  .back-title  { display: block; }


/*--------------------------------------------------------------
1c. Expansion Card Component for Designer (Step 1c)
--------------------------------------------------------------*/
#step1c .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
}

#step1c .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  z-index: 10;
  margin-left: 0;
}

#step1c .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px);
}

#step1c .grid-cards .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

#step1c .grid-cards .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}

#step1c .grid-cards .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

#step1c .grid-cards .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}

/*─────────────────────────────────────────────────────────────────────────────
   Make the Designer‐step images about 30% larger
─────────────────────────────────────────────────────────────────────────────*/
#designer-grid .card-front img {
  /* if your base is 100×100, bump to 130×130 */
  width: 115px !important;
  height: 115px !important;
}

/* Add 10px top margin to the grid on Step 1b */
#step1b .grid-cards {
  margin-top: 10px;
}


/*--------------------------------------------------------------
8. Filter Buttons
--------------------------------------------------------------*/
.filters {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.btn {
  padding: 0.5rem 1rem;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-outline {
  background: white;
  color: var(--primary);
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

.btn-outline.active {
  border-color: var(--primary);
  border: 1px solid var(--gray-200)
}

/*--------------------------------------------------------------
9. Section Containers
--------------------------------------------------------------*/
.step-container {
  display: none;
  padding-top:    0;
  padding-right:  2rem;
  padding-bottom: 2rem;
  padding-left:   2rem;
} 
.step-container.active {
  display: block;
}

/*--------------------------------------------------------------
10. Back Button
--------------------------------------------------------------*/
.btn-back {
  background: var(--primary);   /* solid black fill */
  color: var(--light);          /* white text */
  border: none;                 /* no extra border */
  padding: 0.5rem 1rem;         /* make it easier to tap */
  border-radius: 0.375rem;      /* slightly rounded corners */
  font-size: 1rem;              /* match your existing size */
  cursor: pointer;
  transition: background 0.2s;  /* subtle feedback */
}

.btn-back:hover {
  background: var(--black);     /* keep it dark on hover */
}

/*--------------------------------------------------------------
11. Modal Styles
--------------------------------------------------------------*/
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: var(--light);
  border-radius: 0rem;
  padding: 1.5rem;
  max-width: 500px;
  width: 100%;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.modal-footer {
  text-align: right;
  margin-top: 1.5rem;
}
/*--------------------------------------------------------------
 Info Panel (inline, under the builder)
--------------------------------------------------------------*/
.info-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0rem;
  padding: 1.5rem;
  margin-top: 0rem;
}
.info-panel h4 {
  margin-top: 1rem;
  color: var(--primary);
}
.info-panel p,
.info-panel ul {
  margin-bottom: 0.75rem;
}


/* 12 fancy slider for price and cartet */ 
/*--------------------------------------------------------------
8. Fancy Sliders
--------------------------------------------------------------*/
.slider-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.slider-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--primary);
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent), var(--primary));
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--light);
  margin-top: -6px;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent), var(--primary));
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--light);
  cursor: pointer;
}
/*--------------------------------------------------------------
13. Two-column split for builder content
--------------------------------------------------------------*/
.builder-content {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Main (steps) = 60%, Info panel = 40% */
.builder-main {
  flex: 3;           /* 3 parts out of total 5 */
}
aside.info-panel {
  flex: 2;           /* 2 parts out of total 5 */
}

/* On small screens, stack vertically */
@media (max-width: 768px) {
  .builder-content {
    flex-direction: column;
  }
}
/*--------------------------------------------------------------
Override: force 3-column grids and smaller cards
--------------------------------------------------------------*/

/* 1) All selection grids (settings, cuts, metals, etc.) become 3 across */
/* ————————————————————————————————————————————————
   Override grid to 3 uniform columns & rows
   ———————————————————————————————————————————————— */
.grid-cards {
  display: grid;
  /* exactly 3 columns of equal width */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* force each row to be 160px tall */
  grid-auto-rows: 160px;
  gap: 1rem;
  justify-content: center; /* center 3 columns if container is wider */
}

.card {
  /* fill the full grid-cell */
  width: 100%;
  height: 100%;
  /* you can remove aspect-ratio now, since height is fixed by the grid */
  aspect-ratio: auto;
  /* shrink padding slightly if you want more “white space” inside */
  padding: 0.75rem;
}
.card img {
  width: 100px;
  height: 100px;
  object-fit: contain; /* preserves aspect-ratio and centers */
  margin-bottom: 0.5rem; /* give a little breathing room before the title */
}
/* stoneType selector */
/* wrap both buttons in a neat 1px outline, centered on the page */
/* parent centers inline children */
#stone-type-selector {
  display: flex;
  justify-content: center;
  margin: 5px 0;
}

/* the outline + padding */
.stone-type-wrapper {
  display: inline-flex;        /* shrink-to-fit */
  border: 1px solid #000;      /* outer box */
  padding: 4px;                 /* gap between border and buttons */
}

/* your buttons */
.btn-stone {
  flex: 1;
  padding: 0.5rem 1.5rem;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
}

/* active button inset border */
.btn-stone.active {
  box-shadow: inset 0 0 0 1px #000;
  background: #fff;
  color: #000;
}
/* modal upgrades */

/* Summary header & text */
.summary-header {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.summary-text {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* Ring image */
.summary-image {
  display: block;
  max-width: 100%;
  margin: 0 auto 1rem;
  border-radius: 8px;
}

/* Divider */
.summary-divider {
  border: none;
  border-top: 1px solid var(--gray-300);
  margin: 1rem 0;
}

/* Field/value/change table */
.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
.summary-table td {
  padding: 0.5rem 0;
}
.summary-table .label {
  font-weight: 600;
  color: var(--primary);
  width: 35%;
}
.summary-table .value {
  width: 45%;
}
.summary-table .change a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}
/* row separator */
.summary-table tr + tr {
  border-top: 1px solid var(--gray-200);
}

/* footnote */
.summary-footnote {
  font-size: 0.75rem;
  color: var(--gray-300);
  margin-top: 0.5rem;
}

/*--------------------------------------------------------------
STEP 4: Center & enlarge Find My Ring, then 3 action buttons
--------------------------------------------------------------*/

/* 1. Center container for the big button */
#step4 .step4-find-wrapper {
  text-align: center;
  margin: 2rem 0;
}

/* 2. Enlarge the primary button */
#step4 .find-btn {
  font-size: 1.5rem;
  padding: 1rem 2.5rem;
}

/* 3. Layout for the three new action buttons */
#step4 .step4-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* 4. Square outline style */
#step4 .action-btn {
  width: 120px;
  height: 120px;
  border: 2px solid var(--primary);
  background: transparent;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

/* 5. Hover effect for the action buttons */
#step4 .action-btn:hover {
  background: var(--primary);
  color: var(--light);
}

#step4 .step4-actions {
  display: flex;
  /* … */
}

#step4 .step4-actions .action-btn {
  display: flex;
  /* … */
}

/* Hide the entire container when it has .hidden */
#step4 .step4-actions.hidden {
  display: none;
}

/* Hide individual action buttons when they have .hidden */
#step4 .step4-actions .action-btn.hidden {
  display: none;
}

/* Lookup message box */
.lookup-message {
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  max-width: 400px;
  text-align: center;
  background: var(--gray-200);
  border-radius: 4px;
  font-size: 1rem;
}
/* Ensure specific hide override */
#step4 .lookup-message.hidden {
  display: none !important;
}

@page {
  size: A4 portrait;    /* or “letter portrait” */
  margin: 5mm;          /* shrink margins as much as your printer allows */
}

/* at bottom of styles.css */
@media print {
  #detail-panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* Hide panel border when no step-1 selection has been made */
#detail-panel.no-border {
  border: none !important;
}



/*--------------------------------------------------------------
 Minimal noUiSlider Overrides
--------------------------------------------------------------*/

/* make the whole slider background transparent and remove its border */
.noUi-target {
  background: transparent;
  border: none !important;
}

/* the “rail” (un-filled track) */
.noUi-horizontal .noUi-base {
  height: 4px !important;
  background: var(--gray-300) !important;
  margin: 0;               /* remove any extra vertical padding */
}

/* the “connect” (filled portion) */
.noUi-horizontal .noUi-connect {
  background: var(--black) !important;
  height: 4px !important;
}

/* the draggable handles */
.noUi-horizontal .noUi-handle {
  width: 14px !important;
  height: 14px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: var(--light) !important;
  border: 2px solid var(--black) !important;
  box-shadow: none !important;
}

/* remove the little grip-lines inside each handle */
.noUi-horizontal .noUi-handle::before,
.noUi-horizontal .noUi-handle::after {
  display: none !important;
}

/* optional: a little halo on focus */
.noUi-horizontal .noUi-handle:focus {
  box-shadow: 0 0 0 4px rgba(185, 151, 88, 0.3) !important;
}

/* hide the default tooltip (you’re already showing values elsewhere) */
.noUi-tooltip {
  display: none !important;
}
/*--------------------------------------------------------------
Card‐title show/hide
--------------------------------------------------------------*/
/* 1) By default only the front‐title (underneath the image) shows; hide the back‐title */
.card-front .front-title {
  display: block;
  margin-top: 0.5rem;
}
.card-back .back-title {
  display: none;
}

/* 2) When you hover the card, swap them: hide front‐title, show back‐title */
.card:hover .card-front .front-title {
  display: none;
}
.card:hover .card-back .back-title {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600; /* match your other label styling */
}

/* by default show only the front‐title */
.card-front .front-title { 
  display: block; 
  margin-top: .5rem; 
}
.card-back  .back-title  { 
  display: none; 
}

/* on hover hide the front‐title and show the back‐title */
.card:hover .card-front .front-title { 
  display: none; 
}
.card:hover .card-back  .back-title  { 
  display: block; 
  margin-bottom: .5rem; 
  font-weight: 600; /* adjust as needed */ 
}

/* ensure the front pane stacks vertically */
.card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make the back side stack title over description */
#step1 .card-back {
  display: flex;            /* you already have this */
  flex-direction: column;   /* <-- stack children top to bottom */
  align-items: flex-start;  /* optional, left-aligns text */
}

/* Make the back side stack title over description */
#step3 .card-back {
  display: flex;            /* you already have this */
  flex-direction: column;   /* <-- stack children top to bottom */
  align-items: flex-start;  /* optional, left-aligns text */
  text-align: left;
}

/*--------------------------------------------------------------
Mobile-friendly overrides
--------------------------------------------------------------*/
@media (max-width: 600px) {
  /* Tighter page padding */
  .container {
    padding: 20px;
  }

  /* Keep steps side-by-side */
  .step-indicator {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .step-indicator .step {
    width: auto;
    flex: 1;
  }

  /* Two cards per row */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem;
  }
  /* Lock each card at 45% width and disable expansion */
  .grid-cards .card {
    width: 45% !important;
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
    margin: 0 auto;
  }

  /* Ensure front/back stack and center content */
  .grid-cards .card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }
  .grid-cards .card-front,
  .grid-cards .card-back {
    max-width: 100% !important;
  }

  /* --- Boost card image size on mobile --- */
  .grid-cards .card img {
    width: 100% !important;       /* take 80% of the card width */
    max-width: 120px;            /* but cap so it never overflows */
    height: auto !important;
    margin-bottom: 0.5rem;
  }
  .grid-cards .card .front-title,
  .grid-cards .card .back-title {
    font-size: 0.9rem;           /* maintain legible text */
  }

  /* Stack builder & panel vertically */
  .builder-content {
    flex-direction: column;
    gap: 1rem;
  }

  /* Keep action buttons side-by-side */
  #step4 .step4-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  #step4 .action-btn {
    width: 80px;
    height: 80px;
    font-size: 0.875rem;
  }

  /* Center filters & stone toggle */
  .filters,
  #stone-type-selector {
    justify-content: center;
  }

  /* Tweak summary panel spacing */
  .info-panel {
    padding: 1rem;
    margin-top: 1rem;
  }

  /* Reduce modal padding on mobile */
  .modal-content {
    padding: 1rem;
    max-width: 90%;
  }
}

/* Disable hover expansion on touch devices */
@media (hover: none) and (pointer: coarse) {
  .grid-cards .card:hover {
    /* no hover effect */
  }
}

/* Extra-small screen tweaks */
@media (max-width: 400px) {
  #step4 .action-btn {
    width: 60px;
    height: 60px;
    font-size: 0.75rem;
  }
}



/* hide any cuts disallowed by the current setting */
.hidden-by-rule {
  display: none !important;
}

/*--------------------------------------------------------------
14. Subtle shimmer on metal cards
/*------------------------------------------------------------
Enhanced, desynchronized shimmer on metal cards
------------------------------------------------------------*/
#step3 .card-front {
  position: relative;
  overflow: hidden;
}

/* put the shine above the image */
#step3 .card-front img {
  position: relative;
  z-index: 1;
}

#step3 .card-front::after {
  background: linear-gradient(
    30deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.1)  50%,   /* halved from 0.2 → 0.1 */
    rgba(255,255,255,0)    100%
  );
  filter: blur(1px);          /* keep the soft glow */
  transform: skewX(-20deg);
  filter: blur(1px);
  z-index: 2;
  pointer-events: none;
  animation: shimmer 4s infinite;
}

@keyframes shimmer {
  0%   { left: -150%; }
  100% { left: 250%; }
}

/* stagger each card’s shimmer start time */
#step3 .card:nth-child(3n+1) .card-front::after { animation-delay: 0s; }
#step3 .card:nth-child(3n+2) .card-front::after { animation-delay: 1.5s; }
#step3 .card:nth-child(3n)   .card-front::after { animation-delay: 3s; }


/*--------------------------------------------------------------
Bespoke badge
--------------------------------------------------------------*/
.card {
  position: relative;
}
.card .badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: white;              
  color: var(--primary);                /* black text */
  border: 1px solid var(--gold);        /* 1px gold outline */
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  pointer-events: none;
  opacity: 0.9;
}



/* Dynamic text sizing inside expanded metal cards */
#step3 .grid-cards .card-back {
  /* fluid font size: min 0.8rem, max 1rem, scales with viewport */
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.3;
  overflow: auto;            /* if text still overflows, allow scroll */
  padding: 0.75rem;          /* ensure some breathing room */
}

/* If you want list items a little smaller */
#step3 .grid-cards .card-back .metal-details li {
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  margin-bottom: 0.25rem;
}

.metal-stats {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
}
.metal-stats th,
.metal-stats td {
  padding: 0.25rem;
  border: 1px solid var(--gray-200);
  text-align: left;
}
.metal-stats th {
  background: var(--gray-200);
  font-weight: 500;
}
/* Make the summary preview image sit flush at the top and 40% smaller */
#detail-panel .summary-image {
  margin-bottom: 0 !important;
  max-width: 60% !important;
  height: auto;
}
/* Remove the top padding inside the detail panel */
#detail-panel {
  padding-top: 0 !important;
  /* keep the other padding values as they were */
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
}

/* Always show Download Image on Step 4 */
#step4 .step4-actions #download-image-btn {
  display: inline-flex !important;
  visibility: visible !important;
}

/* Hide the Price slider on Step 4 */
#step4 .slider-container:nth-of-type(2) {
  display: none !important;
}

/* step4: make your carat buttons look sharp */
#carat-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.btn.carat-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  background: var(--light);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;

  /* prevent them from growing too wide */
  max-width: 80px;         /* adjust as needed */
  max-height: 30px;         /* adjust as needed */
  white-space: nowrap;     /* keep “1.50 ct” on one line */
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn.carat-btn.active,
.btn.carat-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--light);
}



@media (max-width: 600px) {
  /* 1) Two-column, auto-height grid for Steps 1, 1b, 1c, 2 & 3 */
  #step1 .grid-cards,
  #step1b .grid-cards,
  #step1c .grid-cards,
  #step2 .grid-cards,
  #step3 .grid-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 0.5rem !important;
  }

  /* 2) Cards fill their cell, stay square, no padding */
  #step1 .grid-cards .card,
  #step1b .grid-cards .card,
  #step1c .grid-cards .card,
  #step2 .grid-cards .card,
  #step3 .grid-cards .card {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  /* 3) Hide the “back” pane and always show the front/title */
  #step1b .card-back,
  #step1c .card-back,
  #step2 .card-back,
  #step3 .card-back {
    display: none !important;
  }
  #step1b .card-front,
  #step1c .card-front,
  #step2 .card-front,
  #step3 .card-front {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  #step1b .front-title,
  #step1c .front-title,
  #step2 .front-title,
  #step3 .front-title {
    display: block !important;
    margin-top: 0.5rem;
  }

  /* 4) Scale & center images */
  #step1b .grid-cards .card img,
  #step1c .grid-cards .card img,
  #step2 .grid-cards .card img,
  #step3 .grid-cards .card img {
    max-width: 60%;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* 5) Container & step-container padding tweaks */
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .step-container {
    padding: 5px !important;
  }
}

.card-front .front-title {
  position: relative;
  z-index: 9999;
}

/* ──────────────────────────────────────────────────────────────
   Always let titles float above images (both desktop & mobile)
────────────────────────────────────────────────────────────── */
.grid-cards .card {
  position: relative;           /* create a positioning context */
  overflow: visible !important; /* allow children to escape card box */
  z-index: 1;                   /* base level for all cards */
}

.grid-cards .card:hover {
  z-index: 2;                   /* hovered card sits above its siblings */
}

.grid-cards .card img {
  position: relative;           /* sit above the card background */
  z-index: 3;                   /* but below the titles */
}

.grid-cards .card .front-title,
.grid-cards .card .back-title {
  position: relative;           /* allow z-index to take effect */
  z-index: 4 !important;        /* guaranteed on top of images & cards */
}

/* make the wrapper a fixed-size clipping box */
.image-container {
  width: 100%;        /* or an explicit px/em value */
  height: 0;
  padding-bottom: 100%;  /* 1:1 aspect ratio — adjust for whatever ratio you need */
  position: relative;
  overflow: hidden;
}

/* absolutely position the img inside, scale as needed */
.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;      /* use whichever dimension you want to fit first */
  height: 100%;
  transform: translate(-50%, -50%);
}

/* 1) Clip each image to its own box */
.card-img-wrap {
  /* keep your 1:1 aspect‐ratio & clipping */
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;

  /* NEW: center with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img-wrap img {
  /* make sure it never overflows */
  max-width: 100%;
  max-height: 100%;
  /* contain vs. cover is up to you */
  object-fit: contain;

  /* remove any old absolute-position rules */
  position: static;
  top: auto;
  left: auto;
  transform: none;
}

/*──────────────
──────────────*/
/* Instead of giving .card margin-top/margin-bottom, just set: */
.grid-cards {
  display: grid;
  /* 10px between each row, keep your 1.5rem (or whatever) between columns: */
  gap: 40px 2.5rem;
}
.card .badge {
  z-index: 10;  /* anything >3 */
}

/* print.css */
/* ===== print.css (FULL REPLACEMENT) ===== */

/* ===== print.css (UPDATED WITH FOOTER POSITIONING) ===== */

/* ────────────────────────────────────────────────────────────
   PRINT OVERRIDES
   ──────────────────────────────────────────────────────────── */
@media print {
  /* 1. Only show header, print-modal and footer */
  body * {
    visibility: hidden !important;
  }
  .print-header,
  .print-modal,
  .print-modal *,
  .print-footer {
    visibility: visible !important;
  }

  /* 2. Reset page margins */
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Header styling */
  .print-header {
    display: block !important;
    width: 100% !important;
    max-height: 15vh !important;
    object-fit: contain !important;
    margin-bottom: 1rem !important;
    page-break-after: avoid !important;
  }

  /* Centered wrapper */
  .print-modal {
    display: flex !important;
    justify-content: center !important;
    padding: 1rem 0 !important;
    margin: 0 !important;
  }

  /* Fixed-width content box */
  .print-modal > .print-content {
    box-sizing: border-box !important;
    width: 600px !important;      /* fixed width */
    margin: 0 auto 2rem !important;
    padding: 0 50px !important;    /* optional side gutters inside */
    font-size: 0.4em !important;
    line-height: 1.4 !important;
    border: none !important;
    page-break-inside: avoid !important;
  }

  /* 6. Remove border on the info-panel inside */
  .print-content .info-panel {
    border: none !important;
    box-shadow: none !important;
  }

  /* 7. Prevent splitting the summary table */
  .print-content .summary-table,
  .print-content .summary-table tbody,
  .print-content .summary-table tr {
    page-break-inside: avoid !important;
  }

  /* 8. Cap the ring image’s height */
  .print-content .summary-image {
    max-height: 30vh !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto 1rem !important;
  }

  /* 9. Hide “Change” links */
  .print-content .summary-table .change {
    display: none !important;
  }

  /* 10. Footer positioning */
  .print-footer {
    display: block !important;
    width: 100% !important;
    max-height: 40vh !important;
    object-fit: contain !important;
    position: absolute !important;
    top: calc(100% + -30rem) !important;
    left: 0 !important;
  }
}




/*────────────────────────────────────────────────────────────────────────
   iPad / Tablet-specific tweaks (600px ≤ width ≤ 1024px)
   ───────────────────────────────────────────────────────────────────────*/
@media (min-width: 600px) and (max-width: 1024px) {
  /* 1) Make all “.grid-cards” two columns instead of three+ */
  .grid-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* force each row to be a consistent height (you can tweak 180px) */
    grid-auto-rows: 180px !important;
    gap: 1rem !important;
    justify-content: center;
  }
    .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 2) Force each card to fill its cell, disable any hover-expand */
  .grid-cards .card {
    width: 100% !important;       /* fill the entire column */
    height: 100% !important;      /* fill the entire row */
    overflow: hidden !important;  /* no inner overflow */
    transition: none !important;  /* disable expansion animation */
    margin: 0 auto !important;    /* center it in case of any leftover space */
  }

  /* Also disable hover styles on iPad so cards never grow on “:hover” */
  .grid-cards .card:hover {
    width: 100% !important;
    margin-left: 0 !important;
    z-index: 1 !important;
  }

  /* 3) Shrink the image wrapper so thumbnails don’t clip or overflow */
  /*    (if you have a .card-img-wrap class from previous steps) */
  .card-img-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* keep it square */
    overflow: hidden !important;
    /* add a little padding inside so the image doesn’t hit the edges */
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .card-img-wrap img {
    max-width: 80% !important;  /* shrink image to 80% of its wrapper */
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
    .card .badge {
    font-size: 0.6rem;             /* shrink text */
    padding: 0.2rem 0.4rem;        /* shrink the pill’s padding */
    border-radius: 0.25rem;        /* keep a similar rounded shape */
  }

  /* 2) Horizontally center the badge at the top of each tile */
  .card {
    position: relative;            /* ensure we have a positioning context */
  }
  .card .badge {
    top:  0.5rem;                  /* still a small gap from the top edge */
    left: 50%;                     /* move to horizontal center of the card */
    right: auto;                   /* remove the default “right: 0.5rem” behavior */
    transform: translateX(-50%);   /* shift back by 50% of its own width */
  }

  /* 4) If you also want to tweak the font‐size of card titles on iPad: */
  .grid-cards .front-title,
  .grid-cards .back-title {
    font-size: 1rem !important;   /* adjust as needed */
  }
}

/*────────────────────────────────────────────────────────────────────────
   Extra safety: Disable any hover-only effects on touch devices,
   even if they’re outside the 600–1024px bracket (optional)
   ───────────────────────────────────────────────────────────────────────*/
@media (hover: none) and (pointer: coarse) {
  .grid-cards .card:hover {
    /* make sure nothing changes on “touch” */
    width: 100% !important;
    margin-left: 0 !important;
    z-index: 1 !important;
  }
}


/*────────────────────────────────────────────────────────────────────────
   Tablet / iPad overrides (e.g. 768px ≤ width ≤ 1366px)
────────────────────────────────────────────────────────────────────────*/
@media (min-width: 768px) and (max-width: 1366px) { 
  /* 1) Reduce left padding on the main <div class="container"> */
  .container {
    padding-left: 10px !important;   /* was 50px; shrink to 10px */
    padding-right: 10px !important;  /* you can also adjust right‐padding if desired */
  }

  /* 2) Reduce left padding on each step pane, too (if still needed) */
  .step-container {
    padding-left: 5px !important;    /* example: shrink from 32px→5px */
  }

  /* 3) Make the “Personalised” badge smaller and center it */
  .card {
    position: relative;               /* ensure badge can be positioned absolutely */
  }
  .card .badge {
    font-size: 0.6rem !important;     /* ~60% of normal */
    padding: 0.2rem 0.4rem !important;/* smaller inside padding */
    border-radius: 0.25rem !important;

    /* center horizontally */
    left: 50% !important;             
    right: auto !important;           /* remove any right‐offset */
    transform: translateX(-50%) !important;

    /* keep it near the top */
    top: 0.5rem !important;           
  }
}



/* in styles.css or a separate file */
.btn.carat-btn.unavailable {
  opacity: 0.4;
  pointer-events: auto; /* still clickable if you want */
}

/* ─────────────────────────────────────────────────────────────────────────
   Disable ALL hover‐based styling on iPad-horizontal (1024px) and smaller
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 1) Cancel any existing “.card:hover” transformations, shadows, flips, etc. */
  .card:hover,
  .card:hover .card-inner,
  .card:hover img,
  .card:hover .card-front,
  .card:hover .card-back {
    /* Remove any transform or visual change that your hover rules applied: */
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    /* (add any other properties you know your hover rules affected) */
  }

  /* 2) If you had a hover icon swap (e.g. swapping `data-hover-src` on mouseenter),
       you can force‐freeze the image in its “normal” state: */
  .card:hover img {
    content: none;
  }

  /* 3) If you rely on “hover to flip” (like a front/back card flip),
       disable that here too by forcing the “back” face off: */
  .card .card-inner {
    transition: none !important;
    /* any “flip” rotations or flips get undone: */
    transform: none !important;
  }

  /* 4) Finally, prevent mobile “pseudo‐hover” (touch‐triggered hover) from firing
       at all: */
  .card {
    pointer-events: auto; /* so the user can still tap it, but no hover kicks in */
  }
}


@media (hover: none) {
  /* Completely disable hover styles on touch devices */
  .card,
  .card .card-front,
  .card .card-back {
    transition: none !important;      /* no width/transform/padding changes */
  }

  .card:hover {
    border-color: transparent !important;
    width: auto !important;
    margin-left: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Mobile: even out the step indicator text
─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .step-indicator {
    flex-wrap: wrap;             /* allow wrapping if needed */
    gap: 0.5rem;                 /* tighten up the spacing */
  }

  .step-indicator .step {
    flex: 1 1 16%;               /* all steps get equal width */
    min-width: 0;                /* allow them to shrink equally */
    display: flex;               /* stack sub/title vertically */
    flex-direction: column;
    align-items: center;
    text-align: center;          /* center both lines */
    padding: 0.25rem;            /* a bit of breathing room */
  }

  .step-indicator .step-sub {
    font-size: 1rem;             /* main “Step X” text */
    font-weight: 700;
    white-space: normal;         /* allow wrap */
    line-height: 1.2;
    margin: 0;
  }

  .step-indicator .step-title {
    font-size: 0.75rem;          /* descriptive text underneath */
    color: #555;
    white-space: normal;         /* allow wrap */
    line-height: 1.2;
    margin: 0;
    margin-top: 0.25rem;
  }
}


/*─────────────────────────────────────────────────────────────
   1d. Expansion Card Component for Best Sellers (Step 1d)
─────────────────────────────────────────────────────────────*/
#step1d .grid-cards .card {
  width: 240px;
  height: 200px;
  background: var(--light);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, border-color 0.3s ease, margin 0.3s ease;
  position: relative;
  z-index: 1;
}
#step1d .grid-cards .card:hover {
  width: 500px;
  border-color: var(--accent);
  margin-left: 0;
  z-index: 10;
}
/* shift left on every 3rd to keep it in-bounds */
#step1d .grid-cards .card:nth-child(3n):hover {
  margin-left: calc(240px - 500px);
}

#step1d .grid-cards .card-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
#step1d .grid-cards .card-front {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}
#step1d .grid-cards .card-back {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
#step1d .grid-cards .card:hover .card-back {
  max-width: calc(100% - 200px);
  opacity: 1;
}

/* if you want the SKU text swapped front↔back on hover */
#step1d .card-front .front-title { display: block; }
#step1d .card-back  .back-title  { display: none; }
#step1d .card:hover .card-front .front-title { display: none; }
#step1d .card:hover .card-back  .back-title  { display: block; }

/*─────────────────────────────────────────────────────────────
   Include Step 1d (Best Sellers) in mobile overrides
─────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  /* Step 1d: Best Sellers (two-column, square cards, no hover, centered) */
  #step1d .grid-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 0.5rem !important;
  }

  #step1d .grid-cards .card {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: none !important;
  }

  /* Always show front, hide back */
  #step1d .grid-cards .card-back {
    display: none !important;
  }
  #step1d .grid-cards .card-front {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* Ensure SKU text is visible */
  #step1d .card-front .front-title {
    display: block !important;
    margin-top: 0.5rem;
  }

  /* Scale & center the image */
  #step1d .grid-cards .card img {
    max-width: 60%;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/*─────────────────────────────────────────────────────────────
   Hide the “Personalised” badge on all cards
─────────────────────────────────────────────────────────────*/
.card .badge {
  display: none !important;
}

.card .front-title,
.card .back-title {
  font-weight: normal !important;
}


/* Step 1c: stack hover title + description vertically */
#step1c .grid-cards .card-back {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

/* give the title some breathing room */
#step1c .card-back .back-title {
  margin-bottom: 0.5rem;
}

/* hide the description by default */
#step1c .card-back .back-desc {
  display: none;
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

/* only show it when the card is hovered */
#step1c .card:hover .card-back .back-desc {
  display: block;
}
/*─────────────────────────────────────────────────────────────
  Step 1c: hide any description under the image
─────────────────────────────────────────────────────────────*/
#step1c .card-front .front-desc,
#step1c .card-front .back-desc {
  display: none !important;
}




/* Success state */
#ring-profile-success {
  max-width: 400px;
  width: 90%;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

/* Email input */
.modal-body input[type="email"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Close button */
#email-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}