/* 
Theme Name: Hello Elementor Child
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Crazy Web Studio.
Author: Crazy Web Studio
Author URI: https://www.crazywebstudio.co.th/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */

/* Import Prompt font - TH */
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap"); 

/* ============================================================
   Hide blue tap highlight / focus rectangle on popup close button
   ============================================================ */
.dialog-close-button,
.dialog-lightbox-close-button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.dialog-close-button:focus,
.dialog-lightbox-close-button:focus {
  outline: none;
}
.dialog-close-button::before,
.dialog-close-button::after,
.dialog-lightbox-close-button::before,
.dialog-lightbox-close-button::after {
  display: none;
}

/* ====================================================================
   WP Grid Builder – card media image sizing (grid 1, grid 2 & grid 4)
   ==================================================================== */
.wpgb-grid-1 .wpgb-card-media svg,
.wpgb-grid-2 .wpgb-card-media svg,
.wpgb-grid-4 .wpgb-card-media svg {
  display: none !important;
}
.wpgb-grid-1 .wpgb-card-media,
.wpgb-grid-1 .wpgb-card-media-thumbnail,
.wpgb-grid-2 .wpgb-card-media,
.wpgb-grid-2 .wpgb-card-media-thumbnail,
.wpgb-grid-4 .wpgb-card-media,
.wpgb-grid-4 .wpgb-card-media-thumbnail {
  height: 80px !important;
  max-height: 80px !important;
  overflow: hidden !important;
}
.wpgb-grid-1 .wpgb-card-media-thumbnail a,
.wpgb-grid-2 .wpgb-card-media-thumbnail a,
.wpgb-grid-4 .wpgb-card-media-thumbnail a {
  display: block;
  width: 100%;
  height: 80px !important;
}
.wpgb-grid-1 .wpgb-card-media-thumbnail a > div,
.wpgb-grid-2 .wpgb-card-media-thumbnail a > div,
.wpgb-grid-4 .wpgb-card-media-thumbnail a > div {
  width: 100% !important;
  height: 80px !important;
  padding-bottom: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
@media (max-width: 767px) {
  .wpgb-grid-1 .wpgb-card-media,
  .wpgb-grid-1 .wpgb-card-media-thumbnail,
  .wpgb-grid-2 .wpgb-card-media,
  .wpgb-grid-2 .wpgb-card-media-thumbnail,
  .wpgb-grid-4 .wpgb-card-media,
  .wpgb-grid-4 .wpgb-card-media-thumbnail {
    height: 60px !important;
    max-height: 60px !important;
  }
  .wpgb-grid-1 .wpgb-card-media-thumbnail a,
  .wpgb-grid-2 .wpgb-card-media-thumbnail a,
  .wpgb-grid-4 .wpgb-card-media-thumbnail a {
    height: 60px !important;
  }
  .wpgb-grid-1 .wpgb-card-media-thumbnail a > div,
  .wpgb-grid-2 .wpgb-card-media-thumbnail a > div,
  .wpgb-grid-4 .wpgb-card-media-thumbnail a > div {
    height: 60px !important;
  }
}

/* ============================================================
   GRAVITY FORMS — Global Restyling
   ============================================================ */

/* Hide Form Title */
.gform_title {
  display: none;
}

/* Form Links (e.g. Privacy Policy) */
.gform_wrapper a {
  color: #e0007f !important;
  text-decoration: underline !important;
}
.gform_wrapper a:hover {
  color: #e0007f !important;
}

/* Field Focus Border + Outline Color */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus,
.gform_wrapper .iti__selected-country:focus,
.gform_wrapper .iti__selected-country[aria-expanded="true"] {
  border-color: #7a7a7a !important;
  outline-color: #7a7a7a !important;
  outline: 2px solid #7a7a7a !important;
}

/* Radio Button Indicator Color */
.gform_wrapper input[type="radio"]::before {
  background-color: #e0007f !important;
}

/* Checkbox Indicator Color */
.gform_wrapper input[type="checkbox"]::before {
  color: #e0007f !important;
}

/* Background Image + Rounded Corners */
.gform_wrapper {
  background-image: url(https://www.thailandhealthandfitnessexpo.com/wp-content/uploads/2026/05/thailand-health-colorfull-bg-001.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px;
  padding: 20px 40px 40px 40px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

/* Field Labels — Baskervville */
.gform_wrapper .gfield_label {
  color: #2a2a2a;
  font-family: "Marcellus", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

/* Choice Labels (radio/checkbox options) — Montserrat */
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gform-field-label--type-inline {
  color: #2a2a2a;
  font-family: "Hanken Grotesk", sans-serif !important;
}

/* Required Asterisk */
.gform_wrapper .gfield_required {
  color: #e0007f !important;
}

/* Field Border Radius + Font + Inner Shadow */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select {
  background-color: #ffffffbb !important;
  border-radius: 25px !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  border: solid 1px #7a7a7a !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Submit Button */
.gform_wrapper .gform_button {
  font-family: "Marcellus", serif !important;
  display: block !important;
  margin: 30px auto 0 auto !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  border: solid 2px #e0007f !important;
  border-radius: 50px !important;
  padding: 15px 30px !important;
  letter-spacing: 1px !important;
  background-color: #e0007f !important;
  -webkit-font-smoothing: antialiased;
  transition:
    all 0.3s ease,
    border 0.3s ease,
    border-radius 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.4s ease !important;
}

.gform_wrapper .gform_button:hover {
  background-color: #ffffff !important;
  border-color: #e0007f !important;
  color: #e0007f !important;
}

/* Field Bottom Margin */
.gform_wrapper .gfield {
  margin-bottom: -10px !important;
}

/* Checkbox Consent — Top Margin */
.gform_wrapper .ginput_container_checkbox {
  margin-bottom: -20px !important;
}

/* Mobile — reduce left/right padding */
@media (max-width: 767px) {
  .gform_wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   Elementor Nav Menu — tighter spacing between dropdown items
   ============================================================ */
.elementor-nav-menu--dropdown .menu-item + .menu-item {
  margin-top: -10px !important;
}

/* ============================================================
   Force Heading-Pink color (fixes Thai version showing black
   instead of pink — likely a per-language Elementor Kit/Global
   Color mismatch; revert this block if that gets fixed at the
   Elementor Kit level instead)
   ============================================================ */
.Heading-Pink,
.Pink-Cart-Number,
.Pink-Card-Title,
.Card-Title {
  color: #e0007f !important;
}

/* ============================================================
  TH - Header Font
   ============================================================ */

/* 1. Force override all variables potentially used by Elementor */
html[lang^="th"],
html:has(.lang-th),
body.lang-th,
.lang-th {
  /* Overwrite Global Typography from Elementor */
  --e-global-typography-primary-font-family: "Prompt", sans-serif !important;
  --e-global-typography-secondary-font-family: "Prompt", sans-serif !important;
  --e-global-typography-text-font-family: "Prompt", sans-serif !important;
  --e-global-typography-accent-font-family: "Prompt", sans-serif !important;

  /* Overwrite other variables */
  --Primary: "Prompt", sans-serif !important;
  --theme-heading-font: "Prompt", sans-serif !important;
  --heading-font-family: "Prompt", sans-serif !important;
}

/* 3. Force Elementor's class to change the font */
html[lang^="th"] .elementor-heading-title,
html[lang^="th"] .elementor-text-editor,
html[lang^="th"] .elementor-button,
html[lang^="th"] .elementor-widget-wrap *,
html[lang^="th"] h1,
html[lang^="th"] h2,
html[lang^="th"] h3,
html[lang^="th"] h4,
html[lang^="th"] h5,
html[lang^="th"] h6,
html[lang^="th"] p,
html[lang^="th"] a,
html[lang^="th"] div,
.lang-th .elementor-heading-title,
.lang-th .elementor-text-editor,
.lang-th .elementor-button {
  font-family: "Prompt", sans-serif !important;
  letter-spacing: 0px !important;
  text-transform: none !important;
}

/* ============================================================
   4. Gravity Forms - TH Font
   ============================================================ */
html[lang^="th"] .gform_wrapper .gfield_label,
html[lang^="th"] .gform_wrapper .gfield_radio label,
html[lang^="th"] .gform_wrapper .gfield_checkbox label,
html[lang^="th"] .gform_wrapper .gform-field-label--type-inline,
html[lang^="th"] .gform_wrapper input,
html[lang^="th"] .gform_wrapper textarea,
html[lang^="th"] .gform_wrapper select,
html[lang^="th"] .gform_wrapper .gform_button,
.lang-th .gform_wrapper .gfield_label,
.lang-th .gform_wrapper .gfield_radio label,
.lang-th .gform_wrapper .gfield_checkbox label,
.lang-th .gform_wrapper .gform-field-label--type-inline,
.lang-th .gform_wrapper input,
.lang-th .gform_wrapper textarea,
.lang-th .gform_wrapper select,
.lang-th .gform_wrapper .gform_button {
  font-family: "Prompt", sans-serif !important;
}

/* ============================================================
   Chaty
   ============================================================ */

.chaty-channel .chaty-tooltip:after {
  display: block !important;
  opacity: 1.0 !important;
}

/* Disable button toggle */
.wpgb-button[aria-pressed="true"] {
  pointer-events: none !important;
  cursor: default !important;
}