/* Luxury Salon Spa Theme - RevampbyK (Purple Edition) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --salon-gold: #6900fe;
  --salon-gold-dark: #5500d1;
  --marble-white: #f8f9fa;
  --pure-white: #ffffff;
  --blush-pink: #fce7e8;
  --navy-deep: #1a2a44;
  --shadow-gold: 0 8px 32px rgba(105, 0, 254, 0.3);
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);
  --border-gold: 1px solid rgba(105, 0, 254, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--marble-white);
  color: var(--navy-deep);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

.section {
  padding: 100px 0;
}

.container {
  max-width: 1200px;
}

/* Neumorphic Salon Cards */
.salon-card {
  background: var(--pure-white);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 
    10px 10px 20px rgba(0,0,0,0.1),
    -10px -10px 20px rgba(255,255,255,0.8),
    inset 2px 2px 5px rgba(255,255,255,0.8),
    inset -2px -2px 5px rgba(0,0,0,0.05);
  border: var(--border-gold);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.salon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(105,0,254,0.1), transparent);
  transition: left 0.6s;
}

.salon-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    15px 15px 30px rgba(0,0,0,0.15),
    -15px -15px 30px rgba(255,255,255,0.9),
    var(--shadow-gold);
}

.salon-card:hover::before {
  left: 100%;
}

/* Hero Section - Marble Elegance */
.hero-gradient {
  background: linear-gradient(135deg,
    var(--pure-white) 0%,
    #f0edea 30%,
    var(--blush-pink) 70%,
    var(--pure-white) 100%);
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\"><defs><radialGradient id=\\"g\\" cx=\\"50%\\" cy=\\"50%\\"><stop offset=\\"0%\\" stop-color=\\"%236900fe\\" stop-opacity=\\"0.1\\"/><stop offset=\\"100%\\" stop-color=\\"%236900fe\\" stop-opacity=\\"0\\"/></radialGradient></defs><circle cx=\\"20\\" cy=\\"20\\" r=\\"2\\" fill=\\"url(%23g)\\"></circle><circle cx=\\"80\\" cy=\\"80\\" r=\\"1.5\\" fill=\\"url(%23g)\\"></circle><circle cx=\\"40\\" cy=\\"70\\" r=\\"1\\" fill=\\"url(%23g)\\"></circle></svg>') repeat;
  opacity: 0.3;
  animation: sparkle 20s linear infinite;
}

@keyframes sparkle {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-100px) rotate(360deg); }
}

.text-gold { color: var(--salon-gold) !important; }
.text-shadow { text-shadow: 0 4px 12px rgba(105,0,254,0.4); }
.shadow-gold { box-shadow: var(--shadow-gold); }

/* Buttons */
.btn-salon-gold {
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  color: var(--pure-white) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-salon-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold), 0 20px 40px rgba(105,0,254,0.4);
  background: linear-gradient(135deg, var(--salon-gold-dark), var(--salon-gold));
}

.btn-salon-gold::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width 0.4s, height 0.4s;
}

.btn-salon-gold:active::after {
  width: 300px;
  height: 300px;
}

.btn-glass-alt {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border: var(--border-gold);
  color: var(--navy-deep);
  border-radius: 50px;
  padding: 12px 28px;
  transition: all 0.3s ease;
}

.btn-glass-alt:hover {
  background: var(--pure-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Navbar */
.navbar-marble {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,249,250,0.9));
  backdrop-filter: blur(30px);
  border-bottom: var(--border-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.navbar-brand .text-gold { color: var(--salon-gold) !important; }

/* Forms - Elegant */
.form-control, .form-select {
  background: rgba(255,255,255,0.7);
  border: 2px solid rgba(105,0,254,0.2);
  border-radius: 16px;
  padding: 14px 20px;
  transition: all 0.3s ease;
  color: var(--navy-deep);
}

.form-control:focus, .form-select:focus {
  background: var(--pure-white);
  border-color: var(--salon-gold);
  box-shadow: 0 0 0 4px rgba(105,0,254,0.15);
  transform: translateY(-2px);
}

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

/* Gallery */
.gallery-item img, #galleryModalImg {
  transition: all 0.4s ease;
  border-radius: 20px;
}

.gallery-item:hover img {
  transform: scale(1.05);
  box-shadow: var(--shadow-gold);
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeInUp 1s ease forwards;
}

/* Status Page Styles */
.status-gradient {
  background: linear-gradient(135deg, #1a0d2e 0%, #16213e 50%, #0f0f23 100%);
  min-height: 80vh;
}

.status-hero {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(105,0,254,0.3);
  border-radius: 32px;
}

.status-badge .badge-salon {
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  font-size: 1.1rem;
}

.photo-item img {
  transition: transform 0.3s ease;
}

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

.action-buttons .btn {
  min-height: 56px;
  border-radius: 50px;
}

/* Enhanced Responsive */
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .salon-card { padding: 1.5rem; margin-bottom: 2rem; }
  .hero-gradient, .status-gradient { padding: 80px 0; text-align: center; }
  .status-hero { margin: 1rem; padding: 2rem 1.5rem; }
  .display-3 { font-size: 2.5rem; }
  .h2 { font-size: 1.75rem; }
  .action-buttons .btn { width: 100%; margin-bottom: 1rem; }
}

@media (max-width: 480px) {
  .status-hero { padding: 1.5rem 1rem; }
  .photo-item { margin-bottom: 1rem; }
}

/* Accordion FAQ */
.accordion-button {
  background: var(--pure-white) !important;
  border-radius: 16px !important;
  border: var(--border-gold) !important;
  font-weight: 500;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--blush-pink), var(--pure-white)) !important;
  color: var(--salon-gold-dark) !important;
}

.accordion-body {
  background: rgba(248,249,250,0.5);
  border-radius: 0 0 16px 16px;
}

/* Utilities */
.rounded-salon { border-radius: 24px; }
.shadow-marble { box-shadow: var(--shadow-soft); }
.border-gold { border: var(--border-gold) !important; }
.opacity-90 { opacity: 0.9; }

/* Badge */
.badge-salon {
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  color: var(--pure-white);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}