.request-main {
  padding:
    56px 0 90px;
}


.request-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, .6fr);

  gap: 42px;

  align-items: end;

  margin-bottom: 34px;
}


.request-eyebrow {
  margin-bottom: 12px;

  color: var(--blue);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.request-title {
  margin: 0;

  font-size:
    clamp(42px, 6vw, 70px);

  line-height: .96;

  letter-spacing: -.05em;
}


.request-lead {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


.request-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    280px;

  gap: 18px;

  align-items: start;
}


.request-form {
  display: grid;

  gap: 10px;
}


.form-section {
  padding: 22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;
}


.form-section-head {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 18px;
}


.form-section-number {
  flex: 0 0 auto;

  color: var(--blue);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  font-weight: 800;
}


.form-section-title {
  margin: 0;

  font-size: 17px;

  font-weight: 760;
}


.form-section-caption {
  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.45;
}


.field {
  display: grid;

  gap: 7px;
}


.field + .field {
  margin-top: 14px;
}


.field-label {
  color: var(--text);

  font-size: 11px;

  font-weight: 720;
}


.field-hint {
  color: var(--muted);

  font-size: 10px;
}


.input,
.select,
.textarea {
  width: 100%;

  border:
    1px solid #C7CDD2;

  border-radius:
    var(--radius);

  background:
    #fff;

  color:
    var(--text);

  font: inherit;

  font-size: 13px;
}


.input,
.select {
  min-height: 44px;

  padding:
    0 11px;
}


.textarea {
  min-height: 150px;

  resize: vertical;

  padding: 11px;

  line-height: 1.5;
}


.input:focus,
.select:focus,
.textarea:focus {
  outline: none;

  border-color:
    var(--blue);
}


/* FILES */

.file-groups {
  display: grid;

  gap: 8px;
}


.file-group {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  gap: 12px;

  align-items: center;

  min-height: 62px;

  padding: 11px 12px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #F9FAF9;
}


.file-group-title {
  font-size: 12px;

  font-weight: 730;
}


.file-group-caption {
  margin-top: 2px;

  color: var(--muted);

  font-size: 10px;
}


.file-input {
  display: none;
}


.file-button {
  min-height: 34px;

  padding:
    0 10px;

  border:
    1px solid #C7CDD2;

  border-radius:
    var(--radius);

  background:
    #fff;

  color:
    var(--blue);

  font-size: 10px;

  font-weight: 750;

  cursor: pointer;
}


.file-button:hover {
  border-color:
    var(--blue);
}


.file-selected {
  grid-column:
    1 / -1;

  display: none;

  padding-top: 8px;

  border-top:
    1px solid var(--border);

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.45;
}


.file-selected.has-files {
  display: block;
}


/* CONSENT */

.consent {
  display: flex;

  gap: 9px;

  align-items: flex-start;
}


.consent input {
  width: 16px;
  height: 16px;

  margin: 1px 0 0;

  accent-color:
    var(--blue);
}


.consent-text {
  color: var(--muted);

  font-size: 10px;

  line-height: 1.5;
}


.consent-text a {
  color: var(--blue);
}


/* SUBMIT */

.request-submit {
  display: flex;

  justify-content: flex-end;

  margin-top: 4px;
}


.request-submit .btn {
  min-height: 46px;

  padding:
    0 20px;
}


/* SIDEBAR */

.request-side {
  position: sticky;

  top: 92px;

  display: grid;

  gap: 10px;
}


.request-side-card {
  padding: 18px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;
}


.request-side-label {
  margin-bottom: 9px;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;
}


.request-side-title {
  font-size: 14px;

  font-weight: 750;

  line-height: 1.35;
}


.request-side-text {
  margin-top: 7px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.5;
}


.request-progress {
  display: grid;

  gap: 9px;
}


.request-progress-row {
  display: grid;

  grid-template-columns:
    24px 1fr;

  gap: 8px;

  align-items: center;

  color: var(--muted);

  font-size: 10px;
}


.request-progress-index {
  display: grid;

  place-items: center;

  width: 24px;
  height: 24px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;
}


/* MOBILE */

@media (max-width: 820px) {

  .request-head {
    grid-template-columns:
      1fr;

    gap: 18px;
  }


  .request-layout {
    grid-template-columns:
      1fr;
  }


  .request-side {
    position: static;

    order: -1;
  }


  .request-side-card:first-child {
    display: none;
  }

}


@media (max-width: 760px) {

  .request-main {
    padding:
      34px 0 32px;
  }


  .request-title {
    font-size:
      clamp(40px, 13vw, 58px);
  }


  .form-section {
    padding: 16px;
  }


  .file-group {
    grid-template-columns:
      1fr;
  }


  .file-button {
    width: 100%;
  }


  .request-submit .btn {
    width: 100%;
  }

}


/* =========================================
   REQUEST UI POLISH
   ========================================= */

.request-form {
  gap: 12px;
}


.form-section {
  position: relative;

  padding: 24px;

  transition:
    border-color .18s ease,
    background .18s ease;
}


.form-section:focus-within {
  border-color:
    #B8C2C8;
}


.form-section-head {
  justify-content: space-between;

  margin-bottom: 20px;
}


.form-section-head > div:last-child {
  flex: 1 1 auto;
}


.form-section-number {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  margin-top: -4px;

  border:
    1px solid #D8DDDF;

  border-radius:
    4px;

  background:
    #F9FAF9;

  color:
    #3155F5;
}


.form-section.is-complete
.form-section-number {
  border-color:
    #A9D1BD;

  background:
    #EEF8F2;

  color:
    #176C47;
}


.form-section-title {
  letter-spacing:
    -.015em;
}


.input,
.select,
.textarea {
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


.input:hover,
.select:hover,
.textarea:hover {
  border-color:
    #AEB8BF;
}


.input:focus,
.select:focus,
.textarea:focus {
  border-color:
    #3155F5;

  box-shadow:
    0 0 0 3px
    rgba(49,85,245,.08);
}


.textarea {
  min-height: 164px;
}


.field-error {
  display: none;

  margin-top: 5px;

  color:
    #C83D3D;

  font-size: 10px;

  line-height: 1.4;
}


.field.has-error
.field-error {
  display: block;
}


/* FILE GROUP */

.file-group {
  position: relative;

  grid-template-columns:
    minmax(0, 1fr) auto;

  min-height: 76px;

  padding: 14px;

  cursor: default;

  overflow: hidden;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.file-group:hover {
  border-color:
    #BCC3C8;

  background:
    #FCFDFC;
}


.file-group.is-dragover {
  border-color:
    #3155F5;

  background:
    #F3F5FF;
}


.file-group.has-files {
  border-color:
    #B8C5F9;

  background:
    #FAFBFF;
}


.file-group.has-error {
  border-color:
    #E3A6A6;

  background:
    #FFF8F8;
}


.file-group-main {
  min-width: 0;
}


.file-group-title-row {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;
}


.file-required {
  display: none;

  min-height: 21px;

  padding:
    0 6px;

  align-items: center;

  border:
    1px solid #D8DDDF;

  border-radius:
    4px;

  background:
    #fff;

  color:
    #687078;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.file-group.is-required
.file-required {
  display: inline-flex;
}


.file-group-count {
  display: none;

  align-items: center;

  min-height: 21px;

  padding:
    0 6px;

  border-radius:
    4px;

  background:
    #EEF2FF;

  color:
    #3155F5;

  font-size:
    9px;

  font-weight:
    750;
}


.file-group.has-files
.file-group-count {
  display: inline-flex;
}


.file-group-caption {
  margin-top: 4px;

  line-height: 1.45;
}


.file-button {
  align-self: center;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 116px;

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.file-button:hover {
  background:
    #F3F5FF;
}


.file-selected {
  grid-column:
    1 / -1;

  display: none;

  margin-top: 2px;

  padding-top: 10px;

  border-top:
    1px solid #D8DDDF;
}


.file-selected.has-files {
  display: grid;

  gap: 6px;
}


.file-row {
  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto
    30px;

  gap: 8px;

  align-items: center;

  min-height: 42px;

  padding:
    5px 6px;

  border-radius:
    4px;

  background:
    #fff;
}


.file-row-icon {
  display: grid;

  place-items: center;

  width: 28px;
  height: 28px;

  border:
    1px solid #D8DDDF;

  border-radius:
    4px;

  background:
    #F9FAF9;

  color:
    #3155F5;

  font-size: 11px;

  font-weight: 800;
}


.file-row-info {
  min-width: 0;
}


.file-row-name {
  overflow: hidden;

  color:
    #171A1C;

  font-size:
    11px;

  font-weight:
    700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.file-row-meta {
  margin-top: 2px;

  color:
    #687078;

  font-size: 9px;
}


.file-row-size {
  color:
    #687078;

  font-size:
    9px;

  white-space: nowrap;
}


.file-remove {
  display: grid;

  place-items: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border:
    0;

  border-radius:
    4px;

  background:
    transparent;

  color:
    #8A9298;

  font-size: 16px;

  line-height: 1;

  cursor: pointer;
}


.file-remove:hover {
  background:
    #F3F4F4;

  color:
    #C83D3D;
}


.file-drop-hint {
  display: none;

  grid-column:
    1 / -1;

  padding-top: 10px;

  border-top:
    1px dashed #B8C5F9;

  color:
    #3155F5;

  font-size:
    10px;

  text-align: center;
}


.file-group.is-dragover
.file-drop-hint {
  display: block;
}


.file-error {
  display: none;

  grid-column:
    1 / -1;

  padding-top: 7px;

  color:
    #C83D3D;

  font-size:
    10px;
}


.file-group.has-error
.file-error {
  display: block;
}


/* SIDEBAR POLISH */

.request-side {
  top: 88px;
}


.request-side-card {
  padding: 19px;
}


.request-progress-row {
  min-height: 30px;
}


.request-progress-row.is-active {
  color:
    #171A1C;

  font-weight:
    700;
}


.request-progress-row.is-active
.request-progress-index {
  border-color:
    #3155F5;

  background:
    #3155F5;

  color:
    #fff;
}


.request-progress-row.is-complete
.request-progress-index {
  border-color:
    #A9D1BD;

  background:
    #EEF8F2;

  color:
    #176C47;
}


/* SUBMIT */

.request-submit {
  position: sticky;

  bottom: 12px;

  z-index: 15;

  padding:
    10px 0 0;

  background:
    linear-gradient(
      to bottom,
      rgba(244,245,243,0),
      #F4F5F3 30%
    );
}


.request-submit .btn {
  min-width: 210px;
}


/* MOBILE */

@media (max-width: 760px) {

  .request-head {
    margin-bottom: 24px;
  }


  .form-section {
    padding: 17px;
  }


  .form-section-head {
    margin-bottom: 16px;
  }


  .file-group {
    grid-template-columns:
      minmax(0,1fr);

    min-height: 0;

    padding: 13px;
  }


  .file-button {
    width: 100%;

    min-height: 38px;

    margin-top: 4px;
  }


  .file-row {
    grid-template-columns:
      30px
      minmax(0,1fr)
      30px;
  }


  .file-row-size {
    display: none;
  }


  .request-submit {
    bottom:
      calc(
        74px +
        env(safe-area-inset-bottom)
      );

    padding-top:
      12px;
  }


  .request-submit .btn {
    min-width: 0;
  }

}

.request-progress-row.is-complete
.request-progress-index {
  font-size: 0;
}


.request-progress-row.is-complete
.request-progress-index::after {
  content: "✓";

  font-size: 10px;

  font-weight: 800;
}



/* =========================================
   REAL SUBMISSION / UPLOAD STATES
   ========================================= */

.request-global-status {
  display: none;

  padding: 13px 14px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;

  font-size: 11px;

  line-height: 1.5;
}


.request-global-status.is-visible {
  display: block;
}


.request-global-status.is-info {
  border-color:
    #B8C5F9;

  background:
    #F7F8FF;

  color:
    #2E4FA8;
}


.request-global-status.is-error {
  border-color:
    #E3AAAA;

  background:
    #FFF8F8;

  color:
    #A72F2F;
}


.request-global-status.is-success {
  border-color:
    #ACD2BE;

  background:
    #F2F9F5;

  color:
    #176C47;
}


.file-row {
  transition:
    border-color .16s ease,
    background .16s ease;
}


.file-row.is-uploading {
  background:
    #F7F8FF;
}


.file-row.is-uploaded {
  background:
    #F4FAF6;
}


.file-row.has-upload-error {
  background:
    #FFF8F8;
}


.file-row-meta.is-success {
  color:
    #238457;
}


.file-row-meta.is-error {
  color:
    #C83D3D;
}


.file-progress-track {
  display: none;

  width: 100%;

  height: 3px;

  margin-top: 5px;

  overflow: hidden;

  border-radius:
    3px;

  background:
    #E7EAEC;
}


.file-progress-track.is-visible {
  display: block;
}


.file-progress-bar {
  width: 0;
  height: 100%;

  background:
    #3155F5;

  transition:
    width .12s linear;
}


.file-row.is-uploaded
.file-progress-bar {
  background:
    #238457;
}


.request-form.is-locked
.input,
.request-form.is-locked
.select,
.request-form.is-locked
.textarea {
  background:
    #F7F8F7;

  color:
    #687078;
}


.request-form.is-locked
.file-button {
  opacity: .55;

  pointer-events: none;
}


.request-form.is-busy
#requestSubmitBtn {
  cursor: wait;

  opacity: .78;
}


/* SUCCESS */

.request-success {
  grid-column:
    1 / -1;

  max-width:
    820px;

  padding: 36px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;
}


.request-success-icon {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 22px;

  border:
    1px solid #A9D1BD;

  border-radius:
    4px;

  background:
    #EEF8F2;

  color:
    #176C47;

  font-size: 18px;

  font-weight: 800;
}


.request-success-kicker {
  margin-bottom: 8px;

  color:
    #238457;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.request-success-title {
  max-width: 620px;

  margin: 0;

  font-size:
    clamp(30px, 5vw, 48px);

  line-height: 1;

  letter-spacing:
    -.04em;
}


.request-success-text {
  max-width: 620px;

  margin: 16px 0 0;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.6;
}


.request-success-meta {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  max-width: 620px;

  margin-top: 26px;
}


.request-success-meta-item {
  padding: 14px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #F9FAF9;
}


.request-success-meta-label {
  margin-bottom: 5px;

  color:
    var(--muted);

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;
}


.request-success-meta-value {
  overflow: hidden;

  font-size: 13px;

  font-weight: 760;

  text-overflow: ellipsis;
}


.request-success-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 26px;
}


@media (max-width: 760px) {

  .request-success {
    padding: 22px;
  }


  .request-success-meta {
    grid-template-columns:
      1fr;
  }


  .request-success-actions {
    display: grid;

    grid-template-columns:
      1fr;
  }


  .request-success-actions .btn {
    width: 100%;
  }

}

/* === REQUEST FINAL RHYTHM START === */


/* -----------------------------------------
   SCALE
   ----------------------------------------- */

.request-main {
  --rq-1: 4px;
  --rq-2: 8px;
  --rq-3: 12px;
  --rq-4: 16px;
  --rq-5: 24px;
  --rq-6: 32px;
  --rq-7: 48px;
  --rq-8: 72px;
}


/* -----------------------------------------
   PAGE HEAD
   ----------------------------------------- */

.request-head {
  display: grid;

  grid-template-columns:
    minmax(0, 7fr)
    minmax(280px, 5fr);

  gap:
    var(--rq-7);

  align-items:
    end;

  padding:
    var(--rq-8) 0
    var(--rq-7);
}


.request-eyebrow {
  margin:
    0 0 var(--rq-4);
}


.request-title {
  max-width:
    760px;

  margin:
    0;

  font-size:
    clamp(46px, 5.4vw, 72px);

  line-height:
    .98;

  letter-spacing:
    -.05em;
}


.request-lead {
  max-width:
    430px;

  margin:
    0;

  font-size:
    13px;

  line-height:
    1.65;
}


/* -----------------------------------------
   MAIN LAYOUT
   ----------------------------------------- */

.request-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 8fr)
    minmax(280px, 4fr);

  gap:
    var(--rq-5);

  align-items:
    start;

  padding-bottom:
    var(--rq-8);
}


.request-form {
  min-width: 0;

  display: grid;

  gap:
    var(--rq-2);
}


/* -----------------------------------------
   FORM SECTION
   ----------------------------------------- */

.form-section {
  margin:
    0 !important;

  padding:
    var(--rq-5) !important;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;
}


.form-section-head {
  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr);

  gap:
    var(--rq-4);

  align-items:
    start;

  margin:
    0 0 var(--rq-5) !important;

  padding:
    0 !important;

  border:
    0 !important;
}


.form-section-number {
  width:
    32px;

  height:
    32px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  color:
    var(--blue);

  background:
    #F8F9F8;

  font-size:
    9px;
}


.form-section-title {
  margin:
    0;

  font-size:
    20px;

  line-height:
    1.15;
}


.form-section-caption {
  max-width:
    600px;

  margin-top:
    var(--rq-2);

  font-size:
    11px;

  line-height:
    1.55;
}


/* -----------------------------------------
   FIELDS
   ----------------------------------------- */

.field {
  margin:
    0;
}


.field + .field {
  margin-top:
    var(--rq-4);
}


.field-label {
  display:
    block;

  margin-bottom:
    var(--rq-2);
}


.input,
.select,
.textarea {
  width:
    100%;

  box-sizing:
    border-box;
}


.textarea {
  min-height:
    150px;

  resize:
    vertical;
}


.field-hint,
.field-error {
  margin-top:
    var(--rq-2);
}


/* -----------------------------------------
   FILES
   ----------------------------------------- */

.file-groups {
  display: grid;

  gap:
    var(--rq-2);
}


.file-group {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  column-gap:
    var(--rq-4);

  row-gap:
    var(--rq-3);

  align-items:
    center;

  padding:
    var(--rq-4) !important;

  border-radius:
    var(--radius);
}


.file-group-main {
  min-width:
    0;
}


.file-group-title-row {
  display: flex;

  flex-wrap: wrap;

  align-items:
    center;

  gap:
    var(--rq-2);
}


.file-group-title {
  margin:
    0;
}


.file-group-caption {
  margin-top:
    var(--rq-2);
}


.file-button {
  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 var(--rq-4);

  white-space:
    nowrap;
}


.file-selected,
.file-drop-hint,
.file-error {
  grid-column:
    1 / -1;
}


.file-selected {
  margin:
    0 !important;
}


.file-selected.has-files {
  margin-top:
    0 !important;
}


.file-drop-hint {
  margin:
    0;
}


.file-error {
  margin:
    0;
}


/* list of selected files */

.file-row {
  margin:
    0;

  padding:
    var(--rq-3);

  border-radius:
    var(--radius);
}


.file-row + .file-row {
  margin-top:
    var(--rq-2);
}


/* -----------------------------------------
   CONSENT
   ----------------------------------------- */

.consent {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    var(--rq-3);

  align-items:
    start;

  margin:
    0;
}


.consent input {
  margin-top:
    2px;
}


.consent-text {
  line-height:
    1.55;
}


/* -----------------------------------------
   SUBMIT
   ----------------------------------------- */

.request-submit {
  margin:
    0 !important;

  padding:
    var(--rq-5) !important;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;
}


.request-submit .btn {
  width:
    100%;

  min-height:
    46px;
}


/* -----------------------------------------
   GLOBAL STATUS
   ----------------------------------------- */

.request-global-status {
  margin:
    0 !important;

  padding:
    var(--rq-4) !important;

  border-radius:
    var(--radius);
}


/* -----------------------------------------
   SIDE
   ----------------------------------------- */

.request-side {
  position:
    sticky;

  top:
    88px;

  display:
    grid;

  gap:
    var(--rq-2);
}


.request-side-card {
  margin:
    0 !important;

  padding:
    var(--rq-5) !important;

  border-radius:
    var(--radius);
}


.request-side-label {
  margin-bottom:
    var(--rq-4);
}


.request-side-title {
  margin:
    0;
}


.request-side-text {
  margin-top:
    var(--rq-3);
}


.request-progress {
  display:
    grid;

  margin:
    0;
}


.request-progress-row {
  min-height:
    42px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr);

  gap:
    var(--rq-3);

  align-items:
    center;
}


