/*
@File: Golan HTML Template

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************
** - Default CSS Style 
** - Section Title Style
** - Navbar Area CSS Style
** - Main Banner Area CSS Style
** - Inner Banner CSS Style
** - About Us CSS Style
** - Footer Area CSS Style
** - Go Top Area Style
** - Other Area Style

*******************************************
/*

/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --headerFonts: 'Teko', sans-serif;
  --bodyFonts: 'Roboto', sans-serif;
  --redColor: #DA1D25;
  --titleColor: #000000;
  --bodyColor: #555555;
  --whiteColor: #ffffff;
  --fontSize: 16px;
  --transition: .5s;
}
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--fontSize);
  font-family: var(--bodyFonts);
}

p {
  color: var(--bodyColor);
  margin-bottom: 10px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
}

button {
  outline: 0;
}

button:focus {
  outline: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.4;
  font-family: var(--headerFonts);
}

h3 {
  font-size: 26px;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

.pt-150 {
  padding-top: 150px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.mb-45 {
  margin-bottom: 45px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.border-radius-5 {
  border-radius: 5px !important;
}

.border-radius-50 {
  border-radius: 50px !important;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.border-radius-0 img {
  border-radius: 0 !important;
}

.box-shadow {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.default-btn {
  padding: 15px 30px;
  color: var(--whiteColor);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
  background-color: var(--redColor);
  border: none;
  outline: none;
}

.default-btn i {
  position: relative;
  top: 3px;
  margin-left: 5px;
}

.default-btn::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  left: -35%;
  -webkit-transform: skew(30deg);
          transform: skew(30deg);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: var(--titleColor);
  opacity: 0;
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.default-btn:hover {
  color: var(--whiteColor);
  position: relative;
}

.default-btn:hover::before {
  opacity: 1;
  height: 100%;
  width: 135%;
}

.default-btn.two {
  background-color: var(--titleColor);
}

.default-btn.two:hover {
  color: var(--whiteColor);
}

.default-btn.two:hover::before {
  background-color: var(--redColor);
}

.section-title span {
  color: var(--redColor);
  display: block;
  margin-bottom: 7px;
}

.section-title h2 {
  font-size: 45px;
  margin-top: 0;
  line-height: 1.2;
  margin-bottom: 0;
  max-width: 610px;
}

.section-title p {
  padding-top: 15px;
  margin-bottom: 0;
  max-width: 570px;
}

.top-header {
  padding: 15px 0;
  position: relative;
  z-index: 5;
}

.header-left {
  float: left;
}

.header-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-left ul li {
  display: inline-block;
  padding-left: 30px;
  position: relative;
  color: var(--whiteColor);
  margin-right: 35px;
  font-size: 15px;
}

.header-left ul li:last-child {
  margin-right: 0;
}

.header-left ul li i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  font-size: 20px;
  color: var(--redColor);
}

.header-left ul li a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-left ul li a:hover {
  color: var(--redColor);
}

.header-right {
  float: right;
}

.header-right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-right ul li {
  display: inline-block;
  margin-right: 10px;
}

.header-right ul li:last-child {
  margin-right: 0;
}

.header-right ul li a {
  color: var(--whiteColor);
  font-size: var(--fontSize);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-right ul li a:hover {
  color: var(--redColor);
}

/*================================
Navbar Area
===================================*/
.desktop-nav {
  background-color: #191918;
  padding-top: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar {
  padding-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.desktop-nav .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

.desktop-nav .navbar .navbar-nav .nav-item {
  position: relative;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-right: 0;
  padding-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: -2px;
  top: 6px;
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item a {
  font-size: var(--fontSize);
  color: var(--whiteColor);
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 20px;
  margin-right: 20px;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--whiteColor);
  border: none;
  position: absolute;
  visibility: hidden;
  -webkit-transform-origin: top;
          transform-origin: top;
  border-radius: 0;
  display: block;
  width: 250px;
  z-index: 99;
  opacity: 0;
  top: 80px;
  left: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
  padding: 0;
  border-bottom: 1px solid #f0eeee;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
  border: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--titleColor);
  padding: 12px 20px 9px;
  margin: 0;
  font-size: 15px;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 11px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
  font-size: 15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

/*
@File: Golan HTML Template

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************
** - Default CSS Style 
** - Section Title Style
** - Navbar Area CSS Style
** - Main Banner Area CSS Style
** - Inner Banner CSS Style
** - About Us CSS Style
** - Footer Area CSS Style
** - Go Top Area Style
** - Other Area Style

*******************************************
/*

/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --headerFonts: 'Teko', sans-serif;
  --bodyFonts: 'Roboto', sans-serif;
  --redColor: #DA1D25;
  --titleColor: #000000;
  --bodyColor: #555555;
  --whiteColor: #ffffff;
  --fontSize: 16px;
  --transition: .5s;
}
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--fontSize);
  font-family: var(--bodyFonts);
}

p {
  color: var(--bodyColor);
  margin-bottom: 10px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
}

button {
  outline: 0;
}

button:focus {
  outline: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.4;
  font-family: var(--headerFonts);
}

h3 {
  font-size: 26px;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

.pt-150 {
  padding-top: 150px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.mb-45 {
  margin-bottom: 45px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.border-radius-5 {
  border-radius: 5px !important;
}

.border-radius-50 {
  border-radius: 50px !important;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.border-radius-0 img {
  border-radius: 0 !important;
}

.box-shadow {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.default-btn {
  padding: 15px 30px;
  color: var(--whiteColor);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
  background-color: var(--redColor);
  border: none;
  outline: none;
}

.default-btn i {
  position: relative;
  top: 3px;
  margin-left: 5px;
}

.default-btn::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  left: -35%;
  -webkit-transform: skew(30deg);
          transform: skew(30deg);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: var(--titleColor);
  opacity: 0;
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.default-btn:hover {
  color: var(--whiteColor);
  position: relative;
}

.default-btn:hover::before {
  opacity: 1;
  height: 100%;
  width: 135%;
}

.default-btn.two {
  background-color: var(--titleColor);
}

.default-btn.two:hover {
  color: var(--whiteColor);
}

.default-btn.two:hover::before {
  background-color: var(--redColor);
}

.section-title span {
  color: var(--redColor);
  display: block;
  margin-bottom: 7px;
}

.section-title h2 {
  font-size: 45px;
  margin-top: 0;
  line-height: 1.2;
  margin-bottom: 0;
  max-width: 610px;
}

.section-title p {
  padding-top: 15px;
  margin-bottom: 0;
  max-width: 570px;
}

.top-header {
  padding: 15px 0;
  position: relative;
  z-index: 5;
}

.header-left {
  float: left;
}

.header-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-left ul li {
  display: inline-block;
  padding-left: 30px;
  position: relative;
  color: var(--whiteColor);
  margin-right: 35px;
  font-size: 15px;
}

.header-left ul li:last-child {
  margin-right: 0;
}

.header-left ul li i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  font-size: 20px;
  color: var(--redColor);
}

.header-left ul li a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-left ul li a:hover {
  color: var(--redColor);
}

.header-right {
  float: right;
}

.header-right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-right ul li {
  display: inline-block;
  margin-right: 10px;
}

.header-right ul li:last-child {
  margin-right: 0;
}

.header-right ul li a {
  color: var(--whiteColor);
  font-size: var(--fontSize);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-right ul li a:hover {
  color: var(--redColor);
}

/*================================
Navbar Area
===================================*/
.desktop-nav {
  background-color: #191918;
  padding-top: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar {
  padding-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.desktop-nav .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

.desktop-nav .navbar .navbar-nav .nav-item {
  position: relative;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-right: 0;
  padding-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: -2px;
  top: 6px;
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item a {
  font-size: var(--fontSize);
  color: var(--whiteColor);
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 20px;
  margin-right: 20px;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--whiteColor);
  border: none;
  position: absolute;
  visibility: hidden;
  -webkit-transform-origin: top;
          transform-origin: top;
  border-radius: 0;
  display: block;
  width: 250px;
  z-index: 99;
  opacity: 0;
  top: 80px;
  left: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
  padding: 0;
  border-bottom: 1px solid #f0eeee;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
  border: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--titleColor);
  padding: 12px 20px 9px;
  margin: 0;
  font-size: 15px;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 11px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
  font-size: 15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

/*
@File: Golan HTML Template

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************
** - Default CSS Style 
** - Section Title Style
** - Navbar Area CSS Style
** - Main Banner Area CSS Style
** - Inner Banner CSS Style
** - About Us CSS Style
** - Footer Area CSS Style
** - Go Top Area Style
** - Other Area Style

*******************************************
/*

/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --headerFonts: 'Teko', sans-serif;
  --bodyFonts: 'Roboto', sans-serif;
  --redColor: #DA1D25;
  --titleColor: #000000;
  --bodyColor: #555555;
  --whiteColor: #ffffff;
  --fontSize: 16px;
  --transition: .5s;
}
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--fontSize);
  font-family: var(--bodyFonts);
}

p {
  color: var(--bodyColor);
  margin-bottom: 10px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
}

button {
  outline: 0;
}

button:focus {
  outline: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.4;
  font-family: var(--headerFonts);
}

h3 {
  font-size: 26px;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

.pt-150 {
  padding-top: 150px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.mb-45 {
  margin-bottom: 45px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.border-radius-5 {
  border-radius: 5px !important;
}

.border-radius-50 {
  border-radius: 50px !important;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.border-radius-0 img {
  border-radius: 0 !important;
}

.box-shadow {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.default-btn {
  padding: 15px 30px;
  color: var(--whiteColor);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
  background-color: var(--redColor);
  border: none;
  outline: none;
}

.default-btn i {
  position: relative;
  top: 3px;
  margin-left: 5px;
}

.default-btn::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  left: -35%;
  -webkit-transform: skew(30deg);
          transform: skew(30deg);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: var(--titleColor);
  opacity: 0;
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.default-btn:hover {
  color: var(--whiteColor);
  position: relative;
}

.default-btn:hover::before {
  opacity: 1;
  height: 100%;
  width: 135%;
}

.default-btn.two {
  background-color: var(--titleColor);
}

.default-btn.two:hover {
  color: var(--whiteColor);
}

.default-btn.two:hover::before {
  background-color: var(--redColor);
}

.section-title span {
  color: var(--redColor);
  display: block;
  margin-bottom: 7px;
}

.section-title h2 {
  font-size: 45px;
  margin-top: 0;
  line-height: 1.2;
  margin-bottom: 0;
  max-width: 610px;
}

.section-title p {
  padding-top: 15px;
  margin-bottom: 0;
  max-width: 570px;
}

.top-header {
  padding: 15px 0;
  position: relative;
  z-index: 5;
}

.header-left {
  float: left;
}

.header-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-left ul li {
  display: inline-block;
  padding-left: 30px;
  position: relative;
  color: var(--whiteColor);
  margin-right: 35px;
  font-size: 15px;
}

.header-left ul li:last-child {
  margin-right: 0;
}

.header-left ul li i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  font-size: 20px;
  color: var(--redColor);
}

.header-left ul li a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-left ul li a:hover {
  color: var(--redColor);
}

.header-right {
  float: right;
}

.header-right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-right ul li {
  display: inline-block;
  margin-right: 10px;
}

.header-right ul li:last-child {
  margin-right: 0;
}

.header-right ul li a {
  color: var(--whiteColor);
  font-size: var(--fontSize);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-right ul li a:hover {
  color: var(--redColor);
}

/*================================
Navbar Area
===================================*/
.desktop-nav {
  background-color: #191918;
  padding-top: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar {
  padding-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.desktop-nav .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

.desktop-nav .navbar .navbar-nav .nav-item {
  position: relative;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-right: 0;
  padding-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: -2px;
  top: 6px;
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item a {
  font-size: var(--fontSize);
  color: var(--whiteColor);
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 20px;
  margin-right: 20px;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--whiteColor);
  border: none;
  position: absolute;
  visibility: hidden;
  -webkit-transform-origin: top;
          transform-origin: top;
  border-radius: 0;
  display: block;
  width: 250px;
  z-index: 99;
  opacity: 0;
  top: 80px;
  left: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
  padding: 0;
  border-bottom: 1px solid #f0eeee;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
  border: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--titleColor);
  padding: 12px 20px 9px;
  margin: 0;
  font-size: 15px;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 11px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
  font-size: 15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

/*
@File: Golan HTML Template

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************
** - Default CSS Style 
** - Section Title Style
** - Navbar Area CSS Style
** - Main Banner Area CSS Style
** - Inner Banner CSS Style
** - About Us CSS Style
** - Footer Area CSS Style
** - Go Top Area Style
** - Other Area Style

*******************************************
/*

/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --headerFonts: 'Teko', sans-serif;
  --bodyFonts: 'Roboto', sans-serif;
  --redColor: #DA1D25;
  --titleColor: #000000;
  --bodyColor: #555555;
  --whiteColor: #ffffff;
  --fontSize: 16px;
  --transition: .5s;
}
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--fontSize);
  font-family: var(--bodyFonts);
}

p {
  color: var(--bodyColor);
  margin-bottom: 10px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
}

button {
  outline: 0;
}

button:focus {
  outline: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.4;
  font-family: var(--headerFonts);
}

h3 {
  font-size: 26px;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

.pt-150 {
  padding-top: 150px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.mb-45 {
  margin-bottom: 45px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.border-radius-5 {
  border-radius: 5px !important;
}

.border-radius-50 {
  border-radius: 50px !important;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.border-radius-0 img {
  border-radius: 0 !important;
}

.box-shadow {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.default-btn {
  padding: 15px 30px;
  color: var(--whiteColor);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
  background-color: var(--redColor);
  border: none;
  outline: none;
}

.default-btn i {
  position: relative;
  top: 3px;
  margin-left: 5px;
}

.default-btn::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  left: -35%;
  -webkit-transform: skew(30deg);
          transform: skew(30deg);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: var(--titleColor);
  opacity: 0;
  z-index: -1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.default-btn:hover {
  color: var(--whiteColor);
  position: relative;
}

.default-btn:hover::before {
  opacity: 1;
  height: 100%;
  width: 135%;
}

.default-btn.two {
  background-color: var(--titleColor);
}

.default-btn.two:hover {
  color: var(--whiteColor);
}

.default-btn.two:hover::before {
  background-color: var(--redColor);
}

.section-title span {
  color: var(--redColor);
  display: block;
  margin-bottom: 7px;
}

.section-title h2 {
  font-size: 45px;
  margin-top: 0;
  line-height: 1.2;
  margin-bottom: 0;
  max-width: 610px;
}

.section-title p {
  padding-top: 15px;
  margin-bottom: 0;
  max-width: 570px;
}

.top-header {
  padding: 15px 0;
  position: relative;
  z-index: 5;
}

.header-left {
  float: left;
}

.header-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-left ul li {
  display: inline-block;
  padding-left: 30px;
  position: relative;
  color: var(--whiteColor);
  margin-right: 35px;
  font-size: 15px;
}

.header-left ul li:last-child {
  margin-right: 0;
}

.header-left ul li i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  font-size: 20px;
  color: var(--redColor);
}

.header-left ul li a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-left ul li a:hover {
  color: var(--redColor);
}

.header-right {
  float: right;
}

.header-right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header-right ul li {
  display: inline-block;
  margin-right: 10px;
}

.header-right ul li:last-child {
  margin-right: 0;
}

.header-right ul li a {
  color: var(--whiteColor);
  font-size: var(--fontSize);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.header-right ul li a:hover {
  color: var(--redColor);
}

/*================================
Navbar Area
===================================*/
.desktop-nav {
  background-color: #191918;
  padding-top: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar {
  padding-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.desktop-nav .navbar ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.desktop-nav .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

.desktop-nav .navbar .navbar-nav .nav-item {
  position: relative;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-right: 0;
  padding-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: -2px;
  top: 6px;
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item a {
  font-size: var(--fontSize);
  color: var(--whiteColor);
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 20px;
  margin-right: 20px;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--whiteColor);
  border: none;
  position: absolute;
  visibility: hidden;
  -webkit-transform-origin: top;
          transform-origin: top;
  border-radius: 0;
  display: block;
  width: 250px;
  z-index: 99;
  opacity: 0;
  top: 80px;
  left: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
  padding: 0;
  border-bottom: 1px solid #f0eeee;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
  border: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--titleColor);
  padding: 12px 20px 9px;
  margin: 0;
  font-size: 15px;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle {
  padding-right: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::before {
  position: absolute;
  content: "\ea4e";
  line-height: 1;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: 'remixicon' !important;
  font-size: 17px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::after {
  display: none;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 11px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
  font-size: 15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  top: -15px;
  visibility: visible;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  top: -15px;
  visibility: visible;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
  color: var(--redColor);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
  top: 100%;
  opacity: 1;
  margin-top: 0;
  visibility: visible;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.desktop-nav-two {
  background-color: transparent;
  position: absolute;
  z-index: 9;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.desktop-nav-two .navbar {
  padding: 0 20px;
  background-color: var(--titleColor);
}

.others-options .optional-item {
  margin-right: 30px;
  position: relative;
  z-index: 1;
}

.others-options .optional-item:first-child {
  padding-right: 30px;
}

.others-options .optional-item:first-child::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 0;
  width: 1px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.4);
}

.others-options .optional-item:last-child {
  margin-right: 0;
}

.others-options .optional-item .search-btn {
  position: relative;
  top: 4px;
}

.others-options .optional-item .side-menu {
  position: relative;
}

.others-options .optional-item .side-menu a {
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 26px;
  text-align: center;
  background-color: var(--redColor);
  color: var(--whiteColor);
  -webkit-transform: var(--transition);
          transform: var(--transition);
}

.others-options .optional-item .side-menu a:hover {
  background-color: var(--whiteColor);
  color: var(--redColor);
}

.optional-item-cart {
  font-size: 20px;
  color: var(--whiteColor);
  position: relative;
  padding-right: 10px;
  top: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.optional-item-cart span {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 2px 6px;
  color: var(--whiteColor);
  background-color: var(--redColor);
  font-size: 9px;
  border-radius: 50px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.optional-item-cart:hover {
  color: var(--redColor);
}

.optional-item-cart:hover span {
  background-color: var(--titleColor);
}

.search-btn a i {
  font-size: 20px;
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.search-btn a i:hover {
  color: var(--redColor);
}

.searchmodal .modal-dialog {
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  display: table;
}

.searchmodal .modal-content {
  height: 100%;
  border-radius: 0;
  border: none;
  display: table-cell;
  vertical-align: middle;
  background-color: #222;
  opacity: .77;
}

.searchmodal .modal-body {
  max-width: 700px;
  margin: auto;
  padding: 0;
}

.searchmodal .modal-header {
  border: none;
}

.searchmodal .modal-header button {
  position: relative;
}

.searchmodal .modal-header button.close {
  position: absolute;
  right: 25px;
  top: 25px;
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 48px;
  background-color: var(--redColor);
  border-radius: 5px;
  color: var(--whiteColor);
  border: none;
  font-size: 30px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.searchmodal .modal-header button.close:hover, .searchmodal .modal-header button.close:focus {
  background-color: var(--whiteColor);
  color: var(--redColor);
}

.searchmodal .modal-search-form {
  position: relative;
}

.searchmodal .modal-search-form .search-field {
  background-color: transparent;
  height: 60px;
  padding: 8px 15px;
  border: none;
  border: 1px solid var(--whiteColor);
  width: 100%;
  display: block;
  outline: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 0;
  color: var(--whiteColor);
}

.searchmodal .modal-search-form .search-field::-webkit-input-placeholder, .searchmodal .modal-search-form .search-field:-ms-input-placeholder, .searchmodal .modal-search-form .search-field::-ms-input-placeholder, .searchmodal .modal-search-form .search-field::-webkit-input-placeholder {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.searchmodal .modal-search-form .search-field::-webkit-input-placeholder, .searchmodal .modal-search-form .search-field:-ms-input-placeholder, .searchmodal .modal-search-form .search-field::-ms-input-placeholder, .searchmodal .modal-search-form .search-field::placeholder {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.searchmodal .modal-search-form .search-field:focus {
  border-color: var(--redColor);
}

.searchmodal .modal-search-form .search-field:focus::-webkit-input-placeholder, .searchmodal .modal-search-form .search-field:focus:-ms-input-placeholder, .searchmodal .modal-search-form .search-field:focus::-ms-input-placeholder, .searchmodal .modal-search-form .search-field:focus::-webkit-input-placeholder {
  color: transparent;
}

.searchmodal .modal-search-form .search-field:focus::-webkit-input-placeholder, .searchmodal .modal-search-form .search-field:focus:-ms-input-placeholder, .searchmodal .modal-search-form .search-field:focus::-ms-input-placeholder, .searchmodal .modal-search-form .search-field:focus::placeholder {
  color: transparent;
}

.searchmodal .modal-search-form button {
  border: none;
  background-color: var(--whiteColor);
  color: var(--redColor);
  height: 40px;
  width: 40px;
  position: absolute;
  right: 10px;
  padding: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.searchmodal .modal-search-form button i {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  -webkit-transform: translateY(-52%);
          transform: translateY(-52%);
}

.searchmodal .modal-search-form button:hover, .searchmodal .modal-search-form button:focus {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.mobile-responsive-nav {
  display: none;
}

.navbar-area {
  background-color: #191918;
}

.navbar-area.is-sticky {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  position: fixed;
  background-color: var(--titleColor) !important;
  -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
          box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
          animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}

.navbar-area.is-sticky .desktop-nav-two {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  position: fixed;
  background-color: var(--titleColor) !important;
  -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
          box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
          animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}

.mobile-nav {
  position: absolute;
  top: 1px;
  right: 50px;
  display: none;
}

.mobile-nav .mobile-other .optional-item {
  margin-right: 15px;
}

.mobile-nav .mobile-other .optional-item:last-child {
  margin-right: 0;
}

.mobile-nav .mobile-other .optional-item .side-menu {
  position: relative;
  top: -2px;
}

.mobile-nav .mobile-other .optional-item .side-menu a {
  width: 35px;
  height: 26px;
  line-height: 26px;
  font-size: 18px;
  text-align: center;
  color: var(--whiteColor);
  border: 1px solid var(--whiteColor);
}

/*=================================
Sidebar Modal
====================================*/
.sidebarmodal.modal .modal-dialog, .sidebarmodal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 420px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}

.sidebarmodal.modal.fade .modal-dialog, .sidebarmodal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity .3s linear,right .3s ease-out;
  transition: opacity .3s linear,right .3s ease-out;
}

.sidebarmodal.modal.fade.show .modal-dialog, .sidebarmodal.right.fade.show .modal-dialog {
  right: 0;
}

.sidebarmodal.modal .modal-content, .sidebarmodal.right .modal-content {
  height: 100%;
}

.sidebarmodal .modal-content {
  background-color: var(--whiteColor);
  height: 100%;
  overflow-y: scroll;
  border-radius: 0;
  padding: 40px 30px;
}

.sidebarmodal .modal-content .modal-header {
  margin-bottom: 30px;
  padding: 0px;
  border: none;
}

.sidebarmodal .modal-content .modal-header .sidebar-logo {
  display: inline-block;
}

.sidebarmodal .modal-content .modal-header .close {
  display: inline-block;
  font-size: 18px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: none;
  outline: none;
  height: 30px;
  width: 30px;
  line-height: 28px;
  border-radius: 50px;
  background-color: var(--redColor);
  color: var(--whiteColor);
  text-align: center;
  margin-top: 0;
}

.sidebarmodal .modal-content .modal-header .close.text-float {
  float: right;
}

.sidebarmodal .modal-content .modal-header .close:hover {
  background-color: var(--titleColor);
}

.sidebarmodal .modal-content .modal-body {
  padding: 0;
}

.sidebarmodal .modal-content .modal-body .sidebar-about {
  margin-bottom: 20px;
}

.sidebarmodal .modal-content .modal-body .sidebar-about h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.sidebarmodal .modal-content .modal-body .sidebar-about p {
  margin-bottom: 0;
  font-size: 15px;
}

.sidebarmodal .modal-content .modal-body .contact-us {
  margin-bottom: 30px;
}

.sidebarmodal .modal-content .modal-body .contact-us h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li {
  display: block;
  padding-left: 60px;
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li:last-child {
  margin-bottom: 0;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li i {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--redColor);
  font-size: 20px;
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  display: inline-block;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li .content h4 {
  font-size: 16px;
  margin-bottom: 3px;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li .content p {
  color: var(--bodyColor);
  margin: 0;
  font-size: 14px;
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li .content p a {
  color: var(--bodyColor);
  margin-bottom: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li:hover i {
  background-color: var(--redColor);
  border-radius: 50px;
  color: var(--whiteColor);
}

.sidebarmodal .modal-content .modal-body .contact-us .contact-item li:hover .content p a {
  color: var(--redColor);
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us {
  margin-bottom: 30px;
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us .social-wrap {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us .social-wrap li {
  display: inline-block;
  margin-right: 10px;
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us .social-wrap li a {
  display: inline-block;
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us .social-wrap li a i {
  width: 35px;
  height: 35px;
  line-height: 37px;
  font-size: 14px;
  text-align: center;
  display: inline-block;
  background-color: transparent;
  color: var(--redColor);
  border: 1px solid var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.sidebarmodal .modal-content .modal-body .sidebar-follow-us .social-wrap li a:hover i {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter {
  margin-bottom: 0;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter p {
  margin-bottom: 15px;
  font-size: 15px;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area {
  margin-bottom: 0;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area .sidebar-newsletter-form {
  position: relative;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area .sidebar-newsletter-form .form-control {
  background: transparent;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border-radius: 5px;
  border: none;
  padding: 0 25px;
  max-width: 100%;
  color: var(--whiteColor);
  border: 1px solid var(--redColor);
  font-size: 15px;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area .sidebar-newsletter-form .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--titleColor);
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area .sidebar-newsletter-form .subscribe-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  background-color: var(--redColor);
  color: var(--whiteColor);
  padding: 10px 16px;
  font-size: 20px;
  border: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 0 5px 5px 0;
  text-align: center;
}

.sidebarmodal .modal-content .modal-body .sidebar-newsletter-area .sidebar-newsletter-form .subscribe-btn:hover {
  background-color: var(--titleColor);
}

/*================================
Main Banner Area
===================================*/
.banner-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(../images/own/home-one-bg.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  /*z-index: 1;*/
  padding-top: 100px;
  overflow: hidden;
}

.banner-bg::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(3, 2, 7, 0.9);
}

.banner-content {
  position: relative;
  z-index: 1;
  padding-bottom: 102px;
}

.banner-content span {
  color: var(--redColor);
  display: block;
  margin-bottom: 15px;
}

.banner-content h1 {
  font-size: 85px;
  color: var(--whiteColor);
  line-height: 1.1;
  margin-bottom: 10px;
}

.banner-content p {
  color: var(--whiteColor);
  margin-bottom: 25px;
  max-width: 545px;
}

.banner-content .banner-content-vector {
  position: absolute;
  top: -185px;
  left: -133px;
}

.banner-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-right: 40px;
}

.banner-img .img1 {
  margin-right: -20px;
  position: relative;
  z-index: 1;
}

.banner-img .img1 .img1-circle {
  position: absolute;
  bottom: 50px;
  left: -100px;
  z-index: -1;
  -webkit-animation: rotatedIn 15s infinite ease-in-out;
          animation: rotatedIn 15s infinite ease-in-out;
}

.banner-img .img2 {
  position: relative;
}

.banner-img .img2 .circle-option .circle-option1 {
  position: absolute;
  top: 25%;
  left: 60px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--redColor);
  -webkit-box-shadow: 0px 4px 24px var(--whiteColor);
          box-shadow: 0px 4px 24px var(--whiteColor);
}

.banner-img .img2 .circle-option .circle-option2 {
  position: absolute;
  top: 51%;
  left: 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--redColor);
  -webkit-box-shadow: 0px 4px 24px var(--whiteColor);
          box-shadow: 0px 4px 24px var(--whiteColor);
}

.banner-img .banner-img-vector {
  position: absolute;
  top: -14%;
  left: 60px;
  right: 0;
  z-index: -1;
}

.banner-img .banner-img-vector2 {
  position: absolute;
  top: -60px;
  right: -125px;
  z-index: -1;
}

.banner-img .banner-img-vector2 img {
  max-width: 300px;
}

.banner-left-circle {
  position: absolute;
  top: 70px;
  left: 0;
  z-index: -1;
  -webkit-animation: zoomIn 9s infinite ease-in-out;
          animation: zoomIn 9s infinite ease-in-out;
}

.hero-slider-area {
  background-color: #030207;
  padding-top: 85px;
  position: relative;
}

.hero-slider-area .thumbs-wrap {
  position: absolute;
  top: 28%;
  right: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: right;
  margin: 0 auto;
}

.hero-slider-area .thumbs-wrap .owl-thumbs .owl-thumb-item {
  display: block;
  padding: 0 10px;
}

.hero-slider-area .thumbs-wrap .owl-thumbs .owl-thumb-item span {
  color: var(--whiteColor);
  font-weight: 500;
  font-size: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
  display: none;
}

.hero-slider-area .thumbs-wrap .owl-thumbs .owl-thumb-item.active span {
  color: var(--whiteColor);
  display: block;
}

.hero-slider-area .thumbs-wrap .owl-thumbs .owl-thumb-item:hover span {
  color: var(--whiteColor);
  display: block;
}

.hero-slider-area .owl-dots {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: absolute;
  top: 40%;
  right: -100%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.hero-slider-area .owl-dots::before {
  content: '03';
  position: absolute;
  font-size: 20px;
  font-family: var(--bodyFonts);
  left: -12px;
  right: 0;
  width: 30px;
  height: 30px;
  color: var(--whiteColor);
  bottom: -40px;
}

.hero-slider-area .owl-dots .owl-dot {
  display: block;
  width: 2px;
  height: 75px;
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-slider-area .owl-dots .owl-dot span {
  background-color: transparent !important;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  margin: 0;
  width: 5px !important;
  height: 76px !important;
  position: relative;
  z-index: 1;
  left: -1px;
  border-radius: 0;
}

.hero-slider-area .owl-dots .owl-dot.active span {
  background-color: var(--whiteColor) !important;
}

.hero-slider-area .owl-dots .owl-dot:hover span {
  background-color: var(--whiteColor) !important;
}

.hero-content {
  position: relative;
}

.hero-content span {
  color: var(--redColor);
  display: block;
  margin-bottom: 15px;
}

.hero-content h1 {
  font-size: 80px;
  color: var(--whiteColor);
  line-height: 1.1;
  margin-bottom: 10px;
  position: relative;
}

.hero-content p {
  color: var(--whiteColor);
  margin-bottom: 25px;
  max-width: 545px;
}

.hero-content .overlay {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--redColor);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content-mt {
  position: relative;
  padding-bottom: 60px;
}

.hero-img {
  margin-right: 75px;
  position: relative;
}

.owl-item.active .hero-content span {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.owl-item.active .hero-content h1 {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.owl-item.active .hero-content p {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.owl-item.active .hero-content .default-btn {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.owl-item.active .hero-triangle {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: zoomInLeft;
          animation-name: zoomInLeft;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.hero-slider-area-two {
  position: relative;
  overflow: hidden;
  margin-top: -60px;
  z-index: 1;
}

.hero-slider-area-two .thumbs-wrap {
  position: absolute;
  top: 34%;
  right: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: right;
  margin: 0 auto;
}

.hero-slider-area-two .thumbs-wrap .owl-thumbs .owl-thumb-item {
  display: block;
  padding: 0 10px;
}

.hero-slider-area-two .thumbs-wrap .owl-thumbs .owl-thumb-item span {
  color: var(--whiteColor);
  font-weight: 500;
  font-size: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
  display: none;
}

.hero-slider-area-two .thumbs-wrap .owl-thumbs .owl-thumb-item.active span {
  color: var(--whiteColor);
  display: block;
}

.hero-slider-area-two .thumbs-wrap .owl-thumbs .owl-thumb-item:hover span {
  color: var(--whiteColor);
  display: block;
}

.hero-slider-area-two .owl-dots {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: absolute;
  top: 50%;
  right: 2.5%;
  left: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -ms-grid;
  display: grid;
}

.hero-slider-area-two .owl-dots::before {
  content: '03';
  position: absolute;
  font-size: 20px;
  font-family: var(--bodyFonts);
  right: -12px;
  width: 30px;
  height: 30px;
  color: var(--whiteColor);
  bottom: -40px;
}

.hero-slider-area-two .owl-dots::after {
  content: '';
  position: absolute;
  top: 0;
  right: 2.5px;
  height: 100%;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-slider-area-two .owl-dots .owl-dot {
  display: block;
  float: right;
}

.hero-slider-area-two .owl-dots .owl-dot span {
  background-color: transparent !important;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  margin: 0;
  width: 5px !important;
  height: 76px !important;
  position: relative;
  z-index: 1;
  left: -1px;
  border-radius: 0;
  float: right;
}

.hero-slider-area-two .owl-dots .owl-dot.active span {
  background-color: var(--whiteColor) !important;
}

.hero-slider-area-two .owl-dots .owl-dot:hover span {
  background-color: var(--whiteColor) !important;
}

.hero-slider-item {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 315px 0 170px;
}

.hero-slider-item::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #030207;
  opacity: 0.6;
}

.hero-slider-item .hero-triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 240.5px solid transparent;
  border-right: 350.5px solid #DA1D25;
}

.hero-slider-item-bg1 {
  background-image: url(../images/home-three/home-three.jpg);
}

.hero-slider-item-bg2 {
  background-image: url(../images/home-three/home-three2.jpg);
}

.hero-slider-item-bg3 {
  background-image: url(../images/home-three/home-three3.jpg);
}

.hero-content-max {
  max-width: 650px;
  position: relative;
  z-index: 55;
}

.banner-bottom-max {
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
  padding: 25px 37px;
  border-radius: 10px;
}

.banner-bottom-max .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.banner-bottom-max .row .col-4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.banner-bottom {
  padding: 45px 35px 42px;
  border: 1px solid #eeeeee;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 10px;
  position: relative;
  z-index: 1;
  border-right: none;
}

.banner-bottom.borer-last {
  border-right: 1px solid #eeeeee;
}

.banner-bottom::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  border-radius: 10px;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.banner-bottom .shape-img {
  position: absolute;
  top: -37px;
  right: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: scale(0);
          transform: scale(0);
}

.banner-bottom i {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 13px;
  color: var(--redColor);
  display: block;
}

.banner-bottom h3 {
  margin-bottom: 13px;
}

.banner-bottom p {
  margin-bottom: 0;
}

.banner-bottom:hover {
  z-index: 2;
}

.banner-bottom:hover::before {
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
  background-color: var(--redColor);
}

.banner-bottom:hover i {
  color: var(--whiteColor);
}

.banner-bottom:hover h3 {
  color: var(--whiteColor);
}

.banner-bottom:hover p {
  color: var(--whiteColor);
}

.banner-bottom:hover .shape-img {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

/*================================
Inner Banner Area
===================================*/
.inner-banner {
  position: relative;
  z-index: 1;
  background-position: center center;
  background-size: cover;
}

.inner-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(3, 2, 7, 0.8);
}

.inner-banner .inner-title {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

.inner-banner .inner-title h3 {
  font-size: 70px;
  color: var(--whiteColor);
  line-height: 1;
}

.inner-banner .inner-title ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inner-banner .inner-title ul li {
  color: var(--redColor);
  display: inline-block;
  position: relative;
  margin-right: 25px;
  font-weight: 400;
}

.inner-banner .inner-title ul li:last-child {
  margin-right: 0;
}

.inner-banner .inner-title ul li:last-child::before {
  display: none;
}

.inner-banner .inner-title ul li::before {
  content: '';
  position: absolute;
  top: 5px;
  right: -15px;
  height: 17px;
  width: 1px;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  background-color: var(--whiteColor);
}

.inner-banner .inner-title ul li a {
  color: var(--whiteColor);
}

.inner-banner .inner-title ul li a:hover {
  color: var(--redColor);
}

.inner-bg1 {
  background-image: url("../images/inner-banner/inner-banner1.jpg");
}

.inner-bg2 {
  background-image: url("../images/inner-banner/inner-banner2.jpg");
}

.inner-bg3 {
  background-image: url("../images/inner-banner/inner-banner3.jpg");
}

.inner-bg4 {
  background-image: url("../images/inner-banner/inner-banner4.jpg");
}

.inner-bg5 {
  background-image: url("../images/inner-banner/inner-banner5.jpg");
}

.inner-bg6 {
  background-image: url("../images/inner-banner/inner-banner6.jpg");
}

.inner-bg7 {
  background-image: url("../images/inner-banner/inner-banner7.jpg");
}

.inner-bg8 {
  background-image: url("../images/inner-banner/inner-banner8.jpg");
}

.inner-bg9 {
  background-image: url("../images/inner-banner/inner-banner9.jpg");
}

.inner-bg10 {
  background-image: url("../images/inner-banner/inner-banner10.jpg");
}

.inner-bg11 {
  background-image: url("../images/inner-banner/inner-banner11.jpg");
}

/*================================
Appointment Area
===================================*/
.appointment-area {
  background-color: #191918;
}

.appointment-form .form-group {
  position: relative;
}

.appointment-form .form-group label {
  color: red;
  margin-bottom: 5px;
  font-family: var(--headerFonts);
  font-size: 30px;
}

.appointment-form .form-group .form-control {
  height: 60px;
  color: var(--whiteColor);
  border: none;
  background-color: rgba(255, 255, 255, 0.06);
  font-size: 20px;
  padding: 10px 20px;
  width: 100%;
  border-radius: 0;
}

.appointment-form .form-group .form-control::-webkit-input-placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control:-ms-input-placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control::-ms-input-placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control::placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control::-webkit-input-placeholder:focus, .appointment-form .form-group .form-control::-webkit-input-placeholder .active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control:-ms-input-placeholder:focus, .appointment-form .form-group .form-control:-ms-input-placeholder .active {
  outline: none;
  box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control::-ms-input-placeholder:focus, .appointment-form .form-group .form-control::-ms-input-placeholder .active {
  outline: none;
  box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control::placeholder:focus, .appointment-form .form-group .form-control::placeholder .active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control::-webkit-input-placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control::-webkit-input-placeholder:focus .active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control:-moz-placeholder {
  color: var(--whiteColor);
  -webkit-transition: .6s;
  transition: .6s;
}

.appointment-form .form-group .form-control:-moz-placeholder:focus {
  outline: none;
  box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-control:focus, .appointment-form .form-group .form-control .active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.appointment-form .form-group .form-select {
  color: var(--whiteColor);
}

.appointment-form .form-group .form-select option {
  color: var(--titleColor) !important;
  background-color: var(--whiteColor);
}

.appointment-form .form-group .form-select::before {
  background-color: var(--whiteColor);
}

.appointment-form .default-btn {
  margin-top: 45px;
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  width: 100%;
}

/*================================
Features Area
===================================*/
.features-card {
  position: relative;
  padding: 60px 50px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  margin-bottom: 30px;
}

.features-card.features-card-bg {
  background-image: url(../images/own/booking-demo.jpg);
}

.features-card.features-card-bg2 {
  background-image: url(../images/own/manager-demo.jpg);
}

.features-card.features-card-bg3 {
  background-image: url(../images/own/owner-demo.jpg);
}

.features-card .hover-content {
  opacity: 0;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}

.features-card .hover-content i {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 13px;
  color: var(--whiteColor);
  display: block;
}

.features-card .hover-content h3 {
  margin-bottom: 13px;
  color: var(--whiteColor);
}

.features-card .hover-content p {
  margin-bottom: 0;
  color: var(--whiteColor);
}

.features-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: var(--redColor);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}

.features-card .shape-img-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.features-card .shape-img-top {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.features-card:hover::before {
  width: 100%;
  opacity: 1;
}

.features-card:hover .hover-content {
  opacity: 1;
}

.features-card:hover .shape-img-top {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.features-card:hover .shape-img-bottom {
  -webkit-transition: scale(0);
  transition: scale(0);
  opacity: 0;
}

/*================================
About Area
===================================*/
.about-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 30px;
}

.about-img .img1 {
  position: relative;
  margin-right: 15px;
}

.about-img .img1::before {
  content: '';
  position: absolute;
  top: -70px;
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  background-color: var(--whiteColor);
}

.about-img .img1::after {
  content: '';
  position: absolute;
  bottom: -70px;
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  background-color: var(--whiteColor);
}

.about-img .img2 {
  position: relative;
  margin-left: 15px;
}

.about-img .img2::before {
  content: '';
  position: absolute;
  top: -70px;
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  left: 0;
  right: 0;
  width: 101%;
  height: 122px;
  background-color: var(--whiteColor);
}

.about-img .img2::after {
  content: '';
  position: absolute;
  bottom: -70px;
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  left: 0;
  right: 0;
  width: 101%;
  height: 122px;
  background-color: var(--whiteColor);
}

.about-content {
  margin-bottom: 30px;
}

.about-content .section-title {
  margin-bottom: 20px;
}

.about-content .about-list {
  margin-bottom: 23px;
}

.about-content .about-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.about-content .about-list ul li {
  display: block;
  margin-bottom: 13px;
  padding-left: 30px;
  position: relative;
}

.about-content .about-list ul li i {
  position: absolute;
  top: 3px;
  left: 0;
  color: var(--redColor);
}

.about-content .about-list ul li:last-child {
  margin-bottom: 0;
}

.about-bg {
  background-color: #030207;
}

.about-img2 {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin-bottom: 30px;
  padding-bottom: 40px;
  padding-right: 40px;
}

.about-img2::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  width: 94%;
  height: 94%;
  background-color: transparent;
  border: 6px solid var(--redColor);
}

.about-content-color .section-title h2 {
  color: var(--whiteColor);
}

.about-content-color .section-title p {
  color: var(--whiteColor);
}

.about-content-color .about-list ul li {
  color: var(--whiteColor);
}

.about-img3 {
  position: relative;
  z-index: 1;
  padding-bottom: 180px;
  padding-right: 30px;
  margin-bottom: 30px;
}

.about-img3 .img1 img {
  z-index: -1;
}

.about-img3 .img2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.about-img3 .img2 img {
  max-width: 100%;
}

.about-img3 .vector {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: -1;
}

.about-area-bg {
  background-color: #030207;
}

.about-content-two {
  margin-bottom: 30px;
}

.about-content-two .section-title {
  margin-bottom: 20px;
}

.about-content-two .section-title h2 {
  color: var(--whiteColor);
}

.about-content-two .section-title p {
  color: var(--whiteColor);
}

.about-content-two p {
  color: var(--whiteColor);
  margin-bottom: 20px;
}

/*================================
Classes Area
===================================*/
.classes-area {
  position: relative;
  overflow: hidden;
}

.classes-area .section-title h2 {
  color: var(--whiteColor);
}

.classes-area .owl-nav {
  margin-top: 0;
  overflow: hidden;
}

.classes-area .owl-nav .owl-prev {
  position: absolute;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -100px;
  opacity: 0;
  font-size: 18px !important;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  color: var(--whiteColor) !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--whiteColor) !important;
}

.classes-area .owl-nav .owl-prev i {
  position: relative;
  top: 2px;
}

.classes-area .owl-nav .owl-prev:hover {
  color: var(--whiteColor) !important;
  background-color: var(--redColor) !important;
  border-color: var(--redColor) !important;
}

.classes-area .owl-nav .owl-next {
  position: absolute;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -100px;
  opacity: 0;
  font-size: 18px  !important;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  color: var(--whiteColor) !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--whiteColor) !important;
}

.classes-area .owl-nav .owl-next i {
  position: relative;
  top: 2px;
}

.classes-area .owl-nav .owl-next:hover {
  color: var(--whiteColor) !important;
  background-color: var(--redColor) !important;
  border-color: var(--redColor) !important;
}

.classes-area:hover .owl-nav .owl-prev {
  left: 0;
  opacity: 1;
}

.classes-area:hover .owl-nav .owl-next {
  right: 0;
  opacity: 1;
}

.classes-area-bg1 {
  background-color: var(--titleColor);
}

.classes-area-bg2 {
  background-color: #191918;
}

.classes-item {
  padding-bottom: 10px;
}

.classes-item .classes-content {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.classes-item .classes-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-top: 1px solid var(--redColor);
  border-bottom: 1px solid var(--redColor);
}

.classes-item .classes-content::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-left: 1px solid var(--redColor);
  border-right: 1px solid var(--redColor);
}

.classes-item .classes-content:hover::before {
  opacity: 1;
  width: 100%;
}

.classes-item .classes-content:hover::after {
  opacity: 1;
  height: 100%;
}

.classes-item .classes-content .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}

.classes-item .classes-content .content h2 {
  font-style: normal;
  font-weight: 500;
  font-size: 75px;
  line-height: 1;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: transparent;
  margin-right: 15px;
  margin-bottom: 0;
}

.classes-item .classes-content .content span {
  color: var(--redColor);
  padding-top: 40px;
}

.classes-item .classes-content h3 {
  margin-bottom: 0;
}

.classes-item .classes-content h3 a {
  color: var(--whiteColor);
}

.classes-item .classes-images {
  margin-bottom: 20px;
  overflow: hidden;
}

.classes-item .classes-images a {
  display: block;
}

.classes-item .classes-images a img {
  width: unset !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.classes-item:hover .classes-images a img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

.classes-item:hover .classes-content h3 a {
  color: var(--redColor);
}

.classes-card {
  margin-bottom: 30px;
}

.classes-card .classes-img {
  display: block;
}

.classes-card .classes-img img {
  max-width: 100%;
}

.classes-card .classes-content {
  padding: 35px 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.classes-card .classes-content span {
  color: var(--redColor);
  margin-bottom: 10px;
  display: block;
}

.classes-card .classes-content h3 a {
  color: var(--whiteColor);
}

.classes-card .classes-content p {
  color: #8A8989;
  display: block;
  margin-bottom: 20px;
}

.classes-card .classes-content .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.classes-card .classes-content .content h4 {
  font-size: 20px;
  color: var(--whiteColor);
  margin-bottom: 0;
}

.classes-card .classes-content .content h4 del {
  color: var(--bodyColor);
  margin-left: 3px;
  font-size: 16px;
}

.classes-card .classes-content .content .classes-btn {
  color: var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.classes-card .classes-content .content .classes-btn i {
  position: relative;
  top: 4px;
  margin-left: 5px;
}

.classes-card .classes-content .content .classes-btn:hover {
  letter-spacing: 0.25px;
  color: var(--whiteColor);
}

.classes-area-bg3 {
  background-image: url(../images/class-img/class-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.classes-area-bg3::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 25, 24, 0.95);
}

.classes-card-two {
  padding: 35px 30px;
  background-color: #030207;
  margin-bottom: 30px;
}

.classes-card-two span {
  color: var(--redColor);
  margin-bottom: 10px;
  display: block;
}

.classes-card-two h3 a {
  color: var(--whiteColor);
}

.classes-card-two p {
  color: #8A8989;
  display: block;
  margin-bottom: 20px;
}

.classes-card-two .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.classes-card-two .content h4 {
  font-size: 20px;
  color: var(--whiteColor);
  margin-bottom: 0;
}

.classes-card-two .content h4 del {
  color: var(--bodyColor);
  margin-left: 3px;
  font-size: 16px;
}

.classes-card-two .content .classes-btn {
  color: var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.classes-card-two .content .classes-btn i {
  position: relative;
  top: 4px;
  margin-left: 5px;
}

.classes-card-two .content .classes-btn:hover {
  letter-spacing: 0.25px;
  color: var(--whiteColor);
}

.classes-card-two:hover h3 a {
  color: var(--redColor);
}

.class-details-content h1, .class-details-content h2, .class-details-content h3, .class-details-content h4, .class-details-content h5, .class-details-content h6 {
  margin-bottom: 15px;
}

.class-details-content h1 {
  font-size: 45px;
}

.class-details-content h2 {
  font-size: 40px;
}

.class-details-content h3 {
  font-size: 35px;
}

.class-details-content h4 {
  font-size: 32px;
}

.class-details-content h5 {
  font-size: 30px;
}

.class-details-content h6 {
  font-size: 26px;
}

.class-details-content a {
  color: var(--redColor);
}

.class-details-content a:hover {
  color: var(--titleColor);
}

.class-details-content ul, .class-details-content ol {
  margin-bottom: 30px;
}

.class-details-content ul li, .class-details-content ol li {
  margin-bottom: 10px;
}

.class-details-content ul li:last-child, .class-details-content ol li:last-child {
  margin-bottom: 0;
}

.class-details-content .title {
  margin-bottom: 20px;
  max-width: 670px;
  line-height: 1.2;
}

.class-details-content p {
  margin-bottom: 15px;
}

.class-details-content .class-preview-img {
  margin-bottom: 30px;
}

.class-details-content .class-article-content {
  margin-bottom: 30px;
}

.class-details-content .class-article-content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.class-details-content .class-article-content ul li {
  display: block;
  font-size: 16px;
  padding-left: 25px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.class-details-content .class-article-content ul li i {
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--redColor);
  font-size: 14px;
}

.class-details-content .class-article-content ul li:hover {
  color: var(--redColor);
}

.class-table {
  margin-top: 25px;
  margin-bottom: 27px;
}

.class-table table {
  margin-bottom: 0;
}

.class-table table:not(:first-child) {
  border-top: none;
}

.class-table table thead th {
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #dee2e6 !important;
  font-weight: bold;
  padding: 20px;
  background-color: #DA1D25;
  color: var(--whiteColor);
}

.class-table table tbody:not(:first-child) {
  border-top: none;
}

.class-table table tbody td {
  vertical-align: middle;
  color: var(--bodyColor);
  border-width: 1px;
  font-size: 14.5px;
  padding: 15px;
  text-align: center;
}

/*================================
Team Area
===================================*/
.team-item {
  margin-bottom: 30px;
  position: relative;
}

.team-item a {
  display: block;
}

.team-item a img {
  max-width: 100%;
  overflow: hidden;
}

.team-item .team-social {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  z-index: 1;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  margin: 0 auto;
  margin-bottom: 0;
}

.team-item .team-social li {
  display: block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 10px;
}

.team-item .team-social li:last-child {
  margin-bottom: 0;
}

.team-item .team-social li a {
  display: inline-block;
}

.team-item .team-social li a i {
  width: 50px;
  height: 50px;
  line-height: 52px;
  text-align: center;
  font-size: 18px;
  color: var(--titleColor);
  background-color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  display: inline-block;
  border-radius: 50px;
}

.team-item .team-social li a:hover i {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.team-item .team-social li:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.team-item .team-social li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.team-item .team-social li:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.team-item .team-social li:nth-child(4) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.team-item .content {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 20px;
  width: 70%;
  padding: 35px 45px;
  background-color: var(--titleColor);
}

.team-item .content h3 {
  margin-bottom: 5px;
}

.team-item .content h3 a {
  color: var(--whiteColor);
}

.team-item .content span {
  color: var(--whiteColor);
}

.team-item .team-vector {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: scale(0);
          transform: scale(0);
}

.team-item:hover .team-social li {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.team-item:hover .team-vector {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.team-card {
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.team-card a {
  display: block;
}

.team-card a img {
  max-width: 100%;
  overflow: hidden;
}

.team-card .content {
  text-align: center;
  position: absolute;
  z-index: 1;
  left: -50%;
  bottom: 20px;
  width: 90%;
  margin: 0 auto;
  padding: 35px 45px;
  background-color: var(--titleColor);
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.team-card .content h3 {
  margin-bottom: 5px;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.team-card .content h3 a {
  color: var(--whiteColor);
}

.team-card .content span {
  color: var(--whiteColor);
  display: block;
  margin-bottom: 20px;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.team-card .content .team-social {
  padding-left: 0;
  list-style-type: none;
  text-align: center;
  margin: 0;
}

.team-card .content .team-social li {
  display: inline-block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  margin-right: 10px;
}

.team-card .content .team-social li:last-child {
  margin-right: 0;
}

.team-card .content .team-social li a {
  display: inline-block;
}

.team-card .content .team-social li a i {
  width: 40px;
  height: 40px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  color: var(--titleColor);
  background-color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  display: inline-block;
  border-radius: 50px;
}

.team-card .content .team-social li a:hover i {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.team-card .content .team-social li:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.team-card .content .team-social li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.team-card .content .team-social li:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.team-card .content .team-social li:nth-child(4) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.team-card .team-vector {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: scale(0);
          transform: scale(0);
}

.team-card:hover .content {
  opacity: 1;
  left: 20px;
}

.team-card:hover .content .team-social li {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.team-card:hover .team-vector {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.team-bg {
  background-color: #030207;
}

.team-bg .section-title h2 {
  color: var(--whiteColor);
}

/*================================
Timetable Area
===================================*/
.timetable-area {
  background-color: #030207;
}

.timetable-area .section-title h2 {
  color: var(--whiteColor);
}

.timetable-area-bg {
  background-color: #030207;
}

.timetable-area-bg2 {
  background-color: #191918;
}

.timetable-table-area table {
  margin-bottom: 20px;
}

.timetable-table-area table:not(:first-child) {
  border-top: none;
}

.timetable-table-area table thead th {
  text-align: center;
  vertical-align: middle;
  border: none !important;
  font-family: var(--bodyFonts);
  font-weight: 500;
  padding: 15px;
  font-size: 20px;
  color: var(--whiteColor);
  background-color: #0E0D0F;
}
.timetable-table-area table thead.is-sticky {
  position: relative;
  z-index: 20;
  box-shadow: 0 3px 8px rgba(0,0,0,0.7);
}

.timetable-table-area table tbody:not(:first-child) {
  border-top: none;
}

.timetable-table-area table tbody td {
  text-align: center;
  vertical-align: middle;
  color: var(--whiteColor);
  border: none;
/*border-color: #DA1D25;*/
  padding: 15px;
  background-color: #29292C;
}

.timetable-table-area table tbody td .tbody-content h3 {
  font-size: 19px;
  color: var(--whiteColor);
  margin-bottom: 3px;
  font-weight: 500;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.timetable-table-area table tbody td .tbody-content span {
  color: var(--bodyColor);
  font-size: 13.5px;
  margin-bottom: 20px;
  display: block;
  font-family: var(--bodyFonts);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.timetable-table-area table tbody td .tbody-content .content {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.timetable-table-area table tbody td .tbody-content .content h4 {
  font-size: 13.5px;
  color: var(--whiteColor);
  font-family: var(--bodyFonts);
  margin-bottom: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.timetable-table-area table tbody td .tbody-content .content h4 i {
  color: var(--whiteColor);
  position: relative;
  top: 2px;
  margin-right: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.timetable-table-area table tbody td .tbody-content .content .plus-icon {
  font-size: 13.5px;
  color: var(--whiteColor);
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 29px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timetable-table-area table tbody td .tbody-content .content .plus-icon:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50px;
}

.pricing-info-row td,
.pricing-info-row td.bg-color {
  background-color: #0E0D0F !important;
}
.timetable-table-area table tbody td.bg-color {
  background-color: #0E0D0F;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid;
  padding: 5px;
  border-color: #DA1D25 ;
  caret-color: transparent;
}

.timetable-table-area table tbody td.bg-color:hover {
  background-color: #29292C;
  cursor: pointer;

}

.timetable-table-area table tbody td.bg-color:hover .tbody-content span {
  color: var(--whiteColor);
}

.timetable-table-area table tbody tr.past-slot td {
  opacity: 0.55;
  background-color: #1a1a1a;
  border-color: #555 !important;
}

.timetable-table-area table tbody tr.past-slot td:first-child {
  color: #888 !important;
}

/*================================
Pricing Area
===================================*/
.pricing-area-two {
  background-color: #030207;
}

.pricing-area-two .section-title h2 {
  color: var(--whiteColor);
}

.pricing-card {
  padding-top: 40px;
  padding-bottom: 45px;
  text-align: center;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
}

.pricing-card h3 {
  font-size: 30px;
  margin-bottom: 0;
}

.pricing-card span {
  color: var(--bodyFonts);
  display: block;
  margin-bottom: 15px;
}

.pricing-card h2 {
  font-size: 50px;
  margin-bottom: 15px;
}

.pricing-card .monthly-pack {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

.pricing-card .monthly-pack::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  width: 100%;
  height: 0.5px;
  background-color: rgba(218, 29, 37, 0.5);
}

.pricing-card .monthly-pack h4 {
  width: 125px;
  z-index: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(218, 29, 37, 0.5);
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  margin: 0 auto;
  color: var(--bodyColor);
  background-color: var(--whiteColor);
}

.pricing-card ul {
  list-style-type: none;
  margin: 0 0 30px;
  padding: 0;
}

.pricing-card ul li {
  display: block;
  margin-bottom: 10px;
}

.pricing-card ul li del {
  color: #888888;
}

.pricing-card .default-btn {
  padding: 12px 30px;
}

.pricing-item {
  padding: 40px 40px 45px;
  background-color: #191918;
  margin-bottom: 30px;
}

.pricing-item .pricing-box {
  width: 80px;
  height: 80x;
  line-height: 80px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  margin-bottom: 25px;
}

.pricing-item span {
  color: #bcbcbc;
  display: block;
  margin-bottom: 15px;
}

.pricing-item h2 {
  font-size: 50px;
  margin-bottom: 15px;
  color: var(--redColor);
}

.pricing-item h2 sub {
  font-size: 16px;
  color: #bcbcbc;
  font-family: var(--bodyFonts);
  font-weight: 400;
}

.pricing-item ul {
  list-style-type: none;
  margin: 0 0 30px;
  padding: 0;
}

.pricing-item ul li {
  display: block;
  margin-bottom: 10px;
  color: #bcbcbc;
}

.pricing-item ul li del {
  color: #555555;
}

.pricing-item .default-btn {
  padding: 12px 30px;
  background-color: transparent;
  color: var(--whiteColor);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-item .default-btn:hover {
  border-color: var(--redColor);
}

.pricing-item .default-btn:hover::before {
  background-color: var(--redColor);
}

/*================================
Testimonials Area
===================================*/
.testimonials-area {
  background-color: #030207;
}

.testimonials-area .section-title h2 {
  color: var(--whiteColor);
}

.testimonials-page-area {
  background-color: #191918;
}

.testimonials-page-area .section-title h2 {
  color: var(--whiteColor);
}

.testimonials-area-two {
  background-color: #191918;
}

.testimonials-area-two .section-title h2 {
  color: var(--whiteColor);
}

.testimonials-area-two .testimonials-card {
  margin-left: 10px;
  margin-right: 10px;
}

.testimonials-item {
  padding: 50px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 30px;
}

.testimonials-item .rating {
  color: #FFC107;
  font-size: 18px;
  margin-bottom: 20px;
}

.testimonials-item p {
  color: var(--whiteColor);
  margin-bottom: 23px;
}

.testimonials-item h3 {
  color: var(--whiteColor);
  margin-bottom: 3px;
}

.testimonials-item span {
  color: var(--whiteColor);
  margin-bottom: 0;
}

.testimonials-item-color {
  position: relative;
}

.testimonials-item-color::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-top: 1px solid var(--redColor);
  border-bottom: 1px solid var(--redColor);
}

.testimonials-item-color::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-left: 1px solid var(--redColor);
  border-right: 1px solid var(--redColor);
}

.testimonials-item-color:hover::before {
  opacity: 1;
  width: 100%;
}

.testimonials-item-color:hover::after {
  opacity: 1;
  height: 100%;
}

.testimonials-card {
  margin-bottom: 30px;
}

.testimonials-card .content {
  padding: 40px 35px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  margin-bottom: 40px;
}

.testimonials-card .content p {
  color: var(--whiteColor);
  margin-bottom: 0;
}

.testimonials-card .content::before {
  content: '';
  position: absolute;
  bottom: -15px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  left: 50px;
  width: 30px;
  height: 30px;
  background-color: #191918;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.testimonials-card .testimonials-profile {
  margin-left: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.testimonials-card .testimonials-profile img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 20px;
}

.testimonials-card .testimonials-profile .profile-content h3 {
  color: var(--whiteColor);
  margin-bottom: 3px;
  font-size: 22px;
}

.testimonials-card .testimonials-profile .profile-content span {
  color: var(--whiteColor);
  margin-bottom: 10px;
  display: block;
  font-size: 14px;
}

.testimonials-card .testimonials-profile .profile-content .rating {
  color: #FFC107;
  margin-bottom: 0;
  font-size: 15px;
}

.testimonials-area-three {
  background-image: url(../images/testimonials/testimonials-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.testimonials-area-three::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 25, 24, 0.9);
}

.testimonials-area-three .section-title h2 {
  color: var(--whiteColor);
}

.testimonials-area-three .testimonials-card-two {
  margin-left: 10px;
  margin-right: 10px;
}

.testimonials-card-two {
  margin-bottom: 30px;
  position: relative;
  background-color: #030207;
  padding: 40px 35px;
}

.testimonials-card-two p {
  color: var(--whiteColor);
  margin-bottom: 23px;
}

.testimonials-card-two .testimonials-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.testimonials-card-two .testimonials-profile img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  margin-right: 20px;
}

.testimonials-card-two .testimonials-profile .profile-content h3 {
  color: var(--whiteColor);
  margin-bottom: 3px;
  font-size: 22px;
}

.testimonials-card-two .testimonials-profile .profile-content span {
  color: var(--whiteColor);
  margin-bottom: 10px;
  display: block;
  font-size: 14px;
}

.calculator-form .contact-form .form-group .form-control {
  height: 60px;
}

.calculator-form .contact-form .form-group .form-select {
  color: var(--bodyColor);
  height: 60px;
}

.calculator-form .contact-form .form-group .form-select option {
  color: var(--titleColor) !important;
  background-color: var(--whiteColor);
}

.calculator-form .contact-form .form-group .form-select:focus {
  color: var(--bodyColor);
}

.calculator-form .contact-form .default-btn {
  width: 100%;
}

.calculator-listing {
  padding: 40px;
  background-color: #F5F5F5;
  margin-bottom: 30px;
}

.calculator-listing ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.calculator-listing ul li {
  display: block;
  padding: 17px 30px;
}

.calculator-listing ul li span {
  float: right;
}

.calculator-listing ul li.bg-color-1 {
  font-size: 18px;
  color: var(--whiteColor);
  background-color: var(--titleColor);
}

.calculator-listing ul li.bg-color-2 {
  background-color: var(--whiteColor);
}

.calculator-listing h3 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 20px;
}

/*=================================
Faq Area 
===================================*/
.faq-accordion {
  margin-bottom: 30px;
}

.faq-accordion .accordion {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  border: none;
}

.faq-accordion .accordion .accordion-item {
  display: block;
  margin-bottom: 15px;
  border: none;
}

.faq-accordion .accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.faq-accordion .accordion .accordion-title {
  padding: 15px 60px 15px 20px;
  color: var(--titleColor);
  text-decoration: none;
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 500;
  background-color: #F5F5F5;
}

.faq-accordion .accordion .accordion-title i {
  position: absolute;
  right: 15px;
  top: 14px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 18px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: var(--titleColor);
  text-align: center;
  background-color: transparent;
}

.faq-accordion .accordion .accordion-title.active {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.faq-accordion .accordion .accordion-title.active i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--whiteColor);
}

.faq-accordion .accordion .accordion-content {
  display: none;
  position: relative;
  margin-top: 15px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
}

.faq-accordion .accordion .accordion-content p {
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 7px;
}

.faq-accordion .accordion .accordion-content p:last-child {
  margin-bottom: 0;
}

.faq-accordion .accordion .accordion-content.show {
  display: block;
}

.faq-form {
  background-color: #F5F5F5;
  padding: 40px;
  margin-bottom: 30px;
}

.faq-form h3 {
  margin-bottom: 30px;
  font-size: 30px;
}

.faq-form .contact-form {
  margin-bottom: 0;
}

.faq-form .contact-form .form-group .form-control {
  background-color: var(--whiteColor);
}

.faq-form .contact-form .default-btn {
  width: 100%;
}

/*================================
Training Area
===================================*/
.training-area {
  background-color: #030207;
}

.training-content {
  background-image: url(../images/training.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 130px 80px;
}

.training-content .section-title {
  margin-bottom: 20px;
}

.training-content .section-title h2 {
  color: var(--whiteColor);
  max-width: 500px;
}

.training-area-two {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(../images/banner.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 30px 30px;
}
   .branch-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 30px 0;
        text-align: left;
    }
    .branch-box-link {
        text-decoration: none;
    }
    .branch-box {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        height: 260px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border: 1px solid rgba(232, 25, 44, 0.4);
        transition: border-color 0.3s ease, transform 0.3s ease;
    }
    .branch-box:hover {
        border-color: #e8192c;
        transform: scale(1.02);
    }
    .branch-box:hover .branch-box-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(232,25,44,0.25) 100%);
    }
    .branch-box-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 100%);
        transition: background 0.3s ease;
    }
    .branch-box-inner {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 18px;
    }
    .branch-box-inner h5 {
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 6px 0;
        background: #e8192c;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
    }
    .branch-location {
        display: block;
        color: rgba(255, 255, 255, 0.75);
        font-size: 12px;
        margin-bottom: 8px;
    }
    .branch-desc {
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
        line-height: 1.6;
        margin: 0 0 10px 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .branch-book {
        display: inline-block;
        color: #e8192c;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0;
        transform: translateY(5px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .branch-box:hover .branch-book {
        opacity: 1;
        transform: translateY(0);
    }
    .tagline {
        color: rgba(255, 255, 255, 0.75);
        font-size: 15px;
        margin-bottom: 12px;
    }
    @media (max-width: 991px) {
        .branch-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 576px) {
        .branch-grid {
            grid-template-columns: 1fr;
        }
        .branch-box {
            height: 240px;
        }
    }
.training-content-two .section-title {
  margin-bottom: 20px;
}

.training-content-two .section-title h2 {
  color: var(--whiteColor);
  max-width: 500px;
}

/*================================
Contact Area
===================================*/
.contact-bg {
  background-image: url(../images/contact-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.contact-bg::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 2, 7, 0.6);
}

.contact-bg .section-title h2 {
  color: var(--whiteColor);
}

.contact-touch-form {
  margin-bottom: 30px;
}

.contact-touch-form h3 {
  margin-bottom: 10px;
}

.contact-touch-form p {
  margin-bottom: 20px;
}

.contact-touch-form .form-group {
  margin-bottom: 20px;
  position: relative;
}

.contact-touch-form .form-group.checkbox-option {
  position: relative;
}

.contact-touch-form .form-group.checkbox-option #chb2 {
  position: absolute;
  top: 6px;
  left: 0;
}

.contact-touch-form .form-group.checkbox-option p {
  padding-left: 25px;
  font-size: 15px;
  color: var(--titleColor);
}

.contact-touch-form .form-group.checkbox-option p a {
  color: var(--redColor);
}

.contact-touch-form .form-group.checkbox-option p a:hover {
  color: var(--titleColor);
}

.contact-touch-form .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 15px 25px;
  width: 100%;
  border-radius: 0;
}

.contact-touch-form .form-group .form-control::-webkit-input-placeholder {
  color: var(--whiteColor);
}

.contact-touch-form .form-group .form-control:-ms-input-placeholder {
  color: var(--whiteColor);
}

.contact-touch-form .form-group .form-control::-ms-input-placeholder {
  color: var(--whiteColor);
}

.contact-touch-form .form-group .form-control::placeholder {
  color: var(--whiteColor);
}

.contact-touch-form .form-group .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.contact-touch-form .form-group textarea.form-control {
  height: auto;
  border-radius: 0;
}

.contact-touch-form .with-errors {
  float: left;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 0;
  color: #f00;
  font-weight: 400;
  display: block;
}

.contact-touch-form .text-danger {
  font-size: 18px;
  margin-top: 15px;
}

.contact-touch-form .default-btn {
  border: 0;
  outline: none;
  width: 100%;
}

.contact-touch-form .default-btn::before {
  background-color: var(--whiteColor);
}

.contact-touch-form .default-btn:hover {
  color: var(--redColor);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 555px;
  margin-bottom: 30px;
}

.contact-max {
  padding: 100px 70px 70px;
  background-color: rgba(3, 2, 7, 0.85);
}

.contact-max-width {
  padding: 50px 50px 20px;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.contact-form {
  margin-bottom: 30px;
}

.contact-form h3 {
  margin-bottom: 10px;
}

.contact-form p {
  margin-bottom: 20px;
}

.contact-form .form-group {
  margin-bottom: 20px;
  position: relative;
}

.contact-form .form-group.checkbox-option {
  position: relative;
}

.contact-form .form-group.checkbox-option #chb2 {
  position: absolute;
  top: 6px;
  left: 0;
}

.contact-form .form-group.checkbox-option p {
  padding-left: 25px;
  font-size: 15px;
  color: var(--titleColor);
}

.contact-form .form-group.checkbox-option p a {
  color: var(--redColor);
}

.contact-form .form-group.checkbox-option p a:hover {
  color: var(--titleColor);
}

.contact-form .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: #F5F5F5;
  padding: 15px 25px;
  width: 100%;
  border-radius: 0;
}

.contact-form .form-group .form-control::-webkit-input-placeholder {
  color: var(--bodyColor);
}

.contact-form .form-group .form-control:-ms-input-placeholder {
  color: var(--bodyColor);
}

.contact-form .form-group .form-control::-ms-input-placeholder {
  color: var(--bodyColor);
}

.contact-form .form-group .form-control::placeholder {
  color: var(--bodyColor);
}

.contact-form .form-group .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--titleColor);
}

.contact-form .form-group textarea.form-control {
  height: auto;
  border-radius: 0;
}

.contact-form .agree-label {
  margin-bottom: 15px;
  position: relative;
}

.contact-form .agree-label #chb1 {
  position: absolute;
  top: 7px;
  left: 0;
}

.contact-form .agree-label label {
  color: var(--bodyColor);
  margin-left: 25px;
}

.contact-form .agree-label label a {
  color: var(--redColor);
}

.contact-form .agree-label label a:hover {
  color: var(--titleColor);
}

.contact-form .agree-label label a.forget {
  position: absolute;
  right: 0;
}

.contact-form .with-errors {
  float: left;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 0;
  color: #f00;
  font-weight: 400;
  display: block;
}

.contact-form .text-danger {
  font-size: 18px;
  margin-top: 15px;
}

.contact-form .default-btn {
  border: 0;
  outline: none;
}
 .contact-info-list {
        display: flex !important;
        flex-direction: column !important;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .contact-info-list a {
        display: block;
        width: 100%;
    }
    .contact-info-list li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    .contact-info-list .content {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }
    .contact-info-list .content i {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        background: #e8192c;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }
    .contact-info-list .text h3 {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 4px 0;
    }
    .contact-info-list .text p {
        margin: 0;
        font-size: 14px;
        opacity: 0.85;
    }

    /* Location grid */
    .location-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
        margin-top: 8px;
    }
    .location-city p {
        margin: 3px 0;
        font-size: 13px;
        opacity: 0.85;
    }
    .city-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
        color: #e8192c;
    }

    @media (max-width: 576px) {
        .location-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }
        .location-city {
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }
        .location-city:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }
    @media (max-width: 576px) {
    .contact-info-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    .contact-info-list a,
    .contact-info-list li {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    .contact-info-list .content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .contact-info-list .content i {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .contact-info-list .text h3 {
        font-size: 13px;
    }
    .contact-info-list .text p {
        font-size: 12px;
    }
    .location-grid {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }
}

    .contact-item {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        list-style: none;
    }
    .contact-item a {
        display: block;
        width: 100%;
    }
    .contact-item li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .contact-item li i {
        flex-shrink: 0;
        width: 45px;
        height: 45px;
        background: #e8192c;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .contact-item .content h4 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 4px 0;
    }
    .contact-item .content p {
        margin: 0;
        font-size: 13px;
        opacity: 0.85;
    }
    .location-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
        margin-top: 6px;
    }
    .location-city p {
        margin: 3px 0;
        font-size: 13px;
        opacity: 0.85;
    }
    .city-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
        color: #e8192c;
    }
    @media (max-width: 576px) {
        .contact-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .contact-item a,
        .contact-item li {
            width: 100% !important;
        }
        .contact-item li {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            gap: 8px !important;
        }
        .location-grid {
            grid-template-columns: 1fr;
            text-align: left;
        }
    }

.contact-info ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.contact-info ul li {
  margin-bottom: 30px;
  display: block;
}

.contact-info ul li .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact-info ul li .content i {
  width: 60px;
  height: 60px;
  line-height: 67px;
  font-size: 22px;
  color: var(--whiteColor);
  background-color: var(--redColor);
  border-radius: 50px;
  text-align: center;
  margin-right: 15px;
}

.contact-info ul li .content .text h3 {
  font-size: 22px;
  margin-bottom: 3px;
}

.contact-info ul li .content .text p {
  color: var(--bodyColor);
  margin-bottom: 0;
}

.contact-info ul li .content .text p a {
  color: var(--bodyColor);
}

.user-all-form .contact-form {
  background-color: var(--whiteColor);
  padding: 45px 35px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

.user-all-form .contact-form .user-title {
  font-size: 30px;
  padding: 0 0 15px;
  position: relative;
  z-index: 1;
  border-bottom: 2px solid rgba(217, 216, 216, 0.62);
  margin-bottom: 30px;
}

.user-all-form .contact-form .user-title::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 80px;
  background-color: var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

/*================================
Blog Area
===================================*/
.blog-area {
  position: relative;
  overflow: hidden;
}

.blog-area .owl-nav {
  margin-top: 0;
  overflow: hidden;
}

.blog-area .owl-nav .owl-prev {
  position: absolute;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -100px;
  opacity: 0;
  font-size: 18px !important;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  color: var(--redColor) !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid #EEEEEE !important;
}

.blog-area .owl-nav .owl-prev i {
  position: relative;
  top: 2px;
}

.blog-area .owl-nav .owl-prev:hover {
  color: var(--whiteColor) !important;
  background-color: var(--redColor) !important;
  border-color: var(--redColor) !important;
}

.blog-area .owl-nav .owl-next {
  position: absolute;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -100px;
  opacity: 0;
  font-size: 18px  !important;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  color: var(--redColor) !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid #EEEEEE !important;
}

.blog-area .owl-nav .owl-next i {
  position: relative;
  top: 2px;
}

.blog-area .owl-nav .owl-next:hover {
  color: var(--whiteColor) !important;
  background-color: var(--redColor) !important;
  border-color: var(--redColor) !important;
}

.blog-area:hover .owl-nav .owl-prev {
  left: 0;
  opacity: 1;
}

.blog-area:hover .owl-nav .owl-next {
  right: 0;
  opacity: 1;
}

.blog-area .blog-item {
  margin-left: 10px;
  margin-right: 10px;
}

.blog-item {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-item a {
  display: block;
}

.blog-item a img {
  max-width: 100%;
}

.blog-item .content {
  padding: 40px 35px;
}

.blog-item .content ul {
  list-style-type: none;
  margin: 0 0 15px;
  padding: 0;
}

.blog-item .content ul li {
  display: inline-block;
  margin-right: 30px;
  color: var(--bodyColor);
}

.blog-item .content ul li:last-child {
  margin-right: 0;
}

.blog-item .content ul li a {
  color: var(--bodyColor);
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-item .content ul li a:hover {
  color: var(--redColor);
}

.blog-item .content ul li i {
  color: var(--redColor);
  margin-right: 5px;
  position: relative;
  top: 3px;
}

.blog-item .content h3 {
  margin-bottom: 13px;
}

.blog-item .content h3 a {
  color: var(--titleColor);
}

.blog-item .content .default-btn {
  display: inline-block;
}

.blog-item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.blog-item:hover .content h3 a {
  color: var(--redColor);
}

.blog-area-bg {
  background-color: #191918;
}

.blog-area-bg .section-title h2 {
  color: var(--whiteColor);
}

.blog-item-bg {
  background-color: transparent;
}

.blog-item-bg .content {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-item-bg .content ul li {
  color: var(--whiteColor);
}

.blog-item-bg .content ul li:last-child {
  margin-right: 0;
}

.blog-item-bg .content ul li a {
  color: var(--whiteColor);
}

.blog-item-bg .content h3 a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-item-bg .content .default-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
}

.blog-item-bg .content .default-btn::before {
  background-color: var(--redColor);
}

.blog-item-bg:hover .content h3 a {
  color: var(--redColor);
}

.blog-area-bg2 {
  background-color: #030207;
}

.blog-area-bg2 .section-title h2 {
  color: var(--whiteColor);
}

.blog-item-color {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 30px;
}

.blog-item-color .content {
  padding: 20px 0 0;
}

.blog-item-color .content ul li {
  color: var(--whiteColor);
}

.blog-item-color .content ul li:last-child {
  margin-right: 0;
}

.blog-item-color .content ul li a {
  color: var(--whiteColor);
}

.blog-item-color .content h3 a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-item-color .content .default-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
}

.blog-item-color .content .default-btn::before {
  background-color: var(--redColor);
}

.blog-item-color:hover .content h3 a {
  color: var(--redColor);
}

.blog-details-content h1, .blog-details-content h2, .blog-details-content h3, .blog-details-content h4, .blog-details-content h5, .blog-details-content h6 {
  margin-bottom: 15px;
}

.blog-details-content h1 {
  font-size: 45px;
}

.blog-details-content h2 {
  font-size: 40px;
}

.blog-details-content h3 {
  font-size: 35px;
}

.blog-details-content h4 {
  font-size: 32px;
}

.blog-details-content h5 {
  font-size: 30px;
}

.blog-details-content h6 {
  font-size: 26px;
}

.blog-details-content a {
  color: var(--redColor);
}

.blog-details-content a:hover {
  color: var(--titleColor);
}

.blog-details-content ul, .blog-details-content ol {
  margin-bottom: 30px;
}

.blog-details-content ul li, .blog-details-content ol li {
  margin-bottom: 10px;
}

.blog-details-content ul li:last-child, .blog-details-content ol li:last-child {
  margin-bottom: 0;
}

.blog-details-content .title {
  margin-bottom: 20px;
  max-width: 670px;
  line-height: 1.2;
}

.blog-details-content p {
  margin-bottom: 15px;
}

.blog-details-content .blog-preview-img {
  margin-bottom: 30px;
}

.blog-details-content .tag-list {
  list-style-type: none;
  margin: 0 0 10px;
  padding: 0;
}

.blog-details-content .tag-list li {
  display: inline-block;
  font-size: 15px;
  color: var(--bodyColor);
  margin-right: 15px;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.blog-details-content .tag-list li:last-child {
  margin-right: 0;
}

.blog-details-content .tag-list li i {
  color: var(--redColor);
  font-size: 16px;
  margin-right: 6px;
  position: relative;
  top: 2px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-details-content .tag-list li a {
  color: var(--bodyColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-details-content .tag-list li a i {
  color: var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-details-content .tag-list li a:hover {
  color: var(--redColor);
  border: none;
}

.blog-details-content .tag-list li a:hover i {
  color: var(--titleColor);
}

.blog-details-content .tag-list li:hover {
  color: var(--redColor);
}

.blog-details-content .tag-list li:hover i {
  color: var(--titleColor);
}

.blog-details-content .tag-list li:hover::before {
  width: 100%;
  opacity: 1;
}

.blog-details-content blockquote {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  margin-top: 30px;
  background-color: #F5F5F5;
  padding: 30px 60px 35px;
}

.blog-details-content blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--redColor);
}

.blog-details-content blockquote p {
  font-size: 17px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.blog-details-content .blog-article-content {
  margin-bottom: 30px;
}

.blog-details-content .blog-article-content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.blog-details-content .blog-article-content ul li {
  display: block;
  font-size: 16px;
  padding-left: 25px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog-details-content .blog-article-content ul li i {
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--redColor);
  font-size: 14px;
}

.blog-details-content .blog-article-content ul li:hover {
  color: var(--redColor);
}

.blog-details-content .blog-comments-area {
  padding: 50px;
  border: 1px solid #EEEEEE;
  margin-bottom: 30px;
}

.blog-details-content .comments-wrap {
  margin-bottom: 30px;
}

.blog-details-content .comments-wrap .comment-title {
  margin-bottom: 20px;
}

.blog-details-content .comments-wrap .comment-form {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-details-content .comments-wrap .comment-form li {
  position: relative;
  padding-left: 100px;
  margin-bottom: 30px;
}

.blog-details-content .comments-wrap .comment-form li.pl-80 {
  padding-left: 140px;
}

.blog-details-content .comments-wrap .comment-form li.pl-80 img {
  left: 40px;
}

.blog-details-content .comments-wrap .comment-form li img {
  position: absolute;
  top: 3px;
  left: 0;
  border-radius: 50%;
}

.blog-details-content .comments-wrap .comment-form li h3 {
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
}

.blog-details-content .comments-wrap .comment-form li span {
  color: #888888;
  font-size: 14px;
}

.blog-details-content .comments-wrap .comment-form li p {
  margin-top: 10px;
  margin-bottom: 15px;
}

.blog-details-content .comments-wrap .comment-form li a {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 5px 18px;
  background-color: #F5F5F5;
  color: var(--titleColor);
  border-radius: 0;
  font-size: 15px;
  display: inline-block;
}

.blog-details-content .comments-wrap .comment-form li a:hover {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border: none;
}

.blog-details-content .comments-form .contact-form {
  margin-bottom: 0;
}

.blog-details-content .comments-form .contact-form h3 {
  margin-bottom: 10px;
}

.blog-details-content .comments-form .contact-form p {
  margin-bottom: 30px;
}

.blog-details-content .comments-form .contact-form .form-group .form-control {
  background-color: #f9f9f9;
}

.blog-details-content .comments-form .contact-form .agree-label label {
  font-weight: 400;
}

.blog-details-content .comments-form .default-btn {
  width: unset;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.search-widget {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
  background-color: #F5F5F5;
  padding: 20px;
}

.search-widget .search-form {
  position: relative;
  margin: 0 auto;
  border-radius: 0;
  border: 1px solid #E3E1E1;
  width: 100%;
  background-color: #F5F5F5;
}

.search-widget .search-form .form-control {
  background-color: #F5F5F5;
  border-radius: 0;
  border: none;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border: 0;
  padding: 0 25px;
  color: var(--titleColor);
}

.search-widget .search-form .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
}

.search-widget .search-form button {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--redColor);
  color: var(--whiteColor);
  height: 50px;
  line-height: 53px;
  font-size: 22px;
  padding: 0 15px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.search-widget .search-form button:hover {
  background: var(--titleColor);
}

.side-bar-widget {
  margin-bottom: 35px;
  background-color: #F5F5F5;
  padding: 30px;
  border-radius: 5px;
}

.side-bar-widget .title {
  font-size: 26px;
  color: var(--titleColor);
  margin-bottom: 25px;
  padding-bottom: 10px;
  position: relative;
}

.side-bar-widget .title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--redColor);
}

.side-bar-widget .side-bar-categories ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.side-bar-widget .side-bar-categories ul li {
  position: relative;
  margin-bottom: 15px;
}

.side-bar-widget .side-bar-categories ul li:last-child {
  margin-bottom: 0;
}

.side-bar-widget .side-bar-categories ul li a {
  display: inline-block;
  color: var(--bodyColor);
  position: relative;
  z-index: 1;
}

.side-bar-widget .side-bar-categories ul li a i {
  font-size: 16px;
  color: var(--bodyColor);
  margin-right: 7px;
  position: relative;
  top: 2px;
}

.side-bar-widget .side-bar-categories ul li:hover a {
  color: var(--redColor);
  letter-spacing: 0.25px;
}

.side-bar-widget .side-bar-categories ul li:hover a i {
  color: var(--redColor);
}

.side-bar-widget .widget-popular-post {
  position: relative;
  overflow: hidden;
}

.side-bar-widget .widget-popular-post .item {
  overflow: hidden;
  margin-bottom: 12px;
}

.side-bar-widget .widget-popular-post .item:last-child {
  margin-bottom: 0;
}

.side-bar-widget .widget-popular-post .item .thumb {
  float: left;
  overflow: hidden;
  position: relative;
  margin-right: 15px;
}

.side-bar-widget .widget-popular-post .item .thumb .full-image {
  width: 85px;
  height: 85px;
  display: inline-block;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center !important;
  position: relative;
  background-color: var(--whiteColor);
}

.side-bar-widget .widget-popular-post .item .thumb .full-image.bg1 {
  background-image: url(../images/blog/blog-img1.jpg);
}

.side-bar-widget .widget-popular-post .item .thumb .full-image.bg2 {
  background-image: url(../images/blog/blog-img2.jpg);
}

.side-bar-widget .widget-popular-post .item .thumb .full-image.bg3 {
  background-image: url(../images/blog/blog-img3.jpg);
}

.side-bar-widget .widget-popular-post .item .info {
  overflow: hidden;
  padding: 2px 0;
}

.side-bar-widget .widget-popular-post .item .info p {
  font-size: 15px;
  color: var(--redColor);
  margin-bottom: 7px;
}

.side-bar-widget .widget-popular-post .item .info .title-text {
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 21px;
  font-weight: 500;
  max-width: 245px;
}

.side-bar-widget .widget-popular-post .item .info .title-text a {
  display: inline-block;
  color: var(--titleColor);
}

.side-bar-widget .widget-popular-post .item .info .title-text a:hover {
  color: var(--redColor);
}

.side-bar-widget .side-bar-widget-tag {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-bar-widget .side-bar-widget-tag li {
  display: inline-block;
  margin: 5px;
}

.side-bar-widget .side-bar-widget-tag li a {
  padding: 8px 23px;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  color: var(--titleColor);
  font-weight: 500;
  font-size: 14px;
  transition: 0.7s;
  border: 1px solid #E3E1E1;
}

.side-bar-widget .side-bar-widget-tag li:hover a {
  color: var(--whiteColor);
  background-color: var(--redColor);
}

.side-bar-widget .download-btn {
  padding: 12px 26px;
  color: var(--redColor);
  border: 1px solid var(--redColor);
  width: 100%;
  outline: none;
  margin-bottom: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.side-bar-widget .download-btn i {
  font-size: 18px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.side-bar-widget .download-btn.active {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.side-bar-widget .download-btn.active:hover {
  background-color: transparent;
  color: var(--redColor);
}

.side-bar-widget .download-btn:hover {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.author-profile {
  background-color: #F5F5F5;
  padding: 35px 30px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 35px;
}

.author-profile h3 {
  color: var(--transition);
  margin-bottom: 10px;
  font-size: 22px;
}

.author-profile img {
  border-radius: 50%;
  margin-bottom: 15px;
  max-width: 100px;
}

.author-profile p {
  margin-bottom: 17px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.author-profile .profile-social-link {
  list-style: none;
  margin: 0;
  padding: 0;
}

.author-profile .profile-social-link li {
  display: inline-block;
  margin-right: 5px;
}

.author-profile .profile-social-link li a i {
  width: 35px;
  height: 35px;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  color: var(--whiteColor);
  background-color: var(--redColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 50px;
  display: inline-block;
}

.author-profile .profile-social-link li a:hover i {
  background-color: var(--titleColor);
}

.categories-title {
  margin-bottom: 30px;
}

.categories-title h3 {
  font-size: 26px;
  color: var(--titleColor);
}

.categories-title h3 span {
  color: var(--redColor);
  font-size: 22px;
}

.product-topper .product-title h3 {
  font-size: 22px;
  margin-bottom: 0;
}

.product-topper .product-list .form-group {
  vertical-align: middle;
  position: relative;
  background-color: #F5F5F5;
  border-radius: 5px;
}

.product-topper .product-list .form-group i {
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 20px;
  color: var(--bodyColor);
  font-size: 20px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product-topper .product-list .form-group .form-select {
  color: var(--bodyColor);
  background-color: transparent;
  border: 0;
  background-image: unset;
  padding: 17px 40px 17px 20px;
}

.product-topper .product-list .form-group .form-select:focus {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-topper .product-list .form-group .form-select option {
  color: var(--bodyColor);
  padding-top: 5px;
  padding-bottom: 5px;
}

.product-topper .product-list .form-group:hover {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-topper-search-widget {
  display: inline-block;
  width: 100%;
  background-color: #F5F5F5;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 0;
}

.product-topper-search-widget .search-form {
  position: relative;
  margin: 0 auto;
  border-radius: 5px;
  border: none;
  width: 100%;
  background-color: #F5F5F5;
}

.product-topper-search-widget .search-form .form-control {
  background-color: #F5F5F5;
  border-radius: 5px;
  border: none;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border: 0;
  padding: 0 15px;
  color: var(--bodyColor);
}

.product-topper-search-widget .search-form .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
}

.product-topper-search-widget .search-form button {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 5px;
  background-color: var(--redColor);
  color: var(--whiteColor);
  height: 50px;
  line-height: 53px;
  font-size: 22px;
  padding: 0 15px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product-topper-search-widget .search-form button:hover {
  background: var(--titleColor);
}

.product-card .product-img {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.product-card .product-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
}

.product-card .product-img a {
  display: block;
}

.product-card .product-img a img {
  width: unset !important;
  border-radius: 5px;
  position: relative;
  margin: 0 auto;
}

.product-card .product-img .product-action {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  z-index: 1;
  left: 30px;
  top: 40px;
  margin: auto;
  margin-bottom: 0;
}

.product-card .product-img .product-action li {
  display: block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 10px;
}

.product-card .product-img .product-action li a {
  display: block;
  width: 45px;
  height: 45px;
  background-color: var(--redColor);
  text-align: center;
  position: relative;
  font-size: 18px;
  color: var(--whiteColor);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border-radius: 50px;
}

.product-card .product-img .product-action li a i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-left: auto;
  margin-right: auto;
}

.product-card .product-img .product-action li a:hover {
  background-color: var(--redColor);
}

.product-card .product-img .product-action li:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.product-card .product-img .product-action li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.product-card .content {
  padding-top: 20px;
}

.product-card .content .title-text {
  margin-bottom: 7px;
}

.product-card .content .title-text a {
  color: var(--titleColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product-card .content span {
  color: var(--redColor);
  margin-bottom: 5px;
  display: block;
}

.product-card .content span del {
  color: var(--bodyColor);
  margin-right: 3px;
}

.product-card:hover .product-img::before {
  -webkit-animation: sharpline 1s;
          animation: sharpline 1s;
}

.product-card:hover .product-img .product-action li {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.product-card:hover .title-text a {
  color: var(--redColor);
}

.product-desc h3 {
  margin-bottom: 15px;
  font-size: 26px;
}

.product-desc .product-review {
  margin-bottom: 15px;
}

.product-desc .product-review .rating {
  display: inline-block;
  padding-right: 5px;
  font-size: 14px;
}

.product-desc .product-review .rating i {
  color: #FDC22D;
}

.product-desc .product-review .rating-count {
  margin-left: 5px;
  display: inline-block;
  color: var(--bodyColor);
  font-weight: 600;
}

.product-desc .price {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 400;
}

.product-desc .price .new-price {
  color: var(--redColor);
}

.product-desc .price .old-price {
  text-decoration: line-through;
  color: var(--bodyColor);
  margin-right: 10px;
}

.product-desc p {
  margin-bottom: 20px;
}

.product-desc .product-category-list {
  list-style-type: none;
  margin: 0 0 20px;
  padding: 0;
}

.product-desc .product-category-list li {
  margin-bottom: 7px;
  display: block;
  color: var(--bodyColor);
}

.product-desc .product-category-list li span {
  color: var(--titleColor);
}

.product-desc .product-category-list li:last-child {
  margin-bottom: 0;
}

.product-desc .input-counter {
  max-width: 150px;
  min-width: 150px;
  margin-right: 15px;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-bottom: 20px;
  font-weight: 600;
  background-color: #F5F5F5;
  border-radius: 5px;
  height: 55px;
}

.product-desc .input-counter span {
  position: absolute;
  top: 4px;
  background-color: transparent;
  cursor: pointer;
  color: --bodyColor;
  width: 50px;
  height: 47px;
  line-height: 47px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.product-desc .input-counter span:hover {
  color: var(--redColor);
}

.product-desc .input-counter span i {
  position: relative;
  top: 2px;
  font-weight: 600;
}

.product-desc .input-counter .minus-btn {
  left: 0;
  border-right: 1.5px solid #0000004a;
}

.product-desc .input-counter .plus-btn {
  right: 0;
  border-left: 1.5px solid #0000004a;
}

.product-desc .input-counter input {
  height: 52px;
  color: --bodyColor;
  outline: 0;
  display: block;
  border: none;
  background-color: transparent;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
}

.product-desc .product-add-btn {
  display: inline-block;
  margin-bottom: 25px;
  position: relative;
  top: 2px;
}

.product-desc .product-add-btn .default-btn {
  margin-right: 12px;
}

.product-desc .product-add-btn .default-btn:last-child {
  margin-right: 0;
}

.product-desc .product-share ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.product-desc .product-share ul li {
  display: inline-block;
  margin: 0 3px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-desc .product-share ul li span {
  display: inline-block;
  padding-right: 5px;
  font-size: 16px;
  color: var(--titleColor);
  font-weight: 600;
}

.product-desc .product-share ul li a i {
  color: var(--redColor);
  font-size: 18px;
  line-height: 1;
  position: relative;
  top: 2px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product-desc .product-share ul li a:hover i {
  color: var(--titleColor);
}

.shop-detls-tab .tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-detls-tab .tabs li {
  display: inline-block;
  line-height: initial;
  margin-right: 20px;
  position: relative;
  color: var(--titleColor);
  font-family: var(--headerFonts);
  font-size: 20px;
  cursor: pointer;
  padding: 12px 26px;
  border: 1px solid var(--titleColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.shop-detls-tab .tabs li:focus {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border-color: var(--redColor);
}

.shop-detls-tab .tabs li.active {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border-color: var(--redColor);
}

.shop-detls-tab .tabs li.current {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border-color: var(--redColor);
}

.shop-detls-tab .tabs li:hover {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border-color: var(--redColor);
}

.tab .tabs_item {
  display: none;
}

.tab .tabs_item:first-child {
  display: block;
}

.shop-detls-tab-content {
  margin-top: 30px;
  margin-bottom: 30px;
}

.shop-detls-tab-content p {
  margin-bottom: 20px;
}

.shop-detls-tab-content p:last-child {
  margin-bottom: 0;
}

.shop-detls-tab-content .additional-information {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  text-align: left;
}

.shop-detls-tab-content .additional-information li {
  border: 1px solid #F5F5F5;
  border-bottom: none;
  padding: 10px 15px 7px;
  color: var(--bodyColor);
}

.shop-detls-tab-content .additional-information li:last-child {
  border-bottom: 1px solid #F5F5F5;
}

.shop-detls-tab-content .additional-information li span {
  display: inline-block;
  width: 40%;
  color: var(--titleColor);
  font-weight: 600;
}

.shop-detls-tab-content h3 {
  margin-bottom: 15px;
  font-size: 24px;
}

.shop-detls-tab-content .shop-review-form .review-title {
  position: relative;
}

.shop-detls-tab-content .shop-review-form .review-title .rating {
  display: inline-block;
}

.shop-detls-tab-content .shop-review-form .review-title .rating i {
  color: #ffc107;
  font-size: 14px;
}

.shop-detls-tab-content .shop-review-form .review-title .rating p {
  margin-bottom: 0;
  display: inline-block;
  padding-left: 5px;
  line-height: initial;
}

.shop-detls-tab-content .shop-review-form .review-title .btn-right {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
  color: var(--whiteColor);
  background-color: var(--redColor);
  padding: 7px 15px;
  border-radius: 5px;
}

.shop-detls-tab-content .shop-review-form .review-title .btn-right:hover {
  background-color: var(--titleColor);
  color: var(--whiteColor);
}

.shop-detls-tab-content .shop-review-form .review-comments {
  margin-top: 35px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item {
  margin-top: 30px;
  position: relative;
  padding-right: 200px;
  border-top: 1px dashed #eeeeee;
  padding-top: 30px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .content {
  position: relative;
  z-index: 1;
  padding: 3px 0 3px 80px;
  margin-bottom: 15px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .content img {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  max-width: 60px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .content .content-dtls h4 {
  font-size: 18px;
  margin-bottom: 5px;
  margin-top: 0;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .content .content-dtls span {
  color: var(--redColor);
  font-size: 14px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .rating i {
  color: #ffc107;
  font-size: 14px;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item h3 {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--titleColor);
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item p {
  margin-bottom: 0;
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .review-report-link {
  position: absolute;
  right: 0;
  color: rgba(218, 29, 37, 0.53);
  top: 40px;
  text-decoration: underline;
  font-weight: 600;
  font-size: 15px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.shop-detls-tab-content .shop-review-form .review-comments .review-item .review-report-link:hover {
  color: var(--redColor);
}

.shop-detls-tab-content .shop-review-form .review-form {
  margin-top: 25px;
}

.shop-detls-tab-content .shop-review-form .review-form .contact-form {
  max-width: 100%;
  margin: 0 auto;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0;
}

.shop-detls-tab-content .shop-review-form .review-form .contact-form h4 {
  margin-bottom: 25px;
}

@-webkit-keyframes sharpline {
  100% {
    left: 125%;
  }
}

@keyframes sharpline {
  100% {
    left: 125%;
  }
}

/*=================================
Cart Wraps Area
===================================*/
.cart-wraps-area .cart-wraps {
  margin-bottom: 30px;
}

.cart-wraps-area .cart-table table {
  margin-bottom: 0;
}

.cart-wraps-area .cart-table table:not(:first-child) {
  border-top: none;
}

.cart-wraps-area .cart-table table thead tr {
  border-top: none;
  border-bottom: none;
}

.cart-wraps-area .cart-table table thead tr th {
  border-bottom-width: 0px;
  vertical-align: middle;
  padding: 20px;
  border: none;
  font-weight: 600;
  font-size: 18px;
  border: none;
  background-color: #F5F5F5;
  border-radius: 5px;
}

.cart-wraps-area .cart-table table tbody {
  border-top: none;
}

.cart-wraps-area .cart-table table tbody tr {
  border-top: none;
}

.cart-wraps-area .cart-table table tbody tr td {
  vertical-align: middle;
  color: var(--titleColor);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0;
  padding-right: 0;
  font-size: 15px;
  border-color: #eeeeee;
  border-left: none;
  border-right: none;
}

.cart-wraps-area .cart-table table tbody tr td.product-thumbnail a {
  display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  margin-right: 10px;
}

.cart-wraps-area .cart-table table tbody tr td.product-thumbnail a img {
  text-align: center;
}

.cart-wraps-area .cart-table table tbody tr td.product-name a {
  color: var(--titleColor);
  font-weight: 600;
  display: inline-block;
  font-size: 17px;
}

.cart-wraps-area .cart-table table tbody tr td.product-name a:hover {
  color: var(--redColor) !important;
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal .default-btn i {
  position: relative;
  top: 3px;
  margin-left: 3px;
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove {
  color: var(--bodyColor);
  float: right;
  position: relative;
  top: 1px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove i {
  font-size: 24px;
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove:hover {
  color: var(--redColor);
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal span {
  font-weight: 600;
}

.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove-mt {
  top: 12px;
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter {
  max-width: 150px;
  min-width: 150px;
  margin-right: 15px;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-bottom: 20px;
  font-weight: 600;
  background-color: rgba(107, 146, 70, 0.12);
  border-radius: 20px;
  height: 48px;
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter span {
  position: absolute;
  top: 4px;
  background-color: transparent;
  cursor: pointer;
  color: --bodyColor;
  width: 50px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter span:hover {
  color: var(--redColor);
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter span i {
  position: relative;
  top: 2px;
  font-weight: 600;
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .minus-btn {
  left: 0;
  border-right: 1.5px solid rgba(107, 146, 70, 0.4);
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .plus-btn {
  right: 0;
  border-left: 1.5px solid rgba(107, 146, 70, 0.4);
}

.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter input {
  height: 45px;
  color: --bodyColor;
  outline: 0;
  display: block;
  border: none;
  background-color: transparent;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
}

.cart-wraps-area .cart-buttons .cart-widget-form-area {
  max-width: 540px;
}

.cart-wraps-area .cart-buttons .cart-widget-form-area .cart-widget-form {
  position: relative;
}

.cart-wraps-area .cart-buttons .cart-widget-form-area .cart-widget-form .form-control {
  background-color: #F5F5F5;
  border-radius: 5px;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border: none;
  padding: 0 25px;
  color: var(--bodyColor);
}

.cart-wraps-area .cart-buttons .cart-widget-form-area .cart-widget-form .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--redColor);
}

.cart-wraps-area .cart-buttons .cart-widget-form-area .cart-widget-form .subscribe-btn {
  position: absolute;
  display: inline-block;
  right: 5px;
  top: 5px;
  background-color: var(--redColor);
  color: var(--whiteColor);
  height: 50px;
  line-height: 52px;
  padding: 0 25px;
  border: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-align: center;
  border-radius: 5px;
}

.cart-wraps-area .cart-buttons .cart-widget-form-area .cart-widget-form .subscribe-btn:hover {
  background-color: var(--titleColor);
  color: var(--whiteColor);
}

.cart-totals {
  border-radius: 0;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  padding: 40px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

.cart-totals h3 {
  font-size: 26px;
  margin-bottom: 15px;
}

.cart-totals ul {
  padding: 0;
  margin: 0 0 25px;
  list-style-type: none;
  border: 1px solid #eeeeee;
  border-radius: 5px;
}

.cart-totals ul li {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 15px;
  color: var(--titleColor);
  overflow: hidden;
  font-weight: 500;
}

.cart-totals ul li:last-child {
  border-bottom: none;
}

.cart-totals ul li span {
  float: right;
  color: var(--bodyColor);
  font-weight: normal;
}

.cart-totals ul li span b {
  color: var(--titleColor);
}

/*=================================
Checkout Area
===================================*/
.checkout-user {
  margin-bottom: 30px;
  padding: 15px 25px;
  background-color: #F8F8F8;
  border-radius: 5px;
}

.checkout-user i {
  position: relative;
  top: 2px;
  font-size: 18px;
  margin-right: 5px;
}

.checkout-user span {
  color: var(--redColor);
}

.checkout-user span a {
  color: var(--bodyColor);
}

.checkout-user span a:hover {
  color: var(--redColor);
}

.billing-details h3 {
  margin-bottom: 25px;
}

.billing-details .form-group {
  margin-bottom: 25px;
}

.billing-details .form-group label {
  color: var(--titleColor);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.billing-details .form-group label span {
  color: var(--redColor);
}

.billing-details .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: #F8F8F8;
  border-radius: 5px;
  padding: 10px 20px;
  width: 100%;
}

.billing-details .form-group .form-control:focus, .billing-details .form-group .form-control :hover {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.billing-details .form-group .form-message {
  font-size: 16px;
  border: none;
  background-color: #F8F8F8;
  padding: 18px 18px;
  font-weight: 400;
  width: 100%;
  border-radius: 5px;
}

.billing-details .form-group .form-message:focus, .billing-details .form-group .form-message :hover {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.billing-details .form-check {
  margin-bottom: 15px;
}

.billing-details .form-check .form-check-input {
  width: 15px;
  height: 15px;
}

.billing-details .form-check .form-check-label {
  color: var(--titleColor);
  margin-left: 5px;
  font-weight: 500;
}

.billing-totals {
  margin-bottom: 30px;
}

.billing-totals h3 {
  margin-bottom: 25px;
}

.billing-totals ul {
  padding: 0;
  margin: 0 0 25px;
  list-style-type: none;
  border: 1px solid #eeeeee;
  position: relative;
}

.billing-totals ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #eeeeee;
}

.billing-totals ul li {
  padding: 10px 15px;
  color: var(--bodyColor);
  overflow: hidden;
  font-weight: 500;
}

.billing-totals ul li b {
  color: var(--titleColor);
}

.billing-totals ul li.border-line {
  border-bottom: 1px solid #eeeeee;
}

.billing-totals ul li.list-color {
  color: var(--titleColor);
}

.billing-totals ul li span {
  float: right;
  color: var(--bodyColor);
}

.billing-totals ul li span b {
  color: var(--titleColor);
}

.payment-box {
  background-color: var(--whiteColor);
  border: 1px solid #eeeeee;
  margin-bottom: 30px;
  padding: 40px 30px;
}

.payment-box .payment-method h3 {
  margin-bottom: 25px;
}

.payment-box .payment-method p [type="radio"]:checked {
  display: none;
}

.payment-box .payment-method p [type="radio"]:checked + label {
  padding-left: 27px;
  cursor: pointer;
  display: block;
  font-weight: 600;
  color: var(--titleColor);
  position: relative;
  margin-bottom: 15px;
}

.payment-box .payment-method p [type="radio"]:checked + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: #ffffff;
}

.payment-box .payment-method p [type="radio"]:checked + label::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--redColor);
  position: absolute;
  top: 7px;
  left: 4px;
  border-radius: 3px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.payment-box .payment-method p [type="radio"]:not(:checked) {
  display: none;
}

.payment-box .payment-method p [type="radio"]:not(:checked) + label {
  padding-left: 27px;
  cursor: pointer;
  display: block;
  font-weight: 600;
  color: #172541;
  position: relative;
  margin-bottom: 15px;
}

.payment-box .payment-method p [type="radio"]:not(:checked) + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: #ffffff;
}

.payment-box .payment-method p [type="radio"]:not(:checked) + label::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--redColor);
  position: absolute;
  top: 7px;
  left: 4px;
  border-radius: 3px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.payment-box .default-btn {
  margin-top: 7px;
}

.portfolio-item {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.portfolio-item .portfolio-img {
  display: block;
  overflow: hidden;
}

.portfolio-item .portfolio-img img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.portfolio-item .portfolio-content {
  position: absolute;
  z-index: 1;
  left: -50%;
  bottom: 20px;
  width: 90%;
  margin: 0 auto;
  padding: 35px 40px;
  background-color: var(--titleColor);
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.portfolio-item .portfolio-content h3 {
  margin-bottom: 5px;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.portfolio-item .portfolio-content h3 a {
  color: var(--whiteColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.portfolio-item .portfolio-content h3 a:hover {
  color: var(--redColor);
}

.portfolio-item .portfolio-content span {
  color: var(--whiteColor);
  display: block;
  margin-bottom: 0;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.portfolio-item:hover .portfolio-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(3px);
          filter: blur(3px);
}

.portfolio-item:hover .portfolio-content {
  opacity: 1;
  left: 0;
}

.portfolio-details-content h1, .portfolio-details-content h2, .portfolio-details-content h3, .portfolio-details-content h4, .portfolio-details-content h5, .portfolio-details-content h6 {
  margin-bottom: 15px;
}

.portfolio-details-content h1 {
  font-size: 45px;
}

.portfolio-details-content h2 {
  font-size: 40px;
}

.portfolio-details-content h3 {
  font-size: 35px;
}

.portfolio-details-content h4 {
  font-size: 32px;
}

.portfolio-details-content h5 {
  font-size: 30px;
}

.portfolio-details-content h6 {
  font-size: 26px;
}

.portfolio-details-content a {
  color: var(--redColor);
}

.portfolio-details-content a:hover {
  color: var(--titleColor);
}

.portfolio-details-content ul, .portfolio-details-content ol {
  margin-bottom: 30px;
}

.portfolio-details-content ul li, .portfolio-details-content ol li {
  margin-bottom: 10px;
}

.portfolio-details-content ul li:last-child, .portfolio-details-content ol li:last-child {
  margin-bottom: 0;
}

.portfolio-details-content p {
  margin-bottom: 15px;
}

.portfolio-details-content .portfolio-details-img {
  margin-bottom: 30px;
  padding-top: 20px;
}

.portfolio-details-content .portfolio-details-overview {
  margin-bottom: 30px;
}

.portfolio-details-content .portfolio-details-overview ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.portfolio-details-content .portfolio-details-overview ul li {
  display: block;
  font-size: 16px;
  padding-left: 25px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.portfolio-details-content .portfolio-details-overview ul li i {
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--redColor);
  font-size: 14px;
}

.portfolio-details-content .portfolio-details-overview ul li:hover {
  color: var(--redColor);
}

.single-content {
  margin-bottom: 30px;
}

.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6 {
  margin-bottom: 15px;
}

.single-content h1 {
  font-size: 32px;
}

.single-content h2 {
  font-size: 29px;
}

.single-content h3 {
  font-size: 26px;
}

.single-content h4 {
  font-size: 23px;
}

.single-content h5 {
  font-size: 20px;
}

.single-content h6 {
  font-size: 17px;
}

.single-content a {
  color: var(--redColor);
}

.single-content a:hover {
  color: var(--titleColor);
  border-bottom: 1px solid var(--redColor);
}

.single-content ul, .single-content ol {
  margin-bottom: 30px;
}

.single-content ul li, .single-content ol li {
  margin-bottom: 10px;
}

.single-content ul li:last-child, .single-content ol li:last-child {
  margin-bottom: 0;
}

.single-content p {
  margin-bottom: 15px;
}

.single-content p:last-child {
  margin-bottom: 0;
}

/*=================================
404 Error Area
===================================*/
.error-area .error-content {
  text-align: center;
  position: relative;
}

.error-area .error-content h1 {
  font-size: 260px;
  line-height: 0.9;
  font-weight: 700;
  color: var(--titleColor);
  position: relative;
  margin-bottom: -50px;
}

.error-area .error-content h1 span {
  color: var(--redColor);
}

.error-area .error-content h3 {
  margin: 35px 0 0;
  position: relative;
  color: var(--titleColor);
  font-size: 35px;
}

.error-area .error-content p {
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/*=================================
Coming Soon Area
===================================*/
.coming-soon-area {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  background-color: var(--titleColor);
}

.coming-soon-area .coming-soon-content {
  text-align: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  padding: 50px 30px;
  background-color: transparent;
  border: 3px solid var(--whiteColor);
}

.coming-soon-area .coming-soon-content h1 {
  margin-bottom: 0;
  color: var(--whiteColor);
  font-size: 50px;
}

.coming-soon-area .coming-soon-content p {
  font-size: 16px;
  max-width: 600px;
  margin-top: 15px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  color: var(--whiteColor);
}

.coming-soon-area .coming-soon-content #timer {
  margin-top: 40px;
}

.coming-soon-area .coming-soon-content #timer div {
  display: inline-block;
  color: var(--whiteColor);
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 10px;
  font-size: 30px;
  padding-top: 4px;
  font-weight: 700;
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid var(--whiteColor);
}

.coming-soon-area .coming-soon-content #timer div span {
  display: block;
  text-transform: capitalize;
  margin-top: -10px;
  font-size: 16px;
  font-weight: normal;
  color: var(--whiteColor);
}

.coming-soon-area .coming-soon-content #timer div:last-child {
  margin-right: 0;
}

.coming-soon-area .coming-soon-content #timer div:last-child::before {
  display: none;
}

.coming-soon-area .coming-soon-content #timer div:first-child {
  margin-left: 0;
}

.coming-soon-area .coming-soon-content #timer div::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -10px;
  font-size: 70px;
  color: #ffffff;
}

.coming-soon-area .coming-soon-content .newsletter-form {
  position: relative;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

.coming-soon-area .coming-soon-content .newsletter-form .input-newsletter {
  display: block;
  width: 100%;
  height: 60px;
  border: none;
  background-color: var(--whiteColor);
  padding-left: 15px;
  color: var(--whiteColor);
  outline: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border-radius: 0;
  border: 1px solid #cccccc;
  color: #5d5d5d;
}

.coming-soon-area .coming-soon-content .newsletter-form .input-newsletter:focus {
  border-color: var(--redColor);
}

.coming-soon-area .coming-soon-content .newsletter-form .default-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  padding: 0 30px;
  text-transform: uppercase;
  outline: 0;
  color: #ffffff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  background-color: var(--redColor);
}

.coming-soon-area .coming-soon-content .newsletter-form .default-btn::before {
  border-radius: 0;
  background-color: var(--titleColor);
}

.coming-soon-area .coming-soon-content .newsletter-form .default-btn:hover {
  color: #ffffff;
  background-color: #190f3c;
}

.coming-soon-area #validator-newsletter {
  text-align: left;
  color: #dc3545 !important;
}

/*================================
Pagination Area
===================================*/
.pagination-area {
  margin-top: 10px;
  margin-bottom: 30px;
}

.pagination-area .page-numbers {
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #888888;
  background-color: transparent;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 20px;
  border-radius: 50px;
  border: 1px solid #EEEEEE;
}

.pagination-area .page-numbers:hover {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.pagination-area .page-numbers i {
  position: relative;
  font-size: 22px;
  line-height: normal;
  top: 5px;
}

.pagination-area .page-numbers.current {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.pagination-area select.page-numbers {
  width: auto;
  min-width: 72px;
  height: 60px;
  line-height: normal;
  border-radius: 30px;
  padding: 0 18px 0 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: transparent;
  border: 1px solid #EEEEEE;
  color: #888888;
  vertical-align: middle;
}

.pagination-area select.page-numbers:hover,
.pagination-area select.page-numbers:focus {
  background-color: var(--redColor);
  color: var(--whiteColor);
  border-color: var(--redColor);
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

.pagination-area select.page-numbers option {
  background-color: #1a1a2e;
  color: #ffffff;
  font-size: 16px;
}

.pagination-area-color .page-numbers {
  border: 1px solid var(--whiteColor);
}

.pagination-area-color .page-numbers:hover {
  border-color: var(--redColor);
}

.pagination-area-color .page-numbers.current {
  border-color: var(--redColor);
}

/*================================
Footer Area
===================================*/
.footer-area {
  background-color: #000000;
}

.newsletter-area {
  max-width: 900px;
  margin: 0 auto;
}

.newsletter-area .section-title {
  margin-bottom: 30px;
}

.newsletter-area .section-title h2 {
  color: var(--whiteColor);
}

.newsletter-area .newsletter-form {
  position: relative;
  margin-bottom: 40px;
}

.newsletter-area .newsletter-form .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  height: 80px;
  line-height: 80px;
  margin: 0;
  border: none;
  padding: 0 25px;
  color: var(--bodyColor);
}

.newsletter-area .newsletter-form .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--whiteColor);
}

.newsletter-area .newsletter-form .subscribe-btn {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 10px;
  background-color: var(--redColor);
  color: var(--whiteColor);
  height: 60px;
  line-height: 62px;
  padding: 0 32px;
  border: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-align: center;
}

.newsletter-area .newsletter-form .subscribe-btn i {
  position: relative;
  top: 3px;
  margin-left: 10px;
}

.newsletter-area .newsletter-form .subscribe-btn:hover {
  background-color: var(--whiteColor);
  color: var(--redColor);
}

.newsletter-area .newsletter-form .validation-danger {
  font-size: 18px;
  margin-top: 5px;
  color: red;
}

.newsletter-social {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.newsletter-social li {
  display: inline-block;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  margin-right: 10px;
}

.newsletter-social li:last-child {
  margin-right: 0;
}

.newsletter-social li a {
  display: inline-block;
}

.newsletter-social li a i {
  width: 50px;
  height: 50px;
  line-height: 52px;
  text-align: center;
  font-size: 18px;
  color: var(--redColor);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  display: inline-block;
  border-radius: 50px;
}

.newsletter-social li a:hover i {
  background-color: var(--redColor);
  color: var(--whiteColor);
}

.copyright-area {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 15px 0;
}

.copyright-area .copyright-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.copyright-area .copyright-list li {
  display: inline-block;
  margin-right: 35px;
}

.copyright-area .copyright-list li:last-child {
  margin-right: 0;
}

.copyright-area .copyright-list li a {
  color: var(--whiteColor);
}

.copyright-area .copyright-list li:hover a {
  color: var(--redColor);
  letter-spacing: 0.25px;
}

.copyright-area .copy-right-text {
  float: right;
}

.copyright-area .copy-right-text p {
  color: var(--whiteColor);
  margin-bottom: 0;
}

.copyright-area .copy-right-text p b {
  color: var(--redColor);
  font-weight: 500;
}

.copyright-area .copy-right-text p a {
  color: var(--redColor);
}

.copyright-area .copy-right-text p a:hover {
  color: var(--whiteColor);
}

/*=================================
Go Top Area 
====================================*/
.go-top {
  position: fixed;
  top: 30%;
/*  bottom: 28px;*/
  right: 4em;
  opacity: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--whiteColor);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background: var(--redColor);
  border-radius: 0;
  width: 45px;
  height: 45px;
  line-height: 41px;
  z-index: 100;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.go-top i {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  vertical-align: middle;
}

.go-top:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--redColor);
}

.go-top:hover i {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.go-top.active {
  top: 95%;
  -webkit-transform: translateY(-95%);
          transform: translateY(-95%);
  opacity: 1;
  visibility: visible;
}

/*=================================
Preloader CSS
====================================*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

#preloader-area {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  z-index: 1001;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pre-line {
  background-color: var(--whiteColor);
  width: 7px;
  height: 40px;
  margin: 0px 5px;
  border: none;
  -webkit-animation: size 0.8s infinite linear;
          animation: size 0.8s infinite linear;
  border-radius: 20px;
}

.pre-line-1 {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
}

.pre-line-2 {
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;
}

.pre-line-3 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.pre-line-4 {
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;
}

.pre-line-5 {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
}

#preloader .preloader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background-color: var(--redColor);
  z-index: 999;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

#preloader .preloader-section.preloader-left {
  left: 0;
}

#preloader .preloader-section.preloader-right {
  right: 0;
}

.loaded #preloader-area {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #preloader .preloader-section.preloader-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #preloader .preloader-section.preloader-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.8s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #preloader {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

@-webkit-keyframes size {
  0% {
    height: 40px;
  }
  25% {
    height: 60px;
  }
  50% {
    height: 90px;
  }
  75% {
    height: 60px;
  }
  100% {
    height: 40px;
  }
}

@keyframes size {
  0% {
    height: 40px;
  }
  25% {
    height: 60px;
  }
  50% {
    height: 90px;
  }
  75% {
    height: 60px;
  }
  100% {
    height: 40px;
  }
}

@-webkit-keyframes rotated360 {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}

@keyframes rotated360 {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
            transform: rotateZ(-360deg);
  }
}

@keyframes rotatedIn {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotatedIn {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/*# sourceMappingURL=style.css.map */

/* --- Compact Timetable Table Overrides --- */
.timetable-table-area table thead th,
.timetable-table-area table tbody td {
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.timetable-table-area table tbody td .tbody-content h3 {
  font-size: 15px !important;
}

.timetable-table-area table tbody td .tbody-content span,
.timetable-table-area table tbody td .tbody-content .content h4 {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

.timetable-table-area table tbody td .tbody-content .content {
  padding-top: 6px !important;
}

.timetable-table-area table tbody td .tbody-content .booking-slot-line span {
  margin-bottom: 0;
  display: inline;
}
.timetable-table-area table tbody td .tbody-content .booking-slot-line .bsl-date {
  color: rgba(255, 255, 255, 0.82);
}
.timetable-table-area table tbody td .tbody-content .booking-slot-line .bsl-field {
  color: #fff;
}

.booking-slot-lines {
  margin: 0 0 4px;
  text-align: center;
}
.booking-slot-line {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.booking-slot-line + .booking-slot-line {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0;
  padding-top: 5px;
}
.bsl-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  width: 100%;
}
.booking-slot-line .bsl-line-details,
.booking-slot-line .bsl-line-meta {
  justify-content: center;
}
.booking-slot-line .bsl-line-meta {
  gap: 6px;
}
.bcs-line-details {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.bsl-sep,
.bcs-sep {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  line-height: 1;
  user-select: none;
}
.bsl-meta-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
}
.booking-slot-line .bsl-field,
.booking-slot-line .bsl-date,
.booking-slot-line .bsl-time,
.booking-slot-line .bsl-price,
.booking-slot-line .bsl-game {
  display: inline;
  white-space: nowrap;
  flex-shrink: 0;
}
.booking-slot-line .bsl-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.booking-slot-line .bsl-field {
  font-weight: 600;
  color: #fff;
}
.booking-slot-line .bsl-time {
  font-size: 12px;
  font-weight: 600;
}
.booking-slot-line .bsl-price {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.timetable-table-area table tbody td .tbody-content .booking-slot-line .bsl-price {
  color: rgba(255, 255, 255, 0.88);
}
.booking-slot-line .bsl-game {
  opacity: 0.95;
  font-size: 14px;
  line-height: 1;
}
.booking-slot-line .bsl-game-btn {
  display: inline;
  margin: 0;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.booking-slot-line .bsl-game-btn:hover {
  opacity: 1;
  transform: scale(1.12);
}
.booking-slot-line .bsl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #f87171;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}
.booking-slot-line .bsl-remove:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}
.booking-slot-line.bsl-unavailable .bsl-line-details {
  color: #fbbf24;
}
.booking-slot-line .bsl-unavailable-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fbbf24;
}
.restore-blocked-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.restore-blocked-list li {
  font-size: 13px;
  line-height: 1.45;
}
#PendingBookingsModal .owner-modal-restore-warning,
.owner-booking-inline-list .owner-modal-restore-warning,
.manager-booking-inline-list .owner-modal-restore-warning {
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid #fed7aa;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
}
#PendingBookingsModal .owner-modal-restore-warning__title,
.owner-booking-inline-list .owner-modal-restore-warning__title,
.manager-booking-inline-list .owner-modal-restore-warning__title {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #9a3412;
}
#PendingBookingsModal .owner-modal-restore-warning__title i,
.owner-booking-inline-list .owner-modal-restore-warning__title i,
.manager-booking-inline-list .owner-modal-restore-warning__title i {
    font-size: 16px;
    color: #ea580c;
    flex-shrink: 0;
    margin-top: 1px;
}
#PendingBookingsModal .owner-modal-restore-warning__list,
.owner-booking-inline-list .owner-modal-restore-warning__list,
.manager-booking-inline-list .owner-modal-restore-warning__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#PendingBookingsModal .owner-modal-restore-warning__list li,
#PendingBookingsModal .owner-modal-restore-warning__item,
.owner-booking-inline-list .owner-modal-restore-warning__list li,
.owner-booking-inline-list .owner-modal-restore-warning__item,
.manager-booking-inline-list .owner-modal-restore-warning__list li,
.manager-booking-inline-list .owner-modal-restore-warning__item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #fdba74;
    font-size: 12px;
    line-height: 1.35;
    color: #7c2d12;
}
#PendingBookingsModal .owner-modal-restore-warning__details,
.owner-booking-inline-list .owner-modal-restore-warning__details,
.manager-booking-inline-list .owner-modal-restore-warning__details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
#PendingBookingsModal .owner-modal-restore-warning__remove,
.owner-booking-inline-list .owner-modal-restore-warning__remove,
.manager-booking-inline-list .owner-modal-restore-warning__remove {
    flex-shrink: 0;
}
#PendingBookingsModal .owner-modal-restore-warning__date,
#PendingBookingsModal .owner-modal-restore-warning__field,
.owner-booking-inline-list .owner-modal-restore-warning__date,
.owner-booking-inline-list .owner-modal-restore-warning__field,
.manager-booking-inline-list .owner-modal-restore-warning__date,
.manager-booking-inline-list .owner-modal-restore-warning__field {
    font-weight: 600;
    color: #431407;
}
#PendingBookingsModal .owner-modal-restore-warning__time,
.owner-booking-inline-list .owner-modal-restore-warning__time,
.manager-booking-inline-list .owner-modal-restore-warning__time {
    font-weight: 800;
    color: #c2410c;
}
#PendingBookingsModal .owner-modal-restore-warning__sep,
.owner-booking-inline-list .owner-modal-restore-warning__sep,
.manager-booking-inline-list .owner-modal-restore-warning__sep {
    color: #fdba74;
}
#PendingBookingsModal .owner-modal-restore-warning__hint,
.owner-booking-inline-list .owner-modal-restore-warning__hint,
.manager-booking-inline-list .owner-modal-restore-warning__hint {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: #9a3412;
}

.remove-slot-hour-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.remove-slot-hour-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
}
.remove-slot-hour-option input {
  margin: 0;
  flex-shrink: 0;
}
.remove-slot-hour-option .remove-slot-hour-label {
  flex: 1;
  min-width: 0;
}
.remove-slot-hour-option .remove-slot-hour-price {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.remove-slot-hour-option:has(input:checked) {
  border-color: #ef4444;
  background: #fef2f2;
}

.booking-customer-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.booking-customer-title a {
  text-decoration: none;
}
.booking-customer-title a:hover {
  text-decoration: underline;
}
.btn-booking-ids {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #bbb;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-booking-ids:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.booking-ids-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.booking-id-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.border-gray {
  border: 1px solid #495057 !important;
}
/* ===== Home Page ===== */
.banner-sports {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #ffffff;
}
.banner-stats {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.80);
}

/* ===== Padel Page ===== */
.padel-stats-strip {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.padel-stat {
    text-align: center;
}
.padel-stat h3 {
    font-size: 42px;
    font-weight: 800;
    color: #e8192c;
    margin: 0;
}
.padel-stat p {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}
.padel-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.padel-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.padel-feature-item i {
    font-size: 24px;
    color: #e8192c;
    flex-shrink: 0;
    margin-top: 2px;
}
.padel-feature-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
}
.padel-feature-item p {
    font-size: 13px;
    margin: 0;
    opacity: 0.8;
}
.padel-venues-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.padel-venue-card {
    border: 1px solid rgba(232, 25, 44, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.padel-venue-card:hover {
    border-color: #e8192c;
}
.padel-venue-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.padel-venue-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.padel-venue-card:hover .padel-venue-img img {
    transform: scale(1.05);
}
.padel-venue-body {
    padding: 20px;
}
.padel-venue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.padel-venue-header h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #e8192c;
}
.padel-badge {
    background: #e8192c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.padel-venue-body > p {
    font-size: 13px;
    opacity: 0.75;
    margin-bottom: 12px;
}
.padel-venue-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.padel-venue-card ul li {
    font-size: 13px;
    padding: 3px 0;
}
.padel-venue-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.padel-venue-actions .btn-outline {
    background: transparent;
    border: 2px solid #e8192c;
    color: #e8192c;
}
.padel-venue-actions .btn-outline:hover {
    background: #e8192c;
    color: #fff;
}
@media (max-width: 768px) {
    .padel-venues-grid {
        grid-template-columns: 1fr;
    }
    .padel-features {
        grid-template-columns: 1fr;
    }
    .padel-stats-strip {
        gap: 20px;
    }
    .padel-venue-img {
        height: 180px;
    }
}

/* ===== WhatsApp CTA Strip ===== */
.whatsapp-cta-strip {
    background: #25d366;
    padding: 30px 0;
}
.whatsapp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.whatsapp-cta-text h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
}
.whatsapp-cta-text p {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.whatsapp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #25d366;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 5px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
}
.whatsapp-cta-btn i {
    font-size: 20px;
}
.whatsapp-cta-btn:hover {
    background: #128c4e;
    color: #fff;
}
@media (max-width: 768px) {
    .whatsapp-cta-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== Venue Sport Badges ===== */
.venue-sports-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.venue-sport-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(232, 25, 44, 0.1);
    color: #e8192c;
    border: 1px solid rgba(232, 25, 44, 0.3);
}

/* ===== Home Page - FAQ ===== */
.faq-intro {
    max-width: 600px;
}

/* ===== Banner Booking Card ===== */
.banner-booking-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
    max-width: 480px;
}
.banner-booking-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}
.banner-booking-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}
.banner-booking-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}
.banner-booking-field label i {
    margin-right: 4px;
}
.banner-booking-field .form-control {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 12px;
    height: auto;
}
.banner-booking-field .form-control option {
    color: #333;
    background: #fff;
}
.banner-booking-field .form-control:focus {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
    color: #fff;
}
.banner-booking-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}
@media (max-width: 576px) {
    .banner-booking-fields {
        grid-template-columns: 1fr;
    }
    .banner-booking-card {
        max-width: 100%;
    }
}

/* ===== Padel Page ===== */
.padel-intro {
    max-width: 750px;
}
.padel-venues-intro {
    max-width: 600px;
}

/* ===== Padel About Section - lighter background for readability ===== */
.training-area-light {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/banner.png);
}
.training-area-light h2,
.training-area-light p,
.training-area-light span {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.training-area-light .padel-feature-item h4 {
    color: #fff;
}
.training-area-light .padel-feature-item p {
    color: rgba(255, 255, 255, 0.85);
}
.training-area-light .padel-feature-item i {
    color: #ff6b7a;
}
/* ===== 6-box OTP layout ===== */
.pin-boxes-6 {
    gap: 8px;
}
.pin-boxes-6 .pin-box {
    width: 46px;
    height: 52px;
    font-size: 20px;
}
@media (max-width: 480px) {
    .pin-boxes-6 .pin-box {
        width: 38px;
        height: 46px;
        font-size: 17px;
    }
}

/* ===== Skip for now — smaller ===== */
#otp-skip-pin-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    opacity: 0.7;
}
#otp-skip-pin-btn:hover {
    opacity: 1;
}
.pin-field-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #e8192c;
    margin-bottom: 6px;
    display: block;
}
.pin-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 0 20px;
    min-height: 140px;
    text-align: center;
}
.pin-modal-loading .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.2em;
}
/* ===== 4-box PIN Input ===== */
.pin-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 8px 0;
}
.pin-box {
    width: 56px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    color: #333;
}
.pin-box:focus {
    border-color: #e8192c;
    box-shadow: 0 0 0 3px rgba(232,25,44,0.15);
}
.pin-box.filled {
    border-color: #e8192c;
    background: rgba(232,25,44,0.04);
}
.pin-box.error {
    border-color: #dc3545;
    animation: pin-shake 0.3s ease;
}
@keyframes pin-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* ===== Login Modal ===== */
.login-modal-dialog {
    max-width: 400px;
}
.login-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.login-modal-header {
    background: linear-gradient(135deg, #e8192c 0%, #c0101f 100%);
    padding: 24px 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-modal-header--success {
    background: linear-gradient(135deg, #1db954 0%, #17a045 100%);
}
.login-modal-header--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.login-modal-header--pending {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}
.login-modal-dialog--bookings {
    max-width: min(580px, calc(100vw - 2rem));
}
.login-modal-dialog--ss-view {
    max-width: min(520px, calc(100vw - 2rem));
}
.payment-ss-view-body {
    padding: 12px;
    text-align: center;
    background: #f8fafc;
}
.payment-ss-view-body img {
    display: block;
    max-width: 100%;
    max-height: min(70vh, 640px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
}
.owner-bookings-modal-body {
    padding: 16px 20px 20px;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    background: #fff;
}
#PendingBookingsModal .owner-bookings-modal-close {
    width: 100%;
    color: #475569 !important;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    font-weight: 600;
}
#PendingBookingsModal .owner-bookings-modal-close:hover {
    color: #111827 !important;
    border-color: #cbd5e1;
    background: #f8fafc;
}
#PendingBookingsModal .owner-bookings-modal-close i {
    color: inherit;
}
#PendingBookingsModal .owner-bookings-modal-body .text-light,
#PendingBookingsModal .owner-bookings-modal-body .text-light a {
    color: #334155 !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-customer-title,
#PendingBookingsModal .owner-bookings-modal-body .booking-customer-title a {
    color: #111827 !important;
    font-size: 0.95rem;
    font-weight: 700;
}
#PendingBookingsModal .owner-bookings-modal-body .btn-booking-ids {
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #475569;
}
#PendingBookingsModal .owner-bookings-modal-body .btn-booking-ids:hover {
    background: #e2e8f0;
    color: #111827;
    border-color: #cbd5e1;
}
#PendingBookingsModal .owner-bookings-modal-body .timetable-table-area {
    background: transparent;
    border-radius: 12px;
}
/* Pending / auto-cancel modal booking cards */
#PendingBookingsModal .owner-modal-month-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
#PendingBookingsModal .owner-modal-month-btn {
    flex: 1 1 0;
    min-width: 120px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #fdba74;
    background: #fff;
    color: #c2410c;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#PendingBookingsModal .owner-modal-month-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.35;
    background: #ffedd5;
    color: #c2410c;
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-month-btn.is-active .owner-modal-month-btn__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.owner-inline-month-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.owner-inline-month-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.06);
}
.owner-inline-month-btn.active .owner-inline-month-btn__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
#PendingBookingsModal .owner-modal-month-btn:hover {
    background: #fff7ed;
    border-color: #fb923c;
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-month-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border-color: #ea580c;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28);
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-booking-customer__who i {
    color: #ea580c;
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-booking-customer__who a:hover,
#PendingBookingsModal.owner-autocancel-modal .owner-modal-booking-contact:hover {
    color: #ea580c;
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-booking-card__expire {
    color: #ea580c !important;
}
#PendingBookingsModal.owner-autocancel-modal .owner-modal-booking-compact .bcs-field-when.text-warning {
    color: #ea580c !important;
}
#PendingBookingsModal .owner-booking-modal-list, .owner-booking-inline-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#PendingBookingsModal .owner-modal-booking-wrap + .owner-modal-booking-wrap, .owner-booking-inline-list .owner-modal-booking-wrap + .owner-modal-booking-wrap{
    padding-top: 4px;
}
#PendingBookingsModal .owner-modal-booking-wrap, .owner-booking-inline-list .owner-modal-booking-wrap{
    position: relative;
    border: none;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    padding-bottom: 36px;
}
#PendingBookingsModal .owner-modal-booking-wrap--pending, .owner-booking-inline-list .owner-modal-booking-wrap--pending{
    background: linear-gradient(165deg, #fffdf7 0%, #fff9ed 38%, #fef3c7 100%);
    border: none;
}
#PendingBookingsModal .owner-modal-booking-wrap--pending .owner-modal-booking-grid,
.owner-booking-inline-list .owner-modal-booking-wrap--pending .owner-modal-booking-grid,
.manager-booking-inline-list .owner-modal-booking-wrap--pending .owner-modal-booking-grid,
#PendingBookingsModal .owner-modal-booking-wrap--confirmed .owner-modal-booking-grid,
.owner-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-grid,
.manager-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-grid,
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-booking-grid,
.owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-grid,
.manager-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-grid,
#PendingBookingsModal .owner-modal-booking-wrap--autocancel .owner-modal-booking-grid,
.owner-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-booking-grid,
.manager-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-booking-grid {
    align-items: stretch;
}
#PendingBookingsModal .owner-modal-booking-grid__actions--stacked,
.owner-booking-inline-list .owner-modal-booking-grid__actions--stacked,
.manager-booking-inline-list .owner-modal-booking-grid__actions--stacked {
    align-self: stretch;
    min-height: 100%;
}
#PendingBookingsModal .owner-modal-booking-grid__side-top,
.owner-booking-inline-list .owner-modal-booking-grid__side-top,
.manager-booking-inline-list .owner-modal-booking-grid__side-top,
#PendingBookingsModal .owner-modal-booking-grid__pending-top,
.owner-booking-inline-list .owner-modal-booking-grid__pending-top,
.manager-booking-inline-list .owner-modal-booking-grid__pending-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#PendingBookingsModal .owner-modal-booking-grid__side-bottom,
.owner-booking-inline-list .owner-modal-booking-grid__side-bottom,
.manager-booking-inline-list .owner-modal-booking-grid__side-bottom,
#PendingBookingsModal .owner-modal-booking-grid__pending-bottom,
.owner-booking-inline-list .owner-modal-booking-grid__pending-bottom,
.manager-booking-inline-list .owner-modal-booking-grid__pending-bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}
#PendingBookingsModal .owner-modal-booking-wrap--pending .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-wrap--pending .owner-modal-booking-card__header{
    background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
    border-bottom-color: rgba(245, 158, 11, 0.28);
}
#PendingBookingsModal .owner-modal-booking-wrap--pending .owner-modal-booking-compact .booking-confirm-slots, .owner-booking-inline-list .owner-modal-booking-wrap--pending .owner-modal-booking-compact .booking-confirm-slots{
    background: #fff;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#PendingBookingsModal .owner-modal-booking-wrap--pending .owner-modal-booking-compact .booking-confirm-totals, .owner-booking-inline-list .owner-modal-booking-wrap--pending .owner-modal-booking-compact .booking-confirm-totals{
    background: rgba(255, 255, 255, 0.82);
    border-top-color: rgba(245, 158, 11, 0.18);
}
#PendingBookingsModal .owner-modal-booking-wrap--cancelled, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled{
    background: linear-gradient(165deg, #fff8f8 0%, #fef2f2 38%, #fee2e2 100%);
    border: none;
}
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header{
    background: linear-gradient(180deg, #fecaca 0%, #fca5a5 100%);
    border-bottom-color: rgba(220, 38, 38, 0.28);
}
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header-name i, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header-name i{
    color: #dc2626;
}
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-booking-compact .booking-confirm-slots, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-compact .booking-confirm-slots{
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-booking-compact .booking-confirm-totals, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-booking-compact .booking-confirm-totals{
    background: rgba(255, 255, 255, 0.82);
    border-top-color: rgba(220, 38, 38, 0.18);
}
#PendingBookingsModal .owner-modal-booking-wrap--confirmed, .owner-booking-inline-list .owner-modal-booking-wrap--confirmed{
    background: linear-gradient(165deg, #f7fff9 0%, #f0fdf4 38%, #dcfce7 100%);
    border: none;
}
#PendingBookingsModal .owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header{
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border-bottom-color: rgba(22, 163, 74, 0.28);
}
#PendingBookingsModal .owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header-name i, .owner-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header-name i{
    color: #16a34a;
}
#PendingBookingsModal .owner-modal-booking-wrap--confirmed .owner-modal-booking-compact .booking-confirm-slots, .owner-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-compact .booking-confirm-slots{
    background: #fff;
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#PendingBookingsModal .owner-modal-booking-wrap--confirmed .owner-modal-booking-compact .booking-confirm-totals, .owner-booking-inline-list .owner-modal-booking-wrap--confirmed .owner-modal-booking-compact .booking-confirm-totals{
    background: rgba(255, 255, 255, 0.82);
    border-top-color: rgba(22, 163, 74, 0.18);
}
#PendingBookingsModal .owner-modal-booking-wrap--autocancel, .owner-booking-inline-list .owner-modal-booking-wrap--autocancel{
    background: linear-gradient(165deg, #fffbf7 0%, #fff7ed 38%, #ffedd5 100%);
    border: none;
}
#PendingBookingsModal .owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header{
    background: rgba(255, 255, 255, 0.72);
    border-bottom-color: rgba(249, 115, 22, 0.18);
}
#PendingBookingsModal .owner-modal-booking-wrap--autocancel .owner-modal-booking-compact .booking-confirm-slots, .owner-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-booking-compact .booking-confirm-slots{
    background: #fff;
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 0 0 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#PendingBookingsModal .owner-modal-booking-wrap--autocancel .owner-modal-booking-compact .booking-confirm-totals, .owner-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-booking-compact .booking-confirm-totals{
    background: rgba(255, 255, 255, 0.82);
    border-top-color: rgba(249, 115, 22, 0.18);
}
#PendingBookingsModal .owner-modal-booking-wrap--autocancel .owner-modal-restore-warning, .owner-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-restore-warning,
#PendingBookingsModal .owner-modal-booking-wrap--cancelled .owner-modal-restore-warning, .owner-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-restore-warning,
.manager-booking-inline-list .owner-modal-booking-wrap--autocancel .owner-modal-restore-warning,
.manager-booking-inline-list .owner-modal-booking-wrap--cancelled .owner-modal-restore-warning {
    border-top-color: rgba(249, 115, 22, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, #fff7ed 100%);
}
#PendingBookingsModal .bcs-unavailable-label,
.owner-booking-inline-list .bcs-unavailable-label,
.manager-booking-inline-list .bcs-unavailable-label {
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-row--blocked,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked {
    margin: 0 -6px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 237, 213, 0.72);
    border: 1px solid #fdba74;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-row--blocked + .bcs-field-row--blocked,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked + .bcs-field-row--blocked,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked + .bcs-field-row--blocked {
    margin-top: 4px;
    border-top: none;
    padding-top: 6px;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-row--blocked .bcs-field-when,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked .bcs-field-when,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-row--blocked .bcs-field-when {
    color: #c2410c !important;
    background: #ffedd5 !important;
    font-weight: 800;
}
#PendingBookingsModal .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-card__header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8e8e8;
    background: #f8fafc;
}
#PendingBookingsModal .owner-modal-booking-card__header-end, .owner-booking-inline-list .owner-modal-booking-card__header-end{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
#PendingBookingsModal .owner-modal-booking-card__expire-wrap, .owner-booking-inline-list .owner-modal-booking-card__expire-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock, .owner-booking-inline-list .owner-modal-booking-card__expire-clock{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(254, 243, 199, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: #b45309;
    white-space: nowrap;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock i, .owner-booking-inline-list .owner-modal-booking-card__expire-clock i{
    font-size: 13px;
    animation: owner-pending-expire-spin 2.4s linear infinite;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock.is-urgent, .owner-booking-inline-list .owner-modal-booking-card__expire-clock.is-urgent{
    background: rgba(254, 226, 226, 0.95);
    border-color: rgba(220, 38, 38, 0.4);
    color: #dc2626;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock.is-urgent i, .owner-booking-inline-list .owner-modal-booking-card__expire-clock.is-urgent i{
    animation-duration: 1.2s;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock.is-expired, .owner-booking-inline-list .owner-modal-booking-card__expire-clock.is-expired{
    background: rgba(254, 226, 226, 0.95);
    border-color: rgba(220, 38, 38, 0.45);
    color: #dc2626;
}
#PendingBookingsModal .owner-modal-booking-card__expire-clock.is-expired i, .owner-booking-inline-list .owner-modal-booking-card__expire-clock.is-expired i{
    animation: none;
}
@keyframes owner-pending-expire-spin {
    to { transform: rotate(360deg); }
}
#PendingBookingsModal .owner-modal-booking-card__expire-countdown, .owner-booking-inline-list .owner-modal-booking-card__expire-countdown{
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}
#PendingBookingsModal .owner-modal-booking-card__expire-suffix, .owner-booking-inline-list .owner-modal-booking-card__expire-suffix{
    font-size: 10px;
    font-weight: 700;
    opacity: 0.9;
}
#PendingBookingsModal .owner-modal-booking-card__expire-label, .owner-booking-inline-list .owner-modal-booking-card__expire-label{
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #e8192c;
    white-space: nowrap;
}
#PendingBookingsModal .owner-modal-booking-card__corner-footer,
.owner-booking-inline-list .owner-modal-booking-card__corner-footer,
.manager-booking-inline-list .owner-modal-booking-card__corner-footer {
    position: absolute;
    left: 10px;
    bottom: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 20px);
}
#PendingBookingsModal .owner-modal-booking-card__wa-wrap--chat-right,
.owner-booking-inline-list .owner-modal-booking-card__wa-wrap--chat-right,
.manager-booking-inline-list .owner-modal-booking-card__wa-wrap--chat-right {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 3;
}
#PendingBookingsModal .owner-modal-booking-card__info-wrap, .owner-booking-inline-list .owner-modal-booking-card__info-wrap, .manager-booking-inline-list .owner-modal-booking-card__info-wrap{
    position: relative;
    flex-shrink: 0;
}
#PendingBookingsModal .owner-modal-booking-card__info-wrap--bottom, .owner-booking-inline-list .owner-modal-booking-card__info-wrap--bottom, .manager-booking-inline-list .owner-modal-booking-card__info-wrap--bottom{
    position: relative;
    right: auto;
    bottom: auto;
}
#PendingBookingsModal .owner-modal-booking-card__wa-wrap--bottom,
.owner-booking-inline-list .owner-modal-booking-card__wa-wrap--bottom,
.manager-booking-inline-list .owner-modal-booking-card__wa-wrap--bottom {
    position: relative;
    left: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: none;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn i,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn i,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn i {
    font-size: 13px;
    line-height: 1;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn:hover,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn:hover,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn--chat,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn--chat,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn--chat {
    background: #25d366;
    border-color: #20bd5a;
    color: #fff;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn--booking,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn--booking,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn--booking {
    background: #15803d;
    border-color: #166534;
    color: #fff;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn--confirm,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn--confirm,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn--confirm {
    background: #fff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
#PendingBookingsModal .owner-modal-booking-card__wa-btn--confirm:hover,
.owner-booking-inline-list .owner-modal-booking-card__wa-btn--confirm:hover,
.manager-booking-inline-list .owner-modal-booking-card__wa-btn--confirm:hover {
    background: #eff6ff;
    border-color: #60a5fa;
}
#PendingBookingsModal .owner-modal-booking-card__info-btn, .owner-booking-inline-list .owner-modal-booking-card__info-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#PendingBookingsModal .owner-modal-booking-card__info-btn:hover,
#PendingBookingsModal .owner-modal-booking-card__info-wrap:focus-within .owner-modal-booking-card__info-btn,
.owner-booking-inline-list .owner-modal-booking-card__info-btn:hover,
.owner-booking-inline-list .owner-modal-booking-card__info-wrap:focus-within .owner-modal-booking-card__info-btn {
    color: #ea580c;
    border-color: #fdba74;
    background: #fff7ed;
}
#PendingBookingsModal .owner-modal-booking-card__info-tip, .owner-booking-inline-list .owner-modal-booking-card__info-tip{
    display: none;
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 220px;
    max-width: min(280px, 72vw);
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
    text-align: left;
    white-space: normal;
}
#PendingBookingsModal .owner-modal-booking-card__info-wrap:hover .owner-modal-booking-card__info-tip,
#PendingBookingsModal .owner-modal-booking-card__info-wrap:focus-within .owner-modal-booking-card__info-tip,
.owner-booking-inline-list .owner-modal-booking-card__info-wrap:hover .owner-modal-booking-card__info-tip,
.owner-booking-inline-list .owner-modal-booking-card__info-wrap:focus-within .owner-modal-booking-card__info-tip {
    display: block;
}
#PendingBookingsModal .owner-modal-booking-card__info-wrap--bottom .owner-modal-booking-card__info-tip, .owner-booking-inline-list .owner-modal-booking-card__info-wrap--bottom .owner-modal-booking-card__info-tip, .manager-booking-inline-list .owner-modal-booking-card__info-wrap--bottom .owner-modal-booking-card__info-tip{
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: auto;
}
#PendingBookingsModal .owner-modal-booking-card__info-wrap:not(.owner-modal-booking-card__info-wrap--bottom) .owner-modal-booking-card__info-tip, .owner-booking-inline-list .owner-modal-booking-card__info-wrap:not(.owner-modal-booking-card__info-wrap--bottom) .owner-modal-booking-card__info-tip{
    top: calc(100% + 8px);
}
#PendingBookingsModal .owner-modal-booking-card__info-tip .owner-modal-booking-card__meta-sep, .owner-booking-inline-list .owner-modal-booking-card__info-tip .owner-modal-booking-card__meta-sep{
    margin: 0 4px;
    color: #cbd5e1;
}
#PendingBookingsModal .owner-modal-booking-card__info-tip .owner-modal-booking-card__expire, .owner-booking-inline-list .owner-modal-booking-card__info-tip .owner-modal-booking-card__expire{
    color: #e8192c !important;
    font-weight: 700;
}
#PendingBookingsModal .owner-modal-booking-card__header-name, .owner-booking-inline-list .owner-modal-booking-card__header-name, .manager-booking-inline-list .owner-modal-booking-card__header-name{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111;
    line-height: 1.35;
}
#PendingBookingsModal .owner-modal-booking-card__header-identity,
.owner-booking-inline-list .owner-modal-booking-card__header-identity,
.manager-booking-inline-list .owner-modal-booking-card__header-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
#PendingBookingsModal .owner-modal-booking-card__header-name-row,
.owner-booking-inline-list .owner-modal-booking-card__header-name-row,
.manager-booking-inline-list .owner-modal-booking-card__header-name-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
#PendingBookingsModal .owner-modal-booking-card__header-contact,
.owner-booking-inline-list .owner-modal-booking-card__header-contact,
.manager-booking-inline-list .owner-modal-booking-card__header-contact {
    display: block;
    min-width: 0;
}
#PendingBookingsModal .owner-modal-booking-card__header-name i, .owner-booking-inline-list .owner-modal-booking-card__header-name i, .manager-booking-inline-list .owner-modal-booking-card__header-name i{
    color: #e8192c;
    font-size: 20px;
    flex-shrink: 0;
}
#PendingBookingsModal .owner-modal-booking-card__header-name a, .owner-booking-inline-list .owner-modal-booking-card__header-name a, .manager-booking-inline-list .owner-modal-booking-card__header-name a,
#PendingBookingsModal .owner-modal-booking-card__header-name-row a, .owner-booking-inline-list .owner-modal-booking-card__header-name-row a, .manager-booking-inline-list .owner-modal-booking-card__header-name-row a{
    color: #111;
    text-decoration: none;
    font-weight: 800;
}
#PendingBookingsModal .owner-modal-booking-card__header-name a:hover, .owner-booking-inline-list .owner-modal-booking-card__header-name a:hover, .manager-booking-inline-list .owner-modal-booking-card__header-name a:hover,
#PendingBookingsModal .owner-modal-booking-card__header-name-row a:hover, .owner-booking-inline-list .owner-modal-booking-card__header-name-row a:hover, .manager-booking-inline-list .owner-modal-booking-card__header-name-row a:hover{
    color: #e8192c;
}
#PendingBookingsModal .owner-modal-booking-grid, .owner-booking-inline-list .owner-modal-booking-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, 112px);
    gap: 10px;
    align-items: start;
    padding: 10px 12px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
}
#PendingBookingsModal .owner-modal-booking-grid__main, .owner-booking-inline-list .owner-modal-booking-grid__main{
    min-width: 0;
}
#PendingBookingsModal .owner-modal-booking-grid__actions, .owner-booking-inline-list .owner-modal-booking-grid__actions{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
#PendingBookingsModal .owner-modal-booking-grid__btn, .owner-booking-inline-list .owner-modal-booking-grid__btn{
    width: 100%;
    margin: 0;
    padding: 8px 6px;
    font-size: 11px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1.2;
}
#PendingBookingsModal .owner-modal-booking-grid__btn i, .owner-booking-inline-list .owner-modal-booking-grid__btn i{
    font-size: 13px;
    flex-shrink: 0;
}
#PendingBookingsModal .owner-modal-booking-grid__wa-row,
#PendingBookingsModal .owner-modal-booking-grid__pair-row,
.owner-booking-inline-list .owner-modal-booking-grid__wa-row,
.owner-booking-inline-list .owner-modal-booking-grid__pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--pair, .owner-booking-inline-list .owner-modal-booking-grid__btn--pair{
    padding: 7px 4px;
    font-size: 10px;
    gap: 3px;
    flex-direction: column;
    min-height: 48px;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--pair i, .owner-booking-inline-list .owner-modal-booking-grid__btn--pair i{
    font-size: 14px;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--wa-sm, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa-sm{
    flex-direction: column;
    padding: 7px 4px;
    font-size: 10px;
    gap: 2px;
    min-height: 52px;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--wa-sm i, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa-sm i{
    font-size: 16px;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--wa-sm span, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa-sm span{
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--blue, .owner-booking-inline-list .owner-modal-booking-grid__btn--blue{
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border: none;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--blue:hover, .owner-booking-inline-list .owner-modal-booking-grid__btn--blue:hover{
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff !important;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--yellow, .owner-booking-inline-list .owner-modal-booking-grid__btn--yellow{
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
    color: #422006 !important;
    border: none;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--yellow:hover, .owner-booking-inline-list .owner-modal-booking-grid__btn--yellow:hover{
    opacity: 0.92;
    transform: translateY(-1px);
    color: #422006 !important;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--yellow i, .owner-booking-inline-list .owner-modal-booking-grid__btn--yellow i{
    color: #713f12;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--blue,
#PendingBookingsModal .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--red,
.owner-booking-inline-list .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--blue,
.owner-booking-inline-list .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--red {
    color: #fff !important;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--blue i,
#PendingBookingsModal .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--red i,
.owner-booking-inline-list .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--blue i,
.owner-booking-inline-list .owner-modal-booking-grid__btn--pair.owner-modal-booking-grid__btn--red i {
    color: #fff;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--red, .owner-booking-inline-list .owner-modal-booking-grid__btn--red{
    background: #dc2626 !important;
    color: #fff !important;
    border: none;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--red:hover, .owner-booking-inline-list .owner-modal-booking-grid__btn--red:hover{
    background: #b91c1c !important;
    transform: translateY(-1px);
}
#PendingBookingsModal .owner-modal-booking-grid__btn--orange, .owner-booking-inline-list .owner-modal-booking-grid__btn--orange{
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #fff !important;
    border: none;
    opacity: 1;
    cursor: not-allowed;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--orange:disabled, .owner-booking-inline-list .owner-modal-booking-grid__btn--orange:disabled{
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #fff !important;
    opacity: 1;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--orange i, .owner-booking-inline-list .owner-modal-booking-grid__btn--orange i{
    color: #fff;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--green, .owner-booking-inline-list .owner-modal-booking-grid__btn--green{
    background: linear-gradient(135deg, #1db954 0%, #17a045 100%) !important;
}
#PendingBookingsModal .owner-modal-booking-grid__btn--green:hover, .owner-booking-inline-list .owner-modal-booking-grid__btn--green:hover{
    opacity: 0.92;
    transform: translateY(-1px);
}
#PendingBookingsModal .owner-modal-booking-grid__btn--wa, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa{
    width: 100%;
    justify-content: center;
}
#PendingBookingsModal .owner-modal-booking-compact, .owner-booking-inline-list .owner-modal-booking-compact{
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
#PendingBookingsModal .owner-modal-booking-customer, .owner-booking-inline-list .owner-modal-booking-customer{
    display: block;
    padding: 0 0 8px;
}
#PendingBookingsModal .owner-modal-booking-contact,
#PendingBookingsModal .owner-modal-booking-contact-text,
.owner-booking-inline-list .owner-modal-booking-contact,
.owner-booking-inline-list .owner-modal-booking-contact-text,
.manager-booking-inline-list .owner-modal-booking-contact,
.manager-booking-inline-list .owner-modal-booking-contact-text {
    border: none;
    background: transparent;
    padding: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    display: block;
    text-align: left;
}
#PendingBookingsModal .owner-modal-booking-contact-text, .owner-booking-inline-list .owner-modal-booking-contact-text{
    cursor: default;
}
#PendingBookingsModal .owner-modal-booking-contact:hover, .owner-booking-inline-list .owner-modal-booking-contact:hover{
    color: #e8192c;
}
#PendingBookingsModal .owner-modal-booking-card__meta, .owner-booking-inline-list .owner-modal-booking-card__meta{
    margin: 8px 0 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}
#PendingBookingsModal .owner-modal-booking-card__meta-sep, .owner-booking-inline-list .owner-modal-booking-card__meta-sep{
    margin: 0 4px;
    color: #ccc;
}
#PendingBookingsModal .owner-modal-booking-card__expire, .owner-booking-inline-list .owner-modal-booking-card__expire{
    color: #e8192c !important;
    font-weight: 700;
}
#PendingBookingsModal .owner-modal-booking-card__status, .owner-booking-inline-list .owner-modal-booking-card__status{
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
#PendingBookingsModal .owner-modal-booking-card__status--warning, .owner-booking-inline-list .owner-modal-booking-card__status--warning{
    color: #a16207;
    background: #fef9c3;
}
#PendingBookingsModal .owner-modal-booking-card__status--success, .owner-booking-inline-list .owner-modal-booking-card__status--success{
    color: #15803d;
    background: #dcfce7;
}
#PendingBookingsModal .owner-modal-booking-card__status--danger, .owner-booking-inline-list .owner-modal-booking-card__status--danger{
    color: #dc2626;
    background: #fee2e2;
}
#PendingBookingsModal .owner-modal-booking-card__status--muted, .owner-booking-inline-list .owner-modal-booking-card__status--muted{
    color: #475569;
    background: #f1f5f9;
}
#PendingBookingsModal .bcs-sep,
#PendingBookingsModal .owner-modal-booking-compact .bcs-sep, .owner-booking-inline-list .owner-modal-booking-compact .bcs-sep{
    color: rgba(0, 0, 0, 0.35);
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-row + .bcs-field-row, .owner-booking-inline-list .owner-modal-booking-compact .bcs-field-row + .bcs-field-row{
    border-top-color: #ddd;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-when,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-when,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-when {
    font-weight: 800;
    font-size: 12px;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-when.text-danger,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-danger,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-danger,
#PendingBookingsModal .owner-modal-slots-table__time.text-danger,
.owner-booking-inline-list .owner-modal-slots-table__time.text-danger,
.manager-booking-inline-list .owner-modal-slots-table__time.text-danger {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-when.text-primary,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-primary,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-primary,
#PendingBookingsModal .owner-modal-slots-table__time.text-primary,
.owner-booking-inline-list .owner-modal-slots-table__time.text-primary,
.manager-booking-inline-list .owner-modal-slots-table__time.text-primary {
    color: #1d4ed8 !important;
    background: #dbeafe !important;
}
#PendingBookingsModal .owner-modal-booking-compact .bcs-field-when.text-success,
.owner-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-success,
.manager-booking-inline-list .owner-modal-booking-compact .bcs-field-when.text-success,
#PendingBookingsModal .owner-modal-slots-table__time.text-success,
.owner-booking-inline-list .owner-modal-slots-table__time.text-success,
.manager-booking-inline-list .owner-modal-slots-table__time.text-success {
    color: #15803d !important;
    background: #dcfce7 !important;
}
#PendingBookingsModal .booking-confirm-slots .game-pill-checkout,
.owner-booking-inline-list .booking-confirm-slots .game-pill-checkout {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    border: 1.5px solid #e8192c !important;
    background: #fef2f3 !important;
    flex: 0 0 auto;
    box-shadow: none;
    transform: none;
}
#PendingBookingsModal .booking-confirm-slots .game-pill-checkout:hover,
.owner-booking-inline-list .booking-confirm-slots .game-pill-checkout:hover {
    background: #fee2e2 !important;
    transform: none;
}
#PendingBookingsModal .booking-confirm-slots .game-pill-checkout .game-pill-emoji,
.owner-booking-inline-list .booking-confirm-slots .game-pill-checkout .game-pill-emoji {
    font-size: 11px;
    line-height: 1;
}
#PendingBookingsModal .bcs-unavailable-label {
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
}
#PendingBookingsModal .owner-modal-slot-game-btn,
.owner-booking-inline-list .owner-modal-slot-game-btn {
    cursor: pointer;
}
#PendingBookingsModal .owner-modal-booking-compact .booking-confirm-totals .bct-grand span:last-child, .owner-booking-inline-list .owner-modal-booking-compact .booking-confirm-totals .bct-grand span:last-child{
    font-size: 20px;
    font-weight: 800;
}
#PendingBookingsModal .owner-modal-booking-hint, .owner-booking-inline-list .owner-modal-booking-hint{
    display: none !important;
}
#PendingBookingsModal .owner-modal-confirmed-hint,
.owner-booking-inline-list .owner-modal-confirmed-hint {
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(23, 160, 69, 0.18);
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
}
#PendingBookingsModal .owner-modal-confirmed-hint__text,
.owner-booking-inline-list .owner-modal-confirmed-hint__text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #166534;
}
#PendingBookingsModal .owner-modal-confirmed-hint__text i,
.owner-booking-inline-list .owner-modal-confirmed-hint__text i {
    font-size: 14px;
    color: #17a045;
    flex-shrink: 0;
    margin-top: 1px;
}
#PendingBookingsModal .bct-discount span:first-child {
    color: #64748b;
}
#PendingBookingsModal .bct-discount span:last-child {
    color: #dc2626;
}
.modal.modal-stacked-above-pending {
    z-index: 1065 !important;
}
body.modal-open .modal-backdrop.modal-stacked-above-pending-backdrop {
    z-index: 1060 !important;
}
#PendingBookingsModal [id^="booking-payments-"], .owner-booking-inline-list [id^="booking-payments-"],
.owner-modal-booking-wrap [id^="booking-payments-"] {
    margin-top: 10px;
}
.owner-booking-payments {
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
    padding: 10px 12px;
}
.owner-booking-payments__head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #e8192c;
    margin-bottom: 8px;
}
.owner-booking-payments__list[role="button"] {
    cursor: pointer;
}
.owner-booking-payments__list[role="button"]:hover .owner-booking-payments__line-text {
    color: #444;
}
.owner-booking-payments__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.owner-booking-payments__line:last-of-type {
    margin-bottom: 0;
}
.owner-booking-payments__line-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
}
.owner-booking-payments__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid #dc2626;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: #dc2626;
    background: #fef2f2;
    cursor: pointer;
}
.owner-booking-payments__delete:hover:not(:disabled) {
    background: #fee2e2;
}
.owner-booking-payments__delete:disabled {
    opacity: 0.65;
    cursor: wait;
}
.owner-booking-payments__delete .spinner-border-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
    color: #dc2626;
}
.owner-booking-total-row__value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.owner-booking-total-row__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.owner-booking-total-row__edit:hover {
    color: #e8192c;
    background: rgba(232, 25, 44, 0.08);
}
.owner-booking-total-row__edit-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.owner-booking-total-row__edit-form.d-none {
    display: none !important;
}
.owner-booking-total-row__input-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    min-height: 36px;
}
.owner-booking-total-row__prefix {
    padding: 0 8px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    background: #f3f4f6;
    height: 36px;
    line-height: 36px;
    border-right: 1px solid #e5e7eb;
}
.owner-booking-total-row__input {
    width: 88px;
    height: 36px;
    border: none;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
}
.owner-booking-total-row__input::-webkit-outer-spin-button,
.owner-booking-total-row__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.owner-booking-total-row__input:focus {
    background: #fffef8;
}
.owner-booking-total-row__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, #1db954 0%, #17a045 100%);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(29, 185, 84, 0.35);
}
.owner-booking-total-row__save:hover:not(:disabled) {
    opacity: 0.92;
}
.owner-booking-total-row__save:disabled {
    opacity: 0.65;
    cursor: wait;
}
.owner-booking-total-row__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #888;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.owner-booking-total-row__cancel:hover {
    color: #e8192c;
    background: rgba(232, 25, 44, 0.08);
}
.owner-booking-total-row__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    color: #b91c1c;
    text-align: left;
}
.owner-booking-total-row__error i {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.2;
}
.owner-booking-total-row__error.d-none {
    display: none !important;
}
.owner-booking-payments__line-text .cf-pay-line-sep {
    color: #bbb;
    margin: 0 4px;
}
.owner-booking-payments__line-text .cf-pay-line-amount,
#confirm-fields .cf-pay-line-text .cf-pay-line-amount {
    font-weight: 700;
}
.owner-booking-payments__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    color: #17a045;
}
.owner-booking-payments__total-label,
.owner-booking-payments__total-amount {
    font-weight: 700;
    color: #17a045;
}
.owner-booking-payments__empty {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}
.owner-booking-payments__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #fecaca;
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
}
.owner-booking-payments__balance-label,
.owner-booking-payments__balance-amount {
    font-weight: 700;
    color: #dc2626;
}
#PendingBookingsModal .booking-confirm-slots .bcs-field-remove, .owner-booking-inline-list .booking-confirm-slots .bcs-field-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1.5px solid #dc2626;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    flex-shrink: 0;
}
#PendingBookingsModal .booking-confirm-slots .bcs-field-remove:hover, .owner-booking-inline-list .booking-confirm-slots .bcs-field-remove:hover {
    background: #fee2e2;
}
@media (max-width: 640px) {
    #PendingBookingsModal .owner-modal-booking-grid, .owner-booking-inline-list .owner-modal-booking-grid{
        grid-template-columns: minmax(0, 1fr) minmax(96px, 112px);
        gap: 8px;
        padding: 8px 10px 10px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__actions, .owner-booking-inline-list .owner-modal-booking-grid__actions{
        gap: 5px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__btn, .owner-booking-inline-list .owner-modal-booking-grid__btn{
        padding: 7px 4px;
        font-size: 10px;
        gap: 3px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__btn i, .owner-booking-inline-list .owner-modal-booking-grid__btn i{
        font-size: 12px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__wa-row,
    #PendingBookingsModal .owner-modal-booking-grid__pair-row,
    .owner-booking-inline-list .owner-modal-booking-grid__wa-row,
    .owner-booking-inline-list .owner-modal-booking-grid__pair-row {
        gap: 4px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__btn--wa-sm, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa-sm{
        padding: 7px 2px;
    }
    #PendingBookingsModal .owner-modal-booking-grid__btn--wa-sm span, .owner-booking-inline-list .owner-modal-booking-grid__btn--wa-sm span{
        font-size: 9px;
    }
    #PendingBookingsModal .owner-modal-booking-card__header, .owner-booking-inline-list .owner-modal-booking-card__header{
        flex-wrap: wrap;
    }
    #PendingBookingsModal .owner-modal-confirmed-hint,
    .owner-booking-inline-list .owner-modal-confirmed-hint {
        padding: 8px 10px 10px;
    }
    #PendingBookingsModal .owner-modal-confirmed-hint__text,
    .owner-booking-inline-list .owner-modal-confirmed-hint__text {
        font-size: 10px;
    }
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line + .booking-slot-line {
    border-top-color: #e5e7eb;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-date {
    color: #64748b !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-field {
    color: #111827 !important;
    font-weight: 700;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-time.text-danger,
.timetable-table-area .booking-slot-line .bsl-time.text-danger {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-time.text-primary,
.timetable-table-area .booking-slot-line .bsl-time.text-primary {
    color: #1d4ed8 !important;
    background: #dbeafe !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-time.text-success,
.timetable-table-area .booking-slot-line .bsl-time.text-success {
    color: #15803d !important;
    background: #dcfce7 !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line .bsl-price,
#PendingBookingsModal .owner-bookings-modal-body .timetable-table-area table tbody td .tbody-content .booking-slot-line .bsl-price {
    color: #334155 !important;
}
#PendingBookingsModal .owner-bookings-modal-body .bsl-sep {
    color: #cbd5e1 !important;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-lines {
    text-align: left;
}
#PendingBookingsModal .owner-bookings-modal-body .booking-slot-line {
    align-items: flex-start;
    text-align: left;
}
#PendingBookingsModal .owner-bookings-modal-body .owner-booking-pagination {
    border-top: 1px solid #eef0f3;
    background: #fff;
    border-radius: 10px;
    margin-top: 8px;
}
.login-modal-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.login-modal-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}
.login-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.login-modal-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}
.login-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.login-modal-close:hover {
    background: rgba(255,255,255,0.28);
}
.login-modal-body {
    padding: 28px 28px 8px;
}
.login-step-label {
    color: #555;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.login-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input-wrap:focus-within {
    border-color: #e8192c;
    box-shadow: 0 0 0 4px rgba(232,25,44,0.10);
    background: #fff;
}
#confirm-fields .cf-row2 .login-input-wrap,
#confirm-fields .cf-amount-highlight {
    border-color: #e8192c;
    background: #fff;
}
#confirm-fields .cf-row2 .login-input-prefix,
#confirm-fields .cf-amount-highlight .login-input-prefix {
    color: #e8192c;
    font-weight: 700;
}
.login-input-prefix {
    padding: 0 14px;
    color: #aaa;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.login-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 14px 14px 0;
    font-size: 16px;
    color: #222;
    outline: none;
}
.login-input::placeholder {
    color: #bbb;
}
.login-modal-footer {
    padding: 16px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
}
.login-btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #e8192c 0%, #c0101f 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.3px;
}
.login-btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.login-btn-secondary {
    width: 100%;
    padding: 13px;
    background: transparent;
    color: #888;
    border: 1.5px solid #ddd;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.login-btn-secondary:hover {
    border-color: #aaa;
    color: #555;
}
.login-staff-link {
    text-align: center;
    margin-top: 8px;
}
.login-staff-link a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #9aa0a6;
    text-decoration: none;
    transition: color 0.2s;
}
.login-staff-link a:hover {
    color: #e8192c;
    text-decoration: none;
}
.login-link-small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #e8192c;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}
.login-link-small:hover {
    color: #c0101f;
    text-decoration: underline;
}
.login-link-small i {
    font-size: 15px;
    line-height: 1;
}
.login-link-muted {
    color: #9aa0a6 !important;
    font-weight: 500;
}
.login-link-muted:hover {
    color: #555 !important;
    text-decoration: none;
}
/* Inline form/error messages inside login & booking modals */
.login-modal-body .text-danger {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}
.login-modal-body .text-danger:not(.d-none) {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.login-modal-body .text-danger:not(.d-none)::before {
    content: "\eca1";
    font-family: "remixicon";
    font-weight: normal;
    font-size: 14px;
    line-height: 1.3;
    flex-shrink: 0;
}
.login-modal-body .text-success {
    font-size: 12.5px;
    font-weight: 600;
}
/* Emphasised value (phone number) inside step labels */
.login-step-label strong {
    color: #1a1a1a;
    font-weight: 700;
}
/* Form fields inside login-style modals (expense, on-spot) */
.form-modal-fields .cf-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-modal-fields .cf-select-wrap:focus-within {
    border-color: #e8192c;
    box-shadow: 0 0 0 4px rgba(232, 25, 44, 0.1);
    background: #fff;
}
.form-modal-fields .cf-select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 18px;
    pointer-events: none;
    z-index: 1;
}
.form-modal-fields .cf-select-native {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 13px 40px 13px 44px;
    font-size: 15px;
    font-family: inherit;
    color: #222;
    outline: none;
    cursor: pointer;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.form-modal-fields .cf-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.form-modal-fields .cf-field {
    min-width: 0;
}
.form-modal-fields .cf-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #e8192c;
    margin-bottom: 6px;
    display: block;
}
.form-modal-fields .login-input-wrap input[type="date"].login-input {
    padding-left: 0;
    min-height: 48px;
}
.form-modal-fields .cf-field-error {
    display: block;
    font-size: 12px;
    margin-top: 6px;
}
@media (max-width: 420px) {
    .form-modal-fields .cf-row2 {
        grid-template-columns: 1fr;
    }
}
/* Resend status / countdown helper text */
#otp-resend-status,
#book-otp-resend-status,
#profile-pin-otp-resend {
    font-size: 12px;
    font-weight: 600;
}
.staff-modal-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.staff-modal-icon {
    background: rgba(255,255,255,0.12);
}
.staff-modal-close {
    background: rgba(255,255,255,0.1);
}
.staff-modal-close:hover {
    background: rgba(255,255,255,0.2);
}
.staff-btn {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.login-select-wrap {
    display: flex;
    align-items: center;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-select-wrap:focus-within {
    border-color: #e8192c;
    box-shadow: 0 0 0 4px rgba(232,25,44,0.10);
    background: #fff;
}
.login-select {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 14px 14px 0;
    font-size: 15px;
    color: #222;
    outline: none;
    appearance: none;
    cursor: pointer;
}
.login-select option[value="0"] {
    color: #bbb;
}
/* truncate long option text in the select box itself */
.login-select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

/* ===== Booking Success Modal ===== */
.booking-success-hero {
    background: linear-gradient(135deg, #1db954 0%, #17a045 100%);
    padding: 32px 28px 24px;
    text-align: center;
    position: relative;
}
.booking-success-close {
    position: absolute;
    top: 16px;
    right: 16px;
}
.booking-success-icon {
    font-size: 52px;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px;
}
.booking-success-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.booking-success-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}
.booking-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(2px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.booking-loader-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    max-width: 320px;
}
.booking-loader-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid #f0d5d8;
    border-top-color: #e8192c;
    border-radius: 50%;
    animation: booking-loader-spin 0.8s linear infinite;
    margin-bottom: 8px;
}
@keyframes booking-loader-spin {
    to { transform: rotate(360deg); }
}
.booking-loader-text {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.booking-loader-sub {
    margin: 0;
    font-size: 13px;
    color: #888;
}
.booking-summary-box {
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #fff;
}
.booking-summary-top {
    background: #f7f7f8;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}
.booking-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}
.bs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.bs-meta-item i {
    font-size: 16px;
    color: #e8192c;
}
.booking-confirm-customer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.booking-confirm-customer i {
  color: #e8192c;
  font-size: 16px;
}
.booking-confirm-compact {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 14px;
  overflow: hidden;
}
.booking-confirm-compact .booking-confirm-customer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin: 0;
  padding: 10px 14px;
  background: #f7f7f8;
  border-bottom: 1px solid #eee;
}
.booking-confirm-compact .booking-confirm-customer i {
  color: #e8192c;
  font-size: 16px;
}
.booking-confirm-compact .booking-confirm-slots {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  margin-bottom: 0;
  max-height: min(42vh, 220px);
}
.booking-confirm-compact .bcs-field-row {
  padding: 4px 0;
}
.booking-confirm-compact .bcs-field-row + .bcs-field-row {
  padding-top: 5px;
}
.booking-confirm-compact .bcs-field-row + .bcs-field-row {
  border-top-color: #ddd;
}
.booking-confirm-compact .bcs-field-name {
  color: #222;
  font-size: 12px;
}
.booking-confirm-compact .bcs-field-date {
  color: #666;
  font-size: 12px;
  font-weight: 500;
}
.booking-confirm-compact .bcs-field-when {
  font-size: 11px;
  font-weight: 600;
}
.booking-confirm-compact .bcs-field-when.text-danger,
#DeleteBookingModal .cf-modal-slots .bcs-field-when.text-danger {
  color: #b91c1c !important;
  background: #fee2e2 !important;
}
.booking-confirm-compact .bcs-field-when.text-primary,
#DeleteBookingModal .cf-modal-slots .bcs-field-when.text-primary {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
}
.booking-confirm-compact .bcs-field-when.text-success,
#DeleteBookingModal .cf-modal-slots .bcs-field-when.text-success {
  color: #15803d !important;
  background: #dcfce7 !important;
}
.booking-confirm-compact .bcs-field-price {
  color: #333;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#DeleteBookingModal .cf-modal-slots {
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 4px 10px;
  margin-bottom: 12px;
  max-height: min(40vh, 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#DeleteBookingModal .cf-modal-slots .bcs-field-row + .bcs-field-row {
  border-top-color: #ddd;
}
#DeleteBookingModal .cf-modal-slots .bcs-field-date {
  color: #666;
}
#DeleteBookingModal .cf-modal-slots .bcs-field-name {
  color: #222;
}
#DeleteBookingModal .cf-modal-slots .bcs-field-when:not(.text-danger):not(.text-primary):not(.text-success) {
  color: #444;
}
#DeleteBookingModal .cf-modal-slots .bcs-field-price {
  color: #333;
}
.booking-confirm-compact .bcs-field-games .game-pill-checkout {
  background: #f5f5f5;
  border-color: #ddd;
}
.booking-confirm-compact .bcs-field-games .game-pill-checkout.game-pill-active {
  border-color: #e8192c !important;
  background: #fef2f3 !important;
  box-shadow: none;
}
.booking-confirm-compact .booking-confirm-totals {
  background: #fafafa;
  border: none;
  border-top: 1px solid #eee;
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 0;
}
.booking-confirm-compact .bct-row {
  color: #666;
  font-size: 13px;
  font-weight: 600;
}
.booking-confirm-compact .bct-discount {
  color: #1db954;
}
.booking-confirm-compact .bct-surcharge {
  color: #2563eb;
}
.booking-confirm-compact .bct-grand {
  color: #111;
  border-top-color: #eee;
}
.booking-confirm-compact .bct-grand span:last-child {
  color: #111;
}
#BookingConfirmModal .booking-confirm-slots .game-pill-checkout,
#successModal .booking-confirm-slots .game-pill-checkout {
  pointer-events: none;
  cursor: default;
}
#PendingBookingsModal .booking-confirm-slots .game-pill-checkout:not(.owner-modal-slot-game-btn),
.owner-booking-inline-list .booking-confirm-slots .game-pill-checkout:not(.owner-modal-slot-game-btn) {
  pointer-events: none;
  cursor: default;
}
#successModal .booking-confirm-compact {
  margin-bottom: 18px;
}
.booking-summary-slots {
    padding: 6px 16px;
}
.bs-slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
}
.bs-slot-row:last-child {
    border-bottom: none;
}
.bs-slot-field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #222;
    font-weight: 600;
}
.bs-slot-field i {
    font-size: 15px;
    color: #1db954;
}
.bs-slot-time {
    color: #555;
    font-size: 13px;
    white-space: nowrap;
}
.booking-summary-totals {
    padding: 12px 16px;
    background: #fafafa;
    border-top: 1px solid #eee;
}
.bs-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    padding: 2px 0;
}
.bs-total-discount {
    color: #1db954;
    font-weight: 600;
}
.bs-total-grand {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.booking-bank-table {
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
}
.booking-bank-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    background: #f5f5f5;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.booking-bank-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    padding: 12px 14px;
    font-size: 14px;
    color: #222;
    border-top: 1px solid #f0f0f0;
    align-items: center;
}
.booking-bank-account {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    word-break: break-all;
}
.booking-whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s;
}
.booking-whatsapp-btn:hover {
    opacity: 0.88;
    color: #fff;
}
.booking-user-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0faf4;
    border: 1.5px solid #c3e6cb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #2d6a4f;
}
.booking-user-banner i {
    font-size: 18px;
    flex-shrink: 0;
}
.booking-user-banner span {
    flex: 1;
}
.booking-user-banner a {
    font-size: 12px;
    color: #e8192c;
    text-decoration: none;
    white-space: nowrap;
}
.booking-user-banner a:hover {
    text-decoration: underline;
}
/* ===== Location Dropdown ===== */
.loc-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8192c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.loc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    border: 1.5px solid #333;
    border-radius: 12px;
    padding: 14px 18px;
    min-height: 56px;
    cursor: pointer;
    transition: border-color 0.2s;
    user-select: none;
}
.loc-trigger:hover { border-color: #e8192c; }
.loc-trigger-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}
.loc-trigger-inner span,
.loc-trigger-inner span * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-trigger-icon {
    color: #e8192c;
    font-size: 20px;
    flex-shrink: 0;
}
.loc-trigger-city {
    font-weight: 400;
    color: #aaa;
    font-size: 14px;
    margin-left: 4px;
}
.loc-trigger-chevron {
    color: #888;
    font-size: 20px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.loc-chevron-open { transform: rotate(180deg); }
.loc-dropdown {
    background: #111;
    border: 1.5px solid #2a2a2a;
    border-radius: 12px;
    margin-top: 6px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.loc-city-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #555;
    text-transform: uppercase;
    padding: 10px 18px 6px;
    background: #0d0d0d;
    border-bottom: 1px solid #1e1e1e;
}
.loc-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.15s;
}
.loc-option:last-child { border-bottom: none; }
.loc-option:hover { background: #1c1c1c; }
.loc-option-active { background: rgba(232,25,44,0.08); }
.loc-option-active:hover { background: rgba(232,25,44,0.13); }
.loc-option-main { display: flex; align-items: center; gap: 12px; }
.loc-option-name { font-size: 15px; font-weight: 600; color: #f0f0f0; }
.loc-option-emojis { font-size: 16px; letter-spacing: 2px; }
.loc-option-check { color: #e8192c; font-size: 18px; flex-shrink: 0; }
.loc-trigger-disabled { opacity: 0.5; pointer-events: none; }
.loc-trigger-disabled:hover { border-color: #333; }
.home-check-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #e8192c 0%, #c0101f 100%);
    color: #fff !important;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.3px;
}
.home-check-btn:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }

.customer-search-list {
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    max-height: 260px;
    overflow-y: auto;
}
.customer-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.customer-search-item:last-child { border-bottom: none; }
.customer-search-item:hover { background: #fef2f3; }
.customer-search-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8192c, #c0101f);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.customer-search-info { flex: 1; min-width: 0; }
.customer-search-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.customer-search-contact {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
}
.customer-search-arrow {
    font-size: 18px;
    color: #ccc;
    flex-shrink: 0;
}
.customer-search-item:hover .customer-search-arrow { color: #e8192c; }
.customer-search-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 13px;
    padding: 10px 4px;
    margin-bottom: 8px;
}
.booking-incompatible-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff8e1;
    border: 1.5px solid #ffe082;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #7a5800;
    margin-bottom: 12px;
}

/* ===== Banner — Centered Layout ===== */
.banner-content-center {
    text-align: center;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.banner-content-center span {
    color: var(--redColor);
    display: block;
    margin-bottom: 10px;
    letter-spacing: 3px;
    font-size: 13px;
}
.banner-content-center h1 {
    font-size: 90px;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 12px;
}
.banner-content-center .banner-tagline {
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    margin-bottom: 10px;
    max-width: 600px;
}
.banner-booking-card-center {
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    background: rgba(255,255,255,0.12);
}
.banner-booking-card-center .banner-booking-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}
.banner-booking-card-center .banner-booking-fields {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
    .banner-content-center h1 {
        font-size: 52px;
    }
    .banner-content-center .banner-tagline {
        font-size: 15px;
    }
    .banner-booking-card-center .banner-booking-fields {
        grid-template-columns: 1fr;
    }
}

/* ===== Banner — Tighter Spacing ===== */
.banner-content-center h1 {
    font-size: 90px;
    margin-bottom: 4px;
}
.banner-content-center .banner-tagline {
    font-size: 17px;
    margin-bottom: 4px;
}
.banner-content-center .banner-sports {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.85);
}
.banner-content-center .banner-stats {
    font-size: 13px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.65);
}
.banner-content-center {
    padding-bottom: 50px;
    padding-top: 20px;
}

/* ===== Banner — Reduce top space ===== */
.banner-bg {
    padding-top: 60px !important;
}
.banner-content-center {
    padding-top: 0 !important;
}

/* ===== Booking Card — Refined ===== */
.banner-booking-card-center {
    text-align: left !important;
}
.banner-booking-card-center .banner-booking-label {
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}
.banner-booking-card-center .banner-booking-field label {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}
.banner-booking-card-center .form-control {
    text-align: left;
    font-size: 14px;
    padding: 10px 14px;
    height: auto;
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
}
.banner-booking-card-center .form-control option {
    color: #333 !important;
    background: #fff !important;
}
.banner-booking-card-center .form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.banner-booking-card-center .default-btn {
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px !important;
    letter-spacing: 0.5px;
}

/* ===== Booking Step1 — Location Selector ===== */
.booking-location-wrapper {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.booking-location-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--redColor);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.booking-location-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.booking-location-row .form-control {
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    height: auto !important;
    flex: 1;
}
.booking-location-row .form-control option {
    background: #1a1a1a !important;
    color: #fff !important;
}
.booking-location-row .form-control:focus {
    border-color: var(--redColor) !important;
    box-shadow: 0 0 0 3px rgba(232,25,44,0.15) !important;
}
.booking-help-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    border-radius: 8px;
    padding: 0 20px;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.booking-help-btn:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
@media (max-width: 576px) {
    .booking-location-row {
        flex-direction: column;
    }
    .booking-help-btn {
        padding: 10px;
    }
}

/* ── Game pill selector ───────────────────────────────────────── */
.game-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.game-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s, transform .1s;
  min-width: 80px;
  flex: 1;
}
.game-pill:hover {
  border-color: #dc2626;
  background: #fff5f5;
  transform: translateY(-1px);
}
.game-pill-active {
  border-color: #dc2626 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
.game-pill-emoji {
  font-size: 22px;
  line-height: 1;
}
.game-pill-name {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  text-align: center;
}
.game-pill-court {
  font-size: 10px;
  color: #6b7280;
  text-align: center;
}
.game-pill-empty {
  font-size: 12px;
  color: #dc2626;
  padding: 6px 0;
}
.game-pill.game-pill-user {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  cursor: default;
  text-align: left;
  padding: 10px 14px;
  flex: 1;
  min-width: 0;
}
.game-pill.game-pill-user:hover {
  transform: none;
  border-color: #e5e7eb;
  background: #fff;
}
.game-pill-user-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e63946, #c1121f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.game-pill-user-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-pill.game-pill-user .game-pill-name {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  width: 100%;
}
.game-pill.game-pill-user .game-pill-court {
  font-size: 12px;
  text-align: left;
  width: 100%;
  margin-top: 0;
}

/* Booking checkout panel (inline, below slots table) — dark theme */
.booking-checkout-panel {
  background: linear-gradient(180deg, #1e1e1e 0%, #111 100%);
  border: 1px solid #2e2e2e;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  margin: 20px 0 12px;
  overflow: hidden;
  scroll-margin-top: 80px;
  position: relative;
  z-index: 1;
}
.booking-checkout-panel.booking-checkout-highlight {
  box-shadow: 0 0 0 2px rgba(232, 25, 44, 0.45), 0 8px 32px rgba(0, 0, 0, 0.45);
}
.booking-charges-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px 12px;
}
.booking-charges-header {
  text-align: center;
  margin-bottom: 6px;
}
.booking-charges-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}
.booking-charges-slots {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 2px 6px;
  margin-bottom: 6px;
  max-height: min(32vh, 180px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bcs-group {
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.bcs-group:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.bcs-field-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 4px 0;
  text-align: left;
}
.bcs-field-row + .bcs-field-row {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0;
  padding-top: 5px;
}
.bcs-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.bcs-meta-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
#BookingConfirmModal .bcs-sep,
#successModal .bcs-sep,
#DeleteBookingModal .bcs-sep,
#delete-modal-summary .bcs-sep,
#PendingBookingsModal .bcs-sep {
  color: rgba(0, 0, 0, 0.35);
}
.bcs-field-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.bcs-field-name {
  flex: 0 0 auto;
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.bcs-field-when {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.bcs-field-when.text-danger,
.bcs-field-when.text-primary,
.bcs-field-when.text-success,
.bsl-time.text-danger,
.bsl-time.text-primary,
.bsl-time.text-success,
.owner-modal-slots-table__time.text-danger,
.owner-modal-slots-table__time.text-primary,
.owner-modal-slots-table__time.text-success {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  line-height: 1.3;
}
.bcs-field-when.text-danger,
.bsl-time.text-danger,
.owner-modal-slots-table__time.text-danger {
  color: #b91c1c !important;
  background: #fee2e2 !important;
}
.bcs-field-when.text-primary,
.bsl-time.text-primary,
.owner-modal-slots-table__time.text-primary {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
}
.bcs-field-when.text-success,
.bsl-time.text-success,
.owner-modal-slots-table__time.text-success {
  color: #15803d !important;
  background: #dcfce7 !important;
}
.bcs-field-price {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.bcs-field-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.bcs-field-remove:hover {
  background: #f87171;
  color: #fff;
}
.bcs-field-games {
  flex: 0 0 auto;
  gap: 4px;
}
.bcs-field-games .game-pill-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  border: 1.5px solid #3a3a3a;
  background: #1a1a1a;
  flex: 0 0 auto;
}
.bcs-field-games .game-pill-checkout .game-pill-emoji {
  font-size: 18px;
  line-height: 1;
}
.bcs-field-games .game-pill-checkout:hover {
  border-color: #555 !important;
  background: #252525 !important;
  transform: none;
}
.bcs-field-games .game-pill-checkout.game-pill-active {
  border-color: #e8192c !important;
  background: #2a1518 !important;
  box-shadow: 0 0 0 1px rgba(232, 25, 44, 0.35);
}
.bcs-no-game {
  font-size: 11px;
  color: #f87171;
}
.bcs-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.bcs-date,
.bcs-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bcs-date i,
.bcs-time i {
  font-size: 15px;
  opacity: 0.85;
}
.bcs-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bcs-field-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.booking-charges-totals {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.bct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  padding: 1px 0;
  line-height: 1.2;
}
.bct-discount {
  color: #f87171;
  font-weight: 700;
}
.bct-grand {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #2e2e2e;
}
.bct-grand span:last-child {
  font-size: 18px;
}
.booking-charges-hint {
  margin: 0 0 8px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}
.booking-checkout-panel #checkout-game-error {
  color: #fbbf24 !important;
}
.booking-checkout-customer {
  margin-bottom: 10px;
}
.booking-checkout-customer-box {
  background: #121212;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
}
.booking-checkout-summary-box {
  margin-top: 0;
  margin-bottom: 10px;
}
.booking-checkout-summary-box .booking-checkout-customer {
  margin-bottom: 8px;
}
.booking-checkout-summary-box .booking-checkout-summary-slots {
  background: #0a0a0a;
  border: 1px solid #252525;
  border-radius: 8px;
  padding: 2px 8px;
  margin-bottom: 0;
}
.booking-checkout-summary-box .booking-checkout-summary-totals {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 2px 0;
  margin: 8px 0 0;
  border-top: 1px solid #2e2e2e;
}
.booking-checkout-summary-box .bct-grand {
  border-top-color: #252525;
}
.booking-checkout-customer-label {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #e5e7eb;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.booking-checkout-customer-label i {
  color: #e8192c;
  font-size: 15px;
}
.booking-checkout-customer-hint {
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
  margin: 0 0 10px;
}
#checkout-admin-customer .login-input-wrap.booking-checkout-input {
  border: 1px solid #333;
  border-radius: 8px;
  background: #0a0a0a;
  margin-bottom: 8px;
}
#checkout-admin-customer .login-input-wrap.booking-checkout-input:focus-within {
  border-color: #8b1a28;
  box-shadow: 0 0 0 2px rgba(232, 25, 44, 0.12);
  background: #0f0f0f;
}
#checkout-admin-customer .login-input-prefix {
  background: #161616;
  border-right: 1px solid #2a2a2a;
  padding: 0 11px;
  color: #9ca3af;
  font-size: 16px;
}
#checkout-admin-customer .login-input {
  background: transparent;
  color: #f3f4f6;
  padding: 10px 12px 10px 0;
  font-size: 14px;
  font-weight: 600;
}
#checkout-admin-customer .login-input::placeholder {
  color: #555;
  font-weight: 400;
}
#checkout-admin-customer #find-list-customer {
  margin-bottom: 8px;
}
#checkout-admin-customer .customer-search-list {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #0a0a0a;
  max-height: 180px;
  margin-bottom: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #141414;
}
#checkout-admin-customer .customer-search-list::-webkit-scrollbar {
  width: 5px;
}
#checkout-admin-customer .customer-search-list::-webkit-scrollbar-track {
  background: #141414;
  border-radius: 0 8px 8px 0;
}
#checkout-admin-customer .customer-search-list::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 3px;
}
#checkout-admin-customer .customer-search-item {
  padding: 9px 12px;
  gap: 10px;
  border-bottom-color: #222;
  background: transparent;
}
#checkout-admin-customer .customer-search-item:last-child {
  border-bottom: none;
}
#checkout-admin-customer .customer-search-item:hover {
  background: rgba(232, 25, 44, 0.1);
}
#checkout-admin-customer .customer-search-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
#checkout-admin-customer .customer-search-name {
  font-size: 13px;
  font-weight: 700;
  color: #f3f4f6;
}
#checkout-admin-customer .customer-search-contact {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}
#checkout-admin-customer .customer-search-arrow {
  color: #444;
  font-size: 16px;
}
#checkout-admin-customer .customer-search-item:hover .customer-search-arrow {
  color: #f87171;
}
#checkout-admin-customer .customer-search-empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #0f0f0f;
  border: 1px dashed #333;
  border-radius: 8px;
}
#checkout-admin-customer .customer-search-empty i {
  color: #e8192c;
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}
#checkout-admin-customer .booking-user-banner-dark {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.booking-checkout-panel #checkout-customer-error {
  color: #fbbf24 !important;
  margin-top: 6px;
  margin-bottom: 0;
}
.booking-user-banner-dark {
  background: #141414;
  border: 1px solid #2e2e2e;
  color: #e5e7eb;
}
.booking-user-banner-dark a {
  color: #f87171;
}
.booking-checkout-panel #find-list-customer .game-pill-user {
  background: #1a1a1a;
  border-color: #333;
}
.booking-charges-btn {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 10px 20px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.booking-next-date-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.booking-next-date-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid #e8192c;
  border-radius: 8px;
  background: rgba(232, 25, 44, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.booking-next-date-btn:hover {
  background: rgba(232, 25, 44, 0.25);
  border-color: #ff3b4f;
  color: #fff;
}
.booking-next-date-btn i {
  font-size: 16px;
}
/* Slim sticky bar */
.booking-charges-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: #0e0d0f;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.55);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.booking-charges-sticky-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bcs-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bcs-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.bcs-price {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.bcs-price-suffix {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-left: 1px;
}
.booking-charges-sticky-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1db954 0%, #17a045 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(29,185,84,0.4);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.booking-charges-sticky-btn:hover {
  box-shadow: 0 6px 20px rgba(29,185,84,0.55);
  transform: translateY(-1px);
}
.booking-charges-sticky-btn i {
  font-size: 16px;
}
body.booking-sticky-active {
  padding-bottom: 72px;
}
@media (max-width: 480px) {
  .bcs-price { font-size: 17px; }
  .booking-charges-sticky-btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 575px) {
  .booking-charges-inner {
    padding: 10px 12px 12px;
  }
  .booking-charges-title {
    font-size: 15px;
  }
  .bcs-when {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .bcs-field-pill {
    font-size: 11px;
    padding: 3px 8px;
  }
  .booking-charges-slots {
    max-height: none;
  }
  .booking-charges-sticky-inner {
    gap: 8px;
  }
  .booking-charges-sticky-btn {
    padding: 9px 12px;
    font-size: 13px;
  }
  .bcs-sticky-total {
    font-size: 15px;
  }
}

/* Super admin dashboard */
.admin-dashboard-wrap {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}
.admin-dashboard {
  background: #fff;
  border-radius: 12px;
}
.admin-dashboard-body {
  padding: 0.85rem 1rem !important;
}
.admin-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 0.6rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid #eef0f3;
}
.admin-dashboard-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}
.admin-dashboard-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}
.admin-dashboard-section {
  padding: 0.45rem 0;
  border-bottom: 1px solid #eef0f3;
}
.admin-dashboard-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.admin-section-head {
  margin-bottom: 0.35rem;
}
.admin-section-head--bookings {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-section-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.25;
}
.admin-section-title i {
  color: #e63946;
  font-size: 0.95rem;
}
.admin-dashboard-section.is-loading .admin-section-title::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 2px solid #f0d5d8;
  border-top-color: #e63946;
  border-radius: 50%;
  animation: booking-loader-spin 0.7s linear infinite;
  vertical-align: -2px;
}
.admin-date-range {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: none;
  letter-spacing: 0;
}
.admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.admin-filter-pills .nav-item {
  margin: 0;
}
.admin-filter-pills .nav-link {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-filter-pills .nav-item.bg-danger .nav-link,
.admin-filter-pills .nav-item.bg-danger .nav-link:hover {
  color: #fff;
  background: #e63946;
  border-color: #e63946;
}
.admin-filter-pills .nav-link:hover {
  background: #e5e7eb;
}
.admin-filter-date .input-group {
  width: auto;
  min-width: 170px;
}
.admin-filter-date .form-control {
  border-radius: 999px 0 0 999px;
  font-size: 0.8125rem;
}
.admin-filter-date .btn {
  border-radius: 0 999px 999px 0;
}
.admin-stat-grid {
  margin: 0;
}
.admin-stat-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  text-align: left;
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
}
button.admin-stat-card {
  cursor: pointer;
}
.admin-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  filter: brightness(1.05);
}
.admin-stat-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.admin-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.admin-stat-card__icon--emoji {
  font-size: 0.95rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.18);
}
.admin-stat-card__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}
.admin-stat-card__value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}
.admin-stat-card__action {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-top: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
button.admin-stat-card:hover .admin-stat-card__action {
  color: #fff;
}
.admin-stat-card--primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.admin-stat-card--cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.admin-stat-card--purple { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.admin-stat-card--neutral { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.admin-stat-card--success { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.admin-stat-card--teal { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.admin-stat-card--danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.admin-stat-card--warning {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #1f2937;
}
.admin-stat-card--info { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); }
.admin-stat-card--warning .admin-stat-card__label,
.admin-stat-card--warning .admin-stat-card__value,
.admin-stat-card--warning .admin-stat-card__action {
  color: #1f2937;
}
.admin-stat-card--warning .admin-stat-card__icon {
  background: rgba(31, 41, 55, 0.12);
}
.admin-stat-card--highlight {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b, 0 4px 14px rgba(245, 158, 11, 0.35);
}
.admin-stat-card--highlight.admin-stat-card--warning {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2626, 0 4px 14px rgba(220, 38, 38, 0.3);
}
.admin-dashboard-detail:not(:empty) {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
}
@media (max-width: 767px) {
  .admin-dashboard-header,
  .admin-section-head--bookings {
    flex-direction: column;
  }
  .admin-stat-card__value {
    font-size: 1.2rem;
  }
  .admin-filter-date .input-group {
    width: 100%;
  }
}

/* Admin customer profile modal */
.admin-customer-modal .modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}
.admin-customer-profile__hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.admin-customer-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-customer-profile__meta {
  flex: 1;
  min-width: 0;
}
.admin-customer-profile__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 6px;
}
.admin-customer-profile__contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.8125rem;
  color: #4b5563;
}
.admin-customer-profile__contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.admin-customer-profile__contact-row i {
  color: #9ca3af;
}
.admin-customer-profile__signup {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  white-space: nowrap;
}
.admin-customer-profile__signup--yes {
  background: #dcfce7;
  color: #166534;
}
.admin-customer-profile__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-customer-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-customer-filter-pill:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.admin-customer-filter-pill.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.admin-customer-filter-pill__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-customer-filter-pill.active .admin-customer-filter-pill__count {
  background: rgba(255, 255, 255, 0.18);
}
.admin-customer-profile__loading,
.admin-customer-bookings-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}
.admin-customer-bookings-empty i {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  opacity: 0.45;
}
.admin-customer-bookings-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.admin-customer-bookings-scroll {
  max-height: min(360px, 42vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-customer-bookings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.admin-customer-bookings-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  color: #374151;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
}
.admin-customer-bookings-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  color: #111827;
  background: #fff;
}
.admin-customer-bookings-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-customer-bookings-table tbody tr:hover td {
  background: #fafafa;
}
.admin-customer-bookings-futsal {
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}
.admin-customer-bookings-sub,
.admin-customer-bookings-muted {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}
.admin-customer-bookings-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-customer-slot-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 600;
}
.admin-customer-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-customer-status--green {
  background: #dcfce7;
  color: #166534;
}
.admin-customer-status--red {
  background: #fee2e2;
  color: #b91c1c;
}
.admin-customer-status--amber {
  background: #fef3c7;
  color: #b45309;
}
.admin-customer-status--neutral {
  background: #f3f4f6;
  color: #4b5563;
}
.admin-customer-payment {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.75rem;
  line-height: 1.35;
}
.admin-customer-payment__total {
  font-weight: 700;
  color: #111827;
}
.admin-customer-payment__paid {
  color: #15803d;
}
.admin-customer-payment__due {
  color: #b45309;
  font-weight: 600;
}
.admin-customer-payment__settled {
  color: #15803d;
  font-weight: 600;
}
.admin-customer-bookings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 2px;
}
.admin-customer-bookings-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-customer-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-customer-page-btn.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.admin-customer-page-select {
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 0.8125rem;
  padding: 0 8px;
}
.admin-customer-bookings-summary {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-left: auto;
}
@media (max-width: 767px) {
  .admin-customer-profile__hero {
    flex-wrap: wrap;
  }
  .admin-customer-profile__contact-row {
    flex-direction: column;
    gap: 4px;
  }
  .admin-customer-bookings-table thead {
    display: none;
  }
  .admin-customer-bookings-table tbody tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
  }
  .admin-customer-bookings-table tbody td {
    display: block;
    padding: 0 0 8px;
    border: 0;
  }
  .admin-customer-bookings-table tbody td:last-child {
    padding-bottom: 0;
  }
  .admin-customer-payment {
    align-items: flex-start;
  }
}

/* Admin users list (customers) — light table, readable hover */
.admin-users-list.timetable-table-area {
  background: #fff;
}
.admin-users-list.timetable-table-area .admin-users-table thead th {
  background: #f9fafb !important;
  color: #374151 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb !important;
  text-align: left !important;
}
.admin-users-list.timetable-table-area .admin-users-table tbody td {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  text-align: left !important;
}
.admin-users-list.timetable-table-area .admin-customer-row {
  cursor: pointer;
}
.admin-users-list.timetable-table-area .admin-customer-row:hover > td {
  background: #f3f4f6 !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.admin-users-list.timetable-table-area .admin-customer-row:hover > td .text-muted {
  color: #6b7280 !important;
}
.admin-users-list.timetable-table-area .admin-customer-row:hover > td .text-success {
  color: #15803d !important;
}
.admin-users-list.timetable-table-area .admin-users-row:hover > td {
  background: #f3f4f6 !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.admin-users-type-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  line-height: 1.3;
}
.admin-users-futsal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-users-futsal-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.admin-stat-card--loading {
  opacity: 0.72;
  pointer-events: none;
  position: relative;
}
.admin-stat-card--loading::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: booking-loader-spin 0.7s linear infinite;
}
.admin-users-list-loader {
  padding: 0.5rem 0 0.25rem;
}
.admin-users-list-loader__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 0 1.25rem;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
}
.admin-users-list-loader__head--compact {
  padding: 0.75rem 0 1rem;
}
.admin-users-list-loader__title {
  color: #374151;
}
.admin-users-list-loader__table {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.admin-users-list-loader__header {
  height: 38px;
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
}
.admin-users-list-loader__row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.9fr 0.7fr;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #f3f4f6;
}
.admin-users-list-loader__row--compact {
  padding: 10px 14px;
}
.admin-users-list-loader__row span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
}
.admin-users-list-loader__row span:nth-child(1) { width: 72%; }
.admin-users-list-loader__row span:nth-child(2) { width: 92%; }
.admin-users-list-loader__row span:nth-child(3) { width: 68%; }
.admin-users-list-loader__row span:nth-child(4) { width: 48%; }
@keyframes admin-users-list-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Super Settings / dashboard stat skeleton loaders */
.admin-dashboard-stat-loader__card,
.admin-super-settings-loader__card {
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
}
.admin-dashboard-stat-loader__card--sm,
.admin-super-settings-loader__card--sm {
  height: 68px;
}
.admin-super-settings-loader__header,
.admin-super-settings-loader__title {
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
}
.admin-super-settings-loader__header {
  height: 52px;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.admin-super-settings-loader__section {
  padding: 0.45rem 0;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid #eef0f3;
}
.admin-super-settings-loader__section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.admin-super-settings-loader__title {
  height: 14px;
  width: 72px;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.admin-super-settings-loader__title--wide {
  width: 120px;
}
#super-settings-btn:disabled {
  opacity: 0.85;
}

/* Admin futsal list — light table aligned with users list */
.admin-futsal-list-wrap {
  padding: 0 2px;
}
.admin-futsal-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.75rem;
}
.admin-futsal-list-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.admin-futsal-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.75rem;
}
.admin-futsal-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-futsal-filter-pill:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.admin-futsal-filter-pill.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.admin-futsal-filter-pill__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.admin-futsal-filter-pill.active .admin-futsal-filter-pill__count {
  background: rgba(255, 255, 255, 0.2);
}
.admin-futsal-list-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-futsal-list-add i {
  font-size: 1rem;
  line-height: 1;
}
.admin-futsal-list-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.admin-futsal-list-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.admin-futsal-list-close i {
  font-size: 1.1rem;
  line-height: 1;
}
.admin-futsal-list.timetable-table-area {
  background: #fff;
}
.admin-futsal-list-scroll {
  max-height: min(460px, 58vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-futsal-list .admin-futsal-table thead th {
  background: #f9fafb !important;
  color: #374151 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb !important;
  text-align: left !important;
  z-index: 1;
}
.admin-futsal-list .admin-futsal-table tbody td {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.admin-futsal-list .admin-futsal-row:hover > td {
  background: #f9fafb !important;
  box-shadow: none !important;
}
.admin-futsal-name {
  font-weight: 600;
  color: #b91c1c;
  text-decoration: none;
  line-height: 1.35;
}
.admin-futsal-name:hover {
  color: #991b1b;
  text-decoration: underline;
}
.admin-futsal-featured-star {
  color: #d97706;
  font-size: 0.9em;
  vertical-align: middle;
  margin-left: 2px;
}
.admin-futsal-city {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
}
.admin-futsal-field-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}
.admin-futsal-field-count--empty {
  background: #f3f4f6;
  color: #9ca3af;
}
.admin-futsal-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.admin-futsal-action {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  line-height: 1;
}
.admin-futsal-action i {
  font-size: 1rem;
}
.admin-futsal-action--view {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.admin-futsal-action--view:hover {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.admin-futsal-action--settings:hover {
  background: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}
.admin-futsal-action--owner {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.admin-futsal-action--owner:hover {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
.admin-futsal-status-select {
  max-width: 168px;
  font-size: 0.8125rem;
  border-color: #e5e7eb;
}
.admin-futsal-status-meta {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.35;
}
.admin-futsal-inline-edit {
  margin-top: 6px;
  max-width: 280px;
}
.admin-futsal-empty {
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}

/* Admin futsal summary modal — match Owner/Manager modal */
.admin-futsal-modal-dialog--summary {
  max-width: 520px;
  width: calc(100% - 1.5rem);
  margin: 0.75rem auto;
}
.admin-futsal-modal-dialog--summary .modal-content {
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.admin-futsal-modal-dialog--summary .admin-futsal-modal-header {
  background-color: var(--bs-danger);
  border-bottom: 0;
  padding: 0.85rem 1rem;
}
.admin-futsal-modal-dialog--summary .admin-futsal-modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.admin-futsal-modal-dialog--summary .admin-futsal-modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.admin-futsal-modal-dialog--summary .admin-futsal-modal-body {
  background: #fff;
  color: #111827;
  padding: 1rem !important;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}
.admin-futsal-modal-summary + .admin-futsal-modal-summary--income,
.admin-futsal-modal-summary--income {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef0f3;
}
.admin-futsal-modal-summary .admin-stat-card {
  min-height: 88px;
}
.admin-stat-card__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
}
.admin-futsal-modal-dialog--summary .admin-futsal-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
}
.admin-futsal-modal-dialog--full .admin-futsal-modal-header {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
}
.admin-futsal-modal-dialog--full .admin-futsal-modal-header .modal-title {
  color: #212529;
  font-weight: 700;
}
.admin-futsal-modal-dialog--full .admin-futsal-modal-footer {
  display: none;
}
.admin-futsal-modal-dialog--full.modal-fullscreen {
  max-width: none;
  width: 100%;
  margin: 0;
}
.admin-futsal-modal-dialog--full .modal-content {
  border-radius: 0;
  max-height: none;
}
.admin-futsal-modal-dialog--full .admin-futsal-modal-body {
  max-height: none;
  padding: 1rem !important;
}
.admin-futsal-bookings-detail:not(:empty) {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #dee2e6;
}

/* Admin futsal summary modal (legacy card overrides in settings mode) */
.admin-futsal-modal .admin-futsal-modal-body {
  color: #111827;
}
.admin-futsal-modal .card.bg-primary.bg-gradient,
.admin-futsal-modal .card.bg-success.bg-gradient {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px;
  box-shadow: none;
}
.admin-futsal-modal .card-body {
  padding: 1rem 1.1rem;
}
.admin-futsal-modal .card-title.text-light {
  color: #111827 !important;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.admin-futsal-modal .list-group {
  gap: 8px;
}
.admin-futsal-modal .list-group-item-action {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  margin-bottom: 0;
}
.admin-futsal-modal .list-group-item-primary {
  background: #eff6ff;
}
.admin-futsal-modal .list-group-item-warning {
  background: #fffbeb;
}
.admin-futsal-modal .list-group-item-danger {
  background: #fef2f2;
}
.admin-futsal-modal .list-group-item-success {
  background: #f0fdf4;
}
.admin-futsal-modal .list-group-item h5 {
  font-size: 0.875rem;
  font-weight: 600;
}
.admin-futsal-modal .table {
  background: #fff;
  margin-bottom: 0;
}
.admin-futsal-modal .table thead th {
  background: #f9fafb;
  color: #374151;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-futsal-modal .table tbody th,
.admin-futsal-modal .table tbody td {
  color: #111827;
}
.admin-futsal-modal .card .btn[style*="background:#1e293b"] {
  background: #111827 !important;
  border: none !important;
}
.admin-futsal-snapshot-section {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}
.admin-futsal-snapshot-section__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 0.75rem;
}
.admin-futsal-snapshot-section__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}
.admin-futsal-snapshot-section__controls .form-control {
  width: 160px;
  max-width: 100%;
}

/* Admin futsal summary — booking stat boxes */
.admin-booking-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 480px) {
  .admin-booking-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.admin-booking-stat-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  background: #fff;
  text-align: left;
}
.admin-booking-stat-box--primary {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
  border-color: #bfdbfe;
}
.admin-booking-stat-box--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fffef5 100%);
  border-color: #fde68a;
}
.admin-booking-stat-box--danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fff8f8 100%);
  border-color: #fecaca;
}

/* ── Booking Grid Header + Court Column Headers ─────────────────────────── */
:root {
  --court-padel:   #1565C0;
  --court-futsal:  #E65100;
  --court-cricket: #1B5E20;
}

.booking-grid-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 8px 2px 10px;
}
.booking-grid-header .bgh-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--whiteColor);
}
.booking-grid-header .bgh-hint {
  font-size: 13px;
  color: #e55;
  font-weight: 500;
}
.booking-grid-header .bgh-legend {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}
.bgh-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
}
.bgh-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Court column <th> */
.court-th {
  padding: 8px 6px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
}
.court-th-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.court-th-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
.court-th-emojis {
  font-size: 17px;
  line-height: 1;
  letter-spacing: -2px;
}
.court-th-size {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}
.court-th-pricing {
  font-size: 10px;
  line-height: 1.5;
  margin-top: 2px;
  white-space: nowrap;
}
.court-th-pricing .cp-off  { color: #a5f3a5; font-weight: 600; }
.court-th-pricing .cp-sep  { color: rgba(255,255,255,0.45); }
.court-th-pricing .cp-peak { color: #ffb3b3; font-weight: 600; }

@media (max-width: 600px) {
  .booking-grid-header { flex-direction: column; gap: 4px; }
  .booking-grid-header .bgh-legend { margin-left: 0; }
  .court-th { padding: 6px 3px !important; }
  .court-th-name { font-size: 13px; }
  .court-th-emojis { font-size: 14px; }
  .court-th-size,
  .court-th-pricing { display: none; }
}
@media (max-width: 380px) {
  .court-th-emojis { display: none; }
}

/* ── Peak / Off-peak time cell stripe ──────────── */
.slot-peak {
  border-left: 3px solid #e53935 !important;
  color: #ff6b6b;
}
.slot-offpeak {
  border-left: 3px solid #43a047 !important;
  color: var(--whiteColor);
}

/* ── Booking summary enhancements ──────────────── */
.checkout-slot-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: middle;
  color: rgba(255,255,255,0.8);
}
.checkout-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(29,185,84,0.12);
  border: 1px solid rgba(29,185,84,0.35);
  color: #4caf50;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 9px;
  margin-left: auto;
  white-space: nowrap;
}
.checkout-savings-badge i { font-size: 13px; }

/* Inline strikethrough original price in slot rows */
.bcs-orig-price {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.45;
  margin-right: 2px;
}

/* Time pill — peak / off-peak */
.bcs-field-when {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.bcs-pill-peak {
  background: rgba(229,57,53,0.15);
  border: 1px solid rgba(229,57,53,0.4);
  color: #ff7070;
}
.bcs-pill-offpeak {
  background: rgba(67,160,71,0.15);
  border: 1px solid rgba(67,160,71,0.4);
  color: #66bb6a;
}

/* ── Booked cell tooltip ────────────────────────── */
.booked-cell {
  position: relative;
  cursor: default;
}
.booked-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.booked-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255,255,255,0.12);
}
.booked-cell:hover .booked-tooltip,
.booked-cell:focus .booked-tooltip {
  visibility: visible;
  opacity: 1;
}

/* ── Merged court header card ───────────────────── */
.cth-time {
  vertical-align: middle !important;
  padding: 12px 10px !important;
}
.cth-time-label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.cth-time-day {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.cth-court {
  padding: 10px 8px !important;
  vertical-align: middle !important;
}
.cth-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.cth-emojis {
  font-size: 15px;
  letter-spacing: -1px;
}
.cth-size {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.cth-color-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 3px;
  opacity: 0.75;
}
.cth-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 6px 0 5px;
}
.cth-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  line-height: 1.5;
}
.cth-price-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.cth-price-val {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cth-price-val s {
  font-weight: 400;
  opacity: 0.45;
  font-size: 10px;
  margin-right: 2px;
}
.cth-price--off .cth-price-label { color: rgba(160,220,160,0.75); }
.cth-price--off .cth-price-val   { color: #7ee87e; }
.cth-price--peak .cth-price-label { color: rgba(255,140,140,0.75); }
.cth-price--peak .cth-price-val   { color: #ff7070; }

@media (max-width: 600px) {
  .cth-name { font-size: 11px; }
  .cth-emojis { font-size: 11px; }
  .cth-size { font-size: 9px; }
  .cth-court { padding: 6px 3px !important; }
  .cth-price-label { font-size: 9px; }
  .cth-price-val { font-size: 10px; }
}
.admin-booking-stat-box--success {
  background: linear-gradient(135deg, #ecfdf5 0%, #f6fef9 100%);
  border-color: #a7f3d0;
}
.admin-booking-stat-box--static {
  cursor: default;
}
.admin-booking-stat-box:not(.admin-booking-stat-box--static) {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.admin-booking-stat-box:not(.admin-booking-stat-box--static):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.admin-booking-stat-box__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.admin-booking-stat-box__value {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.1;
  color: #111827;
}
.admin-booking-stat-box--primary .admin-booking-stat-box__label { color: #0d6efd; }
.admin-booking-stat-box--warning .admin-booking-stat-box__label { color: #997404; }
.admin-booking-stat-box--danger .admin-booking-stat-box__label { color: #dc3545; }
.admin-booking-stat-box--success .admin-booking-stat-box__label { color: #198754; }
button.admin-booking-stat-box {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* Owner futsal card — white panel, colorful stat boxes */
.owner-futsal-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.owner-futsal-card .card-body {
  padding: 1rem 1.1rem 1.15rem;
}
.owner-futsal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.85rem;
}
.owner-futsal-card__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-futsal-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.owner-futsal-card__actions .owner-futsal-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 31px;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #1db954 0%, #17a045 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(29, 185, 84, 0.35);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.owner-futsal-card__actions .owner-futsal-view-btn:hover:not(:disabled),
.owner-futsal-card__actions .owner-futsal-view-btn:focus:not(:disabled) {
  filter: brightness(0.94);
  color: #fff;
  box-shadow: 0 3px 8px rgba(29, 185, 84, 0.42);
}
.owner-futsal-card__actions .owner-futsal-view-btn:disabled {
  opacity: 0.88;
  color: #fff;
}
.owner-futsal-card__actions .owner-futsal-view-btn i {
  font-size: 1rem;
  line-height: 1;
  color: #fff;
}
.owner-futsal-card__actions .owner-futsal-view-btn .spinner-border {
  width: 0.95rem;
  height: 0.95rem;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-right-color: #fff;
}
.owner-futsal-card .section-title .btn.btn-sm {
  vertical-align: middle;
  margin-left: 6px;
}
.owner-futsal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.75rem;
  text-align: left;
}
.owner-futsal-panel-head__title {
  flex: 1;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.owner-futsal-panel-head__tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.owner-booking-panel__empty {
  padding: 0.5rem 0 0.25rem;
}
#PendingBookingsModal .owner-booking-modal-empty, .owner-futsal-card .owner-booking-modal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 40px 24px 48px;
  min-height: 160px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
#PendingBookingsModal .owner-booking-modal-empty > i, .owner-futsal-card .owner-booking-modal-empty > i {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
#PendingBookingsModal .owner-booking-modal-empty__text, .owner-futsal-card .owner-booking-modal-empty__text {
  display: inline;
}
#PendingBookingsModal .owner-booking-modal-empty--pending, .owner-futsal-card .owner-booking-modal-empty--pending {
  color: #b45309;
}
#PendingBookingsModal .owner-booking-modal-empty--pending > i, .owner-futsal-card .owner-booking-modal-empty--pending > i {
  color: #d97706;
}
#PendingBookingsModal .owner-booking-modal-empty--autocancel, .owner-futsal-card .owner-booking-modal-empty--autocancel {
  color: #c2410c;
}
#PendingBookingsModal .owner-booking-modal-empty--autocancel > i, .owner-futsal-card .owner-booking-modal-empty--autocancel > i {
  color: #ea580c;
}
#PendingBookingsModal .owner-booking-modal-empty--cancelled, .owner-futsal-card .owner-booking-modal-empty--cancelled {
  color: #b91c1c;
}
#PendingBookingsModal .owner-booking-modal-empty--cancelled > i, .owner-futsal-card .owner-booking-modal-empty--cancelled > i {
  color: #dc2626;
}
#PendingBookingsModal .owner-booking-modal-empty--confirmed, .owner-futsal-card .owner-booking-modal-empty--confirmed {
  color: #15803d;
}
#PendingBookingsModal .owner-booking-modal-empty--confirmed > i, .owner-futsal-card .owner-booking-modal-empty--confirmed > i {
  color: #16a34a;
}
.owner-futsal-card .owner-booking-inline-list {
  padding: 4px 0 10px;
}
.owner-booking-inline-list--autocancel .owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header-name i {
  color: #ea580c;
}
.owner-booking-inline-list--autocancel .owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header-name a:hover,
.owner-booking-inline-list--autocancel .owner-modal-booking-wrap--autocancel .owner-modal-booking-contact:hover {
  color: #ea580c;
}
.owner-booking-inline-list--autocancel .owner-modal-booking-wrap--autocancel .owner-modal-booking-card__expire {
  color: #ea580c !important;
}
.owner-booking-inline-list--autocancel .owner-modal-booking-wrap--autocancel .owner-modal-booking-compact .bcs-field-when.text-warning {
  color: #ea580c !important;
}
@media (min-width: 768px) {
  .owner-futsal-card__title {
    font-size: 1.35rem;
  }
}
.owner-futsal-quick-summary {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eef0f3;
}
.owner-futsal-quick-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.owner-futsal-quick-summary__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
  margin-left: auto;
}
.owner-futsal-quick-summary__actions-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.owner-futsal-quick-summary__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.owner-futsal-quick-summary__action:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}
.owner-futsal-quick-summary__action i {
  font-size: 0.8rem;
}
.owner-futsal-quick-summary__spinner {
  margin-left: 2px;
}
.owner-futsal-quick-summary__note {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-futsal-quick-summary__actions .compare-btn {
  flex-shrink: 0;
  margin-left: auto;
}
.owner-futsal-quick-summary__actions .owner-futsal-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 31px;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}
.owner-futsal-quick-summary__actions .owner-futsal-compare-btn i {
  font-size: 1rem;
  line-height: 1;
}
.owner-futsal-quick-summary__actions .owner-futsal-compare-btn .spinner-border {
  width: 0.95rem;
  height: 0.95rem;
  border-width: 2px;
}
.owner-futsal-quick-summary__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.owner-futsal-quick-summary__desc {
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.owner-futsal-action-note {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.owner-futsal-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}
.owner-futsal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: #1e293b;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.owner-futsal-action-btn:hover {
  filter: brightness(0.88);
  color: #fff;
}
.admin-futsal-summary-divider {
  border-color: #e9ecef;
  opacity: 1;
}
.owner-futsal-card .owner-futsal-summary-section h6 {
  color: #111827;
  font-size: 0.8rem;
  margin-bottom: 0;
}
.owner-futsal-section-head {
  margin-bottom: 6px;
}
.owner-futsal-card .owner-futsal-summary-section--bookings {
  margin-bottom: 0;
}
.owner-futsal-card .owner-futsal-summary-section--summary {
  margin-top: 8px;
}
.owner-futsal-card .owner-futsal-summary-section--summary h6 {
  margin-bottom: 6px;
}
.owner-futsal-card .owner-futsal-panel-actions {
  border-top-color: #eef0f3;
}
.owner-futsal-card .owner-compare-meta {
  color: #6b7280;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.owner-futsal-card .owner-compare-boxes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  align-items: flex-start;
}
.owner-futsal-card .owner-compare-sheet__venue {
  flex: 0 0 100%;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}
.owner-futsal-card .owner-compare-sheet {
  flex: 1;
  min-width: 240px;
  border: 2px solid #111827;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.owner-futsal-card .owner-compare-sheet__head {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111827;
  border-bottom: 1px solid #111827;
  text-align: center;
}
.owner-futsal-card .owner-compare-sheet--before .owner-compare-sheet__head,
.owner-futsal-card .owner-compare-sheet--after .owner-compare-sheet__head {
  background: #374151;
  color: #fff;
}
.owner-futsal-card .owner-compare-sheet__grid {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) repeat(3, minmax(64px, 1fr));
  gap: 0;
}
.owner-futsal-card .owner-compare-sheet__grid--after {
  grid-template-columns: minmax(72px, 1fr) repeat(3, minmax(64px, 1fr)) minmax(56px, 0.75fr);
}
.owner-futsal-card .owner-compare-sheet__cell {
  padding: 5px 8px;
  font-size: 12px;
  color: #111827;
  border-right: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.owner-futsal-card .owner-compare-sheet__grid:not(.owner-compare-sheet__grid--after) .owner-compare-sheet__cell:nth-child(4n) {
  border-right: none;
}
.owner-futsal-card .owner-compare-sheet__grid--after .owner-compare-sheet__cell:nth-child(5n) {
  border-right: none;
}
.owner-futsal-card .owner-compare-sheet__cell--label {
  font-weight: 700;
  justify-content: center;
}
.owner-futsal-card .owner-compare-sheet__cell--subhead {
  font-weight: 700;
  justify-content: center;
  background: #f9fafb;
}
.owner-futsal-card .owner-compare-sheet__cell--val {
  font-weight: 600;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.owner-futsal-card .owner-compare-sheet__cell--highlight {
  background: #fef08a !important;
  color: #111827;
}
.owner-futsal-card .owner-compare-sheet__cell--onspot {
  background: #84cc16;
  color: #14532d;
  font-weight: 700;
  justify-content: center;
}
.owner-futsal-card .owner-compare-sheet__cell--total {
  font-weight: 700;
  background: #f8fafc;
}
.owner-futsal-card .owner-compare-sheet__cell--empty {
  background: #fff;
}
.owner-futsal-card .owner-compare-sheet__cell--span-3 {
  grid-column: span 3;
  justify-content: center;
}
.owner-futsal-card .owner-compare-sheet__cell--formula {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.owner-futsal-card .owner-compare-sheet__cell--adj-due {
  background: #fef08a;
  color: #111827;
}
.owner-futsal-card .owner-compare-sheet__cell--adj-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}
.owner-futsal-card .owner-compare-sheet__cell--adj-new {
  background: #dcfce7;
  color: #15803d;
}
.owner-futsal-card .owner-compare-sheet__cell--adj-discount {
  background: #f3e8ff;
  color: #7c3aed;
}
.owner-futsal-card .owner-compare-sheet__cell--adj-extra {
  background: #fef9c3;
  color: #a16207;
}
.owner-futsal-card .owner-compare-after-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  color: #111827;
}
.owner-futsal-card .owner-compare-after-table th,
.owner-futsal-card .owner-compare-after-table td {
  border: 1px solid #111827;
  padding: 5px 8px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.owner-futsal-card .owner-compare-after-table__section {
  width: 28%;
  font-weight: 700;
  text-align: center;
  background: #fff;
}
.owner-futsal-card .owner-compare-after-table__section--payments {
  color: #15803d;
}
.owner-futsal-card .owner-compare-after-table__section--onspot {
  font-weight: 700;
  text-align: center;
  text-transform: lowercase;
}
.owner-futsal-card .owner-compare-after-table__head,
.owner-futsal-card .owner-compare-after-table__head--balance {
  font-weight: 700;
  background: #f3f4f6;
  color: #374151;
}
.owner-futsal-card .owner-compare-after-table__head--payments {
  font-weight: 700;
  background: #374151;
  color: #fff;
}
.owner-futsal-card .owner-compare-after-table__cell--empty-col {
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6,
    #f3f4f6 4px,
    #e5e7eb 4px,
    #e5e7eb 8px
  ) !important;
}
.owner-futsal-card .owner-compare-after-table__head--section {
  width: 70px;
  min-width: 70px;
  background: #f3f4f6;
}
.owner-futsal-card .owner-compare-after-table__section-label {
  width: 70px;
  min-width: 70px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
  background: #f9fafb;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #e5e7eb;
}
.owner-futsal-card .owner-compare-after-table__head--balance {
  text-align: center;
}
.owner-futsal-card .owner-compare-after-table__val {
  font-weight: 600;
  background: #fff;
}
.owner-futsal-card .owner-compare-after-table__val--cancelled {
  background: #fca5a5;
  color: #7f1d1d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--new {
  background: #bbf7d0;
  color: #14532d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--total {
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--booking-total {
  background: #fef08a;
  color: #111827;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--amount-due {
  background: #fef08a;
  color: #111827;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--payments {
  background: #bbf7d0;
  color: #14532d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--onspot {
  background: #bbf7d0;
  color: #14532d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--balance {
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__val--balance.owner-compare-balance-zero {
  background: #bbf7d0;
  color: #14532d;
}
.owner-futsal-card .owner-compare-after-table__val--balance.owner-compare-balance-due {
  background: #fca5a5;
  color: #7f1d1d;
}
.owner-futsal-card .owner-compare-bg--cash,
.owner-futsal-card .owner-compare-bg--bank {
  background: #bbf7d0;
  color: #15803d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-bg--balance-due {
  background: #fca5a5 !important;
  color: #7f1d1d !important;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-bg--balance-zero {
  background: #bbf7d0 !important;
  color: #14532d !important;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-after-table__empty {
  background: #fff;
}
.owner-futsal-card .owner-compare-after-table__balance-row th,
.owner-futsal-card .owner-compare-after-table__balance-row td {
  border-top: 1px solid #111827;
}
/* Inset box-shadow borders avoid border-collapse interference with outer table border */
.owner-futsal-card .owner-compare-after-table__payments-group-left {
  box-shadow: inset 4px 0 0 0 #16a34a;
}
.owner-futsal-card .owner-compare-after-table__payments-group-right {
  box-shadow: inset -4px 0 0 0 #16a34a;
}
/* Top edge — middle cells */
.owner-futsal-card .owner-compare-after-table__payments-group-start th:not(.owner-compare-after-table__payments-group-left):not(.owner-compare-after-table__payments-group-right),
.owner-futsal-card .owner-compare-after-table__payments-group-start td:not(.owner-compare-after-table__payments-group-left):not(.owner-compare-after-table__payments-group-right) {
  box-shadow: inset 0 4px 0 0 #16a34a;
}
/* Top-left corner */
.owner-futsal-card .owner-compare-after-table__payments-group-start .owner-compare-after-table__payments-group-left {
  box-shadow: inset 4px 4px 0 0 #16a34a;
}
/* Top-right corner */
.owner-futsal-card .owner-compare-after-table__payments-group-start .owner-compare-after-table__payments-group-right {
  box-shadow: inset -4px 4px 0 0 #16a34a;
}
/* Bottom edge — middle cells */
.owner-futsal-card .owner-compare-after-table__payments-total-row th:not(.owner-compare-after-table__payments-group-left):not(.owner-compare-after-table__payments-group-right),
.owner-futsal-card .owner-compare-after-table__payments-total-row td:not(.owner-compare-after-table__payments-group-left):not(.owner-compare-after-table__payments-group-right) {
  box-shadow: inset 0 -4px 0 0 #16a34a;
}
/* Bottom-left corner */
.owner-futsal-card .owner-compare-after-table__payments-total-row .owner-compare-after-table__payments-group-left {
  box-shadow: inset 4px -4px 0 0 #16a34a;
}
/* Bottom-right corner */
.owner-futsal-card .owner-compare-after-table__payments-total-row .owner-compare-after-table__payments-group-right {
  box-shadow: inset -4px -4px 0 0 #16a34a;
}
.owner-futsal-card .owner-compare-after-table__section--payments-total {
  font-weight: 700;
  color: #15803d;
  text-align: center;
}
.owner-futsal-card .owner-compare-after-table__val--payments-total {
  background: #bbf7d0;
  color: #14532d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-box {
  flex: 1;
  min-width: 180px;
  border-radius: 10px;
  padding: 10px 14px;
  border: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: #fff;
}
.owner-futsal-card .owner-compare-box__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.92;
  margin-bottom: 8px;
}
.owner-futsal-card .owner-compare-box__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 3px;
}
.owner-futsal-card .owner-compare-box__hint {
  opacity: 0.75;
  font-size: 11px;
  margin-left: 2px;
}
.owner-futsal-card .owner-compare-box__sub {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 4px;
  padding-left: 2px;
}
.owner-futsal-card .owner-compare-box__row--sub {
  font-size: 11px;
  opacity: 0.88;
  margin-bottom: 2px;
  padding-left: 4px;
}
.owner-futsal-card .owner-compare-box__val--cancelled {
  color: #fecaca;
  font-size: 11px;
}
.owner-futsal-card .owner-compare-box__val--new {
  color: #bbf7d0;
  font-size: 11px;
}
.owner-futsal-card .owner-compare-box__val--discount {
  color: #e9d5ff;
  font-size: 11px;
}
.owner-futsal-card .owner-compare-box__val--extra {
  color: #fde68a;
  font-size: 11px;
}
.owner-futsal-card .owner-compare-box__val {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.owner-futsal-card .owner-compare-box__val--pos {
  color: #bbf7d0;
  font-size: 11px;
}
.owner-futsal-card .owner-compare-box__val--due {
  color: #fecaca;
}
.owner-futsal-card .owner-compare-box--before {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.owner-futsal-card .owner-compare-box--after {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-compare-box--diff {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
}
.owner-futsal-card .owner-compare-table-panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  margin-bottom: 0.5rem;
}
.owner-futsal-card .owner-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.owner-futsal-card .owner-compare-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.7rem;
  color: #111827;
}
.owner-futsal-card .owner-compare-table__caption {
  display: none;
}
.owner-futsal-card .owner-compare-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.owner-futsal-card .owner-compare-table thead th {
  padding: 4px 5px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #fff;
  background: #374151;
  border-bottom: 1px solid #1f2937;
  white-space: normal;
  vertical-align: middle;
  text-align: center;
}
.owner-futsal-card .owner-compare-table__group-row th {
  padding: 4px 5px;
  font-size: 0.65rem;
  line-height: 1.2;
  border-bottom: none;
  white-space: normal;
  color: #fff;
  background: #374151;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-table__group {
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-table__group--before {
  background: #374151;
  border: 2px solid #1d4ed8;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.owner-futsal-card .owner-compare-table__group--after {
  background: #374151;
  border: 2px solid #15803d;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
/* Before Entries box — cols 3–6 */
.owner-futsal-card .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(3),
.owner-futsal-card .owner-compare-table tbody td:nth-child(3),
.owner-futsal-card .owner-compare-table tfoot tr:first-child td:nth-child(2) {
  border-left: 2px solid #3b82f6;
}
.owner-futsal-card .owner-compare-table__box-before-end,
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(6),
.owner-futsal-card .owner-compare-table tbody td:nth-child(6),
.owner-futsal-card .owner-compare-table tfoot tr:first-child td:nth-child(5) {
  border-right: 2px solid #3b82f6;
}
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(n+3):nth-child(-n+6) {
  border-top: 2px solid #3b82f6;
}
/* Close Before box bottom — always class-based so it works on any last row */
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-before-start {
  border-bottom: 2px solid #3b82f6;
  border-bottom-left-radius: 8px;
}
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-before-end {
  border-bottom: 2px solid #3b82f6;
  border-bottom-right-radius: 8px;
}
/* After Entries box — cols 7–10 */
.owner-futsal-card .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(7),
.owner-futsal-card .owner-compare-table tbody td:nth-child(7),
.owner-futsal-card .owner-compare-table tfoot tr:first-child td:nth-child(6) {
  border-left: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table__box-after-end,
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(10),
.owner-futsal-card .owner-compare-table tbody td:nth-child(10),
.owner-futsal-card .owner-compare-table tfoot tr:first-child td:nth-child(9) {
  border-right: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table thead tr:nth-child(2) th:nth-child(n+7):nth-child(-n+10) {
  border-top: 2px solid #22c55e;
}
/* Close After box bottom — all cells in the after block on the last row */
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-after-end,
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-after-start ~ td:not([class*="box-before"]) {
  border-bottom: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-after-start {
  border-bottom-left-radius: 8px;
}
.owner-futsal-card .owner-compare-table tfoot tr:last-child .owner-compare-table__box-after-end {
  border-bottom-right-radius: 8px;
}
/* Keep side borders continuous through summary footer rows */
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-before-end,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-after-end {
  background: #fff;
}
.owner-futsal-card .owner-compare-table tbody td,
.owner-futsal-card .owner-compare-table tfoot td {
  padding: 5px 6px;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: middle;
  text-align: center;
}
.owner-futsal-card .owner-compare-table th,
.owner-futsal-card .owner-compare-table td {
  text-align: center !important;
  vertical-align: middle !important;
}
.owner-futsal-card .owner-compare-table thead th .owner-compare-table__hint {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7280;
  margin-top: 1px;
}
.owner-futsal-card .owner-compare-table tbody tr:last-child td {
  border-bottom: none;
}
.owner-futsal-card .owner-compare-table tbody tr.owner-compare-row--clickable {
  cursor: pointer;
}
.owner-futsal-card .owner-compare-table tbody tr.owner-compare-row--clickable:hover {
  box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.04);
}
.owner-futsal-card .owner-compare-table tbody tr.owner-compare-row--clickable:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}
.owner-futsal-card .owner-compare-row--cancelled { background-color: #fef2f2; }
.owner-futsal-card .owner-compare-row--discount { background-color: #faf5ff; }
.owner-futsal-card .owner-compare-row--extra { background-color: #fffbeb; }
.owner-futsal-card .owner-compare-row--status { background-color: #fefce8; }
.owner-futsal-card .owner-compare-row--gain { background-color: #f0fdf4; }
.owner-futsal-card .owner-compare-row--due { background-color: #fff7ed; }
.owner-futsal-card .owner-compare-row--new { background-color: #eff6ff; }
.owner-futsal-card .owner-compare-row--onspot {
  background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 100%);
  font-weight: 600;
}
/* Column-group tints — Before (cols 3–6) blue, After (cols 7–10) green */
.owner-futsal-card .owner-compare-table tbody tr > td:nth-child(n+3):nth-child(-n+6):not([class*="owner-compare-num--"]) {
  background-color: #f0f7ff;
}
.owner-futsal-card .owner-compare-table tbody tr > td:nth-child(n+7):nth-child(-n+10):not([class*="owner-compare-num--"]) {
  background-color: #f0fdf4;
}
/* Row-level backgrounds win over column tints */
.owner-futsal-card .owner-compare-table tbody tr[class*="owner-compare-row--"] > td:not([class*="owner-compare-num--"]) {
  background-color: inherit;
}
.owner-futsal-card .owner-compare-row--summary {
  background: #fff;
}
.owner-futsal-card .owner-compare-row--summary td {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.owner-futsal-card .owner-compare-row--total,
.owner-futsal-card .owner-compare-row--payments {
  background: #f3f4f6;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-row--total td,
.owner-futsal-card .owner-compare-row--payments td {
  background: #f3f4f6 !important;
  color: #111827;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--payments .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--payments .owner-compare-table__box-before-end,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--payments .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--payments .owner-compare-table__box-after-end {
  background: #f3f4f6 !important;
}
.owner-futsal-card .owner-compare-table__customer {
  min-width: 88px;
  vertical-align: middle;
  text-align: center;
}
.owner-futsal-card .owner-compare-table__customer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.25;
}
.owner-futsal-card .owner-compare-table__customer-idx {
  flex: 0 0 auto;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.6875rem;
}
.owner-futsal-card .owner-compare-table__customer-name {
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.owner-futsal-card .owner-compare-table__row-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.owner-futsal-card .owner-compare-table__fields {
  min-width: 110px;
  vertical-align: middle;
  text-align: center;
}
.owner-futsal-card .owner-compare-table__fields-badges {
  display: block;
  line-height: 1.3;
  text-align: center;
}
.owner-futsal-card .owner-compare-table__fields-status {
  display: block;
  margin-top: 4px;
  line-height: 1.2;
  text-align: center;
}
.owner-futsal-card .owner-compare-table__fields-status .owner-compare-status {
  display: inline-block;
}
.owner-futsal-card .owner-compare-table__fields-status .owner-compare-status__was {
  display: block;
  margin-top: 2px;
}
.owner-futsal-card .owner-compare-badge {
  display: inline-block;
  margin: 2px 2px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
}
.owner-futsal-card .owner-compare-badge--confirmed {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-compare-badge--cancelled {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.owner-futsal-card .owner-compare-badge--new {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.owner-futsal-card .owner-compare-badge--due {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.owner-futsal-card .owner-compare-badge--discount {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}
.owner-futsal-card .owner-compare-badge--extra {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}
.owner-futsal-card .owner-compare-badge--adjust-field {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}
.owner-futsal-card .owner-compare-badge--adjust-discount,
.owner-futsal-card .owner-compare-badge--adjust-extra {
  font-size: 0.6rem;
  padding: 1px 6px;
  vertical-align: middle;
}
.owner-futsal-card .owner-compare-badge--adjust-discount {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.owner-futsal-card .owner-compare-badge--adjust-extra {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-compare-total-adj {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
  white-space: normal;
}
.owner-futsal-card .owner-compare-total-adj__line {
  display: block;
}
.owner-futsal-card .owner-compare-num--adjust {
  font-size: 0.65rem;
  line-height: 1.25;
  white-space: normal;
}
.owner-futsal-card .owner-compare-num--discount {
  color: #7c3aed;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--extra {
  color: #ca8a04;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-table__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
}
.owner-futsal-card .owner-compare-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
}
.owner-futsal-card .owner-compare-num--total-b,
.owner-futsal-card .owner-compare-num--total-a {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--reconcile {
  color: #111827;
  font-weight: 600;
}
.owner-futsal-card .owner-compare-num--formula {
  white-space: normal;
  padding: 4px 6px;
  vertical-align: middle;
  text-align: center !important;
}
.owner-futsal-card .owner-compare-formula {
  display: inline-block;
  text-align: center;
  line-height: 1.25;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.owner-futsal-card .owner-compare-formula__line {
  display: block;
  white-space: nowrap;
}
.owner-futsal-card .owner-compare-formula__line--op {
  color: #374151;
}
.owner-futsal-card .owner-compare-formula__line--cross {
  color: #b91c1c;
}
.owner-futsal-card .owner-compare-formula__line--result {
  color: #111827;
  font-weight: 800;
}
.owner-futsal-card .owner-compare-formula__note {
  display: block;
  margin-top: 1px;
  font-size: 0.5rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.owner-futsal-card .owner-compare-table tfoot .owner-compare-num--formula {
  min-width: 3.75rem;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--payments td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.owner-futsal-card .owner-compare-row--onspot td {
  background: #fefce8 !important;
  color: #854d0e;
  font-weight: 600;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--onspot .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--onspot .owner-compare-table__box-before-end,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--onspot .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--onspot .owner-compare-table__box-after-end {
  background: #fefce8 !important;
}
/* Vertical summary label cell */
.owner-futsal-card .owner-compare-table__summary-label-cell {
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(180deg, #e0e7ff 0%, #ede9fe 100%);
  border-right: 2px solid #c7d2fe;
  border-left: 3px solid #6366f1;
  padding: 0 !important;
  width: 1.35rem;
  max-width: 1.35rem;
}
.owner-futsal-card .owner-compare-table__summary-label-text {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4338ca;
  white-space: nowrap;
  margin: auto;
  line-height: 1;
}
.owner-futsal-card .owner-compare-table__summary-head-empty {
  width: 1.35rem;
  max-width: 1.35rem;
  padding: 0 !important;
}
/* Summary cards appended as tfoot row */
.owner-futsal-card .owner-compare-row--summary-cards {
  border-top: 2px solid #e5e7eb;
}
.owner-futsal-card .owner-compare-table__summary-card-cell {
  vertical-align: top;
  padding: 0 !important;
}
.owner-futsal-card .owner-compare-table__summary-card-cell--before .owner-compare-sheet--inline,
.owner-futsal-card .owner-compare-table__summary-card-cell--after .owner-compare-sheet--inline {
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: 100%;
}
.owner-futsal-card .owner-compare-table__summary-card-cell--before .owner-compare-sheet--inline .owner-compare-sheet__head,
.owner-futsal-card .owner-compare-table__summary-card-cell--after .owner-compare-sheet--inline .owner-compare-sheet__head {
  border-radius: 0;
}
.owner-futsal-card .owner-compare-table__summary-card-cell--before .owner-compare-sheet--inline {
  border-right: 1px solid #e5e7eb;
}
.owner-futsal-card .owner-compare-table__summary-card-cell--after .owner-compare-after-table {
  width: 100%;
}
.owner-futsal-card .owner-compare-row--total-payments td {
  background: #dcfce7 !important;
  color: #14532d;
  font-weight: 700;
  border-top: 2px solid #16a34a;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--total-payments .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--total-payments .owner-compare-table__box-before-end,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--total-payments .owner-compare-table__box-after-start,
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--total-payments .owner-compare-table__box-after-end {
  background: #dcfce7 !important;
}
.owner-futsal-card .owner-compare-table td.owner-compare-table__box-after-end.owner-compare-num--formula .owner-compare-formula__line--result {
  color: #b91c1c;
}
.owner-futsal-card .owner-compare-num--booking-total {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--amount-due {
  background: #fef08a;
  color: #111827;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-table td.owner-compare-table__box-after-end.owner-compare-num--amount-due {
  background: #fecaca;
  color: #b91c1c;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--cash,
.owner-futsal-card .owner-compare-num--bank {
  background: #bbf7d0;
  color: #15803d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--slot-empty {
  background-color: inherit !important;
  color: #9ca3af;
  font-weight: 400;
}
.owner-futsal-card .owner-compare-num--empty {
  background-color: #f9fafb !important;
}
.owner-futsal-card .owner-compare-num--merged {
  text-align: center;
}
/* Summary-only mode: hide booking detail rows; keep summary footer */
.owner-futsal-card .owner-compare-table--summary-only thead,
.owner-futsal-card .owner-compare-table--summary-only tbody,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--total,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--onspot,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--discount-total,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--extra-total,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--section-head-detail {
  display: none;
}
.owner-futsal-card .owner-compare-table:not(.owner-compare-table--summary-only) .owner-compare-row--section-head-summary {
  display: none;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-table__summary-head-empty {
  background: #f8fafc;
  border-top: 2px solid #e5e7eb;
  border-right: 2px solid #e5e7eb;
  padding: 0;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--section-head-summary .owner-compare-row--section-head-cell--before {
  border-top: 2px solid #3b82f6;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--section-head-summary .owner-compare-row--section-head-cell--after {
  border-top: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-table__summary-label-cell {
  display: table-cell;
  border-top: none;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-summary-spacer {
  background: #fff !important;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-num--filled.owner-compare-summary-merged-label {
  text-align: center;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--empty-divider.owner-compare-row--section-head-summary + .owner-compare-row--empty-divider .owner-compare-table__box-before-start,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-row--empty-divider.owner-compare-row--section-head-summary + .owner-compare-row--empty-divider .owner-compare-num--filled.owner-compare-num--booking-total.owner-compare-table__box-before-start {
  border-top: none;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--label {
  width: 0.65rem;
  min-width: 0.65rem;
  max-width: 0.65rem;
}
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--before,
.owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--after {
  width: 12.5%;
}
.owner-futsal-card .owner-compare-table--summary-only {
  table-layout: fixed;
  border-spacing: 0;
}
@media (max-width: 767px) {
  .owner-futsal-card .owner-compare-table-panel {
    overflow: visible;
  }
  .owner-futsal-card .owner-compare-table-wrap {
    max-width: 100%;
    margin: 0 -0.35rem;
    padding: 0 0.35rem 0.15rem;
    scroll-padding-inline: 0.35rem;
  }
  .owner-futsal-card .owner-compare-table--summary-only {
    table-layout: auto;
    width: max-content;
    min-width: 34rem;
  }
  .owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--label {
    width: 0.65rem;
    min-width: 0.65rem;
    max-width: 0.65rem;
  }
  .owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--before,
  .owner-futsal-card .owner-compare-table--summary-only .owner-compare-col--after {
    width: 4.25rem;
    min-width: 4.25rem;
  }
  .owner-futsal-card .owner-compare-table--details-open {
    min-width: 42rem;
    table-layout: auto;
    width: max-content;
  }
}
/* Toggle button */
.owner-futsal-card .owner-compare-details-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.owner-futsal-card .owner-compare-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1.5px solid #374151;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.owner-futsal-card .owner-compare-details-btn:hover {
  background: #374151;
  color: #fff;
}
/* Summary grid — mirror details-table cell colors and typography */
.owner-futsal-card .owner-compare-table tfoot .owner-compare-row--section-head-cell {
  background: #374151 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}
.owner-futsal-card .owner-compare-num--filled.owner-compare-summary-head-after {
  background: #374151 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}
.owner-futsal-card .owner-compare-table tfoot .owner-compare-summary-merged-label {
  background: #f3f4f6 !important;
  color: #374151 !important;
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  border-top: none;
  border-bottom: none;
}
/* Summary footer — solid before/after block edges (match details table) */
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-before-start {
  border-left: 2px solid #3b82f6;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-before-end {
  border-right: 2px solid #3b82f6;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-after-start {
  border-left: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-row--summary .owner-compare-table__box-after-end {
  border-right: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-summary-row--G > td {
  border-bottom: none;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-summary-row--G > td:first-child {
  border-bottom: 2px solid #3b82f6;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-summary-row--G > td:nth-child(n+2) {
  border-bottom: 2px solid #22c55e;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-summary-row--G > td:nth-child(2) {
  border-bottom-left-radius: 8px;
}
.owner-futsal-card .owner-compare-table tfoot tr.owner-compare-summary-row--G > td:last-child {
  border-bottom-right-radius: 8px;
}
.owner-futsal-card .owner-compare-num--cancelled {
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--onspot-pay {
  background: #fefce8;
  color: #854d0e;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-table tfoot .owner-compare-num--filled .owner-compare-num__label {
  color: #6b7280;
  opacity: 1;
}
.owner-futsal-card .owner-compare-num--filled {
  vertical-align: middle;
  padding: 5px 6px !important;
}
.owner-futsal-card .owner-compare-num__label {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b7280;
  opacity: 1;
  line-height: 1.2;
}
.owner-futsal-card .owner-compare-num__val {
  display: block;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.3;
}
/* background color aliases for detail rows (summary tfoot uses rules above) */
.owner-futsal-card .owner-compare-table tbody .owner-compare-num--filled.owner-compare-bg--cash {
  background: #dcfce7 !important;
  color: #15803d;
}
.owner-futsal-card .owner-compare-table tbody .owner-compare-num--filled.owner-compare-bg--bank {
  background: #dbeafe !important;
  color: #1d4ed8;
}
.owner-futsal-card .owner-compare-num--paid { color: #166534; }
.owner-futsal-card .owner-compare-num--due { font-weight: 700; color: #dc2626; }
.owner-futsal-card .owner-compare-num--new-pay { font-weight: 700; color: #2563eb; }
.owner-futsal-card .owner-compare-num--balance-due {
  background: #fecaca;
  color: #b91c1c;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--balance-zero {
  background: #bbf7d0;
  color: #15803d;
  font-weight: 700;
}
.owner-futsal-card .owner-compare-num--muted { color: #9ca3af; }
.owner-futsal-card .owner-compare-num--diff { font-weight: 700; }
.owner-futsal-card .owner-compare-num--gain { color: #15803d; }
.owner-futsal-card .owner-compare-num--loss { color: #dc2626; }
.owner-futsal-card .owner-compare-num__delta {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: #b45309;
  margin-top: 1px;
}
.owner-futsal-card .owner-compare-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.owner-futsal-card .owner-compare-status--confirmed { background: #dcfce7; color: #166534; }
.owner-futsal-card .owner-compare-status--cancelled { background: #fee2e2; color: #b91c1c; }
.owner-futsal-card .owner-compare-status--autocancel { background: #ffedd5; color: #c2410c; }
.owner-futsal-card .owner-compare-status--pending { background: #fef3c7; color: #92400e; }
.owner-futsal-card .owner-compare-status__was {
  display: block;
  margin-top: 3px;
  font-size: 0.625rem;
  color: #6b7280;
}
/* ── Compare tweets (summary stat chips) ─────────────────────────────── */
.owner-futsal-card .owner-compare-tweets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.owner-futsal-card .owner-compare-tweet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 13px;
  border-radius: 10px;
  min-width: 72px;
  text-align: center;
  flex: 1 1 72px;
  border: 1.5px solid transparent;
}
.owner-futsal-card .owner-compare-tweet__icon {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
}
.owner-futsal-card .owner-compare-tweet__label {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  line-height: 1.2;
  white-space: nowrap;
}
.owner-futsal-card .owner-compare-tweet__val {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.owner-futsal-card .owner-compare-tweet__sub {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.6;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 1px;
}
.owner-futsal-card .owner-compare-tweet-arrow {
  color: #9ca3af;
  font-size: 0.8rem;
  flex-shrink: 0;
  align-self: center;
}
.owner-futsal-card .owner-compare-tweet--before {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.owner-futsal-card .owner-compare-tweet--advance {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
.owner-futsal-card .owner-compare-tweet--cancelled {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.owner-futsal-card .owner-compare-tweet--new {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.owner-futsal-card .owner-compare-tweet--after {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}
.owner-futsal-card .owner-compare-tweet--collected {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}
.owner-futsal-card .owner-compare-tweet--onspot {
  background: #fefce8;
  color: #854d0e;
  border-color: #fde68a;
}
.owner-futsal-card .owner-compare-tweet--balance-due {
  background: #fecaca;
  color: #991b1b;
  border-color: #f87171;
}
.owner-futsal-card .owner-compare-tweet--balance-clear {
  background: #bbf7d0;
  color: #166534;
  border-color: #4ade80;
}
@media (max-width: 575px) {
  .owner-futsal-card .owner-compare-tweets {
    gap: 5px;
  }
  .owner-futsal-card .owner-compare-tweet {
    padding: 6px 10px;
    min-width: 60px;
  }
  .owner-futsal-card .owner-compare-tweet__val {
    font-size: 0.8rem;
  }
  .owner-futsal-card .owner-compare-tweet-arrow {
    font-size: 0.65rem;
  }
}
.owner-futsal-card .owner-hourly-panel {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  background: #fff;
}
.owner-futsal-card .owner-hourly-panel__head {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  padding: 10px 14px;
}
.owner-futsal-card .owner-hourly-panel__title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.owner-futsal-card .owner-hourly-table-wrap {
  padding: 0;
}
.owner-futsal-card .owner-hourly-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: #111827;
}
.owner-futsal-card .owner-hourly-table thead th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.owner-futsal-card .owner-hourly-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: middle;
}
.owner-futsal-card .owner-hourly-table tbody tr:last-child td {
  border-bottom: none;
}
.owner-futsal-card .owner-hourly-table tbody tr:nth-child(even) {
  background: #f9fafb;
}
.owner-futsal-card .owner-hourly-table__field {
  font-weight: 600;
  color: #1d4ed8;
}
.owner-futsal-card .owner-hourly-table tfoot td {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  font-weight: 700;
  padding: 10px 12px;
  border-top: 1px solid #a7f3d0;
}
.owner-futsal-card .owner-hourly-table__onspot {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #047857;
  margin-top: 2px;
}
.owner-futsal-card .owner-hourly-panel__empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.8125rem;
}
.owner-futsal-card .owner-expense-panel {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  background: #fff;
}
.owner-futsal-card .owner-expense-panel__head {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  padding: 10px 14px;
}
.owner-futsal-card .owner-expense-panel__title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.owner-futsal-card .owner-expense-panel__empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.8125rem;
}
.owner-futsal-card .owner-expense-types {
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
}
.owner-futsal-card .owner-expense-type {
  border-bottom: 1px solid #f0f1f3;
}
.owner-futsal-card .owner-expense-type:last-child {
  border-bottom: none;
}
.owner-futsal-card .owner-expense-type__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 2.5rem 12px 14px;
  background: #fff;
  border: none;
  box-shadow: none;
  color: #111827;
  font-size: 0.875rem;
}
.owner-futsal-card .owner-expense-type__toggle:not(.collapsed) {
  background: #fffbeb;
  color: #111827;
}
.owner-futsal-card .owner-expense-type__toggle::after {
  position: absolute;
  right: 14px;
  flex-shrink: 0;
  margin-left: 0;
  filter: opacity(0.55);
}
.owner-futsal-card .owner-expense-type__toggle:focus {
  box-shadow: none;
  border: none;
}
.owner-futsal-card .owner-expense-type__header {
  position: relative;
}
.owner-futsal-card .owner-expense-type__name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: #111827;
  text-align: left;
}
.owner-futsal-card .owner-expense-type__amount {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 0.25rem;
  font-weight: 700;
  color: #b45309;
  white-space: nowrap;
  text-align: right;
}
.owner-futsal-card .owner-expense-type__body {
  padding: 0;
  background: #fafafa;
  border-top: 1px solid #f3f4f6;
}
.owner-futsal-card .owner-expense-detail-list {
  padding: 0;
}
.owner-futsal-card .owner-expense-table-wrap {
  padding: 0;
  overflow-x: auto;
}
.owner-futsal-card .owner-expense-type--total .owner-expense-type__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-top: 1px solid #fed7aa;
}
.owner-futsal-card .owner-expense-type--total .owner-expense-type__name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #9a3412;
}
.owner-futsal-card .owner-expense-type--total .owner-expense-type__amount {
  font-size: 0.9375rem;
  color: #c2410c;
}
.owner-futsal-card .owner-expense-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: #111827;
}
.owner-futsal-card .owner-expense-table thead th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.owner-futsal-card .owner-expense-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: middle;
}
.owner-futsal-card .owner-expense-table tbody tr:nth-child(even) {
  background: #fff;
}
.owner-futsal-card .owner-expense-table tbody tr:nth-child(odd) {
  background: #f9fafb;
}
.owner-futsal-card .owner-expense-table__detail {
  font-weight: 600;
  color: #111827;
  min-width: 100px;
}
.owner-futsal-card .owner-expense-table__amount-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.owner-futsal-card .owner-expense-table__amount strong {
  color: #c2410c;
  font-size: 0.875rem;
  line-height: 1.2;
}
.owner-futsal-card .owner-expense-table__mode {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.3;
}
.owner-futsal-card .owner-expense-table__mode--cash {
  background: #dcfce7;
  color: #166534;
}
.owner-futsal-card .owner-expense-table__mode--bank {
  background: #dbeafe;
  color: #1d4ed8;
}
.owner-futsal-card .owner-expense-table__date {
  color: #374151;
  font-size: 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}
.owner-futsal-card .owner-expense-table__date-main {
  display: block;
  font-weight: 600;
  color: #111827;
}
.owner-futsal-card .owner-expense-table__date-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: #6b7280;
}
.owner-futsal-card .owner-expense-table__actions-col {
  width: 44px;
  text-align: right;
  vertical-align: middle;
}
.owner-futsal-card .owner-expense-table__delete {
  padding: 0.15rem 0.35rem;
  line-height: 1;
}
.owner-futsal-card .owner-expense-table__delete i {
  color: #dc2626;
}
.owner-futsal-card .owner-expense-pagination {
  padding: 10px 12px 12px;
  border-top: 1px solid #f0f1f3;
  background: #fafafa;
}
.owner-futsal-card .owner-expense-pagination .pagination-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.owner-futsal-card .owner-expense-pagination__meta,
.owner-futsal-card .owner-booking-pagination__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.owner-futsal-card .owner-booking-pagination {
  padding: 10px 12px 12px;
  border-top: 1px solid #f0f1f3;
  background: #fafafa;
}
.owner-futsal-card .owner-booking-pagination .pagination-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.owner-futsal-card .owner-booking-pagination .page-numbers,
.owner-futsal-card .owner-expense-pagination .page-numbers {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  margin: 0;
  cursor: pointer;
}
.owner-futsal-card .owner-booking-pagination .page-numbers:hover,
.owner-futsal-card .owner-expense-pagination .page-numbers:hover {
  background-color: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}
.owner-futsal-card .owner-booking-pagination .page-numbers.current,
.owner-futsal-card .owner-expense-pagination .page-numbers.current {
  background-color: #111827;
  color: #fff !important;
  border-color: #111827;
}
.owner-futsal-card .owner-booking-pagination select.page-numbers,
.owner-futsal-card .owner-expense-pagination select.page-numbers {
  width: auto;
  min-width: 3rem;
  height: 2rem;
  line-height: normal;
  border-radius: 8px;
  padding: 0 1.5rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  vertical-align: middle;
}
.owner-futsal-card .owner-booking-pagination select.page-numbers:hover,
.owner-futsal-card .owner-booking-pagination select.page-numbers:focus,
.owner-futsal-card .owner-expense-pagination select.page-numbers:hover,
.owner-futsal-card .owner-expense-pagination select.page-numbers:focus {
  background-color: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23111827' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
}
.owner-booking-pagination--standalone {
  padding: 10px 12px 12px;
  border-top: 1px solid #f0f1f3;
  background: #fafafa;
}
.owner-booking-pagination--standalone .pagination-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.owner-booking-pagination--standalone .owner-booking-pagination__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}
.owner-booking-pagination--standalone .page-numbers {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  margin: 0;
  cursor: pointer;
}
.owner-booking-pagination--standalone .page-numbers:hover {
  background-color: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}
.owner-booking-pagination--standalone .page-numbers.current {
  background-color: #111827;
  color: #fff !important;
  border-color: #111827;
}
.owner-booking-pagination--standalone select.page-numbers {
  width: auto;
  min-width: 3rem;
  height: 2rem;
  line-height: normal;
  border-radius: 8px;
  padding: 0 1.5rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  vertical-align: middle;
}
.owner-booking-pagination--standalone select.page-numbers:hover,
.owner-booking-pagination--standalone select.page-numbers:focus {
  background-color: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23111827' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
}
.owner-futsal-card .owner-futsal-summary-section .text-muted {
  color: #6b7280 !important;
}
.owner-futsal-quick-tile {
  border: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: #fff;
}
.owner-futsal-quick-tile__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.88;
  margin-bottom: 1px;
}
.owner-futsal-quick-tile__value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.owner-futsal-quick-tile__sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.82;
  margin-top: 3px;
}
.owner-futsal-quick-tile--primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.owner-futsal-quick-tile--success { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.owner-futsal-quick-tile--teal { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.owner-futsal-quick-tile--danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.owner-futsal-quick-tile--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}
.owner-futsal-quick-tile--warning .owner-futsal-quick-tile__label,
.owner-futsal-quick-tile--warning .owner-futsal-quick-tile__value {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box {
  border: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box__label,
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box__value,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__label,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__value {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box__value {
  font-size: 1.45rem;
  line-height: 1.1;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--warning .admin-booking-stat-box__label,
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--warning .admin-booking-stat-box__value {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--static {
  cursor: default;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--static:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  filter: none;
  transform: none;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--danger .admin-booking-stat-box__label,
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--danger .admin-booking-stat-box__value {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box--success {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-booking-stat-box:not(.admin-booking-stat-box--static):hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  filter: brightness(1.05);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--primary {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--success {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--danger {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--primary .admin-income-stat-box__value,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__value,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__value {
  font-size: 1.45rem;
  line-height: 1.1;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__value--positive,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__value--negative {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__meta {
  color: rgba(255, 255, 255, 0.82);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__due {
  color: #dc2626;
  font-weight: 700;
  font-size: 0.72rem;
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 2px;
  display: inline-block;
  line-height: 1.35;
}
.owner-futsal-card .owner-futsal-quick-tile--danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__label,
.owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__value {
  color: #fff;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__tap-hint {
  color: rgba(255, 255, 255, 0.9);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--danger .admin-income-stat-box__tap-hint {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 1;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--danger.admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint {
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-hint,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-hint,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-actions-note:not(:empty),
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-actions-note:not(:empty) {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 1;
  margin-top: 0;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.owner-futsal-card .owner-futsal-summary-section button.admin-income-stat-box__tap-hint {
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit button.admin-income-stat-box__tap-hint:hover,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss button.admin-income-stat-box__tap-hint:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__tap-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  width: 100%;
  padding-top: 4px;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss {
  min-height: 96px;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__tap-actions-note:empty {
  display: none;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__label,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__label {
  color: rgba(255, 255, 255, 0.88);
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--clickable:hover {
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.28);
  filter: brightness(1.05);
}

/* Admin futsal summary — compact modal (removed duplicate block below) */
.admin-income-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-income-stat-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  background: #fff;
}
.admin-income-stat-box--primary {
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  border-color: #bae6fd;
}
.admin-income-stat-box--primary .admin-income-stat-box__label { color: #0369a1; }
.admin-income-stat-box--success {
  background: linear-gradient(135deg, #ecfdf5 0%, #f6fef9 100%);
  border-color: #a7f3d0;
}
.admin-income-stat-box--success .admin-income-stat-box__label { color: #047857; }
.admin-income-stat-box--danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fff8f8 100%);
  border-color: #fecaca;
}
.admin-income-stat-box--danger .admin-income-stat-box__label { color: #b91c1c; }
.admin-income-stat-box--profit {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border-color: #86efac;
}
.admin-income-stat-box--profit .admin-income-stat-box__label { color: #15803d; }
.admin-income-stat-box--loss {
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border-color: #fca5a5;
}
.admin-income-stat-box--loss .admin-income-stat-box__label { color: #b91c1c; }
.admin-income-stat-box--clickable {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.admin-income-stat-box--clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
  border-color: #f87171;
}
.admin-income-stat-box__tap-hint {
  font-size: 0.65rem;
  font-weight: 600;
  color: #dc3545;
  margin-top: auto;
  opacity: 0.85;
}
.admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint {
  opacity: 1;
}
.admin-income-stat-box__spinner:empty {
  display: none;
}
.admin-income-stat-box__inline-spinner:empty {
  display: none;
}
.admin-income-stat-box__inline-spinner .spinner-border-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 0.15em;
  vertical-align: -0.1em;
}
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--danger .admin-income-stat-box__inline-spinner .spinner-border-sm,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__inline-spinner .spinner-border-sm,
.owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__inline-spinner .spinner-border-sm {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.owner-futsal-pending-resolution {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #fff8e1;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  font-size: 12px;
}
.owner-futsal-pending-resolution__label {
  font-weight: 600;
  color: #92400e;
}
.owner-futsal-pending-resolution__value {
  color: #78350f;
}
.admin-booking-stat-box__label .spinner-border-sm,
.admin-income-stat-box__label .spinner-border-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 0.15em;
  vertical-align: -0.1em;
}
.admin-income-stat-box__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #495057;
}
.admin-income-stat-box__value {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  color: #111827;
}
.admin-income-stat-box__value--positive {
  color: #198754;
}
.admin-income-stat-box__value--negative {
  color: #dc3545;
}
.admin-income-stat-box__meta {
  font-size: 0.68rem;
  color: #6c757d;
  line-height: 1.35;
}
.admin-income-stat-box__due {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc3545;
  margin-top: 2px;
}

/* Admin futsal loaders */
.admin-futsal-list-loader__row {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 0.7fr 0.9fr;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #f3f4f6;
}
.admin-futsal-summary-loader__boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 480px) {
  .admin-futsal-summary-loader__boxes--bookings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.admin-futsal-summary-loader__box {
  height: 64px;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
}
.admin-futsal-filter-pill--loading {
  opacity: 0.72;
  pointer-events: none;
  position: relative;
  padding-right: 2rem;
}
.admin-futsal-filter-pill--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(17, 24, 39, 0.15);
  border-top-color: #111827;
  border-radius: 50%;
  animation: booking-loader-spin 0.7s linear infinite;
}
.admin-futsal-filter-pill.active.admin-futsal-filter-pill--loading::after {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.admin-futsal-row--loading {
  opacity: 0.65;
  pointer-events: none;
}
.admin-futsal-row--loading .admin-futsal-status-select {
  background-image: none;
}
.admin-futsal-status-loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  border: 2px solid rgba(17, 24, 39, 0.15);
  border-top-color: #111827;
  border-radius: 50%;
  animation: booking-loader-spin 0.7s linear infinite;
}
.admin-section-loader {
  min-height: 72px;
}
.admin-futsal-summary-loading .modal-footer .btn {
  pointer-events: none;
  opacity: 0.65;
}

/* Owner profile — compact filters */
.owner-filters-panel {
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  background: #fff;
  border-width: 2px !important;
}
.owner-filters-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.owner-filters-head-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  list-style: none;
}
.owner-filters-panel .owner-filters-title {
  font-size: 15px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
.owner-filters-panel .owner-filters-title::before {
  display: none;
}
.owner-filter-pills {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* Mobile/tablet: 4 pills + 3 pills on two rows */
.owner-filter-pills > .nav-item:nth-child(-n+4) {
  grid-column: span 3;
}
.owner-filter-pills > .nav-item:nth-child(n+5) {
  grid-column: span 4;
}
.owner-filter-pills > .nav-item {
  margin: 0;
  min-width: 0;
}
.owner-filter-pills .nav-link {
  display: block;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.owner-filter-pills .nav-item.bg-danger .nav-link,
.owner-filter-pills .nav-item.bg-danger .nav-link:hover {
  color: #fff;
  background: #e8192c;
  border-color: #e8192c;
}
.owner-filter-pills .nav-link:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.owner-filters-custom-wrap {
  margin: 0;
  list-style: none;
}
.owner-filters-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "filter-date filter-dropdown"
    "filter-range filter-range";
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
#filter-date {
  grid-area: filter-date;
  min-width: 0;
}
#filter-dropdown {
  grid-area: filter-dropdown;
  min-width: 0;
}
#filter-range {
  grid-area: filter-range;
  min-width: 0;
}
.owner-filter-row {
  margin: 0;
  list-style: none;
  min-width: 0;
}
.owner-filter-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.owner-filter-sep {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.owner-filter-ico {
  color: #9ca3af;
  font-size: 16px;
  flex-shrink: 0;
}
.owner-filter-month,
.owner-filter-year {
  min-width: 0;
  flex: 1 1 0;
  padding-left: 8px;
  padding-right: 26px;
}
.owner-filter-row .form-select-sm,
.owner-filter-row .form-control {
  font-size: 13px;
  padding-top: 6px;
  padding-bottom: 6px;
  height: 34px;
}
.owner-filter-input {
  width: 100%;
}
.owner-filter-input .form-control {
  font-size: 13px;
  flex: 1;
  width: auto;
  min-width: 0;
}
.owner-filter-submit,
.owner-filter-input .btn {
  padding: 6px 10px;
  line-height: 1.2;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .owner-filters-head-row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .owner-filter-pills {
    flex: 1;
  }
}
@media (min-width: 992px) {
  .owner-filter-pills {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .owner-filter-pills > .nav-item:nth-child(-n+4),
  .owner-filter-pills > .nav-item:nth-child(n+5) {
    grid-column: auto;
  }
  .owner-filter-pills .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }
  .owner-filters-custom {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(180px, 1fr);
    grid-template-areas: "filter-date filter-range filter-dropdown";
    gap: 12px;
  }
}

/* Owner pending summary panel */
.owner-date-load-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: #0d6efd;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.owner-date-load-all:hover {
  color: #0a58ca;
}
.owner-date-load-all:disabled {
  opacity: 0.72;
  cursor: wait;
}
.owner-date-load-all__text {
  font-size: 1.25rem;
}
.owner-date-load-all__icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Owner pending summary panel — white background, modern tiles */
.owner-pending-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  padding: 0.85rem 1rem 1rem;
}
.owner-pending-panel .skel {
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
  border: none;
}
.owner-pending-panel .skel::after {
  display: none;
}
.owner-pending-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eef0f3;
}
.owner-pending-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}
.owner-pending-panel__title i {
  color: #e63946;
  font-size: 1.1rem;
}
.owner-pending-panel .pending-header-tools {
  margin-left: 0;
}
.owner-pending-panel .pending-backup-wa-btn {
  color: #6b7280;
}
.owner-pending-panel .pending-backup-wa-btn:hover,
.owner-pending-panel .pending-backup-wa-btn:focus {
  color: #16a34a;
}
.owner-pending-section {
  margin-bottom: 0.25rem;
}
.owner-pending-section__head {
  margin-bottom: 0.55rem;
}
.owner-pending-section__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b45309;
  line-height: 1.2;
}
.owner-pending-section__title i {
  font-size: 0.95rem;
  color: #d97706;
}
.owner-pending-section__title-skel {
  width: 88px;
  height: 18px;
  border-radius: 6px;
}
.owner-pending-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.owner-pending-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.owner-pending-card--idle {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 55%, #e5e7eb 100%);
  border-color: #dbe1ea;
  color: #475569;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.owner-pending-card--idle:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8edf3 55%, #dde3ec 100%);
  border-color: #cbd5e1;
}
.owner-pending-card--active {
  background: linear-gradient(135deg, #fef08a 0%, #facc15 45%, #f59e0b 100%);
  border-color: #eab308;
  color: #1f2937;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.45), 0 6px 18px rgba(245, 158, 11, 0.35);
}
.owner-pending-card--active:hover {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 45%, #f59e0b 100%);
  border-color: #ca8a04;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.55), 0 8px 22px rgba(245, 158, 11, 0.42);
}
.owner-pending-card__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 10px 6px;
  border: none;
  background: transparent;
  text-align: center;
  color: inherit;
  cursor: pointer;
}
.owner-pending-card__name {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
  text-align: center;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-pending-card--idle .owner-pending-card__name {
  color: #64748b;
}
.owner-pending-card--active .owner-pending-card__name {
  color: #78350f;
}
.owner-pending-card__value-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 2.4rem;
}
.owner-pending-card__value {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}
.owner-pending-card--idle .owner-pending-card__value {
  color: #94a3b8;
}
.owner-pending-card--active .owner-pending-card__value {
  color: #7c2d12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.owner-pending-card__spinner:empty {
  display: none;
}
.owner-pending-card__spinner .spinner-border-sm {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 0.15em;
}
.owner-pending-card__actions {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
  margin-top: auto;
}
.owner-pending-card__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.owner-pending-card__action--expense {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}
.owner-pending-card__action--onspot {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.owner-pending-card--active .owner-pending-card__action--expense {
  color: #dc2626;
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.82);
}
.owner-pending-card--active .owner-pending-card__action--onspot {
  color: #16a34a;
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.82);
}
.owner-pending-card__action--expense:hover {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}
.owner-pending-card__action--onspot:hover {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}
.owner-pending-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.owner-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}
.owner-pending-pill__name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-pending-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
}
.owner-pending-pill__spinner:empty {
  display: none;
}
.owner-pending-pill__spinner .spinner-border-sm {
  width: 0.8rem;
  height: 0.8rem;
  border-width: 0.15em;
}
.owner-autocancel-section__title {
  color: #c2410c;
}
.owner-autocancel-section__title i {
  color: #ea580c;
}
.owner-autocancel-panel {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #e5e7eb;
}
.owner-autocancel-section {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #e5e7eb;
}
.owner-autocancel-panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #374151;
}
.owner-autocancel-panel__title i {
  color: #e63946;
}
.owner-autocancel-panel__empty {
  font-size: 0.8125rem;
  color: #9ca3af;
}
.owner-autocancel-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.owner-autocancel-pills .owner-autocancel-pill {
  flex-shrink: 0;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff5f5;
  color: #991b1b;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.owner-autocancel-pills .owner-autocancel-pill:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  transform: translateY(-1px);
}
.owner-autocancel-pills .owner-pending-pill__name {
  color: #991b1b;
  max-width: 8rem;
}
.owner-autocancel-pills .owner-pending-pill__count {
  background: #ef4444;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}
@media (max-width: 767px) {
  .owner-pending-card__value {
    font-size: 1.85rem;
  }
}
@media (max-width: 991.98px) {
  .owner-autocancel-section .owner-autocancel-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
    -webkit-overflow-scrolling: auto;
  }
  .owner-autocancel-section .owner-autocancel-pills .owner-autocancel-pill {
    flex-shrink: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: space-between;
    padding: 8px 10px;
  }
  .owner-autocancel-section .owner-autocancel-pills .owner-pending-pill__name {
    max-width: none;
    flex: 1;
    min-width: 0;
  }
}

/* Quick summary tile skeletons — white theme (matches loaded quick-tile cards) */
.quick-summary-tiles .skel {
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
  border-radius: 0.375rem;
}
.quick-summary-tiles .skel::after {
  display: none;
}
.quick-summary-tiles .skel-tile {
  height: 62px;
  border: 2px solid #e5e7eb;
}

/* Load futsal panel skeletons — white theme */
.futsal-load-div .skel {
  background: linear-gradient(90deg, #f3f4f6 0%, #eceff3 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: admin-users-list-shimmer 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
}
.futsal-load-div .skel::after {
  display: none;
}
.futsal-load-div .skel-loadfutsal {
  min-height: 120px;
  border: 2px solid #e5e7eb;
}
.owner-section-loader {
  width: 100%;
}
.owner-section-loader--skeleton {
  padding: 0;
}
.owner-section-loader__skeleton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  overflow: hidden;
}
.owner-section-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}
.owner-section-loader__text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.3;
}
.quick-summary-tiles .owner-quick-summary-loader {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  padding: 2px 0 6px;
}

/* Manager profile — light theme */
.manager-profile-area {
  background-color: #f3f4f6;
}
.manager-profile-area .section-title h2 {
  color: #111827;
}
.mp-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}
.mp-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mp-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8192c 0%, #c1121f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mp-avatar-wrap i {
  font-size: 24px;
  color: #fff;
}
.mp-card__meta {
  min-width: 0;
}
.mp-name {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.mp-contact {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.mp-futsal {
  font-size: 12px;
  color: #e8192c;
  margin-top: 3px;
  font-weight: 600;
}
.mp-futsal i {
  vertical-align: -1px;
}
.mp-noti {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-noti i {
  color: #e8192c;
  font-size: 18px;
  flex-shrink: 0;
}
.mp-noti__text {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}
.mp-filters {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 12px;
  border: 2px solid #e8192c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.mp-filters__label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mp-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-pill {
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #f9fafb;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mp-pill:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.mp-pill.active {
  background: #e8192c;
  color: #fff;
  border-color: #e8192c;
}
.mp-date-filter .form-control {
  background: #fff;
  border-color: #e5e7eb;
  color: #111827;
  border-radius: 8px 0 0 8px;
}
.mp-date-filter .btn-danger {
  border-radius: 0 8px 8px 0;
}
.manager-booking-inline-list,
.customer-booking-inline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 991px) {
  .mp-sidebar-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .mp-card {
    padding: 14px 12px;
    flex: 1;
    min-width: 0;
  }
  .mp-filters {
    padding: 12px 10px;
    margin-top: 0;
    flex: 1;
    min-width: 0;
  }
  .mp-filter-pills {
    gap: 6px;
  }
  .mp-pill {
    font-size: 12px;
    padding: 5px 10px;
  }
  .manager-profile-area.pt-70 {
    padding-top: 20px !important;
  }
  .manager-profile-area .section-title.mb-45 {
    margin-bottom: 10px !important;
  }
  .manager-profile-area .section-title h2 {
    font-size: 20px !important;
  }
  .mp-avatar-wrap {
    width: 40px;
    height: 40px;
  }
  .mp-avatar-wrap i {
    font-size: 20px;
  }
  .mp-name {
    font-size: 15px;
  }
}

/* ── Phase 2: Booking add-on styles ────────────────────────────────────── */
.bct-addon {
  color: #16a34a;
  font-weight: 700;
}
.addon-info-bullets {
  margin: 4px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Base chip — can be <button> (plain) or <span> (split with ×) */
.aib-chip {
  display: inline-flex;
  align-items: center;
  width: 100%;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  border: 1px solid transparent;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.55);
  text-align: left;
  /* reset button styles when tag is <button> */
  padding: 0;
  cursor: default;
}
.aib-chip:hover { opacity: 0.85; border-color: rgba(255,255,255,0.2); }
/* Clickable body — fills chip, carries the icon + text */
.aib-chip-body {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 6px 10px;
  cursor: pointer;
}
/* Plain chips (<button>) get padding directly */
button.aib-chip { padding: 6px 10px; gap: 5px; cursor: pointer; }
/* × remove button */
.aib-chip-x {
  flex-shrink: 0;
  padding: 4px 8px 4px 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.aib-chip-x:hover { opacity: 1; }
.aib-chip i { font-size: 12px; flex-shrink: 0; }
/* Idle — add action */
.aib-chip--idle {
  color: rgba(255,255,255,0.5);
}
/* Available — upsell */
.aib-chip--available {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.12);
}
/* Free included — green */
.aib-chip--free {
  color: rgba(74,222,128,0.9);
  background: rgba(29,185,84,0.07);
  border-color: rgba(29,185,84,0.25);
}
/* Upsell nudge — amber */
.aib-chip--upsell {
  color: rgba(251,191,36,0.9);
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.25);
}
/* Selected / confirmed — green accent */
.aib-chip--selected {
  color: rgba(74,222,128,1);
  background: rgba(29,185,84,0.1);
  border-color: rgba(29,185,84,0.35);
  font-weight: 600;
}
/* Scope bar inside the modal */
.bam-scope-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 6px 10px;
  margin-bottom: 2px;
}
.bam-scope-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 5px;
}
.bam-scope-expand {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  transition: color 0.15s;
}
.bam-scope-expand:hover { color: rgba(255,255,255,0.85); }
.addon-info-bullets i {
  margin-right: 3px;
  font-size: 11px;
  opacity: 0.6;
}
.addon-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.addon-open-btn:hover {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  background: #222;
}
.addon-open-btn--active {
  border-color: rgba(29,185,84,0.45) !important;
  color: #4ade80 !important;
  background: rgba(29,185,84,0.08) !important;
}
.addon-open-btn--active:hover {
  border-color: rgba(29,185,84,0.7) !important;
  background: rgba(29,185,84,0.14) !important;
}
.addon-btn-change {
  opacity: 0.6;
  font-weight: 400;
  margin-left: 1px;
}
/* Booking addon modal body */
.bam-section {
  margin-bottom: 20px;
}
.bam-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bam-coolbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bam-coolbox-grid > :only-child { grid-column: 1 / -1; }
.bam-coolbox-grid .bam-block-card,
.bam-coolbox-grid .bam-court-line { margin-bottom: 0; }
.bam-block-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bam-block-card.bam-customer-marked {
  border-color: #fca5a5;
  background: #fff8f8;
}
.bam-badge-customer {
  display: inline-block;
  font-size: 10px;
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.bam-confirmed-locked {
  pointer-events: none;
  opacity: 0.72;
}
.bam-badge-confirmed {
  display: inline-block;
  font-size: 10px;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.bam-block-label {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}
.bam-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bam-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.bam-radio:hover { background: #f3f4f6; }
.bam-radio.bam-selected { background: #f0fdf4; border-color: #16a34a; }
.bam-radio.bam-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.bam-radio-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bam-radio-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bam-radio-sub  { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.bam-radio-sub-right { margin-left: auto; }
.bam-badge-taken { display:inline-block; font-size:10px; font-weight:600; padding:1px 5px; border-radius:4px; background:#fee2e2; color:#b91c1c; vertical-align:middle; margin:0 3px; }
.bam-hint-inline { font-size:11px; color:#b45309; margin:0 3px; }
.bam-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.bam-checkbox:hover { background: #f3f4f6; }
.bam-checkbox.bam-selected { background: #f0fdf4; border-color: #16a34a; }
.bam-checkbox--stack { align-items: flex-start; }
.bam-cb-lines { display: flex; flex-direction: column; gap: 2px; }
.bam-cb-line1 { font-weight: 600; }
.bam-cb-line2 { font-size: 13px; }
.bam-cb-line3 { font-size: 11px; opacity: .75; }
.bam-free-item {
  font-size: 12px;
  color: #16a34a;
  margin-bottom: 6px;
}
.bam-hint {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 4px;
}
.bam-hint-muted {
  font-size: 12px;
  color: #9ca3af;
}
.bam-price {
  font-size: 12px;
  font-weight: 700;
  color: #e8192c;
  white-space: nowrap;
}
.bam-price--selected {
  color: #15803d;
}
.bam-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bam-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bam-qty-btn {
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.bam-qty-btn:hover { border-color: #e8192c; background: #fff5f5; color: #e8192c; }
.bam-qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.bam-price-inline {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bam-gaming-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bam-gaming-label {
  font-size: 12px;
  color: #6b7280;
  min-width: 70px;
}
.bam-gaming-select {
  flex: 1;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  color: #111827;
  font-size: 13px;
  padding: 5px 8px;
  transition: border-color 0.15s;
}
.bam-gaming-select:focus { outline: none; border-color: #e8192c; }
.bam-gaming-price {
  font-size: 14px;
  font-weight: 700;
  color: #e8192c;
  margin-top: 4px;
  text-align: right;
}
.bam-remove-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.bam-remove-btn:hover { color: #e8192c; }

/* ── BAM summary bar ── */
.bam-summary-bar {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 12px 20px 10px;
}
.bam-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}
.bam-summary-row:last-child { border-bottom: none; }
.bam-sr-name { flex: 1; min-width: 0; }
.bam-sr-detail { color: #94a3b8; font-size: 12px; margin-left: 2px; }
.bam-sr-price { font-weight: 600; color: #e8192c; white-space: nowrap; flex-shrink: 0; }
.bam-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  border-top: 1px solid #d1d5db;
  margin-top: 8px;
  padding-top: 8px;
}
.bam-summary-total span:last-child { color: #e8192c; }

/* ── BAM compact redesign ───────────────────────────────── */

/* Slim header */
#BookingAddonModal .login-modal-header.bam-modal-header {
  padding: 10px 16px;
}
#BookingAddonModal .bam-modal-header .login-modal-icon {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
#BookingAddonModal .bam-modal-header .login-modal-title {
  font-size: 15px;
  line-height: 1.3;
}
#BookingAddonModal .bam-modal-header .login-modal-brand {
  gap: 10px;
}

/* Court collapsible line */
.bam-court-line {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  background: #fff;
}
.bam-court-line.bam-customer-marked { border-color: #fca5a5; background: #fff8f8; }
.bam-cline-hdr {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  gap: 8px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bam-cline-hdr:hover { background: #fafafa; }
.bam-court-line.bam-confirmed-locked .bam-cline-hdr { cursor: default; }
.bam-cline-meta {
  flex: 1;
  min-width: 0;
}
.bam-cline-court {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  display: block;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bam-cline-sep { color: #9ca3af; font-weight: 400; }
.bam-cline-sel-wrap {
  font-size: 12px;
  display: block;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bam-cline-meta .bam-badge-customer {
  display: inline-block;
  margin-left: 0;
  margin-top: 3px;
}
.bam-cline-std { color: #9ca3af; }
.bam-upgrade-hint { color: #b45309; font-size: 11px; }
.bam-cline-paid { color: #111827; font-weight: 600; }
.bam-cline-price { color: #e8192c; font-weight: 700; }
.bam-chevron {
  font-size: 18px;
  color: #9ca3af;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.bam-cline-open .bam-chevron { transform: rotate(180deg); }
.bam-cline-body {
  padding: 0 12px 10px;
  border-top: 1px solid #f3f4f6;
}

/* Flip radio emphasis: Standard muted, premium weighted, selected = RED */
.bam-radio.bam-selected { background: #fff5f5; border-color: #e8192c; }
.bam-radio--std { color: #9ca3af; font-weight: 400; }
.bam-radio--std:hover { background: #f9fafb; }
.bam-std-inc { font-size: 11px; color: #9ca3af; margin-left: 3px; }
.bam-radio--premium { font-weight: 500; color: #111827; }
.bam-radio--premium .bam-price { color: #e8192c; font-weight: 700; }
.bam-radio--premium.bam-selected { background: #fff5f5; border-color: #e8192c; }
.bam-radio--premium.bam-selected .bam-price { color: #b91c1c; }

/* Unified card style for non-racket addons (cool box, ball can, VR/PS5) */
.bam-block-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 6px;
  overflow: hidden;
}
.bam-block-label {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 0;
}
.bam-gaming-row { padding-left: 12px; padding-right: 12px; }
.bam-gaming-row:last-of-type { padding-bottom: 4px; }
.bam-gaming-price { padding: 0 12px 10px; margin-top: 2px; }
.bam-qty-row { padding: 8px 12px; }
.bam-free-item { padding: 6px 12px 2px; margin-bottom: 0; }
.bam-checkbox { padding: 6px 12px 10px; border-radius: 0; border: none; }
.bam-hint-muted { padding: 6px 12px 10px; }

.addon-game-change-notice {
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

/* ── P3: Read-only add-ons display on cancelled/auto-cancelled cards ── */
.owner-modal-addons-readonly {
  margin: 10px 16px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.owner-modal-addons-readonly__title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.owner-modal-addons-readonly__title i { margin-right: 4px; }
.owner-modal-addons-readonly__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #334155;
  padding: 3px 0;
}
.owner-modal-addons-readonly__row span:last-child {
  font-weight: 600;
  color: #e8192c;
}
.owner-modal-addons-readonly__scope {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}

/* ── Collapsible add-on section on booking cards ── */
.card-addons-wrap { margin: 10px 16px 6px; }
.card-addons-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: #475569;
  cursor: pointer; text-align: left; transition: background .15s;
}
.card-addons-toggle:hover { background: #f1f5f9; }
.card-addons-toggle.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.card-addons-toggle > i:first-child { color: #94a3b8; font-size: 14px; flex-shrink: 0; }
.card-addons-label { flex: 1; }
.card-addons-chevron { margin-left: auto; flex-shrink: 0; transition: transform .2s; color: #94a3b8; }
.card-addons-toggle.is-open .card-addons-chevron { transform: rotate(180deg); }
.card-addons-list {
  background: #f8fafc; border: 1px solid #e2e8f0; border-top: none;
  border-radius: 0 0 8px 8px; padding: 4px 12px 8px;
}
.card-addon-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid #f1f5f9;
  font-size: 13px; color: #334155;
}
.card-addon-row:last-child { border-bottom: none; }
.card-addon-row__name { flex: 1; min-width: 0; }
.card-addon-row__price { font-weight: 600; color: #e8192c; white-space: nowrap; flex-shrink: 0; }
.card-addon-row__status { font-size: 11px; color: #f59e0b; font-weight: 500; }
.card-addon-row__status--na { color: #94a3b8; font-style: italic; }
.card-addon-row--disabled .card-addon-row__name { opacity: .65; }
.card-addon-row__remove {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 2px 4px; line-height: 1; font-size: 16px; border-radius: 4px;
  transition: color .15s, background .15s; flex-shrink: 0;
}
.card-addon-row__remove:hover { color: #e8192c; background: #fee2e2; }
.card-addon-row__locked { color: #94a3b8; font-size: 13px; padding: 2px 4px; flex-shrink: 0; }

/* Per-court add button in slot rows — matches .bcs-field-remove size/shape, green */
.bcs-court-add-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 6px;
  background: rgba(74,222,128,0.18); color: #4ade80;
  font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.bcs-court-add-btn:hover { background: #4ade80; color: #fff; }

/* Ball-can ADDED split chip (green confirmed + amber nudge) */
.aib-chip--bc-added {
  color: rgba(74,222,128,0.9);
  background: rgba(29,185,84,0.07);
  border-color: rgba(29,185,84,0.15);
}
.aib-bc-confirmed { color: rgba(74,222,128,0.9); }
.aib-bc-nudge { color: rgba(251,191,36,0.9); }

/* ── bct-addon row (Add-ons line in booking totals) ── */
.bct-addon { color: #0ea5e9; }
.bct-addon span:last-child { font-weight: 700; }

/* ── bsm-addons: add-on detail section in Review/Success modals ── */
.bsm-addons {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
}
.bsm-addons-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.bsm-addon-row {
  padding: 2px 0;
  line-height: 1.4;
}
.bsm-addon-free { color: #16a34a; }
.bsm-addon-paid { color: #334155; font-weight: 600; }
.bsm-addon-scope {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}