/* Hapus Infotech - Referral Form / Drupal 10 Webform */
.referral-form-section {
  position: relative;
  overflow: hidden;
  padding: 45px 0 35px !important;
  background: radial-gradient(circle at 8% 78%, rgba(13, 110, 253, .09), transparent 30%), radial-gradient(circle at 96% 10%, rgba(255, 122, 0, .06), transparent 25%), linear-gradient(180deg, #fff 0%, #f7fbff 100%)
}

.referral-form-section,
.referral-form-section * {
  box-sizing: border-box
}

.referral-form-layout {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 24px
}

.referral-form-left-col,
.referral-form-right-col {
  min-width: 0
}

@media(min-width:1200px) {
  .referral-form-left-col {
    flex: 0 0 auto;
    width: 38%
  }

  .referral-form-right-col {
    flex: 0 0 auto;
    width: 62%
  }
}

.referral-form-intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0
}

.referral-form-intro-content {
  position: relative;
  z-index: 2
}

.referral-form-kicker {
  color: #071333;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em
}

.referral-form-kicker-line {
  width: 34px;
  height: 3px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #ff6a00
}

.referral-form-title {
  color: #071333;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.04em
}

.referral-form-title span {
  display: block;
  color: #ff6200
}

.referral-form-description {
  max-width: 530px;
  color: #34405c;
  font-size: 18px;
  line-height: 1.5
}

.referral-form-description p {
  margin: 0
}

.referral-form-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.referral-form-benefit {
  min-width: 0
}

.referral-form-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 21px
}

.referral-form-benefit-icon.orange {
  color: #ff6200;
  background: #fff0e4
}

.referral-form-benefit-icon.blue {
  color: #0d6efd;
  background: #e6f2ff
}

.referral-form-benefit-icon.teal {
  color: #00baa5;
  background: #e1faf5
}

.referral-form-benefit h3 {
  margin: 0 0 2px;
  color: #071333;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3
}

.referral-form-benefit p {
  margin: 0;
  color: #54617c;
  font-size: 13px;
  line-height: 1.35
}

.referral-form-illustration {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  padding-top: 20px
}

.referral-form-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center
}

/* Eliminate the field display wrapper title and default spacing. */
.referral-form-right-col>.field--name-field-referral-form>.field__label {
  display: none
}

.referral-form-right-col>.field--name-field-referral-form,
.referral-form-right-col>.field--name-field-referral-form>.field__item {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0
}

/* Real Drupal Webform is the form element, no .referral-main-form wrapper. */
.referral-form-right-col form.webform-submission-referral-form-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
  margin: 0
}

.referral-form-right-col .referral-form-card {
  min-width: 0;
  padding: 18px 20px;
  margin: 0;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #e2ecf9;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(17, 40, 80, .06)
}

.referral-form-card-head>div:last-child {
  min-width: 0
}

.referral-form-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 21px
}

.referral-form-card-icon.blue {
  color: #0d6efd;
  background: #e6f2ff
}

.referral-form-card-icon.purple {
  color: #7447ed;
  background: #f0eaff
}

.referral-form-card-icon.orange {
  color: #ff6200;
  background: #fff0e4
}

.referral-form-card-head h3 {
  margin: 0 0 3px;
  color: #071333;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25
}

.referral-form-card-head p {
  margin: 0;
  color: #54617c;
  font-size: 12px;
  line-height: 1.35
}

/* The Drupal wrappers are harmless: keep Bootstrap's row/col flex structure. */
.referral-form-right-col .referral-form-card .row.g-3 {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 10px
}

.referral-form-right-col .referral-form-card .row.g-2 {
  --bs-gutter-x: 10px;
  --bs-gutter-y: 7px
}

.referral-form-right-col .referral-form-card .row>[class*="col-"] {
  min-width: 0
}

.referral-form-right-col .referral-form-card .form-item {
  margin-bottom: 0
}

.referral-form-right-col .referral-form-card .js-webform-type-webform-markup {
  margin: 0;
  padding: 0
}

/* Labels are generated as plain labels by Drupal's Bootstrap5 templates. */
.referral-form-right-col .referral-form-card .form-item:not(.form-check)>label:not(.visually-hidden),
.referral-form-right-col .referral-form-card .referral-proof-label,
.referral-form-right-col .referral-form-card .referral-form-fieldset legend {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  color: #071333;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4
}

.referral-form-right-col .referral-form-card .form-required::after,
.referral-form-right-col .referral-form-card .js-form-required::after {
  content: ' *';
  display: inline;
  color: #ef4444;
  font-size: 12px;
  font-weight: 800;
  background: none;
  width: auto;
  height: auto;
  vertical-align: baseline
}

.referral-form-right-col .referral-form-card .form-control:not([type="checkbox"]):not([type="radio"]),
.referral-form-right-col .referral-form-card .form-select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  color: #071333;
  background-color: #fff;
  border: 1px solid #d7e2f0;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: none
}

.referral-form-right-col .referral-form-card .form-control::placeholder {
  color: #98a5bd;
  opacity: 1
}

