html,
body {
    height: 100%;

    /* ------------------------------------------------------------------
       Design system — St Mary's Anglican Girls' School
       Source: docs/DESIGN_SYSTEM.md (generated from stmarys.wa.edu.au +
       Brand Identity Guidelines, August 2025).

       Colours are declared as surface/on-surface pairs: every ground names
       the text colours that are valid on it, and headings are a separate
       role from body copy. Do not use a raw hex in a rule — use a role.
       ------------------------------------------------------------------ */

    /* Surfaces */
    --surface-page:      #f9f9f6;  /* default page + section ground */
    --surface-panel:     #ffffff;  /* cards and panels sitting on the page */
    --surface-muted:     #eae5dd;  /* warm neutral fill (brand Sand) */
    --surface-accent:    #901728;  /* maroon bands, footer, hover fills */
    --surface-alert:     #f44336;  /* validation / error fill (see below) */

    /* Text, paired to the surface it sits on.
       Body copy is black per the client review of August 2026 ("Text Body copy:
       Colour: Black"); it was #424242 while the ground was maroon. */
    --on-page-heading:   #901728;
    --on-page-body:      #000000;
    --on-panel-heading:  #901728;
    --on-panel-body:     #000000;
    --on-muted-body:     #000000;
    --on-accent-heading: #ffffff;
    --on-accent-body:    #ffffff;
    /* Hover state for a link sitting on the maroon band (header + slide-out
       menu). Light sand rather than a brighter white, so the hovered item reads
       as a change without the rest of the list looking dimmed. */
    --on-accent-hover:   #f9f9f6;
    /* Text on the alert fill. The design system still defines no semantic state
       palette, so this is its own pair rather than borrowed from the accent
       roles: an alert is not a brand band, and it must not follow the brand if
       the maroon ever changes. Keep it light — the fill is saturated. */
    --on-alert-body:     #ffffff;
    --on-alert-hover:    #f9f9f6;

    /* Interactive */
    --action:             #901728;
    --action-label:       #ffffff;
    --action-hover:       #901728;
    --action-hover-label: #ffffff;

    /* Lines */
    --border-hairline:   #cccccc;
    /* A hairline drawn ON the maroon band. --border-hairline is mixed for the
       sand ground and reads as a bright scratch against the accent, so rules
       inside a band tint from the foreground instead. */
    --border-on-accent:  rgba(255, 255, 255, 0.24);

    /* Type stacks — see docs/DESIGN_SYSTEM.md "Typography". Apparel is a display
       serif and is for headings, intros and pull quotes only; Lato (300 Light by
       default) carries all body copy, navigation, buttons and labels. Both are
       self-hosted below. Use these roles rather than naming a family directly. */
    --font-display: "Apparel", Georgia, "Times New Roman", serif;
    --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

    /* Font sizes. The client review specifies body 20 / small 13; --font-reg
       already carried 20, --font-xs moved 12 -> 13 to match. */
    --font-xs: 13px;
    --font-s: 16px;
    --font-reg: 20px;
    --font-l: 22px;
    --font-xl: 24px;
    --font-xxl: 48px;
    --font-jumbo: 75px;
    --font-admin-title: 160px;   
    --font-title-jumbo: 160px; 
}

@media only screen and (max-width: 768px) {
    html, body {
    /* Font sizes */
    --font-xs: 13px;
    --font-s: 16px;
    --font-reg: 16px;
    --font-l: 20px;
    --font-xl: 16px;
    --font-xxl: 30px;
    --font-jumbo: 30px;
    --font-admin-title: 40px;   
    --font-title-jumbo: 60px; 
    }
}

