/* =========================================================
   REQUEST ACCESS
========================================================= */

.request-access {
  background:
    var(--surface-primary);
}


/* =========================================================
   HERO
========================================================= */

.request-hero {
  min-height:
    100vh;

  padding:
    160px
    var(--section-padding-x)
    var(--space-6xl);

  display:
    flex;

  align-items:
    flex-start;
}


/* =========================================================
   GRID
========================================================= */

.request-inner {
  width:
    100%;

  max-width:
    var(--container-wide);

  margin:
    0 auto;

  display:
    grid;

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

  gap:
    var(--space-6xl);

  align-items:
    start;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.request-copy {
  max-width:
    720px;
}

.request-copy h1 {
  max-width:
    11ch;

  margin-bottom:
    var(--space-xl);
}

.request-copy > p {
  max-width:
    520px;
}


/* =========================================================
   NOTE
========================================================= */

.request-note {
  margin-top:
    var(--space-xl);

  color:
    var(--text-muted);

  font-size:
    var(--text-lg);

  letter-spacing:
    var(--tracking-normal);
}


/* =========================================================
   SELECTED FLIGHT CARD
========================================================= */

#selected-flight-card {
  display:
    none;

  width:
    100%;

  margin-top:
    var(--space-3xl);

  padding:
    32px;

  border-radius:
    28px;

  background:
    linear-gradient(
      135deg,
      rgba(226, 180, 0, .10),
      rgba(255, 255, 255, .95)
    );

  border:
    1px solid rgba(226, 180, 0, .35);

  box-shadow:
    0 20px 50px rgba(15, 17, 58, .08);

  box-sizing:
    border-box;
}

#selected-flight-card::before {
  content:
    "";

  display:
    block;

  width:
    64px;

  height:
    3px;

  margin-bottom:
    18px;

  border-radius:
    999px;

  background:
    var(--color-gold);
}

#selected-flight-card .eyebrow {
  margin:
    0;

  color:
    var(--color-gold);
}

#selected-route {
  margin-top:
    var(--space-md);

  margin-bottom:
    8px;

  color:
    var(--text-primary);

  font-weight:
    600;
}

#selected-aircraft,
#selected-date {
  margin:
    0;

  color:
    var(--text-muted);
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.request-sidebar {
  display:
    grid;

  gap:
    var(--space-2xl);

  align-content:
    start;
}


/* =========================================================
   FORM
========================================================= */

.request-form {
  width:
    100%;

  padding:
    var(--space-2xl);

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

  background:
    var(--glass-surface-light);

  border:
    var(--border-dark);

  box-shadow:
    var(--shadow-floating);

  display:
    grid;

  gap:
    var(--space-lg);

  box-sizing:
    border-box;
}

.request-form > div,
.request-form button {
  min-width:
    0;
}

.form-input,
.form-textarea {
  width:
    100%;

  max-width:
    100%;

  box-sizing:
    border-box;
}

.request-form .button {
  width:
    100%;

  margin-top:
    var(--space-md);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .request-hero {
    min-height:
      auto;

    padding:
      140px
      7%
      var(--space-5xl);
  }

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

    gap:
      var(--space-2xl);

    max-width:
      760px;
  }

  .request-copy {
    max-width:
      100%;
  }

  .request-copy h1 {
    max-width:
      100%;
  }

  .request-copy > p {
    max-width:
      100%;
  }

  .request-sidebar {
    grid-column:
      auto;
  }

  #selected-flight-card {
    margin-top:
      var(--space-xl);
  }

  .request-form {
    padding:
      var(--space-xl);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .request-hero {
    padding:
      120px
      20px
      60px;
  }

  .request-inner {
    gap:
      var(--space-xl);
  }

  #selected-flight-card {
    padding:
      24px;

    border-radius:
      22px;
  }

  .request-form {
    padding:
      24px;
  }

}