/* ========================
   Form with Image Module
   ======================== */

/* Note: Base section styles (.section-base) are defined in global.css */

.form-with-image-module-section .container-fluid {
  max-width: 100%;
}

.form-image-container {
  display: block;
  object-fit: cover;
  object-position: top center;
  height: 250px;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-bottom: -6rem;
}

/* Form Content Container */
.form-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 45rem;
}

/* Form Title - Uses .title-3xl from typography.css with custom color override */
.form-title {
  color: var(--bs-primary-50);
  margin-bottom: 0;
}

.form-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Form Row Container */
.form-wrapper .row {
  gap: var(--space-5);
}

/* Form Labels */
.form-wrapper label {
  color: var(--bs-primary-500);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
  display: block;
}

/* Underline Input Style */
.form-underline {
  background: transparent;
  border: 0;
  border-bottom: 0.0625rem solid rgba(var(--bs-primary-25-rgb), 0.5);
  border-radius: 0;
  color: var(--bs-primary-50);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--space-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  transition: all var(--transition-base);
}

.form-underline::placeholder {
  color: var(--bs-primary-50);
}

.form-underline:focus {
  outline: none;
  border-bottom-color: var(--bs-primary-50);
  box-shadow: none;
}

/* Textarea with Cyan Background */
.form-textarea {
  background-color: var(--bs-primary-50);
  border: 0;
  border-radius: var(--radius-2xl);
  color: var(--bs-primary);
  padding: var(--space-7);
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  resize: vertical;
  min-height: 7.5rem;
  transition: all var(--transition-base);
}

.form-textarea::placeholder {
  color: rgba(15, 44, 43, 0.6);
}

.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 0.1875rem rgba(207, 250, 254, 0.2);
}

/* Select Dropdown */
.form-select {
  background: transparent;
  border: 0;
  border-bottom: 0.0625rem solid rgba(var(--bs-primary-25-rgb), 0.5);
  border-radius: 0;
  color: var(--bs-primary-50);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--space-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  transition: all var(--transition-base);
}

.form-select:focus {
  outline: none;
  border-bottom-color: var(--bs-primary-50);
  box-shadow: none;
}

/* Phone Number Field Container */
.phone-field-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 0.0625rem solid rgba(var(--bs-primary-25-rgb), 0.5);
  padding-bottom: var(--space-3);
}

.phone-flag {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bs-light);
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.phone-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--bs-primary-50);
  padding: 0;
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
}

.phone-input::placeholder {
  color: var(--bs-primary-50);
}

.phone-input:focus {
  outline: none;
}
.form-img-block {
  height: 100%;
}
.form-img-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* ========================
   ZOHO FORMS STYLING
   ======================== */

/* Zoho Form Container */
.zf_main_form,
.zoho-form,
.zf-templateWidth,
.zf-templateWrapper {
  background: transparent;
}

/* Zoho Form Title */
.zf-frmTitle {
  color: var(--bs-primary-50) !important;
  font-size: var(--font-size-h2) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-heading) !important;
  margin-bottom: var(--space-11) !important;
}

.zf-frmTitle em {
  font-style: normal !important;
}

/* Zoho Form Description */
.zf-frmDesc {
  color: var(--bs-primary-50) !important;
  font-size: var(--font-size-base) !important;
}

/* Zoho Form Labels */
.zf-labelName {
  color: var(--bs-primary-500) !important;
  font-weight: var(--font-weight-medium) !important;
  margin-bottom: var(--space-3) !important;
  display: block !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family-sans) !important;
}

/* Zoho Text Inputs */
.zf-tempFrmWrapper input[type="text"],
.zf-tempFrmWrapper input[type="email"],
.zf-tempFrmWrapper input[type="tel"],
.zf-tempFrmWrapper input[type="number"],
.zf-tempFrmWrapper input[type="date"],
.zf-tempFrmWrapper input[type="time"],
.zf-tempFrmWrapper input[type="url"],
.zf_input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.0625rem solid var(--bs-primary-25) !important;
  border-radius: 0 !important;
  color: var(--bs-primary-50) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: var(--space-3) !important;
  padding-top: var(--space-3) !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family-sans) !important;
  transition: all var(--transition-base) !important;
}

