/*
 * PRRP 3D Print Quote — quote form stylesheet
 *
 * Design direction: clean Korean industrial product page.
 * Dark-on-light, high contrast, intentional hierarchy, designed interaction states.
 *
 * Token layer → layout → components → states → responsive
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.prrp3d-quote-wrap {
  --prrp-primary       : #1a1a2e;
  --prrp-accent        : #e94560;
  --prrp-accent-hover  : #c73650;
  --prrp-accent-muted  : rgba(233, 69, 96, 0.12);
  --prrp-surface       : #ffffff;
  --prrp-surface-2     : #f8f9fa;
  --prrp-surface-3     : #f1f3f5;
  --prrp-border        : #e2e8f0;
  --prrp-border-strong : #cbd5e0;
  --prrp-text          : #1a202c;
  --prrp-text-muted    : #718096;
  --prrp-text-faint    : #a0aec0;
  --prrp-success       : #38a169;
  --prrp-success-bg    : #f0fff4;
  --prrp-error         : #e53e3e;
  --prrp-error-bg      : #fff5f5;
  --prrp-radius-sm     : 4px;
  --prrp-radius        : 8px;
  --prrp-radius-lg     : 12px;
  --prrp-shadow-sm     : 0 1px 2px rgba(0, 0, 0, 0.06);
  --prrp-shadow        : 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --prrp-shadow-lg     : 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --prrp-shadow-focus  : 0 0 0 3px rgba(233, 69, 96, 0.25);
  --prrp-step-num-size : clamp(2.5rem, 4vw, 3.5rem);
  --prrp-duration-fast : 120ms;
  --prrp-duration      : 220ms;
  --prrp-ease          : cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Wrap & global reset
   ========================================================================== */

.prrp3d-quote-wrap {
  font-family    : "Pretendard", -apple-system, "Apple SD Gothic Neo", BlinkMacSystemFont, "Segoe UI", sans-serif;
  color          : var(--prrp-text);
  background     : var(--prrp-surface);
  max-width      : 100%;
  margin         : 0 auto;
  padding        : 0;
  box-sizing     : border-box;
}

.prrp3d-quote-wrap *,
.prrp3d-quote-wrap *::before,
.prrp3d-quote-wrap *::after {
  box-sizing: inherit;
}

.prrp3d-quote-wrap h2 {
  margin  : 0;
  padding : 0;
  font-size   : clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight : 700;
  line-height : 1.2;
  letter-spacing: -0.02em;
  color   : var(--prrp-primary);
}

/* ==========================================================================
   Step progress nav
   ========================================================================== */

.prrp3d-steps-nav {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--prrp-border);
}

.prrp3d-steps-nav__list {
  display       : flex;
  list-style    : none;
  margin        : 0;
  padding       : 0;
  gap           : 0;
}

.prrp3d-steps-nav__item {
  display        : flex;
  align-items    : center;
  gap            : 0.5rem;
  padding        : 1rem 0;
  flex           : 1;
  border-bottom  : 3px solid transparent;
  opacity        : 0.4;
  cursor         : default;
  transition     : opacity var(--prrp-duration) var(--prrp-ease),
                   border-color var(--prrp-duration) var(--prrp-ease);
}

.prrp3d-steps-nav__item--active {
  opacity       : 1;
  border-color  : var(--prrp-accent);
}

.prrp3d-steps-nav__item--done {
  opacity       : 0.65;
  border-color  : var(--prrp-border-strong);
}

.prrp3d-steps-nav__num {
  font-size     : 0.7rem;
  font-weight   : 700;
  letter-spacing: 0.12em;
  color         : var(--prrp-text-muted);
  font-variant-numeric: tabular-nums;
  line-height   : 1;
}

.prrp3d-steps-nav__item--active .prrp3d-steps-nav__num {
  color: var(--prrp-accent);
}

.prrp3d-steps-nav__label {
  font-size     : 0.8rem;
  font-weight   : 600;
  color         : var(--prrp-text);
}