@font-face {
  font-family: "Apparel";
  src: url("/fonts/Apparel-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Apparel";
  src: url("/fonts/Apparel-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Apparel";
  src: url("/fonts/Apparel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Apparel";
  src: url("/fonts/Apparel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Apparel";
  src: url("/fonts/Apparel-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

/* ===== LATO ===== */

/* Thin */
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
  
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Navbar Customization */

.navbar {
    margin-top: 20px;
}

.navbar-nav li {
    margin: 0px 4px;
}

.navbar-nav li:hover a {
    color: var(--on-accent-hover);
}

.navbar-nav {
    float: left;
    margin: 0px;
    width: 100%;
}

/* The slide-out menu is a maroon band, like the header it drops out of. */
.navbar-collapse.collapse.in, .navbar-collapse.collapsing {
    position: fixed;
    right: 0;
    top: 0;
    background: var(--surface-accent);
    width: 300px;
    max-width: 100%;
    z-index: 5;
}

/* Was --action (maroon), which is now invisible against the maroon menu. */
.navbar-collapse .nav > li > a:hover, .nav > li > a:focus {
    color: var(--on-accent-hover);
    background: transparent;
}

.navbar-collapse.collapsing,.navbar-collapse.collapse.in {
    animation: none !important;
}

.navbar-collapse.collapse.in {
    animation: fade-in 1s;
}


.navbar-collapse.collapsing {
    animation: fade-out 1s;
}
.navbar-nav.nav {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 100px;
}

.navbar-toggle {
    z-index: 6;
    position: absolute !important;
    right: 30px !important;
    margin-top: 20px !important;
}

.navbar-toggle .icon-bar {
    border-radius: 0px !important;
    height: 3px !important;
    width: 26px !important;
}

.navbar-toggle {
    background: transparent !important;
    border-color: transparent !important;
}

.navbar-toggle[aria-expanded="true"] span.icon-bar:nth-child(2) {
    transform: rotate(45deg) translate(3px, 3px);
}

.navbar-toggle[aria-expanded="true"]  span.icon-bar:nth-child(3) {
    display:none;
}

.navbar-toggle[aria-expanded="true"] span.icon-bar:nth-child(4) {
    transform:rotate(-45deg) translate(2.5px, -2px);
}

.navbar-nav li a {
    font-size: var(--font-s);
}

.navbar-container .navbar-toggle {
    border-radius: 50%;
    padding: 14px;
    text-align: -webkit-center;
    margin-right: 0px;
    height: 52px;
    width: 52px;
}

/* Open state: the X sits on the maroon menu, so it is white like the closed
   hamburger sitting on the maroon header. */
.navbar-container .navbar-toggle[aria-expanded="true"] span {
    background: var(--on-accent-body) !important;
}

/* .navbar-brand {
    height: 80px;
    padding: 0px;
    float: none;
    display: block;
    place-items: center;
}*/
a.navbar-brand {
    height: 90px;
    padding: 0;
    display: flex;
    float: left;
    align-items: center;
    justify-content: center;
}

.navbar-brand-logo {
    height: 100%;
    width: auto;
}

.navbar-container > .container {
    width: 100%;
    padding: 0px 50px;
}


@media only screen and (max-width: 768px) {
    .navbar-toggle {
        margin-top: 20px;
    }
}

.navbar-header {
    flex-direction: row-reverse;
}
.navbar-header > a {
    margin: 0 !important;
}

@media (min-width: 768px){
    
    .navbar-header {
        float: none !important;
    }
    .navbar-toggle {
        display: unset !important;
    }
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left:0px;
    }
    .navbar-collapse.collapse  {
        display: none !important;
    }
    .navbar-collapse.collapse.in, .navbar-collapse.collapsing  {
        display: block !important;
    }
    
}
    
@media (max-width: 768px) {
    .navbar-collapse.collapse.in, .navbar-collapse.collapsing {
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.navbar > .container .navbar-brand {
    margin-left:10px;
}

/* .main-btn:after {
    content: url(../uploads/configweb/arrow.png);
    vertical-align: text-bottom;
    height: 24px;
    width: auto;
    margin-left: 10px;
    display: inline-block;
    margin-right: -10px;
    margin-bottom: -2px;
} */

/* .main-btn:after, .navbar-nav li:last-child a:after {
    content: url(../uploads/configweb/arrow.png);
    vertical-align: text-bottom;
    height: 24px;
    width: auto;
    margin-left: 10px;
    display: inline-block;
    margin-right: -10px;
    margin-bottom: -2px;
}*/
 
/*@media only screen and (min-width:768px) {
    .navbar-nav li:last-child {
        margin: 0px 10px;
    }
}*/

@media only screen and (max-width:768px) {
    .navbar-nav {float: none !important;}
    /*.navbar-nav li:last-child {
        margin: 10px 0px;
    }*/
}

.navbar-nav li a.other-menu {
    font-size: var(--font-xs);
    padding: 0px 15px;
}

.navbar-nav li:hover a.other-menu {
    background: transparent;
    border: none;
}

.navbar-nav li a.divider-menu {
    margin-top: 30px;
    
}

/* Navbar Customization End */

.main-btn {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
    text-decoration: none;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
    border-radius: 0px;
}

/* Bootstrap underlines every a:hover / a:focus. A .main-btn rendered as an
   anchor (the landing page CTA) would inherit that and read as a link; it is a
   button, so it keeps the fill-on-hover treatment and no underline. */
.main-btn:hover,
.main-btn:focus {
    text-decoration: none;
}

/*.main-btn,.navbar-nav li:last-child a {
    display: inline-block;
    width: auto;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 8px 20px;
    text-decoration: none;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
}*/

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto 0px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 0px;
    margin: 0px;
    width: auto;
    max-width: 100%;
}

/* The footer stacks: the contact line on its own row, then the credit /
   privacy row beneath it. It used to be a single flex ROW, so the full-width
   contact paragraph and the credit block competed for the same line and the
   credit wrapped to three cramped lines against the right edge.

   It was also position:fixed on desktop while .wrap reserved no space for it,
   so it sat on top of the end of every page — the seat page's "Back" link
   rendered underneath it. It now flows after the content instead.

   Gutters are 40px to line up with .site-body (24px under 768px, likewise).

   Every row is centred. The rows stay stretched to full width so the centring
   is against the footer, not against each block's own content box.

   The band is --surface-accent, which is what that token has always been
   documented for ("maroon bands, footer, hover fills") — the footer just never
   claimed it, so it sat sand-on-sand behind a hairline and read as a stray
   paragraph rather than the end of the page. It now bookends the maroon header.
   Everything inside therefore takes on-accent roles, NOT on-page ones. */
.footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    margin-top: 80px;
    padding: 32px 40px 48px !important;
    background: var(--surface-accent);
    color: var(--on-accent-body);
    font-size: var(--font-xs);
    text-align: center;
}

/* The contact sentence is the footer's actual content, so it steps up to
   --font-s while the credit stays at --font-xs — they were both 13px, which
   left the fine print competing with the invitation. Capped at 62ch and
   centred: unconstrained it ran the full 1900px viewport as a single line. */
.footer-contact {
    max-width: 62ch;
    margin: 0 auto;
    font-size: var(--font-s);
    line-height: 1.65;
}

/* Credit, and the footer menu where a branch renders one, sit centred side by
   side on the same line — set in the nav's uppercase register so the fine
   print reads as fine print without needing a dimmer, lower-contrast white. */
.footer-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 28px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--border-on-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-row p {
    margin: 0;
}

/* Colour alone cannot mark a link when every glyph on the band is white, so
   footer links carry a standing underline. */
.footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.footer a:hover,
.footer a:focus-visible {
    color: var(--on-accent-hover);
    text-decoration-thickness: 2px;
}

.footer a:focus-visible {
    outline: 2px solid var(--on-accent-body);
    outline-offset: 3px;
}

@media only screen and (max-width:768px){
    .footer {
        margin-top: 48px;
        padding: 40px 24px 36px !important;
        gap: 24px;
    }
    .footer-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-top: 20px;
    }
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: var(--font-reg);
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

/* general site pages css */
.site-title-prefix {
    font-size: var(--font-xl);
}

.site-title {
    font-size: var(--font-title-jumbo);
    font-weight: normal;
    margin: auto;
    width: auto;
}

.site-body {
    font-size: var(--font-s);
    margin: auto;
    /* max-width: 1100px; */
    width: auto;
}

.site-body.seats {
    max-width: none;
    text-align: -webkit-center;
}

.site-about {
    padding: 0px 20px;
}

@media only screen and (min-width: 768px) {
    .site-about {
        padding: 40px 50px;
    }
}

/* home site page css */

.home-title {
    font-size: var(--font-xxl);
    font-weight: normal;
}
.home-subtitle {
    font-size: var(--font-xxl);
    margin-bottom: 40px;
}
.home-subtitle > p {
    font-weight: normal;
    font-size: var(--font-jumbo);
    max-width: 500px;
    text-align: left;
}
.home-description {
    margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
    .home-subtitle > p {
        margin-left: 140px;
    }
}
.home-description > p {
    color: var(--on-page-body) !important;
    font-size: var(--font-s);
    margin-bottom: 20px;
}
.home-description > a {
    font-size: var(--font-reg);
    font-weight: 500;
    line-height: 160%;
    background: transparent;
    border: 0px;
    padding: 0px;
}

.home-btn:not(:last-child) {
    margin-right: 15px;
}
.home-btn .main-btn {
    margin-bottom: 20px;
}

/* home site v2 page css */

.home-title-2 {
    font-size: var(--font-xxl);
    font-weight: bold;
    margin: 0px 0px 30px 0px;
}

.home-subtitle-2 {
    font-size: var(--font-l);
    font-weight: bold;
}

.home-description-2 {
    font-size: var(--font-s);
    margin-bottom: 30px;
    max-width: 600px;
}

.home-image-2 {
    width:100%;
    margin-top:20px;
    max-width: 400px;
    float:right;
    border-radius: 0px;
}

.site-body.flex {
    display: flex;
    max-width: 1000px;
    flex-direction: row;
}

.site-body.flex .flex-item {
    flex: 1;
    padding: 40px;
    padding-top: 0px;
}
.site-body.flex .flex-item:nth-child(1) {
    flex: 50%;
}
.site-body.flex .flex-item:nth-child(2) {
    flex: 50%;
}

@media only screen and (max-width:768px) {
    .site-body.flex {
        flex-direction: column;
        margin-top: 0px;
    }
    .home-image-2 {
        float: left;
    }
}

/* home site v2 page css */

.home-title-3 {
    font-size: var(--font-jumbo);
    font-weight: bold;
    margin: 30px 0px;
}

.home-subtitle-3 {
    font-size: var(--font-l);
    font-weight: bold;
}

.home-description-3 {
    font-size: var(--font-s);
    margin-bottom: 30px;
    max-width: 600px;
}

.home-image-3 {
    width:100%;
    max-width: 540px;
}

.site-body.body-3 {
    text-align: center;
    text-align: -webkit-center;
    font-size: var(--font-s);
    margin: auto;
    margin-bottom: 40px;
    max-width: 800px;
    width: auto;
}

/* about site page css */
.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
}

.video-container {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.about-image {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.about-btn-container {
    margin-top: 30px;
    display: block;
}

/* contact site page css */
.contact-text {
    font-size: var(--font-xl);
}
/* seat main css */

  .progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
  }
  
  @media only screen and (max-width: 768px) {
  .progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
  }}

  .progress-circle {
    width: 20px;
    height: 20px;
    border: 2px solid var(--action);
    border-radius: 50%;
    background-color: transparent;
    margin: 0 5px;
    cursor: pointer;
  }

  .progress-circle.active {
    background-color: var(--action);
  }

  .progress-line {
    flex: 1;
    height: 2px;
    background-color: var(--border-hairline);
  }

  .stage-content {
    color: var(--on-page-body);
    text-align: center;
    margin-top: 20px;
  }

  .stage-content:not(#stage-content-1):not(#stage-content-2):not(#stage-content-5) {
    max-width: 800px;
  }


/* choose seat plan - step 1*/

.select-floors-area{
  align-items: stretch !important;  
}

.select-floor-area { 
    vertical-align: top;
    display: flex !important;
    width: 30%;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    margin: 12px !important;
    padding: 8px !important;
    background: var(--surface-page) !important;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}
@media only screen and (max-width:768px) {
    .select-floor-area {
        width: auto;
    }
}

@media only screen and (min-width:768px) {
    p.floor-boxes-title {
        min-height: 72px !important;
    }
}

.select-floor-area img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 0px !important;
}

.select-floor-area .main-btn {margin-top: auto;}

/* choose ticket page - step 2 */
.tooltipBooking {
    padding: 10px 20px !important;
    text-align:left !important;
    font-weight: bold !important;
    color: var(--on-muted-body) !important;
    background: var(--surface-muted) !important;
    opacity:1 !important;
}

.outer .container {
    width: 100%;
    margin-top: 30px;
}

div.map-container {
    margin-bottom: 20px;
    max-height:800px;
}

div.admin-header {
    background-color: #007481;
    font-size: var(--font-admin-title);
    width: 100%;
    height: 150px;
    text-align: center;
    color: #fff;
    vertical-align: middle;

}

.outer button {
    padding: 12px 30px;
    font-weight: 400;
    margin: 10px 5px !important;
    border: 0px;
    border-radius: 0px;
    font-weight: bold !important;
}

.outer .reset-button {
    background-color: var(--on-page-body);
    color: var(--surface-page);
    margin-bottom: 20px !important;
}

#booked-seat, #booked-seat-final{
    border: 0px;
    border-radius: 0px;
    max-width: 800px;
    background-color: var(--surface-page);
    color: var(--on-page-body);
    margin: auto;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    display: none;
}

.seat-no {
    font-size: var(--font-reg);
}

/* Prettier CSS */
.outer h1 {
    margin-top: 50px;
    color: var(--on-page-body);
}

.minus,
.plus {
    vertical-align: top;
    margin: 5px;
    font-weight: bold;
    color: var(--on-page-body);
}

#my-range {
    width: 300px;
    max-width: 80%;
    display: inline;
    line-height: 1;
    height: 20px;
}

.set_avalibity {
    margin: 0px auto;
    padding: 0px;
    list-style: none;
    text-align: center;
    margin-bottom: 10px;
}

.set_avalibity li {
    display: inline-block;
    font-size: var(--font-reg);
    color: var(--on-page-body);
    margin-right: 17px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.set_avalibity li span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: left;
    margin-right: 14px;
    margin-top: 3px;
}

#resetZoom {
    background: transparent;
    margin: 0px;
    padding: 5px 0px;
    color: var(--on-page-body);
    border-radius: 0px;
    border-bottom: 1px solid var(--on-page-body);
}

