/*
 * South Beach Resort - Mobile-First Stylesheet
 * Built with CSS Grid & Flexbox
 *
 * Breakpoints:
 * - Base: 320px+ (mobile)
 * - sm: 576px+ (small tablets)
 * - md: 768px+ (tablets)
 * - lg: 992px+ (desktop)
 * - xl: 1200px+ (large desktop)
 */

/* ===================
   CSS Reset & Base
   =================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================
   Typography
   =================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-dark);
}

/* ===================
   Standardized Typography Scale
   h1: 48px (hero titles)
   h2: 36px (section titles, Playball)
   h3: 24px (subheadings)
   h4-h6: 16-18px (small headings)
   body: 16px
   small: 14px
   =================== */

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

h4, h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* Tablet+ */
@media (min-width: 768px) {
  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }
}

/* Desktop */
@media (min-width: 992px) {
  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }
}

p {
  margin: 0 0 var(--space-4);
  color: var(--color-gray);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
  text-decoration: none;
  outline: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Accent font class */
.font-accent {
  font-family: var(--font-accent);
}

/* ===================
   Layout Container
   =================== */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 576px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 992px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ===================
   Utility Classes
   =================== */

/* Flex Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Image Hover Zoom Effect */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform var(--transition-slow);
}

.img-hover-zoom:hover img {
  transform: scale(1.05);
}

/* Overlay Base */
.overlay-base {
  position: absolute;
  inset: 0;
}

/* ===================
   Base Component Styles
   (Multi-selector rules for shared styles)
   =================== */

/* Card Base - shared by all card components */
.room-card,
.news-card,
.testimonial-card,
.offer-card,
.room-wrapper,
.nroom-grid {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-base);
}

/* Card Hover Effect */
.room-card,
.news-card,
.room-wrapper {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.room-card:hover,
.news-card:hover,
.room-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Social Icon Base */
.footer-social a,
.about-us-widget .nav a,
.footer-wrapper .widget.about-us-widget .nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--overlay-white-light);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: background-color var(--transition-fast);
}

.footer-social a:hover,
.about-us-widget .nav a:hover,
.footer-wrapper .widget.about-us-widget .nav li a:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

/* Form Input Base */
.form-input,
.form-select,
.form-control,
.newsletter-input,
.select-menu,
.search-sec select {
  width: 100%;
  font-size: var(--text-base);
  color: var(--color-dark);
  background-color: var(--color-white);
  min-height: var(--touch-target-min);
}

.form-input:focus,
.form-select:focus,
.form-control:focus,
.newsletter-input:focus,
.select-menu:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ===================
   Buttons
   =================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: var(--touch-target-min);
}

.btn-primary {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--color-accent-hover);
  color: var(--color-dark);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* ===================
   Header & Navigation
   =================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  transition: background-color var(--transition-base);
}

.site-header.scrolled {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height-mobile);
  padding: 0 var(--space-4);
}

@media (min-width: 992px) {
  .header-inner {
    height: var(--header-height-desktop);
  }
}

/* Logo */
.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  height: 40px;
  width: auto;
}

@media (min-width: 992px) {
  .site-logo img {
    height: 50px;
  }
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}

.menu-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: relative;
  transition: transform var(--transition-base);
}

.menu-toggle .bar::before,
.menu-toggle .bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition-base);
}

.menu-toggle .bar::before {
  top: -7px;
}

.menu-toggle .bar::after {
  bottom: -7px;
}

@media (min-width: 992px) {
  .menu-toggle {
    display: none;
  }
}

/* Main Navigation */
.main-nav {
  display: none;
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary);
  padding: var(--space-6);
  overflow-y: auto;
}

.main-nav.is-open {
  display: block;
}

@media (min-width: 992px) {
  .main-nav {
    display: flex;
    position: static;
    background: none;
    padding: 0;
    overflow: visible;
  }
}

/* Nav List */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 992px) {
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}

/* Nav Item */
.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-base);
  min-height: var(--touch-target-min);
  transition: background-color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus {
  background-color: var(--overlay-light);
  color: var(--color-white);
}

@media (min-width: 992px) {
  .nav-link {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
}

/* Dropdown Arrow */
.nav-link .dropdown-arrow {
  margin-left: var(--space-2);
  transition: transform var(--transition-fast);
}

.nav-item.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}

.nav-item.is-open .dropdown-menu {
  display: block;
}

@media (min-width: 992px) {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: var(--space-2);
    background-color: var(--color-white);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
  }

  .nav-item:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu .nav-link {
    color: var(--color-gray-dark);
    font-size: var(--text-sm);
    text-transform: none;
  }

  .dropdown-menu .nav-link:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
  }
}

/* ===================
   Hero Section
   =================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--overlay-light) 0%,
    var(--overlay-medium) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-6);
  max-width: 800px;
}

.hero-title {
  font-family: var(--font-accent);
  font-size: var(--text-3xl);
  font-weight: var(--font-normal);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .hero-title {
    font-size: var(--text-5xl);
  }
}

.hero-subtitle {
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: var(--text-lg);
  }
}

/* Hero Controls */
.hero-controls {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-white-50);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.hero-dot.active,
.hero-dot:hover {
  background-color: var(--color-white);
}

/* ===================
   Booking Search Bar
   =================== */

.booking-bar {
  background-color: var(--overlay-dark);
  padding: var(--space-4);
}

@media (min-width: 992px) {
  .booking-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.booking-form {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 576px) {
  .booking-form {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .booking-form {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: var(--tracking-wide);
}

.form-input,
.form-select {
  /* Base styles from Form Input Base above */
  padding: var(--space-3);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-base);
  transition: border-color var(--transition-fast);
}

/* ===================
   Section Styles
   =================== */

.section {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
}

@media (min-width: 992px) {
  .section {
    padding: var(--space-20) 0;
  }
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .section-header {
    margin-bottom: var(--space-12);
  }
}

.section-title {
  margin-bottom: var(--space-2);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: var(--text-lg);
  }
}

/* ===================
   Room Cards Grid
   =================== */

.rooms-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 576px) {
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .rooms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .rooms-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Room Card */
.room-card {
  display: flex;
  flex-direction: column;
  /* Base styles from .room-card multi-selector above */
}

.room-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.room-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.room-card:hover .room-card-image img {
  transform: scale(1.05);
}

.room-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background-color: var(--color-primary);
}

.room-card-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
}

.room-card-price {
  text-align: right;
}

.room-card-price .label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-gray-light);
  text-transform: uppercase;
}

.room-card-price .amount {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-accent);
}

/* ===================
   Feature Section (Split)
   =================== */

.feature-split {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 992px) {
  .feature-split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
  }
}

.feature-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.feature-image img {
  width: 100%;
  height: auto;
}

.feature-content {
  padding: var(--space-4) 0;
}

@media (min-width: 992px) {
  .feature-content {
    padding: var(--space-8);
  }
}

/* ===================
   Promo Banner
   =================== */

.promo-banner {
  position: relative;
  padding: var(--space-12) 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(3, 35, 61, 0.9) 0%,
    rgba(3, 35, 61, 0.7) 100%
  );
}

.promo-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

@media (min-width: 768px) {
  .promo-banner {
    padding: var(--space-20) 0;
  }
}

.promo-title {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.promo-text {
  color: var(--color-white-90);
  margin-bottom: var(--space-6);
}

/* ===================
   News/Events Grid
   =================== */

.news-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  /* Base styles from .news-card multi-selector above */
}

.news-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-date {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-accent);
  border-radius: var(--radius-base);
  text-align: center;
  line-height: 1;
}

.news-card-date .day {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.news-card-date .month {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-dark);
}

.news-card-body {
  padding: var(--space-4);
}

.news-card-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.news-card-title a {
  color: var(--color-dark);
}

.news-card-title a:hover {
  color: var(--color-primary);
}

.news-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-gray);
}

/* ===================
   Newsletter Section
   =================== */

.newsletter {
  background-color: var(--color-primary);
  padding: var(--space-8) 0;
}

@media (min-width: 768px) {
  .newsletter {
    padding: var(--space-12) 0;
  }
}

.newsletter-inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 992px) {
  .newsletter-inner {
    grid-template-columns: 1fr auto;
  }
}

.newsletter-title {
  color: var(--color-white);
  margin: 0;
}

.newsletter-subtitle {
  color: var(--color-white-80);
  margin: var(--space-2) 0 0;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 576px) {
  .newsletter-form {
    flex-direction: row;
  }
}

.newsletter-input {
  /* Base styles from Form Input Base above */
  flex-grow: 1;
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-base);
}

