.hidden {display: none !important;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.selected {border: rgb(244, 80, 198) solid 3px;}
.gd-panel { border: 2px solid #ddd; border-radius: 15px; box-shadow: 0px 1px 33px 1px rgba(0,0,0,0.20); background-color: var(--global-palette8); height: 80vh;}
.gd-topbar {display: flex; background-color: var(--global-palette7); padding: 14px 10px 10px 10px; border-radius: 15px 15px 0 0; align-items: center; line-height: 1;}
.gd-topbar-link {padding:0; margin-left: 20px; background-color: rgba(0,0,0,0); cursor: pointer;color:var(--global-palette4)}
.gd-topbar-icon {scale: 1.2; fill:var(--global-palette4); transition: all 0.15s ease-in-out;}
.gd-topbar-icon:hover {fill: var(--global-palette1)}
.gd-topbar p {margin-left: 30px; color:var(--global-palette4); font-size: 24px; font-weight:700;}
.gd-main-section {display:flex; height: 92%; }
.gd-display { width: 50%; padding: 20px 40px}
.gd-left-display {display:flex; flex-direction: column; gap: 40px; background-color: white;}
.gd-checkbox {margin-bottom: 4px;}
.gd-right-display { display: flex; flex-direction: column; justify-content: space-between; background-color: #f9ebe3;}
.gd-panel h3 { margin: 0 10px 0 0 !important; font-size: 26px;text-align: center;}
.gd-panel label { display:block; margin:8px 0; }
.gd-panel select { width:100%; padding:8px; margin-top:4px; box-sizing:border-box; }
.gd-actions { margin:12px 0; display:flex; justify-content: space-between; align-items: center;}
.gd-actions button { padding:1rem 1.5rem; cursor:pointer; font-size: 18px;}
.gd-actions #gd-back {background-color: rgba(0,0,0,0); border: 2px solid var(--global-palette4); color:var(--global-palette4);}
.gd-actions #gd-back:hover {border: 2px solid var(--global-palette1); color:var(--global-palette1);}

#gd-svg-container { width:100%; height:auto; display:block; position:relative; }
#gd-preview-svg { width:100%; height:auto; display:block; }
/* allow dragging on touch: disable browser gestures on svg and children */
#gd-preview-svg,
#gd-preview-svg * {
  touch-action: none;            /* critical: allow pointermove delivery */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;             /* prevent text selection on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* ensure svg text/circles accept pointer events */
/* #gd-preview-svg text,
#gd-preview-svg circle,
#gd-preview-svg rect {
  pointer-events: all;
  -webkit-user-select: none;
  user-select: none;
} */
#gd-stone-shape, #gd-stone-path,#gd-base-shape {
  pointer-events: none;
}


/* grid overlay */
#gd-grid-overlay { position:absolute; inset:0; pointer-events:none; display:none; }
/* steps container */
.gd-steps-container { height:100%; display:flex; flex-direction:column; gap:0; }
.gd-step { height:100%; display:flex; flex-direction:column; gap:10px; justify-content: space-between; }
.gd-step.hidden { display:none; }

/* scrollable controls area */
.gd-step .gd-controls-list,
.gd-step .gd-swatches,
.gd-step .gd-shapes,
.gd-step .gd-decor-list,
.gd-step .gd-summary {
  overflow:auto;
  flex:1 1 auto;
  padding-right:6px;
  max-height: 45vh;
}
.gd-main-step-content { display: flex; flex-direction: column; gap: 20px;}
/* Input and field building */
.gd-field { display:flex; flex-direction:column; gap:6px; }
.gd-input { width:100%; padding:8px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); box-sizing:border-box; }

/* swatches & shapes */
.gd-swatches, .gd-shapes, .gd-decor-list { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content: center;}
.gd-swatch,.gd-shape, .gd-decoration { width:120px; height:120px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); border:3px solid transparent; cursor:pointer; padding:0; font-size: 18px;}
.gd-swatch.selected, .gd-shape.selected, .gd-decoration.selected { border-color:  #e353bf; }
.gd-button-text {background-color: rgba(0, 0, 0, 0.161); padding: 8px 0 4px 0;}
/* text controls list */
.gd-controls-list { display:flex; flex-direction:column; gap:10px; }
.gd-text-row { display:flex; gap:8px; align-items:center; padding:8px; background: rgba(255,255,255,0.7); }
.gd-text-row input[type="text"], .gd-text-row input[type="number"], .gd-text-row select, .gd-text-row input[type="color"] { padding:6px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); width:100%;}
.gd-text-row button,.gd-decor-detail button {border-radius:6px; border:2px solid rgba(0,0,0,0.60); background:transparent; cursor:pointer; font-size:18px; color:var(--global-palette4); padding: 12px 15px 8px 15px; }
.gd-text-row button {width:100%;}

