/* ===== Auto Theme - Uses PHP Variables Only =====
   สำคัญ: ไฟล์นี้ไม่ล็อกสีฟ้า/ส้มแล้ว
   ถ้า index.php ไม่ส่ง CSS variables มา จะ fallback เป็นสีดำ/เทา ไม่ใช่ฟ้า
*/

:root {
  --theme-primary: #111111;
  --theme-secondary: #111111;
  --theme-contrast: #444444;
  --theme-topbar: #111111;
  --theme-light: #ffffff;
  --theme-title: var(--theme-secondary);
  --theme-subtitle: var(--theme-primary);
  --theme-button-bg: var(--theme-primary);
  --theme-button-text: #ffffff;
}

/* ===== Editor UI ไม่โดน theme ===== */
#pxth-toolbar,
#pxth-toolbar *,
#pxth-settings-panel,
#pxth-settings-panel *,
#pxth-mob-gear,
.pxth-delsec,
.pxth-delsec *,
.pxth-map-modal,
.pxth-map-modal * {
  color: revert !important;
}

#pxth-theme-from-banner {
  background: #111 !important;
  color: #fff !important;
  border: 0 !important;
}

.pxth-delsec button,
button[data-del-section] {
  background: #b00000 !important;
  color: #fff !important;
  border-color: #b00000 !important;
}

/* ===== Title หลัก ===== */
section[data-section] > .wrap h1,
section[data-section] > .wrap h2,
section[data-section] > .wrap .title,
section[data-section] > .wrap .section-title,
section[data-section] > .wrap .sec-title,
section[data-section] > .wrap .block-title,
section[data-section] > .wrap .main-title,
section[data-section] > .wrap .heading,
section[data-section] > .wrap [data-key*="title"],
section[data-section] > .wrap [data-key*="heading"],
section[data-section] > .wrap [data-key*="headline"] {
  color: var(--theme-title) !important;
}

section[data-section] > .wrap [contenteditable="true"][data-edit="html"]:first-child,
section[data-section] > .wrap > [data-edit="html"]:first-child {
  color: var(--theme-title) !important;
}

/* ===== Title รอง ===== */
section[data-section] > .wrap h3,
section[data-section] > .wrap h4,
section[data-section] > .wrap .subtitle,
section[data-section] > .wrap .sub-title,
section[data-section] > .wrap .item-title,
section[data-section] > .wrap .card-title,
section[data-section] > .wrap .service-title,
section[data-section] > .wrap .product-title,
section[data-section] > .wrap .info-title,
section[data-section] > .wrap [data-key*="subtitle"],
section[data-section] > .wrap [data-key*="sub"],
section[data-section] > .wrap [data-key*="name"] {
  color: var(--theme-subtitle) !important;
}

/* ===== ข้อความปกติ ===== */
section[data-section] > .wrap p,
section[data-section] > .wrap li,
section[data-section] > .wrap .desc,
section[data-section] > .wrap .description,
section[data-section] > .wrap .content,
section[data-section] > .wrap .text,
section[data-section] > .wrap [data-key*="desc"],
section[data-section] > .wrap [data-key*="detail"],
section[data-section] > .wrap [data-key*="content"] {
  color: inherit !important;
}

/* ===== ปุ่ม ===== */
section[data-section] > .wrap .btn,
section[data-section] > .wrap .button,
section[data-section] > .wrap .cta,
section[data-section] > .wrap a.btn,
section[data-section] > .wrap a.button,
section[data-section] > .wrap a.cta,
section[data-section] > .wrap a[class*="btn"],
section[data-section] > .wrap a[class*="button"],
section[data-section] > .wrap input[type="submit"],
section[data-section] > .wrap a[style*="background"],
section[data-section] > .wrap a[style*="border-radius"],
section[data-section] > .wrap a[data-edit-link],
section[data-section] > .wrap [data-edit-link],
section[data-section] > .wrap .readmore,
section[data-section] > .wrap .more,
section[data-section] > .wrap .link-btn,
section[data-section] > .wrap .contact-btn,
section[data-section] > .wrap .primary-btn {
  background-color: var(--theme-button-bg) !important;
  background-image: none !important;
  color: var(--theme-button-text) !important;
  border-color: var(--theme-button-bg) !important;
}

section[data-section] > .wrap button:not(.pxth-map-modal-close):not(.pxth-map-modal-save) {
  background-color: var(--theme-button-bg) !important;
  background-image: none !important;
  color: var(--theme-button-text) !important;
  border-color: var(--theme-button-bg) !important;
}

/* ===== Accent ===== */
section[data-section] > .wrap h2::after,
section[data-section] > .wrap .section-title::after,
section[data-section] > .wrap .sec-title::after,
section[data-section] > .wrap .title::after {
  background: var(--theme-button-bg) !important;
  border-color: var(--theme-button-bg) !important;
}