/* ============================================
   SParadise Theme — GHL Form Custom CSS
   Paste into: Styles → Advanced → Custom CSS
   ============================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ---- Form Container ---- */
.hl_form-builder--main {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: linear-gradient(160deg, #FFF5F0 0%, #F0E4F6 100%) !important;
  border-radius: 24px !important;
  padding: 2.5rem !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  box-shadow: 0 8px 40px rgba(155, 138, 184, 0.13) !important;
  border: 1px solid rgba(232, 224, 238, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  position: relative;
  overflow: hidden;
}

/* ---- Form Header / Title ---- */
.hl_form-builder--main h1,
.hl_form-builder--main .header-title,
.hl_form-builder--main .form-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 600 !important;
  color: #2D2A3E !important;
  text-align: center !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.5rem !important;
}

/* ---- Subtitle / Description ---- */
.hl_form-builder--main .form-description,
.hl_form-builder--main p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: #7A7088 !important;
  text-align: center !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
}

/* ---- Field Labels ---- */
.hl_form-builder--main label,
.hl_form-builder--main .form-builder-label,
.hl_form-builder--main .hl_form-builder--label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7A7088 !important;
  margin-bottom: 0.4rem !important;
}

/* ---- Required Asterisk ---- */
.hl_form-builder--main .hl_form-builder--label .required,
.hl_form-builder--main label .required,
.hl_form-builder--main .text-danger {
  color: #C4A8D4 !important;
}

/* ---- Input Fields ---- */
.hl_form-builder--main input[type="text"],
.hl_form-builder--main input[type="email"],
.hl_form-builder--main input[type="tel"],
.hl_form-builder--main input[type="url"],
.hl_form-builder--main input[type="number"],
.hl_form-builder--main select,
.hl_form-builder--main textarea,
.hl_form-builder--main .hl_form-builder--input,
.hl_form-builder--main .form-control {
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E8E0EE !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: #2D2A3E !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Placeholder */
.hl_form-builder--main input::placeholder,
.hl_form-builder--main textarea::placeholder,
.hl_form-builder--main .form-control::placeholder {
  color: #BDB5CC !important;
  font-weight: 400 !important;
}

/* Focus State */
.hl_form-builder--main input:focus,
.hl_form-builder--main select:focus,
.hl_form-builder--main textarea:focus,
.hl_form-builder--main .form-control:focus {
  border-color: #C4A8D4 !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 212, 0.2) !important;
}

/* ---- Dropdown Select Arrow ---- */
.hl_form-builder--main select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B8AB8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

/* ---- Textarea ---- */
.hl_form-builder--main textarea {
  resize: vertical !important;
  min-height: 110px !important;
  line-height: 1.6 !important;
}

/* ---- Submit Button ---- */
.hl_form-builder--main button[type="submit"],
.hl_form-builder--main .hl_form-builder--submit,
.hl_form-builder--main .btn-submit,
.hl_form-builder--main .submit-button,
.hl_form-builder--main input[type="submit"] {
  width: 100% !important;
  padding: 1.05rem 2rem !important;
  background: linear-gradient(135deg, #C4A8D4 0%, #D4B8E0 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  margin-top: 1.5rem !important;
  box-shadow: 0 8px 32px rgba(196, 168, 212, 0.4) !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

/* Button Hover */
.hl_form-builder--main button[type="submit"]:hover,
.hl_form-builder--main .hl_form-builder--submit:hover,
.hl_form-builder--main .btn-submit:hover,
.hl_form-builder--main input[type="submit"]:hover {
  box-shadow: 0 16px 48px rgba(196, 168, 212, 0.6) !important;
  transform: translateY(-2px) !important;
}

/* Button Active (click) */
.hl_form-builder--main button[type="submit"]:active,
.hl_form-builder--main .hl_form-builder--submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(196, 168, 212, 0.35) !important;
}

/* ---- Field Spacing ---- */
.hl_form-builder--main .fb-divider,
.hl_form-builder--main .form-group,
.hl_form-builder--main .hl_form-builder--group {
  margin-bottom: 1.2rem !important;
}

/* ---- Error Messages ---- */
.hl_form-builder--main .error-message,
.hl_form-builder--main .invalid-feedback {
  color: #D4758B !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin-top: 0.3rem !important;
}

/* Invalid field border */
.hl_form-builder--main input.is-invalid,
.hl_form-builder--main select.is-invalid,
.hl_form-builder--main textarea.is-invalid {
  border-color: #D4758B !important;
}

/* ---- Checkbox / Radio ---- */
.hl_form-builder--main input[type="checkbox"],
.hl_form-builder--main input[type="radio"] {
  accent-color: #C4A8D4 !important;
}

/* ---- Link Styles ---- */
.hl_form-builder--main a {
  color: #9B8AB8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.hl_form-builder--main a:hover {
  color: #7A6A9B !important;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 640px) {
  .hl_form-builder--main {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
    margin: 0.5rem !important;
  }

  .hl_form-builder--main h1,
  .hl_form-builder--main .header-title {
    font-size: 1.6rem !important;
  }

  .hl_form-builder--main button[type="submit"],
  .hl_form-builder--main .hl_form-builder--submit,
  .hl_form-builder--main input[type="submit"] {
    padding: 0.95rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}