/* ============================================================
 * Form Styles - Ported from Divi
 * Divi equivalents:
 *   input, textarea, select → .form-*
 *   .et_pb_contact_form     → .webform, .contact-form
 * ============================================================ */

/* -----------------------------------------------
   Form Elements
   ----------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.15);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  appearance: auto;
}

/* -----------------------------------------------
   Form Layout
   ----------------------------------------------- */
.form-item {
  margin-bottom: var(--spacing-md);
}

.form-item label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.form-item .description {
  font-size: var(--font-size-small);
  color: var(--color-text-light);
  margin-top: var(--spacing-xs);
}

.form-required::after {
  content: '*';
  color: #cc0000;
  margin-left: 2px;
}

/* ── Shared grid base for ALL webform submission forms ── */
.contact-form-wrapper .webform-submission-form {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Name row: First + Last side by side, inside the fieldset */
.contact-form-wrapper fieldset[data-drupal-selector="edit-name"] .fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form-wrapper fieldset[data-drupal-selector="edit-name"] { grid-area: name; }
.contact-form-wrapper .form-item-email                          { grid-area: email; }
.contact-form-wrapper .form-item-phone                          { grid-area: phone; }
.contact-form-wrapper .form-item-message                        { grid-area: message; }
.contact-form-wrapper fieldset[data-drupal-selector="edit-captcha"] { grid-area: captcha; }
.contact-form-wrapper div[data-drupal-selector="edit-actions"]      { grid-area: actions; }

/* Contact form: has phone + message, two columns where it makes sense */
.contact-form-wrapper .webform-submission-contact-form {
  grid-template-areas:
    "name    name"
    "email   phone"
    "message message"
    "captcha captcha"
    "actions actions";
}

/* Email-signup form: no phone/message, so skip those rows entirely */
.contact-form-wrapper .webform-submission-email-signup-form {
  grid-template-areas:
    "name    name"
    "email   email"
    "captcha captcha"
    "actions actions";
}

/* Quote form: has phone + an address fieldset, no message field */
.contact-form-wrapper .webform-submission-quote-form {
  grid-template-areas:
    "name    name"
    "email   phone"
    "address address"
    "captcha captcha"
    "actions actions";
}

.contact-form-wrapper fieldset[data-drupal-selector="edit-address"] {
  grid-area: address;
}

/* Captcha: center the box within its own grid area */
.contact-form-wrapper fieldset[data-drupal-selector="edit-captcha"] {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Submit button centered */
.contact-form-wrapper div[data-drupal-selector="edit-actions"] {
  display: flex;
  justify-content: center;
}

/* Inputs fill their column */
.contact-form-wrapper .webform-submission-form input,
.contact-form-wrapper .webform-submission-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Remove margins that fight the grid */
.contact-form-wrapper .webform-submission-form .form-item {
  margin: 0;
}

/* Make labels readable against dark backgrounds — email signup form only */
.webform-submission-email-signup-form .form-item label,
.webform-submission-email-signup-form .form-item .description,
.webform-submission-email-signup-form legend .fieldset-legend {
  color: #ffffff;
  opacity: 0.9;
}

/* Light input backgrounds so typed text is legible, with a visible border */
.webform-submission-email-signup-form input[type="text"],
.webform-submission-email-signup-form input[type="email"] {
  background-color: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.webform-submission-email-signup-form input[type="text"]:focus,
.webform-submission-email-signup-form input[type="email"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.25);
}

/* Required-field asterisk */
.webform-submission-email-signup-form .form-required::after {
  color: #ff6b6b;
}

/* -----------------------------------------------
   Checkboxes & Radios
   ----------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  margin-right: var(--spacing-xs);
  width: auto;
}

.form-type-checkbox label,
.form-type-radio label {
  display: inline;
  font-weight: normal;
}

/* -----------------------------------------------
   Responsive
   ----------------------------------------------- */
@media (max-width: 600px) {
  .contact-form-wrapper .webform-submission-contact-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "phone"
      "message"
      "actions";
  }
}

/* -----------------------------------------------
   Webform Inline Confirmation Styles
   ----------------------------------------------- */

/* Hide the form-related sections when the webform confirmation is displayed.
   The confirmation renders a .webform-confirmation div inside page.content
   on the same page (inline confirmation type). */
.webform-confirmation {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
}

.webform-confirmation__message {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 24px;
}

.webform-confirmation__message p {
  margin: 0 0 16px 0;
}

.webform-confirmation__back {
  margin-top: 24px;
}

.webform-confirmation__back a {
  display: inline-block;
  padding: 12px 32px;
  background-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color var(--transition-fast);
}

.webform-confirmation__back a:hover {
  background-color: var(--color-accent-dark);
}

/* Hide the form intro sections when confirmation is shown.
   The confirmation div is a direct child of the content region,
   so we use the sibling selector to hide preceding sections. */
.webform-confirmation ~ .page-section--form {
  display: none;
}

/* Also hide the form-intro section-content when confirmation is shown */
.webform-confirmation ~ .page-section--form .section-content--form-intro {
  display: none;
}

/* Confirmation checkmark icon (added by the webform_confirmation theme) */
.webform-confirmation::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* -----------------------------------------------
   User Login & Profile Styles
   ----------------------------------------------- */

/* User page sub-tabs (Log in / Reset your password) */
.user-form-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
}

.user-form-wrapper ul li {
  margin: 0;
}

.user-form-wrapper ul li a {
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.user-form-wrapper ul li a:hover {
  color: var(--color-accent);
}

.user-form-wrapper ul li a.is-active,
.user-form-wrapper ul li a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* User login form */
.user-form-wrapper .form-item {
  margin-bottom: 20px;
}

.user-form-wrapper label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.user-form-wrapper input[type="text"],
.user-form-wrapper input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.user-form-wrapper input[type="text"]:focus,
.user-form-wrapper input[type="password"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.15);
}

.user-form-wrapper #edit-actions {
  margin-top: 24px;
}

.user-form-wrapper #edit-actions input[type="submit"] {
  width: 100%;
  padding: 14px 32px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.user-form-wrapper #edit-actions input[type="submit"]:hover {
  background-color: var(--color-accent-dark);
}

/* Password reset / create account links */
.user-form-wrapper .item-list ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  text-align: center;
}

.user-form-wrapper .item-list ul li {
  margin: 8px 0;
}

.user-form-wrapper .item-list ul li a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.user-form-wrapper .item-list ul li a:hover {
  text-decoration: underline;
}

/* User profile page */
.user-profile-wrapper .field {
  margin-bottom: 16px;
}

.user-profile-wrapper .field__label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.user-profile-wrapper .field__item {
  color: var(--color-text-light);
}