/* Two-Column Layout */
@media screen and (min-width: 768px) {
  .crm-contribution-form-styles-layout-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &>* {
      flex-basis: 45%;
      flex-grow: 0;
    }
  }

  .crm-contribution-form-styles-columns-reversed {
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 767px) {
  .crm-contribution-form-styles-two-column-mobile-form-on-top {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* Price Options as Buttons */
.crm-container.crm-public .crm-contribution-form-styles-style-options-as-buttons {
  .contribution_amount-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .price-set-row input[type=radio] {
    display: none;
  }
  .price-set-row input[type=radio] + label[for] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--crm-form-styles-button-background-color, inherit);
    color: var(--crm-form-styles-button-font-color, inherit);
    font-family: var(--crm-form-styles-button-font-family, inherit);
    font-size: var(--crm-form-styles-button-font-size, inherit);
  }

  .price-set-row input[type=radio]:checked + label[for] {
    background-color: var(--crm-form-styles-selected-option-background-color, inherit);
    color: var(--crm-form-styles-selected-option-font-color, inherit);
    font-family: var(--crm-form-styles-selected-option-font-family, inherit);
    font-size: var(--crm-form-styles-selected-option-font-size, inherit);
  }
}

.crm-contribution-form-styles-label-position-above {
  --crm-f-label-position: none;
  --crm-f-label-width: 100%;
  --crm-f-form-layout: block;
  --crm-f-label-align: left;
  .crm-container.crm-public .crm-section .label {
    display: block;
  }
  .content, .crm-section .content, .crm-section:has(> .label):not(.crm-public-form-item) {
    /* 6.9 compatibility */
    margin-left: 0 !important;
  }
}

.crm-container.crm-public .crm-contribution-main-form-block, .crm-container.crm-public .crm-contribution-confirm-form-block {
  --crm-f-input-font-size: var(--crm-form-styles-form-field-font-size, inherit);
  --crm-f-form-focus-bg: var(--crm-form-styles-active-form-field-highlight-color, inherit);

  label,
  .label:not(:has(label)) {
    font-family: var(--crm-form-styles-label-font-family, inherit);
    font-size: var(--crm-form-styles-label-font-size, inherit);
    color: var(--crm-form-styles-label-font-color, inherit);
  }

  input, select, .select2-container, textarea {
    font-family: var(--crm-form-styles-form-field-font-family, inherit);
    font-size: var(--crm-form-styles-form-field-font-size, inherit);
    color: var(--crm-form-styles-form-field-font-color, inherit);
    border-width: var(--crm-form-styles-form-field-border-width, 1px);
    border-color: var(--crm-form-styles-form-field-border-color, var(--crm-input-border-color));
    background-color: var(--crm-form-styles-form-field-background-color, inherit);
    border-style: solid;
  }

  .select2-container {
    /* 6.9 compatibility */
    width: auto !important;
  }

  input:focus, select:focus, .select2-container:focus-within, textarea:focus {
    font-family: var(--crm-form-styles-active-form-field-font-family, inherit);
    font-size: var(--crm-form-styles-active-form-field-font-size, inherit);
    color: var(--crm-form-styles-active-form-field-font-color, inherit);
    border-width: var(--crm-form-styles-active-form-field-border-width, inherit);
    border-color: var(--crm-form-styles-active-form-field-border-color, inherit);
    background-color: var(--crm-form-styles-active-form-field-background-color, inherit);
    border-style: solid;
  }

  .crm-button-type-next, .crm-form-submit.default {
    background-color: var(--crm-form-styles-next-step-button-background-color, inherit);
    font-family: var(--crm-form-styles-next-step-button-font-family, inherit);
    font-size: var(--crm-form-styles-next-step-button-font-size, inherit);
    color: var(--crm-form-styles-next-step-button-font-color, inherit);
  }

  .crm-button-type-back {
    background-color: var(--crm-form-styles-back-button-background-color, inherit);
    font-family: var(--crm-form-styles-back-button-font-family, inherit);
    font-size: var(--crm-form-styles-back-button-font-size, inherit);
    color: var(--crm-form-styles-back-button-font-color, inherit);
  }

  fieldset legend {
    font-family: var(--crm-form-styles-legend-font-family, inherit);
    font-size: var(--crm-form-styles-legend-font-size, inherit);
    color: var(--crm-form-styles-legend-font-color, inherit);
    border-color: var(--crm-form-styles-legend-border-color, inherit);
    border-bottom-width: var(--crm-form-styles-legend-border-width, inherit);
    border-bottom-style: var(--crm-form-styles-legend-border-style, inherit);
  }

  &.crm-contribution-form-styles-equal-input-widths {
    .four, .crm-public-form-item input, .select2-container, .crm-public-form-item select, .crm-public-form-item textarea, #billing-payment-block input {
      width: 350px !important;
    }
  }

  .crm-form-styles-recur-options-block {
    display: flex;
    justify-content: var(--crm-form-styles-frequency-button-spacing, center);
  }

  .crm-form-styles-recur-option-button {
    background-color: var(--crm-form-styles-frequency-button-background-color, inherit);
    font-family: var(--crm-form-styles-frequency-button-font-family, inherit);
    font-size: var(--crm-form-styles-frequency-button-font-size, inherit);
    color: var(--crm-form-styles-frequency-button-font-color, inherit);
    padding-top: var(--crm-form-styles-frequency-button-vertical-padding, inherit);
    padding-bottom: var(--crm-form-styles-frequency-button-vertical-padding, inherit);

    &:focus {
      z-index: 2; /* Fix border getting hidden */
    }

    &.selected {
      background-color: var(--crm-form-styles-selected-frequency-button-background-color, inherit);
      font-family: var(--crm-form-styles-selected-frequency-button-font-family, inherit);
      font-size: var(--crm-form-styles-selected-frequency-button-font-size, inherit);
      color: var(--crm-form-styles-selected-frequency-button-font-color, inherit);
    }
  }
}