.zf-tempFrmWrapper input[type="text"]::placeholder,
.zf-tempFrmWrapper input[type="email"]::placeholder,
.zf-tempFrmWrapper input[type="tel"]::placeholder,
.zf-tempFrmWrapper input[type="number"]::placeholder,
.zf-tempFrmWrapper input[type="date"]::placeholder,
.zf-tempFrmWrapper input[type="time"]::placeholder,
.zf-tempFrmWrapper input[type="url"]::placeholder {
  color: var(--bs-primary-50) !important;
}

.zf-tempFrmWrapper input[type="text"]:focus,
.zf-tempFrmWrapper input[type="email"]:focus,
.zf-tempFrmWrapper input[type="tel"]:focus,
.zf-tempFrmWrapper input[type="number"]:focus,
.zf-tempFrmWrapper input[type="date"]:focus,
.zf-tempFrmWrapper input[type="time"]:focus,
.zf-tempFrmWrapper input[type="url"]:focus,
.zf_input:focus {
  outline: none !important;
  border-bottom-color: var(--bs-primary-50) !important;
  box-shadow: none !important;
}

/* Zoho Textarea */
.zf-tempFrmWrapper textarea,
.zf_textarea {
  background-color: var(--bs-primary-50) !important;
  border: 0 !important;
  border-radius: var(--radius-2xl) !important;
  color: var(--bs-primary-800) !important;
  padding: var(--space-7) !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family-sans) !important;
  resize: vertical !important;
  min-height: 7.5rem !important;
  transition: all var(--transition-base) !important;
}

.zf-tempFrmWrapper textarea::placeholder {
  color: rgba(15, 44, 43, 0.6) !important;
}

.zf-tempFrmWrapper textarea:focus,
.zf_textarea:focus {
  outline: none !important;
  box-shadow: var(--shadow-focus-cyan) !important;
}

/* Zoho Select Dropdown */
.zf-tempFrmWrapper select,
.zf-form-sBox,
.zf_select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.0625rem solid var(--bs-primary-25) !important;
  border-radius: 0 !important;
  color: var(--bs-primary-50) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: var(--space-3) !important;
  padding-top: var(--space-3) !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family-sans) !important;
  transition: all var(--transition-base) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6faf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--space-3) center !important;
  background-size: 1.25rem !important;
  padding-right: var(--space-14) !important;
}

.zf-tempFrmWrapper select:focus,
.zf-form-sBox:focus,
.zf_select:focus {
  outline: none !important;
  border-bottom-color: var(--bs-primary-50) !important;
  box-shadow: none !important;
}

/* Zoho Checkboxes & Radio Buttons */
.zf-tempFrmWrapper input[type="checkbox"],
.zf-tempFrmWrapper input[type="radio"],
.zf_checkbox,
.zf_radio {
  accent-color: var(--bs-primary-500) !important;
  cursor: pointer !important;
}

/* Zoho Checkbox/Radio Labels */
.zf-tempFrmWrapper input[type="checkbox"] + label,
.zf-tempFrmWrapper input[type="radio"] + label {
  color: var(--bs-primary-50) !important;
  font-weight: var(--font-weight-regular) !important;
  margin-bottom: var(--space-3) !important;
  cursor: pointer !important;
}

/* Zoho Form Row/Field Container */
.zf-tempFrmWrapper,
.zf_row,
.zf_field {
  margin-bottom: var(--space-11) !important;
}

/* Zoho Form Error Messages */
.zf-errorMessage,
.zf_error,
.zf_error_msg,
.error {
  color: var(--bs-secondary-400) !important;
  font-size: var(--font-size-sm) !important;
  margin-top: var(--space-1) !important;
}

