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;
    /* Text on a donor-tier fill — the Gold that marks a purchased space. The
       tiers are light metallics, so black: 9.9:1 on Gold, where white is 2.1:1. */
    --on-tier-body:      #000000;

    /* 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);

    /* The room plaque preview (stage 4) — a frosted glass panel on metal
       standoffs. A material rather than a brand surface: the glass is a cool
       translucent grey with a white sheen, edged by a light inner rim and a dark
       outer one, and the text is the etched charcoal of the client's reference
       rather than the page's black. */
    --surface-glass:       rgba(222, 228, 230, 0.55);
    --surface-glass-sheen: rgba(255, 255, 255, 0.85);
    --border-glass:        rgba(255, 255, 255, 0.95);
    --border-glass-edge:   rgba(0, 0, 0, 0.14);
    --shadow-glass:        rgba(0, 0, 0, 0.2);
    --on-glass-heading:    #333333;
    --on-glass-body:       #474747;
    --standoff-light:      #fafafa;
    --standoff-dark:       #8a8a8a;

    /* 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;
}

/* The EFT note under the map and space list on stage 2 (seat_stage_2.php), and
   the pledge plan note under the payment plans on stage 5 (seat_stage_5.php),
   are set to the footer contact sentence's measure, so they read as the same
   kind of text (client review, October 2026). Both are --font-s, which is what
   makes 62ch the same width in each. Only the side margins are set, so the
   paragraph keeps its own spacing above and below. */
.payment-note {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-s);
    line-height: 1.65;
    text-align: center;
}

/* The pledge plan note reads best broken after its comma (client review,
   October 2026). A hard break looked wrong on phones, so the note is narrowed
   a little instead and balanced: the browser evens out its lines, and the most
   even split of this sentence is at the comma. In Lato the first half is about
   44ch and the second about 48ch, so both fit in 54ch. A browser without
   text-wrap: balance wraps it normally within the same width. */
.pledge-note {
    max-width: 54ch;
    text-wrap: balance;
}

/* 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);
  }

/* The Back link at the top of steps 3 to 6 (seat.php), under the progress bar,
   with an "i" whose tooltip asks donors to use it rather than the browser's
   Back button, which leaves the one-page checkout. The link takes its colour
   from the layout's `.site-body a`, the same as the Back link at the foot of
   the step. */
.stage-back-top {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    margin: 24px auto 0;
}

/* Both Back links, at the top and at the foot of the step. */
.stage-back-link {
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.stage-back-link:hover,
.stage-back-link:focus-visible {
    text-decoration: underline;
}

/* The tooltip opens below the "i" and runs to the right, since the link sits
   at the left of the page; the width is capped so it stays on a phone screen.
   Shown on hover and on keyboard focus here, and by .is-open, which seat.php
   sets on a click or tap. */
.stage-back-help {
    position: relative;
    display: inline-flex;
}

.stage-back-help-toggle {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1.5px solid var(--action);
    border-radius: 50%;
    background: transparent;
    color: var(--action);
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}

.stage-back-help-toggle:hover,
.stage-back-help.is-open .stage-back-help-toggle {
    background: var(--action);
    color: var(--action-label);
}

.stage-back-help-toggle:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

.stage-back-help-text {
    position: absolute;
    top: calc(100% + 8px);
    left: -12px;
    z-index: 20;
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    background: var(--surface-panel);
    color: var(--on-panel-body);
    border: 1px solid var(--border-hairline);
    font-size: var(--font-xs);
    line-height: 1.5;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s;
}

.stage-back-help:hover .stage-back-help-text,
.stage-back-help-toggle:focus-visible + .stage-back-help-text,
.stage-back-help.is-open .stage-back-help-text {
    visibility: visible;
    opacity: 1;
}

  .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;
  }

/* Giving Levels box, on stage 2 (seat map) and stage 3 (dedication). Stage 2 is
   exempt from the 800px cap above so the map can use the full width, which let
   this box stretch edge to edge there while it sat at 800px on stage 3. Capping
   the box itself makes it the same width on both. The inline styles it used to
   carry in both views are gone, so this is the one place to change it. */
.donor-group-legend {
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 0px;
    background: var(--surface-muted);
}


/* 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. */

/* The gap after a section's last item is what separates one category from the
   next (client review, October 2026: "more space between category"). In px:
   the root size on this site is 10px, so the old 3rem was only 30px. */
.room-section {
    margin-bottom: 80px;
}

/* Centred, at heading size and in the names' own Title Case (client review,
   October 2026). The 0.04em tracking went with the old uppercase and is gone
   with it. */
.room-section-title {
    font-family: var(--font-display);
    color: var(--on-page-heading);
    font-size: 32px;
    line-height: 1.2;
    text-align: center;
    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 the button that closes a card has
   to be pushed to the foot of it, or a card with a short blurb leaves its
   button floating higher than the card beside it. An auto bottom margin here
   does that 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;
}

/* The photo banner above a section heading on the Support a Space page, set
   by `room-sections` in config/params-local.php. The banner keeps one shape
   however many photos it holds — two share it side by side, each cropped to
   its half — so every section's banner is the same height. overflow: hidden
   lets the aspect ratio hold even though each image is far taller than its
   slot. */