/* decoration detail panel */
.gd-decor-detail { margin-top:8px; padding: 8px 20px; border-radius:8px; border:1px solid rgba(0,0,0,0.05); background:rgba(255,255,255,0.9); display: flex;align-items: center; justify-content: space-between;font-size: 20px; }
.gd-size-box {display: flex; align-items: center; gap: 10px;}

/* summary table */
.gd-summary table { width:100%; border-collapse:collapse; }
.gd-summary th, .gd-summary td { padding:8px; border-bottom:1px solid rgba(0,0,0,0.06); text-align:left; }
.gd-summary tfoot td { font-weight:700; }
.gd-summary-list-highlight {background-color: var(--global-palette7);}

/* actions (navigation) — sticky to bottom of the right panel */
.gd-actions { display:flex; gap:10px; align-items:center; justify-content:space-between; padding-top:8px; }
.gd-btn { padding:10px 14px; border-radius:8px; border:2px solid rgba(0,0,0,0.50); background:transparent; cursor:pointer; color:black;}
.gd-btn-primary { background:var(--global-palette1, #a36); color:white; border:none; }
.gd-price { background:#fff; padding:10px 12px; border-radius:8px; color: black;}

/* selection visuals (SVG) */
.gd-selected-rect { fill:none; stroke: #2a9dd4; stroke-width:1; pointer-events:none; }

/* Modal: centered image with dimmed background */
.gd-modal { position: fixed; inset: 0; display: none; z-index: 9999; font-family: inherit; }
.gd-modal[aria-hidden="false"] { display: block; }

/* dark overlay */
.gd-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* dialog box centered */
.gd-modal__dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 94vw;
  max-height: 94vh;
  background: white;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* content wrapper */
.gd-modal__content {
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* image responsive, keeps aspect ratio and fits */
.gd-modal__content img {
  display:block;
  max-width: 88vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* close button top-right */
.gd-modal__close {
  position: absolute;
  right: 8px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 6px;
  cursor: pointer;
  color: #333;
  border-radius: 6px;
}
.gd-modal__close:hover { background: rgba(0,0,0,0.04); }

/* accessibility: hide the overlay from keyboard focus */
.gd-modal__overlay { pointer-events: auto; }

/* disable body scroll when modal open — we toggle a class from JS but you can use this too */
body.gd-modal-open { overflow: hidden; touch-action: none; }

@media (min-width:600px) {
  .mobile-break {display: none;} 
}
@media (max-width:1000px) {
  .gd-topbar p {font-size: 22px;}
  .gd-main-section { flex-direction:column; }
  .gd-display { width:100%; padding:10px; }
  .gd-left-display { gap: 5px;}
  .gd-right-display {height: 450px;}
  #gd-svg-container { width:80%; margin:0 auto; }
  .gd-panel {height: 100%; overflow: auto;}
  .gd-step .gd-swatches,.gd-step .gd-decor-list,.gd-step .gd-summary {max-height: 300px;}
  .gd-step .gd-controls-list {max-height: 200px;}
  .gd-main-step-content {gap: 5px;}
  .gd-actions {margin-top:0;padding-top:0; gap:5px;}
  .gd-actions button {font-size:16px; padding: 1.2em 0.8em;}
  .gd-panel h3 {font-size: 20px;}
  .gd-swatch,.gd-shape, .gd-decoration {width:100px; height: 100px; padding:0; font-size: 16px;}
  .gd-step .gd-decor-list {max-height: 240px;}
  .gd-decor-detail {font-size: 15px; gap:5px;}
  .gd-decor-detail button {font-size: 15px;}
  .gd-decor-title {display: none;}
}
@media (max-width: 400px) {
  .gd-actions button {font-size:14px; padding: 1.2em 0.8em;}

}