/* Zoho Form Success Messages */
.zf_success,
.success {
  color: var(--bs-primary-500) !important;
  font-size: var(--font-size-sm) !important;
  margin-top: var(--space-1) !important;
}

/* Zoho Submit Button */
.zf-submitColor {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-black) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-3) var(--space-11) !important;
  font-size: var(--font-size-preheader) !important;
  transition: all var(--transition-base) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-3) !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

.zf-submitColor:hover {
  background-color: var(--bs-secondary-500) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: var(--shadow-button) rgba(var(--btn-secondary-shadow-rgb), 0.3) !important;
}

.zf-submitColor:active {
  background-color: var(--bs-secondary-600) !important;
  transform: translateY(0) !important;
}

.zf-submitColor:focus {
  outline: 0.125rem solid var(--bs-secondary) !important;
  outline-offset: 0.125rem !important;
}

/* Submit Button - Uses .btn-secondary from button.css */
/* No custom styles needed - inherits from button component */

/* Form Plugin Button Styling (Gravity Forms, WPForms, Contact Form 7, Zoho Forms) */
.form-wrapper input[type="submit"],
.form-wrapper button[type="submit"],
.gform_wrapper input[type="submit"],
.wpforms-form input[type="submit"],
.wpcf7-form input[type="submit"],
.zf_main_form input[type="submit"],
.zf_main_form button[type="submit"],
.zoho-form input[type="submit"],
.zoho-form button[type="submit"] {
  background-color: var(--bs-secondary);
  color: var(--bs-black);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-2xl);
  padding: var(--space-3) var(--space-11);
  font-size: var(--font-size-preheader);
  transition: all var(--transition-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.form-wrapper input[type="submit"]:hover,
.form-wrapper button[type="submit"]:hover,
.gform_wrapper input[type="submit"]:hover,
.wpforms-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.zf_main_form input[type="submit"]:hover,
.zf_main_form button[type="submit"]:hover,
.zoho-form input[type="submit"]:hover,
.zoho-form button[type="submit"]:hover {
  background-color: var(--bs-secondary-500);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-button) rgba(var(--btn-secondary-shadow-rgb), 0.3);
}

.form-wrapper input[type="submit"]:active,
.form-wrapper button[type="submit"]:active,
.gform_wrapper input[type="submit"]:active,
.wpforms-form input[type="submit"]:active,
.wpcf7-form input[type="submit"]:active,
.zf_main_form input[type="submit"]:active,
.zf_main_form button[type="submit"]:active,
.zoho-form input[type="submit"]:active,
.zoho-form button[type="submit"]:active {
  background-color: var(--bs-secondary-600);
  transform: translateY(0);
}

.form-wrapper input[type="submit"]:focus,
.form-wrapper button[type="submit"]:focus,
.gform_wrapper input[type="submit"]:focus,
.wpforms-form input[type="submit"]:focus,
.wpcf7-form input[type="submit"]:focus,
.zf_main_form input[type="submit"]:focus,
.zf_main_form button[type="submit"]:focus,
.zoho-form input[type="submit"]:focus,
.zoho-form button[type="submit"]:focus {
  outline: 0.125rem solid var(--bs-secondary);
  outline-offset: 0.125rem;
}

/* No Image Variant */
.form-with-image-module-section.no-image .form-content-wrapper {
  max-width: 45rem;
  margin: 0 auto;
}