@media (max-width: 480px) {
  .prrp3d-steps-nav__label { display: none; }
  .prrp3d-steps-nav__num   { font-size: 0.75rem; }
}

/* ==========================================================================
   Step sections
   ========================================================================== */

.prrp3d-step {
  padding-bottom: 3rem;
}

.prrp3d-step__header {
  display       : flex;
  align-items   : flex-start;
  gap           : 1rem;
  margin-bottom : 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom : 1px solid var(--prrp-border);
}

.prrp3d-step__number {
  font-size     : var(--prrp-step-num-size);
  font-weight   : 800;
  line-height   : 1;
  letter-spacing: -0.04em;
  color         : var(--prrp-border);
  flex-shrink   : 0;
  user-select   : none;
  font-variant-numeric: tabular-nums;
}

.prrp3d-step__header-text {
  display       : flex;
  flex-direction: column;
  gap           : 0.3rem;
  padding-top   : 0.1em;
}

.prrp3d-step__description {
  font-size     : 0.875rem;
  color         : var(--prrp-text-muted);
  margin        : 0;
  line-height   : 1.4;
}

/* ==========================================================================
   Drop zone
   ========================================================================== */

.prrp3d-dropzone {
  border        : 2px dashed var(--prrp-border-strong);
  border-radius : var(--prrp-radius-lg);
  background    : var(--prrp-surface-2);
  min-height    : 200px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  cursor        : pointer;
  transition    : border-color var(--prrp-duration) var(--prrp-ease),
                  background   var(--prrp-duration) var(--prrp-ease),
                  transform    var(--prrp-duration) var(--prrp-ease),
                  box-shadow   var(--prrp-duration) var(--prrp-ease);
  outline       : none;
  position      : relative;
}

.prrp3d-dropzone:hover,
.prrp3d-dropzone:focus-visible {
  border-color  : var(--prrp-accent);
  background    : var(--prrp-accent-muted);
  transform     : translateY(-2px);
  box-shadow    : var(--prrp-shadow-lg);
}

.prrp3d-dropzone:focus-visible {
  box-shadow    : var(--prrp-shadow-focus);
}

.prrp3d-dropzone--over {
  border-color  : var(--prrp-accent);
  background    : var(--prrp-accent-muted);
  transform     : translateY(-2px);
  box-shadow    : var(--prrp-shadow-lg);
}

/* State panels: hidden by default; shown only when [hidden] is removed. */
.prrp3d-dropzone__idle,
.prrp3d-dropzone__uploading,
.prrp3d-dropzone__success,
.prrp3d-dropzone__error {
  display        : none;
  flex-direction : column;
  align-items    : center;
  gap            : 0.75rem;
  padding        : 2.5rem 2rem;
  width          : 100%;
  text-align     : center;
}

.prrp3d-dropzone__idle:not([hidden]),
.prrp3d-dropzone__uploading:not([hidden]),
.prrp3d-dropzone__success:not([hidden]),
.prrp3d-dropzone__error:not([hidden]) {
  display: flex;
}

.prrp3d-dropzone__icon {
  width : 3rem;
  height: 3rem;
  color : var(--prrp-text-muted);
  flex-shrink: 0;
}

.prrp3d-dropzone__icon--success { color: var(--prrp-success); }
.prrp3d-dropzone__icon--error   { color: var(--prrp-error);   }

.prrp3d-dropzone__prompt {
  font-size   : 0.9375rem;
  font-weight : 500;
  color       : var(--prrp-text);
  margin      : 0;
}

.prrp3d-dropzone__browse {
  background     : none;
  border         : none;
  padding        : 0;
  color          : var(--prrp-accent);
  font-weight    : 700;
  font-size      : inherit;
  cursor         : pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition     : color var(--prrp-duration-fast);
}

.prrp3d-dropzone__browse:hover { color: var(--prrp-accent-hover); }

