:root {
  /* Make form builder field set (style none) legends look better */
  --crm-f-legend-padding: 7px;
  /* Set background color to white. */
  --crm-page-bg-color: #fff;
  /* Replace dorky drop shadow with a light border on field sets. */
  --crm-shadow-block: none;
  --crm-f-fieldset-border: 1px var(--crm-c-gray-300) solid;
  /* Not sure why the icon background on buttons is slightly off? */
  --crm-btn-icon-bg-color: var(--crm-primary-color);
}

/* Make form builder field set (style none) legends look better */
.crm-container fieldset legend.af-title {
  background-color: var(--crm-form-block-header-color);
  color: var(--crm-text-light-color);

}

/* Ensure form builder container, none style legend is bigger than the fields */
div.af-container h4.af-title {
  font-size: 1.5rem;
}

/* Ensure page title is positioned over the body, not pushed to the left. */
div.layout-content > div:first-child > div:nth-child(2) {
  width: clamp(calc(var(--crm-f-form-width) / 2),100%,var(--crm-f-form-width));
  margin-left: auto;
  margin-right: auto;
}

/*
 * Ensure the header (which controls the logo) and footer are also position
 * over the body, not pushed to the left.
 */

header > div > div, footer {
  margin-left: auto;
  margin-right: auto;
  width: clamp(calc(var(--crm-f-form-width) / 2),100%,var(--crm-f-form-width));
}

/*
 * Ensure Radio buttons used in price sets and recurring donations follow the
 * settings above. You shouldn't have to change anything here.
 */
div.radiobuttons-form-radios-as-buttons .crm-radio-wrapper {
  border: 1px solid var(--crm-c-gray-300);
  color: var(--crm-text-color);
}
div.radiobuttons-form-radios-as-buttons .crm-radio-wrapper:hover {
  background: var(--crm-c-gray-200);
}
div.radiobuttons-form-radios-as-buttons .crm-radio-wrapper.selected {
 background: var(--crm-primary-color);
}

div.radiobuttons-form-radios-as-buttons .crm-radio-wrapper.selected > label {
  color: var(--crm-primary-text-color) !important;
}

/* Hide civicrm navigation */
nav#civicrm-menu-nav {
  display: none;
}

/* Avoid indentation of one-time vs monthly on contribution pages */
div.is_recur-section, div.is_recur_radio-section {
  padding-left: 0px !important;
}

/*
   Scope: Drupal Webforms only.
   This will not affect CiviCRM (which typically uses .crm-container).
*/

/* 1. Layout Wrapper: Centers the Title and the Form */
.webform-submission-form,
.webform-submission-form + .page-title, /* Targets title if it follows form */
[class*="webform-page-title"] {
  width: clamp(calc(var(--crm-f-form-width) / 2),100%,var(--crm-f-form-width));
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

/* 2. Specific Component Styling restricted to Webform context */
.webform-submission-form {
    /* Vertical Spacing */
    .js-form-item, .form-item {
        margin-bottom: 1rem;
    }

    /* Labels */
    label {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-family: var(--crm-input-label-font);
        font-weight:var(--crm-input-label-weight);
    }

    /* Form Fields */
    .form-text, .form-email, .form-tel, .form-url, .form-number,
    .form-textarea, .form-select {
        display: block;
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--crm-input-color);
        background-color: var(--crm-input-bg-color);
        border: 1px solid var(--crm-input-border-color);
        border-radius: var(--crm-f-input-radius);
        box-sizing: border-box;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    /* Focus States */
    .form-text:focus, .form-textarea:focus, .form-select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* Buttons */
    .form-actions input[type="submit"] {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        border-radius: var(--crm-btn-radius);
        color: var(--crm-primary-text-color);
        background-color: var(--crm-primary-color);
        border: var(--crm-btn-border);
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .form-actions input[type="submit"]:hover {
        background-color: var(--crm-primary-color);
    }

    /* Radio & Checkbox alignment */
    .form-type-checkbox, .form-type-radio {
        display: flex;
        align-items: center;
        input { margin-right: 0.5rem; }
    }
    .form-required:after {
      background-size: 10px 7px;
      content: "";
      display: inline-block;
      vertical-align: super;
      line-height: 1;
      height: 7px;
      width: 10px;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0VFMDAwMCIgIGQ9Ik0wLDcuNTYybDEuMTE0LTMuNDM4YzIuNTY1LDAuOTA2LDQuNDMsMS42ODgsNS41OSwyLjM1QzYuMzk4LDMuNTUzLDYuMjM3LDEuNTQ0LDYuMjIsMC40NDdoMy41MTEgYy0wLjA1LDEuNTk3LTAuMjM0LDMuNi0wLjU1OCw2LjAwM2MxLjY2NC0wLjgzOCwzLjU2Ni0xLjYxMyw1LjcxNC0yLjMyNUwxNiw3LjU2MmMtMi4wNSwwLjY3OC00LjA2LDEuMTMxLTYuMDI4LDEuMzU2IGMwLjk4NCwwLjg1NiwyLjM3MiwyLjM4MSw0LjE2Niw0LjU3NWwtMi45MDYsMi4wNTljLTAuOTM1LTEuMjc0LTIuMDQxLTMuMDA5LTMuMzE2LTUuMjA2Yy0xLjE5NCwyLjI3NS0yLjI0NCw0LjAxMy0zLjE0Nyw1LjIwNiBsLTIuODU2LTIuMDU5YzEuODcyLTIuMzA3LDMuMjExLTMuODMyLDQuMDE3LTQuNTc1QzMuODQ5LDguNTE2LDEuODcyLDguMDYyLDAsNy41NjIiLz48L3N2Zz4K);
    }

}


/* 3. Responsive overrides (Mobile Friendly) */
@media (max-width: 768px) {
    .webform-submission-form {
        max-width: 95%; /* More breathing room on mobile */
    }
}