/* Styles moved from inline to external stylesheet */
:root {
  --bg-gradient: linear-gradient(135deg, #4e73df, #1cc88a);
  --card-bg: rgba(255,255,255,0.08);
  --muted: rgba(255,255,255,0.85);
  --accent: #ff6b6b;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--bg-gradient);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: auto;
}

.container {
  max-width: 700px;
  padding: 40px;
  background: var(--card-bg);
  border-radius: 20px;
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1.2s ease-in-out;
}

header .icon { font-size: 60px; margin-bottom: 20px; }

h1 { font-size: 3rem; font-weight: 600; margin-bottom: 12px; }
.clinic-info { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; opacity: 0.95; }
.clinic-info a { color: inherit; text-decoration: underline; }

h2 { font-weight: 300; margin-bottom: 18px; font-size: 1.2rem; opacity: 0.9; }

p { font-size: 1rem; opacity: 0.85; line-height: 1.6; }

.footer { margin-top: 30px; font-size: 0.85rem; opacity: 0.9; }
.footer .contact { margin-bottom: 6px; font-weight: 600; }

/* Floating call button - hidden on large screens, shown only for small touch devices */
.call-button { display: none; }

/* Accessible focus states */
a:focus-visible, .call-button:focus-visible {
  outline: 3px solid rgba(255,255,255,0.14);
  outline-offset: 3px;
}

/* Bubbles */
.bubble { position: absolute; bottom: -100px; width: 40px; height: 40px; background: rgba(255,255,255,0.12); border-radius: 50%; animation: rise 15s infinite ease-in; pointer-events: none; }
.bubble:nth-child(1) { left: 10%; animation-duration: 18s; width: 25px; height: 25px; }
.bubble:nth-child(2) { left: 25%; animation-duration: 12s; }
.bubble:nth-child(3) { left: 40%; animation-duration: 20s; width: 20px; height: 20px; }
.bubble:nth-child(4) { left: 55%; animation-duration: 14s; }
.bubble:nth-child(5) { left: 70%; animation-duration: 16s; width: 30px; height: 30px; }
.bubble:nth-child(6) { left: 85%; animation-duration: 11s; }

@keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0.6; } 100% { transform: translateY(-110vh) scale(1.2); opacity: 0; } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Small screens: show call button and reduce decoration */
@media (max-width: 768px) {
  .call-button {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 12px 16px;
    border-radius: 30px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    text-decoration: none;
    font-weight: 600;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .call-button:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.32); }
  .call-button:active { transform: translateX(-50%) scale(.98); }

  /* reduce bubbles on small screens */
  .bubble { display: none; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bubble, .icon { animation: none !important; }
  .container { transition: none !important; }
}

/* Utility: visually hidden */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Link styles */
a { color: inherit; }
a:hover { text-decoration: underline; }

/* Improve contrast for small text */
.footer { opacity: 0.95; }

/* Responsive typography tweaks */
@media (max-width: 480px) {
  h1 { font-size: 2.2rem; }
  .clinic-info { font-size: 0.95rem; }
}