/* ═══════════════════════════════════════════════════
   GLASS CALCULATOR PRO — v2.3
═══════════════════════════════════════════════════ */

.glass-calc { margin: 16px 0; font-family: inherit; }

/* ── Fasong-velger ───────────────────────────────── */
.glass-shape-section { margin-bottom: 16px; }

/* Toggle-knapp som viser valgt fasong */
.glass-shape-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.glass-shape-toggle:hover,
.glass-shape-toggle.open { border-color: #4A90D9; background: #f5f9fe; }

.glass-shape-toggle-thumb { flex: 0 0 auto; line-height: 0; }
.glass-shape-toggle-thumb svg { display: block; }

.glass-shape-toggle-info {
  flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.glass-shape-toggle-lbl  { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .04em; }
.glass-shape-toggle-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }

.glass-shape-toggle-arrow { font-size: 14px; color: #888; flex: 0 0 auto; }

/* Grid — hidden by default, shown when toggle is open */
.glass-shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 7px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  background: #f7f9fc;
}

.glass-shape-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border: 1px solid #dde3ea; border-radius: 6px;
  background: #fff; cursor: pointer; transition: border-color .1s, background .1s;
}
.glass-shape-btn:hover   { border-color: #4A90D9; background: #eef5fb; }
.glass-shape-btn.selected{ border-color: #4A90D9; border-width: 2px; background: #deeefa; }
.glass-shape-btn span    { font-size: 10px; color: #444; text-align: center; line-height: 1.2; }
.glass-shape-btn em      { font-size: 10px; font-style: normal; color: #e67e22; font-weight: 600; }

/* ── Hoved-layout: inputfelt + stor forhåndsvisning ─ */
.glass-main-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.glass-inputs-col { flex: 0 0 200px; }

.glass-preview-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  border-radius: 8px;
  padding: 6px 4px 4px;
  height: 316px;
  justify-content: center;
  overflow: hidden;
}

#glass-preview-inner { display: flex; align-items: center; justify-content: center; width: 100%; }
#glass-preview-inner svg { display: block; max-width: 100%; height: auto; }

/* ── Inputfelt ──────────────────────────────────── */
.glass-field       { margin-bottom: 14px; }
.glass-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.88em; }

.glass-input-wrap { position: relative; }
.glass-input-wrap input[type="number"] {
  width: 100%; padding: 9px 42px 9px 10px;
  border: 1px solid #ccc; border-radius: 4px;
  box-sizing: border-box; font-size: 1em;
}
.glass-input-wrap input[type="number"]:focus {
  outline: none; border-color: #4A90D9;
  box-shadow: 0 0 0 2px rgba(74,144,217,0.15);
}
.glass-unit {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); color: #999; font-size: 0.85em; pointer-events: none;
}

.glass-hint        { font-weight: 400; color: #888; font-size: 0.83em; }
.glass-field-error { font-size: 0.8em; color: #c0392b; min-height: 1em; margin-top: 2px; }
.glass-input-error { border-color: #c0392b !important; box-shadow: 0 0 0 2px rgba(192,57,43,.15)!important; }

/* ── Bunnlinje: areal + pris ─────────────────────── */
.glass-bottom { margin-bottom: 14px; }
.glass-meta   { font-size: 0.9em; color: #444; margin-bottom: 4px; }
.glass-price  { font-size: 1em; color: #888; }
.glass-price--active { font-size: 1.9em; font-weight: 700; color: #1a1a1a; }

/* ── Avrundede hjørner – toggle-knapp ───────────── */
.glass-corners-toggle {
  display: block; width: 100%; margin: 8px 0 0;
  padding: 11px 16px; border: 1px solid #4A90D9; border-radius: 6px;
  background: #fff; color: #4A90D9; font-size: 0.95em; font-weight: 600;
  cursor: pointer; text-align: center; transition: background .12s, color .12s;
}
.glass-corners-toggle:hover,
.glass-corners-toggle.active { background: #4A90D9; color: #fff; }

/* ── Avrundede hjørner – panel ───────────────────── */
.glass-corners-panel {
  margin-top: 8px; border: 0.5px solid #ccd6e0;
  border-radius: 8px; overflow: hidden;
}

/* Summary-bar (alltid synlig når panel er åpent) */
.gc-corners-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid #e0e7ef;
  transition: background .1s;
}
.gc-corners-bar:hover { background: #eef5fb; }

.gc-corners-summary {
  flex: 1; font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
}

.gc-corners-min-btn {
  font-size: 12px; color: #4A90D9; font-weight: 500; white-space: nowrap;
}

.gc-cgrid { display: flex; flex-direction: column; border-bottom: 1px solid #e0e7ef; }

.gc-crow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; font-size: 0.9em;
  border-bottom: 1px solid #f0f0f0; transition: background .1s;
  color: #333;
}
.gc-crow:last-child { border-bottom: none; }
.gc-crow:hover { background: #f7f9fc; }

.gc-call { background: #1a3a5c !important; color: #fff !important; font-weight: 600; }
.gc-call:hover { background: #214875 !important; }
.gc-call input[type="checkbox"] { accent-color: #fff; }

.gc-crow input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4A90D9; cursor: pointer; }

.gc-rrow {
  display: flex; align-items: center;
}
.gc-rlbl {
  padding: 10px 16px; background: #1a3a5c; color: #fff;
  font-weight: 700; font-size: 0.95em; min-width: 42px; text-align: center;
}
.gc-rrow input[type="number"] {
  flex: 1; padding: 10px 12px; border: none; outline: none;
  font-size: 0.95em; background: #fff; color: #1a1a1a; text-align: right;
}
.gc-runit {
  padding: 10px 12px; background: #f5f5f5; color: #888;
  font-size: 0.85em; border-left: 1px solid #e0e7ef;
}

/* ── Deaktiver legg-i-kurv ───────────────────────── */
.single_add_to_cart_button.glass-disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── Tegning i handlekurv og ordre ───────────────── */
.glass-cart-drawing,
.glass-order-drawing {
  margin: 8px 0 4px;
}
.glass-cart-drawing img,
.glass-order-drawing img {
  display: block;
  max-width: 220px;
  height: auto;
  border: 1px solid #e0e7ef;
  border-radius: 4px;
  background: #fff;
  padding: 4px;
}

/* ── Mobil ───────────────────────────────────────── */
@media (max-width: 540px) {
  .glass-main-layout { flex-direction: column; }
  .glass-inputs-col  { width: 100%; }
  .glass-preview-col { width: 100%; min-height: 220px; }
  .glass-shape-grid  { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}

/* ── Per-hjørne radius ───────────────────────────── */
.gc-per-radii { border-top: 0.5px solid #e0e7ef; }

.gc-per-rrow {
  display: flex; align-items: center;
}

.gc-rlbl-sm {
  padding: 8px 10px; background: #f0f4f8; color: #1a3a5c;
  font-weight: 500; font-size: 11px;
  min-width: 120px; border-right: 0.5px solid #e0e7ef;
}

.gc-per-rrow input {
  flex: 1; padding: 8px 10px; border: none; outline: none;
  font-size: 13px; background: var(--color-background-primary);
  color: var(--color-text-primary); text-align: right;
  border-bottom: 0.5px solid #f0f0f0;
}

.gc-per-rrow .gc-runit {
  border-left: 0.5px solid #e0e7ef;
  border-bottom: 0.5px solid #f0f0f0;
}

/* ── Hull i glasset ──────────────────────────────── */
.glass-holes-toggle {
  display: block; width: 100%; margin-top: 8px;
  padding: 10px 14px; border: 0.5px solid #4A90D9; border-radius: 8px;
  background: var(--color-background-primary); color: #4A90D9;
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
  transition: background .12s, color .12s;
}
.glass-holes-toggle:hover,
.glass-holes-toggle.active { background: #4A90D9; color: #fff; }

.glass-holes-panel {
  margin-top: 8px; border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px; overflow: hidden;
}

.glass-holes-list { display: flex; flex-direction: column; }

.glass-hole-item {
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.glass-hole-item:last-child { border-bottom: none; }

.ghi-header {
  display: flex; align-items: center; padding: 8px 12px;
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.ghi-num { flex: 1; font-weight: 600; font-size: 13px; color: var(--color-text-primary); }
.ghi-del {
  border: none; background: none; color: #c0392b;
  font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
}

.ghi-fields {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: var(--color-border-tertiary);
}
.ghi-field {
  background: var(--color-background-primary); padding: 8px 10px;
}
.ghi-field label {
  display: block; font-size: 10px; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.ghi-iw { position: relative; }
.ghi-iw input {
  width: 100%; padding: 7px 28px 7px 8px;
  border: 0.5px solid var(--color-border-primary); border-radius: 6px;
  font-size: 13px; background: var(--color-background-primary); color: var(--color-text-primary);
}
.ghi-iw input:focus { outline: none; border-color: #4A90D9; box-shadow: 0 0 0 2px rgba(74,144,217,.12); }
.ghi-unit {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--color-text-tertiary); pointer-events: none;
}
.ghi-err { font-size: 10px; color: #c0392b; min-height: 14px; margin-top: 2px; }

.glass-hole-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; cursor: pointer; color: #4A90D9; font-size: 13px; font-weight: 500;
  background: var(--color-background-secondary);
  border-top: 0.5px solid var(--color-border-tertiary);
  border: none; width: 100%;
}
.glass-hole-add:hover { background: var(--color-background-info); }

.glass-holes-preview {
  border-top: 0.5px solid var(--color-border-tertiary);
  padding: 10px; display: flex; justify-content: center;
  background: var(--color-background-secondary);
}
.glass-holes-preview svg { display: block; max-width: 100%; }

/* ── Utskjæring (stikkontakt) ────────────────────── */
.glass-cutout-add {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  color: #7d3c98 !important;
  border-top-color: var(--color-border-tertiary) !important;
}
.glass-cutout-add:hover { background: #f5eef8 !important; }

.glass-cutout-item .ghi-header {
  background: #f5eef8 !important;
}

.gci-type-row {
  padding: 8px 10px;
  background: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.gci-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 7px;
  padding: 10px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
}

.gci-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 5px 6px; border: 0.5px solid var(--color-border-secondary);
  border-radius: 7px; background: var(--color-background-primary);
  cursor: pointer; transition: border-color .1s, background .1s;
}
.gci-type-btn:hover { border-color: #7d3c98; background: #f5eef8; }
.gci-type-btn.gci-sel { border: 1.5px solid #7d3c98; background: #f5eef8; }
.gci-btn-name { font-size: 10px; font-weight: 500; color: var(--color-text-primary); text-align: center; line-height: 1.2; }
.gci-btn-dim  { font-size: 9px; color: var(--color-text-tertiary); }

/* ── Utskjæring i glasset ────────────────────────── */
.glass-notch-toggle {
  display: block; width: 100%; margin-top: 8px;
  padding: 10px 14px; border: 0.5px solid #e67e22; border-radius: 8px;
  background: var(--color-background-primary); color: #e67e22;
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
  transition: background .12s, color .12s;
}
.glass-notch-toggle:hover,
.glass-notch-toggle.active { background: #e67e22; color: #fff; }

.glass-notch-panel {
  margin-top: 8px; border: 0.5px solid #f0d9c0;
  border-radius: 8px; overflow: hidden;
}

.glass-notch-item { border-bottom: 0.5px solid var(--color-border-tertiary); }
.glass-notch-item:last-child { border-bottom: none; }

.gni-header {
  display: flex; align-items: center; padding: 8px 12px;
  background: #fef5ec; border-bottom: 0.5px solid #f0d9c0;
}
.gni-num  { flex: 1; font-weight: 600; font-size: 13px; color: #b7601c; }
.gni-del  { border: none; background: none; color: #c0392b; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }

/* Placement icon grid */
.gnp-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 1px; background: var(--color-border-tertiary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.gnp-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px; border: none; background: var(--color-background-primary);
  cursor: pointer; transition: background .1s;
}
.gnp-btn:hover { background: #fef5ec; }
.gnp-btn.sel   { background: #fef5ec; }

/* Fields */
.gni-fields {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--color-border-tertiary);
}
.gni-field { background: var(--color-background-primary); padding: 8px 10px; }
.gni-field label {
  display: block; font-size: 10px; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.gni-iw { position: relative; }
.gni-iw input {
  width: 100%; padding: 7px 28px 7px 8px;
  border: 0.5px solid var(--color-border-primary); border-radius: 6px;
  font-size: 13px; background: var(--color-background-primary); color: var(--color-text-primary);
}
.gni-iw input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0 2px rgba(230,126,34,.12); }
.gni-unit {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--color-text-tertiary); pointer-events: none;
}

.glass-notch-add {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px; cursor: pointer; color: #e67e22; font-size: 13px; font-weight: 500;
  background: #fef5ec; border: none; width: 100%;
  border-top: 0.5px solid #f0d9c0;
}
.glass-notch-add:hover { background: #fde8cf; }

/* ── Zoom-knapp på preview ───────────────────────── */
.glass-preview-col {
  position: relative;
}
.glass-zoom-btn {
  position: absolute; bottom: 8px; right: 8px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: rgba(26,58,92,.75); color: #fff;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .12s;
  z-index: 10;
}
.glass-zoom-btn:hover { background: rgba(26,58,92,1); }

/* ── Zoom modal ──────────────────────────────────── */
.glass-zoom-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(3px);
}
.gzm-inner {
  background: #fff; border-radius: 12px; overflow: hidden;
  width: min(92vw, 720px); max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
}
.gzm-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 0.5px solid #e0e7ef;
  flex-shrink: 0;
}
.gzm-title { flex: 1; font-size: 14px; font-weight: 600; color: #1a3a5c; }
.gzm-controls { display: flex; align-items: center; gap: 6px; }
.gzm-ctrl {
  width: 32px; height: 32px;
  border: 0.5px solid #e0e7ef; border-radius: 6px;
  background: #f7f9fb; cursor: pointer;
  font-size: 16px; font-weight: 600; color: #1a3a5c;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.gzm-ctrl:hover { background: #e4eef7; }
.gzm-level { font-size: 12px; font-weight: 500; color: #1a3a5c; min-width: 38px; text-align: center; }
.gzm-close {
  width: 32px; height: 32px; border: none; background: none;
  cursor: pointer; font-size: 22px; color: #888; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.gzm-close:hover { color: #333; }
.gzm-body {
  flex: 1; overflow: hidden; position: relative;
  min-height: 300px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
}
.gzm-svg-wrap {
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center;
  transition: transform .12s;
  will-change: transform;
}
.gzm-footer {
  padding: 9px 16px; border-top: 0.5px solid #e0e7ef;
  font-size: 11px; color: #aaa; text-align: center;
  flex-shrink: 0;
}

/* ── Produksjonstid ──────────────────────────────── */
.glass-prod-time {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-text-secondary);
  margin-top: 5px;
}
.gpt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #27ae60; flex: 0 0 8px;
  transition: background .25s;
}
.gpt-dot-orange { background: #e67e22; }
.glass-prod-time strong { color: var(--color-text-primary); }
.gpt-note { color: #e67e22; font-size: 12px; }