.prrp3d-dropzone__formats {
  font-size : 0.8rem;
  color     : var(--prrp-text-faint);
  margin    : 0;
  letter-spacing: 0.02em;
}

.prrp3d-filename {
  font-size   : 0.9375rem;
  font-weight : 600;
  color       : var(--prrp-primary);
  margin      : 0;
  word-break  : break-all;
}

.prrp3d-dropzone__reupload,
.prrp3d-dropzone__retry {
  background    : transparent;
  border        : 1px solid var(--prrp-border-strong);
  border-radius : var(--prrp-radius-sm);
  padding       : 0.35rem 0.85rem;
  font-size     : 0.8125rem;
  font-weight   : 500;
  cursor        : pointer;
  color         : var(--prrp-text-muted);
  transition    : background var(--prrp-duration-fast), border-color var(--prrp-duration-fast), color var(--prrp-duration-fast);
}

.prrp3d-dropzone__reupload:hover { background: var(--prrp-surface-3); color: var(--prrp-text); border-color: var(--prrp-text-muted); }
.prrp3d-dropzone__retry           { border-color: var(--prrp-error); color: var(--prrp-error); }
.prrp3d-dropzone__retry:hover     { background: var(--prrp-error-bg); }

.prrp3d-error-message {
  font-size  : 0.875rem;
  color      : var(--prrp-error);
  margin     : 0;
  font-weight: 500;
}

/* Progress bar */
.prrp3d-progress-bar {
  width         : 100%;
  max-width     : 320px;
  height        : 4px;
  background    : var(--prrp-border);
  border-radius : 2px;
  overflow      : hidden;
}

.prrp3d-progress-bar__fill {
  height        : 100%;
  width         : 0%;
  background    : var(--prrp-accent);
  border-radius : 2px;
  transition    : width 0.1s linear;
}

.prrp3d-status-text {
  font-size  : 0.875rem;
  color      : var(--prrp-text-muted);
  margin     : 0;
}

/* ==========================================================================
   Model info panel
   ========================================================================== */

.prrp3d-model-info {
  margin-top    : 1.5rem;
  border        : 1px solid var(--prrp-border);
  border-radius : var(--prrp-radius-lg);
  overflow      : hidden;
  background    : var(--prrp-surface);
}

.prrp3d-model-info__viewer {
  width        : 100%;
  height       : 320px;
  background   : var(--prrp-surface-2);
  position     : relative;
  overflow     : hidden;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 0.85rem;
  color        : var(--prrp-text-muted);
}

.prrp3d-model-info__viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.prrp3d-model-stats {
  display     : flex;
  gap         : 0;
  margin      : 0;
  padding     : 0;
  border-top  : 1px solid var(--prrp-border);
}

.prrp3d-model-stats__item {
  display        : flex;
  flex-direction : column;
  gap            : 0.2rem;
  padding        : 1rem 1.25rem;
  flex           : 1;
  border-right   : 1px solid var(--prrp-border);
}

.prrp3d-model-stats__item:last-child {
  border-right: none;
}

.prrp3d-model-stats dt {
  font-size     : 0.7rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--prrp-text-faint);
  margin        : 0;
}

.prrp3d-model-stats dd {
  font-size   : 0.9375rem;
  font-weight : 600;
  color       : var(--prrp-primary);
  margin      : 0;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Fieldsets
   ========================================================================== */

.prrp3d-fieldset {
  border        : none;
  padding       : 0;
  margin        : 0 0 1.75rem;
}

.prrp3d-fieldset legend {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--prrp-text-muted);
  margin-bottom : 0.875rem;
  display       : block;
  width         : 100%;
  padding       : 0;
}

.prrp3d-fieldset legend span {
  font-weight: 700;
  color: var(--prrp-primary);
}

/* ==========================================================================
   Material grid
   ========================================================================== */

.prrp3d-material-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap                  : 0.625rem;
}