/* Second .tooltipBooking block. The colours here are all beaten by the
   !important declarations in the first block above; they are kept in sync with
   it so the tooltip stays legible if those !importants are ever removed. */
.tooltipBooking {
    display: block;
    position: absolute;
    /* z-index: -1; */
    border: 1px solid var(--border-hairline);
    background-color: var(--surface-muted);
    opacity: 0.8;
    border-radius: 0px;
    padding: 5px;
    color: var(--on-muted-body);
    font-size: var(--font-s);
}

div#donation-container {
    width: 400px;
    margin: auto;
    max-width: 100%;
    text-align-last: center;
}

input#input-donation_amount {
    height: 40px;
    margin-top: 10px;
    padding: 10px;
    color: var(--on-panel-body);
    width: 120px !important;
    max-width: 80%;
}

/* Sections stack; the flex row moved down to .room-cards, which is the only
   part of the room list that still lays cards out side by side.

   Capped and centred rather than filling the bootstrap .container. A group
   panel's content is a heading and a handful of chips — at the full ~1170px
   the price and availability were flung to the far right with a half-metre of
   empty panel between them and the chips they describe. */
div#rooms {
    display: block;
    max-width: 900px;
    margin: 0 auto;
}

.room-card {
    background: var(--surface-panel);
    color: var(--on-panel-body);
    padding: 2rem;
    border-radius: 0px;
    text-align: center;
    flex: 1 1 22%;
}

