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

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

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

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

CSS STRUCTURE:

1. VARIABLES

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

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

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

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


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

  /* bootstrap color-scheme */
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #EAE5DD;
  --bs-gray-300: #DCDCDC;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-body-color-rgb: 53, 53, 53;
  --bs-primary-rgb: 209, 104, 6;
  --bs-secondary-rgb: 249, 246, 243;
}

/* Fonts */
:root {
  --heading-font: "Cormorant Upright", serif;
  --body-font: "Sora", sans-serif;
}

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

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

html {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

/* - Outline Buttons
--------------------------------------------------------------*/
.btn-outline-primary {
  --bs-btn-color: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--dark-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--dark-color);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary-color);
  --bs-gradient: none;
}

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

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

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

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

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

/* - Disabled Button Styles (Cross-browser compatibility)
------------------------------------------------------------- */
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(50%) !important;
  -webkit-filter: grayscale(50%) !important;
  -moz-filter: grayscale(50%) !important;
  -ms-filter: grayscale(50%) !important;
  -o-filter: grayscale(50%) !important;
}

.btn:disabled:hover,
.btn[disabled]:hover,
button:disabled:hover,
button[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Specific styling for pay and book button */
#payAndBookBtn:disabled,
#payAndBookBtn[disabled] {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

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

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

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

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

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

select:focus {
  box-shadow: none;
}

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

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

svg.color {
  color: #ECB27B;
}

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

svg.social {
  color: #ECB27B;
}

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



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

/* room */
.room-swiper .swiper-wrapper {
  justify-content: center;
}

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

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

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

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

.gallery-swiper .swiper-slide {
  height: 500px; /* Set a fixed height for consistent slide size */
}

.gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images fill the container without distortion */
  border-radius: 1rem; /* Maintain the rounded corners */
}

/* Gallery image overlay */
.gallery-swiper .swiper-slide .image-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.gallery-swiper .swiper-slide .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 1rem; /* Match the image border radius */
}

.gallery-swiper .swiper-slide:hover .image-overlay {
  opacity: 1; /* Show overlay on hover */
}

.gallery-swiper .swiper-slide .enlarge-text {
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

.month br {
  display: none;
}

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


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

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

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

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

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


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

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

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


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

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

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


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

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

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

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

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

  100% {
    transform: scale(1.1);
  }

}

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


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

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

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

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


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

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

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

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



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

/* accordian style override  */

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

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

.accordion-button {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

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

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

/*--------------------------------------------------------------
5.7 Invite Code Modal & Payment Page Styles 
--------------------------------------------------------------*/

/* Invite Code Modal */
.modal-content {
  border: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.modal-header .btn-close {
  background-color: transparent;
  opacity: 0.7;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

#inviteCodeInput {
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
}

#inviteCodeInput::placeholder {
  font-weight: normal;
  letter-spacing: normal;
}

.invalid-feedback {
  display: none;
}

.form-control.is-invalid {
  border-color: #dc3545;
  background-image: none;
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Payment Page Styles */
.payment-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
}

.payment-container {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.booking-summary {
  border-left: 4px solid var(--primary-color);
}

.payment-option .payment-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #e9ecef;
}

.payment-option .payment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.payment-option .payment-card.border-primary {
  border-color: var(--primary-color) !important;
  background-color: rgba(200, 129, 95, 0.05);
}

.payment-option .payment-card.border-primary .payment-logo img {
  max-height: 35px;
  object-fit: contain;
}

/* Payment option layout and spacing */

.payment-option .payment-card .card-body label {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important; /* extra spacing between radio, logo and text on desktop */
  width: 100% !important;
}

.payment-option .payment-card .card-body label input[type="radio"] {
  flex-shrink: 0;
  margin-inline-end: 0.8rem !important; /* ensure distance between radio & logo/text */
  position: relative; /* allow z-index to take effect */
  z-index: 3;
}

.payment-option .payment-card .payment-logo {
  flex-shrink: 0;
  width: 72px; /* give logos more space to avoid overlapping the radio */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 0.5rem;
  position: relative;
  z-index: 1;
}

.payment-option .payment-card .payment-logo img {
  max-height: 36px !important; /* ensure logo sizing for payment card only */
  width: auto;
  display: block;
}

.payment-option .payment-card .card-body label > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.payment-option .payment-card .card-body label > div:last-child h6 {
  margin-bottom: 0.15rem;
}

.payment-option .payment-card .card-body label > div:last-child small.text-muted {
  display: block;
  margin-top: 0;
  color: #6c757d;
}

@media (max-width: 576px) {
  .payment-option .payment-card .card-body label {
    gap: 0.4rem;
  }

  .payment-option .payment-card .payment-logo {
    width: 34px;
  }

  .payment-option .payment-card .payment-logo img {
    max-height: 22px;
  }

  .payment-option .payment-card .card-body label h6 {
    font-size: 0.95rem;
  }

  .payment-option .payment-card .card-body label small {
    font-size: 12px;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.customer-details .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(200, 129, 95, 0.25);
}

/* Success Modal */
.modal-body .text-success svg {
  filter: drop-shadow(0 4px 8px rgba(40, 167, 69, 0.3));
}

/* Loading State */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Payment Button States */
#proceedPaymentBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Guest Details Section */
.guest-counter {
  background: rgba(200, 129, 95, 0.15);
  border-radius: 50px;
  padding: 0.5rem 0.75rem; /* reduced to better match smaller buttons */
  border: 2px solid rgba(200, 129, 95, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.guest-btn-minus, .guest-btn-plus {
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-color) !important;
  background-color: white !important;
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Reduce overall size by 50% compared to original btn-sm appearance */
  width: 24px;
  height: 24px;
  padding: 0;
  border-width: 1.5px !important;
  font-size: 0.75rem !important;
}

.guest-btn-minus:hover:not(:disabled), 
.guest-btn-plus:hover:not(:disabled) {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(200, 129, 95, 0.3);
}

.guest-btn-minus:disabled, .guest-btn-plus:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #6c757d !important;
}

.guest-item {
  transition: all 0.3s ease;
  border-color: #e9ecef !important;
  position: relative;
}

.guest-item:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 15px rgba(200, 129, 95, 0.1);
}

.guest-item[data-guest="1"] {
  background: linear-gradient(135deg, rgba(200, 129, 95, 0.05) 0%, rgba(200, 129, 95, 0.02) 100%);
  border-color: var(--primary-color) !important;
}

.remove-guest {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
}

.remove-guest:hover {
  transform: scale(1.1);
}

/* Billing Section */
.billing-details {
  border-top: 2px solid #f8f9fa;
  padding-top: 2rem;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(200, 129, 95, 0.25);
}

.required-section {
  position: relative;
}

.required-section::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #dc3545, #fd7e14);
  border-radius: 3px;
}

