/* HD Salon Custom Styling & Animations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-charcoal: #121215;
  --bg-card: #1a1a20;
  --bg-elevated: #24242d;
  --pink-primary: #ff80a0;
  --pink-hover: #ff5c85;
  --pink-glow: rgba(255, 128, 160, 0.35);
  --border-color: rgba(255, 255, 255, 0.08);
}

body {
  background-color: var(--bg-charcoal);
  color: #f3f4f6;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  overflow-x: clip;
  scroll-behavior: smooth;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

/* Unified Global Paragraph Sizing Across Whole Project */
p {
  font-size: 0.875rem !important; /* Standard 14px across whole website */
  line-height: 1.65 !important;
}

/* Top Announcement Bar State */
.top-bar-transparent {
  background: rgba(10, 10, 15, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Navigation Bar States */
#main-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-transparent {
  background: rgba(12, 12, 16, 0.12) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

.nav-scrolled, .glass-nav {
  background: rgba(12, 12, 16, 0.32) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.25) !important;
}

.glass-card {
  background: rgba(26, 26, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(255, 128, 160, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 128, 160, 0.15);
}

.glass-panel {
  background: rgba(36, 36, 45, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Pink Glow Utilities */
.btn-pink {
  background-color: var(--pink-primary);
  color: #0d0d10;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--pink-glow);
  transition: all 0.3s ease;
}

.btn-pink:hover {
  background-color: var(--pink-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 92, 133, 0.5);
}

/* Frosted Glass Button (Explore Services) */
.btn-glass {
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 128, 160, 0.6) !important;
  color: #ff80a0 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 128, 160, 0.3);
}

.text-pink-glow {
  text-shadow: 0 0 12px rgba(255, 128, 160, 0.4);
}

.border-pink-glow {
  box-shadow: 0 0 15px rgba(255, 128, 160, 0.25);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0c;
}
::-webkit-scrollbar-thumb {
  background: #2e2e3a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff80a0;
}

/* Before & After Interactive Slider */
.ba-container {
  position: relative;
  overflow: hidden;
  user-select: none;
}
.ba-after-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.ba-before-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 10;
}
.ba-before-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ba-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #ff80a0;
  z-index: 20;
  cursor: ew-resize;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(255, 128, 160, 0.8);
}
.ba-slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff80a0;
  color: #0d0d10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

/* Custom Accordion Chevron Animation */
.accordion-header[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

/* Modal Overlay Animation */
.modal-overlay {
  animation: fadeIn 0.3s ease-out forwards;
}
.modal-box {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast System */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toast {
  background: rgba(26, 26, 32, 0.95);
  border: 1px solid rgba(255, 128, 160, 0.4);
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Continuous Right-to-Left Marquee Animation */
@keyframes marqueeLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-left {
  display: flex;
  width: max-content;
  animation: marqueeLeft 30s linear infinite;
}

.animate-marquee-left:hover {
  animation-play-state: paused;
}

/* ===================== HERO VIDEO SECTION ===================== */

/* Full-Screen Hero Viewport Definition (Exact Viewport Fit Without Scrolling) */
.hero-fullscreen {
  height: calc(100dvh - 116px);
  min-height: 480px;
  max-height: calc(100dvh - 116px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .hero-fullscreen {
    height: calc(100dvh - 106px);
    min-height: 440px;
    max-height: calc(100dvh - 106px);
  }
}

/* Smooth video reveal when playing & disable browser screenshot/hover widgets */
#hero-bg-video {
  filter: saturate(1.15) brightness(0.85);
  will-change: opacity;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Fallback poster zoom animation (Ken Burns effect) when video not loaded */
@keyframes posterZoom {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}
#hero-bg-video[poster] {
  animation: posterZoom 8s ease-out forwards;
}

/* Scroll-down indicator bounce animation */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50%        { transform: translateX(-50%) translateY(6px); opacity: 0.6; }
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  animation: scrollBounce 2s ease-in-out infinite;
  color: rgba(255, 128, 160, 0.9);
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-scroll-indicator:hover {
  color: #ff80a0;
  transform: translateX(-50%) scale(1.1);
}
.hero-scroll-indicator span {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Video cinematic color overlay for brand consistency */
.hero-video-tint {
  background: linear-gradient(
    135deg,
    rgba(255, 128, 160, 0.08) 0%,
    rgba(18, 18, 21, 0.2) 50%,
    rgba(18, 18, 21, 0.4) 100%
  );
}

/* Shake Animation for Form Validation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Responsive Touch Scrolling Utilities */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 128, 160, 0.3) rgba(26, 26, 32, 0.5);
}

.touch-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.touch-scroll::-webkit-scrollbar-track {
  background: rgba(26, 26, 32, 0.5);
  border-radius: 9999px;
}

.touch-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 128, 160, 0.3);
  border-radius: 9999px;
}

.touch-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 128, 160, 0.6);
}


/* ============================================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Mobile (<=640px) | Tablet (641-1024px) | Desktop (>=1025px)
   ============================================================ */

/* Global overflow prevention without breaking sticky positioning */
html, body { overflow-x: clip; max-width: 100%; }

/* Safe area insets for iPhone */
@supports (padding: env(safe-area-inset-bottom)) {
  #toast-container {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
}

/* Remove tap highlight on mobile */
@media (max-width: 768px) {
  button, a { -webkit-tap-highlight-color: transparent; }
}

/* Mobile drawer width */
#mobile-menu { max-width: 85vw; }
@media (max-width: 380px) {
  #mobile-menu { width: 100vw; max-width: 100vw; }
}

