/*
Theme Name: Mellow - Hotel HTML Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Mellow is specially designed for Hotel Website by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Outline Buttons
    - Button Hover Effects

3. CONTENT ELEMENTS
  - Dropdown
  - Form
  - Svg Color
  - Swiper
  - Modal Video
  - Preloader

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Rooms Section
  4.4 Services Section

5. PAGES STYLE
  5.1 About page
  5.2 Blog page 
  5.3 Booking page 
  5.4 Gallery page
  5.5 Reviews page 
  5.5 FAQs page 


  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #c49c74;
  --secondary-color: #F9F6F3;
  --black-color: #1A1A1A;
  --dark-color: #353535;
  --primary-color-200: #E8F0F1;
  --primary-color-400: #c4e9ed;
  --gray-color: #777F81;
  --light-color: #fdfdfd;

  /* bootstrap color-scheme */
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #EAE5DD;
  --bs-gray-300: #DCDCDC;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-body-color-rgb: 53, 53, 53;
  --bs-primary-rgb: 209, 104, 6;
  /* changed from very light to darker secondary for contrast */
  --bs-secondary-rgb: 108, 117, 125;

  /* Fonts: define stacks that include a generic family fallback */
  --heading-font: "Sriracha", cursive, sans-serif;
  --body-font: "Cabin", sans-serif;

  /* heading variables used throughout the stylesheet; define defaults so references resolve */
  --heading-font-weight: 400;
  --heading-color: var(--black-color);
  --heading-line-height: 1.15;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--dark-color);
  margin: 0;
}

p {
  color: var(--dark-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}

/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 5em;
  padding-bottom: 5em;
}

.padding-medium {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-large {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-side {
  padding-left: 6rem;
  padding-right: 6rem;
}



@media (max-width: 1400px) {
  .padding-side {
    padding-left: 5rem;
    padding-right: 5rem;
  }

    #reportSelectors {

    }
}

@media (max-width: 1200px) {
  .padding-side {
    padding-left: 4rem;
    padding-right: 4rem;
  }

    .navbar-brand {
        margin-left: 1rem !important;
        grid-area: brand;
        justify-self: start !important;
    }
}

@media (max-width: 992px) {
  .padding-side {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 768px) {
    #bigText, #carousel {
        max-width: 80% !important;
    }


  .padding-side {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .padding-large {
    padding-top: 15em;
  }
}

@media (max-width: 576px) {
  .padding-side {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .padding-large {
    padding-top: 18em;
  }

}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black-color);
  font-family: var(--heading-font), sans-serif;
  text-transform: capitalize;
  font-weight: 400;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/
.btn {
  --bs-btn-padding-x: 2.4rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  text-transform: capitalize;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: #ffdeba;
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--dark-color);
  --bs-btn-disabled-bg: var(--secondary-color);
  --bs-btn-disabled-border-color: var(--secondary-color);
}

/* - Outline Buttons
--------------------------------------------------------------*/
.btn-outline-primary {
    --bs-btn-color: var(--light-color) !important;
    --bs-btn-bg: var(--bs-gray-700);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: var(--bs-gray-100);
    --bs-btn-hover-bg: var(--bs-gray-900);
    --bs-btn-hover-border-color: var(--secondary-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--dark-color);
    --bs-btn-active-bg: var(--secondary-color);
    --bs-btn-active-border-color: var(--secondary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--dark-color);
    --bs-btn-disabled-bg: var(--secondary-color);
    --bs-btn-disabled-border-color: var(--secondary-color);
    align-content: center;
}

/* - Button Hover Effects
------------------------------------------------------------- */
.btn-arrow {
  position: relative;
  transition: background-color 300ms ease-out;
}

.btn-warning {
    --bs-btn-color: var(--light-color);
}

.btn-outline-info {
    --bs-btn-color: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13,202,240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0dcaf0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0dcaf0;
    --bs-gradient: none;
}

.badge-status-checked-in {
    background-color: #0dcaf0 !important; /* Bootstrap primary/blue */
    color: #ffffff; !important;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13,202,240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0dcaf0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0dcaf0;
    --bs-gradient: none;
}

.btn-arrow span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.btn-arrow:hover span {
  transform: translate3d(-0.7rem, 0, 0);
}

.btn-arrow svg {
  position: absolute;
  right: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn-arrow:hover svg {
  opacity: 1;
  right: -1.6rem;
}


/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  color: var(--dark-color);
  text-transform: capitalize;
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--secondary-color);
}

/* Form
------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

select:focus {
  box-shadow: none;
}

/* Svg Color
------------------------------------------------------------- */
svg.light-color {
  color: var(--light-color);
}

svg.dark-color {
  color: var(--dark-color);
}

svg.color {
  color: #ECB27B;
}

svg.primary-color {
  color: var(--primary-color);
}

svg.social {
  color: #ECB27B;
}

svg.social:hover {
  color: var(--primary-color);
}



/* Swiper
------------------------------------------------------------- */

/* room */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

.room-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background-color: var(--primary-color);
}

.room-pagination .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

/* gallery */
.main-slider-button-next.swiper-button-disabled,
.main-slider-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}


/* modal video override
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}


/* Preloader
------------------------------------------------------------- */
.preloader {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #D16806;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ECB27B;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f7dac1;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/

a.nav-link {
  text-transform: capitalize;
  color: var(--dark-color);
}

a.nav-link:focus {
  color: var(--dark-color);
}

a.nav-link.active,
a.nav-link:hover {
  color: var(--primary-color) !important;
  outline: none;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media (max-width: 1280px) {
  a.nav-link {
    font-size: 30px;
    padding: 15px 0 15px 0 !important;
  }
}

.container.py-4 {
    max-width: 92vw;
}


/* 4.2 Billboard
/*----------------------------------------------*/

/* date */
div.datetime-container,
div.datetime-container * {
  box-sizing: border-box;
  font-family: var(--body-font);
}

div.datetime-container button.date,
div.datetime-container button.time {
  background-color: transparent;
  border: 1px solid #E9E9E9;
  border-radius: 8px;
  text-transform: capitalize;
  text-align: start;
  padding: 8px 20px;
  color: var(--gray-color);
  letter-spacing: 0.1rem;
}

div.datetime-container button>span {
  display: inline-block;
  margin: 0 -6px;
}

div.datetime-container button span.week-day {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.week-day::after {
  content: ",";
  display: inline-block;
}

div.datetime-container button span.month {
  font-size: 16px;
  text-align: right;
}

div.datetime-container button span.hours,
div.datetime-container button span.month-day {
  font-size: 16px;
  text-align: center;
  width: 45px;
}

.month br {
  display: none;
}

@media (max-width: 1500px) {
  div.picker {
    width: max-content;
  }
}


/* 4.3 Rooms Section
/*----------------------------------------------*/
.room-item img.post-image {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.room-item:hover img.post-image {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.product-description {
  opacity: 0;
  bottom: -125px;
  transition: all 0.5s ease-in-out;
}

.room-item:hover .product-description {
  opacity: 1;
  bottom: 20px;
}

@media only screen and (min-width:770px) and (max-width: 1400px) {
  .product-description {
    bottom: -180px;
  }
}


/* 4.4 Services Section
/*----------------------------------------------*/

.service {
  border: 1px solid #F4E2D8;
  transition: all 0.3s ease-in-out;
}

.service:hover {
  border: 1px solid var(--primary-color);
}


/* 4.5 Blog Section
/*----------------------------------------------*/

.blog-post img.blog-img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.blog-post:hover img.blog-img {
  opacity: 0.5;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/

/*--------------------------------------------------------------
5.1 About page 
--------------------------------------------------------------*/

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--dark-color);
}

svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.1);
  }

}

/*--------------------------------------------------------------
  5.2 Blog page 
  --------------------------------------------------------------*/
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/*--------------------------------------------------------------
 5.3 Booking page 
  --------------------------------------------------------------*/
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  box-shadow: none;
}

/*--------------------------------------------------------------
 5.4 Gallery page 
  --------------------------------------------------------------*/
button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.5 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

.rate {
  color: var(--primary-color);
}



/*--------------------------------------------------------------
5.6 FAQs page 
--------------------------------------------------------------*/

/* accordian style override  */

