/* ============================================================================
   DHEE GROUP GLOBAL — Contact Us
   WPForms styling to match the approved Claude consultation-card design.
   Scoped to form id 280 (#wpforms-280) so no other WPForms form is affected.
   Do not edit WPForms plugin files or templates — this stylesheet alone
   reproduces the approved UI on top of the standard WPForms output.

   APPROVED DESIGN TOKENS (from the finalized Claude design):
     Card:        #FFFFFF · radius 18px · padding 38px · gap 16px
                  shadow 0 30px 80px rgba(0,0,0,.35)
     Title:       Manrope 800 · 21px · #202124 · letter-spacing -0.01em
     Subheading:  14px (13.5) · #6B6B74
     Fields:      1px #E0E1E6 · radius 8px · padding 13px 15px · 14px
                  bg #FFFFFF · text #202124
     Focus:       border #3F3F46 · ring 0 0 0 3px rgba(63,63,70,.1)
     Button:      #D91F26 · #FFFFFF · radius 9px · padding 15px · 600 · 15px
                  hover #B8161C, translateY(-1px), shadow 0 8px 22px rgba(217,31,38,.3)
     Note:        12px · #9A9BA3 · centered

   FIELD ORDER to set inside WPForms (form 280) so rows match the approved layout:
     Row 1 (2-col):  Full name        | Work email
     Row 2 (2-col):  Phone (optional) | Jurisdiction (dropdown)
     Row 3 (full):   Service required (dropdown)
     Row 4 (full):   Business details / message (textarea)
     Submit:         "Request a consultation"
   Use WPForms' built-in "CSS Classes → dhee-half" on the four fields that
   should sit two-per-row (Full name, Work email, Phone, Jurisdiction).
   ========================================================================== */

/* ---- Card container (optional wrapper from contact-form-wpforms.html) ---- */
.dhee-consult-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.dhee-consult-title {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: #202124;
  letter-spacing: -0.01em;
}

.dhee-consult-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6B6B74;
}

.dhee-consult-note {
  font-size: 12px;
  color: #9A9BA3;
  text-align: center;
}

/* Strip WPForms' own outer chrome so the card owns all spacing */
#wpforms-280,
#wpforms-280 .wpforms-form {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Hide the plugin title/description (title="false" already suppresses title) */
#wpforms-280 .wpforms-title,
#wpforms-280 .wpforms-description {
  display: none;
}

/* ---- Field grid: 16px gap between stacked rows ---- */
#wpforms-280 .wpforms-field-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#wpforms-280 div.wpforms-field {
  padding: 0;
  margin: 0;
  width: 100%;
  clear: none;
  box-sizing: border-box;
}

/* Two-per-row fields (add CSS class "dhee-half" to these fields in WPForms) */
#wpforms-280 div.wpforms-field.dhee-half {
  width: calc(50% - 8px);
}

/* ---- Labels: match the compact, quiet approved style ---- */
#wpforms-280 .wpforms-field-label {
  font-weight: 600;
  font-size: 13px;
  color: #3F3F46;
  margin: 0 0 6px;
  line-height: 1.3;
}

#wpforms-280 .wpforms-field-sublabel,
#wpforms-280 .wpforms-field-description {
  font-size: 12px;
  color: #9A9BA3;
  font-weight: 400;
}

/* Required asterisk in brand red */
#wpforms-280 .wpforms-required-label {
  color: #D91F26;
}

/* ---- Inputs, selects, textareas ---- */
#wpforms-280 input[type="text"],
#wpforms-280 input[type="email"],
#wpforms-280 input[type="tel"],
#wpforms-280 input[type="url"],
#wpforms-280 input[type="number"],
#wpforms-280 select,
#wpforms-280 textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E0E1E6;
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.4;
  background: #FFFFFF;
  color: #202124;
  outline: none;
  font-family: inherit;
  transition: border-color .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s cubic-bezier(.4, 0, .2, 1);
}

/* Consistent field height for single-line controls */
#wpforms-280 input[type="text"],
#wpforms-280 input[type="email"],
#wpforms-280 input[type="tel"],
#wpforms-280 select {
  height: 48px;
}

#wpforms-280 textarea {
  min-height: 112px;   /* ≈ approved 4-row textarea */
  resize: vertical;
}

/* Native dropdown chevron affordance */
#wpforms-280 select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B74' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

/* ---- Placeholders ---- */
#wpforms-280 input::placeholder,
#wpforms-280 textarea::placeholder {
  color: #9A9BA3;
  opacity: 1;
}

/* ---- Focus state ---- */
#wpforms-280 input[type="text"]:focus,
#wpforms-280 input[type="email"]:focus,
#wpforms-280 input[type="tel"]:focus,
#wpforms-280 select:focus,
#wpforms-280 textarea:focus {
  border-color: #3F3F46;
  box-shadow: 0 0 0 3px rgba(63, 63, 70, .1);
}

/* ---- Submit button ---- */
#wpforms-280 .wpforms-submit-container {
  margin: 0;
  padding: 0;
  width: 100%;
}

#wpforms-280 button[type="submit"],
#wpforms-280 .wpforms-submit {
  width: 100%;
  display: block;
  background: #D91F26;
  color: #FFFFFF;
  border: none;
  border-radius: 9px;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s cubic-bezier(.4, 0, .2, 1);
}

#wpforms-280 button[type="submit"]:hover,
#wpforms-280 .wpforms-submit:hover {
  background: #B8161C;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(217, 31, 38, .3);
}

#wpforms-280 button[type="submit"]:active,
#wpforms-280 .wpforms-submit:active {
  transform: translateY(0);
}

/* ---- Validation (error) messages ---- */
#wpforms-280 .wpforms-field input.wpforms-error,
#wpforms-280 .wpforms-field select.wpforms-error,
#wpforms-280 .wpforms-field textarea.wpforms-error {
  border-color: #D91F26;
  box-shadow: 0 0 0 3px rgba(217, 31, 38, .1);
}

#wpforms-280 label.wpforms-error,
#wpforms-280 .wpforms-error-container {
  color: #D91F26;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

/* ---- Success / confirmation message ---- */
#wpforms-confirmation-280,
div.wpforms-confirmation-container-full {
  background: #F3FBF5;
  border: 1px solid rgba(30, 158, 74, .35);
  border-radius: 12px;
  padding: 20px 22px;
  color: #157A38;
  font-size: 14.5px;
  line-height: 1.6;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* ---- Responsive: tablet keeps proportions, mobile stacks ---- */
@media (max-width: 600px) {
  .dhee-consult-card {
    padding: 26px;
  }
  /* stack the two-column rows on mobile while keeping the 16px rhythm */
  #wpforms-280 div.wpforms-field.dhee-half {
    width: 100%;
  }
}