/* assets/css/style.css */

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #00B7EB;
  --secondary-color:              #00B7EB;
  --section-bg-color:             #f0f8ff;
  --site-footer-bg-color:         #00B7EB;
  --custom-btn-bg-color:          #597081;
  --custom-btn-bg-hover-color:    #5bc1ac;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #e9eaeb;


  /* --body-font-family:             'Kanit', 'sans-serif'; */

  --h1-font-size:                 52px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  16px;
  --btn-font-size:                18px;
  --copyright-font-size:          14px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
}

body {
  /* background-color: var(--white-color);
  font-family: var(--body-font-family);  */
  overflow-x: hidden;
}

/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/
/* h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-bold);
}

h2 {
  color: var(--secondary-color);
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  color: var(--primary-color);
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  font-size: var(--p-font-size);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  color: var(--p-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
} */

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
/* @media screen and (min-width: 1600px) {
  
} */

[x-cloak] { display: none !important; }  /* เพิ่ม x-cloak ป้องกันแสดงก่อน Alpine โหลด */
/* Flower Floating Animation: ลอย + หมุนเบา ๆ + opacity */
@keyframes float1 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px) rotate(-3deg);
    opacity: 0.8;
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(20px) rotate(3deg);
    opacity: 0.8;
  }
}

@keyframes float3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Apply to elements */
.fw_ani_1 {
  animation: float1 6s ease-in-out infinite;
}

.fw_ani_2 {
  animation: float2 6s ease-in-out infinite;
  animation-delay: 3s; /* สลับเวลาไม่ให้ลอยพร้อมกัน */
}

.fw_ani_3 {
  transform: translateY(0px);
  animation: float3 6s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

.img_hover {
  position:relative;
  top:0px;
  transition: all .3s ease-in-out;
  cursor:pointer;
  z-index:1;
}
.img_hover:hover {
  opacity:0.9;
  top:-5px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

/* On Error */
.error,
.is-invalid, 
/* new update for tailwind */
.form-control.error,
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border: none;
    /* background-image: none; */
    /* background-color: #f8d7da; */
}
.form-control:disabled {
    background-color: #b0b0b0;
    border-color: #b0b0b0;
    opacity: 1;
}
select.form-control.is-invalid,
.was-validated select.form-control:invalid {
    border: none;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-color: #f8d7da;
    background-size: 16px 16px;
}
#info-captcha.errors .alert {
    padding-left: 0px;
    color: red;
}
/* After Error */
.was-validated .form-control:valid {
    background-color: none;
    background-image: none;
}
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #dfdfdf;
    background-color: #f1f3ff;
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #dfdfdf;
    background-color: #f1f3ff;
}
.was-validated .form-check-input:valid {
    border-color: #f1f3ff;
}
.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: #009CDE;
}
.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
    box-shadow:0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: #111;
}
label.error {
    color: #c10000;
    font-size: 0.9em;
    line-height: 18px;
    padding: 5px 0 0;

    /* new update for tailwind */
    background:none;
}
/* new update for tailwind */
form .relative .pointer-events-none {
  max-height: 50px;
}
label.error#captcha-error {
    margin-top: 15px;
}
.form-errors-light .form-control.error {
    border-color: #fff;
}
.form-errors-light label.error {
    color: #fff;
}
.typeahead.dropdown-menu {
    padding: 15px 15px 15px 15px;
    margin-left: -1px;
    background: #040001;
}
.typeahead.dropdown-menu li {
    padding: 3px 0px 3px 0px;
}
.typeahead.dropdown-menu li strong {
    font-weight: normal;
}
.typeahead.dropdown-menu li a {
    color: #fff;
}
.typeahead.dropdown-menu li a:hover {
    color: #ffc500;
}
.form-check-acceptPDPA {
    position: relative;
    z-index: 0;
}
#acceptPDPA-error {
    padding: 0px 0px 0px 0px;
    position: absolute;
    bottom: 0px;
}