.accordion {
  --bs-accordion-border-color: var(--primary-color);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-header {
  margin-bottom: 0;
  border-top: 1px solid var(--primary-color);
}

.accordion-button {
  font-family: var(--heading-font, sans-serif);
  /* validator sometimes fails to resolve custom properties; use safe fallbacks */
  font-weight: 400; /* fallback for --heading-font-weight */
  color: var(--heading-color, #1A1A1A);
  line-height: 1.15; /* fallback for --heading-line-height */
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--heading-color, #1A1A1A);
  background-color: transparent;
  box-shadow: none;
}

/* Improve contrast for secondary badges */
.badge.text-bg-secondary {
    background-color: #565e64 !important; /* A darker gray, !important forces it */
    color: #fff !important;
}

/* Semantic status badges - use these instead of bg-success/bg-secondary etc. */
.badge-status-completed,
.badge-status-success { /* alias */
  background-color: #198754 !important; /* Bootstrap success */
  color: #fff !important;
}
.badge-status-info {
  background-color: #0d6efd !important; /* Bootstrap primary/blue */
  color: #fff !important;
}
.badge-status-pending,
.badge-status-warning {
  background-color: #ffc107 !important; /* Bootstrap warning */
  color: #212529 !important; /* dark text for contrast on warning */
}
.badge-status-inprogress,
.badge-status-primary {
  background-color: #0dcaf0 !important; /* info/teal */
  color: #ffffff !important;
}
.badge-status-cancelled,
.badge-status-danger {
  background-color: #dc3545 !important; /* danger */
  color: #fff !important;
}
.badge-status-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 1) !important;
  color: #fff !important;
}

/* ensure badges keep expected padding/shape */
.badge-status-completed, .badge-status-checked-in, .badge-status-pending, .badge-status-inprogress, .badge-status-cancelled, .badge-status-secondary {
  display: inline-block;
  padding: .35em .6em;
  font-size: .9em;
  border-radius: .5rem;
  vertical-align: middle;
}

.badge-status-confirmed {
  background-color: #28a745 !important; /* Bootstrap success green */
  color: #ffffff !important;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

.badge-status-reserved {
  background-color: #28a745 !important; /* Bootstrap success green */
  color: #ffffff !important;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

.btn-secondary {
    --bs-btn-bg: var(--dark-color);
}

.btn-sm.btn-danger {
    color:white!important;
}

#mainNavbar {
    justify-content: center;

    margin: 0 auto 0 1rem;
    color: black !important;
}

#mainNavbar2 {
    justify-content: end;

    color: black !important;
}

.navbar-nav {
    margin-right: unset !important;
}

.navbar.navbar-expand-lg {
    color: #FFFFFF;
    background-image: linear-gradient(45deg, #FFFFFF , #CCCCCC 100%);
}

.img-fluid {
    width: 95% !important;
}

.btn.btn-sm {
    color: black ;
    border-color: black;
}

.table-responsive {
    margin: 0 1rem 0 1rem !important;
    /*padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);*/
}

thead {
    position: sticky !important;
}

#logo {
    max-width: 200px;
    height: auto;
    margin: -1rem
}

/*.table-responsive {*/
/*    max-height: 25rem;*/
/*}*/



/*@media (min-width: 1050px) {*/
/*    .navbar-expand-1050 .navbar-collapse {*/
/*        display: flex !important;     !* expanded menus *!*/
/*        flex-basis: auto;*/
/*    }*/
/*    .navbar-expand-1050 .navbar-toggler {*/
/*        display: none;                !* hide burger ≥1050px *!*/
/*    }*/
/*}*/

.lead.text-danger {
    color: var(--bs-danger-text-emphasis) !important;
    -webkit-text-fill-color: var(--bs-danger-text-emphasis) !important;
}

.form-select.form-select-sm.w-auto {
    display: inline !important;
    margin-left: 0.5rem !important;
}

