/* Remove container padding on homepage hero */
 .container-fluid {
    padding: 0;
    max-width: 100%;
}
@font-face {
    font-family: 'Cardenio';
    src: url('/usersc/fonts/cardenio_modern_std-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cardenio';
    src: url('/usersc/fonts/cardenio_modern_bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Montserrat - key weights for web use */
@font-face {
    font-family: 'Montserrat';
    src: url('/usersc/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/usersc/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/usersc/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/usersc/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/usersc/fonts/montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
	/* margin: 0;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	color: var(--bs-body-color);
	text-align: var(--bs-body-text-align); */
	background-color: #000;
	/* -webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent; */
}

h1,
h2,
.logo {
    font-family: 'Cardenio', sans-serif;
    font-weight: 700;
}

/* .font-sans { */
    p {

font-family: Montserrat,ui-sans-serif,system-ui,
-apple-system,BlinkMacSystemFont,
Segoe UI,Roboto,Helvetica Neue,Arial,
Noto Sans,sans-serif,"Apple Color Emoji",
"Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}
.fagreen{
color:rgb(22, 109, 22)!important;
}
.fablue{
color:rgb(86, 216, 252)!important;
}
.faorange{
color:rgb(252, 144, 86)!important;
}
.fadblue{
color:rgb(31, 127, 230)!important;
}
.fapurple{
color:rgb(144, 13, 158)!important;
}
.beer-one-menu, .beer-two-menu{
    font-family: 'Cardenio', sans-serif;
        font-weight: 700;
}
/* Remove container padding on homepage hero */
body.page-home .container-fluid {
    padding: 0;
    max-width: 100%;
}

ul.us_menu.dark{
  background-color: #000;

  background-color: #7a421963 !important;
  background-color: #0000 !important;

}
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent !important; /* Strips out the solid brown backdrop */
  z-index: 10; /* Keeps all links and interactive text layered cleanly on top */
}
.tbs-hero {
    background-image:url('/usersc/images/crowd-optimised-large.jpg');
    min-height: 100vh;
    background-size: cover;
    background-position: top center;
    position: relative;
}
/* ul.us_menu .us_brand {
  position: relative!important;
  margin-right: 0 !important; 
  

  margin-left: auto !important;
  margin-right: auto !important;
  

  display: inline-block!important; 
}*/

/* ul.us_menu.horizontal {
  position: relative; z
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between; 
  padding-bottom: 100px;
}


ul.us_menu .us_brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important; 
  z-index: 15; 
} */


  /* Force the image inside the brand container to expand cleanly */
ul.us_menu .us_brand img {
    /* width: 496px !important; */
    width: 496px ;
    margin-top:6.5rem;
    /* height: 380px !important; */
    display: block;
}
ul.us_menu a {
    color: #000 !important;
  font-size: larger !important;
  /* font-weight: bold !important; */
  font-family: 'Montserrat' !important;
    
}
ul.us_menu.dark, ul.us_menu.dark .us_sub-menu li, ul.us_menu.dark li:hover, ul.us_menu.dark ul.us_sub-menu {
	background-color: #fff;
}
/* Only apply the absolute centering layout on desktop screens (992px and up) */
@media (min-width: 992px) {
  ul.us_menu.horizontal {
    position: relative;
    width: 100%;
    display: flex !important;
    
    /* 1. This handles the perfect vertical centering for all items inside */
    align-items: center !important; 
    justify-content: space-between;
    
    /* Keep your existing padding that you liked here */
    padding-top: 100px; 
    padding-bottom: 100px; 
  }

  ul.us_menu .us_brand {
    /* 2. Remove the rigid vertical coordinate math */
    position: absolute !important;
    left: 50% !important;
    top: auto !important; /* Clears out the 50% pushing it upward */
    
    /* 3. Only translate horizontally now (-50% on X axis, 0 on Y axis) */
    transform: translate(-50%, 0) !important; 
    
    margin: 0 !important;
    z-index: 5;
  }
  

}





  
/* TRANS DIV */
/* Hero gradient overlay - bottom fade */
/* .tbs-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.85) 100%
    );
    pointer-events: none;
} */



/* //INDEX */

/* location-holding-div */
.loc-holding-div {
	margin-top: -24rem;
	z-index: 9;
	position: relative;
	background: #0009;
	/* border: 3px solid #e5e7eb;
	border-top: none;
	border-left: none;
	border-right: none;
	border-top: none;
	border-left: none;
	border-right: none; */
	padding-bottom: 0px !important;
}
ul.us_menu.dark .dropdown-divider {
  border-color: rgba(45, 35, 35, 0.55);
}
.loc-holding-div .gap-4 {
	gap: 4.5rem !important;
}

/* Primary location links */
.tbs-loc-link {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 2.2rem;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
    line-height: 1.1;
    drop-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tbs-loc-link:hover {
    border-bottom-color: #ffffff;
}

/* Secondary nav links */
.tbs-sec-link {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.tbs-sec-link:hover {
    border-bottom-color: #ffffff;
}

/* Mobile select */
.tbs-location-strip .form-select {
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    max-width: 360px;
    margin: 0 auto;
}





/* other text and SM and form */
/* Social icons */
.tbs-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.tbs-social-link:hover {
    color: #ffffff !important;
}

.tbs-social-icon {
    height: 2.5rem;
    width: auto;
}















/* Location Sections */
.tbs-location-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e5e7eb;
}

.tbs-location-map-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbs-location-content {
    text-align: center;
    color: #ffffff;
    padding: 2rem;
    max-width: 700px;
}


.tbs-location-name {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.tbs-food-truck {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.tbs-label {
    opacity: 0.7;
    margin-right: 0.5rem;
}

.tbs-map-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    letter-spacing: 1px;
}

.tbs-contact {
    font-size: 1rem;
    opacity: 0.9;
}

.tbs-hours {
    font-size: 0.9rem;
    opacity: 0.75;
    line-height: 1.7;
}

/* /////////extras/////// */




.bg-purple { background-color: #6f42c1 !important; }



/* Section heading */
.tbs-section-heading {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff;
}

/* Location Cards */
.tbs-location-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 13px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
}

.tbs-location-card:hover {
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-2px);
}

.tbs-card-header {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    background: #000000;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tbs-card-body {
    padding: 1.25rem;
    flex: 1;
}

.tbs-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.tbs-card-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.tbs-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 2px;
}

.tbs-card-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.tbs-card-sub {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;

     /* Add these lines */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.tbs-card-sub span{
 color: #000;
  background: #ffffffeb;
  padding: 0 4px;
  border-radius: 3px;
    
}
.tbs-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: #0a0a0a;
}

.tbs-card-btn {
    display: block;
    text-align: center;
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.tbs-card-btn:hover {
    opacity: 0.7;
}

.card-img-link-wrapper{
width: 98px;
}

/* .tbs-music-badge{
height: 1.2rem;
  width: auto;
  margin-top: -6rem;
  margin-left: -6rem;
}
.tbs-music-badge img{
height:2.2rem;
width:auto;
} */





/* Location link wrapper */
.tbs-loc-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* TMS badge - positioned top-right of the location name */
.tbs-music-badge {
position: absolute;
  top: -2.1rem;
  right: -2rem;
  z-index: 200;
}
.tbs-music-badge title{
    font-family: 'Cardenio', serif;
    font-weight: 700;
}
.tbs-music-badge img {
    height: 2.5rem;
  width: auto;
  opacity: .8;
}







/* Location hero */
.tbs-loc-hero {
    height: 40vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

.tbs-loc-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    justify-content: center; /* Aligns horizontally */
  align-items: center;  
}

.tbs-loc-hero-title {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    margin-top: 4rem;
}

/* Info card */
.tbs-info-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1.5rem;
}

.tbs-info-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tbs-info-row:last-child {
    border-bottom: none;
}

/* Event rows */
.tbs-event-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tbs-event-row:last-child {
    border-bottom: none;
}

.tbs-event-date {
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
    background: #8b0101;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 0.4rem;
}

.tbs-event-day {
    font-family: 'Cardenio', serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: #ffffff;
}

.tbs-event-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(255, 255, 255);
}

.tbs-event-name {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

.tbs-event-time {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.tbs-event-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.52);
    margin-top: 4px;
}

.tbs-event-type {
    flex-shrink: 0;
    /* padding-top: 2px; */
}
.tbs-event-type img{
    height:3rem;
}

.location-panel{
background: #2f2f2fd9;
  border-radius: .5rem;
  margin-top: 14rem;
}


.beer-one-menu > div, .beer-two-menu > div {
position: relative;
}


.secure-contact-list a:hover i {
    color: #ffb63f !important;
}



/* FAQ */

/* ============================================
   FAQ Accordion
   ============================================ */
.tbs-faq-accordion .accordion-item {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.tbs-faq-accordion .accordion-button {
    background: #000000;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 1rem 1.25rem;
    box-shadow: none;
}

.tbs-faq-accordion .accordion-button:not(.collapsed) {
    background: #000000;
    color: #ffffff;
}

.tbs-faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255,255,255,0.2);
}

/* Bootstrap's default chevron is dark — invert it for dark backgrounds */
.tbs-faq-accordion .accordion-button::after {
    filter: invert(1);
}

.tbs-faq-accordion .accordion-body {
    font-family: Montserrat,ui-sans-serif,system-ui,
-apple-system,BlinkMacSystemFont,
Segoe UI,Roboto,Helvetica Neue,Arial,
Noto Sans,sans-serif,"Apple Color Emoji",
"Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    background: #fff;
  color: rgb(4, 4, 4);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  padding: 1.1rem 1.25rem 1.4rem;
}




/* FAQ */



.beerTitle{
margin-top: 9rem !important;
  margin-bottom: -5rem !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
 .contentPanel{
margin-top: 6rem;
  background: #000000c9;
 /* padding-top: 0 !important; */
  max-width: 90%;
  margin-bottom: 3rem;
}

.footer{
background:#000!important;
}

a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}
a:hover{
	color: #fff;
	font-weight: 700;
}

.locBlock,.location-panel{
font-family: Montserrat,ui-sans-serif,system-ui, -apple-system,BlinkMacSystemFont, Segoe UI,Roboto,Helvetica Neue,Arial, Noto Sans,sans-serif,"Apple Color Emoji", "Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";

}

/* Reset rules for mobile viewports (under 992px) */
@media (max-width: 991.98px) {

.us_menu_mobile_control {
        position: absolute;
        top: 16px;    /* Change to your preferred pixel amount */
        right: 16px;  /* Change to your preferred pixel amount */
        z-index: 1050; /* Keeps it on top of other elements */
    }


  /* ul.us_menu .us_brand {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: block;
    margin: 10px auto !important; 
    text-align: center;
  }
ul.us_menu .us_brand {

    left: 161px !important; 
  } */

ul.us_menu .us_brand {
    position: relative !important;
    top: -6rem !important;
    transform: none !important;
    display: block;
    margin: 10px auto !important;
    text-align: center;

  }

ul.us_menu .us_brand img {
    width: 287px !important;
    top: -5rem !important;

    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.35));
}



 .desk-only{
display :none!important;
    }
  .mobile-only{
display :block;
white-space: nowrap;
  }
.tbs-loc-hero-title{
font-size: clamp(20px, 5vw, 80px); 

}
ul.us_menu.dark a, ul.us_menu.dark {
  background: #fff;
}
.us_menu_mobile_control i{
color: rgb(0, 0, 0);
font-size: 2.5rem;
}

.card-img-link-wrapper {
max-width: 91px!important;
}

.beerTitle {
	margin-top: 12rem !important;
	margin-bottom: 1rem !important;
}
.contentPanel {
	margin-top: 0rem;
    max-width: 95%;
  margin-bottom: 3rem;

}

}









