/* CSS for this page only (from original SquareSpace page but modified by SG) */
body {margin:0px;padding:0px;
      background-color:#000000; /* old color: #871407 */
      background-position: top left;
      background-size: auto;
      background-attachment: scroll;
      background-repeat: repeat;}
/*.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;}
/* Fix to 1000px width */
.main1 {background:#f5f5f5;width:1000px;margin: 0 auto;margin-top:10px;margin-bottom:20px;}
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;}
/* Address block: tightens the <br/>-induced gap from ds.css p,td 2em. Applied directly to the <p> so center alignment of "412 Travis St" remains relative to the page, not to the address span. */
.venue-address {line-height:1.2em;}
/* Ticket-confirmation receipt grid on thankyou.php / manageticket.php. Two columns: label (gray, nowrap) + value (bold). Overrides ds.css `p,td { line-height:2em }`. */
.ticket-details {margin:0 auto;border-collapse:collapse;width:100%;max-width:400px;}
.ticket-details td {padding:3px 12px 3px 0;line-height:1.3em;vertical-align:top;}
.ticket-details td:first-child {white-space:nowrap;color:#666;}
h4 {font-size:14sp;color:#000000;}

/* mobile specific styles */
/* NOTE: requires 'viewport' meta tag to be set */
@media only screen and (max-width: 700px) {
  .calendar {display:none;}
  .listEvents {display:inline;}
  .main1 {width:100%;padding:0px;margin:0;}
  .MobileSelect {font-size:1em;}
  .MobileList {width:160px;}
  /* Stack the page-header H1 onto two lines on mobile: show name on top, page title below, no dash. */
  .header .ph-sep {display:none;}
  .header .ph-title {display:block;}
}
@media only screen and (max-width: 1100px) {
  .calendar {display:none;} /* div holding the calendar is 1100px so only display calendar when screen is 1100px+ */
  .listEvents {display:inline;}
  .main1 {width:100%;padding:0px;margin:0;}
  .MobileSelect {font-size:1em;}
  .MobileList {width:160px;}
}

/* V5 social-proof box on calendar.php — DESKTOP only. Inline block
   between the venue address and the "Select your preferred show date"
   prompt. Same green palette + Arial Bold as the mobile banner so the
   message is visually consistent across breakpoints. Mobile gets the
   pinned-footer version (.sp-banner-calendar) below. */
.sp-box-calendar {
  display:inline-block;
  background:#1F7A3A;color:#fff;
  text-align:center;
  font-family:Arial,sans-serif;font-weight:bold;font-size:0.8em;
  letter-spacing:0.03em;
  padding:4px 14px;margin:4px auto 10px;
  border-radius:4px;
  line-height:1.4;
}
@media only screen and (max-width: 1100px) {
  .sp-box-calendar {display:none;}  /* mobile uses the fixed footer instead */
}

/* V5 social-proof banner on calendar.php — mobile only, floating footer.
   Same green + Arial Bold treatment as the V5 payment1 banner so the
   message stays visually consistent through calendar → payment1. PHP
   gates this to $abBucket==='5' in calendar.php so only V5-bucketed
   customers see it. position:fixed at viewport bottom so it stays in
   view as the user scrolls through events. body gets padding-bottom
   on mobile (also gated by :has) so the last event isn't covered. */
.sp-banner-calendar {display:none;}
@media only screen and (max-width: 1100px) {
  .sp-banner-calendar {
    display:block;
    position:fixed;bottom:0;left:0;right:0;width:100%;
    background:#1F7A3A;color:#fff;
    text-align:center;
    font-family:Arial,sans-serif;font-weight:bold;font-size:0.95em;
    letter-spacing:0.03em;
    padding:10px 14px;
    box-sizing:border-box;
    box-shadow:0 -4px 12px rgba(0,0,0,0.25);
    z-index:998;
  }
  body:has(.sp-banner-calendar) {padding-bottom:48px;}
}