.prrp3d-material-card {
  position      : relative;
  display       : flex;
  flex-direction: column;
  gap           : 0.25rem;
  padding       : 0.875rem 1rem;
  border        : 1.5px solid var(--prrp-border);
  border-radius : var(--prrp-radius);
  cursor        : pointer;
  background    : var(--prrp-surface);
  transition    : border-color var(--prrp-duration-fast) var(--prrp-ease),
                  background   var(--prrp-duration-fast) var(--prrp-ease),
                  box-shadow   var(--prrp-duration-fast) var(--prrp-ease),
                  transform    var(--prrp-duration-fast) var(--prrp-ease);
  user-select   : none;
}

.prrp3d-material-card input[type="radio"] {
  position: absolute;
  opacity : 0;
  width   : 0;
  height  : 0;
  pointer-events: none;
}

.prrp3d-material-card:hover {
  border-color : var(--prrp-accent);
  background   : var(--prrp-accent-muted);
  transform    : translateY(-1px);
  box-shadow   : var(--prrp-shadow);
}

.prrp3d-material-card:has(input:checked) {
  border-color : var(--prrp-accent);
  background   : var(--prrp-accent-muted);
  box-shadow   : 0 0 0 2px var(--prrp-accent);
}

.prrp3d-material-card:has(input:focus-visible) {
  box-shadow: var(--prrp-shadow-focus);
  outline   : none;
}

.prrp3d-material-card__name {
  font-size  : 0.9375rem;
  font-weight: 700;
  color      : var(--prrp-primary);
  line-height: 1.2;
}

.prrp3d-material-card__name-ko {
  font-size  : 0.75rem;
  color      : var(--prrp-text-muted);
  line-height: 1.3;
}

/* ==========================================================================
   Color swatches
   ========================================================================== */

.prrp3d-color-swatches {
  display  : flex;
  flex-wrap: wrap;
  gap      : 0.5rem;
}

.prrp3d-swatch {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.3rem;
  cursor         : pointer;
  padding        : 0.25rem;
  border-radius  : var(--prrp-radius-sm);
  min-width      : 44px;
  min-height     : 44px;
  justify-content: center;
  transition     : transform var(--prrp-duration-fast) var(--prrp-ease);
}

.prrp3d-swatch:hover {
  transform: scale(1.08);
}

.prrp3d-swatch input[type="radio"] {
  position      : absolute;
  opacity       : 0;
  width         : 0;
  height        : 0;
  pointer-events: none;
}

.prrp3d-swatch__dot {
  width        : 28px;
  height       : 28px;
  border-radius: 50%;
  border       : 2px solid transparent;
  box-shadow   : 0 0 0 1px var(--prrp-border);
  transition   : box-shadow var(--prrp-duration-fast), transform var(--prrp-duration-fast);
  flex-shrink  : 0;
}

.prrp3d-swatch:has(input:checked) .prrp3d-swatch__dot {
  box-shadow : 0 0 0 3px var(--prrp-accent);
  transform  : scale(1.12);
}

.prrp3d-swatch:has(input:focus-visible) .prrp3d-swatch__dot {
  outline   : none;
  box-shadow: var(--prrp-shadow-focus);
}

