/*
  pages/register.css
  Registration info page and registration form.
*/


/* ─── Value comparison ───────────────────────────────────────────────────── */

.value-comparison {
  max-width: 960px;
  margin: 2rem auto 0;
  padding: 0 20px;
  text-align: center;
}

.value-comparison__heading {
  font-family: var(--unical);
  color: var(--emerald);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.value-comparison__intro {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--ash);
}

.value-comparison__table {
  display: flex;
  gap: 2rem;

  @media screen and (max-width: 600px) {
    flex-direction: column;
    gap: 1rem;
  }
}

.value-comparison__col {
  flex: 1;
  border-radius: 4px;
  overflow: hidden;
}

.value-comparison__col-heading {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.value-comparison__col--gencon {
  & .value-comparison__col-heading {
    background-color: var(--dirty-linen);
    color: var(--ash);
  }
}

.value-comparison__col--gdf {
  border: 2px solid var(--gold);

  & .value-comparison__col-heading {
    background-color: var(--jade);
    color: var(--linen);
  }
}

.value-comparison__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.value-comparison__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--dirty-linen);

  &:last-child {
    border-bottom: none;
  }
}

.value-comparison__item--experience {
  background-color: var(--super-faded-gold);
  font-style: italic;
  color: var(--ash);
  justify-content: center;
  text-align: center;
}

.value-comparison__item--total {
  font-weight: 700;
  font-size: 1rem;
  background-color: var(--dirty-linen);

  .value-comparison__col--gdf & {
    background-color: var(--super-faded-gold);
  }
}

.value-comparison__cost {
  white-space: nowrap;
  font-weight: 600;
  color: var(--ash);
}

.value-comparison__cost--included {
  color: var(--emerald);
}

.value-comparison__footnote {
  max-width: 680px;
  margin: 1.5rem auto 0;
  font-size: 0.9rem;
  color: var(--ash);
  font-style: italic;
}


/* ─── Registration info page (.registration-info) ────────────────────────── */

.registration-info {

  @media screen and (max-width: 600px) {
    padding-bottom: 40px;
  }

  & .inner {
    padding: 30px 20px 0;

    @media screen and (min-width: 1024px) {
      max-width: 960px;
      margin: 0 auto;
      padding-top: 40px;
    }
  }

  & .cards {
    display: flex;
    flex-direction: column;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 40px;

    @media screen and (min-width: 601px) {
      flex-direction: row;
      column-gap: 40px;
    }

    @media screen and (min-width: 1024px) {
      column-gap: 60px;
    }
  }

  & .card {
    display: flex;
    flex-direction: column;

    @media screen and (max-width: 600px) {
      & + .card {
        padding-top: 20px;
      }
    }

    & h2 {
      width: 100%;
      margin: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--jade);
      font-size: 2rem;
      text-align: center;
    }
  }

  & .price-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 20px;

    & p {
      margin: 0;
      text-align: center;
    }

    & .current-level {
      color: var(--emerald);
      font-family: var(--unical);
      font-size: 1.5rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    & .price {
      color: var(--dark-gold);
      font-family: var(--poppins);
      font-size: 1.25rem;
      font-weight: 600;
      text-align: center;
    }

    & .price-level__standard {
      & .label,
      & .value {
        color: gray;
        font-family: 'Poppins', sans-serif;
        font-size: 0.8rem;
        text-transform: none;
        text-decoration: line-through;
      }
    }

    & .tickets-remaining {
      width: 100%;
      margin: 0 auto;
      padding: 6px 0;
      color: var(--jade);
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
  }

  & .benefits {
    padding-top: 20px;

    @media screen and (min-width: 601px) {
      padding-bottom: 30px;
    }

    & ul {
      margin: 0;
      padding-bottom: 20px;
      padding-inline-start: 20px;
    }

    & ul li {
      padding: 4px 0;

      &::marker {
        color: var(--emerald);
      }
    }

    & .price-disclaimer {
      color: gray;
      font-size: 10px;
    }
  }

  & .cta--register {
    margin: 30px auto 0;
  }
}