.newsletter-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===================
   Footer
   =================== */

.site-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding-top: var(--space-12);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 576px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
}

.footer-widget {
  min-width: 0;
}

.footer-logo {
  max-width: 180px;
  margin-bottom: var(--space-4);
}

.footer-about {
  color: var(--color-white-70);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

/* .footer-social a - styles defined in Social Icon Base above */

.footer-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links a {
  color: var(--color-white-70);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-contact-item {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-white-70);
}

.footer-contact-item i {
  flex-shrink: 0;
  width: 20px;
  color: var(--color-accent);
}

.footer-contact-item a {
  color: var(--color-white-70);
}

.footer-contact-item a:hover {
  color: var(--color-accent);
}

/* Footer Bottom */
.footer-bottom {
  margin-top: var(--space-8);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--overlay-white-light);
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-white-50);
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom a {
  color: var(--color-white-70);
}

.footer-bottom a:hover {
  color: var(--color-accent);
}

/* ===================
   Sticky Bottom Bar (Mobile)
   =================== */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background-color: rgba(3, 35, 61, 0.95);
  padding: var(--space-2) var(--space-4);
  backdrop-filter: blur(8px);
}

.sticky-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-lg);
  margin: 0 auto;
}

.sticky-bar a {
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.sticky-bar a:hover {
  color: var(--color-accent);
}

/* ===================
   Utility Classes
   =================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.text-white {
  color: var(--color-white);
}

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

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

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ===================
   Tabs Component
   =================== */

.tabs {
  margin-bottom: var(--space-6);
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-gray-lighter);
  margin-bottom: var(--space-6);
}

.tab-button {
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}

.tab-button::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.tab-button:hover,
.tab-button.active {
  color: var(--color-dark);
}

.tab-button.active::after {
  transform: scaleX(1);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ===================
   Offer Card (Sidebar)
   =================== */

.offer-card {
  position: relative;
  /* Base styles from .offer-card multi-selector above */
}

.offer-card-image {
  aspect-ratio: 4 / 5;
}

.offer-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--overlay-dark) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}

.offer-card-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  border-radius: var(--radius-base);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.offer-card-badge span {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
}

.offer-card-title {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.offer-card-text {
  color: var(--color-white-80);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.offer-card-link {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

/* ===================
   Icon List
   =================== */

.icon-list {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 576px) {
  .icon-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.icon-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
}

.icon-list-item i {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ===================
   Side Menu (Mobile)
   =================== */

.side-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: var(--color-primary);
  z-index: var(--z-modal);
  overflow-y: auto;
  transition: right var(--transition-base);
  padding: var(--space-6);
}

.side-menu.is-open {
  right: 0;
}

.side-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-medium);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.side-menu-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.side-menu-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-xl);
  cursor: pointer;
}

.side-menu-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.side-menu-logo img {
  max-width: 60px;
  margin: 0 auto var(--space-2);
}

.side-menu-title {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-white);
}

.side-menu-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.side-menu-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.side-menu-contact {
  margin-bottom: var(--space-6);
}

.side-menu-contact a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-white);
  font-size: var(--text-sm);
}

/* ===================
   Slider Controls (owl-carousel replacement)
   =================== */

.slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-4);
  pointer-events: none;
}

.slider-prev,
.slider-next {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--overlay-medium);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--text-xl);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--transition-fast);
}

.slider-prev:hover,
.slider-next:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

/* ===================
   Bootstrap 5 Navigation Overrides
   =================== */

/* Push content below fixed header on inner pages */
body {
  padding-top: 110px;
}

/* Remove padding on pages with hero/carousel (index pages) */
body.has-hero {
  padding-top: 0;
}

/* Inner page header banner */
.final-inner-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-size: cover;
  background-position: center;
}

.final-inner-header .container {
  text-align: center;
}

.final-inner-header .this-title {
  margin: 0;
  letter-spacing: 0.3px;
  font-family: var(--font-accent);
  text-transform: capitalize;
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--color-white);
  text-shadow: 2px 2px 4px var(--overlay-medium);
}

/* Inner page breadcrumb - gray divider bar */
/* Grey spacer bar above header image */
.header-spacer-bar {
  background: #f9f9f9;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  padding: var(--space-2) 0;
  height: 20px;
}

/* Grey bar below header image */
.final-breadcrumb {
  background: #f9f9f9;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  padding: var(--space-2) 0;
  height: 20px;
}

.final-breadcrumb .breadcrumb {
  display: none;
}

/* Inner border to match footer */
#main-navigation-wrapper .nav-inner-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: var(--space-4);
}

#main-navigation-wrapper.stricky.stricky-fixed {
  background-color: var(--color-primary) !important;
  box-shadow: var(--shadow-md);
}

#main-navigation-wrapper .navbar-brand img {
  height: 50px;
  width: auto;
}

@media (max-width: 991.98px) {
  #main-navigation-wrapper .navbar-brand img {
    height: 40px;
  }
}

/* Nav links styling */
#main-navigation-wrapper .nav-link {
  color: var(--color-white-90);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-4);
  transition: color var(--transition-fast);
}

#main-navigation-wrapper .nav-link:hover,
#main-navigation-wrapper .nav-link:focus {
  background-color: var(--overlay-light) !important;
  color: var(--color-white) !important;
}

/* Dropdown menus */
#main-navigation-wrapper .dropdown-menu {
  border: none;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}

#main-navigation-wrapper .dropdown-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

#main-navigation-wrapper .dropdown-item:hover,
#main-navigation-wrapper .dropdown-item:focus {
  background-color: var(--color-light);
  color: var(--color-primary);
}

/* Mobile navigation */
@media (max-width: 991.98px) {
  #main-navigation-wrapper .navbar-collapse {
    background-color: var(--color-primary);
    padding: var(--space-4);
    margin-top: var(--space-4);
    border-radius: var(--radius-lg);
  }

  /* Mobile nav links - darker bg, white text on hover */
  #main-navigation-wrapper .nav-link:hover,
  #main-navigation-wrapper .nav-link:focus {
    background-color: var(--overlay-light) !important;
    color: var(--color-white) !important;
  }

  #main-navigation-wrapper .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
  }

  #main-navigation-wrapper .dropdown-item {
    color: var(--color-white-90);
  }

  #main-navigation-wrapper .dropdown-item:hover,
  #main-navigation-wrapper .dropdown-item:focus {
    background-color: var(--overlay-light);
    color: var(--color-white);
  }
}

/* Navbar toggler */
#main-navigation-wrapper .navbar-toggler {
  border-color: var(--color-white-50);
  padding: var(--space-2);
}

#main-navigation-wrapper .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 182, 6, 0.25);
}

#main-navigation-wrapper .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Right side nav */
.right-side-nav {
  margin-left: auto;
}

.right-side-nav .nav-link {
  padding: var(--space-2);
}

.right-side-nav .fa-bars {
  font-size: var(--text-lg);
}

/* ===================
   Logo Visibility Fix
   =================== */

/* Always show default (light) logo, hide secondary (dark) logo */
#main-navigation-wrapper .navbar-brand .secondary-logo {
  display: none !important;
}

#main-navigation-wrapper .navbar-brand .default-logo {
  display: block !important;
}

/* ===================
   Fixed Header Positioning
   =================== */

#main-navigation-wrapper,
#main-navigation-wrapper.transBg-main-menu-header,
#main-navigation-wrapper.navbar-default.transBg-main-menu-header,
#main-navigation-wrapper.navbar-dark.transBg-main-menu-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0 !important;
  background: rgba(3, 35, 61, 0.9) !important;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
}

#main-navigation-wrapper * {
  box-sizing: border-box;
}

/* Container layout */
#main-navigation-wrapper > .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: none;
  margin: 0 auto;
  padding: 15px !important;
  border: none;
}

/* Logo/brand */
#main-navigation-wrapper .navbar-brand {
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 20px 0 0 !important;
}

#main-navigation-wrapper .navbar-nav {
  display: flex !important;
}

#main-navigation-wrapper .nav > li {
  padding: 0 !important;
}

/* Hide hamburger on desktop */
@media (min-width: 992px) {
  #main-navigation-wrapper .navbar-toggler,
  #main-navigation-wrapper button.navbar-toggler,
  nav#main-navigation-wrapper .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Show hamburger on mobile/tablet */
@media (max-width: 991.98px) {
  #main-navigation-wrapper .navbar-toggler {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    order: 3;
  }
}

/* Navbar collapse - DESKTOP: always visible and horizontal */
@media (min-width: 992px) {
  #main-navigation-wrapper #main-navigation {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #main-navigation-wrapper #main-navigation.collapse:not(.show) {
    display: flex !important;
  }

  /* Main nav list - FORCE HORIZONTAL */
  #main-navigation-wrapper .navbar-nav,
  #main-navigation-wrapper ul.navbar-nav,
  #main-navigation-wrapper .navbar-nav.me-auto,
  nav#main-navigation-wrapper .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-navigation-wrapper .navbar-nav.me-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Nav items - inline */
  #main-navigation-wrapper .navbar-nav > li,
  #main-navigation-wrapper .navbar-nav > .nav-item {
    display: inline-block !important;
    float: none !important;
    position: relative;
  }

  #main-navigation-wrapper .navbar-nav .nav-link,
  #main-navigation-wrapper .nav > li > a {
    display: inline-block !important;
    padding: 12px 12px !important;
    white-space: nowrap;
    font-size: var(--text-sm) !important;
  }

  /* Right side nav */
  #main-navigation-wrapper .right-side-nav {
    display: flex !important;
    flex-direction: row !important;
    margin-left: auto !important;
  }
}

/* Navbar collapse - MOBILE: collapsible vertical menu */
@media (max-width: 991.98px) {
  #main-navigation-wrapper .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    padding: 15px;
    max-height: 80vh;
    overflow-y: auto;
  }

  #main-navigation-wrapper .navbar-collapse:not(.show) {
    display: none;
  }

  #main-navigation-wrapper .navbar-nav {
    flex-direction: column;
    width: 100%;
  }

  #main-navigation-wrapper .navbar-nav .nav-link {
    padding: 12px 15px;
  }
}

/* Right side nav */
@media (min-width: 992px) {
  #main-navigation-wrapper .right-side-nav {
    margin-left: auto;
    flex-direction: row;
  }
}

/* ===================
   Hero Carousel Fix (Bootstrap 5)
   =================== */

/* Ensure carousel works with Bootstrap 5 */
.carousel.home2carousel {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.carousel.home2carousel .carousel-inner {
  height: 100%;
  min-height: 100vh;
}

.carousel.home2carousel .carousel-item {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}

/* Carousel controls - Bootstrap 5 style */
.carousel.home2carousel .carousel-control-prev,
.carousel.home2carousel .carousel-control-next {
  width: 60px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.carousel.home2carousel .carousel-control-prev:hover,
.carousel.home2carousel .carousel-control-next:hover {
  opacity: 1;
}

.carousel.home2carousel .carousel-control-prev-icon,
.carousel.home2carousel .carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-color: var(--overlay-medium);
  border-radius: var(--radius-full);
  background-size: 50%;
}

/* Carousel caption styling */
.carousel.home2carousel .carousel-caption,
.carousel.home2carousel .nhs-caption,
.carousel.home2carousel .carousel-item .carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 90%;
  max-width: 800px;
  padding: 20px;
  text-align: center;
  z-index: 10;
}

/* Reset any conflicting positioning from old CSS */
.carousel.home2carousel .thm-container,
.carousel.home2carousel .box,
.carousel.home2carousel .content {
  position: static !important;
  transform: none !important;
  display: block;
  width: 100%;
}

.nhs-caption .this-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  font-weight: var(--font-normal);
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 2px 4px var(--overlay-medium);
}

@media (min-width: 768px) {
  .nhs-caption .this-title {
    font-size: var(--text-3xl);
  }
}

.carousel.home2carousel .carousel-caption p {
  color: var(--color-white);
  text-shadow: 1px 1px 2px var(--overlay-medium);
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .carousel.home2carousel .carousel-caption p {
    font-size: var(--text-lg);
  }
}

/* Book now button in carousel */
.carousel.home2carousel .nhs-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-dark);
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-base);
  transition: background-color var(--transition-base);
}

.carousel.home2carousel .nhs-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

/* ===================
   Room Cards (roomsuite-slider) Mobile-First
   =================== */

/* Base mobile styles for room cards */
.roomsuite-slider {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.room-suite {
  flex: 1 1 100%;
  min-width: 0;
}

/* Small tablets - 2 columns */
@media (min-width: 576px) {
  .room-suite {
    flex: 1 1 calc(50% - var(--space-4));
  }
}

/* Tablets - 3 columns */
@media (min-width: 768px) {
  .room-suite {
    flex: 1 1 calc(33.333% - var(--space-4));
  }
}

/* Desktop - 4 columns */
@media (min-width: 992px) {
  .room-suite {
    flex: 1 1 calc(25% - var(--space-4));
  }
}

/* Room card item styling */
.room-suite .item {
  display: block;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-base);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.room-suite .item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.room-suite .item a {
  text-decoration: none;
  color: inherit;
}

/* Room image */
.room-suite .ro-img {
  position: relative;
  overflow: hidden;
}

.room-suite .ro-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.room-suite .item:hover .ro-img img {
  transform: scale(1.05);
}

/* Room text/info area */
.room-suite .ro-txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.room-suite .ro-txt::after {
  content: '';
  display: table;
  clear: both;
}

.room-suite .left-h p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
}

.room-suite .right-p p {
  margin: 0;
  text-align: right;
  color: var(--color-accent);
  font-weight: var(--font-bold);
}

.room-suite .right-p span {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-white-70);
  text-transform: uppercase;
}

/* Section header styling */
.sec-header,
.sec-header3 {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-top: var(--space-8);
}

.sec-header h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  color: var(--color-dark);
}

@media (min-width: 768px) {
  .sec-header h2 {
    font-size: var(--text-3xl);
  }
}

.sec-header h3 {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .sec-header h3 {
    font-size: var(--text-lg);
  }
}

.sec-header p {
  font-size: var(--text-base);
  color: var(--color-gray);
}

/* Common padding for sections */
.common-pad {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .common-pad {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* Common padding for room/service sections */
.common-pad-room {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}

.common-pad-room1 {
  padding-top: var(--space-10);
  padding-bottom: 0;
}

.common-pad-inner {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .common-pad-room {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }

  .common-pad-room1 {
    padding-top: var(--space-12);
  }

  .common-pad-inner {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }
}

/* ===================
   Footer Mobile-First Overrides
   =================== */

/* Footer wrapper */
.footer-wrapper {
  background-color: var(--color-primary-dark);
  padding-top: var(--space-12);
}

/* Footer grid layout */
.footer-pad {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .footer-pad {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer-pad {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
}

/* Footer widgets */
.footer-wrapper .widget {
  width: 100%;
  float: none;
  padding: 0;
}

/* Footer titles */
.footer-wrapper .widget_title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Footer links */
.footer-wrapper .widget-contact-list ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-wrapper .widget-contact-list a {
  color: var(--color-white-70);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-wrapper .widget-contact-list a:hover {
  color: var(--color-accent);
}

/* Footer about section */
.about-us-widget p {
  color: var(--color-white-70);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.about-us-widget .nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* .about-us-widget .nav a - styles defined in Social Icon Base above */

/* Get in touch widget */
.get-in-touch .widget-contact-list li {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-white-70);
  font-size: var(--text-sm);
}

.get-in-touch .widget-contact-list li i {
  flex-shrink: 0;
  color: var(--color-accent);
  width: 20px;
}

/* Footer bottom */
.footer-b-pad {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 1px solid var(--overlay-white-light);
  margin-top: var(--space-8);
}

.footer-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-copy {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-copy p {
  color: var(--color-white-50);
  font-size: var(--text-sm);
  margin: 0;
}

.footer-copy a {
  color: var(--color-white-70);
}

.footer-copy a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   LEGACY CLASS SUPPORT
   These styles support existing HTML class names from the original site.
   Organized by page section for maintainability.
   ========================================================================== */

/* ===================
   Search Bar / Booking Widget
   Classes: .search-wrapper, .search-sec, .ser-in-box, .res-btn
   =================== */

/* Sticky Footer - Check Availability */
.search-wrapper.stricky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

.search-wrapper.stricky-footer .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.search-wrapper.stricky-footer .search-sec {
  padding: var(--space-3) var(--space-4);
}

.search-wrapper.stricky-footer .overlay {
  padding: 0;
}


.search-wrapper.stricky-footer.stricky-footer-hidden {
  transform: translateY(100%);
}

.search-wrapper {
  position: relative;
  z-index: 50;
}

.search-sec {
  background-color: var(--color-primary);
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 992px) {
  .search-sec {
    padding: var(--space-2) 0;
  }
}

.search-sec .overlay {
  padding: var(--space-4) 0;
}

.search-sec .border {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--overlay-white-medium);
}

@media (min-width: 576px) {
  .search-sec .border {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .search-sec .border {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
  }
}

.ser-in-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ser-in-box .form-control {
  /* Base styles from Form Input Base above */
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  height: 44px;
}

.select-box {
  position: relative;
}

.select-menu,
.search-sec select,
.search-sec .select-box select,
.ser-in-box select,
#count_adult,
#count_child,
select.select-menu {
  width: 100% !important;
  padding: 10px 12px !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  box-sizing: border-box !important;
}

.ser-in-box.chk-button {
  justify-content: flex-end;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .ser-in-box.chk-button {
    grid-column: span 2;
  }
}

/* Primary action button */
.res-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  background-color: var(--color-dark);
  border: none;
  border-radius: 0;
  cursor: pointer;
  min-height: var(--touch-target-min);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.res-btn:hover,
.res-btn:focus {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.res-btn i {
  font-size: var(--text-base);
}

/* Gold button variant */
.res-btn.btn-gold {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.res-btn.btn-gold:hover,
.res-btn.btn-gold:focus {
  background-color: var(--color-dark);
  color: var(--color-white);
}

/* Buttons row - side by side layout */
.buttons-row {
  display: flex;
  flex-direction: row !important;
  gap: var(--space-3);
  align-items: center;
}

.buttons-row .res-btn {
  flex: 1;
  white-space: nowrap;
}

/* Mobile collapsible footer - below 1000px */
@media (max-width: 999px) {
  .search-wrapper.stricky-footer .search-sec {
    padding: var(--space-2);
  }

  .search-wrapper.stricky-footer .border {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  /* COLLAPSED STATE: Hide form fields, show only buttons */
  .search-wrapper.stricky-footer .ser-in-box:not(.buttons-row) {
    display: none;
  }

  .search-wrapper.stricky-footer .ser-in-box.buttons-row {
    grid-column: span 2;
    display: flex;
    gap: var(--space-2);
  }

  /* Buttons side by side, full text */
  .search-wrapper.stricky-footer .res-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
  }

  .search-wrapper.stricky-footer .res-btn .btn-text {
    display: inline;
  }

  .search-wrapper.stricky-footer .res-btn .btn-icon {
    display: none;
  }

  /* EXPANDED STATE */
  .search-wrapper.stricky-footer.expanded .ser-in-box:not(.buttons-row) {
    display: block;
  }

  /* Row 1: Arrive, Depart (each span 1 column) */
  /* Row 2: Adults, Children (each span 1 column) */
  /* Row 3: Check Availability full width, Chat hidden */

  .search-wrapper.stricky-footer.expanded .ser-in-box.buttons-row {
    grid-column: span 2;
  }

  /* Hide Chat button when expanded */
  .search-wrapper.stricky-footer.expanded #chat_with_us {
    display: none;
  }

  /* Check Availability full width when expanded */
  .search-wrapper.stricky-footer.expanded #chk_avalable {
    flex: 1;
    width: 100%;
  }
}

/* Desktop: show text, hide icons (above 1000px) */
@media (min-width: 1000px) {
  .res-btn .btn-text {
    display: inline;
  }

  .res-btn .btn-icon {
    display: none;
  }
}

/* Zebra Datepicker customization */
.search-sec button.Zebra_DatePicker_Icon_Inside {
  margin: 0 12px 0 0;
  top: 50%;
  transform: translateY(-50%);
}

.Zebra_DatePicker_Icon_Inside {
  right: 8px;
}

/* Calendar icon positioning in expanded mobile footer */
@media (max-width: 999px) {
  .search-wrapper.stricky-footer.expanded .ser-in-box {
    position: relative;
  }

  .search-wrapper.stricky-footer.expanded .form-control.arival_date,
  .search-wrapper.stricky-footer.expanded .form-control.departure_date {
    padding-right: 40px !important;
  }

  .search-wrapper.stricky-footer.expanded button.Zebra_DatePicker_Icon_Inside {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* Zebra Datepicker - Website Color Theme */
.Zebra_DatePicker {
  background: var(--color-primary);
  border: 3px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-primary);
}

.Zebra_DatePicker,
.Zebra_DatePicker .dp_header .dp_hover,
.Zebra_DatePicker .dp_footer .dp_hover {
  border-radius: 0;
}

.Zebra_DatePicker .dp_header td {
  color: var(--color-white);
}

.Zebra_DatePicker .dp_header .dp_hover {
  background: var(--color-accent);
  color: var(--color-dark);
}

.Zebra_DatePicker .dp_daypicker th {
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: var(--font-semibold);
}

.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
}

.Zebra_DatePicker td.dp_selected {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.Zebra_DatePicker td.dp_current {
  color: var(--color-accent);
  font-weight: bold;
}

.Zebra_DatePicker td.dp_hover {
  background: var(--color-accent);
  color: var(--color-dark);
}

.Zebra_DatePicker td.dp_weekend {
  background: #f5f5f5;
}

.Zebra_DatePicker td.dp_not_in_month,
.Zebra_DatePicker td.dp_disabled {
  background: #f0f0f0;
  color: #ccc;
}

.Zebra_DatePicker .dp_footer .dp_hover {
  background: var(--color-accent);
  color: var(--color-dark);
}

.Zebra_DatePicker .dp_today,
.Zebra_DatePicker .dp_clear {
  color: var(--color-white);
}

.Zebra_DatePicker td.dp_week_number {
  background: var(--color-accent);
  color: var(--color-dark);
}

/* Mobile-friendly datepicker - larger touch targets */
@media (max-width: 999px) {
  .Zebra_DatePicker {
    width: auto !important;
    min-width: 300px;
  }

  .Zebra_DatePicker .dp_daypicker td,
  .Zebra_DatePicker .dp_daypicker th,
  .Zebra_DatePicker .dp_monthpicker td,
  .Zebra_DatePicker .dp_yearpicker td {
    padding: 12px 8px;
    font-size: 16px;
    min-width: 44px;
    min-height: 44px;
  }

  .Zebra_DatePicker .dp_header td {
    padding: 12px 8px;
    font-size: 16px;
  }

  .Zebra_DatePicker .dp_footer td {
    padding: 12px 8px;
    font-size: 14px;
  }
}

/* ===================
   Welcome Section
   Classes: .wel-wrapper, .wel-pad, .wel-content
   =================== */

.wel-wrapper {
  background: var(--color-light);
  background-image: url(../images/welcome/1.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.wel-pad {
  padding: var(--space-12) var(--space-4);
}

@media (min-width: 768px) {
  .wel-pad {
    padding: var(--space-16) var(--space-4);
  }
}

@media (min-width: 992px) {
  .wel-pad {
    padding: 12em var(--space-4) 7em;
  }
}

.wel-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.wel-content h1 {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  font-weight: var(--font-normal);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .wel-content h1 {
    font-size: var(--text-4xl);
  }
}

.wel-content h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  color: var(--color-gray);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.wel-content h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--color-accent);
  margin: var(--space-4) auto 0;
}

.wel-content h3 {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-gray);
  margin-bottom: var(--space-2);
}

.wel-content h3 a {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.wel-content h3 a:hover {
  color: var(--color-accent);
}

.wel-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

/* ===================
   Water Taxi / Promo Split Section
   Classes: .fluid-know-area, .work-image-ser, .service-promo, .know-top, .know-bot
   =================== */

.fluid-know-area {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .fluid-know-area {
    flex-direction: row;
  }
}

.work-image-ser {
  width: 100%;
  overflow: hidden;
}

@media (min-width: 992px) {
  .work-image-ser {
    width: calc(50% - 115px);
    flex-shrink: 0;
  }
}

.work-image-ser img,
.img-fluid-spa-offer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-promo {
  width: 100%;
  background-color: var(--color-primary);
  background-image: url(../images/know-about-us/bg.jpg);
  background-size: cover;
  background-position: center;
  padding: var(--space-8) var(--space-4);
}

@media (min-width: 992px) {
  .service-promo {
    width: calc(50% + 115px);
    padding: var(--space-12) var(--space-8);
    display: flex;
    align-items: center;
  }
}

.service-promo .promo-content {
  max-width: 600px;
}

.know-top {
  margin-bottom: var(--space-6);
}

.know-top h2 {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  font-weight: var(--font-normal);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .know-top h2 {
    font-size: var(--text-3xl);
  }
}

.know-top h3 {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.know-top h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
  margin-top: var(--space-3);
}

.know-top p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-white-85);
  margin-bottom: var(--space-4);
}

.know-top .nhs-btn {
  margin-top: var(--space-4);
}

.know-bot {
  border-top: 1px solid var(--overlay-white-medium);
  padding-top: var(--space-6);
}

.know-bot ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.know-bot ul li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-4);
  border-right: 1px solid var(--overlay-white-medium);
}

.know-bot ul li:last-child {
  border-right: none;
}

.about-img {
  flex-shrink: 0;
}

.about-img img {
  width: 50px;
  height: auto;
}

.about-cont p {
  font-size: var(--text-sm);
  color: var(--color-white);
  margin: 0;
  line-height: var(--leading-tight);
}

@media (max-width: 767.98px) {
  .know-bot {
    display: none;
  }
}

/* ===================
   Room Slider - Enhanced Hover Effects
   Classes: .room-slider, .roomsuite-slider, .room-suite, .ro-img, .ro-txt
   =================== */

.room-slider {
  position: relative;
}

/* Room card hover enhancements */
.room-suite .item {
  position: relative;
  overflow: hidden;
}

.room-suite .ro-img {
  position: relative;
  overflow: hidden;
}

.room-suite .ro-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--transition-base);
  z-index: 1;
}

.room-suite .item:hover .ro-img::before {
  background-color: var(--overlay-light);
}

.room-suite .ro-img img {
  transition: transform var(--transition-slow);
}

.room-suite .item:hover .ro-img img {
  transform: scale(1.08);
}

/* Room text area hover effect */
.room-suite .ro-txt {
  background-color: var(--color-light);
  transition: background-color var(--transition-base);
}

.room-suite .item:hover .ro-txt {
  background-color: var(--color-primary);
}

.room-suite .left-h p {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-dark);
  margin: 0;
  transition: color var(--transition-base);
}

.room-suite .item:hover .left-h p {
  color: var(--color-white);
}

.room-suite .right-p {
  text-align: right;
}

.room-suite .right-p p {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-accent);
  margin: 0;
}

.room-suite .right-p span {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-gray);
  text-transform: uppercase;
  transition: color var(--transition-base);
}

.room-suite .item:hover .right-p span {
  color: var(--color-white-70);
}

/* ===================
   Room Gallery - Bootstrap 5 Carousel with Thumbnails
   Classes: .room-gallery, .carousel-thumbnails
   Used on: Cottage/Villa detail pages
   =================== */

.room-gallery {
  margin-bottom: var(--space-6);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.room-gallery .carousel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.room-gallery .carousel-inner {
  background-color: var(--color-dark);
}

.room-gallery .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 550px;
}

/* Carousel Controls */
.room-gallery .carousel-control-prev,
.room-gallery .carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--overlay-medium);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.room-gallery .carousel:hover .carousel-control-prev,
.room-gallery .carousel:hover .carousel-control-next {
  opacity: 1;
}

.room-gallery .carousel-control-prev {
  left: 15px;
}

.room-gallery .carousel-control-next {
  right: 15px;
}

.room-gallery .carousel-control-prev:hover,
.room-gallery .carousel-control-next:hover {
  background-color: var(--color-accent);
}

/* Thumbnail Navigation */
.carousel-thumbnails {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.carousel-thumbnails button {
  flex: 0 0 auto;
  width: calc(20% - 8px);
  min-width: 60px;
  max-width: 120px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.carousel-thumbnails button:hover,
.carousel-thumbnails button.active {
  opacity: 1;
  border-color: var(--color-accent);
}

.carousel-thumbnails button img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
  .room-gallery .carousel-item img {
    max-height: 300px;
  }

  .carousel-thumbnails button {
    width: calc(20% - 6px);
    min-width: 50px;
    border-width: 2px;
  }

  .room-gallery .carousel-control-prev,
  .room-gallery .carousel-control-next {
    width: 40px;
    height: 40px;
    opacity: 1;
  }
}

/* ===================
   Cottage Amenities Section
   Classes: .room-fac-wrapper, .ro-facilitie, .facilitie-i-box
   Used on: Cottage/Villa detail pages
   =================== */

.room-fac-wrapper {
  margin: var(--space-6) 0;
}

.room-fac-wrapper h2 {
  font-family: var(--font-accent);
  font-size: var(--text-3xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.room-fac-wrapper h2::after {
  content: '';
  position: absolute;
  bottom: 5px;
  right: -80px;
  width: 70px;
  height: 2px;
  background-color: var(--color-accent);
}

.ro-facilitie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

.ro-facilitie ul li {
  margin: 0;
  padding: 0;
}

.facilitie-i-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  background-color: var(--color-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
  height: 100%;
}

.facilitie-i-box:hover {
  background-color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.facilitie-i-box h3 {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin: 0 0 var(--space-2) 0;
  text-transform: capitalize;
}

.facilitie-i-box span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.facilitie-i-box img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
}

/* Tablet - 3 columns */
@media (max-width: 991.98px) {
  .ro-facilitie ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile - 2 columns */
@media (max-width: 575.98px) {
  .ro-facilitie ul {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .facilitie-i-box {
    padding: var(--space-3);
  }

  .facilitie-i-box h3 {
    font-size: var(--text-xs);
  }

  .facilitie-i-box img {
    width: 32px;
    height: 32px;
  }

  .room-fac-wrapper h2::after {
    display: none;
  }
}

/* ===================
   Cottage Description & Overview
   Classes: .room-dec-wrapper, .room-overview
   =================== */

.room-dec-wrapper {
  margin-bottom: var(--space-6);
}

.room-dec-wrapper h2 {
  font-family: var(--font-accent);
  font-size: var(--text-3xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.room-dec-wrapper p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-gray);
}

.room-overview {
  margin: var(--space-6) 0;
}

.room-overview h2 {
  font-family: var(--font-accent);
  font-size: var(--text-3xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.room-overview h2::after {
  content: '';
  position: absolute;
  bottom: 5px;
  right: -80px;
  width: 70px;
  height: 2px;
  background-color: var(--color-accent);
}

.room-overview .table {
  margin-bottom: var(--space-4);
}

.room-overview .table th code {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  background: none;
  padding: 0;
}

.room-overview h5 {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

.room-overview .res-btn {
  margin-top: var(--space-2);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
}

.room-overview .res-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

@media (max-width: 575.98px) {
  .room-overview h2::after {
    display: none;
  }
}

/* ===================
   Our Resort Values - Tabs Section
   Classes: .our-res, .spa-offer, .tab-title-box, .tab-content-box
   =================== */

.our-res {
  position: relative;
}

/* Reduce bottom padding for tabs section */
.our-res.common-pad {
  padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .our-res.common-pad {
    padding-bottom: var(--space-8);
  }
}

.our-res .left-pad {
  padding-left: 0;
}

@media (min-width: 992px) {
  .our-res .left-pad {
    padding-left: var(--space-6);
  }
}

/* Spa offer card with percentage badge */
.spa-offer {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .spa-offer {
    margin-bottom: 0;
  }
}

.spa-offer .img_holder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.spa-offer .img_holder img {
  width: 100%;
  height: auto;
}

.spa-offer .img_holder .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--overlay-dark) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}

.spa-offer .room-ad-cont {
  position: relative;
  z-index: 1;
}

.spa-offer .room-ad-cont h2 {
  font-family: var(--font-accent);
  font-size: var(--text-4xl);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.spa-offer .room-ad-cont h2 span {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.spa-offer .room-ad-cont h3 {
  font-size: var(--text-lg);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.spa-offer .room-ad-cont p {
  font-size: var(--text-sm);
  color: var(--color-white-80);
  margin-bottom: var(--space-3);
}

.spa-offer .room-ad-cont a {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.spa-offer .room-ad-cont a:hover {
  color: var(--color-white);
}

/* Tab navigation */
.tab-title-box {
  margin-bottom: var(--space-6);
}

.tab-title-box ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-gray-lighter);
  padding-bottom: var(--space-2);
}

.tab-title-box ul li {
  position: relative;
}

.tab-title-box ul li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
  transition: all var(--transition-fast);
}

.tab-title-box ul li a:hover {
  color: var(--color-dark);
}

.tab-title-box ul li.active a {
  color: var(--color-dark);
  background-color: var(--color-white);
  border-color: var(--color-gray-lighter);
  border-bottom-color: var(--color-white);
  margin-bottom: -2px;
}

/* Tab content */
.tab-content-box .content-box h2 {
  font-size: var(--text-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.tab-content-box .content-box p {
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

.tab-content-box .content-box ul {
  margin-bottom: var(--space-4);
}

.tab-content-box .content-box ul li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
}

.tab-content-box .content-box ul li i,
.tab-content-box .content-box ul li .fa {
  color: var(--color-primary);
  width: 20px;
  flex-shrink: 0;
}

/* Fix: Ensure proper tab pane visibility (Bootstrap 5 compatibility) */
.tab-content-box .tab-pane {
  display: none;
}

.tab-content-box .tab-pane.active {
  display: block;
}

/* ===================
   BXSlider Promo Wrapper
   Classes: .promo-wrapper, .promo-outer, .bxslider, .promo-imgslider
   =================== */

.promo-wrapper {
  position: relative;
}

.promo-outer {
  background-image: url(../images/satisfiedresort/1.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 400px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .promo-outer {
    min-height: 26em;
  }
}

.promo-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(3, 35, 61, 0.85) 0%, rgba(3, 35, 61, 0.7) 100%);
}

.promo-imgslider {
  position: relative;
  z-index: 1;
  width: 100%;
}

.promo-wrapper .promo-content {
  position: relative;
  z-index: 1;
  padding: var(--space-8) 0;
}

.promo-wrapper .promo-content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .promo-wrapper .promo-content h2 {
    font-size: var(--text-3xl);
  }
}

.promo-wrapper .promo-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-white-85);
  margin-bottom: var(--space-4);
}

.promo-wrapper .promo-content a {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.promo-wrapper .promo-content a:hover {
  color: var(--color-white);
}

/* BXSlider overrides */
.bx-wrapper {
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.bx-wrapper .bx-viewport {
  background: transparent;
  border: none;
  box-shadow: none;
}

.bxslider {
  margin: 0;
  padding: 0;
}

/* ===================
   Testimonials Section
   Classes: .testimonials-sec, .testimonials-wrapper, .test-cont, .test-bot
   =================== */

.testimonials-sec {
  position: relative;
}

.testimonials-wrapper {
  position: relative;
}

/* Override owl carousel dots */
.testimonials-wrapper .owl-dots {
  display: none;
}

.testimonial-sliders .item {
  padding: var(--space-4);
}

.testimonial-sliders .test-cont {
  background-color: var(--color-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  position: relative;
}

/* Speech bubble triangle */
.testimonial-sliders .test-cont::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-light);
}

.testimonial-sliders .test-cont p {
  font-size: var(--text-base);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-gray);
  margin: 0;
}

.testimonial-sliders .test-bot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-4);
}

.testimonial-sliders .tst-img {
  flex-shrink: 0;
}

.testimonial-sliders .tst-img img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-sliders .client_name h5 {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  color: var(--color-dark);
  margin: 0 0 var(--space-1);
}

.testimonial-sliders .client_name h5 span {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-gray);
}

.testimonial-sliders .client_name ul {
  display: flex;
  gap: 2px;
}

.testimonial-sliders .client_name ul li {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

/* ===================
   News and Events Section
   Classes: .news-wrapper, .event-pad, .news-evn-img, .event-date, .news-evn-cont
   =================== */

.news-wrapper {
  background-color: var(--color-light);
}

.event-pad {
  padding-top: 0;
}

.news-evn-img {
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  border-bottom: 3px solid var(--color-primary);
}

.news-evn-img img {
  width: 100%;
  height: auto;
  display: block;
}

.news-evn-img .event-date {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background-color: var(--color-accent);
  border-radius: var(--radius-base);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  min-width: 60px;
}

.news-evn-img .event-date h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  line-height: 1;
  margin: 0;
}

.news-evn-img .event-date h3 small {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  margin-top: var(--space-1);
}

.news-evn-cont {
  background-color: var(--color-white);
  padding: var(--space-4);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .news-evn-cont {
    margin-bottom: 0;
  }
}

.news-meta {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-lighter);
}

.news-meta a {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-right: var(--space-3);
}

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

.news-evn-cont h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.news-evn-cont h3 a {
  color: var(--color-dark);
}

.news-evn-cont h3 a:hover {
  color: var(--color-primary);
}

.news-evn-cont p {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ===================
   Newsletter Banner
   Classes: .nasir-subscribe-form-row, .this-dashed, .this-texts, .this-form
   =================== */

.nasir-subscribe-form-row {
  background-color: var(--color-primary);
  padding: var(--space-8) 0;
}

.nasir-subscribe-form-row .this-dashed {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  text-align: center;
}

@media (min-width: 992px) {
  .nasir-subscribe-form-row .this-dashed {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.this-texts h2 {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .this-texts h2 {
    font-size: var(--text-3xl);
  }
}

.this-texts h3 {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-white-80);
  margin: 0;
}

.this-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: 0 var(--space-4);
}

.this-form .form-control {
  width: 100%;
  border-radius: 0;
}

.this-form .res-btn {
  border-radius: 0;
}

@media (min-width: 576px) {
  .this-form {
    flex-direction: row;
    max-width: 400px;
    padding: 0;
  }

  .this-form .form-control {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
  }

  .this-form .res-btn {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
  }
}

.this-form .form-control {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-base);
  min-height: var(--touch-target-min);
}

.this-form .form-control:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.this-form .input-group-addon {
  display: flex;
}

/* ===================
   Footer Widget Refinements
   =================== */

.footer-wrapper .widget.about-us-widget {
  max-width: 300px;
}

.footer-wrapper .widget.about-us-widget > a {
  display: block;
  margin-bottom: var(--space-4);
}

.footer-wrapper .widget.about-us-widget > a img {
  max-width: 180px;
}

.footer-wrapper .widget.about-us-widget > p {
  color: var(--color-white-70);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.footer-wrapper .widget.about-us-widget > a:last-of-type {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.footer-wrapper .widget.about-us-widget > a:last-of-type:hover {
  color: var(--color-white);
}

.footer-wrapper .widget.about-us-widget .nav {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Smaller social icons in footer widget - extends Social Icon Base */
.footer-wrapper .widget.about-us-widget .nav li a {
  width: 36px;
  height: 36px;
}

/* Footer widget titles */
.footer-wrapper .widget h4.widget_title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
  position: relative;
  padding-bottom: var(--space-2);
}

.footer-wrapper .widget h4.widget_title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
}

/* Get in touch widget */
.footer-wrapper .widget.get-in-touch .widget-contact-list ul li {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-white-70);
}

.footer-wrapper .widget.get-in-touch .widget-contact-list ul li i {
  color: var(--color-accent);
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-wrapper .widget.get-in-touch .widget-contact-list ul li .fleft {
  flex: 1;
}

.footer-wrapper .widget.get-in-touch .widget-contact-list ul li a {
  color: var(--color-white-70);
}

.footer-wrapper .widget.get-in-touch .widget-contact-list ul li a:hover {
  color: var(--color-accent);
}

/* Footer text helper */
.fo-txt {
  flex: 1;
}

@media (max-width: 767.98px) {
  .fo-txt {
    width: 100%;
    text-align: center;
  }

  .fo-txt .float-start,
  .fo-txt .float-end {
    float: none !important;
  }
}

/* ===================
   Utility Classes
   =================== */

/* Font families */
.playball-font {
  font-family: var(--font-accent);
}

/* Clearfix */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Transitions */
.transition3s { transition: all 0.3s ease; }
.transition4s { transition: all 0.4s ease; }
.transition5s { transition: all 0.5s ease; }

/* Margin helpers */
.m0 { margin: 0; }

/* Float helpers (Bootstrap 5 compatible) */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

/* Display helpers */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Common section padding */
.common-pad {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .common-pad {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* Image fluid alternative */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Valign helpers */
.valign-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Sports list styling */
.sports-list {
  font-size: 1.2em;
  line-height: 2.4;
}

.sports-list i {
  color: var(--color-primary);
}

/* Paragraph small */
.paragraph-small {
  font-size: var(--text-sm);
  line-height: 1.6;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

/* ===================
   Side Menu Refinements
   =================== */

.side-menu .title {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.side-menu .title-box {
  margin-bottom: var(--space-4);
}

.side-menu .title-box h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.side-menu .decor-line {
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
}

.side-menu .decor-line.inline {
  display: inline-block;
}

.side-menu .gallery-widget .list-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.side-menu .gallery-widget .list-inline li a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.side-menu .contact-info li {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-white-80);
}

.side-menu .contact-info li a {
  color: var(--color-white-80);
}

.side-menu .contact-info li a:hover {
  color: var(--color-accent);
}

.side-menu .subscribe-widget form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.side-menu .subscribe-widget input[type="text"] {
  padding: var(--space-3);
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-base);
}

/* Close button refinement */
.side-menu .close-button {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-xl);
  cursor: pointer;
}

/* ===================
   Bootstrap 3 Compatibility - Float Classes
   =================== */

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

/* Clear floats in containers */
.family-outer::after,
.m-traking::after {
  content: '';
  display: table;
  clear: both;
}

/* Responsive: Stack on mobile */
@media (max-width: 767px) {
  .pull-left,
  .pull-right {
    float: none !important;
  }
}

/* ===================
   Bootstrap 3 Compatibility - Push/Pull (Order)
   =================== */

@media (min-width: 992px) {
  .col-md-push-4 {
    order: 2;
  }

  .col-md-pull-8 {
    order: 1;
  }
}

/* ===================
   Activities / Attractions Layout
   =================== */

.activities-main {
  padding: var(--space-12) 0;
}

.activities-wrapper {
  position: relative;
}

.activities-outer {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.activities-outer > [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .activities-outer > .col-md-8 {
    width: 66.666%;
  }

  .activities-outer > .col-md-4 {
    width: 33.333%;
  }
}

.activities-content {
  background: #f5f5f5;
  padding: var(--space-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.activities-content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.activities-content h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}

.activities-content p {
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

.activities-content .res-btn {
  align-self: flex-start;
}

/* ===================
   Family/Gallery Section Layout
   =================== */

.family-outer {
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.family-img {
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .family-img {
    margin-bottom: 0;
  }
}

.family-content {
  padding: var(--space-4);
}

.family-content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

/* Image gallery grid */
.image-gallery.ntracing-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.image-gallery .single-gallery {
  display: block;
}

.image-gallery .single-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* Gallery image sizing */
.image-gallery .single-gallery.ff-210 { flex: 0 0 30%; max-width: 30%; }
.image-gallery .single-gallery.ff-270 { flex: 0 0 35%; max-width: 35%; }
.image-gallery .single-gallery.ff-550 { flex: 0 0 65%; max-width: 65%; }

@media (max-width: 767px) {
  .image-gallery .single-gallery.ff-210,
  .image-gallery .single-gallery.ff-270,
  .image-gallery .single-gallery.ff-550 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===================
   Masonry/Tracked Gallery Layout
   =================== */

.m-traking {
  overflow: hidden;
}

.m-traking::after {
  content: '';
  display: table;
  clear: both;
}

.maount-content {
  padding: var(--space-4);
}

.maount-content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

/* ===================
   Room Listing Cards
   Classes: .room-wrapper, .media, .media-left, .media-body, .media-right
   Used on: hotel-rooms-and-suites.html
   =================== */

/* Mobile base (stacked layout) */
.room-wrapper {
  background: var(--color-white);
  border: 1px solid #e9e9e9;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.room-wrapper .media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.room-wrapper .media-left {
  width: 100%;
}

.room-wrapper .media-left img {
  width: 100%;
  height: auto;
  display: block;
}

.room-wrapper .media-body {
  padding: 0;
}

.room-wrapper .media-body h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.room-wrapper .media-body p {
  color: var(--color-gray);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.room-wrapper .media-body h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.room-wrapper .media-body h6 {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-style: italic;
}

.room-wrapper .media-right {
  background: var(--color-light);
  text-align: center;
  padding: var(--space-4);
}

.room-wrapper .media-right p {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.room-wrapper .media-right p span {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-gray);
}

.room-wrapper .media-right a {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transition: background-color var(--transition-fast);
}

.room-wrapper .media-right a:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
}

/* Tablet and up - horizontal layout */
@media (min-width: 768px) {
  .room-wrapper .media {
    flex-direction: row;
    align-items: stretch;
  }

  .room-wrapper .media-left {
    flex: 0 0 280px;
    width: 280px;
  }

  .room-wrapper .media-body {
    flex: 1;
    padding: 0 var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .room-wrapper .media-right {
    flex: 0 0 160px;
    width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Desktop - larger image */
@media (min-width: 992px) {
  .room-wrapper .media-left {
    flex: 0 0 345px;
    width: 345px;
  }

  .room-wrapper .media-right {
    flex: 0 0 180px;
    width: 180px;
  }
}

/* ===================
   Venue/Meeting Room Cards (Alternating Layout)
   Classes: .room-t-wrapper, .room-l-wrapper, .img-wrap, .content, .bottom-content
   Used on: hotel-meeting-rooms-and-receptions.html
   =================== */

/* Mobile base (stacked layout) */
.room-t-wrapper {
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.room-t-wrapper .img-holder {
  position: relative;
  overflow: hidden;
}

.room-t-wrapper .img-holder img {
  width: 100%;
  height: auto;
  display: block;
}

.room-t-wrapper .content {
  background: var(--color-white);
  padding: var(--space-6) var(--space-5);
}

.room-t-wrapper .content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.room-t-wrapper .content p {
  color: var(--color-gray);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.room-t-wrapper .content .bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-t-wrapper .content .bottom-content a {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transition: background-color var(--transition-fast);
}

.room-t-wrapper .content .bottom-content a:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Tablet and up - side by side layout */
@media (min-width: 992px) {
  .room-t-wrapper {
    display: flex;
    align-items: stretch;
  }

  .room-t-wrapper .img-wrap {
    flex: 0 0 58.333%;
    max-width: 58.333%;
  }

  .room-t-wrapper .content {
    flex: 0 0 41.667%;
    max-width: 41.667%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
  }

  /* Alternating layout - content on left */
  .room-t-wrapper.room-l-wrapper {
    flex-direction: row-reverse;
  }
}

/* ===================
   Special Offers & Package Deals
   Classes: .offer-deal-dark, .offer-deal, .offer-content, .offer-b-main, .offer-b-price
   Used on: hotel-special-offers-packages.html
   =================== */

/* Dark background section */
.offer-deal-dark {
  background: var(--color-light);
  overflow: hidden;
}

/* Mobile base (stacked layout) */
.offer-deal {
  position: relative;
  margin-bottom: var(--space-6);
}

.offer-deal .img-holder {
  position: relative;
}

.offer-deal .img-holder img {
  width: 100%;
  height: auto;
  display: block;
}

/* Savings badge overlay */
.offer-deal .img-holder .overlay {
  position: absolute;
  top: 5%;
  right: 5%;
  border-radius: 50%;
  border: 4px solid var(--color-white);
  background: var(--color-primary);
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.offer-deal .img-holder .overlay p {
  color: var(--color-white);
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  margin: 0;
  line-height: 1;
}

.offer-deal .img-holder .overlay p span {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-accent);
}

/* Badge color variants */
.offer-deal .img-holder .col-pink {
  background: #ec3247;
}

.offer-deal .img-holder .col-purple {
  background: #4169e1;
}

.offer-deal .img-holder .col-orange {
  background: #ec8c32;
}

/* Offer content */
.offer-content {
  padding: var(--space-6) 0;
}

.offer-content h2 {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.offer-content p {
  color: var(--color-gray);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

/* Bottom section with button and price */
.offer-b-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.offer-b-but .res-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-base);
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transition: background-color var(--transition-fast);
}

.offer-b-but .res-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.offer-b-price p {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--color-dark);
  margin: 0;
  line-height: 1;
}

.offer-b-price p span {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-gray);
}

/* Tablet and up - side by side layout */
@media (min-width: 768px) {
  .offer-deal .img-holder .overlay {
    width: 120px;
    height: 120px;
    right: -10%;
  }

  .offer-deal .img-holder .overlay p {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 992px) {
  .offer-content {
    padding: 0 0 0 var(--space-8);
  }
}

/* ===================
   Cottage Grid Cards
   Classes: .nasir-room-grid, .nroom-grid, .this-conts, .this-title, .read-more
   Used on: cottages-cape-cod.html, cottages-villas.html, cottages-waterfront.html, cottages-rentals-all.html
   =================== */

.nasir-room-grid {
  padding-bottom: var(--space-12);
}

.nasir-room-grid > .container > .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--space-4) * -1);
}

.nroom-grid {
  padding: var(--space-4);
  width: 100%;
}

/* Tablet: 2 columns */
@media (min-width: 576px) {
  .nroom-grid {
    width: 50%;
  }
}

/* Desktop: 3 columns */
@media (min-width: 768px) {
  .nroom-grid {
    width: 33.333%;
  }
}

.nroom-grid .room-img {
  overflow: hidden;
  display: block;
  background: var(--color-dark);
}

.nroom-grid .room-img img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  transition: all var(--transition-base);
}

.nroom-grid .room-img:hover img,
.nroom-grid .room-img:focus img {
  opacity: 0.8;
  transform: scale(1.1);
}

.nroom-grid .this-conts {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-6);
  border: 1px solid #e6e1e1;
  background: var(--color-light);
  border-top: 4px solid var(--color-accent-light);
  text-align: center;
}

.nroom-grid .media {
  text-align: left;
}

.nroom-grid .this-title {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--color-dark);
  letter-spacing: 0.3px;
}

.nroom-grid .media-right {
  font-size: var(--text-xl);
  font-family: var(--font-accent);
  white-space: nowrap;
  color: var(--color-dark);
}

.nroom-grid .media-right small {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-gray);
}

.nroom-grid p {
  margin: var(--space-4) 0 var(--space-5);
  font-weight: var(--font-semibold);
  color: var(--color-gray);
  font-family: var(--font-primary);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

.nroom-grid .read-more {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color var(--transition-fast);
}

.nroom-grid .read-more i {
  margin-left: var(--space-2);
}

.nroom-grid .read-more:hover,
.nroom-grid .read-more:focus {
  background: var(--color-dark);
  color: var(--color-white);
}

.nasir-room-grid-header {
  padding-bottom: 0;
}

/* ===================
   Attraction Gallery Layout (New)
   =================== */

.attraction-gallery-section {
  padding: var(--space-8) 0;
}

.attraction-gallery-section > .container > .row {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap !important;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .attraction-gallery-section > .container > .row {
    flex-direction: row;
  }
}

/* Gallery grid */
.attraction-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.attraction-gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.attraction-gallery img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.attraction-gallery a:hover img {
  transform: scale(1.05);
}

/* Full width images */
.attraction-gallery .gallery-full {
  grid-column: 1 / -1;
}

/* Gallery column sizing */
.gallery-column {
  flex: 1 1 100%;
  width: 100%;
}

.content-column {
  flex: 1 1 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .gallery-column {
    flex: 0 0 58%;
    max-width: 58%;
    width: 58%;
  }

  .content-column {
    flex: 0 0 42%;
    max-width: 42%;
    width: 42%;
    padding-left: var(--space-6);
  }
}

.content-column h2 {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

/* ===================
   Legacy Masonry Gallery (span-* classes)
   For attraction pages not yet updated
   =================== */

.m-traking {
  display: flex;
  flex-wrap: wrap;
}

.m-traking > [class*="col-"] {
  float: none;
}

@media (min-width: 768px) {
  .m-traking > .col-lg-7,
  .m-traking > .col-md-7 {
    flex: 0 0 58%;
    max-width: 58%;
    order: 1;
  }

  .m-traking > .col-lg-5,
  .m-traking > .col-md-5 {
    flex: 0 0 42%;
    max-width: 42%;
    order: 2;
  }
}

/* Masonry span sizes */
.image-gallery.ntracing-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.image-gallery.ntracing-images .single-gallery {
  flex: 0 0 calc(50% - 2px);
  max-width: calc(50% - 2px);
}

.image-gallery.ntracing-images .single-gallery.span-10 {
  flex: 0 0 100%;
  max-width: 100%;
}

.image-gallery.ntracing-images .single-gallery.span-7 {
  flex: 0 0 calc(55% - 2px);
  max-width: calc(55% - 2px);
}

.image-gallery.ntracing-images .single-gallery.span-11 {
  flex: 0 0 calc(45% - 2px);
  max-width: calc(45% - 2px);
}

.image-gallery.ntracing-images .single-gallery.span-12 {
  flex: 0 0 calc(40% - 2px);
  max-width: calc(40% - 2px);
}

.image-gallery.ntracing-images .single-gallery.span-13 {
  flex: 0 0 calc(60% - 2px);
  max-width: calc(60% - 2px);
}

.image-gallery.ntracing-images .single-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.image-gallery.ntracing-images .img-holder {
  overflow: hidden;
}

.image-gallery.ntracing-images .img-holder img {
  transition: transform 0.3s ease;
}

.image-gallery.ntracing-images .img-holder:hover img {
  transform: scale(1.05);
}

/* Mobile: stack all images */
@media (max-width: 767px) {
  .m-traking {
    gap: var(--space-4);
  }

  .m-traking > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
  }

  .image-gallery.ntracing-images {
    gap: 8px;
    margin-bottom: var(--space-4);
  }

  /* Keep 2-column grid on mobile for variety */
  .image-gallery.ntracing-images .single-gallery {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  /* Full width for span-10 only */
  .image-gallery.ntracing-images .single-gallery.span-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .image-gallery.ntracing-images .single-gallery.span-7,
  .image-gallery.ntracing-images .single-gallery.span-11,
  .image-gallery.ntracing-images .single-gallery.span-12,
  .image-gallery.ntracing-images .single-gallery.span-13 {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .maount-content {
    padding: var(--space-4) 0;
  }

  /* Reduce section padding on mobile */
  .news-wrapper .common-pad {
    padding: var(--space-6) var(--space-4);
  }
}

/* ===================
   Filterable Gallery (Pirate Ship page, etc.)
   Classes: .gallery-filter-wrapper, .gallery-sorter, .image-gallery (masonry)
   =================== */

.gallery-filter-wrapper {
  margin-bottom: var(--space-6);
}

.gallery-filter-wrapper .btn-group {
  gap: var(--space-2);
}

.gallery-filter-wrapper .btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.gallery-filter-wrapper .btn-outline-primary.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Masonry gallery grid */
.gallery-page-one .image-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.gallery-page-one .single-gallery {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gallery-page-one .single-gallery .img-holder {
  position: relative;
  overflow: hidden;
}

.gallery-page-one .single-gallery .img-holder img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.gallery-page-one .single-gallery:hover .img-holder img {
  transform: scale(1.05);
}

.gallery-page-one .single-gallery .content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, var(--overlay-dark));
  padding: var(--space-4) var(--space-3) var(--space-3);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.gallery-page-one .single-gallery:hover .content {
  opacity: 1;
}

.gallery-page-one .single-gallery .link-gallery {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-page-one .single-gallery .link-gallery a {
  color: var(--color-white);
  font-size: var(--text-sm);
}

.gallery-page-one .single-gallery .link-gallery .media-right a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-dark);
}

.gallery-page-one .single-gallery .link-gallery .media-right a:hover {
  background-color: var(--color-white);
}

/* Tablet - 3 columns */
@media (max-width: 991.98px) {
  .gallery-page-one .image-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-filter-wrapper .btn-group {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile - 2 columns */
@media (max-width: 575.98px) {
  .gallery-page-one .image-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .gallery-page-one .single-gallery .img-holder img {
    height: 150px;
  }

  .gallery-filter-wrapper .btn-outline-primary {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }

  .gallery-page-one .single-gallery .content {
    opacity: 1;
    padding: var(--space-2);
  }

  .gallery-page-one .single-gallery .link-gallery .media-bottom {
    display: none;
  }

  .gallery-page-one .single-gallery .link-gallery .media-right a {
    width: 30px;
    height: 30px;
  }
}

/* ===================
   Reservations Page Booking Form
   =================== */

/* Booking form container */
.book-r-form {
  background-color: var(--color-light);
  padding: var(--space-6);
  border-radius: var(--radius-md);
}

/* Room price section */
.book-r-form .room-price {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-light);
}

.book-r-form .room-price h6 {
  font-size: var(--text-sm);
  color: var(--color-gray);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.book-r-form .room-price h2.price {
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin: 0;
}

.book-r-form .room-price h2.price span {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-weight: 400;
}

/* Form groups */
.book-form .form-group {
  margin-bottom: var(--space-4);
}

.book-form .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-dark);
}

/* Form inputs and selects - consistent sizing */
.book-form .form-control,
.book-form .select-menu {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  background-color: white;
  height: auto;
}

.book-form .form-control:focus,
.book-form .select-menu:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

/* Check availability button wrapper */
.book-form .chk-button-wrapper {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}

/* Champagne button style - extends .btn base */
.btn-champagne {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
  border: none;
  padding: var(--space-3) var(--space-6);
  width: 100%;
  transition: all var(--transition-base);
}

.btn-champagne:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

/* Room description wrapper - smaller H2 and top padding */
.single-room-wrapper {
  padding-top: var(--space-4);
}

.room-dec-wrapper {
  margin-bottom: var(--space-8);
}

.room-dec-wrapper h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .room-dec-wrapper h2 {
    font-size: var(--text-2xl);
  }

  .single-room-wrapper {
    padding-top: 0;
  }
}