:root {
  --black-soft: #676767;
  --first-color: #7ce48a;
  --second-color: #d1c75d;
  --font: "Inter", sans-serif;
}

* { 
  box-sizing: border-box; 
}

body { 
  min-width: 320px; 
  margin: 0; 
  background: radial-gradient(ellipse at 15% 4%, var(--black-soft), transparent 35rem), black; 
  color: white; 
  font: 14px/1.55 var(--font); 
}

button, input, select { 
  font: inherit; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

.confirmation-box {
  display: none;
  width: min(380px, calc(100% - 30px));
  margin: 20px auto 0;
  padding: 24px 20px;
  border: 1px solid var(--first-color);
  border-radius: 14px;
  background: black;
  color: white;
  text-align: center;
}

.confirmation-box.visible { 
  display: block; 
}

.confirmation-box .success-icon { 
  width: 52px; 
  height: 52px; 
  display: grid; 
  place-items: center; 
  margin: 0 auto 12px; 
  border-radius: 50%; 
  background: var(--black-soft); 
  color: var(--first-color); 
  font-size: 24px; 
}

.confirmation-box .eyebrow { 
  margin-bottom: 8px; 
}

.confirmation-box h2 { margin: 0; 
  font-size: 20px; 
}

.confirmation-box p { 
  margin: 10px 0 20px; 
  color: var(--black-soft); 
  font-size: 11px; 
}

.booking-header { 
  height: 72px; 
  padding: 0 max(24px, calc((100vw - 1240px)/2)); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  border-bottom: 1px solid var(--black-soft); 
}

.brand { display: flex; 
  align-items: center; 
  gap: 11px; 
}

.brand-mark { width: 38px; 
  height: 38px; 
  display: grid; 
  place-items: center; 
  border-radius: 11px; 
  background: var(--first-color); 
  color: #071008; 
  font-size: 12px; 
  font-weight: 800; 
}

.brand h2, .brand h3 { 
  display: block; 
}

.brand h2 { 
  font-size: 12px; 
  letter-spacing: .04em; 
  text-transform: uppercase; 
}

.brand h3 { 
  margin-top: 2px; 
  color: var(--black-soft); 
  font-size: 9px; 
}

.partner-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; color: white; 
  font-size: 11px; 
}

.partner-link i { 
  color: var(--first-color); 
  font-size: 16px; 
}

.booking-layout {
  width: min(1240px, calc(100% - 48px)); 
  margin: 0 auto; padding: 45px 0 70px; 
  display: grid; 
  grid-template-columns: minmax(0, 1fr) 330px; 
  align-items: start; gap: 48px; 
}

.intro { 
  margin-bottom: 31px; 
}

.eyebrow { 
  margin: 0 0 9px; 
  color: var(--first-color); 
  font-size: 9px; 
  font-weight: 700; 
  letter-spacing: .16em; 
}

.intro h1 { 
  margin: 0; 
  font-size: clamp(34px, 5vw, 50px); 
  line-height: 1.1; 
  letter-spacing: -.05em; 
}

.intro h1 span { 
  color: var(--first-color); 
}

.intro > p:last-child { 
  max-width: 560px; 
  margin: 13px 0 0; 
  color: var(--black-soft); 
  font-size: 12px; 
}

#booking-form { 
  display: grid; gap: 14px; 
}

.step-card { 
  padding: 21px; 
  border: 1px solid var(--black-soft); 
  border-radius: 12px; 
  background: rgba(17,23,19,.88); 
}

.step-heading { 
  margin-bottom: 17px; 
  display: flex; 
  align-items: center; gap: 11px; 
}

.step-number { 
  width: 31px; 
  height: 31px; 
  display: grid; 
  place-items: center; 
  flex: 0 0 31px; 
  border: 1px solid var(--first-color); 
  border-radius: 9px; 
  background: var(--black-soft); 
  color: var(--first-color); 
  font-size: 10px; 
  font-weight: 700; 
}

.step-heading h2 {
  margin: 0; 
  font-size: 13px;
}

.step-heading p { 
  margin: 4px 0 0; 
  color: var(--black-soft); 
  font-size: 10px; 
}

.cinema-options { 
  display: grid; 
  gap: 14px; 
}

.cinema-location-group { display: grid; gap: 8px; }
.cinema-location-group > h3 { margin: 0; color: var(--first-color); font-size: 11px; letter-spacing: .04em; }
.cinema-location-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.cinema-option { 
  min-height: 63px; 
  padding: 10px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  border: 1px solid var(--black-soft); 
  border-radius: 8px; 
  background: black; 
  color: white; 
  cursor: pointer; 
  text-align: left; 
}

