/* One tactile button for every ticket action, with an edge that contrasts with its surface. */
.btn.ticket-button {
  --ticket-edge: #fff; --ticket-focus: var(--orange); --ticket-depth: 6px;
  color: black; background: var(--orange); border: 2px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--ticket-edge), 0 var(--ticket-depth) 0 2px var(--ticket-edge);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn.ticket-button-on-light { --ticket-edge: #000; --ticket-focus: #000; }
.btn.ticket-button-secondary { background: white; }
.btn.ticket-button:hover {
  color: black; background: white; transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--ticket-edge), 0 calc(var(--ticket-depth) + 2px) 0 2px var(--ticket-edge);
}
.btn.ticket-button-secondary:hover { background: var(--orange); }
.btn.ticket-button:active {
  transform: translateY(calc(var(--ticket-depth) - 2px));
  box-shadow: 0 0 0 2px var(--ticket-edge), 0 2px 0 2px var(--ticket-edge);
}
.btn.ticket-button:focus-visible { outline: 3px solid var(--ticket-focus); outline-offset: 11px; }
.nav-wrap .nav-cta { --ticket-depth: 3px; min-height: 44px; padding: 10px 18px; }
.nav-wrap .nav-cta:focus-visible { outline-color: white; outline-offset: 5px; }
.purchase-cta .purchase-action { display: block; font: 700 20px/1.15 var(--body); }
.purchase-cta .purchase-price { display: block; font: 700 20px/1.15 var(--body); white-space: nowrap; }
.hero-booking { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; }
.hero .hero-ticket-cta {
  display: flex; flex-direction: column; gap: 5px;
  width: 156px; max-width: none; min-height: 92px;
  padding: 8px 12px; font-size: 17px;
}
.hero-ticket-cta .purchase-action, .hero-ticket-cta .purchase-price { font-size: inherit; }
.hero .hero-ticket-cta:focus-visible { outline-offset: 7px; }
.tickets .ticket-open-cta {
  grid-column: 1 / -1; justify-self: center; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 4px 6px;
  width: calc(100% - 8px); max-width: 420px; min-height: 68px;
  margin: 4px 0 10px; padding: 16px 20px;
}
.ticket-offer .purchase-note { grid-column: 1 / -1; margin: -6px 0 0; font-size: 14px; line-height: 1.4; text-align: center; }
.tickets .ticket-alternatives { margin: 18px 0 10px; font-size: 15px; line-height: 1.4; }
.tickets .ticket-alternatives .ticket-button { max-width: 100%; margin: 0; padding: 12px 16px; min-height: 44px; font-size: 15px; }
@media (max-width: 1100px) {
  .hero .hero-ticket-cta { width: 142px; font-size: 16px; }
  .tickets .ticket-open-cta { padding: 14px 16px; }
  .ticket-open-cta .purchase-action { font-size: 18px; }
  .tickets .ticket-open-cta .purchase-price { font-size: 18px; }
}
@media (max-width: 900px) {
  .hero-booking { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .hero .hero-ticket-cta { --ticket-depth: 4px; min-height: 78px; width: 136px; padding: 8px 10px; gap: 4px; font-size: 15px; }
}
@media (max-width: 760px) { .nav-wrap .nav-cta { padding: 8px 10px; } }
@media (max-width: 500px) {
  .hero-booking { grid-template-columns: 43px minmax(0, 1fr) 96px; gap: 10px; }
  .hero .hero-ticket-cta { width: 100%; min-height: 72px; padding: 6px; font-size: 13px; }
  .tickets .ticket-open-cta { min-height: 76px; padding: 14px; }
  .ticket-open-cta .purchase-action { font-size: 18px; }
}
@media (max-width: 360px) {
  .hero-booking { grid-template-columns: 30px minmax(0, 1fr) 88px; gap: 6px; padding-inline: 8px; }
  .hero .hero-ticket-cta { min-height: 66px; padding: 5px; gap: 3px; font-size: 12px; }
  .tickets .ticket-open-cta { padding: 12px; }
  .ticket-open-cta .purchase-action { font-size: 16px; }
  .tickets .ticket-open-cta .purchase-price { font-size: 16px; }
}
@media (max-height: 480px) and (min-width: 501px) {
  .hero-booking { grid-template-columns: 30px minmax(0, 1fr) 90px; gap: 7px; }
  .hero .hero-ticket-cta { --ticket-depth: 3px; width: 100%; min-height: 62px; padding: 5px; gap: 3px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.ticket-button { transition: none; }
  .btn.ticket-button:hover, .btn.ticket-button:active { transform: none; }
}