/* ── Room groups (stage 2, "Support a Space") ─────────────────────────────
   Thirty-six rooms fall into ten families whose members differ only by a
   trailing number, so a flat grid repeated the same name, price and blurb
   seven times over. The family is now drawn once and its units become chips.
   Membership is declared in config/params-local.php ('room-groups'); the
   markup is built in views/site/seat_stage_2.php.

   A chip IS a .pledge-btn — same attributes, same handleSeatClick — so the
   cart, stage 3 and checkout are untouched by this layout. A one-unit family
   uses the same panel with a single full-width button, so there is one
   component here, not two. */

.room-section {
    margin-bottom: 3rem;
}

.room-section-title {
    font-family: var(--font-display);
    color: var(--on-page-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.15rem;
    text-align: left;
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-hairline);
}

/* The signature spaces keep the original card treatment. 22% gave four across
   with no breakpoint; these are three premium rooms, so they get a floor
   width and wrap instead of shrinking. */
.room-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.room-cards .room-card {
    flex: 1 1 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

/* The cards stretch to a common height, so whatever closes a card — the plaque
   or the SPONSOR button — has to be pushed to the foot of it, or a card with a
   short dedication leaves its band floating above a strip of white while the
   card beside it sits lower. An auto bottom margin here does that for both,
   without fighting the `margin: … !important` on `.outer button`. */
.room-card .price {
    margin: 1rem 0 auto;
}

/* Children of a column flex container stretch by default, which would pull the
   button out to the full card width. */
.room-card .pledge-btn {
    align-self: center;
}

.room-group {
    background: var(--surface-panel);
    color: var(--on-panel-body);
    padding: 1.75rem 2rem;
    margin-bottom: 20px;
    text-align: left;
}

.room-group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 0.75rem;
}

