/*
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-childd
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 url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Montserrat:wght@300;400;500;600;700&display=swap");

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

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

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

/* Form Links (e.g. Privacy Policy) */
.gform_wrapper a {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.gform_wrapper a:hover {
  color: #ffffff !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: #595d66 !important;
  outline-color: #595d66 !important;
  outline: 2px solid #595d66 !important;
}

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

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

/* Background Image + Rounded Corners */
.gform_wrapper {
  background-image: url("https://jandevents.com/wp-content/uploads/2026/05/jand-events-bg-purple-main-002.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  padding: 20px 40px 40px 40px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}

/* Field Labels — Baskervville */
.gform_wrapper .gfield_label {
  color: #ffffff;
  font-family: "Baskervville", serif !important;
  font-size: 20px !important;
  font-weight: 500 !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: #ffffff;
  font-family: "Montserrat", sans-serif !important;
}

/* Required Asterisk */
.gform_wrapper .gfield_required {
  color: #ffffff;
}

/* Field Border Radius + Font + Inner Shadow */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select {
  background-color: #ffffffbb !important; /* Semi-transparent white */
  border-radius: 10px !important;
  font-family: "Montserrat", sans-serif !important;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Submit Button */
.gform_wrapper .gform_button {
  font-family: "Baskervville", serif !important;
  display: block !important;
  margin: 30px auto 0 auto !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border: solid 2px #ffffff !important;
  border-radius: 10px !important;
  padding: 15px 30px !important;
  box-shadow: inset none !important;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) !important;
  background-color: #63308e !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: #7b3fa0 !important;
  color: #7b3fa0 !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;
  }
}

/* Error Message */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors .gform_submission_error {
  color: #f79696 !important;
}

.gform_confirmation_message {
    color: #fff;
    text-align: center;
}

#validation_message_1_9 {
  margin-top: 25px !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;
}

/* ============================================================
  WPGB Carousel
   ============================================================ */
.wpgb-page-dots {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 15px auto 0 auto !important;
}

/* Prevent carousel from overlapping arrows (outside only) */
.wpgb-wrapper:has(.wpgb-card-5) .wpgb-carousel {
  margin-left: 50px !important;
  margin-right: 50px !important;
}

/* Mobile adjustment */
@media (max-width: 767px) {
  .wpgb-wrapper:has(.wpgb-card-5) .wpgb-carousel {
    margin-left: 45px !important;
    margin-right: 45px !important;
  }
}