#order-wrap {
  display: grid;
  row-gap: var(--row-gap);
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  column-gap: inherit;
  

  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }
 
}

/* Validation */
#order-validation {
  --input-height: 2.4rem;
  --border-color: var(--gray-4);

  place-self: center;

  width: clamp(400px, 50vw, 800px);

  border: 1px solid var(--gray-3);
  padding: var(--row-gap);
 
  & [order-validation_input-wrap] {
    margin-block: var(--row-gap);
    filter: drop-shadow(-1px 0 0 var(--border-color)) 
            drop-shadow(1px 0 0 var(--border-color))
            drop-shadow(0 -1px 0 var(--border-color))
            drop-shadow(0 1px 0 var(--border-color));
  }

  & input {
    box-sizing: border-box;
    padding: .2rem .4rem;
    
    width: 100%;
    height: var(--input-height);

    background-color: #fff;

    &:autofill, option {
      box-shadow: inset 0 0 0 99px white;
    }

    &::placeholder {
      color: transparent;
    }

    & + label {
      position: absolute;
      left: calc(anchor(left) + 1px);
      pointer-events: none;

      text-wrap: nowrap;
      place-content: center;

      padding: .2rem .4rem;
      height: var(--input-height);

      color: var(--gray-6);
      font-family: 'Century Gothic';     

      user-select: none;

      transition: transform 160ms linear;
    }
  }

  & div:focus-within > label, 
  & input:not(:placeholder-shown) + label {
    transform: translateY(-17px) translateX(-1px);
    background-color: #fff;
    border-color: var(--gray-3);
    height: 18px;
    font-size: .8rem;
  }

  #order-validation_email {
    anchor-name: --order-validation_email;
    
    & + label {
      position-anchor: --order-validation_email;
    }
  }

  & button {
    display: block;
    padding: 1rem;
    background-color: #000;
    color: #fff;
    margin-inline: auto;
    cursor: pointer;
    min-width: 20ch;
    text-align: center;
  }
}

#order-detail {
  grid-column: 1 / -2;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--row-gap);
}

#order-detail > section, #order-cost {
  border: 1px solid var(--gray-4);
  padding: var(--row-gap) var(--column-gap);
  margin-block-start: 1.5em;

  position: relative;

  &::before {
    display: inline;
    color: #fff;
    background-color: #000;
    padding-inline: .2em;
    position: absolute;
    z-index: 1;
    top: -1.5em;
    left: -1px;

    font-size: 1.2rem;
    
    font-family: 'Century Gothic';
    letter-spacing: 1.2px;
    text-shadow: 0.4px 0 0 hsla(0, 100%, 100%, 70%),
                 -0.4px 0 0 hsla(0, 100%, 100%, 70%);
  }
}

#order-items {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--row-gap);

  &::before {
    content: 'ITEMS'
  }
}

#order-cost {  
  display: grid;
  height: max-content;
  gap: (var(--column-gap) / 2);
  grid-template-columns: max-content 1fr;
  font-family: 'Century Gothic';

  @media (orientation: landscape) {
    grid-column: -2 / span 1;
  }

  @media (orientation: portrait) {
    grid-row: 1 / span 1;
  }

  & > div {
    grid-column: 1 / -1;
    text-align: justify;

    &:first-of-type {
      font-weight: bold;
      margin-block-end: var(--column-gap);
    }

    &:last-of-type {
      margin-block-end: var(--row-gap);
    }
  }
  
  & > a {
    grid-column: -2 / span 1;
    text-align: right;
    margin-block-start: var(--row-gap);
    font-size: .8rem;
    text-decoration: underline;
  }

  & > label {
    align-content: center;
    text-transform: uppercase;
  }

  & > output {
    direction: rtl;
  }

  #order-cost_total, [for='order-cost_total'] {
    border-block-start: 1px solid black;
    font-weight: bold;
    margin-block-start: .4rem;
    padding-block-start: .4rem;
  }

  #order-cost_card {
    font-size: .8em;
    color: var(--gray-4)
  }

  & sup {
    font-size: .8em;
    position: relative;
    top: .25em;
  }

  &::before {
    content: 'ORDER SUMMARY'
  }
}

#order-shipping {
  --output-height: 2.4rem;
  --border-color: var(--gray-3);

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);

  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }
 
  &::before {
    content: 'SHIPPING';
  }

  & [order-shipping_output-wrap] {
    filter: drop-shadow(-1px 0 0 var(--border-color)) 
            drop-shadow(1px 0 0 var(--border-color))
            drop-shadow(0 -1px 0 var(--border-color))
            drop-shadow(0 1px 0 var(--border-color));
  }

  & output {
    box-sizing: border-box;
    display: inline-grid;
    padding: .2rem .4rem;

    vertical-align: center;
    align-content: center;
    
    width: 100%;
    height: var(--output-height);

    background-color: #fff;

    & + label {
      position: absolute;
      left: calc(anchor(left) + 1px);
      pointer-events: none;

      text-wrap: nowrap;
      place-content: center;

      padding: .2rem .4rem;
      height: var(--output-height);

      color: var(--gray-6);
      font-family: 'Century Gothic';     

      user-select: none;

      transition: transform 160ms linear;
    }
  }

  & output + label {
    transform: translateY(-17px) translateX(-1px);
    background-color: #fff;
    border-color: var(--gray-3);
    height: 18px;
    font-size: .8rem;
  }

  #order-shipping_first-name {
    anchor-name: --order-shipping_first-name;
    
    & + label {
      position-anchor: --order-shipping_first-name;
    }
  }

  #order-shipping_last-name {
    anchor-name: --order-shipping_last-name;
    
    & + label {
      position-anchor: --order-shipping_last-name;
    }
  }

  #order-shipping_phone {
    anchor-name: --order-shipping_phone;
    
    & + label {
      position-anchor: --order-shipping_phone;
    }
  }

  #order-shipping_email {
    anchor-name: --order-shipping_email;
    
    & + label {
      position-anchor: --order-shipping_email;
    }
  }

  #order-shipping_address-1 {
    anchor-name: --order-shipping_address-1;
    
    & + label {
      position-anchor: --order-shipping_address-1;
    }
  }

  #order-shipping_address-2 {
    anchor-name: --order-shipping_address-2;
    
    & + label {
      position-anchor: --order-shipping_address-2;
    }
  }

  #order-shipping_city {
    anchor-name: --order-shipping_city;
    
    & + label {
      position-anchor: --order-shipping_city;
    }
  }

  #order-shipping_state {
    anchor-name: --order-shipping_state;
    
    & + label {
      position-anchor: --order-shipping_state;
    }
  }

  #order-shipping_zip {
    anchor-name: --order-shipping_zip;
    
    & + label {
      position-anchor: --order-shipping_zip;
    }
  }
}



#order:not([validated]) {
  & #order-validation {
    grid-column: 1 / -1;
  }

  & #order-wrap {
    display: none;
  }
}

#order[validated] {
  & #order-validation {
    display: none;
  }

  & #order-wrap {
    grid-column: 1 / -1;
  }
}