/* Secret Ocean Dubai - Custom Theme CSS */

/* Glassmorphism Navigation & Cards */
.glass-nav {
  background: rgba(7, 18, 36, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.glass-card-dark {
  background: rgba(11, 25, 44, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
}

/* Luxury Hero Background Gradient Overlay */
.hero-overlay {
  background: linear-gradient(180deg, rgba(7, 18, 36, 0.7) 0%, rgba(11, 25, 44, 0.9) 100%);
}

/* Interactive Multi-Step Form Transitions */
.form-step {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Radio / Selection Option Cards */
.option-select-card {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #FFFFFF;
}

.option-select-card:hover {
  border-color: #D4AF37;
  background: #FFFDF5;
}

.option-select-card.selected {
  border-color: #D4AF37;
  background: #FEF9E7;
  box-shadow: 0 0 0 1px #D4AF37;
}

/* Pulse animation for high priority CTAs */
@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s infinite ease-in-out;
}

/* Sticky Mobile CTA Bar */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(7, 18, 36, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  padding: 10px 16px;
  display: flex;
  gap: 10px;
}

@media (min-width: 768px) {
  .sticky-mobile-cta {
    display: none;
  }
}

/* Accordion FAQ */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.faq-item.active .faq-content {
  max-height: 500px;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Star Rating Stars */
.star-gold {
  color: #F3C623;
}