.cinema-option > span:last-child { min-width: 0; display: grid; gap: 2px; }
.cinema-option strong { display: block; line-height: 1.25; }
.cinema-option small { display: block; margin-top: 2px; line-height: 1.25; color: #aab4ac; font-size: 10px; white-space: normal; }

.cinema-option.selected {
  border-color: var(--first-color); 
  background: var(--black-soft); 
  box-shadow: 0 0 0 1px black; 
}

.cinema-option:disabled { 
  opacity: .55; 
  cursor: not-allowed; 
}

.cinema-logo {
  width: 31px; 
  height: 31px; 
  display: grid; 
  place-items: center; 
  flex: 0 0 31px; 
  border-radius: 8px; 
  background: var(--first-color); 
  font-weight: 800; 
}

.cinema-option[data-cinema="hoyts"] .cinema-logo { 
  background: var(--first-color); 
}

.cinema-option[data-cinema="showcase"] .cinema-logo { 
  background: var(--second-color); 
}

.cinema-option h2, .cinema-option h3 { 
  display: block; 
}

.cinema-option h2 { 
  font-size: 10px; 
}

.cinema-option h3 { 
  margin-top: 3px; 
  color: var(--black-soft); 
  font-size: 8px; 
}

.form-grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 13px; 
}

.field { 
  display: grid; 
  gap: 6px; 
  color: var(--first-color); 
  font-size: 10px; 
}

.field input, .field select { 
  width: 100%; 
  min-height: 41px; 
  padding: 0 10px; 
  border: 1px solid var(--black-soft); 
  border-radius: 7px; 
  outline: none; 
  background: black; 
  color: white; 
  font-size: 11px; 
}

.field input:focus, .field select:focus { 
  border-color: var(--first-color); 
}

.field-title { 
  color: var(--first-color); 
  font-size: 10px; 
}

.showtime-wrap {
  margin-top: 15px; 
}

.showtime-options { 
  margin-top: 8px; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
}

.showtime-option { 
  min-width: 76px; 
  padding: 8px 11px; 
  border: 1px solid var(--black-soft); 
  border-radius: 7px; 
  background: black; 
  color: white; 
  cursor: pointer; 
  font-size: 10px; 
}

.showtime-option.selected { 
  border-color: var(--first-color); 
  background: var(--black-soft); 
  color: var(--first-color); 
}

.inline-message, .form-message { 
  color: var(--black-soft); 
  font-size: 10px; 
}

.inline-message { 
  margin: 8px 0 0; 
}

.screen-label { 
  width: 75%; 
  margin: 0 auto 17px; 
  padding: 7px; 
  border-top: 2px solid var(--first-color); 
  border-radius: 50% 50% 0 0; color: lightblue; 
  font-size: 8px; 
  letter-spacing: .2em; 
  text-align: center; 
}

.seat-legend { 
  margin-bottom: 13px; 
  display: flex; 
  justify-content: center; 
  gap: 17px; 
  color: var(--black-soft); 
  font-size: 9px; 
}

.seat-legend span { 
  display: flex; 
  align-items: center; 
  gap: 5px; 
}

.seat-sample { 
  width: 11px; 
  height: 10px; 
  border: 1px solid var(--black-soft); 
  border-radius: 3px 3px 1px 1px; 
}

.seat-sample.selected { 
  border-color: var(--first-color); 
  background: var(--first-color); 
}

.seat-sample.occupied { 
  border-color: var(--black-soft); 
  background: var(--black-soft); 
}

.seat-map { 
  max-width: 460px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: repeat(10, minmax(20px, 1fr)); 
  gap: 7px; 
}

.seat { aspect-ratio: 1.1; 
  padding: 0; 
  border: 1px solid var(--black-soft); 
  border-radius: 4px 4px 2px 2px; 
  background: transparent; 
  color: white; 
  cursor: pointer; 
  font-size: 8px; 
}

.seat:hover:not(:disabled) { 
  border-color: var(--first-color); 
}

.seat.selected { 
  border-color: var(--first-color); 
  background: var(--first-color); 
  color: black; 
}

.seat:disabled { 
  border-color: var(--black-soft); 
  background: var(--black-soft); 
  color: white; 
  cursor: not-allowed; 
}

.seat.aisle { 
  grid-column: 6; 
}

.candy-options { 
  display: grid; gap: 8px; 
}

.candy-item { 
  min-height: 51px; 
  display: grid; 
  grid-template-columns: 1fr auto 70px; 
  align-items: center; 
  gap: 12px; 
  border-top: 1px solid var(--black-soft); 
}

.candy-item:first-child { 
  border-top: 0; 
}

.candy-item h2 { 
  display: block; 
  font-size: 10px; 
}

