/* SUN Insurance glossy theme */
:root{
  --sun-bg: linear-gradient(135deg, #f6f9ff 0%, #eef3ff 40%, #eaf7ff 100%);
  --sun-card-bg: rgba(255,255,255,0.75);
  --sun-blur: saturate(180%) blur(8px);
  --sun-shadow-sm: 0 6px 18px rgba(23,34,71,.08), 0 2px 6px rgba(23,34,71,.06);
  --sun-shadow-md: 0 14px 38px rgba(23,34,71,.09), 0 6px 18px rgba(23,34,71,.06);
  --sun-primary: #0d6efd;
  --sun-primary-2: #7aa6ff;
}

html, body { height: 100%; }
body{
  background: var(--sun-bg) fixed;
  background-attachment: fixed;
}

.navbar{
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 100%);
  backdrop-filter: var(--sun-blur);
  -webkit-backdrop-filter: var(--sun-blur);
  box-shadow: var(--sun-shadow-sm);
}

.card{
  background: var(--sun-card-bg);
  backdrop-filter: var(--sun-blur);
  -webkit-backdrop-filter: var(--sun-blur);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--sun-shadow-sm);
  border-radius: 16px;
}
.card:hover{ box-shadow: var(--sun-shadow-md); }

.btn-primary{
  background: linear-gradient(180deg, var(--sun-primary) 0%, #0b5ed7 100%);
  border: none;
  box-shadow: 0 10px 20px rgba(13,110,253,.2), 0 3px 8px rgba(13,110,253,.15);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-primary{
  border: 1px solid var(--sun-primary);
  color: var(--sun-primary);
  background: rgba(13,110,253,.06);
}

.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid rgba(13,110,253,.25);
  background: rgba(255,255,255,.85);
}
.form-control:focus, .form-select:focus{
  border-color: var(--sun-primary);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

/* Timeline styling */
.timeline{
  list-style: none; margin: 0; padding: 0; position: relative;
}
.timeline li{ display:flex; gap:.75rem; align-items:center; padding:.35rem 0; }
.timeline .dot{ width:10px; height:10px; border-radius:50%; background: var(--sun-primary); box-shadow: 0 0 0 4px rgba(13,110,253,.12); }
.timeline .time{ color:#6c757d; width: 120px; font-variant-numeric: tabular-nums; }
.timeline .label{ font-weight:600; }

/* Footer */
footer{ background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.8) 100%); backdrop-filter: var(--sun-blur); -webkit-backdrop-filter: var(--sun-blur); }

/* Login page */
.auth-wrap{ max-width: 440px; margin: 0 auto; }
.brand-mark{ font-weight:800; letter-spacing:.4px; }

/* Subtle animations */
*[data-elevate]{ transition: transform .15s ease, box-shadow .2s ease; }
*[data-elevate]:hover{ transform: translateY(-2px); }

/* Ensure navbar dropdown overlays any content below (hero blur, etc.) */
.navbar{ position: relative; z-index: 1050; }
.navbar .dropdown-menu{ z-index: 2000; }

/* Hero banner */
.hero{
  position: relative;
  border-radius: 20px;
  padding: 36px 28px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13,110,253,.08), rgba(255,255,255,.65));
  box-shadow: var(--sun-shadow-md);
}
.hero:before{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(800px 400px at -10% 0%, rgba(122,166,255,.35), transparent 60%),
              radial-gradient(800px 400px at 110% 50%, rgba(255,255,255,.6), transparent 70%);
  filter: blur(30px);
  pointer-events: none; /* don't block clicks on dropdowns above the hero */
  z-index: 0;
}
.hero-inner{ position:relative; z-index:1; }
.hero .lead{ color:#334155; }
.glass{ background: var(--sun-card-bg); backdrop-filter: var(--sun-blur); -webkit-backdrop-filter: var(--sun-blur); border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow: var(--sun-shadow-sm); }
.icon-circle{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #ffffff, #eef4ff); box-shadow: inset 0 0 0 1px rgba(13,110,253,.08), 0 6px 18px rgba(23,34,71,.08); }