/*
  Theme: Bravello — Hôtel & Casino premium.
  Library-first: Bootstrap 5 + AOS + FontAwesome, with a thin layer of custom CSS
  for the brand palette, clip-path decorations, and components that Bootstrap
  does not provide out of the box.

  Palette:
  - Primary: deep emerald #0d5d4a
  - Secondary: champagne gold #c5a25d
  - Dark: warm navy #1a2332 (never pure black)
  - Light: warm cream #f8f5f0 (never pure white)

  TODO: if the client wants a lighter/darker variant, switch CSS variables here.
*/
html, body {
  overflow-x: hidden;max-width: 100%;
}
:root {
  --bs-primary: #0d5d4a;
  --bs-primary-rgb: 13, 93, 74;
  --bs-secondary: #c5a25d;
  --bs-secondary-rgb: 197, 162, 93;
  --bs-dark: #1a2332;
  --bs-dark-rgb: 26, 35, 50;
  --bs-light: #f8f5f0;
  --bs-light-rgb: 248, 245, 240;
  --bs-body-bg: #f8f5f0;
  --bs-body-color: #1a2332;
  --bravello-gold: #c5a25d;
  --bravello-gold-light: #e3d5b0;
  --bravello-emerald: #0d5d4a;
  --bravello-emerald-light: #1a7f6b;
  --bravello-navy: #1a2332;
  --bravello-cream: #f8f5f0;
  --bravello-cream-dark: #e9e2d8;
}

/* ------------------------------------------------------------------- */
/* 1. Typography helpers                                               */
/* ------------------------------------------------------------------- */

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

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

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

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

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

.bg-emerald-light {
  background-color: var(--bravello-emerald-light) !important;
}

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

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

.bg-cream-dark {
  background-color: var(--bravello-cream-dark) !important;
}

/* ------------------------------------------------------------------- */
/* 2. Decorative components                                            */
/* ------------------------------------------------------------------- */

.section-angled {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  padding-bottom: 5rem;
}

.section-angled-reverse {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  padding-top: 5rem;
}

@media (max-width: 767.98px) {
  .section-angled,
  .section-angled-reverse {
    clip-path: none;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.decorative-line {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--bravello-gold), transparent);
  margin-bottom: 1.25rem;
}

.decorative-line-center {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--bravello-gold), transparent);
}

.gold-underline {
  display: inline-block;
  position: relative;
}

.gold-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: var(--bravello-gold);
}

/* ------------------------------------------------------------------- */
/* 3. Background image helpers                                         */
/* ------------------------------------------------------------------- */

.bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bg-fixed {
  background-attachment: fixed;
}

@media (max-width: 991.98px) {
  .bg-fixed {
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------------------- */
/* 4. Header / Footer                                                  */
/* ------------------------------------------------------------------- */

.header-topbar {
  background-color: var(--bravello-navy);
  color: var(--bravello-cream);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(197, 162, 93, 0.2);
}

.header-topbar i {
  color: var(--bravello-gold);
  margin-right: 0.4rem;
}

.navbar-brand img {
  height: 48px;
  width: auto;
}

.navbar-nav .nav-link {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bravello-navy);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: var(--bravello-emerald);
}

.navbar-toggler {
  border-color: var(--bravello-gold);
}

.navbar-toggler-icon {
  /* Bootstrap 5 uses an SVG background by default; we override with a FontAwesome-free CSS-only hamburger below */
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c9";
  color: var(--bravello-gold);
  font-size: 1.25rem;
}

.footer-main {
  background-color: var(--bravello-navy);
  color: var(--bravello-cream);
}

.footer-main a {
  color: var(--bravello-cream-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-main a:hover,
.footer-main a:focus {
  color: var(--bravello-gold);
}

.footer-main h5,
.footer-main h6 {
  color: var(--bravello-gold);
}

.footer-divider {
  border-top: 1px solid rgba(197, 162, 93, 0.25);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(197, 162, 93, 0.4);
  border-radius: 50%;
  color: var(--bravello-cream);
  transition: all 0.2s ease;
}

.social-link:hover,
.social-link:focus {
  background-color: var(--bravello-gold);
  color: var(--bravello-navy);
  border-color: var(--bravello-gold);
}

/* ------------------------------------------------------------------- */
/* 5. Hero slider                                                      */
/* ------------------------------------------------------------------- */

.hero-slider .carousel-item {
  min-height: 80vh;
}

.hero-slider .carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  padding: 1rem;
  text-align: center;
  color: var(--bravello-cream);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(26, 35, 50, 0.55), rgba(26, 35, 50, 0.75));
}

.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
  background-image: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--bravello-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bravello-gold);
}

.hero-slider .carousel-control-prev-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f053";
}

.hero-slider .carousel-control-next-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054";
}

/* ------------------------------------------------------------------- */
/* 6. Cards and blocks                                                 */
/* ------------------------------------------------------------------- */

.stat-card {
  background-color: rgba(248, 245, 240, 0.08);
  border: 1px solid rgba(197, 162, 93, 0.25);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}

.stat-card .stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bravello-gold);
  line-height: 1;
}

.service-card,
.price-card,
.blog-card,
.gallery-card {
  background-color: var(--bravello-emerald-light);
  border: 1px solid rgba(26, 35, 50, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover,
.price-card:hover,
.blog-card:hover,
.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(26, 35, 50, 0.12);
}

.service-card .card-icon,
.price-card .card-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(13, 93, 74, 0.08);
  color: var(--bravello-emerald);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.price-highlight {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bravello-gold);
}

/* ------------------------------------------------------------------- */
/* 7. Testimonials                                                     */
/* ------------------------------------------------------------------- */

.testimonial-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--bravello-gold);
}

.star-rating {
  color: var(--bravello-gold);
}

/* ------------------------------------------------------------------- */
/* 8. Cookie banner and 18+ badge                                      */
/* ------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1080;
  background-color: var(--bravello-navy);
  color: var(--bravello-cream);
  border-top: 2px solid var(--bravello-gold);
  padding: 1rem 0;
  display: none;
}

.cookie-banner.show {
  display: block;
}

.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #b02a37;
  color: #fff;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------- */
/* 9. Forms                                                            */
/* ------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
  border-color: var(--bravello-gold);
  box-shadow: 0 0 0 0.25rem rgba(197, 162, 93, 0.25);
}

.form-notice {
  display: none;
}

.form-notice.show {
  display: block;
}

/* ------------------------------------------------------------------- */
/* 10. Tables                                                          */
/* ------------------------------------------------------------------- */

.comparison-table th {
  background-color: var(--bravello-navy);
  color: var(--bravello-gold);
}

.comparison-table tr:nth-of-type(even) {
  background-color: rgba(197, 162, 93, 0.08);
}

.comparison-table tbody tr.table-active,
.comparison-table tbody tr.active-row {
  background-color: rgba(197, 162, 93, 0.2);
  border-left: 4px solid var(--bravello-gold);
}

/* ------------------------------------------------------------------- */
/* 11. Misc                                                            */
/* ------------------------------------------------------------------- */

.map-embed {
  border: 0;
  width: 100%;
  height: 400px;
  border-radius: 0.5rem;
}

.glass-panel {
  background: rgba(248, 245, 240, 0.95);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
}

.rg-disclaimer {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------- */
/* 12. Utility spacing for sections                                    */
/* ------------------------------------------------------------------- */

section {
  position: relative;
}

.py-6 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ------------------------------------------------------------------- */
/* 13. Smooth scrolling / anchors                                      */
/* ------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}