/* ============================================
   Shop — Filter Pills
   ============================================ */
.tbs-pill {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}

.tbs-pill:hover {
    border-color: rgba(255,255,255,0.4);
    color: #ffffff;
}

.tbs-pill.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ============================================
   Shop — Product Cards
   ============================================ */
.tbs-shop-card {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.tbs-shop-card:hover {
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-2px);
}

.tbs-shop-card-img {
    aspect-ratio: 1 / 1;
    background: #000000;
    overflow: hidden;
}

.tbs-shop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tbs-shop-card-body {
    padding: 0.85rem 1rem;
}

.tbs-shop-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 4px;
}

.tbs-shop-card-price {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
}

/* ============================================
   Shop — Product Modal
   ============================================ */
.tbs-product-modal {
    background: #111111;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
}

.tbs-product-modal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tbs-product-gallery-main {
    background: #000000;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.tbs-product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tbs-product-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
}

.tbs-product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: opacity 0.15s, border-color 0.15s;
}

.tbs-product-thumb:hover {
    opacity: 0.8;
}

.tbs-product-thumb.active {
    opacity: 1;
    border-color: #ffffff;
}

.tbs-product-gallery-placeholder {
    background: #000000;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    border-radius: 4px;
}

.tbs-product-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
}

/* ============================================
   Cart Drawer (off-canvas)
   ============================================ */