.candy-item h3 { 
  display: block; 
  margin-top: 3px; 
  color: var(--black-soft); 
  font-size: 9px; 
}

.candy-price { 
  font-size: 10px; 
}

.quantity-control { 
  display: flex; 
  align-items: center; 
  justify-content: flex-end; 
  gap: 8px; 
}

.quantity-control button { 
  width: 23px;
  height: 23px; 
  border: 1px solid var(--black-soft); 
  border-radius: 6px; 
  background: black; 
  cursor: pointer; 
}

.quantity-control span { 
  min-width: 10px; 
  color: white; 
  font-size: 10px; 
  text-align: center; 
}

.confirm-button { 
  width: 100%; 
  min-height: 46px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  border: 0; 
  border-radius: 8px; 
  background: var(--first-color); 
  color: black; 
  cursor: pointer; 
  font-size: 12px; 
  font-weight: 700; 
}

.confirm-button i { 
  font-size: 18px; 
}

.form-message { 
  min-height: 0; 
  margin: 0; 
  color: white; 
}

.order-sidebar { 
  position: sticky; 
  top: 20px; 
}

.order-card { 
  padding: 20px; 
  border: 1px solid var(--black-soft); 
  border-radius: 12px; 
  background: black; 
}

.order-card h2 { 
  margin: 0 0 17px; 
  font-size: 17px; 
}

.order-cinema, .order-movie { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 12px 0; 
  border-top: 1px solid var(--black-soft); 
}

.order-cinema h2, .order-cinema h3, .order-movie h2, .order-movie h3 { 
  display: block; 
}

.order-cinema h2, .order-movie h2 { 
  font-size: 10px; 
}

.order-cinema h3, .order-movie h3 { 
  margin-top: 4px; 
  color: var(--black-soft); 
  font-size: 9px; 
}

.poster-placeholder { 
  width: 40px; 
  height: 50px; 
  display: grid; 
  place-items: center; 
  border-radius: 6px; 
  background: linear-gradient(var(--black-soft), black); 
  color: var(--first-color); 
  font-size: 20px; 
}

.order-line { 
  padding: 12px 0; 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 10px; 
  border-top: 1px solid var(--black-soft); 
  font-size: 10px; 
}

.order-line h3 { 
  display: block; 
  margin-top: 4px; 
  color: var(--black-soft); 
  font-size: 9px; 
}

.order-line h2 { 
  font-size: 10px; 
  white-space: nowrap; 
}

.total-line { 
  margin-top: 4px; 
  padding-top: 15px; 
  display: flex; 
  justify-content: space-between; 
  border-top: 1px solid var(--black-soft); 
  font-size: 12px; 
  font-weight: 600; 
}

.total-line h2 { 
  color: var(--first-color); 
  font-size: 18px; 
}

.demo-disclaimer { 
  margin: 15px 0 0; 
  display: flex; 
  align-items: flex-start; 
  gap: 6px; color: var(--black-soft); 
  font-size: 9px; 
}

.demo-disclaimer i { 
  color: var(--second-color); 
  font-size: 14px; 
}

.back-link { 
  margin-top: 14px; 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  color: white; 
  font-size: 10px; 
}

.confirmation-box {
  display: none;
  width: min(380px, calc(100% - 30px));
  margin: 20px auto 0;
  padding: 24px 20px;
  border: 1px solid rgba(124,228,138,.35);
  border-radius: 14px;
  background: #111713;
  color: var(--white);
  text-align: center;
}

.confirmation-box.visible { display: block; }

.success-icon { width: 49px; height: 49px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,228,138,.12); color: var(--first-color); font-size: 27px; }

.confirmation-box h2 { margin: 0; font-size: 20px; }

.confirmation-box p { margin: 10px 0 20px; color: var(--black-soft); font-size: 11px; }

@media (max-width: 900px) { .booking-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 22px; } .cinema-options { grid-template-columns: 1fr; } .cinema-option { min-height: 51px; } }

@media (max-width: 700px) { .booking-header { padding-inline: 16px; } .booking-layout { width: calc(100% - 28px); padding-top: 28px; grid-template-columns: 1fr; gap: 22px; } .order-sidebar { position: static; grid-row: 1; } .order-card { padding: 16px; } .order-card h2 { margin-bottom: 10px; } .order-movie { display: none; } .booking-main { grid-row: 2; } .intro { margin-bottom: 20px; } }

@media (max-width: 700px) { .cinema-location-cards { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .partner-link { font-size: 0; } .partner-link i { font-size: 20px; } .intro h1 { font-size: 36px; } .step-card { padding: 15px; } .form-grid { grid-template-columns: 1fr; } .seat-map { gap: 4px; } .seat { font-size: 7px; } .seat-legend { gap: 9px; font-size: 8px; } }