.hh-grapes-contact-module-wrap {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Backward compatibility for old Grapes block markup */
.contact-form-wrapper.hh-grapes-contact-module,
.contact-form-wrapper.hh-grapes-contact-module-wrap,
.hh-grapes-contact-module-wrap.contact-form-wrapper {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

.contact-form-wrapper.hh-grapes-contact-module .form-consultation-contact.form,
.contact-form-wrapper.hh-grapes-contact-module-wrap .form-consultation-contact.form,
.hh-grapes-contact-module-wrap.contact-form-wrapper .form-consultation-contact.form {
  margin-top: 0 !important;
}

.hh-grapes-contact-module {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

.hh-grapes-contact-module .form-consultation-quote-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

.hh-grapes-contact-module.form-consultation-quote-wrapper,
.hh-grapes-contact-module-wrap > .form-consultation-quote-wrapper {
  margin-top: 0 !important;
  top: 0 !important;
  transform: none !important;
}

.hh-grapes-contact-module .form-consultation-contact.form {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
}

/* ===== FIX: GrapesJS uses display:table / table-cell =====
   Keep the table layout – just set vertical-align:top on cells */

/* Mobile: GrapesJS default sets .gjs-cell { height:75px } which is fine
   for table-cell (auto-expands), but causes overflow when mobile converts
   to display:block. Override height to auto on mobile. */
@media (max-width: 768px) {
  .gjs-row {
    display: block !important;
    width: 100% !important;
  }
  .gjs-cell,
  .gjs-cell30,
  .gjs-cell70 {
    width: 100% !important;
    display: block !important;
    height: auto !important;
  }
}

/* CSS fix using :has() – target cells in rows containing the contact form */
.gjs-row:has(.hh-grapes-contact-module-wrap) > .gjs-cell,
.gjs-row:has(.hh-grapes-contact-module) > .gjs-cell,
.gjs-row:has(.form-consultation-quote-wrapper) > .gjs-cell {
  vertical-align: top !important;
}

.gjs-cell:has(.hh-grapes-contact-module-wrap),
.gjs-cell:has(.hh-grapes-contact-module) {
  vertical-align: top !important;
}

/* Pagebuilder compat */
[data-content-type="column"]:has(.hh-grapes-contact-module-wrap),
.pagebuilder-column:has(.hh-grapes-contact-module-wrap) {
  vertical-align: top !important;
}

.hh-grapes-contact-module .fieldset > .fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.hh-grapes-contact-module .fieldset > .fields > .field {
  width: calc(50% - 8px);
}

.hh-grapes-contact-module .fieldset > .field,
.hh-grapes-contact-module .fieldset > .fields > .field,
.hh-grapes-contact-module .fieldset > .field:last-child,
.hh-grapes-contact-module .fieldset > .fields > .field:last-child {
  margin-bottom: 16px;
}

.hh-grapes-contact-module .label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #2f343b;
}

.hh-grapes-contact-module .control input,
.hh-grapes-contact-module .control select,
.hh-grapes-contact-module .control textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
}

.hh-grapes-contact-module .control textarea {
  min-height: 90px;
  resize: vertical;
}

.hh-grapes-contact-module .field.choice .control {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hh-grapes-contact-module .field.choice .label {
  margin-bottom: 0;
  font-weight: 400;
}

.hh-grapes-contact-module .actions-toolbar {
  margin-top: 16px;
}

.hh-grapes-contact-module .actions-toolbar .submit {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #c18a3f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hh-grapes-contact-module .actions-toolbar .submit:hover {
  background: #a97532;
}

@media (max-width: 767px) {
  .hh-grapes-contact-module .form-consultation-contact.form {
    padding: 16px;
  }

  .hh-grapes-contact-module .fieldset > .fields > .field {
    width: 100%;
  }
}