.tbs-cart-drawer {
    background: #0a0a0a;
    color: #ffffff;
    border-left: 1px solid rgba(255,255,255,0.1);
    width: 380px;
}

.tbs-cart-drawer .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tbs-cart-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

.tbs-cart-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.tbs-cart-item-info {
    flex: 1;
}

.tbs-cart-item-name {
    font-weight: 700;
    font-size: 0.85rem;
}

.tbs-cart-item-variant {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

.tbs-cart-item-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.tbs-cart-qty-input {
    width: 50px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
}

.tbs-cart-item-price {
    font-size: 0.85rem;
    font-weight: 700;
}

.tbs-cart-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.2rem;
    line-height: 1;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    cursor: pointer;
}

.tbs-cart-remove:hover {
    color: #ffffff;
}

.tbs-cart-summary {
    padding: 1.25rem;
}



.f-pills{
position: relative;
  z-index: 23;
}


/* ============================================
   Cart icon + badge (drop into nav alongside
   the email/social icon row)
   ============================================ */
.tbs-cart-icon-wrapper {
    position: relative;
    display: inline-block;
}

.tbs-cart-count-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #fff;
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}


/* Mobile floating cart button */
.tbs-mobile-cart-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: pointer;
}

.tbs-mobile-cart-fab:hover {
    background: #e0e0e0;
}

