/* ========================================
   MAIN CSS - Central Import File
   Rafy's Barbershop Landing Page
   ======================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600;700&display=swap');

/* Base Styles */
@import url('reset.css');
@import url('variables.css');
@import url('base.css');

/* Components */
@import url('components.css');

/* Sections */
@import url('sections/header.css');
@import url('sections/hero.css');
@import url('sections/services.css');
@import url('sections/about.css');
@import url('sections/gallery.css');
@import url('sections/testimonials.css');
@import url('sections/location.css');
@import url('sections/cta.css');
@import url('sections/footer.css');

/* Animations & Responsive */
@import url('animations.css');
@import url('responsive.css');

/* ========================================
   Custom Scrollbar (Optional)
   ======================================== */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-dark);
}

/* ========================================
   Selection Color
   ======================================== */

::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ========================================
   Smooth Scroll Offset (for fixed header)
   ======================================== */

html {
  scroll-padding-top: var(--header-height);
}

/* ========================================
   Loading State (Initial Page Load)
   ======================================== */

body.loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.page-loader__spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--color-dark-gray);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ========================================
   Utility: No Scroll (for mobile menu)
   ======================================== */

body.no-scroll {
  overflow: hidden;
}