/* =========================================================
   Mizunara Studio
   Page / Order
========================================================= */

/* =========================================================
   SECTION
========================================================= */

.order-section {
  width:
    min(1000px, 90%);

  margin: auto;

  padding:
    100px
    0;
}

/* =========================================================
   HEADER
========================================================= */

.order-header {
  margin-bottom: 45px;

  text-align: center;
}

.order-header h1 {
  margin-bottom: 18px;

  font-size: 3.6rem;
}

.order-header p {
  max-width: 700px;

  margin: auto;

  line-height: 1.7;

  opacity: 0.85;
}

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

.order-form {
  padding: 40px;

  border-radius: 34px;
}

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

.form-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 22px;
}

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

.form-group {
  display: flex;

  flex-direction: column;

  gap: 9px;

  margin-bottom: 22px;
}

.form-group label {
  font-weight: 600;
}

/* =========================================================
   INPUTS
========================================================= */

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

  padding:
    15px
    16px;

  border: none;

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.7);

  font-family: inherit;

  outline: none;
}

/* =========================================================
   OPTIONS
========================================================= */

.order-options {
  display: grid;

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

  gap: 12px;
}

.order-options label {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 14px;

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.45);

  cursor: pointer;
}

.order-options input {
  width: 18px;
  height: 18px;

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

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

@media (max-width: 750px) {

  .form-grid,
  .order-options {
    grid-template-columns: 1fr;
  }

  .order-header h1 {
    font-size: 2.6rem;
  }

  .order-form {
    padding: 26px;
  }
}