/* ==========================================================================
   ROYAL SPA PALACE - Luxury White / Gold / Black Theme
   Loaded AFTER style.css so it overrides legacy styles.
   ========================================================================== */

:root {
  --gold:        #d4af37;
  --gold-soft:   #e6c05a;
  --gold-deep:   #a8842a;
  --gold-mist:   rgba(212, 175, 55, 0.18);
  --black:       #0b0b0d;
  --black-2:     #141416;
  --black-3:     #1d1d21;
  --white:       #fdfcfb;
  --cream:       #f6f1e7;
  --gray:        #b7b2a6;
  --font-head:   'Playfair Display', 'Georgia', serif;
  --font-body:   'Poppins', 'Segoe UI', sans-serif;
  --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.25);
  --transition:  all .45s cubic-bezier(.25, .8, .25, 1);
}

/* ---------- Base overrides ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--white) !important;
  color: #23201a;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--black);
}

::selection { background: var(--gold); color: #000; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), var(--gold-deep)); border-radius: 6px; }

/* ---------- Gold gradient text ---------- */
.gold-text {
  background: linear-gradient(90deg, #a8842a, #e6c05a 45%, #fff3c4 55%, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn-gold {
  position: relative;
  display: inline-block;
  padding: 14px 34px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--black);
  background: linear-gradient(135deg, #f7e08c, #d4af37 50%, #b6902c);
  border: 1px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  transition: var(--transition);
  cursor: pointer;
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .65) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  z-index: -1;
}
.btn-gold:hover { color: #fff; box-shadow: var(--shadow-gold); transform: translateY(-3px); }
.btn-gold:hover::after { transform: translateX(120%); }

.btn-outline-gold {
  display: inline-block;
  padding: 13px 32px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  transition: var(--transition);
  background: transparent;
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: #000;
  box-shadow: var(--shadow-gold);
  transform: translateY(-3px);
  text-decoration: none;
}

/* ---------- Section shells ---------- */
.lux-section { padding: 90px 0; position: relative; }
.lux-section--black { background: var(--black); color: var(--gray); }
.lux-section--cream { background: var(--cream); }
.lux-section--white { background: var(--white); }

.lux-section--black h1, .lux-section--black h2,
.lux-section--black h3, .lux-section--black h4 { color: #fff; }

/* ---------- Section headings ---------- */
.lux-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 12px;
  color: var(--gold-deep);
  margin-bottom: 10px;
  display: block;
}
.lux-section--black .lux-eyebrow { color: var(--gold); }

.royal-title {
  text-align: center;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  position: relative;
  font-family: var(--font-head);
}
.royal-title .gold-text { display: inline-block; }

.gold-divider {
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 22px auto 20px;
  position: relative;
}
.gold-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
  animation: royalSpin 6s linear infinite;
}
@keyframes royalSpin { to { transform: translateX(-50%) rotate(405deg); } }

.royal-sub {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
  color: #6b665c;
  font-size: 16px;
  line-height: 1.8;
}
.lux-section--black .royal-sub { color: var(--gray); }

/* ---------- Luxury cards ---------- */
.lux-card {
  background: #fff;
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 4px;
  padding: 34px 26px;
  height: 100%;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}
.lux-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #fff3c4, var(--gold));
  background-size: 200% 100%;
  animation: goldFlow 4s linear infinite;
  opacity: 0;
  transition: opacity .4s;
}
.lux-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-gold); }
.lux-card:hover::before { opacity: 1; }
@keyframes goldFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.lux-card--dark { background: var(--black-2); border-color: rgba(212, 175, 55, .18); }
.lux-card--dark h3, .lux-card--dark h4, .lux-card--dark h5 { color: #fff; }
.lux-card--dark p { color: var(--gray); }

.lux-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--gold);
  background: var(--gold-mist);
  border: 1px solid rgba(212, 175, 55, .4);
  transition: var(--transition);
}
.lux-card:hover .lux-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #000;
  transform: rotateY(180deg);
}

/* ---------- Hero slider ---------- */
.hero-slide {
  height: 92vh;
  min-height: 560px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}
.hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 14s ease-in-out infinite alternate;
  opacity: .55;
}
@keyframes kenBurns {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.12) translateY(-2%); }
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(11, 11, 13, .55) 100%),
    linear-gradient(to top, rgba(11, 11, 13, .85), transparent 55%);
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 22px;
  max-width: 950px;
}
.hero-content .lux-eyebrow { color: var(--gold); }
.hero-content h1 {
  color: #fff;
  font-size: clamp(38px, 7vw, 78px);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero-content p {
  color: #e9e4d8;
  font-size: clamp(16px, 2vw, 20px);
  max-width: 640px;
  margin: 0 auto 34px;
  line-height: 1.8;
}
.carousel-item { transition: transform 1.2s ease, opacity 1.2s ease; }
.carousel-indicators [data-bs-target] {
  width: 34px;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
  transition: var(--transition);
}
.carousel-indicators .active { background: var(--gold); width: 60px; }

/* ---------- Animated reveal (IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .9s cubic-bezier(.25, .8, .25, 1), transform .9s cubic-bezier(.25, .8, .25, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float-anim { animation: floatY 4s ease-in-out infinite; }

/* ---------- Gold marquee divider ---------- */
.gold-marquee {
  background: linear-gradient(90deg, var(--black), var(--black-3));
  border-top: 1px solid rgba(212, 175, 55, .35);
  border-bottom: 1px solid rgba(212, 175, 55, .35);
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
}
.gold-marquee-track {
  display: inline-block;
  animation: marquee 28s linear infinite;
  font-family: var(--font-head);
  color: var(--gold);
  letter-spacing: 5px;
  font-size: 15px;
  text-transform: uppercase;
}
.gold-marquee-track span { margin: 0 28px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Gold feature row (stats) ---------- */
.lux-stat { text-align: center; }
.lux-stat .num {
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: 700;
  color: var(--gold);
}
.lux-stat .lbl { color: var(--gray); text-transform: uppercase; letter-spacing: 3px; font-size: 12px; }

/* ---------- Nav underline animation ---------- */
.nav-link-lux {
  position: relative;
  color: #eee !important;
  text-decoration: none;
  padding: 8px 0 !important;
  letter-spacing: .5px;
  font-size: 14px;
  text-transform: uppercase;
}
.nav-link-lux::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width .35s ease;
}
.nav-link-lux:hover::after, .nav-link-lux.active::after { width: 100%; }
.nav-link-lux.active { color: var(--gold) !important; }
.nav-link-lux i { margin-right: 6px; color: var(--gold); }

/* ---------- Back to top ---------- */
.lux-backtop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #000;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  border: none;
}
.lux-backtop.show { display: flex; animation: riseIn .5s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .hero-slide { height: 70vh; }
  .lux-section { padding: 60px 0; }
  .gold-marquee-track { animation-duration: 18s; }
}
/* ===== Gold success alert (no green) ===== */
.lux-alert-ok {
  background: linear-gradient(135deg, #221c0d, #2f2613);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #e6c05a;
  border-radius: 10px;
  padding: 12px 16px;
}

/* ===== Gold icon text ===== */
.text-gold { color: #d4af37 !important; }