/* ─── Registration form (.form--registration) ────────────────────────────── */

.form--registration {
  padding-bottom: 30px;

  @media screen and (min-width: 601px) {
    max-width: 500px;
    margin: 0 auto;
  }

  & .guest-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-gap);
  }

  & .guest-heading {
    width: calc(100% + 40px);
    margin: 0 -20px;
    padding: 10px;
    background-color: var(--gold);
    color: var(--asphalt);
    font-size: 2rem;
    text-align: center;

    @media screen and (min-width: 601px) {
      width: 100%;
      margin: 0;
    }
  }

  & .form-group {
    width: 100%;
    position: relative;

    & input[type="text"],
    & input[type="email"],
    & input[type="tel"] {
      padding: 10px 0 10px 7px;
      border: 1px solid var(--asphalt);
      border-radius: 4px;
      background-color: white;
      font-size: 14px;
      font-weight: 400;

      &:focus,
      &.has-input {
        border: 1px solid var(--gold);
      }
    }

    & input[type="text"]:disabled {
      border-color: transparent;
      background-color: transparent;
      outline-color: transparent;
    }

    & input:user-invalid {
      border-color: red;
    }

    &:has(:user-invalid)::after {
      color: red;
      content: "Required";
      position: absolute;
      font-size: 10px;
      font-weight: 400;
    }

    &.agree-policy:has(input[type="checkbox"]:user-invalid)::after {
      content: "Must agree to Acceptable Behavior Policy";
      top: 60px;
      left: 30px;
      width: 100%;
    }

    &.agree-media:has(input[type="checkbox"]:user-invalid)::after {
      content: "Must agree to Media Release";
      top: 60px;
      left: 30px;
      width: 100%;
    }

    & label,
    & input {
      position: relative;
    }

    & label {
      font-size: 10px;
      font-weight: 400;

      &.gm-pick-label {
        padding-left: 0;
      }
    }

    & input {
      display: block;
      color: var(--asphalt);
      font-size: 14px;
      position: relative;
      z-index: 500;

      &[type="text"],
      &[type="email"],
      &[type="tel"] {
        width: 100%;
      }
    }

    &.fname,
    &.lname,
    &.email,
    &.phone {
      max-width: calc(50% - var(--col2-gap-calc));
    }

    &.city,
    &.state,
    &.zip {
      max-width: calc((100% / 3) - (var(--col3-gap-calc) + 6px));
    }

    &.shirt {
      margin: 20px 0 0;
      padding: 20px 0 30px;
      border-top: 1px solid var(--border-muted);
      border-bottom: 1px solid var(--border-muted);

      & .t-shirt-select {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px;
        text-transform: uppercase;
      }

      & label {
        font-size: 1rem;
      }
    }

    &.vegetarian,
    &.agree-policy,
    &.agree-media {
      display: grid;
      grid-template-columns: 20px 1fr;
      align-items: center;
      gap: 10px;

      & label {
        grid-column-start: 2;
        grid-row-start: 1;
        font-size: 1rem;
        line-height: 1.25rem;
      }

      & input {
        grid-column-start: 1;
        grid-row-start: 1;
        width: 20px;
        height: 20px;
        margin: 0;
      }
    }

    &.vegetarian {
      margin: 0;
      padding: 15px 0 0;
      border-top: 1px solid var(--border-muted);
    }

    &.pick-gm,
    &.select-accommodation {

      & > p {
        margin-top: 0;
        text-align: center;
        text-transform: uppercase;
      }

      & small {
        display: flex;
        max-width: 70%;
        margin: -15px auto 15px;
        font-size: 12px;
        text-align: center;
      }
    }

    &.agree-policy,
    &.agree-media {
      padding: 15px 0 20px;
      border-top: 1px solid var(--border-muted);
    }

    &.select-accommodation {
      padding-top: 4px;
    }

  }

  & .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-muted);
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
  }

  & #game_master_0 {
    padding-bottom: 10px;
  }

  & #price_display {
    border-top: 1px solid var(--border-muted);
  }

  & .form-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 30px;

    & .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(50% - 8px);
      padding: 10px;
      border: 1px solid var(--asphalt);
      background-color: white;
      cursor: pointer;
    }

    & .btn-secondary,
    & .btn-danger {

      &:hover::before {
        margin-right: 8px;
        transition: margin-right 125ms ease-in;
      }

      &::before {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        margin-right: 4px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        transition: margin-right 125ms ease-out;
      }
    }

    & .btn-secondary::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
    }

    & .btn-danger::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
    }

    & .separator {
      width: 100%;
      padding: 5px 0;
    }

    & .separator__text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 14px;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 30%;
        height: 1px;
        background-color: var(--border-muted);
      }
    }

    & .btn-primary {
      width: 100%;
      background-color: var(--gold);
      color: white;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: background-color 125ms ease-out;

      &:hover {
        background-color: var(--gold-hover);
        transition: background-color 125ms ease-in;

        &::after {
          margin-left: 8px;
          transition: margin-left 125ms ease-in;
        }
      }

      &::after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        margin-left: 4px;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg width='448px' height='512px' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M190.5,66.9L212.7,44.7C222.1,35.3 237.3,35.3 246.6,44.7L441,239C450.4,248.4 450.4,263.6 441,272.9L246.6,467.3C237.2,476.7 222,476.7 212.7,467.3L190.5,445.1C181,435.6 181.2,420.1 190.9,410.8L311.4,296L24,296C10.7,296 0,285.3 0,272L0,240C0,226.7 10.7,216 24,216L311.4,216L190.9,101.2C181.1,91.9 180.9,76.4 190.5,66.9Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center;
        transition: margin-left 125ms ease-out;
      }
    }
  }

  & .select-accommodation select {
    margin-top: 30px;
  }

  & .accommodation-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--asphalt);
    color: var(--asphalt);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;

    &::after {
      content: "";
      display: block;
      width: 14px;
      height: 14px;
      margin-left: 4px;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg width='448px' height='264px' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-0.00188352,-216.046)'%3E%3Cpath d='M441.48,278.31C441.25,278.55 441.01,278.79 440.77,279.02L241.44,473C231.806,482.328 216.294,482.328 206.66,473L7.23,279C2.615,274.591 0.002,268.479 0.002,262.096C0.002,256.056 2.343,250.244 6.53,245.89C6.75,245.65 6.99,245.42 7.23,245.19L30,223.06C39.817,213.654 55.579,213.833 65.18,223.46L224,384.19L382.8,223.46C392.355,213.734 408.206,213.554 417.98,223.06L440.76,245.21C445.378,249.62 447.994,255.734 447.994,262.119C447.994,268.152 445.658,273.958 441.48,278.31Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E");
      background-size: contain;
      background-position: center;
    }

    &.expanded::after {
      transform: rotate(180deg);
    }
  }

  & .accommodations {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  & .accommodation-entry {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-muted);

    &:last-child {
      border-bottom: none;
    }

    & input {
      max-width: 20px;
      margin: 0;
      color: var(--asphalt);
    }

    & label {
      display: flex;
      align-items: center;
      padding-left: 8px;
    }

    & .price {
      padding-right: 5px;
      color: var(--emerald);
      font-size: 1rem;
      min-width: 110px;
      white-space: nowrap;
    }

    & .accommodation-info {
      padding-left: 10px;
      border-left: 1px solid black;
      font-size: 13px;
    }
  }

  & .multi-guest-notice {
    margin: 0;
    padding: 10px 0 0;
    color: var(--ash);

    & a {
      color: var(--ash);
    }
  }

  & .total-price {
    text-align: right;
  }
}