.room-group-title {
    font-family: var(--font-display);
    color: var(--on-panel-heading);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0;
    margin-right: auto;
}

.room-group-price {
    font-size: 1.5rem;
    color: var(--on-panel-body);
}

.room-group-avail {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* A fully sponsored family still shows — the roll of donors beneath it is the
   point — but it stops competing with the ones that can still be claimed. */
.room-group-avail.is-full {
    color: var(--on-muted-body);
    opacity: 0.65;
}

/* One row per price. A family at a single price shows the figure once in the
   header and needs no label here; Technology Lab and Marine Lab hold a cheaper
   sub-space, so those split into a labelled row each. */
.room-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.room-price-row-label {
    min-width: 100px;
    font-weight: bold;
}

/* No `gap` here: `.outer button` sets `margin: 10px 5px !important`, which no
   selector can outweigh without a second !important, so the chips' own margins
   provide the 10px gutter. The negative margin cancels the outer edge of it so
   the first chip lines up with the heading above it. */
.room-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -5px;
}

.pledge-btn.chip {
    min-width: 48px;
    padding: 10px 14px;
}

/* Taken units are not chips. Every sponsored room here carries a real
   dedication ("Donated by: Elizabeth Carr"), which will not fit in a numbered
   chip and should not be struck through — it is the thing the donor paid for. */
/* The roll is a maroon band — --surface-accent, the same ground as the header
   and the footer — so a sponsored space reads as a plaque rather than as grey
   text left over at the bottom of the panel. Everything inside therefore takes
   the --on-accent-* roles.

   One band per family, deliberately, not one per name. Maroon is also --action,
   and a selected chip is solid maroon with white text: six separate maroon
   blocks in the Pod panel would read as six selected chips and out-shout the
   single chip still for sale. As one band the group reads as an honour roll,
   which is what it is.

   No border-top any more — --border-hairline is mixed for the sand ground and
   would read as a bright scratch on the accent (see CLAUDE.md). The band's own
   edge is the separation. */
.room-dedications {
    background: var(--surface-accent);
    color: var(--on-accent-body);
    padding: 1.1rem 2rem;
}

/* Full-bleed to the container edge: the negative margins cancel the panel's or
   card's own padding so the band meets three sides. They have to track those
   padding values — including the narrower ones in the mobile block below. */
.room-group .room-dedications {
    margin: 1.25rem -2rem -1.75rem;
}