.room-section-images {
    display: flex;
    gap: 8px;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.room-section-image {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    object-fit: cover;
}

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

/* Set exactly like a Signature Spaces card title (.seat-code .title): the body
   face, bold, uppercase, at the size the panel inherits (client review,
   October 2026). It used to be the display face at 1.25rem — only 12.5px on
   this site's 10px root. font-size and font-family are restated because an h4
   otherwise takes Bootstrap's 18px and the display face from the global
   heading rule. */
.room-group-title {
    font-family: var(--font-body);
    color: var(--on-panel-heading);
    text-transform: uppercase;
    font-weight: bold;
    font-size: inherit;
    line-height: 1.2;
    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;
}

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

    /* A 3:1 banner at phone width is too thin to read as a picture. */
    .room-section-images {
        aspect-ratio: 16 / 9;
    }

    /* Scaled down with the screen: at 32px "Pods & Open Studios" breaks over
       two lines, and 80px is a lot of a phone's height between categories. */
    .room-section {
        margin-bottom: 56px;
    }

    .room-section-title {
        font-size: 26px;
    }

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

    .room-price-row-label {
        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; the
   other states are fills keyed by the legend on the Support a Space tab.

   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;
}

/* Reserved and Purchased, keyed by the legend on the Support a Space tab
   (client review, October 2026). Both fills are set on #room-div from config —
   Reserved from seat-colors, so it matches a Reserved tile on the element map,
   and Purchased from the Gold of the donor-groups Giving Levels. They keep the
   maroon outline every space button carries. */
.pledge-btn.reserved {
    color: var(--on-reserved-body);
    background: var(--surface-reserved);
    border-color: var(--action);
    cursor: default;
}

.pledge-btn.purchased {
    color: var(--on-tier-body);
    background: var(--surface-purchased);
    border-color: var(--action);
    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;
}

/* The Stripe card field. Stripe mounts straight into #creditDebitDetails and
   tags it .StripeElement, so the transparent box above left the field sitting
   bare on the page ground with nothing to mark it as an input. It now reads as
   a field like the login inputs: a panel with a hairline, ringed in the action
   colour on focus. Scoped to .StripeElement because NAB draws its own maroon
   panel inside the same box. */
div#creditDebitDetails.StripeElement {
    background: var(--surface-panel);
    border: 1px solid var(--border-hairline);
    padding: 14px 12px;
}

div#creditDebitDetails.StripeElement--focus {
    border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action);
}

/* 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;
}

/* A room's plaque in the stage 4 preview. A landscape rectangle, 300 x 240:
   wider than the 210 x 240 element tile beside it (seat_stage_4.php sets that
   one inline) but the same height, so a mixed cart lines up. The glass is a
   diagonal sheen over a translucent tint; the standoffs are four absolutely
   placed discs, which is why the vertical padding keeps the text clear of the
   corners.

   It shows the room name and the "Your recognition here" placeholder (19.5px
   italic, as on the element tile). Each is one line, whatever its length.
   17.5px is the largest round size at which every room name fits the 276px
   inside the border and side padding, measured in bold Lato against all 36
   rooms (October 2026): the longest, "Environmental Science Laboratory",
   takes 269px, and would overflow at 18px. A sub-space shows only its own
   name (seat_stage_4.php), which is what keeps the longest room name that
   short. Anything longer added later, or a phone narrower than the plaque,
   cuts the line with an ellipsis rather than wrapping it. */
.room-plaque {
    position: relative;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    height: 240px;
    padding: 33px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg,
        var(--surface-glass-sheen) 0%,
        var(--surface-glass) 40%,
        var(--surface-glass) 65%,
        var(--surface-glass-sheen) 100%);
    border: 1px solid var(--border-glass-edge);
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px var(--border-glass),
        0 9px 21px -6px var(--shadow-glass);
    font-family: var(--font-body);
}

.room-plaque-name,
.room-plaque-placeholder {
    max-width: 100%;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-plaque-name {
    margin-bottom: 15px;
    font-size: 17.5px;
    font-weight: 700;
    color: var(--on-glass-heading);
}

.room-plaque-placeholder {
    font-size: 19.5px;
    font-style: italic;
    font-weight: 400;
    color: var(--on-glass-body);
}

.room-plaque-standoff {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--standoff-light) 0%, var(--standoff-dark) 75%);
    box-shadow: 0 1px 3px var(--shadow-glass);
}

.room-plaque-standoff.tl { top: 10px; left: 10px; }
.room-plaque-standoff.tr { top: 10px; right: 10px; }
.room-plaque-standoff.bl { bottom: 10px; left: 10px; }
.room-plaque-standoff.br { bottom: 10px; right: 10px; }