.tbs-mobile-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #000000;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}



/* ////SHOP ADMIN//// */


.tbs-product-admin-card { background: #1a1a1a; border-radius: 8px; overflow: hidden; }
.tbs-product-admin-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tbs-product-admin-body { padding: 12px; }
.tbs-image-dropzone { border: 2px dashed rgba(255,255,255,.2); border-radius: 8px; cursor: pointer; }
.tbs-dropzone-active { border-color: #fff; background: rgba(255,255,255,.05); }
.tbs-image-list-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }



a .fa-bars{
color: #ffffff;
}
a .fa-bars:hover{
color: #000!important;
}
ul.us_menu.dark li:hover > a {
	background-color: transparent!important;
	background-color: var(--bs-secondary, transparent) !important;
}




/* ////PLANNER//// */

/* ===================================================================
   Booking Planner (usersc/booking_planner.php)
   Deliberately breaks the BS5 container width — this is a dense,
   backend-only data grid (10 columns), not a public-facing page, so
   it earns the extra horizontal space.
   =================================================================== */
.planner-shell {
  width: 98%;
  max-width: 1800px;
  margin: 0 auto;
}

.planner-table {
  font-size: 0.875rem;
}

.planner-table th {
  white-space: nowrap;
  font-family: 'Cardenio', serif;
  letter-spacing: .02em;
  background-color: #111;
  border-bottom: 2px solid #6f42c1;
}

.planner-table td {
  vertical-align: middle;
}

.planner-row-school-holiday {
  background-color: rgba(111, 66, 193, 0.12);
}

/* Highlights the current day's row so it's easy to spot while scrolling
   through the 3-month window. Uses the same plain background-color
   approach as .planner-row-school-holiday (rather than the Bootstrap
   --bs-table-bg variable) for consistency. Both rules have identical
   specificity, so this one wins over the school-holiday tint on a day
   that happens to be both, simply because it's declared later in this
   file — keep it below .planner-row-school-holiday if you ever move it. */
.planner-row-today {
  background-color: #2c4131;
}

/* A plain border on <tr> doesn't render reliably in Bootstrap tables
   (border-collapse and per-cell backgrounds get in the way), so the
   "frame" is built from top/bottom borders on every cell in the row,
   plus left/right on the first/last cell to close the box. */
.planner-row-today td {
  border-top: 2px solid #28a745;
  border-bottom: 2px solid #28a745;
}

.planner-row-today td:first-child {
  border-left: 2px solid #28a745;
}

.planner-row-today td:last-child {
  border-right: 2px solid #28a745;
}

/* "Fri-Sun only" filter — a pure visibility toggle, not a data change.
   Every row is already tagged .planner-row-weekend or not at render
   time (see renderDays in booking_planner.php), so this single rule is
   all that's needed to hide/show instantly with no re-render or
   refetch. Month-divider rows are explicitly exempted so they stay
   visible regardless — they're not "a day", so the filter shouldn't
   touch them. */
#plannerBody.planner-weekend-only tr:not(.planner-row-weekend):not(.planner-month-divider) {
  display: none;
}