.room-card .room-dedications {
    margin: 1.25rem -2rem -2rem;
}

.room-dedications-title {
    color: var(--on-accent-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem;
}

.room-dedication {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 4px;
}

/* Both roles are white on this ground, so the unit is told apart from the donor
   by weight rather than by colour. */
.room-dedication .unit {
    color: var(--on-accent-heading);
    font-weight: bold;
    min-width: 100px;
}

/* .room-card is centre-aligned, but .room-dedication is a flex row and
   text-align does not reach flex items — which left the donor line ranged left
   under a centred "Already sponsored". The roll inside a group panel keeps its
   left alignment: there the unit and donor are two columns that need to line up
   down the list, whereas a card carries a single name and centres it. */
.room-card .room-dedication {
    justify-content: center;
}

@media (max-width: 600px) {
    .room-group {
        padding: 1.25rem;
    }

    /* Tracks the 1.25rem padding above — otherwise the band overhangs the panel
       by the difference and clips against the page. */
    .room-group .room-dedications {
        margin: 1.25rem -1.25rem -1.25rem;
        padding: 1.1rem 1.25rem;
    }

    .room-group-title {
        margin-right: 0;
        width: 100%;
    }

    .room-price-row-label {
        width: 100%;
        min-width: 0;
    }

    /* Let every entry break the same way. At this width most donor names wrap
       to a second line but the short ones do not, so a roll left to itself
       alternates between one and two lines and the names stop lining up. */
    .room-dedication .unit {
        width: 100%;
        min-width: 0;
    }
}

.seat-code {
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

.seat-code .title {
    color: var(--on-panel-heading);
    display: block;
}

.seat-code .subtitle {
    color: var(--on-panel-body);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}
  
.price {
    font-size: 1.5rem;
    margin: 1rem 0;
}

.desc {
    margin-bottom: 1rem;
}

.availability {
    margin-bottom: 1rem;
}

/* Outlined seat CTA, per docs/DESIGN_SYSTEM.md "Buttons" — there is no
   solid-fill variant in this brand. `.pledge` is an actionable seat, `.sold`
   is one that is taken or unavailable. The live rules are in
   views/site/seat_stage_2.php, which loads after this file.

   Scoped under .outer deliberately. `.outer button` above sets `border: 0` and
   a wider padding, and every room button sits inside
   <div id="room-div" class="outer"> — so at (0,1,1) against this rule's (0,1,0)
   it was quietly winning, and the outline that IS the button in this brand had
   never painted. The variants below only set colours, which already beat
   `.outer button` at (0,2,0), so this base rule is the only one that needs the
   extra weight. Raising specificity is the fix here, not !important. */
.outer .pledge-btn {
    padding: 10px 20px;
    border-radius: 0px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid var(--action);
    background: transparent;
    font-size: 12px;
}

.pledge-btn.pledge {
    color: var(--action);
    border-color: var(--action);
}

.pledge-btn.pledge:hover {
    color: var(--action-hover-label);
    background: var(--action-hover);
    cursor: pointer;
}

/* A chosen seat holds the hover fill rather than adding a new button variant. */
.pledge-btn.selected {
    color: var(--action-label);
    background: var(--action);
    border-color: var(--action);
    cursor: pointer;
}

.pledge-btn.sold {
    color: var(--on-panel-body);
    border-color: var(--border-hairline);
    cursor: default;
}

.read-more, .show-less {
  color: var(--action) !important;
  font-size: 14px;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
}

/* choose ticket page - step 3 */
.dedication-title, .dedication-column {
    margin-bottom: 20px;
}

.basic-input {
    height: 40px;
    padding: 10px;
    color: var(--on-panel-body);
}

.textarea-input {
    padding: 10px;
    color: var(--on-panel-body);
}

.input-alert {
    padding: 20px;
    background-color: var(--surface-alert);
    color: var(--on-alert-body);
    display: none;
    margin: 20px auto;
}

/* The message itself. The colour above only INHERITS into this paragraph, and
   `.site-body p` in the layout targets it directly, which beats inheritance
   outright — so the alert text rendered in --on-page-body (black, since the
   August 2026 review) on the red fill. Matching on the content class as well
   as the element takes the specificity to (0,2,1) and wins on merit; the
   layout's blanket rule is left alone because the rest of the site relies on
   it. No !important — see CLAUDE.md "Where the layers are". */
.input-alert p.input-alert-content {
    color: var(--on-alert-body);
}

.closebtn {
    margin-left: 15px;
    color: var(--on-alert-body);
    font-weight: bold;
    float: right;
    font-size: var(--font-reg);
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* Was black, which all but vanished against the red. */
.closebtn:hover {
    color: var(--on-alert-hover);
}

/* choose payment plan - step 5 */

/* Payment plan cards. The selected card is an accent (maroon) surface, so its
   text takes the on-accent roles — it used to be a dark-grey panel, which was
   an artefact of the old single text_color slot rather than a brand colour. */
div[id^="div-payment-plan-"] h4, div[id^="div-payment-plan-"] p {
    color: var(--on-page-body);
}

div[id^="div-payment-plan-"] {
    cursor: pointer;
    border: 1px solid var(--border-hairline);
}

div[id^="div-payment-plan-"].active {
    background: var(--surface-accent);
    border-color: var(--surface-accent);
}

div[id^="div-payment-plan-"].active h4 {
    color: var(--on-accent-heading) !important;
}

div[id^="div-payment-plan-"].active p {
    color: var(--on-accent-body) !important;
}

div#div-payment-plans {
    display: flex;
    gap: 1rem;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 30px;
}
@media only screen and (max-width:768px) {
    div#div-payment-plans {
        flex-direction: column;
        gap: 0px;
    }
}

div[id^="div-payment-plan-"] {
    border-radius: 0px;
}

div[id^="div-payment-plan-"] > h4 {
    margin-bottom: 20px !important;
    font-size: var(--font-reg);
}

.table-responsive {
    overflow-x: auto;
}

.btn-export {
    background-color: #686868 !important;
    color: #ffffff !important;
}

.container.footer:before, .container.footer:after {
    display: none;
}

.block-carousel {
	 overflow: hidden;
	 pointer-events: none;
	 margin-top: 40px;
}

.block-carousel img {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	 .block-carousel[data-animated="true"] {
		 overflow: visible;
	}
}

.block-carousel .carousel-items {
	 list-style: none;
	 align-items: start;
	 display: grid;
	 gap: 4rem;
	 grid-auto-columns: 20rem;
	 grid-auto-flow: column;
	 padding-bottom: var(--spacing-container-padding-block);
}

@media (max-width: 600px) {
	.block-carousel .carousel-items {
		gap: 2rem;
	}
}

@media (min-width: 1133px) {
	 .block-carousel .carousel-items {
		 grid-auto-columns: 30rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	 .block-carousel .carousel-items {
		 overflow: visible;
		 overflow-x: scroll;
	}
}

.block-carousel[data-animated="true"] .carousel-items:hover, .block-carousel[data-animated="true"] .carousel-items:focus {
	 animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
	 .block-carousel[data-animated="true"] .carousel-items {
		 animation-duration: 30s;
		 animation-iteration-count: infinite;
		 animation-name: scroll;
		 animation-timing-function: linear;
		 width: max-content;
	}
}

@keyframes scroll {
	 to {
		 transform: translate(calc(-50% - .5rem));
	}
}

/* Lato is the default for everything. Without this, any text not wrapped in a
   p/span/a/button (list items, table cells, labels, bare divs) fell through to
   the browser's default serif, which is why individual views kept re-declaring
   a family on `div`. */
body {
    font-family: var(--font-body);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    color: var(--on-page-heading);
}

/* Headings inside an accent (maroon) surface invert to white */
.surface-accent h1, .surface-accent h2, .surface-accent h3,
.surface-accent h4, .surface-accent h5, .surface-accent h6 {
    color: var(--on-accent-heading);
}

p, button, span, a {
    font-family: var(--font-body);
}

.footer-powered {
    font-family: var(--font-body);
    margin: 0px;
}

div#creditDebitDetails {
    background: transparent;
    padding: 30px;
}

/* Additional Home */
.home-columns {
    padding: 0px;
    display: block;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

/* Additional About */
.about-columns {
    display: flex;
    display: flex;
    flex-wrap: wrap;
}
.about-columns > .left-column {
    flex: 1;
    margin-right: 20px;
    margin-left: 0px;
    min-width: 300px;
}
.about-columns > .right-column {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media only screen and (min-width: 768px) {
    .about-columns {
        padding: 80px 50px;
    }
    .about-columns > .left-column, .about-columns > .right-column {
        padding: 40px;
    }
    .home-subtitle > p {
        margin-left: 20px;
    }
    .about-columns:nth-child(3) .home-subtitle p {
        max-width: 550px;
    }
    .about-columns:nth-child(3) .home-description {
        margin-left: 120px;
    }
}
@media only screen and (max-width: 768px) {
    .about-columns:nth-child(3) {
        flex-direction: column-reverse;
    }
}

/* Pricing Table */

    /* Table Styling */
    table {
      margin-top: 40px;
      width: 100%;
      border-collapse: collapse;
    }
    thead th {
      text-align: center;
      padding: 12px;
    }
    tbody td {
      border-bottom: 1px solid var(--border-hairline);
      padding: 30px 12px;
      vertical-align: middle;
      text-align: center;
    }
    /* Left-align the first column (feature descriptions) */
    tbody td:first-child {
      text-align: left;
      font-weight: bold;
    }
    /* Smaller font for price */
    thead th span {
      min-width: 100px;
      display: block;
      font-size: 0.9em;
      font-weight: normal;
    }
    
    .pricing-table {
        color: var(--on-page-body);
    }

    .pricing-table td {
        font-size: var(--font-xs);
        font-weight: normal;
    }

    .pricing-table th {
        font-size: var(--font-reg);
        font-weight: normal;
    }

    .pricing-table span {
        font-size: var(--font-xs);
        font-weight: normal;
    }
    .table-container {
      width: 100%;
      overflow-x: auto;
    }
    
    /* Pricing Columns (Contents) */
    .pricing-columns {
        display: flex;
        flex-wrap: wrap;
        margin-top:40px
    }
    .pricing-columns > .right-column {
        flex: 1;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pricing-columns > .left-column {
        flex: 1;
        margin-right: 20px;
        min-width: 300px;
    }
    .pricing-custom.home-description {
        margin-bottom: 30px;
        max-width: 600px;
        margin-left: 0px;
    }
    
    /* Desktop view: readjust padding & margin */
    @media screen and (min-width: 768px) {
        .pricing-columns {
            padding: 80px 50px;
        }
        .pricing-columns > .right-column, .pricing-columns > .left-column {
            padding: 40px;
        }
        .pricing-custom.home-description {
            margin-left: 80px 
        }
    }
    
    /* Mobile view: fix the first column */
    @media screen and (max-width: 768px) {
      thead th:first-child,
      tbody td:first-child {
        background: var(--surface-muted);
        position: sticky;
        left: 0;
        /* Ensure the first column appears above other cells */
        z-index: 2;
      }
      tbody td {
        border-bottom: 2px solid var(--border-hairline);
      }
      thead th:first-child {
        z-index: 2;
      }
    }

/* Seats Slider */

/* Reset basic appearance */
.seats input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 8px !important;
  border-radius: 0px;
  /* Was a one-colour linear-gradient; the design system records no gradients
     anywhere on this brand, so it is a flat fill. */
  background: var(--surface-muted);
  outline: none;
}

/* Thumb styling for Chrome/Safari/Edge */
.seats input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action) !important;
  cursor: pointer;
}

/* Firefox filled portion */
.seats input[type="range"]::-moz-range-progress {
  background-color: var(--surface-muted);
  height: 8px;
  border-radius: 0px;
}

.seats input[type="range"]::-moz-range-track {
  background-color: var(--surface-muted);
  height: 8px;
  border-radius: 0px;
}

.seats input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action) !important;
  cursor: pointer;
  border: none;
}

