/* PrayAir facelift — bold gradients, glass surfaces, and smooth motion */

:root {
  --bs-primary: #0b5dff;
  --bs-secondary: #e84e89;
  --bs-body-font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.35);
  --logo-max-height: 3.5rem;
  --shadow-soft: 0 12px 30px rgba(11, 93, 255, 0.15);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #050a14;
  --bs-body-color: #dfe7ff;
  --glass-bg: rgba(5, 10, 20, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.45);
}

body {
  font-feature-settings: 'ss01' on;
  padding-bottom: 285px;
  background:
    radial-gradient(circle at 12% 20%, rgba(11, 93, 255, 0.22), transparent 32%),
    radial-gradient(circle at 85% 12%, rgba(232, 78, 137, 0.2), transparent 32%),
    radial-gradient(circle at 80% 78%, rgba(11, 93, 255, 0.15), transparent 30%),
    #f6f8ff;
  min-height: 100vh;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 18%, rgba(11, 93, 255, 0.2), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(232, 78, 137, 0.16), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(11, 93, 255, 0.12), transparent 24%),
    #050a14;
}

/* Animated aurora blobs */
.orb {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  z-index: -1;
  animation: float-blur 14s ease-in-out infinite;
}

.orb-1 { top: -80px; left: -40px; background: rgba(11, 93, 255, 0.35); animation-delay: 0s; }
.orb-2 { top: 40%; right: -120px; background: rgba(232, 78, 137, 0.26); animation-delay: -4s; }
.orb-3 { bottom: -120px; left: 10%; background: rgba(11, 93, 255, 0.22); animation-delay: -8s; }

@keyframes float-blur {
  0%   { transform: translateY(0) scale(1); opacity: 0.55; }
  50%  { transform: translateY(-30px) scale(1.08); opacity: 0.75; }
  100% { transform: translateY(0) scale(1); opacity: 0.55; }
}

/* Fade-in for primary content */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 0.6s ease-out; }

/* Glass effect */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.glass::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 120deg, rgba(11, 93, 255, 0.15), rgba(232, 78, 137, 0.15), rgba(11, 93, 255, 0.15));
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

.glass:hover::after { opacity: 1; }

.glass > * { position: relative; z-index: 1; }

/* Focus */
*:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Rotate notice hidden by default */
#rotateNotice { display: none; background: #0d6efd; color: #fff; font-weight: 700; z-index: 1051; animation: fade-in 0.2s ease-out; }
@media (max-width: 767.98px) and (orientation: portrait) { #rotateNotice { display: block; } }

/* Promo banner (kept disabled) */
.promo-banner { position: fixed; bottom: 0; left: 0; inset-inline-start: 0; width: 100%; z-index: 1050; box-shadow: 0 -4px 8px rgba(0,0,0,0.25); background-color: rgba(var(--bs-body-bg-rgb), 0.75); text-align: center; animation: slideUpFadeIn 0.6s ease-out; display: none !important; }
:dir(rtl) .promo-banner { inset-inline-start: auto; inset-inline-end: 0; }
.promo-label { position: absolute; top: 4px; inset-inline-end: 8px; background: rgba(0,0,0,0.5); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; pointer-events: none; z-index: 1051; }
.promo-banner img { max-height: 240px; width: 100%; object-fit: contain; }
@media (max-width: 768px) { .promo-banner img { max-height: 60vw; } body { padding-bottom: 64vw; } }
@media (max-height: 768px) { .promo-banner img { max-height: 30vh; } body { padding-bottom: 34vh; } }
@keyframes slideUpFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Navbar */
.navbar {
  background: rgba(5, 10, 20, 0.65);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .navbar { background: rgba(5, 10, 20, 0.82); }
.navbar-brand img { height: var(--logo-max-height); width: auto; object-fit: contain; display: block; }
.navbar-brand { display: flex; align-items: center; gap: 0.5rem; }
:dir(rtl) .navbar-brand { flex-direction: row-reverse; }
.nav-link { font-weight: 600; letter-spacing: 0.01em; transition: color 0.15s ease; }
.nav-link:hover { color: var(--bs-secondary) !important; }

.nav-link::after {
  content: "";
  display: block;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
  transition: width 0.2s ease;
  margin-top: 4px;
  border-radius: 999px;
}

.nav-link:hover::after { width: 100%; }

/* Hero text */
section.text-center p.lead {
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 880px;
  margin-inline: auto;
}

/* Card hover lift */
.card {
  border: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(120deg, var(--bs-primary), #2a7bff);
  border: none;
  box-shadow: 0 8px 18px rgba(11, 93, 255, 0.35);
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11, 93, 255, 0.4); filter: brightness(1.02); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(11, 93, 255, 0.35); }

.btn-success {
  background: linear-gradient(120deg, #0fb67a, #13c88a);
  border: none;
  box-shadow: 0 8px 18px rgba(19, 200, 138, 0.35);
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(19, 200, 138, 0.4); filter: brightness(1.02); }

/* Inputs */
.form-control, .form-select {
  border-radius: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.9rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(11, 93, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(11, 93, 255, 0.14);
}

/* Cards & tables */
.card { border: none; box-shadow: var(--shadow-soft); }
.card-header { border-bottom: 0; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); }
[data-bs-theme="dark"] .card-header { background: rgba(255, 255, 255, 0.05); }
.table-primary th { background: linear-gradient(120deg, var(--bs-primary), #2a7bff); color: #fff; }
tbody tr:hover { background: rgba(11, 93, 255, 0.05); }
[data-bs-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

/* Floating accent dots for CTA buttons */
.btn-primary::before,
.btn-success::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.btn-primary:hover::before,
.btn-success:hover::before {
  opacity: 0.9;
  transform: translate(10px, -6px);
}

.btn-primary, .btn-success {
  position: relative;
  overflow: hidden;
}

.badge { font-weight: 600; letter-spacing: 0.01em; }

/* Utilities */
.text-flow-start { text-align: start !important; }
.text-flow-end { text-align: end !important; }
.em { font-style: italic; }
.dropdown-item { text-align: start; }
footer { padding-left: 10%; padding-right: 10%; color: rgba(0, 0, 0, 0.8); }
[data-bs-theme="dark"] footer { color: rgba(255, 255, 255, 0.7); }