/* Modals: sheet-style on mobile - slide up from bottom */
@media (max-width: 640px) {
  #quick-booking-modal,
  #admin-promo-modal,
  #admin-service-modal,
  #admin-profile-modal,
  #view-appt-details-modal,
  #admin-settings-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #quick-booking-modal > div,
  #admin-promo-modal > div,
  #admin-service-modal > div,
  #admin-profile-modal > div,
  #view-appt-details-modal > div,
  #admin-settings-modal > div {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Prevent iOS zoom on input focus */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Admin panel layout */
@media (max-width: 1024px) {
  #admin-main-wrapper { flex-direction: column; }
}

/* Admin stats: 2-col on mobile */
@media (max-width: 640px) {
  #view-dashboard .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  table th, table td {
    font-size: 0.65rem !important;
    padding: 0.45rem 0.5rem !important;
    white-space: nowrap;
  }
}

/* Admin dropdown viewport clamp */
#admin-profile-dropdown {
  right: 0; left: auto;
  min-width: 220px;
  max-width: calc(100vw - 1rem);
}
#notif-dropdown-menu { max-width: min(380px, calc(100vw - 1rem)); }
@media (max-width: 480px) {
  #notif-dropdown-menu { right: -50px; width: calc(100vw - 1rem); }
}

/* Admin forms: single-col on mobile */
@media (max-width: 640px) {
  #admin-settings-form .grid-cols-2,
  #admin-service-modal .grid-cols-2,
  #admin-promo-modal .grid-cols-2,
  #view-appt-details-modal .grid-cols-2,
  #quick-booking-modal .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Admin gallery and services grids */
@media (max-width: 640px) {
  #admin-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  #admin-services-grid { grid-template-columns: 1fr !important; }
}

/* Admin countdown boxes compact on mobile */
@media (max-width: 420px) {
  #admin-promo-banner-card .flex {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
}

/* Homepage promo countdown compact */
@media (max-width: 480px) {
  #home-promo-days, #home-promo-hours,
  #home-promo-mins, #home-promo-secs {
    font-size: 1.25rem !important;
  }
}

/* Stats: 2-col on mobile */
@media (max-width: 640px) {
  section .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Footer responsive */
@media (max-width: 640px) {
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
}

/* Toast responsive */
@media (max-width: 480px) {
  #toast-container {
    bottom: 12px; right: 0.5rem; left: 0.5rem; align-items: stretch;
  }
  .toast { padding: 12px 14px; font-size: 0.75rem; }
}

/* Hero: tiny screens */
@media (max-width: 380px) {
  .hero-fullscreen h1 { font-size: 1.1rem !important; }
  .hero-fullscreen p { font-size: 0.75rem !important; }
}

/* Galaxy Fold < 360px */
@media (max-width: 359px) {
  .hero-fullscreen h1 { font-size: 1rem !important; }
}

/* Disable hover transforms on touch devices */
@media (hover: none) {
  .glass-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
  }
  .btn-pink:hover, .btn-glass:hover { transform: none !important; }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-fullscreen { min-height: 280px; height: 100dvh; }
}

/* Tablet (641-1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  section .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  #admin-sidebar { width: 280px; }
}

/* Gallery grids */
@media (max-width: 480px) {
  .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* Admin table horizontal scroll */
@media (max-width: 1024px) {
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Section padding reduction on mobile */
@media (max-width: 640px) {
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .mb-14 { margin-bottom: 2rem !important; }
}

/* Before/after slider on mobile */
@media (max-width: 640px) {
  .ba-slider-button { width: 32px; height: 32px; font-size: 12px; }
}

/* Global media overflow safety */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* --- FEATURED & BRIDAL SERVICE CARDS MOBILE FRAMING --- */
@media (max-width: 640px) {
  #home-featured-services-grid .featured-service-img-container,
  #home-featured-services-grid .relative.overflow-hidden.bg-charcoal-darker,
  .featured-service-img-container {
    height: 16.5rem !important; /* 264px on mobile: allows bridal portraits to display face + jewelry completely */
    min-height: 250px !important;
  }

  /* Ensure bridal images never cut off the face on mobile */
  img[src*="bride"],
  img[src*="bridal"],
  .object-top {
    object-position: center 20% !important;
  }
}

/* Floating Quick Actions Dock (Scroll To Top & WhatsApp) */
.floating-action-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .floating-action-dock {
    bottom: 18px;
    right: 18px;
    gap: 10px;
  }
}

/* Floating WhatsApp Direct Action Button */
.whatsapp-float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  animation: whatsapp-pulse 2.5s infinite;
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float-btn:hover {
  background: #20ba5a;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.7);
  color: #ffffff !important;
}

.whatsapp-float-btn i {
  font-size: 28px;
  line-height: 1;
  color: #ffffff;
}

/* Floating Scroll To Top Button */
.scroll-top-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #181820;
  color: #ff80a0 !important;
  border: 2px solid #ff80a0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 128, 160, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.scroll-top-btn:hover {
  background: #ff80a0;
  color: #121215 !important;
  border-color: #ff80a0;
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 10px 25px rgba(255, 128, 160, 0.6);
}

.scroll-top-btn i {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 640px) {
  .whatsapp-float-btn,
  .scroll-top-btn {
    width: 46px;
    height: 46px;
  }
  .whatsapp-float-btn i {
    font-size: 24px;
  }
  .scroll-top-btn i {
    font-size: 23px;
  }
}