/*Pointer seat avoid numbers*/
path:not([path-type="seat"]) {
    pointer-events: none;
}

.submit-btn {
    isplay: block;
    font-size: 20px;
    line-height: 55px;
    height: 55px;
    color: var(--action);
    background-color: transparent;
    margin: auto;
    padding: 0px 20px;
    border-radius: 0px;
    border: 1px solid var(--action);
}

.submit-btn:hover {
    color: var(--action-hover-label);
    background-color: var(--action-hover);
}

/* Outlined, fills on hover — the only CTA shape this brand has.
   See docs/DESIGN_SYSTEM.md "Buttons". */
.home-description a.choose-seat-button {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--action);
    color: var(--action);
    text-transform: uppercase;
    display: block;
    max-width: 300px;
    padding: 10px 20px;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
}

.home-description a.choose-seat-button:hover {
    background: var(--action-hover);
    color: var(--action-hover-label);
}

/*OVERWRITE*/

/* .navbar {
    position: fixed !important;
}
a.navbar-brand {
    left: calc(50% - 50px) !important;
    position: fixed !important;
} */

.wrap {
    position: relative;
    top: -140px;
    /* `top` shifts the wrap visually but leaves its layout box where it was, so
       the document still ends 140px below what you can see. That was invisible
       while the footer had no ground; against the maroon band it would show as
       a 140px strip of sand under the footer. The negative margin takes the
       same 140px back out of the layout height so the two ends agree. */
    margin-bottom: -140px;
}

.navbar {
    margin: 0px;
    z-index: 50;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 0px !important;
}

.banner-container {
    text-align:center;
    padding-bottom:20px; 
    padding-top: 25%;
}

.site-body {
    padding: 40px !important;
}

.home-subtitle {
    padding: 12px 0px;
}
@media only screen and (min-width: 768px) {
    .floor-boxes {
        min-height: 120px
    }
}

@media only screen and (max-width: 768px) {

    .banner-container {
        padding-top: 200px !important;
    }
    .site-body {
        padding: 24px !important;
    }
    h3, .h3 {
        font-size: 18px;
    }
    .home-description p {
        font-size: 14px !important;
    }
}

/* The plaque preview renders a physical object, so its ground is the plaque
   material rather than a page surface — but white is still the panel role. */
#plaque-container {
    background-color: var(--surface-panel) !important;
    border-radius: 10px;
    margin-bottom: 20px;
}