.required-indicator {
  font-weight: bold;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Enhanced Form Styling */
.guest-details .form-label,
.billing-details .form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(200, 129, 95, 0.25);
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Badge Styling */
.badge.bg-primary {
  background-color: var(--primary-color) !important;
}

/* Guest Count Display */
#currentGuestCount {
  font-size: 1.1rem; /* slightly smaller to balance the new button size */
  font-weight: bold;
  color: var(--primary-color);
  min-width: 2.4rem;
  text-align: center;
  background: white;
  padding: 0.25rem 0.35rem;
  border-radius: 12px;
  border: 1.5px solid var(--primary-color);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Animation for guest items */
.guest-item {
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .payment-container {
    margin: 1rem;
    padding: 2rem 1.5rem !important;
  }
  

  /* Make Check availability form more compact and responsive */
  #form {
    padding: 2rem 1.25rem !important; /* reduced from p-5 */
    max-width: 520px; /* keep it reasonably narrow on desktop */
    margin: 0 auto; /* center in column */
  }

  #form .display-5 {
    font-size: 1.35rem; /* smaller title */
    line-height: 1.25;
  }

  #form .col-lg-12.my-4,
  #form .col-lg-6.my-4,
  #form .col-md-6.my-4 {
    margin-top: 0.5rem !important; /* reduce vertical gaps */
    margin-bottom: 0.5rem !important; /* reduce vertical gaps */
  }

  .booking-summary {
    margin-bottom: 2rem;
  }

  #form .form-control {
    padding: 0.45rem 0.6rem; /* slightly reduced input height */
    height: auto;
  }

  #form .date {
    padding: 0.45rem 0.6rem;
  }

  
  .payment-logo img {
    max-height: 25px;
  }
  
  .guest-counter {
    flex-direction: column;
    text-align: center;
  }
  
  .guest-counter .btn {
    margin: 0.25rem 0;
  }
  
  .guest-item {
    margin-bottom: 1.5rem;
  }
  
  .required-section::before {
    display: none;
  }
}

.guest-btn-minus svg, .guest-btn-plus svg {
  width: 12px;
  height: 12px;
}

.guest-counter .btn {
  margin: 0 0.25rem;
}

@media (max-width: 480px) {
  .guest-btn-minus, .guest-btn-plus {
    width: 20px;
    height: 20px;
    border-width: 1px !important;
  }

  .guest-btn-minus svg, .guest-btn-plus svg {
    width: 10px;
    height: 10px;
  }

  #currentGuestCount {
    font-size: 1rem;
    min-width: 2rem;
    padding: 0.25rem 0.2rem;
  }
}

/* Calendar icon and picker z-index handling */
.calendar-icon-trigger, .calendar-icon-trigger svg, .calendar-icon-trigger use {
  cursor: pointer;
  pointer-events: auto;
  z-index: 3; /* low, so the picker always overlays it */
}

/* Ensure the date picker's popup displays above icons */
.datetime-container .picker {
  z-index: 9999 !important;
  position: absolute;
}

