/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*
 Theme Name:   Flatsome Child
 Theme URI:    https://uxthemes.com/
 Description:  This is a child theme for Flatsome
 Author:       UX Themes
 Author URI:   https://uxthemes.com/
 Template:     flatsome
 Version:      3.0
*/

/****************************************************************
 * 1. DESIGN TOKENS / VARIABLES
 ****************************************************************/
:root {
  --tnt-ink: #2E2E2C;
  --tnt-ink-hover: #000000;
  --tnt-muted: #6B6A63;
  --tnt-line: #E4E3DE;
  --tnt-olive: #879D5D;
  --tnt-olive-20: #E7EBDF;
  --tnt-olive-30: #DBE2CE;
  --tnt-skew: -14deg;
}

/****************************************************************
 * 2. TYPOGRAPHY (BILINGUAL FALLBACK)
 * ตั้งให้อักษรละตินใช้ Archivo และภาษาไทยใช้ Anuphan
 ****************************************************************/
body,
.nav > li > a,
.button,
button,
input,
select,
textarea {
  font-family: 'Archivo', 'Anuphan', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', 'Anuphan', sans-serif !important;
}

/****************************************************************
 * 3. FLATSOME GLOBAL BUTTON OVERRIDES (STYLE A - SHARP)
 * ปรับปุ่มมาตรฐานทั้งเว็บ (UX Builder & WooCommerce) ให้คม 2px
 ****************************************************************/
.button,
button.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 2px !important;
  font-family: 'Archivo', 'Anuphan', sans-serif !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  min-height: 48px;
  line-height: 48px;
  padding: 0 24px;
  transition: all 0.2s ease;
}

/* ปุ่ม Primary มาตรฐาน */
.button.primary {
  background-color: var(--tnt-ink) !important;
  border-color: var(--tnt-ink) !important;
  color: #ffffff !important;
}

.button.primary:hover {
  background-color: var(--tnt-ink-hover) !important;
  border-color: var(--tnt-ink-hover) !important;
}

/* ปุ่ม Secondary / Outline มาตรฐาน */
.button.secondary,
.button.is-outline {
  border: 1.5px solid var(--tnt-ink) !important;
  color: var(--tnt-ink) !important;
  background-color: transparent !important;
}

.button.secondary:hover,
.button.is-outline:hover {
  background-color: var(--tnt-ink) !important;
  color: #ffffff !important;
}

/****************************************************************
 * 4. SIGNATURE SLANTED BUTTON (STYLE B)
 * ใช้ใส่ในช่อง Class ของปุ่มใน UX Builder: btn-signature
 ****************************************************************/
.button.btn-signature {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px !important;
  line-height: 52px !important;
  padding: 0 32px !important;
  background: none !important;
  border: 0 !important;
  color: #ffffff !important;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 1px;
  isolation: isolate;
  border-radius: 0 !important;
}

.button.btn-signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tnt-ink);
  transform: skewX(var(--tnt-skew));
  z-index: -1;
  transition: background 0.2s ease;
}

.button.btn-signature:hover::before {
  background: var(--tnt-ink-hover);
}

.button.btn-signature::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--tnt-olive);
  transform: skewX(var(--tnt-skew));
  transition: right 0.25s ease;
}

.button.btn-signature:hover::after {
  right: -16px;
}

/* ปุ่ม Signature แบบพื้นสว่างสำหรับวางบนแถบสีเข้ม */
.button.btn-signature.is-light {
  color: var(--tnt-ink) !important;
}

.button.btn-signature.is-light::before {
  background: #ffffff;
}

.button.btn-signature.is-light:hover::before {
  background: var(--tnt-olive-30);
}

/****************************************************************
 * 5. EXTERNAL ACTION BUTTONS (LINE & SHOPEE)
 * Class: btn-line หรือ btn-shopee
 ****************************************************************/
.button.btn-line {
  background-color: #06C755 !important;
  border-color: #06C755 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px;
  text-transform: none;
}

.button.btn-line:hover {
  background-color: #05a948 !important;
  border-color: #05a948 !important;
}

.button.btn-shopee {
  background-color: var(--tnt-olive-20) !important;
  border-color: var(--tnt-olive-20) !important;
  color: var(--tnt-ink) !important;
}

.button.btn-shopee:hover {
  background-color: var(--tnt-olive-30) !important;
  border-color: var(--tnt-olive-30) !important;
}

/****************************************************************
 * 6. TEXT LINK WITH SLANTED UNDERLINE
 * Class: tnt-text-link
 ****************************************************************/
a.tnt-text-link {
  font-family: 'Archivo', 'Anuphan', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tnt-ink);
  position: relative;
  padding-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a.tnt-text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tnt-olive-30);
  transform: skewX(var(--tnt-skew));
  transform-origin: left;
  transition: background 0.2s ease;
}

a.tnt-text-link:hover::after {
  background: var(--tnt-ink);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}