.formbtn {
    color: #ffffff;
    background-color: var(--action-primary-default);
}

.FormOverView {
    height: 96%;
    min-height: 96%;
    max-height: 96%;
}

.padding-3 {
    padding: 3% !important
}

::ng-deep gb-radiobutton div[style*="margin-bottom"] {
    margin-bottom: 0 !important;
}

.save-btn {
    background: var(--action-primary-default) !important;
    color: #FFFFFF;
    background: #FFFFFF;
    width: 80px;
    height: 40px;
    gap: 2px;
    border-radius: 8px;
    border-width: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-footer {
    display: flex;
    align-items: anchor-center;
    justify-content: end;
}
/* TABLET (max-width: 1024px) */
@media (max-width: 1024px) {
  :host, form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .FormOverView {
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh !important;
    min-height: 90vh !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep {
    /* ── Radio button: force ExpandedView flex container to wrap ── */
    gb-radiobutton > div[style*="display: flex"] {
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    /* Reset the fixed margin that pushes radio buttons off-screen */
    gb-radiobutton > div[style*="display: flex"] > div[style*="margin-right"] {
      margin-right: 0 !important;
      flex: 1 1 100% !important;
    }

    /* Ensure mat-form-field containing radio buttons is visible */
    gb-radiobutton mat-form-field,
    gb-radiobutton .mat-mdc-form-field {
      min-width: unset !important;
      width: 100% !important;
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      overflow: visible !important;
    }

    gb-radiobutton mat-radio-group,
    gb-radiobutton .mat-mdc-radio-group,
    gb-radiobutton [role="radiogroup"] {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 16px !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-radiobutton mat-radio-button,
    gb-radiobutton .mat-mdc-radio-button,
    gb-radiobutton [role="radio"] {
      display: inline-flex !important;
      align-items: center !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-input {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  }
}

/* MOBILE (max-width: 767px) */
@media (max-width: 767px) {
  /* Prevent overall horizontal scroll */
  :host, form {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .FormOverView {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    min-height: 80vh !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-bottom: 20px !important;
  }

  .padding-3 {
    padding: 15px !important;
  }

  .formbtn, .save-btn {
    max-width: 120px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .save-btn {
    width: 80px !important;
  }

  :host ::ng-deep {
    gb-radiobutton {
      display: block !important;
      width: 100% !important;
      margin-bottom: 16px !important;
      min-height: 50px !important;
    }

    /* ── FIX: ExpandedView flex container must wrap on mobile ──
       The gb-radiobutton template uses:
         <div style="display: flex; margin-bottom: 18px;">
           <div style="margin-right: 40px;">  ← label/description
           <mat-form-field [style.min-width.px]="240">  ← radio buttons
       On mobile the 40px margin + 240px min-width exceeds the viewport,
       pushing the mat-form-field off-screen. Force wrapping & reset widths. */
    gb-radiobutton > div[style*="display: flex"] {
      flex-wrap: wrap !important;
      gap: 4px !important;
    }

    gb-radiobutton > div[style*="display: flex"] > div[style*="margin-right"] {
      margin-right: 0 !important;
      flex: 1 1 100% !important;
      max-width: 100% !important;
    }

    /* Force mat-form-field to fit within the viewport */
    gb-radiobutton mat-form-field,
    gb-radiobutton .mat-mdc-form-field,
    gb-radiobutton .mdc-form-field {
      min-width: unset !important;
      width: 100% !important;
      max-width: 100% !important;
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      overflow: visible !important;
    }

    gb-radiobutton .Radio_Form_Field {
      min-width: unset !important;
      width: 100% !important;
    }

    gb-radiobutton mat-radio-group,
    gb-radiobutton .mat-mdc-radio-group,
    gb-radiobutton [role="radiogroup"] {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 16px !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    gb-radiobutton mat-radio-button,
    gb-radiobutton .mat-mdc-radio-button,
    gb-radiobutton [role="radio"] {
      display: inline-flex !important;
      align-items: center !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: auto !important;
      flex: 0 0 auto !important;
    }

    /* Circle ring + inner dot + label must always be visible */
    gb-radiobutton .mdc-radio__background,
    gb-radiobutton .mdc-radio__outer-circle,
    gb-radiobutton .mdc-radio__inner-circle,
    gb-radiobutton .mat-radio-outer-circle,
    gb-radiobutton .mat-radio-inner-circle,
    gb-radiobutton .mat-radio-label-content,
    gb-radiobutton .mat-internal-form-field > label {
      visibility: visible !important;
      opacity: 1 !important;
    }

    gb-input {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      margin-bottom: 16px !important;
    }

    gb-input * {
      flex-wrap: wrap !important;
      box-sizing: border-box !important;
    }

    gb-input div, gb-input form {
      max-width: 100% !important;
    }

    gb-input label,
    gb-input .label-class,
    gb-input .title,
    gb-input .label-title {
      width: 100% !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
      text-align: left !important;
      display: block !important;
      margin-bottom: 8px !important;
      white-space: normal !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    gb-input input, gb-input textarea, gb-input select {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  }
}