/*
 * HubSpot Form Styling Guide
 * -------------------------
 * This CSS customizes HubSpot forms to match Prepory's design system.
 * All styles use !important to override HubSpot's default styles.
 */

/* 
 * FORM HEADINGS
 * ------------
 * To change heading size: Update font-size
 * To change heading color: Update color
 * To change spacing: Update margin values
 */

/* Style the heading container */
.hs-form .form-columns-0 {
    margin-bottom: 2rem !important;
  }
  
  /* Style the main heading */
  .hs-form .hs-richtext h3 {
    font-family: "GothamBold" !important;
    font-weight: 600 !important;
    color: rgb(51, 71, 91) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
    font-size: 2em !important;
    text-wrap: pretty;
  }
  
  /* Style the subtext and link */
  .hs-form .hs-richtext p {
    font-size: 0.875rem !important; /* 14px */
    color: rgb(51, 71, 91) !important;
    margin: 0 !important;
  }
  
  /* Style the link */
  .hs-form .hs-richtext a {
    font-family: "GothamBold" !important;
    color: rgb(37, 211, 102) !important; /* Green link */
    text-decoration: none !important;
    transition: color 0.2s ease-in-out !important;
  }
  
  .hs-form .hs-richtext a:hover {
    color: rgb(32, 184, 89) !important; /* Darker green on hover */
    text-decoration: underline !important;
  }
  
  /* 
   * TYPOGRAPHY VARIABLES
   * ------------------
   * To change font sizes: Update the .875rem values (1rem = 16px, so .875rem = 14px)
   * To change text colors: Update the rgb values
   */
  .hs-form {
    /* Base typography */
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important;
    font-weight: 400 !important;
    color: rgb(51, 71, 91) !important; /* Main text color */
  }
  
  /* 
   * LAYOUT & SPACING
   * ---------------
   * To adjust form width: Update max-width
   * To adjust padding: Update padding values
   * To adjust spacing between fields: Update margin-bottom in .hs-form-field
   */
  .hs-form {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 2rem !important; /* Form padding */
  
    /* Form appearance */
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* 
   * INPUT FIELDS
   * -----------
   * To adjust field height: Update height
   * To adjust field padding: Update padding
   * To change field colors: Update background and border colors
   */
.hs-form .hs-input:not([type="radio"]):not([type="checkbox"]) {
  width: 100% !important;
  height: 40px !important; /* Input height */
  padding: 6px 16px !important; /* Input padding */
  margin: 8px 0 !important;

  /* Field appearance */
  border: 1px solid rgb(203, 214, 226) !important;
  border-radius: 8px !important;
  background: rgb(247, 248, 249) !important;

  /* Text styling */
  font-size: 0.875rem !important;
  color: rgb(51, 71, 91) !important;

  /* Reset browser styles */
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  transition: all 0.2s ease-in-out !important;
}
  
  /* 
   * FIELD STATES
   * -----------
   * To change focus state: Update border-color and box-shadow
   */
  .hs-form .hs-input:focus {
    outline: none !important;
    border-color: rgb(37, 211, 102) !important; /* Green focus border */
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2) !important;
    background: #fff !important;
  }
  
  /* 
   * SUBMIT BUTTON
   * ------------
   * To change button color: Update background-color
   * To change button size: Update padding
   * To adjust hover effect: Modify transform and box-shadow values
   */
  .hs-form .hs-button {
    width: 100% !important;
    padding: 16px 24px !important;
  
    /* Button appearance */
    background-color: rgb(37, 211, 102) !important; /* Green button */
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2) !important;
  
    /* Button text */
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #fff !important;
  
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
  }
  
  .hs-form .hs-button:hover {
    transform: translateY(-1px) !important; /* Slight lift effect */
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3) !important;
  }
  
  /* 
   * GRID LAYOUT
   * ----------
   * To adjust column gap: Update gap value
   * To change responsive breakpoint: Update media query value
   */
  .hs-form .form-columns-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
  
  /* 
   * RESPONSIVE ADJUSTMENTS
   * --------------------
   * Adjust these values for different screen sizes
   */
  @media (max-width: 768px) {
    .hs-form .form-columns-2 {
      grid-template-columns: 1fr !important; /* Stack columns on mobile */
    }
  
    .hs-form {
      padding: 1.5rem !important; /* Reduced padding on mobile */
    }
  }
  
  /* 
   * OVERRIDE EXTERNAL STYLES
   * ----------------------
   * These styles prevent conflicts with other CSS
   */
  .hbspt-form {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  
  /* Style form fields */
  .hs-form .hs-input::placeholder {
    color: rgb(142, 152, 167) !important;
  }
  
  /* Style textarea */
  .hs-form textarea.hs-input {
    height: auto !important;
    min-height: 100px !important;
    padding: 12px 16px !important;
  }
  
  /* Style select dropdowns */
  .hs-form select.hs-input {
    appearance: none !important;
    background-image: url("data:image/svg+xml,svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'path d='M1 1L5 5L9 1' stroke='516F90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'//svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
  }
  
  /* Style labels */
  .hs-form .hs-label {
    position: relative !important;
    font-weight: 400 !important;
    color: rgb(51, 71, 91) !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    display: block !important;
    font-size: 0.875rem !important;
  }
  
  /* Style form field container */
  .hs-form .hs-form-field:not([style*="display: none"]) {
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }
  
  /* Keep hidden fields hidden */
  .hs-form [style*="display: none"] {
    display: none !important;
  }
  
  /* Make sure the input container also stretches */
  .hs-form .input {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  
  /* Style error messages */
  .hs-form .hs-error-msg {
    color: rgb(255, 68, 68) !important;
    margin-top: 4px !important;
    font-size: 0.875rem !important;
  }
  
  /* Target the field containers */
  .hs-form .field {
    width: 100% !important;
  }
  
  /* Style SMS subscription and legal consent containers with higher specificity */
  .hs-form .hs_sms_subscription_opt_in p,
  .hs-form .hs_sms_subscription_opt_in ul,
  .hs-form .hs_sms_subscription_opt_in li,
  .hs-form .legal-consent-container p,
  .hs-form .legal-consent-container ul,
  .hs-form .legal-consent-container li {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Style checkboxes and their labels */
  .hs-form .hs_sms_subscription_opt_in .inputs-list,
  .hs-form .legal-consent-container .inputs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .hs-form .hs_sms_subscription_opt_in .hs-form-booleancheckbox-display,
  .hs-form .legal-consent-container .hs-form-booleancheckbox-display {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
  }
  
  .hs-form .hs_sms_subscription_opt_in input[type="checkbox"],
  .hs-form .legal-consent-container input[type="checkbox"] {
    margin-top: 4px !important;
    cursor: pointer !important;
  }
  
  /* Style the checkbox label to also show pointer */
  .hs-form .legal-consent-container .hs-form-booleancheckbox-display span,
  .hs-form .hs_sms_subscription_opt_in .hs-form-booleancheckbox-display span {
    cursor: pointer !important;
  }
  
  /* Add spacing below legal container */
  .hs-form .legal-consent-container {
    padding-bottom: 1rem !important;
  }
  
  /* Ensure form columns take full width */
  .hs-form .form-columns-2,
  .hs-form .form-columns-1 {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Target HubSpot form container */
  .hbspt-form .hs-form {
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    color: rgb(51, 71, 91) !important;
    line-height: 1.25rem !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }