/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Body/background */
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#F8F9FA;
  min-height:100vh;
  padding:20px;
}

/* Ensure full-page white background only on forgot password page */
body.forgot-pw,
body.forgot-pw .wrapper,
body.forgot-pw .main-panel,
body.forgot-pw .page-inner,
body.forgot-pw .page-header,
body.forgot-pw .container,
body.forgot-pw .row{
  background:#fff !important;
}

/* Readability overrides on light background (forgot-pw only) */
body.forgot-pw .header h1{ color:#111827; text-shadow:none }
body.forgot-pw .header p{ color:#4b5563 }

/* Contact cards: make border visible on white bg */
body.forgot-pw .contact-card{ border:1px solid #e5e7eb }

/* Info cards: switch to light surfaces and dark text */
body.forgot-pw .info-card{
  background:#fff;
  color:#111827;
  border:1px solid #e5e7eb;
}
body.forgot-pw .info-card:hover{ background:#fff }
body.forgot-pw .info-card h3{ color:#111827 }
body.forgot-pw .hours-list li{ border-bottom:1px solid #e5e7eb }
body.forgot-pw .status-indicator{ color:#111827 }

/* Tips section if present */
body.forgot-pw .tips-section{
  background:#f9fafb;
  color:#111827;
  border:1px solid #e5e7eb;
}
body.forgot-pw .tips-section h3{ color:#111827 }
body.forgot-pw .tip-item{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
}

/* Container */
.container{max-width:1000px;margin:0 auto}

/* Header */
.header{text-align:center;margin-bottom:50px;animation:fadeInDown .8s ease-out}
.header h1{color:#F8F9FA;font-size:3.5rem;font-weight:700;margin-bottom:15px;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.header p{color:rgba(255,255,255,.9);font-size:1.3rem;max-width:700px;margin:0 auto;line-height:1.6}

/* Cards grid */
.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,auto));
    gap:30px;
    margin-bottom:40px;
    justify-content: center;
}

/* Contact card */
.contact-card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:35px;
  box-shadow:0 20px 40px rgba(0,0,0,.1);
  border:1px solid rgba(255,255,255,.2);
  transition:.3s ease;
  animation:fadeInUp .8s ease-out;
}
.contact-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.15)
}
.contact-card .icon{
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  font-size:2rem;color:#fff;box-shadow:0 10px 30px rgba(102,126,234,.3)
}
.contact-card h3{font-size:1.5rem;color:#333;text-align:center;margin-bottom:15px;font-weight:600}
.contact-card .details{text-align:center;color:#666;line-height:1.8}
.contact-card .primary-contact{font-size:1.2rem;font-weight:600;color:#667eea;margin-bottom:10px}
.contact-card .secondary-info{font-size:.95rem;color:#888}
.contact-card .action-btn{
  display:inline-block;margin-top:20px;padding:12px 25px;border-radius:25px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;text-decoration:none;
  font-weight:600;transition:.3s ease;font-size:.9rem
}
.contact-card .action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4)}

/* Info cards */
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.info-card{
  background:rgba(255,255,255,.1);backdrop-filter:blur(20px);border-radius:20px;padding:30px;
  color:#fff;border:1px solid rgba(255,255,255,.2);text-align:center;transition:.3s ease;animation:fadeInUp 1s ease-out
}
.info-card:hover{background:rgba(255,255,255,.15);transform:translateY(-5px)}
.info-card .icon{font-size:2.5rem;margin-bottom:15px}
.info-card h3{font-size:1.3rem;margin-bottom:15px;color:#fff}
.hours-list{list-style:none;text-align:left}
.hours-list li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hours-list li:last-child{border-bottom:none}
.status-indicator{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:15px;font-weight:600}
.status-dot{width:12px;height:12px;background:#10b981;border-radius:50%;animation:pulse 2s infinite}

/* Emergency banner */
.emergency-banner{
  background:rgba(239,68,68,.9);backdrop-filter:blur(20px);border-radius:15px;padding:25px;color:#fff;
  text-align:center;margin-bottom:30px;border:1px solid rgba(255,255,255,.2);animation:fadeIn 1.2s ease-out
}
.emergency-banner .icon{font-size:2rem;margin-bottom:10px}
.emergency-banner h3{font-size:1.4rem;margin-bottom:10px}

/* Tips */
.tips-section{
  background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border-radius:20px;padding:35px;color:#fff;
  border:1px solid rgba(255,255,255,.1);margin-top:40px;animation:fadeInUp 1.4s ease-out
}
.tips-section h3{font-size:1.5rem;margin-bottom:20px;text-align:center}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.tip-item{background:rgba(255,255,255,.1);padding:20px;border-radius:15px;text-align:center;transition:.3s ease}
.tip-item:hover{background:rgba(255,255,255,.15)}
.tip-item .tip-icon{font-size:1.5rem;margin-bottom:10px}

/* Desktop: force 3 columns for contact cards */
@media (min-width:992px){
  .contact-grid{
      grid-template-columns: repeat(2, auto);
      justify-content: center;
  }
}


/* Responsive */
@media (max-width:768px){
  .header h1{font-size:2.8rem}
  .header p{font-size:1.1rem}
  .contact-card,.info-card{padding:25px}
  .contact-grid{grid-template-columns:1fr}
}

/* Animations */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}