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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

body {
  /* Using a stunning, high-definition Doha Skyline image */
  background: linear-gradient(rgba(141, 27, 61, 0.3), rgba(20, 20, 20, 0.7)), 
              url('https://images.unsplash.com/photo-1594913785162-e6786b42dea3?auto=format&fit=crop&q=100&w=2560');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Perfect Page Entrance Animation */
.root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: slideInUp 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ultra-Premium Glassmorphism Card */
.MuiPaper-root {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 32px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
  padding: 2rem !important;
  color: #ffffff !important;
}

/* Typography and Form Elements */
h1, h2, h3, .MuiTypography-root {
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Modern Input Styling */
.MuiInputBase-root {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  color: white !important;
  transition: all 0.3s ease;
}

.MuiInputBase-root:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #8D1B3D !important; /* Qatar Maroon focus color */
  border-width: 2px !important;
}

.MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Premium Button Styling */
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #8D1B3D 0%, #a52047 100%) !important;
  box-shadow: 0 4px 15px rgba(141, 27, 97, 0.4) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.MuiButton-containedPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(141, 27, 97, 0.6) !important;
}

/* Advanced Logo Floating */
img[src*="logo"], svg {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2));
  animation: logoFloat 6s infinite ease-in-out;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Remove initial loading blur and make it crisp */
.loader {
  border: 6px solid rgba(255, 255, 255, 0.1) !important;
  border-right-color: #8D1B3D !important;
  filter: drop-shadow(0 0 10px rgba(141, 27, 61, 0.5));
}