/* สำหรับ Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* สำหรับ Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.input-custom {
  width: 100%;
  border: 1px solid #d1d5db; /* เทียบกับ Tailwind border */
  border-radius: 0.75rem;     /* เทียบกับ rounded-xl */
  padding: 0.75rem 1rem;      /* py-3 px-4 */
  outline: none;
  transition: box-shadow 0.2s ease-in-out;
}
.input-custom:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.45); /* purple-200 */
}
.input-custom:disabled {
  background-color: #b0b0b0;
  border-color: #b0b0b0;
  opacity: 1;
}
.select-custom {
  width: 100%;
  appearance: none;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}
.select-custom:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.45); /* purple-200 */
}
.checkbox-custom {
    appearance: none;
    width: 30px !important;
    height: 30px !important;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin:3px 10px 0px 0px;
}
.checkbox-custom:checked {
  background-color: #01b9dd;
  border-color: #01b9dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
}
.radio-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.radio-option {
  display: inline-flex;
  align-items: center;
}
.radio-option .error {
  padding:0px 0px 0px 5px;
  z-index: 0;
  position: relative;
}
.radio-custom {
  height: 24px;
  width: 24px;
  appearance: none;
  background-color: #fff; 
  border: 1px solid #cbd5e1; 
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.radio-custom:checked {
  border-color: #01b9dd; 
}
.radio-custom-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #01b9dd; 
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  z-index: 10;
}
.radio-custom:checked ~ .radio-custom-dot {
  opacity: 1;
}

.radio-group-txt {
    font-size: 12px;
    position: relative;
    z-index: 5;
    bottom: 6px;
}
.radio-group-txt-remark {
    color:#c10000; 
    font-size:12px; 
    display:inline-block;
}
.radio-group-txt-tag,
.radio-group-txt-tag-2 {
    background: #7a76ff; 
    color:#fff; 
    display:inline; 
    border-radius:15px; 
    padding:5px 15px 5px 15px;
}
.radio-group-txt-tag-2 {
    background: #4338ca; 
}
.radio-group-block {
    background: rgba(121, 118, 255, 0.3);
    border-radius: 10px; 
    border: 2px solid #7a76ff; 
    padding: 10px 5px 10px 5px;
    position: relative;
}
.radio-group {
    display: flex;
    gap: 0.2rem;
    width:100%;
    justify-content: space-between;
  }
  .radio-button {
    position: relative;
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: -20px;
  }
  .radio-button input[type="radio"] {
    position: relative;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .radio-button label,
  .radio-button2 label {
    display: block;
    padding: 5px 10px 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: normal;
    color: #000;
    background-color: #fff;
    border: 2px solid #7a76ff;
  }
  .radio-button2 label {
    padding: 5px 5px 5px 5px;
  }
  label#tx_interested1-error,
  label#tx_interested2-error {
    position: absolute;
    background: none;
    color: #c10000;
    border: 0px;
    font-size: 12px;
    line-height: 18px;
    width: 200px;
    text-align: left;
    z-index: 5;
    padding-left: 0px !important;
    left: 0px;
    bottom: -50px;
}
 .radio-button input[type="radio"]:checked + label {
    background-color: #7a76ff;
    color: white;
    border-color: #6661fd;
    z-index: 15;
    position: relative;
  }
  .radio-button label:hover {
    background-color: #7a76ff;
    border-color: #6661fd;
    color: #fff;
  }

.btn-primary,
.btn-secondary {
  display: inline-block;
  background-color: #4338ca; 
  color: white;
  font-weight: 600;
  font-size: 1.125rem; /* text-lg */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  /* border-radius: 9999px;  */
  /* rounded-full */
  /* border-radius: 0.75rem;  */
  /* 12px */
  border-radius: 1rem;
  transition: all 0.3s ease;
  min-width: 100%;
  text-align: center;
}
.btn-secondary {
  background-color: #4C51BF; 
}

.btn-primary:hover {
  background-color: #4C51BF; 
}

.btn-secondary:hover {
  background-color: #4338ca; 
}

@media (min-width: 768px) {
  .btn-primary,
  .btn-secondary {
    font-size: 1.25rem; /* md:text-xl */
    min-width: 250px;
  }
  .radio-group-block {
      padding: 10px 20px 10px 20px;
  }
  .radio-button {
      font-size: 18px;
      margin-top: -25px;
  }
  .radio-button label,
  .radio-button2 label {
      padding: 5px 10px 5px 10px;
      min-width: 40px;
  }
  
}