.referral-form-right-col .referral-form-card .form-control:focus,
.referral-form-right-col .referral-form-card .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .1)
}

.referral-form-right-col .referral-form-card textarea.form-control {
  min-height: 75px;
  resize: vertical
}

.referral-form-right-col .referral-form-card .form-textarea-wrapper {
  width: 100%
}

/* Fieldset/legend styles from Bootstrap5 can otherwise add margins. */
.referral-form-right-col .referral-form-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0
}

.referral-form-right-col .referral-form-fieldset legend {
  float: none;
  width: auto;
  max-width: 100%;
  margin-bottom: 8px
}

.referral-form-right-col .referral-form-fieldset .fieldset-wrapper {
  min-width: 0
}

/* Convert Webform one-column checkbox output to the original 4-column layout. */
.referral-form-right-col #requirementTypeGroup .form-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 7px
}

.referral-form-right-col .referral-form-card .form-check {
  min-width: 0;
  margin: 0;
  padding-left: 1.5em
}

.referral-form-right-col .referral-form-card .form-check-input {
  float: left;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  margin-left: -1.5em;
  border: 1px solid #b9c9df;
  cursor: pointer
}

.referral-form-right-col .referral-form-card .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd
}

.referral-form-right-col .referral-form-card .form-check-label {
  display: inline;
  margin: 0;
  color: #34405c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer
}

/* Drupal prints vertical radio lists; original design requires horizontal. */
.referral-form-right-col .referral-form-fieldset .form-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px
}

.referral-form-right-col .referral-form-fieldset .form-radios>.form-check {
  flex: 0 0 auto
}

.referral-form-right-col .referral-form-fieldset .fieldset-legend {
  font-weight: 700
}

.referral-form-right-col .referral-form-card .description,
.referral-form-right-col .referral-form-card .webform-element-description {
  color: #667694;
  font-size: 10px;
  line-height: 1.4
}

.referral-form-right-col .referral-form-card .form-item--error-message {
  color: #dc3545;
  font-size: 12px
}

/* Drupal managed-file uploader contains extra layers and a real file control. */
.referral-form-right-col .referral-form-upload {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 110px;
  padding: 10px;
  background: #f8fbff;
  border: 1.5px dashed #bdd2ee;
  border-radius: 10px;
  text-align: center
}

.referral-form-right-col .referral-form-upload .form-item-proof-upload-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px
}

.referral-form-right-col .referral-form-upload .form-item-proof-upload-intro i {
  color: #0d6efd;
  font-size: 20px
}

.referral-form-right-col .referral-form-upload .form-item-proof-upload-intro span {
  color: #075be8;
  font-size: 12px;
  font-weight: 800
}

.referral-form-right-col .referral-form-upload .form-item-proof-upload-intro small {
  color: #667694;
  font-size: 10px
}

.referral-form-right-col .referral-form-upload #ajax-wrapper {
  width: 100%;
  min-width: 0
}

.referral-form-right-col .referral-form-upload .form-managed-file {
  display: block;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.referral-form-right-col .referral-form-upload input[type=file] {
  display: block;
  width: 100%;
  min-height: 0 !important;
  margin: 4px 0 0;
  padding: 5px !important;
  background: #fff;
  font-size: 11px
}

.referral-form-right-col .referral-form-upload input[type=file]::file-selector-button {
  border: 0;
  border-right: 1px solid #d7e2f0;
  background: #edf4ff;
  color: #075be8;
  padding: 6px 10px;
  margin: -5px 10px -5px -5px;
  font-size: 11px;
  font-weight: 700
}

.referral-form-right-col .referral-form-upload .description {
  margin-top: 5px
}

/* Agreement and the Webform submit action live in separate Drupal wrappers. */
.referral-form-right-col .referral-form-consent {
  padding: 10px 12px;
  background: #f4f9ff;
  border: 1px solid #e1ecfa;
  border-radius: 8px
}

.referral-form-right-col .referral-form-consent .form-check-label {
  font-size: 11px
}

.referral-form-right-col .referral-form-submit {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none
}

.referral-form-right-col input.referral-form-submit-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 9px 24px;
  border: 0;
  border-radius: 9px;
  background: #ff6200;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
  transition: background .2s ease, transform .2s ease
}

.referral-form-right-col input.referral-form-submit-btn:hover,
.referral-form-right-col input.referral-form-submit-btn:focus {
  background: #e45700;
  color: #fff
}

.referral-form-right-col input.referral-form-submit-btn:focus-visible {
  outline: 3px solid rgba(13, 110, 253, .35);
  outline-offset: 2px
}

.referral-form-right-col input.referral-form-submit-btn:active {
  transform: translateY(1px)
}

/* Confirmation style, used only if confirmation markup exists. */
.referral-form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 10px 16px;
  background: linear-gradient(110deg, #dffbf1, #e8faf5);
  border: 1px solid #c7f4e5;
  border-radius: 10px
}

.referral-form-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #00bf84;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 191, 132, .18)
}

.referral-form-success-content {
  flex: 1;
  min-width: 0
}

.referral-form-success-content h4 {
  margin: 0 0 3px;
  color: #071333;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3
}