/* Saturday/Sunday date colouring — independent of the filter above, so
   weekends still stand out even when every day is shown. Weekend
   day-name goes gold; the actual date number stays white regardless
   of weekend/weekday, so the most important piece of info (the date
   itself) doesn't compete for attention with the weekend flag. */
.planner-date-cell.planner-date-weekend .day-name,
.planner-date-cell.planner-date-weekend .day-number {
  color: #c8a12b;
}

.planner-date-cell.planner-date-weekend .day-number {
  color: #fff;
}

/* Divider row between each of the 3 months in the scrolling window.
   Sticky so the current month stays legible while scrolling through
   a long continuous table. */
.planner-month-divider td {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #6f42c1;
  color: #fff;
  font-family: 'Cardenio', serif;
  font-size: 1rem;
  letter-spacing: .03em;
  padding: .5rem .75rem;
}

/* Date number is the largest, most prominent element in the cell —
   month and day-name are secondary context, kept smaller. */
.planner-date-cell .day-month, .planner-date-cell .day-number, .planner-date-cell .day-name {
  font-size: 1.3rem;
  font-family: Montserrat,ui-sans-serif,system-ui,
    -apple-system,BlinkMacSystemFont,
    Segoe UI,Roboto,Helvetica Neue,Arial,
    Noto Sans,sans-serif,"Apple Color Emoji",
    "Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}
.planner-date-cell .day-month, .planner-date-cell .day-name {
  font-size: 1rem;
}

.planner-date-cell .day-name {
  color: #999;
  display: block;
}

.planner-date-cell .day-month {
  color: #999;
  margin-left: .3rem;
}

.planner-badge-public-holiday {
  background-color: #d63384;
}

.planner-badge-sport {
  background-color: #0d6efd;
}

/* Existing confirmed bookings pulled read-only from abspot_events —
   distinct amber tone so it reads as "already live" rather than a
   planner-entered draft act. */
.planner-badge-existing {
  background-color: #b8860b;
  font-size: .72rem;
  white-space: normal;
  text-align: left;
}

/* Cross-venue indicator — a plain readable list below the Act select
   (not compact hover-only chips), showing which OTHER active locations
   already have something on that night. Toggleable via the "Other
   venues' events" checkbox, so grey/quiet by default rather than
   competing with the amber "booked here" badge or the green "act
   assigned" tint. */
.planner-other-loc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.planner-loc-list-item {
  font-size: .72rem;
  line-height: 1.3;
  color: #999;
  cursor: default;
}

/* Public Events — deliberately matched to .planner-loc-list-item's font
   size/color (not styled more prominently) so it reads visually
   consistent with the Act column's cross-venue list right next to it,
   even though the underlying data and permissions are quite different
   (this list is the shared canonical source; that one is an opt-in
   grey aside). The delete "×" only renders in the DOM for admins at
   all (see JS), and fades in on row hover rather than sitting there
   permanently, keeping the list calm for everyone else who can only
   view/add. */
.planner-public-events-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.planner-public-event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  font-size: .72rem;
  line-height: 1.3;
  color: #999;
}

.planner-public-event-delete {
  opacity: 0;
  cursor: pointer;
  color: #dc3545;
  font-weight: 700;
  padding: 0 .3rem;
  transition: opacity .15s ease;
}

.planner-public-event-item:hover .planner-public-event-delete {
  opacity: 1;
}

.planner-moon-icon {
  font-size: 1.1rem;
  cursor: default;
}