/* -----------------------------------------
   SUCCESS
   ----------------------------------------- */

.request-success {
  max-width:
    820px;

  margin:
    0 auto;

  padding:
    var(--rq-7) !important;

  border-radius:
    var(--radius);
}


.request-success-icon {
  margin-bottom:
    var(--rq-5);
}


.request-success-kicker {
  margin-bottom:
    var(--rq-3);
}


.request-success-title {
  margin:
    0;

  font-size:
    clamp(34px, 4vw, 50px);

  line-height:
    1;
}


.request-success-text {
  max-width:
    620px;

  margin-top:
    var(--rq-4);
}


.request-success-meta {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    var(--rq-2);

  margin-top:
    var(--rq-6);
}


.request-success-meta-item {
  padding:
    var(--rq-4);
}


.request-success-actions {
  display: flex;

  flex-wrap: wrap;

  gap:
    var(--rq-2);

  margin-top:
    var(--rq-6);
}


/* -----------------------------------------
   TABLET
   ----------------------------------------- */

@media (max-width: 980px) {

  .request-head {
    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap:
      var(--rq-6);
  }


  .request-layout {
    grid-template-columns:
      minmax(0, 1fr)
      270px;

    gap:
      var(--rq-4);
  }


  .request-side-card {
    padding:
      var(--rq-4) !important;
  }

}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 760px) {

  .request-main {
    --rq-7: 32px;
    --rq-8: 48px;
  }


  .request-head {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      var(--rq-4);

    padding:
      var(--rq-7) 0
      var(--rq-6);
  }


  .request-title {
    font-size:
      clamp(39px, 12vw, 52px);
  }


  .request-lead {
    max-width:
      520px;
  }


  .request-layout {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      var(--rq-5);

    padding-bottom:
      var(--rq-8);
  }


  .request-form {
    gap:
      var(--rq-2);
  }


  .form-section {
    padding:
      var(--rq-4) !important;
  }


  .form-section-head {
    grid-template-columns:
      32px
      minmax(0, 1fr);

    gap:
      var(--rq-3);

    margin-bottom:
      var(--rq-5) !important;
  }


  .form-section-number {
    width:
      28px;

    height:
      28px;
  }


  .form-section-title {
    font-size:
      18px;
  }


  .file-group {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      var(--rq-3);

    padding:
      var(--rq-4) !important;
  }


  .file-button {
    width:
      100%;
  }


  .file-selected,
  .file-drop-hint,
  .file-error {
    grid-column:
      1;
  }


  .request-submit {
    padding:
      var(--rq-4) !important;
  }


  .request-side {
    position:
      static;

    top:
      auto;

    gap:
      var(--rq-2);
  }


  .request-side-card {
    padding:
      var(--rq-4) !important;
  }


  .request-success {
    padding:
      var(--rq-5) !important;
  }


  .request-success-meta {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .request-success-actions {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);
  }


  .request-success-actions .btn {
    width:
      100%;
  }

}


