.callback-form_section {
  background: rgba(var(--bg-color-26));

  .callback-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(var(--bg-color-1));
    border-radius: var(--border-radius-1) 0;
    overflow: hidden;
    box-shadow: 0px 20px 50px 0px #1a2e4a26;

    .callback-info {
      background: linear-gradient(
        198.19deg,
        rgba(var(--bg-color-6)) 34.84%,
        rgba(var(--bg-color-13)) 135.81%
      );
      color: rgba(var(--text-color-1));
      padding: 64px 54px;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        bottom: -102px;
        right: 14px;
        pointer-events: none;
        background: rgba(var(--bg-color-1), 6%);
      }

      .eyebrow {
        font-size: var(--font-28);
        letter-spacing: var(--letter-spacing-23);
        font-weight: 600;
        text-transform: uppercase;
        color: rgba(var(--text-color-1), 78%);
        margin-bottom: 15px;
        display: inline-block;
      }

      .form-title {
        font-family: var(--font-source-serif-4);
        font-size: var(--font-9-2);
        line-height: 1.2;
        margin-bottom: 15px;
        font-weight: 700;
        color: rgba(var(--text-color-1));
      }

      .form-description {
        font-size: var(--font-23);
        line-height: 1.7;
        color: rgba(var(--text-color-1), 85%);
        margin-bottom: 30px;
        max-width: 420px;
        font-weight: 400;
      }

      .feature-list {
        list-style: none;
        position: relative;
        z-index: 1;

        li {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          font-size: var(--font-25);
          color: rgba(var(--text-color-1), 92%);
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          svg {
            flex-shrink: 0;
            margin-top: 2px;
          }
        }
      }
    }

    .callback-form {
      padding: 64px 45px;

      .callback-form_title {
        font-family: var(--font-source-serif-4);
        font-size: var(--font-13);
        line-height: 1.2;
        margin-bottom: 12px;
        color: rgba(var(--text-color-5));
      }

      .callback-form_description {
        font-size: var(--font-26);
        color: rgba(var(--text-color-42));
        line-height: 24px;

        margin-bottom: 24px;
      }

      .form-row {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;
      }

      .form-group {
        flex: 1;
        min-width: 0;

        label {
          display: block;
          font-size: var(--font-26);
          font-weight: 700;
          color: rgba(var(--text-color-5));
          margin-bottom: 7px;

          .req {
            font-weight: 500;
            color: rgba(var(--text-color-42));
            font-size: var(--font-25);
          }
        }

        .form-control {
          width: 100%;
          padding: 16px 14px;
          font-size: var(--font-23);
          font-family: var(--font-inter);
          border: 1px solid rgba(var(--border-color-24));
          border-radius: var(--border-radius-14);
          background: rgba(var(--bg-color-1));
          color: rgba(var(--text-color-4));
          transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;

          &::placeholder {
            color: rgba(var(--text-color-19));
          }

          &:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--bg-color-13), 0.15);
          }

          &.textarea-control {
            resize: vertical;
            min-height: 92px;
          }
        }
      }

      .form-option-label {
        display: block;
        font-size: var(--font-25);
        font-weight: 700;
        color: rgba(var(--text-color-5));
        margin-bottom: 7px;
      }

      .pill-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;

        .pill-option input[type="radio"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }

        .pill-option label {
          display: inline-block;
          padding: 9px 15px;
          border-radius: var(--border-radius-2);
          border: 1px solid rgba(var(--border-color-43));
          font-size: var(--font-26);
          font-weight: 500;
          color: rgba(var(--text-color-6));
          cursor: pointer;
          transition: all 0.2s ease;
          user-select: none;
        }

        .pill-option input[type="radio"]:checked + label {
          background: rgba(var(--bg-color-8));
          border-color: rgba(var(--border-color-8));
          color: rgba(var(--text-color-1));
        }

        .pill-option label:hover {
          border-color: rgba(var(--border-color-13));
        }
      }

      .help-text {
        font-size: var(--font-26);
        line-height: 1.3;
        color: rgba(var(--text-color-42));
      }

      .checkbox-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 22px 0 26px;

        input[type="checkbox"] {
          appearance: none;
          -webkit-appearance: none;
          margin-top: 3px;
          width: 18px;
          height: 18px;
          flex-shrink: 0;
          border: 1px solid rgba(var(--border-color-43));
          border-radius: 4px;
          background: rgba(var(--bg-color-1));
          cursor: pointer;
          position: relative;
          transition:
            background-color 0.15s ease,
            border-color 0.15s ease;
        }

        input[type="checkbox"]:checked {
          background: rgba(var(--bg-color-13));
          border-color: rgba(var(--border-color-13));
        }

        input[type="checkbox"]:checked::after {
          content: "";
          position: absolute;
          left: 5px;
          top: 1px;
          width: 4px;
          height: 8px;
          border: solid rgba(var(--text-color-1));
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }

        label {
          font-size: var(--font-25);
          color: rgba(var(--text-color-9));
          line-height: 1.6;
          font-weight: 400;
        }

        a {
          color: rgba(var(--text-color-13));
          text-decoration: underline;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .callback-wrapper {
      .callback-info {
        padding: 40px 25px;
      }

      .callback-form {
        padding: 50px 40px;
      }
    }
  }

  @media (max-width: 991px) {
    .callback-wrapper {
      grid-template-columns: 1fr;
      border-radius: var(--border-radius-8);

      .callback-info {
        padding: 40px 25px;

        &::before {
          width: 220px;
          height: 220px;
        }
      }

      .callback-form {
        padding: 40px 25px;
      }
    }
  }

  @media (max-width: 767px) {
    .callback-wrapper {
      .callback-form {
        .form-row {
          flex-direction: column;
          gap: 0;
          margin-bottom: 0;
        }

        .form-control {
          margin-bottom: 13px;
        }
      }
    }
  }

  @media (max-width: 560px) {
    .callback-wrapper {
      .callback-form {
        .pill-options {
          .pill-option {
            label {
              padding: 8px 14px;
              font-size: var(--font-26);
            }
          }
        }
      }
    }
  }
  /* Form validation styles */
.form-control.error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.form-control.valid {
    border-color: #198754;
    background-color: #f8fff8;
}

.form-error-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
}

.is-invalid {
    border-color: #dc3545 !important;
}


/* Hide default validation error messages */
label.error {
    display: none !important;
}

/* Toast notification styling */
.bower-form__notice {
    border: 1px solid transparent;
}

.bower-form__notice:empty {
    display: none;
}
}