.referral-form-success-content p {
  margin: 0;
  color: #486477;
  font-size: 12px;
  line-height: 1.4
}

@media(max-width:1399.98px) {
  .referral-form-kicker {
    font-size: 14px
  }

  .referral-form-title {
    font-size: 32px
  }

  .referral-form-description {
    font-size: 15px
  }

  .referral-form-benefit h3 {
    font-size: 14px
  }

  .referral-form-benefit p {
    font-size: 12px
  }

  .referral-form-success {
    padding: 9px 12px
  }

  .referral-form-success-icon {
    width: 34px;
    height: 34px;
    font-size: 16px
  }

  .referral-form-success-content h4 {
    font-size: 12px
  }

  .referral-form-success-content p {
    font-size: 11px
  }
}

@media(max-width:1199.98px) {
  .referral-form-layout {
    --bs-gutter-x: 20px
  }

  .referral-form-right-col .referral-form-card {
    padding: 18px
  }

  .referral-form-illustration {
    margin-top: 30px
  }

  .referral-form-right-col #requirementTypeGroup .form-checkboxes {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .referral-form-section {
    padding: 45px 0 !important
  }

  .referral-form-intro {
    height: auto !important;
    max-width: 760px;
    margin: 0 auto;
    text-align: center
  }

  .referral-form-kicker {
    justify-content: center
  }

  .referral-form-description {
    margin-left: auto;
    margin-right: auto
  }

  .referral-form-benefits {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px
  }

  .referral-form-benefit {
    text-align: left
  }

  .referral-form-illustration {
    max-width: 460px;
    margin: 25px auto 0;
    padding-top: 0
  }
}

@media(max-width:767.98px) {
  .referral-form-kicker {
    font-size: 12px
  }

  .referral-form-title {
    font-size: 22px;
    line-height: 1.25
  }

  .referral-form-description {
    font-size: 16px
  }

  .referral-form-right-col .referral-form-card {
    padding: 20px
  }

  .referral-form-card-head h3 {
    font-size: 18px
  }

  .referral-form-right-col .referral-form-card .form-item:not(.form-check)>label:not(.visually-hidden),
  .referral-form-right-col .referral-form-card .referral-proof-label,
  .referral-form-right-col .referral-form-card .referral-form-fieldset legend,
  .referral-form-right-col .referral-form-card .form-check-label {
    font-size: 14px
  }

  .referral-form-right-col .referral-form-card .form-control:not([type=checkbox]):not([type=radio]),
  .referral-form-right-col .referral-form-card .form-select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px
  }

  .referral-form-right-col .referral-form-card textarea.form-control {
    min-height: 90px
  }

  .referral-form-right-col input.referral-form-submit-btn {
    min-height: 48px;
    font-size: 14px
  }

  .referral-form-success {
    width: 100%;
    min-height: 60px;
    padding: 12px
  }

  .referral-form-success-content h4 {
    font-size: 13px
  }

  .referral-form-success-content p {
    font-size: 12px
  }
}

@media(max-width:575.98px) {
  .referral-form-section {
    padding: 35px 0 !important
  }

  .referral-form-benefits {
    flex-direction: column;
    align-items: flex-start;
    max-width: 310px;
    margin: 0 auto;
    gap: 16px
  }

  .referral-form-illustration {
    max-width: 100%
  }

  .referral-form-right-col .referral-form-card {
    padding: 18px 15px
  }

  .referral-form-card-head h3 {
    font-size: 17px
  }

  .referral-form-card-head p {
    font-size: 12px
  }

  .referral-form-right-col #requirementTypeGroup .form-checkboxes {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .referral-form-right-col .referral-form-submit {
    flex-direction: column;
    align-items: stretch
  }

  .referral-form-right-col input.referral-form-submit-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal
  }
}

.webform-submission-add-form.webform-submission-referral-form-form .alert.alert-error.alert-danger {
  display: none;
}

/* Referral form - File remove button */
.referral-form-section input[name="referral_proof_remove_button"] {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  margin: 0 0 0 10px !important;

  background-color: #fff1f0 !important;

  /* Font Awesome Trash Icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23e53935' d='M135.2 17.7C140.6 7.1 151.5 0 163.4 0h121.2c11.9 0 22.8 7.1 28.2 17.7L328 48h88c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 112 0 97.7 0 80s14.3-32 32-32h88l15.2-30.3zM53.2 467L32 144h384l-21.2 323c-1.7 25.3-22.7 45-48.1 45H101.3c-25.4 0-46.4-19.7-48.1-45z'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 17px !important;

  border: 1px solid #ffd2ce !important;
  border-radius: 8px !important;

  font-size: 0 !important;
  color: transparent !important;

  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover effect */
.referral-form-section input[name="referral_proof_remove_button"]:hover {
  background-color: #ffe2df !important;
  border-color: #e53935 !important;
  transform: scale(1.05);
}

/* Keyboard focus */
.referral-form-section input[name="referral_proof_remove_button"]:focus-visible {
  outline: 2px solid #e53935;
  outline-offset: 2px;
}