/* ============================================================
   KONFIGURÁTOR MODUL CSS (repro skin kiegészítés)
   A design tokenek és az alap komponensek (glass-panel, mat-btn,
   bf-btn, opt-select, cfg-slider, preset-btn, frame-btn, price)
   a style-repro.css-ből jönnek — itt CSAK a modul-specifikus
   kiegészítések vannak.
   ============================================================ */

/* Általános rejtő osztály (a JS ezt kapcsolgatja) */
.cfg-hidden { display: none !important; }

/* Zárolt kapcsoló (vakráma keret mellett: kötelező, nem kattintható) */
.cfg-locked {
  opacity: .55;
  pointer-events: none;
}

/* ============================================================
   ELŐNÉZET — 3x3 táblázat
   (táblázat a div-ek közti 1px-es hézag-bug elkerülésére!)
   ============================================================ */
#cfg-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
  padding: .5rem 0;
}

#cfg-preview-wrap {
  display: inline-block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: rotate(.6deg);
  transition: transform .6s;
}
#cfg-preview-wrap:hover { transform: rotate(0); }

#cfg-preview-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  line-height: 0;
}
#cfg-preview-table td {
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
  font-size: 0;
}
#cfg-p-c img {
  display: block;
  object-fit: fill;   /* a cm-ben beállított aránynak megfelelő méretet a JS adja */
}

#cfg-preview-empty {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-dim);
  text-align: center;
  padding: 3rem 1rem;
}

/* ============================================================
   FELTÖLTŐ ZÓNA kiegészítések
   ============================================================ */
#cfg-upload-zone {
  border: 2px dashed var(--border-gold-dim);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  cursor: pointer;
  transition: all .25s;
  min-height: 200px;
  gap: .75rem;
}
#cfg-upload-zone:hover,
#cfg-upload-zone.cfg-dragover {
  border-color: var(--gold);
  background: rgba(200, 169, 110, .05);
}
#cfg-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
#cfg-upload-icon { color: var(--gold); opacity: .55; }
#cfg-upload-progress {
  font-family: var(--font-spec);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .12em;
  color: var(--gold);
}

/* ============================================================
   KERETVÁLASZTÓ — görgethető lista arany scrollbarral
   (a galéria-dropdownok mintájára)
   ============================================================ */
#cfg-frames {
  max-height: 520px;
  overflow-y: auto;
  padding-right: .35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
#cfg-frames::-webkit-scrollbar { width: 6px; }
#cfg-frames::-webkit-scrollbar-track { background: transparent; }
#cfg-frames::-webkit-scrollbar-thumb {
  background: var(--gold-line);
  border-radius: 3px;
}

.frame-img {
  background-repeat: repeat-x;
  background-position: top left;
  background-size: auto 100%;
}

.cfg-frames-loading {
  grid-column: 1 / -1;
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  padding: 1.5rem 0;
}

/* ============================================================
   ÖSSZEGZŐ — az azonosítók cfg- prefixet kaptak,
   a design #price-display / #price-detail / #order-btn stílusaival
   ============================================================ */
#cfg-price-display {
  font-family: var(--font-spec);
  font-size: 3.25rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .35rem;
  letter-spacing: .04em;
}
#cfg-price-detail {
  font-size: .9rem;
  color: var(--text-dim);
  margin-bottom: 1.75rem;
  min-height: 1.2em;
}
#cfg-order-btn {
  width: 100%;
  padding: 1rem;
  background: var(--accent);
  color: #EDE8DF;
  font-family: var(--font-spec);
  font-size: 1.25rem;
  letter-spacing: .16em;
  border-radius: .3rem;
  border: none;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
#cfg-order-btn:hover { background: #a64836; }
#cfg-order-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Méret-input mezők (a terv #w-disp/#h-disp stílusa, cfg- id-kkal) */
#cfg-num-w, #cfg-num-h {
  width: 3.4ch;
  text-align: right;
  font-family: var(--font-spec);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: var(--sp-spacing);
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  cursor: text;
}
#cfg-num-w::-webkit-inner-spin-button,
#cfg-num-w::-webkit-outer-spin-button,
#cfg-num-h::-webkit-inner-spin-button,
#cfg-num-h::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cfg-upload-error { color: var(--error) !important; }

/* ============================================================
   RESZPONZÍV
   ============================================================ */
@media (max-width: 768px) {
  #cfg-frames { max-height: 380px; }
  #cfg-price-display { font-size: 2.5rem; }
}