.prrp3d-swatch__name {
  font-size  : 0.7rem;
  color      : var(--prrp-text-muted);
  text-align : center;
  line-height: 1.2;
  max-width  : 56px;
  overflow   : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Quality option cards
   ========================================================================== */

.prrp3d-quality-options {
  display: flex;
  gap    : 0.625rem;
  flex-wrap: wrap;
}

.prrp3d-quality-card {
  position      : relative;
  display       : flex;
  flex-direction: column;
  gap           : 0.2rem;
  padding       : 0.75rem 1.125rem;
  border        : 1.5px solid var(--prrp-border);
  border-radius : var(--prrp-radius);
  cursor        : pointer;
  background    : var(--prrp-surface);
  flex          : 1;
  min-width     : 100px;
  transition    : border-color var(--prrp-duration-fast) var(--prrp-ease),
                  background   var(--prrp-duration-fast) var(--prrp-ease),
                  box-shadow   var(--prrp-duration-fast) var(--prrp-ease);
  user-select   : none;
}

.prrp3d-quality-card input[type="radio"] {
  position: absolute;
  opacity : 0;
  width   : 0;
  height  : 0;
  pointer-events: none;
}

.prrp3d-quality-card:hover {
  border-color: var(--prrp-accent);
  background  : var(--prrp-accent-muted);
}

.prrp3d-quality-card:has(input:checked) {
  border-color: var(--prrp-accent);
  background  : var(--prrp-accent-muted);
  box-shadow  : 0 0 0 2px var(--prrp-accent);
}

.prrp3d-quality-card:has(input:focus-visible) {
  box-shadow: var(--prrp-shadow-focus);
  outline   : none;
}

.prrp3d-quality-card__name {
  font-size  : 0.9375rem;
  font-weight: 700;
  color      : var(--prrp-primary);
}

.prrp3d-quality-card__detail {
  font-size  : 0.75rem;
  color      : var(--prrp-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Infill options
   ========================================================================== */

.prrp3d-infill-presets {
  display : flex;
  gap     : 0.5rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}

.prrp3d-infill-preset {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.1rem;
  padding        : 0.5rem 0.875rem;
  border         : 1.5px solid var(--prrp-border);
  border-radius  : var(--prrp-radius-sm);
  background     : var(--prrp-surface);
  cursor         : pointer;
  font-size      : 0.8125rem;
  font-weight    : 600;
  color          : var(--prrp-text-muted);
  transition     : border-color var(--prrp-duration-fast),
                   background   var(--prrp-duration-fast),
                   color        var(--prrp-duration-fast);
  min-width      : 72px;
  text-align     : center;
}

.prrp3d-infill-preset small {
  font-size  : 0.7rem;
  font-weight: 400;
  opacity    : 0.8;
  font-variant-numeric: tabular-nums;
}

.prrp3d-infill-preset:hover,
.prrp3d-infill-preset--active {
  border-color: var(--prrp-accent);
  background  : var(--prrp-accent-muted);
  color       : var(--prrp-primary);
}

.prrp3d-infill-preset--active {
  font-weight: 700;
}

/* ==========================================================================
   Toggle group (Support / radio buttons styled as segmented control)
   ========================================================================== */

.prrp3d-toggle-group {
  display     : inline-flex;
  gap         : 0;
  border      : 1.5px solid var(--prrp-border);
  border-radius: var(--prrp-radius);
  overflow    : hidden;
}

.prrp3d-toggle-group__option {
  display    : flex;
  align-items: center;
  cursor     : pointer;
}

.prrp3d-toggle-group__option input[type="radio"] {
  position: absolute;
  opacity : 0;
  width   : 0;
  height  : 0;
  pointer-events: none;
}

.prrp3d-toggle-group__option span {
  display     : block;
  padding     : 0.5rem 1.125rem;
  font-size   : 0.8125rem;
  font-weight : 500;
  color       : var(--prrp-text-muted);
  border-right: 1px solid var(--prrp-border);
  transition  : background var(--prrp-duration-fast),
                color      var(--prrp-duration-fast);
  min-height  : 44px;
  display     : flex;
  align-items : center;
}

.prrp3d-toggle-group__option:last-child span {
  border-right: none;
}

.prrp3d-toggle-group__option:hover span {
  background: var(--prrp-surface-3);
  color     : var(--prrp-text);
}

.prrp3d-toggle-group__option:has(input:checked) span {
  background: var(--prrp-primary);
  color     : #ffffff;
}

.prrp3d-toggle-group__option:has(input:focus-visible) span {
  outline   : none;
  box-shadow: var(--prrp-shadow-focus);
}

/* ==========================================================================
   Post-process checkboxes
   ========================================================================== */

.prrp3d-post-processes {
  display       : flex;
  flex-direction: column;
  gap           : 0.5rem;
}

.prrp3d-checkbox {
  display    : flex;
  align-items: center;
  gap        : 0.625rem;
  cursor     : pointer;
  padding    : 0.625rem 0.875rem;
  border     : 1.5px solid var(--prrp-border);
  border-radius: var(--prrp-radius);
  background : var(--prrp-surface);
  transition : border-color var(--prrp-duration-fast),
               background   var(--prrp-duration-fast);
  min-height : 44px;
  user-select: none;
}

.prrp3d-checkbox:hover {
  border-color: var(--prrp-accent);
  background  : var(--prrp-accent-muted);
}

.prrp3d-checkbox:has(input:checked) {
  border-color: var(--prrp-accent);
  background  : var(--prrp-accent-muted);
}

.prrp3d-checkbox input[type="checkbox"] {
  width        : 18px;
  height       : 18px;
  border-radius: 4px;
  cursor       : pointer;
  accent-color : var(--prrp-accent);
  flex-shrink  : 0;
}

.prrp3d-checkbox__label {
  font-size  : 0.875rem;
  font-weight: 500;
  color      : var(--prrp-text);
  flex       : 1;
}

.prrp3d-addon-cost {
  font-size  : 0.8rem;
  color      : var(--prrp-text-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ==========================================================================
   Quantity control
   ========================================================================== */

.prrp3d-quantity-control {
  display    : inline-flex;
  align-items: center;
  gap        : 0;
  border     : 1.5px solid var(--prrp-border);
  border-radius: var(--prrp-radius);
  overflow   : hidden;
}

.prrp3d-qty-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 44px;
  height         : 44px;
  background     : var(--prrp-surface-2);
  border         : none;
  cursor         : pointer;
  color          : var(--prrp-text-muted);
  transition     : background var(--prrp-duration-fast), color var(--prrp-duration-fast);
  flex-shrink    : 0;
}

.prrp3d-qty-btn svg {
  width : 16px;
  height: 16px;
}

.prrp3d-qty-btn:hover {
  background: var(--prrp-accent-muted);
  color     : var(--prrp-accent);
}

.prrp3d-qty-btn:active {
  background: var(--prrp-accent);
  color     : #ffffff;
}

.prrp3d-qty-btn:focus-visible {
  outline   : none;
  box-shadow: var(--prrp-shadow-focus);
  position  : relative;
  z-index   : 1;
}

#prrp3d-quantity {
  width          : 64px;
  height         : 44px;
  border         : none;
  border-left    : 1px solid var(--prrp-border);
  border-right   : 1px solid var(--prrp-border);
  text-align     : center;
  font-size      : 1rem;
  font-weight    : 700;
  color          : var(--prrp-primary);
  background     : var(--prrp-surface);
  outline        : none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

#prrp3d-quantity::-webkit-inner-spin-button,
#prrp3d-quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#prrp3d-quantity:focus {
  background: var(--prrp-accent-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.prrp3d-btn {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  gap              : 0.4rem;
  padding          : 0.75rem 1.5rem;
  border-radius    : var(--prrp-radius);
  font-size        : 0.9375rem;
  font-weight      : 700;
  letter-spacing   : -0.01em;
  cursor           : pointer;
  border           : 1.5px solid transparent;
  transition       : background var(--prrp-duration-fast) var(--prrp-ease),
                     border-color var(--prrp-duration-fast) var(--prrp-ease),
                     color var(--prrp-duration-fast) var(--prrp-ease),
                     transform var(--prrp-duration-fast) var(--prrp-ease),
                     box-shadow var(--prrp-duration-fast) var(--prrp-ease),
                     opacity var(--prrp-duration-fast);
  min-height       : 48px;
  line-height      : 1;
  text-decoration  : none;
  white-space      : nowrap;
}

.prrp3d-btn:focus-visible {
  outline   : none;
  box-shadow: var(--prrp-shadow-focus);
}

/* Primary */
.prrp3d-btn--primary {
  background  : var(--prrp-accent);
  color       : #ffffff;
  border-color: var(--prrp-accent);
}

.prrp3d-btn--primary:hover:not(:disabled) {
  background  : var(--prrp-accent-hover);
  border-color: var(--prrp-accent-hover);
  transform   : translateY(-1px);
  box-shadow  : var(--prrp-shadow-lg);
}

.prrp3d-btn--primary:active:not(:disabled) {
  transform  : translateY(0);
  box-shadow : none;
}

/* Secondary */
.prrp3d-btn--secondary {
  background  : var(--prrp-surface-2);
  color       : var(--prrp-text);
  border-color: var(--prrp-border-strong);
}

.prrp3d-btn--secondary:hover:not(:disabled) {
  background  : var(--prrp-surface-3);
  border-color: var(--prrp-text-muted);
}

/* Ghost */
.prrp3d-btn--ghost {
  background  : transparent;
  color       : var(--prrp-text-muted);
  border-color: transparent;
}

.prrp3d-btn--ghost:hover:not(:disabled) {
  color       : var(--prrp-text);
  background  : var(--prrp-surface-2);
}

/* Disabled */
.prrp3d-btn:disabled,
.prrp3d-btn[aria-disabled="true"] {
  opacity : 0.45;
  cursor  : not-allowed;
}

/* Done state */
.prrp3d-btn--done {
  background  : var(--prrp-success);
  border-color: var(--prrp-success);
  cursor      : default;
}

/* ==========================================================================
   Step actions row
   ========================================================================== */

.prrp3d-step-actions {
  display        : flex;
  justify-content: flex-end;
  margin-top     : 1.5rem;
}

.prrp3d-step-actions--between {
  justify-content: space-between;
}

/* ==========================================================================
   Price display — Step 3
   ========================================================================== */

.prrp3d-price-display {
  margin-bottom: 2rem;
  position     : relative;
}

.prrp3d-price-loading:not([hidden]) {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.75rem;
  padding        : 3rem 0;
  color          : var(--prrp-text-muted);
  font-size      : 0.875rem;
}

.prrp3d-spinner {
  width            : 36px;
  height           : 36px;
  border           : 3px solid var(--prrp-border);
  border-top-color : var(--prrp-accent);
  border-radius    : 50%;
  animation        : prrp3d-spin 0.7s linear infinite;
}

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

.prrp3d-price-result {
  border       : 1px solid var(--prrp-border);
  border-radius: var(--prrp-radius-lg);
  overflow     : hidden;
  transition   : opacity var(--prrp-duration);
}

.prrp3d-total-price {
  display        : flex;
  align-items    : baseline;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 0.5rem;
  padding        : 1.75rem 1.75rem 1.25rem;
  background     : var(--prrp-primary);
  color          : #ffffff;
}

.prrp3d-price-label {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity       : 0.65;
  flex-shrink   : 0;
}

.prrp3d-price-amount {
  font-size        : clamp(1.75rem, 5vw, 2.75rem);
  font-weight      : 800;
  letter-spacing   : -0.04em;
  line-height      : 1;
  font-variant-numeric: tabular-nums;
}

.prrp3d-meta-row {
  display   : flex;
  gap       : 1.5rem;
  padding   : 0.875rem 1.75rem;
  background: var(--prrp-surface-2);
  border-top: 1px solid var(--prrp-border);
  border-bottom: 1px solid var(--prrp-border);
  flex-wrap : wrap;
}

.prrp3d-meta-item {
  font-size  : 0.8125rem;
  color      : var(--prrp-text-muted);
  font-weight: 500;
}


.prrp3d-quote-error {
  padding    : 0.875rem 1.75rem;
  background : var(--prrp-error-bg);
  color      : var(--prrp-error);
  font-size  : 0.875rem;
  font-weight: 500;
  border-top : 1px solid rgba(229, 62, 62, 0.2);
}

/* ==========================================================================
   Actions row
   ========================================================================== */

.prrp3d-actions {
  display        : flex;
  gap            : 0.75rem;
  justify-content: flex-end;
  flex-wrap      : wrap;
}

/* Cart feedback */
.prrp3d-cart-message {
  margin-top : 1rem;
  padding    : 0.875rem 1.125rem;
  border-radius: var(--prrp-radius);
  font-size  : 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.prrp3d-cart-message--success {
  background  : var(--prrp-success-bg);
  color       : var(--prrp-success);
  border      : 1px solid rgba(56, 161, 105, 0.25);
}

.prrp3d-cart-message--error {
  background  : var(--prrp-error-bg);
  color       : var(--prrp-error);
  border      : 1px solid rgba(229, 62, 62, 0.25);
}

.prrp3d-cart-message a {
  color          : inherit;
  font-weight    : 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Notice / empty state
   ========================================================================== */

.prrp3d-notice {
  font-size  : 0.875rem;
  color      : var(--prrp-text-muted);
  margin     : 0;
  padding    : 0.75rem 0;
  font-style : italic;
}

.prrp3d-error {
  padding      : 1rem 1.25rem;
  background   : var(--prrp-error-bg);
  color        : var(--prrp-error);
  border-radius: var(--prrp-radius);
  font-size    : 0.875rem;
}

/* ==========================================================================
   Screen-reader only utility
   ========================================================================== */

.screen-reader-text {
  position : absolute;
  width    : 1px;
  height   : 1px;
  padding  : 0;
  margin   : -1px;
  overflow : hidden;
  clip     : rect(0, 0, 0, 0);
  white-space: nowrap;
  border   : 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .prrp3d-quote-wrap {
    padding: 0;
  }

  .prrp3d-material-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .prrp3d-quality-options {
    flex-direction: column;
  }

  .prrp3d-quality-card {
    flex: none;
    width: 100%;
  }

  .prrp3d-model-stats {
    flex-direction: column;
  }

  .prrp3d-model-stats__item {
    border-right  : none;
    border-bottom : 1px solid var(--prrp-border);
    flex-direction: row;
    justify-content: space-between;
    align-items   : center;
  }

  .prrp3d-model-stats__item:last-child {
    border-bottom: none;
  }

  .prrp3d-total-price {
    flex-direction: column;
    gap: 0.3rem;
  }

  .prrp3d-meta-row {
    flex-direction: column;
    gap: 0.375rem;
  }

  .prrp3d-actions {
    flex-direction: column;
  }

  .prrp3d-actions .prrp3d-btn {
    width     : 100%;
    text-align: center;
  }

  .prrp3d-step-actions--between {
    gap: 0.75rem;
  }

  .prrp3d-infill-presets {
    gap: 0.375rem;
  }

  .prrp3d-infill-preset {
    flex: 1;
    min-width: 60px;
  }

  .prrp3d-model-info__viewer {
    height: 220px;
  }

  .prrp3d-toggle-group {
    width: 100%;
  }

  .prrp3d-toggle-group__option {
    flex: 1;
    justify-content: center;
  }

  .prrp3d-toggle-group__option span {
    justify-content: center;
    width: 100%;
  }

  .prrp3d-total-price {
    padding: 1.25rem 1.25rem 1rem;
  }

  .prrp3d-meta-row {
    padding: 0.75rem 1.25rem;
  }
}

@media (max-width: 400px) {
  .prrp3d-step__number {
    display: none;
  }

  .prrp3d-step__header {
    gap: 0;
  }

  .prrp3d-dropzone__idle,
  .prrp3d-dropzone__success,
  .prrp3d-dropzone__error {
    padding: 1.75rem 1rem;
  }
}

/* Reduced motion — disable all non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  .prrp3d-quote-wrap *,
  .prrp3d-quote-wrap *::before,
  .prrp3d-quote-wrap *::after {
    animation-duration       : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration      : 0.01ms !important;
    scroll-behavior          : auto !important;
  }

  .prrp3d-spinner {
    animation: none;
    border    : 3px solid var(--prrp-accent);
  }
}