/* สไตล์เฉพาะเว็บแม่ (ต่อยอดจาก pro.css) */

/* showcase */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.showcase-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease;
}
.showcase-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(11,90,165,.15); }
.swatch { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.swatch-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); }
.swatch-tag {
  position: absolute; top: .5rem; right: .5rem; background: #fff; color: var(--ink);
  font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .6rem;
}
.showcase-info { padding: .7rem .9rem; display: flex; flex-direction: column; }
.showcase-info span { color: var(--muted); font-size: .85rem; }

/* การ์ดเว็บลูกค้าจริง (หน้าแรก) — ต้องแยกจากการ์ดแบบให้เลือกให้เห็นชัดตั้งแต่แวบแรก */
.showcase-card-real { border: 2px solid #16a34a; }
.swatch-tag-real { background: #16a34a; color: #fff; }

/* การ์ดเว็บ "พร้อมส่งมอบ" (หน้าแรก) — สีส้มเดียวกับแถบ/หน้าขายเว็บ ต้องไม่ทำให้เข้าใจผิดว่ามีลูกค้าจริง */
.swatch-tag-forsale { background: #ffb020; color: #3b1d00; }

/* รายชื่อจังหวัดที่มีเว็บพร้อมส่งมอบ (หน้าขายเว็บแม่ — คู่กับการ์ดรับช่วงต่อ) */
.takeover-province-list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.takeover-province-list .chip-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1.1rem;
  color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.takeover-province-list .chip-link:hover { border-color: var(--primary); color: var(--primary); }

/* ปุ่ม CTA ข้อความยาว — pro.css บังคับ white-space:nowrap ทำให้ล้นขอบจอที่ ~360px
   คลาสนี้ (เฉพาะหน้าแม่) ยอมให้ตัดบรรทัดแทนล้นขอบ ไม่แก้ pro.css เพราะเทมเพลตลูกค้าใช้ร่วมกันอยู่ */
.btn-wrap { white-space: normal; text-align: center; line-height: 1.3; }

/* wizard */
.wizard-steps { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wstep {
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: .5rem 1.1rem; font-family: inherit; font-size: .95rem; cursor: pointer; color: var(--muted);
}
.wstep.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.wstep.done { color: var(--primary); border-color: var(--primary); }

.cfg-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
.cfg-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.cfg-block h3 { font-size: 1.05rem; margin-bottom: .7rem; }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.small-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: .6rem; }
.opt {
  display: flex; align-items: flex-start; gap: .5rem; border: 1px solid var(--border);
  border-radius: 10px; padding: .55rem .8rem; cursor: pointer; font-size: .93rem; background: #fff;
}
.opt:hover { border-color: var(--primary); }
.opt input { margin-top: .25rem; accent-color: var(--primary); flex: 0 0 auto; }
.opt.locked { background: var(--bg-alt); cursor: default; }
.opt.wide { margin-bottom: .5rem; }
.opt em { color: var(--muted); font-style: normal; font-size: .85rem; }
.opt strong { color: var(--primary); }

.slider-row { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.slider-row input[type=range] { flex: 1; accent-color: var(--primary); }
.slider-row output { min-width: 2ch; text-align: center; color: var(--primary); font-size: 1.2rem; }

.theme-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.theme-chip {
  display: flex; align-items: center; gap: .5rem; border: 2px solid var(--border);
  border-radius: 999px; padding: .35rem .9rem .35rem .4rem; cursor: pointer; font-size: .9rem; background: #fff;
}
.theme-chip:has(input:checked) { border-color: var(--primary); background: var(--bg-alt); font-weight: 600; }
.theme-chip input { position: absolute; opacity: 0; }
.chip-color { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; }
.chip-btn {
  background: var(--primary); color: #fff; font-size: .78rem; padding: .25rem .7rem; font-weight: 600;
}
.chip-layout { width: 34px; height: 24px; flex: 0 0 34px; border-radius: 5px; border: 1px solid var(--border); }
.chip-layout-pro { background: linear-gradient(180deg, #0b5aa5 35%, #fff 35%); }
.chip-layout-craft { background: linear-gradient(180deg, #1c2733 35%, #ffedd5 35%); border-bottom: 3px solid #ff8a00; }
.chip-layout-lux { background: linear-gradient(180deg, #0d1420 60%, #d4a017 60%); }

/* คอลัมน์ขวาของ step 1: พรีวิวสด + กล่องราคา เรียงต่อกัน (แทนที่ <aside class="price-box"> เดี่ยวเดิม) */
.price-col { display: flex; flex-direction: column; gap: 1rem; }

/* price box — รายการยาวขึ้นจากการแยกทุกบรรทัดแล้ว ใช้ตัวอักษรกระชับ ไม่ตั้ง max-height/overflow
   เพื่อไม่ให้เนื้อหาถูกครอปจนปุ่ม "ถัดไป" กดไม่ได้ (กล่องแค่สูงขึ้นตามเนื้อหา ไม่ล้น) */
.price-box {
  position: sticky; top: 80px; background: #fff; border: 2px solid var(--primary);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.price-box h3 { margin-bottom: .6rem; }
.price-line { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .95rem; }
/* กันบั๊กเดียวกับ .preview-status[hidden] ด้านล่าง — .price-line ก็ตั้ง display:flex เอง
   ต้องมีกฎ [hidden] ทับให้ซ่อนได้จริงตอน JS toggle .hidden (เช่น #pMonthlyRow, #pRenewRow) */
.price-line[hidden] { display: none; }
.price-group-label {
  font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .02em; margin: .8rem 0 .2rem;
}
.price-group-label:first-of-type { margin-top: 0; }
.price-item { padding: .22rem 0; font-size: .86rem; border-bottom: 1px dashed var(--border); }
.price-item span:first-child { color: var(--ink); padding-right: .5rem; }
.price-item strong { white-space: nowrap; color: var(--ink); font-weight: 600; }
.price-free { color: #16a34a; font-weight: 700; }
.price-line-sum { font-weight: 700; font-size: .92rem; padding-top: .35rem; }
.price-total {
  display: flex; justify-content: space-between; border-top: 2px dashed var(--border);
  margin-top: .5rem; padding-top: .7rem; font-size: 1.05rem; font-weight: 700;
}
.price-total strong { color: var(--primary); font-size: 1.35rem; }
.free-list { list-style: none; margin: .9rem 0; font-size: .85rem; color: var(--muted); }
.free-list li { padding: .12rem 0; }
.wide-btn { width: 100%; margin-top: .5rem; }

/* บั๊กเดิมที่เจอระหว่างทำงานนี้ (ไม่เกี่ยวกับพรีวิว): pro.css ตั้ง .btn{display:inline-flex}
   ทับ [hidden] ของเบราว์เซอร์ (author style ชนะ UA style เสมอ) ทำให้ #lineBtn/#copyOrder
   โผล่ก่อนส่งออร์เดอร์จริง ทั้งที่มี attribute hidden อยู่ — ต้องประกาศ [hidden] ทับเป็นการเฉพาะ */
.btn[hidden] { display: none; }

/* ปุ่ม/ข้อความบอกทางไปพรีวิว — บนเดสก์ท็อปพรีวิวอยู่ในจออยู่แล้วจึงโชว์แค่คำใบ้ ไม่โชว์ปุ่ม
   บนมือถือ (คอลัมน์ขวาเรียงไปอยู่ล่างสุด) โชว์ปุ่มเปิดเต็มจอแทน ซ่อนคำใบ้ */
.preview-open-btn { display: none; }
.preview-desktop-hint { display: block; margin-top: .5rem; }

/* พรีวิวสด — กรอบนอกเหมือน .cfg-block เดสก์ท็อป, มือถือ CSS พลิกเป็นการ์ดเต็มจอ (ดู media query ด้านล่าง) */
.preview-panel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.preview-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; background: var(--bg-alt); border-bottom: 1px solid var(--border);
}
.preview-panel-title { font-weight: 700; font-size: .92rem; }
.preview-close {
  display: none; border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: .4rem .7rem; font-size: .85rem; font-weight: 600; cursor: pointer; min-height: 44px;
}
.preview-frame-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--bg-alt); }
.preview-badge {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: rgba(11,90,165,.94); color: #fff; text-align: center;
  font-size: .72rem; line-height: 1.3; padding: .4rem .6rem;
}
.preview-status {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.4rem 1rem; color: var(--muted); font-size: .85rem; background: var(--bg-alt);
}
/* [hidden] มี specificity เท่ากับ .preview-status เฉยๆ — ไม่ประกาศ display:none ทับตรงนี้
   จะโดน display:flex ด้านบนชนะ (ทั้งคู่มาจาก author stylesheet) แล้วซ่อนไม่ได้จริง */
.preview-status[hidden] { display: none; }
.preview-status-error { color: #b45309; }
.preview-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.preview-fallback { text-align: center; font-size: .78rem; padding: .55rem; border-top: 1px solid var(--border); color: var(--muted); }

/* form */
.shop-form h3 { margin: 1rem 0 .7rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem 1rem; }
.form-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 600; }
.form-grid input {
  border: 1px solid var(--border); border-radius: 8px; padding: .55rem .8rem;
  font-family: inherit; font-size: .95rem;
}
.form-grid input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.field-hint { font-weight: 400; font-size: .78rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; }

.wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--ink); }

/* summary */
.summary-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: start; }
.summary-box, .summary-side { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.order-summary {
  white-space: pre-wrap; font-family: inherit; font-size: .93rem; line-height: 1.7;
  background: var(--bg-alt); border-radius: 10px; padding: 1rem; overflow-x: auto;
}
.ok-box {
  background: #ecfdf5; border: 1px solid #34d399; color: #065f46;
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: .8rem; font-size: .95rem;
}

@media (max-width: 900px) {
  .cfg-grid, .summary-grid { grid-template-columns: 1fr; }
  .price-box { position: static; }

  /* จอแคบวางพรีวิวคู่กล่องราคาไม่ได้ — สลับเป็นปุ่มเปิดการ์ดเต็มจอแทน */
  .preview-open-btn { display: flex; min-height: 44px; }
  .preview-desktop-hint { display: none; }

  /* พรีวิว: การ์ดเต็มจอที่เลื่อนขึ้นมาจากล่าง ปิดได้ด้วยปุ่ม ✕ หรือปุ่ม back ของเครื่อง (จัดการใน configurator.js) */
  .preview-panel {
    position: fixed; inset: 0; z-index: 300; margin: 0; border-radius: 0; border: 0;
    display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform .25s ease;
  }
  .preview-panel.open { transform: translateY(0); }
  .preview-close { display: inline-flex; align-items: center; justify-content: center; }
  .preview-frame-wrap { flex: 1; aspect-ratio: auto; }
  body.preview-open { overflow: hidden; }
}