/* Responsive Design */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .form-content-wrapper {
    gap: var(--space-9);
  }

  .form-wrapper {
    gap: var(--space-7);
  }

  .form-wrapper .row {
    gap: var(--space-7);
  }

  .form-underline,
  .form-select {
    font-size: var(--font-size-sm);
    padding-bottom: var(--space-2);
  }

  .form-textarea {
    min-height: 6.25rem;
    padding: var(--space-5);
    font-size: var(--font-size-sm);
  }

  .form-wrapper input[type="submit"],
  .form-wrapper button[type="submit"],
  .gform_wrapper input[type="submit"],
  .wpforms-form input[type="submit"],
  .wpcf7-form input[type="submit"],
  .zf_main_form input[type="submit"],
  .zf_main_form button[type="submit"],
  .zoho-form input[type="submit"],
  .zoho-form button[type="submit"] {
    padding: var(--space-2) var(--space-9);
    font-size: var(--font-size-sm);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .form-content-wrapper {
    gap: var(--space-11);
  }

  .form-wrapper {
    gap: var(--space-7);
  }

  .form-wrapper .row {
    gap: var(--space-7);
  }

  .form-underline,
  .form-select {
    font-size: var(--font-size-sm);
  }

  .form-textarea {
    min-height: 6.25rem;
    font-size: var(--font-size-sm);
  }
  .form-image-container {
    height: 500px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .form-content-wrapper {
    gap: var(--space-14);
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .form-image-container {
    display: block;
    height: auto;
    object-fit: auto;
    width: 100%;

    margin-left: -1rem;
  }
  .form-content-wrapper {
    gap: var(--space-20);
  }

  .form-wrapper {
    gap: var(--space-11);
  }

  .form-wrapper .row {
    gap: var(--space-11);
  }

  .form-underline,
  .form-select {
    font-size: var(--font-size-base);
  }

  .form-textarea {
    min-height: 7.5rem;
    font-size: var(--font-size-base);
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* Inherits from 1200px and up */
}

/* XXX-Large devices (1600px and up) */
@media (min-width: 1600px) {
  /* Inherits from 1400px and up */
}

@media (max-width: 768px) {
  .form-image-container {
    margin-bottom: 0;
  }
}

/* Mobile (575px and below) - 48px padding */
@media (max-width: 575px) {
  .form-image-container {
    margin-bottom: 0;
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .form-underline,
  .form-textarea,
  .form-select,
  .form-wrapper input[type="submit"],
  .form-wrapper button[type="submit"],
  .gform_wrapper input[type="submit"],
  .wpforms-form input[type="submit"],
  .wpcf7-form input[type="submit"],
  .zf_main_form input[type="submit"],
  .zf_main_form button[type="submit"],
  .zoho-form input[type="submit"],
  .zoho-form button[type="submit"] {
    transition: none;
  }
}

/* Newsletter Form Wrapper - Footer variant */
.form-newsletter-wrapper {
  margin-left: 0;
  margin-right: 0;
  padding: 2.5rem 0;
}

.form-newsletter-wrapper iframe {
  width: 100% !important;
  scrollbar-width: var(--space-1);
}

.form-newsletter-wrapper iframe::-webkit-scrollbar {
  width: var(--space-1);
  height: var(--space-1);
}

.form-newsletter-wrapper iframe::-webkit-scrollbar-track {
  background: var(--bs-primary-800);
}

.form-newsletter-wrapper iframe::-webkit-scrollbar-thumb {
  background: var(--bs-success);
  border-radius: var(--radius-sm);
}

.form-newsletter-wrapper iframe::-webkit-scrollbar-thumb:hover {
  background: var(--bs-primary-50);
}

@media (min-width: 768px) {
  .form-newsletter-wrapper iframe {
    width: 45rem !important; /* 720px */
  }
}

@media (min-width: 992px) {
  .form-newsletter-wrapper {
    margin-left: auto;
    margin-right: 1.25rem;
    padding: 0 0;
  }
}

@media (min-width: 1600px) {
  .form-newsletter-wrapper {
    margin-left: auto;

    margin-right: 11.25rem; /* 180px */
  }
}

@media (min-width: 2560px) {
  .form-newsletter-wrapper {
    margin-left: auto;
    margin-right: 38.25rem;
  }
}