/* Styles for screens smaller than 1000px (tablets) */
@media screen and (max-width: 1280px) {
    .navbar-expand-lg .navbar-nav{flex-direction:column}

    .navbar .container-fluid {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
      "brand   toggler"
      "nav1    nav1"
      "nav2    nav2";
        align-items: center;
        row-gap: 0 !important;
    }

    #logo {
        /*width: 35%; !* Make image full width on smaller screens *!*/
        /*height: auto;*/
        /*margin-left: 0 !important;*/
    }

    #mainNavbar {
        grid-area: nav1;
        justify-self: end;
        margin: 0 !important;
    }

    #mainNavbar2 {
        grid-area: nav2;
        justify-self: end;
        margin: 1rem 0 0 0 !important;
    }

    #mainNavbar .navbar-nav,
    #mainNavbar2 .navbar-nav {
        align-items: flex-end;
    }

    #mainNavbar .nav-link,
    #mainNavbar2 .nav-link {
        text-align: right;
        width: 100%;
    }

    #mainNavbar .dropdown-menu,
    #mainNavbar2 .dropdown-menu {
        right: 0 !important;
    }

    .navbar-toggler {
        margin-left: -1rem !important;
        display: grid !important;
    }

    #navToggle      { grid-area: toggler; justify-self: end; }

    .navbar .navbar-collapse.collapse { display: none !important; }
    .navbar .navbar-collapse.show {
        display: block !important;
        width: max-content;
    }

    #mainNavbar .navbar-nav, #mainNavbar2 .navbar-nav { align-items: flex-end; }
    #mainNavbar .nav-link,   #mainNavbar2 .nav-link   { text-align: right; width: 100%; }

    .navbar .navbar-collapse { margin: 0 !important; padding: 0 !important; }
    .navbar .navbar-nav      { margin: 0 !important; }
    .navbar .nav-item        { margin: 0 !important; }
}

.navbar-collapse {
    flex-basis: unset !important;
}

/*!* Styles for screens smaller than 768px *!*/
/*@media screen and (max-width: 767px) {*/
/*    .navbar-brand {*/
/*        margin-left: 1rem !important;*/
/*    }*/
/*}*/

/* !*Styles for screens smaller than 480px*!*/
/*@media screen and (max-width: 479px) {*/
/*    .navbar-brand {*/
/*        margin-left: 2rem !important;*/
/*    }*/
/*}*/


/* Dropdown: anchor exactly under toggle, no animated offset */
#mainNavbar .dropdown-menu,
#mainNavbar2 .dropdown-menu {
    position: absolute;
    top: 100%;
    right: auto;
    left: auto;
    margin-top: 0 !important;          /* <-- remove the top gap */
}

/* Animation without moving the menu (opacity only) */
.navbar .dropdown-menu {
    display: block !important;          /* allow transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
.navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease-out, visibility 0s;
}






/* (Optional) tiny item fade; no translate to avoid height changes */
#internalSidebar .dropdown-menu .dropdown-item {
    opacity: 1 !important;
    transition: none !important;
}
.navbar .dropdown-menu.show .dropdown-item { opacity: 1; }
.navbar .dropdown-menu.show .dropdown-item:nth-child(1){transition-delay:20ms}
.navbar .dropdown-menu.show .dropdown-item:nth-child(2){transition-delay:40ms}
.navbar .dropdown-menu.show .dropdown-item:nth-child(3){transition-delay:60ms}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .navbar .dropdown-menu, .navbar .dropdown-menu .dropdown-item {
        transition: none !important; opacity: 1 !important; visibility: visible !important;
    }
}

.btn.btn-sm.btn-link.text-decoration-none {
    width: 100% !important;
}

#logoFooter {
    font-family: "Borel", cursive;
    /*font-optical-sizing: auto;*/
    /*font-style: normal;*/
    /*font-weight: 600;*/

    /*width: 110% !important;*/
}

.footer-fade {
    position: relative;
}

/* gradient inside the top of the footer */
.footer-fade::before {
    content: "";
    position: absolute;
    top: -60px;                  /* start at the top edge of the footer */
    left: 0;
    right: 0;
    height: 60px;            /* thickness of the fade */
    pointer-events: none;

    /* page (light) -> footer (dark) */
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,                      /* your page/bg-light color */
            rgb(var(--bs-dark-rgb)) 100%     /* your bg-dark color */
    );
}

.footer-main {
    font-size: 0.9rem;
}

.footer-logo {
    max-height: 100px;
    width: auto;
    margin-bottom: -1rem !important;
    margin-left: -0.5rem;
}

.footer-link {
    color: #aaa;
    text-decoration: none;
}
.footer-link:hover {
    text-decoration: underline;
}

/* circular social buttons */
.footer-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #e1e1e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.footer-social-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
}

.bg-primary {
    background-color: #ffca2c !important;
}

/*sidebar boogaloo */

:root {
    --sidebar-width-collapsed: 80px;
    --sidebar-width-expanded: 260px;
}

/* base sidebar */
.internal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width-expanded);
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;              /* <-- important */
    flex-direction: column;     /* stack header, menu, footer */
    padding: 1rem 0.75rem;
    z-index: 1040;
    transition: width 220ms ease;
}

