/* ==========================================================================
   configurator.css — เลือกสเปกกระดาษต่อเนื่อง + ภาพจำลองแบบเรียลไทม์
   ========================================================================== */

/* ---------- ปุ่มประเภทงาน: กระดาษต่อเนื่องเป็นปุ่มใหญ่ ---------- */
.type-pick__opt--main { grid-column: 1 / -1; }
.type-pick__opt--main label {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  font-size: 16px;
}
.type-pick__opt--main label svg { width: 34px; height: 34px; flex: none; }
.type-pick__opt--main label b { display: block; font-size: 17px; }
.type-pick__opt--main label small { display: block; font-size: 13px; font-weight: 400; color: var(--c-muted); }
.type-pick__opt--main label em {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.type-pick__sep {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 12.5px;
  color: var(--c-muted);
}
/* งานพิมพ์อื่นๆ = ปุ่มรอง ขนาดเล็กลง */
.type-pick__opt:not(.type-pick__opt--main) label { padding: 10px 6px 9px; font-size: 12.5px; }
.type-pick__opt:not(.type-pick__opt--main) label svg { width: 20px; height: 20px; }

/* ---------- เลย์เอาต์สเปก: ภาพจำลองด้านซ้าย / ช่องกรอกด้านขวา ---------- */
.quote-form.is-continuous .q-spec {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/* ---------- การ์ดภาพจำลอง ---------- */
.cfg {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background:
    radial-gradient(#d9e5f3 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--c-tint-2);
}
.cfg__stage { position: relative; height: 230px; margin-bottom: 10px; }

.cfg-sheet {
  --c: #fff;
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 3px;
  border: 1px solid rgba(20, 38, 74, .12);
  background:
    radial-gradient(circle, rgba(20, 38, 74, .2) 2px, transparent 2.6px) 0 4px / 11px 10px repeat-y,
    radial-gradient(circle, rgba(20, 38, 74, .2) 2px, transparent 2.6px) 100% 4px / 11px 10px repeat-y,
    var(--c);
  box-shadow: 0 6px 14px rgba(17, 52, 110, .14);
  transition: transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease), background-color .3s;
}
.cfg-sheet.is-custom { border-style: dashed; border-color: var(--c-primary); }

/* เนื้อหาฟอร์มบนแผ่นหน้า */
.cfg-doc { position: absolute; inset: 8px 15px; }
.cfg-doc i { position: absolute; display: block; font-style: normal; }
.cfg-doc__title { top: 0; right: 0; width: 46%; height: 9px; border-radius: 2px; background: var(--c-navy-2); }
.cfg-doc__logo { top: 0; left: 0; width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--c-primary), var(--c-sky)); }
.cfg-doc__no { top: 13px; right: 0; font-size: 8px; font-weight: 700; line-height: 1; color: #d93b3b; letter-spacing: .04em; }
.cfg-doc__table {
  top: 26px; left: 0; right: 0; bottom: 6px;
  border: 1px solid rgba(18, 58, 120, .55);
  border-radius: 2px;
  background:
    linear-gradient(rgba(18, 58, 120, .75), rgba(18, 58, 120, .75)) 0 0 / 100% 6px no-repeat,
    linear-gradient(90deg, transparent 58%, rgba(18, 58, 120, .3) 58% calc(58% + 1px), transparent 0, transparent 78%, rgba(18, 58, 120, .3) 78% calc(78% + 1px), transparent 0),
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(18, 58, 120, .14) 7px 8px);
}
.cfg-doc__tear { left: -15px; right: -15px; bottom: 34%; border-top: 1.5px dashed rgba(217, 59, 59, .7); }
.cfg-doc__holes {
  top: 40%; left: -9px;
  width: 6px; height: 30px;
  background: radial-gradient(circle, rgba(20, 38, 74, .45) 2.4px, transparent 3px) 0 0 / 6px 24px repeat-y;
}

.cfg__summary { margin: 0 0 12px; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.cfg__summary b { display: block; margin-bottom: 6px; font-size: 14px; color: var(--c-navy); }
.cfg__legend { display: grid; gap: 3px; }
.cfg__legend span { display: flex; align-items: center; gap: 7px; }
.cfg__legend i { width: 14px; height: 14px; flex: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .14); }
.cfg__hint { display: block; margin-top: 6px; color: var(--c-primary); font-weight: 700; }
.cfg__extras { display: block; margin-top: 6px; color: var(--c-navy-2); font-weight: 700; }
.cfg__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--c-muted); text-align: center; }

@media (max-width: 1200px) {
  .quote-form.is-continuous .q-spec { grid-template-columns: 220px 1fr; }
}
@media (max-width: 767px) {
  .quote-form.is-continuous .q-spec { grid-template-columns: 1fr; }
  .cfg { position: static; }
  .cfg__stage { height: 200px; }
  .type-pick__opt--main label { flex-wrap: wrap; }
  .type-pick__opt--main label em { margin-left: 48px; }
}