/* New styles for v=3 */
.pmtheader {width:100%;max-width:800px;background:black;height:50px;position:fixed;top:0px;box-sizing:border-box;z-index:999;padding-top:1px;display:flex;flex-direction:row;align-items:center}
.pmtheaderleft {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;padding-left:10px;flex-shrink:0}
.pmtheadertitle {font-family:Arial;color:white;font-weight:bold;font-size:1.2em;line-height:1.2em;vertical-align:bottom;text-align:left;flex:1 1 0;min-width:0;padding-left:10px;}
.surtitle {font-family:Arial;color:orange;font-weight:bold;font-size:0.7em;line-height:0.7em;vertical-align:bottom;text-align:left;}
.pmtheaderright {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:right;padding-right:2em;flex-shrink:0}
.pmtheader2 {width:100%;background:#ebe5e4;height:50px;position:fixed;top:50px;left:0px;box-sizing:border-box;z-index:999;padding-top:1px;display:flex;flex-direction:row;align-items:center}
.pmtheader2left {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;padding-left:2em;flex-grow:1}
.pmtheader2title {color:#AB051B;font-weight:bold;font-size:1.0em;line-height:2.0em;vertical-align:middle;text-align:center;width:300px}
.pmtheader2right {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:right;padding-right:2em;flex-grow:1}
.pmtFullTicketWrapper {width:100%;max-width:800px;background:transparent;position:fixed;top:50px;left:0;right:0;box-sizing:border-box;z-index:999;}
.pmtFullTicketHeader {width:100%;background:#ebe5e4;min-height:100px;box-sizing:border-box;padding:8px 0;display:flex;flex-direction:row;align-items:center;border-radius:8px 8px 0 0;}
.pmtFullTicketLogo {color:white;font-size:1em;line-height:2.0em;vertical-align:middle;padding-left:2px;flex-grow:1}
.pmtTicketLogo {width:100px;border-radius:10px;padding:5px;}
.pmtFullTicketText {vertical-align:middle;text-align:left;width:100%;}
.pmtT1 {color:#AB051B;font-size:1.0em;line-height:1.2em;font-weight:bold;}
.pmtT2 {color:black;font-size:1.0em;line-height:1.1em;}
.pmtT3 {color:black;font-size:1.0em;line-height:1.0em;font-weight:bold;}
.pmtFullTicketHeaderDetails {width:100%;background:#ebe5e4;box-sizing:border-box;padding:10px;border-radius:0 0 8px 8px;margin-top:2px;}
.pmtTD1 {vertical-align:middle;text-align:left;width:100%;color:black;font-size:1.3em;line-height:1.3em;font-weight:bold}
.pmtTDleft {color:black;font-size:1.1em;line-height:1.3em;left:5px;}
.pmtTDright {color:black;font-size:1.1em;line-height:1.3em;float:right;}
.pmtTicketDetails2 {font-style:italic;}
.pmtTicketDetails3 {font-weight:bold;}
.pmtTicketDetails4 {font-weight:bold;} /* When shown this is the amount actually due, so it can't read as a footnote under the bold Total above it. */
.pmtCollapse {text-align:center;width:100%;padding:6px 0;}
.pmtCollapseLink {display:inline-flex;align-items:center;justify-content:center;width:56px;height:32px;border-radius:16px;background:rgba(0,0,0,0.06);text-decoration:none;color:#555;cursor:pointer;transition:background 0.15s,color 0.15s;}
.pmtCollapseLink:hover {background:rgba(0,0,0,0.12);color:#000;}
.pmtChevron {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.pmtTicketHeader {width:100%;max-width:800px;background:#ebe5e4;position:fixed;top:50px;box-sizing:border-box;z-index:999;padding:10px;border-radius:8px;}
.pmtForm {background-color:black !important;}
.pmtFormH1 {width:100%;left:0px;color:white;font-size:1.5em;line-height:1.6em;padding-top:6px;padding-bottom:4px;font-family:Arial;}
.pmtFormFields {width:calc(100%-20px);background:#ebe5e4;left:0px;color:black;font-size:1.0em;line-height:1.1em;padding:10px;font-family:Arial;border-radius:8px;}
.pmtFormRow {display:grid;grid-template-columns:1fr;column-gap:12px;}
.pmtFormCol {min-width:0;}
.pmtFormCol .pmtinput {width:100%;box-sizing:border-box;}
@media only screen and (min-width: 700px) {
  .pmtFormRow {grid-template-columns:1fr 1fr;}
}
.pmtFormTitle {background:#ebe5e4;left:0px;color:black;font-size:0.9em;line-height:1.0em;padding:10px 0px 3px 0px;font-family:Arial;}
.pmtFormInput {background:#ebe5e4;left:0px;color:black;font-size:1.1em;line-height:1.2em;padding:0px 0px 0px 0px;font-family:Arial;}
.pmtFormNavigation {width:100%;left:0px;color:white;font-size:1.5em;line-height:1.5em;padding-top:10px;display:flex;justify-content:space-between;align-items:center;}
/* Help-link styling for both .pmtfooterleft (payment1 v=3) and .pmtFormNavigation (checkout1 v=3).
   Small, normal weight, white link so it stays unobtrusive next to the CONTINUE button. */
/* "Need help?" in white, "Email us" link in the same #f7cd83 yellow as the
   CONTINUE TO CHECKOUT button border/text. Fixed pixel size so the link is
   the same size on payment1.php (.pmtfooterleft has 1em base) and
   checkout1.php (.pmtFormNavigation has 1.5em base) — em would scale with
   parent and produce different sizes. font-family Arial matches the !important
   button rule in ds.css so the help link's font matches the button on iOS. */
.pmtFooterHelp {font-size:14px;font-weight:normal;line-height:1.2;color:white;font-family:Arial,sans-serif;}
.pmtFooterHelp a {color:#f7cd83;text-decoration:underline;font-family:Arial,sans-serif;}
.pmtinput {font-family:Arial;margin:0px;line-height:2em;width:300px}
.pmttinyfooter {width:100%;left:0px;color:white;font-size:0.8em;line-height:1.0em;padding-top:10px;font-family:Arial;}

.lock-icon {width:1.5em;height:1.5em}
.pmtfooter {width:100%;max-width:800px;background:black;height:50px;position:fixed;bottom:0px;box-sizing:border-box;z-index:999;padding-top:1px;display:flex;flex-direction:row;align-items:center}
.pmtfooterleft {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;padding-left:10px;flex-grow:1}
.pmtfootertitle {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:center;width:20px}
.pmtfooterright {color:white;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:right;padding-right:0.5em;flex-grow:1}
.pmtfooter2 {width:calc(100% - 20px);max-width:800px;margin-left:10px;margin-right:10px;background:white;height:50px;position:fixed;bottom:50px;box-sizing:border-box;z-index:999;padding-top:1px;display:flex;flex-direction:row;align-items:center;border-radius:8px;box-shadow:0 -8px 16px rgba(0,0,0,0.18);}
.pmtfooter2left {color:black;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;padding-left:2em;flex-grow:1}
.pmtfooter2title {color:black;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:center;width:20px}
.pmtfooter2right {font-family:Arial;color:black;font-weight:bold;font-size:1em;line-height:2.0em;vertical-align:middle;text-align:right;padding-right:2em;flex-grow:1}
.pricerow {width:100%;position:relative;left:0px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}
.priceleft {color:black;font-weight:bold;font-size:1.2em;line-height:1.5em;vertical-align:middle;padding-left:8px;flex-grow:1}
.priceright {color:black;font-weight:bold;font-size:1.2em;line-height:1.5em;vertical-align:middle;text-align:right;padding-right:8px;flex-grow:1;}
.pricetoggle {position:relative;float:right;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}
.pmttotal {font-size:1.2em;}
.fees {font-size:0.6em;line-height:1.1em;font-weight:normal}
.pmtheadshot {width:200px}
.pmt2 {font-weight:bold}
.pmt3 {color:#AB051B;line-height:1em;font-weight:bold;}
.pmt4 {line-height:2em;font-size:1em}
.pmtdescription {font-size:1em;line-height:1.1em;}
.pmtbutton {display:inline-flex;align-items:center;height:30px;width:30px;color:black;background:white;margin:1px;border-radius:50%;cursor:pointer;font-family:Arial;border:1px solid grey;font-weight:bold;}
.pmtbutton:disabled {color:silver;border:silver;}
.pmtquantity {text-align:center;height:30px;width:30px;color:black;background:transparent;margin:5 5 5 5;font-family:Arial;border:none;font-weight:bold;font-size:1.1em;}
.pmtfooterbutton {color:#f7cd83;font-size:0.8em;background:transparent;padding:10px;margin:3px;border:2px solid #f7cd83;border-radius:15px;cursor:pointer;}
.ticketdiv {border-top:1px solid black;margin:5px;padding:2px;background:transparent;}
.Notes {width:150px;}
.pmtcontainer {box-sizing:border-box;width:100%;display:flex;justify-content:center;}

body {margin:0px;padding:0px;background-color:black;} /* #ebe5e4 */
/* Fix to 1000px width */
/* make sure margin-bottom matches .pmtfooter */
.main1 {box-sizing:border-box;width:800px;background-color:#ebe5e4;margin-bottom:100px;border-radius:8px;}

/* mobile specific styles */
/* NOTE: requires 'viewport' meta tag to be set */
/* make sure margin-bottom matches .pmtfooter */
@media only screen and (max-width: 1000px) {
  .pmtheader {width:100%;position:fixed;top:0px;left:0px;box-sizing:border-box;z-index:999;padding-top:1px;}
}
@media only screen and (max-width: 700px) {
  .calendar {display:none;}
  .listEvents {display:inline;}
  .main1 {width:calc(100% - 20px);padding:0px;margin-left:10px;margin-right:10px;}
  .MobileSelect {font-size:1em;}
  .MobileList {width:160px;}
}
@media only screen and (max-width: 1100px) {
  .calendar {display:none;} /* div holding the calendar is 1000px so only display calendar when screen is 1100px+ */
  .main1 {width:calc(100% - 20px);padding:0px;margin-left:10px;margin-right:10px;}
  .pmtFullTicketWrapper {width:calc(100% - 20px);left:10px;right:10px;}
  .pmtTicketHeader {width:calc(100% - 20px);left:10px;right:10px;}
  /* Anchor the form's CONTINUE button to the bottom of the screen on mobile,
     same pattern as the Ticket Total bar on payment1.php.
     box-sizing:border-box so the 10/15px padding is INCLUDED in the 100% width
     (without it iOS Safari treats this as 100% + padding, pushing the button
     ~25px past the right viewport edge — confirmed with screenshot 2026-05-04).
     Help link is flex-shrinkable so the button (flex-shrink:0) keeps its space. */
  .pmtFormNavigation {position:fixed;bottom:0;left:0;right:0;background:black;padding:10px 15px 10px 10px;box-sizing:border-box;z-index:999;box-shadow:0 -8px 16px rgba(0,0,0,0.18);}
  .pmtFormNavigation .pmtfooterbutton {min-width:150px;flex-shrink:0;}
  .pmtFormNavigation .pmtFooterHelp {flex-shrink:1;min-width:0;}
  .MobileSelect {font-size:1em;}
  .MobileList {width:160px;}
}
/* Desktop: let the Ticket Total + Continue bars flow under the form
   instead of being pinned to the viewport bottom (which leaves a black
   gap when the form content is shorter than the viewport).
   Also anchor the fixed header explicitly so changing pmtcontainer
   to a column flex doesn't shift its static-position fallback. */
@media only screen and (min-width: 1101px) {
  .pmtcontainer {flex-direction:column;align-items:center;}
  .pmtheader {left:0;right:0;margin-left:auto;margin-right:auto;}
  .pmtheaderleft {padding-left:0;}
  .pmtFullTicketWrapper {left:0;right:0;margin-left:auto;margin-right:auto;}
  .pmtTicketHeader {left:0;right:0;margin-left:auto;margin-right:auto;}
  .pmtfooter2 {position:static;bottom:auto;margin-left:0;margin-right:0;width:800px;max-width:800px;box-shadow:none;}
  .pmtfooter {position:static;bottom:auto;width:800px;max-width:800px;}
  .sp-banner {position:static;bottom:auto;left:auto;width:800px;max-width:800px;}
  .main1 {margin-bottom:0;}
}


/* OLD styles */


/* CSS for this page only (from original SquareSpace page but modified by SG) */
/*.header {background:black;color:white;font-size:1.0em;width:100%;height:80px;text-align:center;display: table; overflow: hidden;} */
.header {background:#1f1e1d;color:white;line-height:1em;font-size:1.2em;font-weight:700;width:100%;height:60px;text-align:center;display: table; overflow: hidden;}
.header2 {font-family:"Arial" !important;background:#82051C;color:white;border: 1px solid #82051C;}
a {text-decoration:underline;}
button {color:white;font-size:0.8em;background:#76141e;padding:10px;margin:3px;border:1px solid;border-radius:10px;cursor:pointer;}
/* Desktop doesn't see list of events */
.listEvents {display:none;}
.notification {color:#82051C;} /* notify message to user */

/*table {max-width:400px;border-spacing:2px;}*/
.mainTable {border:1px solid #999a9b;max-width:400px;}
input {font-size:1em;color:#000000;padding:3px;margin:3px;}
input.small {font-size:1em;color:#999399;}
td.dollar {color:#000000;font-size:0.8em;width:40dip;text-align:right;vertical-align:middle;}
td.amount {color:#000000;text-align:right;vertical-align:middle;}
.cast {width:100px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;}
.tickets {border-spacing:1px;max-width:80% !important;}
.errormessage {color:red;}
h4 {font-size:14sp;color:#000000;}

/* v=4 only — Royal Experience separation
   Selectors only match when v=4 markup is present, so safe alongside v=3. */
.tier-separator {border-top:1px solid #ccc;margin:22px 8px 14px;}
.premium-heading {
    font-weight:bold;letter-spacing:0.08em;color:#AB051B;
    text-align:center;font-size:0.95em;margin:0 0 10px;
}
.ticketdiv-royal {
    border:2px solid #AB051B;border-top:2px solid #AB051B;border-radius:6px;
    background:linear-gradient(180deg,#FFF8E7 0%,#FCEFC7 100%);
    padding:8px 10px;margin:0 5px 10px;
}
.ticketdiv-royal .pmt3 {color:#AB051B;}
.royal-crown {color:#AB051B;vertical-align:-0.08em;margin-right:0.35em;}

/* v=5 — Google Business rating block, shown above SELECT SEATS.
   Data is read from btix_brasstix.GoogleRatings (populated by
   dbs/maintenance.php Type=Daily/GoogleRatings). Gold stars on light bg. */
.google-rating-v5 {text-align:center;padding:0 12px 4px;margin-top:-10px;font-family:Arial,sans-serif;font-size:0.95em;color:#333;}
.google-rating-v5 .stars {color:#FFB400;letter-spacing:0.04em;}
.google-rating-v5 .count {color:#666;font-size:0.9em;}

/* v=5 — small italic seating-chart link below Stage-Side, before Premium.
   Slimmer than the v=3/v=4 top-of-list link to recover vertical space.
   Top border matches the tier-row separator so it reads as its own divider
   under Stage-Side rather than floating against the last tier. */
.seating-chart-v5 {text-align:center;font-size:0.75em;font-style:italic;margin:0 5px;padding:3px 0;border-top:1px solid black;color:#666;}
.seating-chart-v5 a {color:#AB051B;text-decoration:underline;}
/* When the V5 seating-chart link is present, hide the tier-separator that
   normally precedes PREMIUM — the seating-chart's own border-top already
   serves as the divider. Avoids stacking two horizontal lines + ~37px of
   margin between "See seating chart" and "PREMIUM". */
.seating-chart-v5 + .tier-separator {display:none;}

/* v=5 — full-width social-proof banner stacked above the Total bar.
   Same column footprint as .pmtfooter2 so they visually attach. Rounded
   top corners on the banner + square bottom corners; combined with the
   adjacent-sibling rule below that squares off the Total bar's top, the
   two bars share a flush 800px-wide stack. */
.sp-banner {position:fixed;bottom:100px;left:10px;width:calc(100% - 20px);max-width:800px;background:#1F7A3A;color:#fff;text-align:center;font-family:Arial,sans-serif;font-weight:bold;font-size:0.9em;letter-spacing:0.03em;padding:8px 14px;border-radius:8px 8px 0 0;box-sizing:border-box;z-index:998;}
/* When the V5 banner is present, push .main1 up enough that its rounded
   bottom edge clears the banner with a small visible body-bg gap. Also
   adds a few px of padding-bottom inside the card so the last line of
   text (age-limit notice) has breathing room before the card's edge.
   min-height fills the card to (viewport - header - fixed footer stack)
   so the bottom of the card sits ~15px above the banner regardless of
   viewport size — without this, tall viewports with short content show
   a big body-bg gap. Extra space falls inside the card as gray padding. */
body:has(.sp-banner) .main1 {margin-bottom:140px;padding-bottom:6px;min-height:calc(100vh - 200px);}
@media only screen and (min-width: 1101px) {
  body:has(.sp-banner) .main1 {margin-bottom:0;padding-bottom:6px;min-height:0;}
}
/* When .sp-banner precedes .pmtfooter2, drop the Total bar's top-rounded
   corners so the banner's square bottom edge meets it flush. */
.sp-banner + .pmtfooter2 {border-radius:0 0 8px 8px;}
/* Wide-viewport (>1100): match pmtfooter2's switch to position:static.
   Same rule appears at line 131 inside @media min-width:1101, but that's
   shadowed by this base rule's cascade order — repeating it here AFTER
   the base ensures it actually takes effect on desktop. */
@media only screen and (min-width: 1101px) {
  .sp-banner {position:static;bottom:auto;left:auto;width:800px;max-width:800px;}
}