.internal-sidebar .nav-link {
    font-size: 1.1rem; /* whatever looks right on desktop */
    padding: 0.6rem 0.5rem;
}

/* Under 999px: cancel the "30px" font-size just for the sidebar */
@media (max-width: 1280px) {
    .internal-sidebar .nav-link {
        font-size: 1.1rem !important;  /* same as desktop */
        padding: 0.6rem 0.5rem !important;
    }
}

.flex-column {
    align-content: start;
}

.sidebar-toggle {
    align-content: start;
    margin-left: 0.62rem;
}

/* content shift when sidebar present */
body.has-internal-sidebar main,
body.has-internal-sidebar .container,
body.has-internal-sidebar .container-fluid {
    margin-left: var(--sidebar-width-expanded);
    transition: margin-left 180ms ease;
}

/* header bits */
.sidebar-header { padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;          /* choose a value that fits the big logo */}

.sidebar-logo-collapsed {
    height: 45px;
    width: auto;
    display: none;
    opacity: 0;
    pointer-events: none;
}
.sidebar-logo-expanded {
    height: 90px;
    width: auto;
    display: inline-block;
    opacity: 1;
}

.sidebar-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* base state: both present, but we’ll fade them */
.sidebar-logo-collapsed,
.sidebar-logo-expanded {
    max-height: 100%;
    display: block;
    position: absolute;              /* stack them */
    left: 0;
    transform: none;
    transition: opacity 0.3s ease;   /* <-- duration here */
}

.sidebar-toggle {
    color: #555;
    font-size: 1.2rem;
}

/* links */
.sidebar-menu {
    margin-top: 1rem;      /* whatever looks nice expanded */
}

.sidebar-menu .nav-link {
    color: #333;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
}
.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link.show {
    background-color: #f1f3f5;
    color: #000;
}

.sidebar-icon  { text-align: center; width: 1.5rem; font-size: 1.1rem; margin-right: 0.75rem; }
.sidebar-label { white-space: nowrap; transition: opacity 160ms ease; }

.sidebar-footer {
    border-top: 1px solid #e0e0e0;
    position: relative;
}

/* by default (expanded) show user + logout, hide time */
.sidebar-user-block {
    /*display: block;*/
    opacity: 1;
    max-height: 200px;        /* big enough for text + button */
    transform: translateY(0);
    overflow: hidden;
}
.sidebar-time {
    /*display: none;*/
    opacity: 0;
    max-height: 0;
    transform: translateY(4px);
    overflow: visible;

    display: block;      /* take full row */
    width: 100%;         /* span the whole footer area */
    text-align: center;  /* center the clock text */
}

.sidebar-user-block,
.sidebar-time {
    transition:
            opacity 200ms ease,
            max-height 200ms ease,
            transform 200ms ease;
}

/* when sidebar is collapsed: hide user+logout, show time */
body.sidebar-collapsed .sidebar-user-block {
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
    pointer-events: none;     /* avoid focus/click while hidden */
}

body.sidebar-collapsed .sidebar-time {
    opacity: 1;
    max-height: 50px;         /* enough for one line of text */
    transform: translateY(0);
}

