/* Gold Calculator Plugin v2.2 — Divi Compatible
   - ใช้ #gc-root เป็น scoping wrapper ทุก selector
   - !important เฉพาะ property ที่ Divi มักจะ override
   - ป้องกัน Divi reset ทับ input, label, font-size
*/

/* ── Reset เฉพาะภายใน plugin ── */
#gc-root,
#gc-root * {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Sarabun, sans-serif !important;
}

/* ── ราคาทองวันนี้ ── */
#gc-root .gc-today {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 1rem;
}
#gc-root .gc-today-col { display: flex !important; flex-direction: column; gap: 8px; }
#gc-root .gc-today-label {
  font-size: 14px !important;
  color: #aaa !important;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  /* Divi มักทำให้ label เป็น uppercase */
  text-transform: none !important;
  letter-spacing: normal !important;
}
#gc-root .gc-today-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#gc-root .gc-today-box {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  text-align: center !important;
  /* Divi Section อาจมี box-shadow ทับ */
  box-shadow: none !important;
}
#gc-root .gc-today-sub {
  font-size: 12px !important;
  color: #aaa !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
#gc-root .gc-today-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #e8c96a !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
#gc-root .gc-today-footer {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px !important;
  color: #888 !important;
  padding-top: 4px;
  margin: 0 !important;
}
@media(max-width:480px){
  #gc-root .gc-today { grid-template-columns: 1fr !important; }
}

/* ── เครื่องคำนวณ ── */
#gc-root .gc-calc {
  background: #1a0a0a !important;
  border: 1px solid #3a2a2a !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  box-shadow: none !important;
}
#gc-root .gc-calc-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem !important;
  gap: 12px;
  flex-wrap: wrap;
}
#gc-root .gc-calc-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #e8c96a !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  /* Divi h2/h3 มีค่า default ที่อาจทับ */
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#gc-root .gc-calc-sub {
  font-size: 13px !important;
  color: #888 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#gc-root .gc-btn-table {
  background: #2a1a1a !important;
  border: 1px solid #e8c96a !important;
  color: #e8c96a !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block !important;
  line-height: 1.4 !important;
}
#gc-root .gc-btn-table:hover {
  background: #3a2a00 !important;
  color: #e8c96a !important;
}

#gc-root .gc-calc-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.25rem !important;
}
@media(max-width:500px){
  #gc-root .gc-calc-fields { grid-template-columns: 1fr !important; }
}

/* ── Fields & Inputs — Divi override ทับ input บ่อยมาก ── */
#gc-root .gc-field {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
#gc-root .gc-field label {
  font-size: 13px !important;
  color: #aaa !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: block !important;
}
/* Divi มักทับ input ด้วย et_pb_contact_field หรือ global input style */
#gc-root .gc-field input[type="number"],
#gc-root .gc-table-wrap .gc-field input[type="number"] {
  background: #0d0d0d !important;
  border: 1px solid #3a2a2a !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none;
  appearance: none;
  /* แก้ Divi block คลิก input */
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  cursor: text !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
#gc-root .gc-field input[type="number"]:focus,
#gc-root .gc-table-wrap .gc-field input[type="number"]:focus {
  border-color: #e8c96a !important;
  box-shadow: 0 0 0 2px rgba(232,201,106,0.15) !important;
  outline: none !important;
}
/* ซ่อน spinner บน number input */
#gc-root input[type="number"]::-webkit-inner-spin-button,
#gc-root input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
#gc-root input[type="number"] { -moz-appearance: textfield; }

#gc-root .gc-bonus-wrap { display: flex !important; flex-direction: column; gap: 6px; }
#gc-root .gc-toggle { display: flex !important; gap: 12px; align-items: center; }
#gc-root .gc-tog-opt {
  font-size: 13px !important;
  color: #aaa !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
/* แก้ Divi block radio button */
#gc-root .gc-toggle,
#gc-root .gc-tog-opt {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}
#gc-root .gc-tog-opt input[type="radio"] {
  width: auto !important;
  height: auto !important;
  accent-color: #e8c96a;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#gc-root .gc-calc-result {
  background: #1f0d00 !important;
  border: 1px solid rgba(232,201,106,0.27) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: none !important;
}
#gc-root .gc-calc-result-label {
  font-size: 13px !important;
  color: #aaa !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
#gc-root .gc-calc-result-val {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #e8c96a !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}
#gc-root .gc-calc-result-sub {
  font-size: 12px !important;
  color: #777 !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}

/* ── ตารางราคาทอง ── */
#gc-root .gc-table-wrap {
  background: #0d0505 !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  box-shadow: none !important;
}
#gc-root .gc-table-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #e8c96a !important;
  text-align: center !important;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}
#gc-root .gc-table-inputs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 auto 1.5rem !important;
  max-width: 600px;
}
@media(max-width:500px){
  #gc-root .gc-table-inputs { grid-template-columns: 1fr !important; }
}
#gc-root .gc-table-wrap .gc-field label { color: #aaa !important; }
#gc-root .gc-table-wrap .gc-tog-opt { color: #aaa !important; }

#gc-root .gc-grid {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 1rem !important;
}
@media(max-width:700px){ #gc-root .gc-grid { grid-template-columns: repeat(5, 1fr) !important; } }
@media(max-width:400px){ #gc-root .gc-grid { grid-template-columns: repeat(3, 1fr) !important; } }

#gc-root .gc-cell {
  background: #2a0a0a !important;
  border: 1px solid #3a1a1a !important;
  border-radius: 8px !important;
  padding: 8px 4px !important;
  text-align: center !important;
  transition: background 0.15s;
  box-shadow: none !important;
}
#gc-root .gc-cell:hover {
  background: #3a1500 !important;
  border-color: rgba(232,201,106,0.4) !important;
}
#gc-root .gc-cell-pct {
  font-size: 12px !important;
  color: #e8c96a !important;
  font-weight: 600 !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
}
#gc-root .gc-cell-val {
  font-size: 13px !important;
  color: #fff !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gc-root .gc-table-footer {
  text-align: center;
  font-size: 12px !important;
  color: #777 !important;
  margin: 0.5rem 0 0 !important;
  padding: 0 !important;
}
#gc-root .gc-table-footer span {
  color: #e8c96a !important;
  font-weight: 600 !important;
}

/* ── กราฟ ── */
#gc-root .gc-chart-wrap {
  border-radius: 12px !important;
  overflow: hidden;
  margin-bottom: 1rem !important;
}