/* ui/components.css — ชิ้นส่วนที่ใช้ซ้ำ ชื่อเดียวกันทั้ง 2 เว็บ (หน้าตาต่างกันตาม token ของแต่ละเว็บ)
* ตัวอย่างทุกชิ้น: ui/styleguide.html · พฤติกรรม (แท็บ dialog drawer ปิด alert ปุ่มจำนวน) อยู่ใน ui/ui.js
* ระยะใช้ --sp-* · น้ำหนัก --fw-* · สีใช้ token เท่านั้น */
/* ======================================================================
ปุ่ม: .btn + สี (primary / cta / ghost / light / line) + ขนาด (sm / lg / block) · .icon-btn
====================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 0; cursor: pointer;
font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-base); padding: var(--sp-3) var(--sp-5);
border-radius: var(--ui-radius-control); transition: background var(--dur), transform var(--dur), box-shadow var(--dur); white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--ui-primary); color: var(--ui-on-primary); font-weight: var(--fw-semibold); }
.btn-primary:hover { background: var(--ui-primary-hover); }
.btn-cta, .btn-accent { background: var(--ui-cta); color: var(--ui-on-primary); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.btn-cta:hover, .btn-accent:hover { background: var(--ui-cta-hover); }
.btn-ghost { background: var(--c-surface); color: var(--ui-primary); border: 1.5px solid var(--ui-primary); }
.btn-ghost:hover { background: var(--ui-primary-soft); }
.btn-light { background: var(--ui-primary-soft); color: var(--ui-primary); }
.btn-line { background: var(--c-line-green, var(--ui-ok)); color: var(--ui-on-primary); } /* ปุ่ม LINE */
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); }
.btn-block { width: 100%; }
.icon-btn { background: none; border: 0; cursor: pointer; color: var(--c-muted); padding: var(--sp-1); display: inline-grid; place-items: center; border-radius: var(--r-sm); }
.icon-btn:hover { background: var(--c-bg); color: var(--c-ink); }
.link { color: var(--ui-primary); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: var(--sp-1); }
.link:hover { text-decoration: underline; }
/* ======================================================================
ป้าย · chip · ดาว · avatar · เส้นคั่น
====================================================================== */
.badge {
display: inline-flex; align-items: center; gap: var(--sp-1); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-head);
padding: 5px 9px; border-radius: var(--ui-radius-control); background: var(--ui-primary-soft); color: var(--ui-primary);
}
.badge-sale { background: var(--ui-danger); color: var(--ui-on-primary); }
.badge-hot { background: var(--ui-hot); color: var(--c-ink); }
.badge-new { background: var(--ui-info); color: var(--ui-on-primary); }
.badge-info { background: color-mix(in srgb, var(--ui-info) 12%, var(--c-surface)); color: var(--ui-info); }
.badge-ok { background: color-mix(in srgb, var(--ui-ok) 12%, var(--c-surface)); color: var(--ui-ok); }
.badge-warn { background: color-mix(in srgb, var(--ui-warn) 18%, var(--c-surface)); color: var(--c-ink); }
.badge-muted { background: var(--c-bg); color: var(--c-muted); }
.badge-tag { background: var(--c-ink); color: var(--c-surface); }
.chip {
display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-4); border-radius: var(--ui-radius-control);
border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--fs-sm); cursor: pointer;
}
.chip:hover, .chip.is-active { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
.rating { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); }
.stars { color: var(--ui-hot); letter-spacing: 1px; font-size: var(--fs-sm); }
/* ดาวตามคะแนน: ★★★★★ */
.stars-fill { position: relative; display: inline-block; color: var(--c-line); letter-spacing: 1px; }
.stars-fill::before { content: "★★★★★"; position: absolute; inset: 0; overflow: hidden; width: calc(var(--rating, 0) / 5 * 100%); color: var(--ui-hot); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--ui-primary); display: inline-grid; place-items: center; font: var(--fw-semibold) var(--fs-base) var(--font-head); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.divider { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }
/* ======================================================================
กล่อง · การ์ด · แจ้งเตือน · ว่างเปล่า
====================================================================== */
.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--ui-radius-box); padding: var(--sp-5); }
:where(.panel + .panel) { margin-top: var(--sp-4); } /* :where = ค่าเริ่มต้นเบาๆ ให้ grid / stack ทับได้ */
.panel h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 640px) { .panel { padding: var(--sp-4); } }
/* การ์ดทั่วไป (บทความ / ข่าว / แบรนด์) · การ์ดสินค้าเป็นของแต่ละเว็บ */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--ui-radius-box); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur); }
.card:hover { box-shadow: var(--shadow); }
.card-media { aspect-ratio: 16 / 9; background: var(--c-bg); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card-title { font: var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-head); margin: 0; }
.card-meta { font-size: var(--fs-xs); color: var(--c-muted); }
.card-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); margin-top: auto; }
/* แจ้งเตือน: .alert + info / ok / warn / danger · ปิดได้ด้วย [data-dismiss] */
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; border-radius: var(--r); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); border: 1px solid; margin: 0 0 var(--sp-4); }
.alert > :last-child { margin-bottom: 0; }
.alert [data-dismiss] { margin-left: auto; }
.alert-info { background: color-mix(in srgb, var(--ui-info) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--ui-info) 30%, var(--c-surface)); }
.alert-info > [data-lucide] { color: var(--ui-info); }
.alert-ok { background: color-mix(in srgb, var(--ui-ok) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--ui-ok) 30%, var(--c-surface)); }
.alert-ok > [data-lucide] { color: var(--ui-ok); }
.alert-warn { background: color-mix(in srgb, var(--ui-warn) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--ui-warn) 40%, var(--c-surface)); }
.alert-warn > [data-lucide] { color: var(--ui-warn); }
.alert-danger { background: color-mix(in srgb, var(--ui-danger) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--c-surface)); }
.alert-danger > [data-lucide] { color: var(--ui-danger); }
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--c-muted); }
.empty > [data-lucide] { width: 48px; height: 48px; color: var(--c-line); margin: 0 auto var(--sp-3); display: block; }
.empty h3 { color: var(--c-ink); }
/* ======================================================================
ฟอร์ม: .field + .input / .select / textarea · .check · .radio · .switch · .input-group · .help / .error · .qty
====================================================================== */
.field label { display: block; font: var(--fw-medium) var(--fs-sm) var(--font-head); margin-bottom: var(--sp-2); }
.field label .req { color: var(--ui-danger); }
.input, .select { width: 100%; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); padding: 11px 13px; background: var(--c-surface); outline: none; transition: border-color var(--dur), box-shadow var(--dur); }
.input:focus, .select:focus { border-color: var(--ui-primary); box-shadow: var(--focus-ring); }
.input:disabled, .select:disabled { background: var(--c-bg); color: var(--c-muted); cursor: not-allowed; }
textarea.input { min-height: 90px; resize: vertical; }
.field.is-invalid .input, .field.is-invalid .select, .input[aria-invalid="true"] { border-color: var(--ui-danger); }
.help { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-1); }
.error { display: block; font-size: var(--fs-xs); color: var(--ui-danger); margin-top: var(--sp-1); }
.check, .radio { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; font-size: var(--fs-sm); cursor: pointer; }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--ui-primary); margin: 0; flex: none; }
.check .count, .radio .count { margin-left: auto; color: var(--c-muted); font-size: var(--fs-xs); }
/* สวิตช์เปิด/ปิด: */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-sm); }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: 22px; background: var(--c-line); position: relative; cursor: pointer; transition: background var(--dur); margin: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-sm); transition: transform var(--dur); }
.switch input:checked { background: var(--ui-primary); }
.switch input:checked::after { transform: translateX(18px); }
/* ช่องกรอกที่มีปุ่ม / ข้อความติด (ค้นหา · หน่วย) */
.input-group { display: flex; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden; }
.input-group:focus-within { border-color: var(--ui-primary); box-shadow: var(--focus-ring); }
.input-group .input { border: 0; box-shadow: none; border-radius: 0; flex: 1; min-width: 0; }
.input-group > span { display: grid; place-items: center; padding: 0 var(--sp-3); color: var(--c-muted); background: var(--c-bg); font-size: var(--fs-sm); }
.input-group > .btn { border-radius: 0; }
/* ปุ่มจำนวน − / + (ui.js เพิ่ม/ลด · ค่าต่ำสุดตาม min) */
.qty { display: inline-flex; border: 1.5px solid var(--c-line); border-radius: var(--ui-radius-control); overflow: hidden; background: var(--c-surface); }
.qty button { width: 42px; border: 0; background: none; cursor: pointer; font-size: var(--fs-lg); }
.qty input { width: 46px; text-align: center; border: 0; outline: none; background: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* ======================================================================
ตาราง: .spec-table (หัวแถวซ้าย) · .data-table (รายการ เช่น คำสั่งซื้อ · มือถือกลายเป็นการ์ดด้วย data-label)
====================================================================== */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.spec-table th { width: 34%; color: var(--c-muted); font-weight: var(--fw-medium); background: var(--c-bg); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--c-surface); }
.data-table th { text-align: left; font: var(--fw-semibold) var(--fs-xs) var(--font-head); color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; padding: var(--sp-3); border-bottom: 2px solid var(--c-line); }
.data-table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--c-bg); }
@media (max-width: 640px) {
.data-table thead { display: none; }
.data-table tr { display: block; border: 1px solid var(--c-line); border-radius: var(--r); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.data-table td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0; padding: var(--sp-1) 0; }
.data-table td[data-label]::before { content: attr(data-label); color: var(--c-muted); font-size: var(--fs-xs); }
}
/* ======================================================================
แท็บ · accordion · dropdown · dialog · drawer · tooltip
====================================================================== */
.tab-list { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--c-line); overflow-x: auto; }
.tab-btn { background: none; border: 0; padding: 14px 18px; font: var(--fw-medium) var(--fs-base) var(--font-head); color: var(--c-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tab-btn.is-active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); }
.tab-panel { display: none; background: var(--c-surface); border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 var(--ui-radius-box) var(--ui-radius-box); padding: var(--sp-6); }
.tab-panel.is-active { display: block; }
@media (max-width: 640px) { .tab-panel { padding: var(--sp-4); } }
/* accordion = (ไม่ใช้ JS) · .faq = ชื่อเดิมในม็อกอัป */
.accordion details, .faq details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: 0 var(--sp-5); }
.accordion details + details, .faq details + details { margin-top: var(--sp-3); }
.accordion summary, .faq summary { padding: var(--sp-4) 0; cursor: pointer; font: var(--fw-medium) var(--fs-base) var(--font-head); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.accordion summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.accordion summary::after, .faq summary::after { content: "+"; font-size: var(--fs-xl); line-height: 1; color: var(--ui-primary); }
.accordion details[open] summary::after, .faq details[open] summary::after { content: "–"; }
.accordion details > :not(summary), .faq details > :not(summary) { color: var(--c-ink-2); }
/* dropdown = …