/* Also in case the plugin injects picker directly under the container
   ensure the container has a higher stacking context if needed */
.datetime-container {
  position: relative; /* ensures absolute .picker positions correctly */
}

/* Reduce spacing between the rooms/nights row (.row) and the subsequent Guests row
   specifically in the Check availability form (ID: #form). This lowers the top margin
   of the .col-lg-12.my-4 that appears right after any .row inside the form. */
#form .row + .col-lg-12.my-4 {
  margin-top: 0.5rem !important; /* reduce spacing above guests */
}

/* Reduce bottom margin of the columns inside the Rooms/Nights row to shrink spacing further */
#form .row > .col-lg-6.my-4,
#form .row > .col-md-6.my-4,
#form .row > [class*="col-"].my-4 {
  margin-bottom: 0.5rem !important; /* was 1.5rem (my-4) */
}

/* Swiper vertical stacking on small screens */
@media (max-width: 576px) {
  .room-swiper .swiper-wrapper {
    flex-direction: column !important;
    align-items: stretch;
  }

  .room-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reduce spacing between slides for mobile stacked view */
  .room-swiper .swiper-slide {
    margin-bottom: 0.75rem !important;
  }

  /* Ensure scroll isn't blocked by swiper's overflow settings */
  .room-swiper {
    overflow: visible !important;
  }

  /* Mobile-specific compact form sizing and layout */
  #form {
    max-width: 95% !important; /* expand a bit to use more horizontal space on mobile */
    padding: 1rem 0.75rem !important; /* slightly reduced padding to make it shorter */
  }

  /* Reduce vertical spacing between rows and controls */
  #form .col-lg-12.my-4,
  #form .col-lg-6.my-4,
  #form .col-md-6.my-4,
  #form .row > [class*="col-"].my-4 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Keep Rooms and Nights input side-by-side on very small screens */
  #form .row.rooms-nights-row {
    display: flex !important;
    gap: 0.5rem;
    align-items: center;
  }

  /* Ensure the individual columns take half the width and inputs don't overflow */
  #form .row.rooms-nights-row .col-lg-6,
  #form .row.rooms-nights-row .col-md-6,
  #form .row.rooms-nights-row [class*="col-"] {
    flex: 0 0 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
  }

  /* Slightly compress input height on mobile */
  #form .form-control {
    padding: 0.4rem 0.5rem;
    height: auto;
  }

  /* Slightly reduce label size to save vertical space */
  #form .form-label {
    font-size: 0.8rem;
  }

  /* Ensure the slide items are block level for stacked layout */
  .room-swiper .swiper-slide {
    display: block !important;
  }

  /* Reduce the large gap above payment page content on small screens */
  .payment-section.padding-large {
    padding-top: 2.5rem !important; /* much smaller top padding on mobile */
    padding-bottom: 2.5rem !important;
    min-height: auto !important; /* avoid full viewport min-height causing extra gap */
    align-items: flex-start !important; /* start from the top, don't center vertically */
  }
}

@media (min-width: 992px) {
  .payment-option .payment-card .card-body label {
    gap: 2rem !important; /* more space on desktop */
  }
  .payment-option .payment-card .payment-logo {
    width: 80px;
  }
  .payment-option .payment-card .card-body label input[type="radio"] {
    margin-inline-end: 1rem !important;
  }
}

/* Mobile layout: put the small.text-muted on a new line under the logo */
@media (max-width: 576px) {
  .payment-option .payment-card .card-body label {
    /* Use a small grid layout: radio | logo | title */
    display: grid !important;
    grid-template-columns: auto 40px 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem 0.6rem;
    align-items: center;
  }

  .payment-option .payment-card .card-body label > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .payment-option .payment-card .payment-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  /* Allow the text container to be flattened into the grid for flexible placement */
  /* The payment-text wrapper will be in column 3 row 1 */
  .payment-option .payment-card .card-body label > .payment-text {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .payment-option .payment-card .card-body label > .payment-text h6 {
    margin-bottom: 0.1rem;
  }

  /* Place the small text under the logo specifically */
  .payment-option .payment-card .card-body label > small {
    /* span both logo and title columns so the description has room to wrap naturally */
    grid-column: 2 / 4;
    grid-row: 2;
    display: block;
    width: 100%;
    margin-top: 0.15rem;
    color: #6c757d;
    justify-self: start; /* left align so we get a normal wrapping flow */
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Also apply to slightly larger devices like small tablets (landscape) */
@media (max-width: 768px) {
  .payment-option .payment-card .card-body label {
    display: grid !important;
    grid-template-columns: auto minmax(40px, 56px) 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem 0.6rem;
    align-items: center;
  }

  .payment-option .payment-card .card-body label > .payment-text {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .payment-option .payment-card .card-body label > small {
    grid-column: 2 / 4;
    grid-row: 2;
    display: block;
    width: 100%;
    margin-top: 0.15rem;
    color: #6c757d;
    justify-self: start;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}