.planner-note-icon {
  cursor: pointer;
  font-size: .95rem;
  margin-right: 3px;
  display: inline-block;
}

.planner-note-icon.add-note {
  opacity: .5;
}

.planner-note-icon.add-note:hover {
  opacity: 1;
}

/* Derived "booked" tint — status column was intentionally dropped from
   the schema (see migration notes); this just reflects whether an act
   is assigned, rather than storing a separate available/tentative/
   booked/blocked state. */
.planner-act-cell.has-act {
  background-color: rgba(25, 135, 84, 0.15);
}

/* Confirmed-booking tint — a day that already has something on the
   live site (abspot_events), regardless of whether it resolved to a
   dropdown match. Declared after .has-act so it wins on a day that's
   both (e.g. a manually-assigned act that also happens to match a
   confirmed booking) — light blue reads as "already live", distinct
   from the green "act assigned in the planner" tint. */
.planner-act-cell.confirmed-booking {
  background-color: rgba(23, 162, 184, 0.20);
}

.planner-act-cell.draft-booking {
  background-color: rgba(255, 193, 7, 0.20);
}

/* Bumped to 3 classes (0,0,3,0) so this can never lose a specificity
   fight against .form-select.planner-input below (0,0,2,0), regardless
   of which order the two rules end up in after future edits — the
   earlier version relied on file order alone, which is fragile. */
.planner-act-select.planner-input.confirmed-booking {
  background-color: #bfe3f5 !important;
  border-color: #17a2b8 !important;
}

.planner-act-select.planner-input.draft-booking {
  background-color: #fff3b8 !important;
  border-color: #e0a800 !important;
}

.planner-weather-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

/* Root cause of the white-field bug: the page's own style block forces
   background via `input.form-control` / `textarea.form-control` (element
   + class = specificity 0,0,1,1), which beats a plain `.planner-input`
   (just a class = 0,0,1,0) outright — !important on both sides doesn't
   matter once specificity has already decided the winner. Matching that
   specificity here (element+class, or two classes for the select case)
   is what actually fixes it; adding !important without fixing the
   selector, like the previous version of this rule did, changes nothing. */
.form-control.planner-input,
.form-select.planner-input {
  background-color: #e9e9e9 !important;
  border: 1px solid #555;
  color: #000;
}

.planner-input:focus {
  background-color: #ffffff;
  border-color: #8a63d2;
  color: #000;
  box-shadow: none;
}

.planner-input::placeholder {
  color: #777;
}

/* Note popovers — dark themed to match the rest of the page, since
   Bootstrap's default popover is light and would clash. */
.popover {
  --bs-popover-max-width: 320px;
  --bs-popover-bg: #1a1a1a;
  --bs-popover-border-color: #444;
  --bs-popover-header-bg: #111;
  --bs-popover-header-color: #fff;
  --bs-popover-body-color: #eee;
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
  border-top-color: #444 !important;
}

.planner-note-entry {
  font-size: .85rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.planner-note-divider {
  border: none;
  border-top: 1px dashed #555;
  margin: .5rem 0;
}
/* ////PLANNER//// */

/* ////MARKETING//// */

/* ===================================================================
   Marketing Tab (usersc/booking_planner_marketing_settings.php)
   =================================================================== */
.mkt-tier-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.mkt-add-task-form {
  border-top: 1px dashed #444;
  padding-top: .75rem;
  margin-top: .5rem;
}

/* Reuses the exact same light-blue treatment as the Planner grid's
   .planner-act-select.confirmed-booking — same visual language for
   "this is set" across both tabs. Same 3-class specificity trick is
   needed here too, to beat the page's own forced-white .form-select
   override (see the Planner's equivalent rule for the full
   specificity-math explanation). */
.mkt-assignee-select.planner-input.assigned {
  background-color: #bfe3f5 !important;
  border-color: #17a2b8 !important;
}

/* Pale panel to visually flag "this needs attention" — deliberately
   distinct from the dark theme everywhere else on the page. Targets
   .card-header too since Bootstrap's card header usually carries its
   own background tint that would otherwise fight the panel colour. */
.mkt-needs-tier-panel,
.mkt-needs-tier-panel .card-header {
  background-color: rgb(253, 243, 243) !important;
  color: #000 !important;
}
/* ////MARKETING//// */