.cf-feedback-page {
  background: #ffffff;
  color: #171923;
  font-family: inherit;
}

.cf-feedback-page *,
.cf-feedback-page *::before,
.cf-feedback-page *::after {
  box-sizing: border-box;
}

.cf-feedback-layout {
  display: grid;
  grid-template-columns: minmax(360px, 42%) minmax(0, 58%);
  align-items: stretch;
}

.cf-feedback-story {
  background: #dff4ff;
}

.cf-story-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 46px clamp(32px, 4.2vw, 78px) 26px;
}

.cf-story-hero {
  align-self: center;
  width: min(72%, 434px);
  height: auto;
  margin-bottom: 18px;
}

.cf-story-inner h2 {
  max-width: 520px;
  margin: 0 0 42px;
  color: #012e57;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
}

.cf-story-inner h2 span {
  color: #207bbe;
}

.cf-story-points {
  position: relative;
  display: grid;
  gap: 34px;
  margin-bottom: auto;
}

.cf-story-points::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 48px;
  bottom: 48px;
  border-left: 1px dashed #012e57;
}

.cf-story-point {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  color: #012e57;
}

.cf-story-point img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
}

.cf-story-point h3 {
  margin: 2px 0 10px;
  color: #012e57;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}

.cf-story-point p {
  max-width: 450px;
  margin: 0;
  color: #17324b;
  font-size: 20px;
  line-height: 1.28;
}

.cf-story-clinics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid rgba(1, 46, 87, 0.55);
  color: #102f4b;
  font-size: 18px;
}

.cf-story-clinics img {
  width: 89px;
  height: 26px;
  flex: 0 0 auto;
}

.cf-story-clinics strong {
  color: #207bbe;
  font-weight: 800;
}

.cf-feedback-form-area {
  padding: 54px clamp(34px, 5vw, 88px) 0;
  background: #ffffff;
}

.cf-feedback-header {
  max-width: 830px;
  margin: 0 auto 44px;
}

.cf-feedback-header h1 {
  margin: 0 0 18px;
  color: #000000;
  font-size: clamp(32px, 2.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.cf-feedback-header h1 span {
  color: #207bbe;
}

.cf-feedback-header p {
  margin: 0;
  color: #151515;
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.45;
}

.cf-form-stack {
  max-width: 830px;
  margin: 0 auto;
}

.cf-form-message {
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.cf-form-message-success {
  color: #0b5a35;
  background: #e8f7ef;
  border: 1px solid #bfe9d0;
}

.cf-form-message-error {
  color: #9d1734;
  background: #fff0f3;
  border: 1px solid #f1bdc8;
}

.cf-section-box {
  margin-bottom: 24px;
  padding: 30px 36px 34px;
  background: #f5f8fd;
  border-radius: 28px;
}

.cf-section-box h3 {
  margin: 0 0 30px;
  color: #207bbe;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.cf-section-box label {
  display: block;
  margin: 0 0 9px;
  color: #1f1f27;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.cf-section-box label span,
.cf-rating-row span span {
  color: #d84f6b;
}

.cf-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 34px;
}

.cf-field-full {
  grid-column: 1 / -1;
}

.cf-input-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 51px;
  background: #ffffff;
  border: 1px solid #9a9a9a;
  border-radius: 4px;
  overflow: hidden;
}

.cf-input-icon {
  display: inline-flex;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: #717b82;
  background: #ffffff;
}

.cf-input-icon::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.cf-input-icon-user::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4Zm0 2c-3.3 0-6 2-6 4.5V20h12v-1.5c0-2.5-2.7-4.5-6-4.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4Zm0 2c-3.3 0-6 2-6 4.5V20h12v-1.5c0-2.5-2.7-4.5-6-4.5Z'/%3E%3C/svg%3E");
}

.cf-input-icon-building::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 21V5.5L12 3l7 2.5V21h-5v-5h-4v5H5Zm3-11h2V8H8v2Zm0 4h2v-2H8v2Zm6-4h2V8h-2v2Zm0 4h2v-2h-2v2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 21V5.5L12 3l7 2.5V21h-5v-5h-4v5H5Zm3-11h2V8H8v2Zm0 4h2v-2H8v2Zm6-4h2V8h-2v2Zm0 4h2v-2h-2v2Z'/%3E%3C/svg%3E");
}

.cf-input-icon-people::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 12c2 0 3.5-1.6 3.5-3.5S11 5 9 5 5.5 6.6 5.5 8.5 7 12 9 12Zm6.5 1c1.7 0 3-1.3 3-3s-1.3-3-3-3c-.6 0-1.1.2-1.6.5.4.9.6 1.9.4 2.9-.1.8-.5 1.5-1 2 .6.4 1.3.6 2.2.6ZM9 14c-3 0-5.5 1.8-5.5 4v1h11v-1c0-2.2-2.5-4-5.5-4Zm6.8.5c.9.9 1.4 2.1 1.4 3.5v1h3.3v-1c0-1.7-2-3.2-4.7-3.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 12c2 0 3.5-1.6 3.5-3.5S11 5 9 5 5.5 6.6 5.5 8.5 7 12 9 12Zm6.5 1c1.7 0 3-1.3 3-3s-1.3-3-3-3c-.6 0-1.1.2-1.6.5.4.9.6 1.9.4 2.9-.1.8-.5 1.5-1 2 .6.4 1.3.6 2.2.6ZM9 14c-3 0-5.5 1.8-5.5 4v1h11v-1c0-2.2-2.5-4-5.5-4Zm6.8.5c.9.9 1.4 2.1 1.4 3.5v1h3.3v-1c0-1.7-2-3.2-4.7-3.5Z'/%3E%3C/svg%3E");
}