/* === REQUEST FINAL RHYTHM END === */


/* GLOBAL REDESIGN: REQUEST SERVICE OPTIONS */

.request-conditional[hidden],
.request-choice-summary[hidden],
#workModeControl[hidden] {
  display: none !important;
}

.request-choice-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  min-height: 60px;
  padding: 12px 14px;

  border: 1px solid #d8dddf;
  border-radius: 4px;

  background: #f4f5f3;
}

.request-choice-label {
  margin-bottom: 4px;

  color: #687078;

  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.request-choice-value {
  color: #171a1c;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.request-choice-change {
  flex: 0 0 auto;

  min-height: 36px;
  padding: 7px 10px;

  border: 1px solid #d8dddf;
  border-radius: 4px;

  background: #ffffff;
  color: #3155f5;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background-color .18s ease;
}

.request-choice-change:hover {
  border-color: #3155f5;
  background: #f7f8ff;
}

.request-choice-change:focus-visible {
  outline: 2px solid #3155f5;
  outline-offset: 2px;
}

.field-optional {
  color: #687078;
  font-size: .9em;
  font-weight: 500;
}

.file-abbr {
  font-family: "IBM Plex Mono", monospace;
  font-size: .9em;
  font-weight: 700;
  color: #687078;
}

#appointmentField .field-hint,
#requestSecondaryEmail + .field-hint {
  margin-top: 8px;
}

/*
 * datetime-local визуально приводим
 * к остальным input формы.
 */
#requestedAppointmentAt {
  width: 100%;
  min-width: 0;
}

/*
 * Появление условных полей не должно
 * ломать вертикальный ритм секции.
 */
#workModeField,
#appointmentField {
  margin-top: 16px;
}

@media (max-width: 620px) {
  .request-choice-summary {
    align-items: flex-start;
    gap: 12px;
  }

  .request-choice-change {
    min-height: 34px;
    padding: 6px 8px;
  }

  #workModeField,
  #appointmentField {
    margin-top: 12px;
  }
}