/* =========================================================
   HEALTHBOOKING - MAIN CSS
   ========================================================= */

/* -----------------------------
   1️⃣ IMPORTS (MUTLAKA EN ÜSTTE)
------------------------------ */

@import url('/components/sliders/hero-slider.css');
@import url('/components/header/header.css');
@import url('/components/footer/footer.css');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* -----------------------------
   2️⃣ CSS RESET
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f7fa;
  color: #1f2933;
  line-height: 1.6;
  overflow-x: hidden;
}

/* -----------------------------
   3️⃣ ROOT VARIABLES
------------------------------ */
:root {
  --primary: #00b4d8;
  --primary-dark: #0096c7;
  --secondary: #023e8a;
  --dark: #0b2c3d;
  --light: #ffffff;
  --gray: #6b7280;

  --container-width: 1250px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* -----------------------------
   4️⃣ GLOBAL ELEMENTS
------------------------------ */
a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* -----------------------------
   5️⃣ PAGE LOADING
------------------------------ */
.page-loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading-spinner {
  font-size: 48px;
  color: var(--primary);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}