.cf-form-control {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 11px 14px 11px 0;
  color: #222222;
  background: #ffffff;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-size: 15px;
  font-family: inherit;
}

.cf-form-control::placeholder,
.cf-comments-box::placeholder {
  color: #777777;
}

.cf-form-control:focus,
.cf-comments-box:focus {
  border-color: #207bbe;
  box-shadow: 0 0 0 0.18rem rgba(32, 123, 190, 0.15);
}

.cf-field-invalid {
  border-color: #d84f6b;
}

.cf-input-group:has(.cf-field-invalid) {
  border-color: #d84f6b;
}

.cf-input-group-invalid {
  border-color: #d84f6b;
}

.cf-field-error {
  display: none;
  margin: 7px 0 0;
  color: #9d1734;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.cf-field-error-visible {
  display: block;
}

.cf-rating-box {
  padding-bottom: 24px;
}

.cf-rating-box h3 {
  margin-bottom: 6px;
}

.cf-small-text {
  margin: 0 0 22px;
  color: #000000;
  font-size: 14px;
  line-height: 1.35;
}

.cf-rating-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}

.cf-rating-row input[type='hidden'] {
  display: none;
}

.cf-rating-row:last-child {
  margin-bottom: 0;
}

.cf-rating-row > span {
  color: #23242a;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
}

.cf-stars {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #676d72;
  font-size: 25px;
  line-height: 1;
}

.cf-star {
  width: 25px;
  height: 25px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  line-height: 1;
  cursor: pointer;
}

.cf-star::before {
  content: '\2606';
  font-size: 25px;
}

.cf-star.cf-star-active {
  color: #207bbe;
}

.cf-star.cf-star-active::before {
  content: '\2605';
}

.cf-rating-error {
  display: none;
  margin: 16px 0 0;
  color: #9d1734;
  font-size: 14px;
  font-weight: 600;
}

.cf-rating-error-visible {
  display: block;
}

.cf-comments-box {
  display: block;
  width: 100%;
  min-height: 158px;
  padding: 17px 16px;
  color: #222222;
  background: #ffffff;
  border: 1px solid #9a9a9a;
  border-radius: 4px;
  outline: 0;
  resize: vertical;
  font-size: 15px;
  font-family: inherit;
}

.cf-submit-wrapper {
  margin-top: 22px;
  text-align: center;
}

.cf-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 49px;
  padding: 11px 32px;
  color: #ffffff;
  background: #1084c4;
  border: 0;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.cf-submit-btn:hover,
.cf-submit-btn:focus {
  color: #ffffff;
  background: #0b72ac;
}

.cf-submit-btn:disabled,
.cf-submit-btn-loading {
  cursor: not-allowed;
  opacity: 0.75;
}

@media (max-width: 1199px) {
  .cf-feedback-layout {
    grid-template-columns: minmax(300px, 40%) minmax(0, 60%);
  }

  .cf-story-inner {
    padding: 38px 28px 24px;
  }

  .cf-story-inner h2 {
    margin-bottom: 32px;
    font-size: clamp(28px, 3vw, 36px);
  }

  .cf-story-point {
    gap: 18px;
  }

  .cf-story-point h3 {
    font-size: 20px;
  }

  .cf-story-point p {
    font-size: 16px;
  }

  .cf-feedback-form-area {
    padding: 42px 32px 0;
  }

  .cf-section-box {
    padding: 26px 28px 30px;
  }
}

@media (max-width: 991px) {
  .cf-feedback-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cf-feedback-story,
  .cf-feedback-form-area {
    width: 100%;
  }

  .cf-story-inner {
    height: auto;
    padding: 34px 24px 28px;
  }

  .cf-story-hero {
    width: min(56%, 320px);
  }

  .cf-story-inner h2 {
    max-width: none;
    margin-bottom: 28px;
    font-size: clamp(30px, 5vw, 38px);
  }

  .cf-story-points {
    display: none;
  }

  .cf-story-clinics {
    display: none;
  }

  .cf-feedback-form-area {
    padding: 38px 22px 46px;
  }
}

@media (max-width: 767px) {
  .cf-field-grid {
    grid-template-columns: 1fr;
  }

  .cf-section-box {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .cf-feedback-form-area {
    width: calc(100% - 24px);
    margin: 0 12px;
    padding: 32px 16px 40px;
  }

  .cf-feedback-header {
    margin-bottom: 28px;
  }

  .cf-feedback-header h1 {
    font-size: 30px;
  }

  .cf-feedback-header p {
    font-size: 17px;
  }

  .cf-story-point {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
  }

  .cf-story-point h3 {
    font-size: 20px;
  }

  .cf-story-point p {
    font-size: 16px;
  }

  .cf-rating-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cf-stars {
    justify-content: flex-start;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .cf-story-inner {
    padding: 28px 16px 24px;
  }

  .cf-story-hero {
    width: min(78%, 270px);
  }

  .cf-story-inner h2 {
    font-size: 28px;
  }

  .cf-story-clinics {
    flex-wrap: wrap;
    font-size: 16px;
    text-align: center;
  }

  .cf-feedback-form-area {
    width: calc(100% - 20px);
    margin-inline: 10px;
    padding-inline: 12px;
  }

  .cf-section-box {
    padding: 22px 14px;
  }

  .cf-input-icon {
    flex-basis: 38px;
  }

  .cf-stars {
    gap: 12px;
  }
}