/* collapsed state: hide user block, show clock */
body.sidebar-collapsed:not(.sidebar-open) .sidebar-user-block {
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

body.sidebar-collapsed:not(.sidebar-open) .sidebar-time {
    opacity: 1;
    max-height: 40px;
    transform: translateY(0);
}

/* ---- COLLAPSED STATE ---- */

body.sidebar-collapsed .internal-sidebar {
    width: var(--sidebar-width-collapsed);
}

body.sidebar-collapsed main,
body.sidebar-collapsed .container,
body.sidebar-collapsed .container-fluid {
    margin-left: var(--sidebar-width-collapsed);
}

/* hide labels when collapsed */
body.sidebar-collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* center icons when collapsed */
body.sidebar-collapsed .sidebar-menu .nav-link {
    justify-content: center;
    /*margin-top: 0.5rem;      !* same as above *!*/
    /*padding-top: 0.35rem;*/
    /*padding-bottom: 0.35rem;*/
}

body.sidebar-collapsed .sidebar-menu .nav {
    display: flex;
    flex-direction: column;

}

body.sidebar-collapsed .sidebar-icon {
    margin-right: 0;
}

/* swap logos */
/*body.sidebar-collapsed .sidebar-logo-expanded { display: none; }*/
/*body.sidebar-collapsed .sidebar-logo-collapsed { display: inline-block; }*/

/* collapsed sidebar: show small logo, hide big */
body.sidebar-collapsed .sidebar-logo-collapsed {
    opacity: 1;
    pointer-events: auto;
}
body.sidebar-collapsed .sidebar-logo-expanded {
    opacity: 0;
    pointer-events: none;
}

/*!* optional: overlay behaviour on small screens, if you want *!*/
/*@media (max-width: 767px) {*/
/*    .internal-sidebar {*/
/*        width: var(--sidebar-width-expanded);*/
/*        transition: transform 200ms ease;*/
/*    }*/
/*    body.sidebar-open .internal-sidebar {*/
/*        !*transform: translateX(0);*!*/
/*        width: var(--sidebar-width-expanded);*/
/*    }*/
/*    body.has-internal-sidebar main,*/
/*    body.has-internal-sidebar .container,*/
/*    body.has-internal-sidebar .container-fluid {*/
/*        margin-left: 0;*/
/*    }*/
/*}*/

.sidebar-backdrop {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 1030;           /* below sidebar (1040), above content */
    transition: opacity 200ms ease;
}

/* when open (used on mobile) */
body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* MOBILE: off-canvas drawer */
@media (max-width: 767px) {


    /* Start collapsed (thin) but overlay main content */
    .internal-sidebar {
        width: var(--sidebar-width-collapsed);
        transform: none;                      /* no X-translate */
        transition: width 220ms ease;         /* animate width */
    }

    /* When open, grow to full width over the content */
    body.sidebar-open .internal-sidebar {
        width: var(--sidebar-width-expanded);
    }

    /* Main content is always offset by collapsed width only */
    body.has-internal-sidebar main,
    body.has-internal-sidebar .container,
    body.has-internal-sidebar .container-fluid {
        margin-left: var(--sidebar-width-collapsed) !important;
        transition: margin-left 220ms ease;
    }

    /* When open, do NOT move the content more right */
    body.sidebar-open main,
    body.sidebar-open .container,
    body.sidebar-open .container-fluid {
        margin-left: var(--sidebar-width-collapsed) !important;
    }
}

/* ---------- DESKTOP BEHAVIOUR (>=768px) ---------- */
@media (min-width: 768px) {
    .internal-sidebar {
        transform: none; /* just in case */
    }

    /* Desktop layout: content margin-left follows collapsed vs expanded */
    body.has-internal-sidebar main,
    body.has-internal-sidebar .container-fluid {
        margin-left: var(--sidebar-width-expanded);
    }

    body.sidebar-collapsed main,
    body.sidebar-collapsed .container-fluid {
        margin-left: var(--sidebar-width-collapsed);
    }
}

/* Stack "Signed in as" above the buttons on small screens
   for the customer navbar and homepage navbar only */
@media (max-width: 440px) {

    /* the flex wrapper that holds "Signed in as" + buttons */
    #customerNav #mainNavbar2 .d-flex,
    #commonNav   #mainNavbar2 .d-flex {
        flex-wrap: wrap;          /* allow items to go onto a new line */
        justify-content: end;  /* center everything */
        row-gap: 0.5rem;          /* vertical spacing between rows */
    }

    /* make "Signed in as ..." take a whole row */
    #customerNav #userName,
    #commonNav   #userName {
        flex-basis: 100%;         /* full width = its own line */
        text-align: end;       /* center the text */
        margin-right: 0.3rem;
        margin-bottom: -0.2rem;
    }
}


/* Sidebar dropdown menus: vertical sub-menus */
#internalSidebar .dropdown-menu {
    position: static;
    float: none;
    margin: 0.25rem 0 0 2.2rem;
    padding: 0.25rem 0;
    border-radius: 0.5rem;
    background-color: #ffffff;               /* <-- solid white */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* optional shadow */
    border: 1px solid rgba(0,0,0,0.05);
}

/* hidden by default, shown when .show is added */
#internalSidebar .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    display: none; /* hidden by default */
    transition: none !important; /* stop fade animation */
}
/* Shown state */
#internalSidebar .dropdown-menu.show {
    display: block !important;
}

.cell-booked, .cell-available {
    font-size: 1.2rem !important;
}

.grid-cell {
    align-content: center !important;
}