/* ------------------------------------------------------------------
   Admin login — views/layouts/main-login.php, shared by the login,
   "Forgot your password?" and reset-password pages.

   The theme (Gentelella custom.css) draws this page for its own slate
   ground: grey text, gradient rules either side of the heading, a white
   text-shadow, purple input focus. These rules restate it in brand roles:
   the sand page, the maroon band on top carrying the white logo (as the
   front-end header does), and a white panel for the form.
   ------------------------------------------------------------------ */
body.login-page {
    background: var(--surface-page);
    color: var(--on-page-body);
    min-height: 100vh;
}

.login-band {
    background: var(--surface-accent);
    padding: 22px 16px;
    text-align: center;
}

.login-band-home {
    display: inline-block;
}

.login-band-home:focus-visible {
    outline: 2px solid var(--on-accent-body);
    outline-offset: 6px;
}

.login-band-logo {
    display: block;
    width: auto;
    max-width: min(300px, 100%);
    height: auto;
    max-height: 64px;
}

/* Shown only when no organisation logo is set. */
.login-band-name {
    font-family: var(--font-display);
    font-size: var(--font-xl);
    color: var(--on-accent-heading);
}

.login-page .login-box {
    display: block;
    padding: 48px 16px 40px;
}

.login-page .login_wrapper {
    max-width: 420px;
    margin: 0 auto;
}

/* The theme stacks a login and a sign-up form absolutely so it can slide
   between them. There is one form here, and absolute positioning would leave
   the page with no height of its own. */
.login-page .login_form {
    position: static;
}

.login-page .login_content {
    background: var(--surface-panel);
    color: var(--on-panel-body);
    border: 1px solid var(--border-hairline);
    border-top: 4px solid var(--surface-accent);
    padding: 32px 28px 20px;
    min-width: 0;
    text-align: left;
    text-shadow: none;
}

.login-page .login_content form {
    margin: 0;
}

.login-page .login_content h1 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--on-panel-heading);
    margin: 0 0 20px;
}

.login-page .login_content h1:before,
.login-page .login_content h1:after {
    content: none;
}

.login-page .login_content .form-control {
    height: 46px;
    margin: 0;
    padding: 10px 12px;
    font-size: 16px;
    color: var(--on-panel-body);
    background: var(--surface-panel);
    border: 1px solid var(--border-hairline);
    border-radius: 0;
    box-shadow: none;
}

.login-page .login_content .form-control::placeholder {
    color: var(--on-panel-body);
    opacity: 0.6;
}

.login-page .login_content .form-control:focus {
    border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action);
    outline: none;
}

/* The brand button (see .choose-seat-button): a maroon outline that fills on
   hover. Listed with its states because Bootstrap colours each one. */
.login-page .login_content .btn-primary,
.login-page .login_content .btn-primary:focus,
.login-page .login_content .btn-primary:active,
.login-page .login_content .btn-primary:active:focus {
    margin: 6px 0 0;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--action);
    background: transparent;
    border: 1px solid var(--action);
    border-radius: 0;
    box-shadow: none;
}

.login-page .login_content .btn-primary:hover,
.login-page .login_content .btn-primary:active:hover {
    color: var(--action-hover-label);
    background: var(--action-hover);
    border-color: var(--action-hover);
    text-decoration: none;
}

.login-page .login_content .btn-primary:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

/* "Forgot your password?" / "Back to login". Underlined so it reads as a
   link without relying on colour. */
.login-page .login_content .login-link {
    display: inline-block;
    margin: 16px 0 0;
    font-size: 15px;
    color: var(--on-panel-body);
    text-decoration: underline;
}

.login-page .login_content .login-link:hover,
.login-page .login_content .login-link:focus {
    color: var(--action);
}

.login-page .login_content .login-intro {
    font-size: 15px;
    line-height: 1.5;
    color: var(--on-panel-body);
    margin: -8px 0 20px;
}

/* Confirmation above the login form, e.g. after asking for a reset link. In
   brand roles rather than Bootstrap's alert green: it reports something
   done, not a validation state. */
.login-page .login_content .login-notice {
    font-size: 15px;
    line-height: 1.5;
    color: var(--on-muted-body);
    background: var(--surface-muted);
    border-left: 4px solid var(--surface-accent);
    padding: 12px 14px;
    margin: 0 0 20px;
}

/* The login page swaps the password step for the authenticator step with the
   hidden attribute. Restated so a display rule on .login_form or .login-notice
   can never show both. */
.login-page .login_wrapper [hidden] {
    display: none;
}

/* The authenticator QR code. The image carries its own light quiet zone,
   which scanners need, so it sits on the panel as is. */
.login-page .login_content .login-qr {
    display: block;
    width: 100%;
    max-width: 290px;
    height: auto;
    margin: 0 auto 20px;
}

.login-page .login_content .separator {
    border-top: 1px solid var(--border-hairline);
    margin-top: 24px;
    padding-top: 14px;
}

.login-page .login_content .separator p {
    font-size: var(--font-xs);
    color: var(--on-panel-body);
    margin: 0;
}

@media only screen and (max-width: 480px) {
    .login-page .login-box {
        padding-top: 28px;
    }

    .login-page .login_content {
        padding: 24px 18px 16px;
    }

    .login-band-logo {
        max-height: 48px;
    }
}