/**
 * RMIM draft theme: Liquid Air / Glass (over the current blue palette)
 * Loaded after style.css. Layout and content stay the same.
 *
 * Very high transparency (roughly 0.08–0.20 fills) with a strong
 * backdrop blur, so cards and chrome read as frosted glass over a
 * soft sky mesh. Backdrop-filter is applied only to major surfaces
 * (not nested children) to keep painting sane, especially in Safari.
 *
 * Preview only — do not deploy until approved.
 */

:root {
  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-bg-strong: rgba(255, 255, 255, 0.2);
  --glass-bg-soft: rgba(255, 255, 255, 0.1);
  --glass-blur: 22px;
  --glass-sat: 170%;
  --glass-border: rgba(255, 255, 255, 0.42);
  --glass-border-strong: rgba(255, 255, 255, 0.5);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 12px 36px rgba(25, 119, 204, 0.12);
  --glass-radius: 20px;
  --glass-radius-sm: 16px;
  --glass-blue: rgba(43, 150, 204, 0.22);
  --glass-blue-strong: rgba(43, 150, 204, 0.55);
  --glass-blue-hover: rgba(29, 136, 189, 0.68);
  --glass-navy: rgba(22, 56, 78, 0.5);
  --glass-gold: rgba(255, 240, 75, 0.7);
  --glass-gold-hover: rgba(255, 230, 0, 0.82);
  --glass-text: #16384e;
  --glass-muted: #3d5668;
}

/*--------------------------------------------------------------
# Fixed sky mesh (what the glass looks through)
--------------------------------------------------------------*/
html {
  background-color: #e7f3fb;
}

body {
  background-color: transparent;
  color: var(--glass-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 6% -8%, rgba(125, 201, 240, 0.55), transparent 58%),
    radial-gradient(ellipse 70% 50% at 98% 6%, rgba(43, 150, 204, 0.22), transparent 52%),
    radial-gradient(ellipse 55% 45% at 16% 78%, rgba(25, 119, 204, 0.12), transparent 55%),
    radial-gradient(ellipse 65% 50% at 90% 96%, rgba(147, 214, 245, 0.45), transparent 58%),
    radial-gradient(ellipse 42% 32% at 52% 42%, rgba(255, 252, 230, 0.35), transparent 70%),
    radial-gradient(ellipse 80% 42% at 82% 100%, rgba(90, 190, 240, 0.5), transparent 60%),
    radial-gradient(ellipse 55% 32% at 12% 100%, rgba(255, 236, 160, 0.28), transparent 55%),
    linear-gradient(180deg, #eef7fd 0%, #d7ecf8 42%, #eaf5fc 100%);
}

/* Let the mesh show through page sections */
.section-bg,
.breadcrumbs,
.bg-light,
.card.bg-light,
#main {
  background-color: transparent !important;
  background-image: none;
}

/* Readable body copy on the light sky mesh */
body,
p,
.why-us .icon-boxes .icon-box p,
.provider-card p,
.appt-help,
.testimonials .testimonial-item p {
  color: var(--glass-muted);
}

h1, h2, h3, h4, h5, h6,
.main-title h2,
.provider-card h2,
.provider-card h2 a,
.navbar a,
.navbar .dropdown ul a,
.about .icon-boxes h3 {
  color: var(--glass-text);
}

/*--------------------------------------------------------------
# Shared glass language (blur only on major surfaces)
--------------------------------------------------------------*/
.navbar .dropdown ul,
.navbar-mobile ul,
.why-us .icon-boxes .icon-box,
.why-us .content,
.doctors .member,
.testimonials .testimonial-item,
.services .icon-box,
.provider-card,
.contact .php-email-form,
.contact .info,
.card,
.appt-form,
.alert-info,
.hero-glass,
.news-body,
.sidebar .title h5,
.share-post,
.lang-toggle {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/*--------------------------------------------------------------
# Topbar — airy frost, dark text (white type would fail on 0.2 fills)
--------------------------------------------------------------*/
#topbar {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset);
  color: var(--glass-text);
}

#topbar .container,
#topbar .contact-info a,
#topbar .text-white {
  color: var(--glass-text) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/*--------------------------------------------------------------
# Header — frost the bar with a pseudo-element so backdrop-filter
# does not become a containing block (that clips the fixed mobile nav).
--------------------------------------------------------------*/
#header,
#header.header-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), 0 10px 30px rgba(25, 119, 204, 0.08);
}

#header > *,
#header .container {
  position: relative;
  z-index: 1;
}

/* Restore the header logo (flex + .img-fluid can collapse it to 0 width) */
#header .logo {
  flex: 0 0 auto;
}

#header .logo a {
  display: inline-block;
  line-height: 0;
}

#header .logo img {
  max-height: 59px;
  height: 59px;
  width: auto;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.55));
}

@media (max-width: 767.98px) {
  #header .logo img {
    max-height: 55px;
    height: 55px;
  }
}

/* Original theme used a white border as a hover placeholder */
.navbar a {
  border-bottom-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a {
  color: #1d88bd;
  border-bottom-color: #2b96cc;
}

/*--------------------------------------------------------------
# Dropdowns + mobile nav panel
# Slightly denser than page cards so type stays readable over the hero.
--------------------------------------------------------------*/
.navbar .dropdown ul,
.navbar-mobile .dropdown ul,
.navbar-mobile ul {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--glass-radius-sm);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  overflow-x: hidden;
  overflow-y: auto;
}

.navbar-mobile {
  background: rgba(22, 56, 78, 0.28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.navbar-mobile ul {
  border-radius: 24px;
  box-shadow: var(--glass-inset), 0 20px 50px rgba(22, 56, 78, 0.2);
}

.navbar .dropdown ul a,
.navbar-mobile a {
  color: var(--glass-text);
}

/* Compact glass chip for the on-page language switch (phones) */
.lang-toggle {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: var(--glass-inset);
}

#google_translate_element select.goog-te-combo {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  color: var(--glass-text) !important;
}

/*--------------------------------------------------------------
# Hero glass panel (homepage). Darker frost so white type stays AA.
--------------------------------------------------------------*/
.hero-glass {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(165deg, rgba(22, 56, 78, 0.42), rgba(12, 36, 54, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 20px 50px rgba(22, 56, 78, 0.22);
  padding: 32px 40px 36px;
}

.hero-glass h1,
.hero-glass h2,
.hero-glass h2 a,
.hero-glass p,
.hero-glass .text-white {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(8, 24, 40, 0.45);
}

.hero-glass h2 a:hover {
  color: #fff04b !important;
}

@media (max-width: 767px) {
  .hero-glass {
    padding: 24px 22px 28px;
    border-radius: 20px;
  }
}


/* Soften the hero photo edge behind the overlapping why-us glass cards.
   The fade is baked into the background stack so backdrop-filter on the
   cards samples the softened edge, not a sharp photo cutoff. */
#hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
    url("../img/banner-1.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  /* Fade the photo to transparent (not a flat fill) so glass cards sit on
     the same sky mesh above and below the hero edge. Short enough to miss
     the hero type on typical viewports. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 200px), transparent 100%);
}

/* No overlap on phones/tablets (hero margin-bottom is 0), so don't mask the type */
@media (max-width: 992px) {
  #hero {
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/*--------------------------------------------------------------
# Cards, icon boxes, provider cards, forms
--------------------------------------------------------------*/
.why-us .icon-boxes .icon-box,
.doctors .member,
.testimonials .testimonial-item,
.services .icon-box,
.provider-card,
.contact .php-email-form,
.contact .info,
.card,
.appt-form,
.news-body,
.share-post {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-inset), var(--glass-shadow);
}

.alert-info {
  background: rgba(43, 150, 204, 0.12) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-inset);
  color: var(--glass-text);
}

.appt-form {
  padding: 28px 28px 24px;
  margin-top: 8px;
}

@media (max-width: 575.98px) {
  .appt-form {
    padding: 20px 16px 18px;
  }
}

.contact .info {
  background: var(--glass-bg-soft);
}

.card.bg-light .card-body {
  background: transparent;
}

/* Inputs stay slightly denser and are NOT blurred (nested blur is costly) */
.form-control,
.form-select,
.appt-form .form-control,
.appt-form .form-select,
.contact .php-email-form input,
.contact .php-email-form textarea,
.contact .php-email-form select {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--glass-text);
}

.form-control:focus,
.form-select:focus,
.appt-form .form-control:focus,
.appt-form .form-select:focus,
.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(43, 150, 204, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(43, 150, 204, 0.15);
}

/* Services cards: tinted blue glass on hover instead of a solid fill */
.services .icon-box:hover {
  background: var(--glass-blue-strong) !important;
  border-color: rgba(255, 255, 255, 0.4);
}

.services .icon-box:hover h4,
.services .icon-box:hover p,
.services .icon-box:hover a {
  color: #fff;
}

/*--------------------------------------------------------------
# Why-us featured box — translucent blue glass, dark navy type
# (white type would fail WCAG on a 0.2 blue fill over a light sky)
--------------------------------------------------------------*/
.why-us .content {
  background: linear-gradient(165deg, rgba(43, 150, 204, 0.28), rgba(25, 119, 204, 0.18));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--glass-inset), 0 18px 44px rgba(25, 119, 204, 0.18), inset 0 -40px 50px rgba(43, 150, 204, 0.1);
  color: var(--glass-text);
}

.why-us .content h3,
.why-us .content p {
  color: var(--glass-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.why-us .content .more-btn {
  background: var(--glass-blue-strong);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  box-shadow: var(--glass-inset), 0 8px 18px rgba(25, 119, 204, 0.18);
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.why-us .content .more-btn:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #1d88bd;
  transform: translateY(-2px);
  box-shadow: var(--glass-inset), 0 8px 18px rgba(25, 119, 204, 0.16);
}

.why-us .icon-boxes .icon-box h4 {
  color: var(--glass-text);
}

.why-us .icon-boxes .icon-box .card-more-btn {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(43, 150, 204, 0.45);
  color: #1d88bd;
  box-shadow: var(--glass-inset);
}

.why-us .icon-boxes .icon-box .card-more-btn:hover {
  background: var(--glass-blue-strong);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Departments active tab as a glass pill */
.departments .nav-link.active,
.departments .nav-tabs .nav-item.show .nav-link,
.departments .nav-tabs .nav-link.active {
  background: var(--glass-blue-strong);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: var(--glass-inset);
  color: #fff;
}

.departments .nav-link {
  border-radius: 999px;
  border-right: 0;
  color: var(--glass-text);
}

/*--------------------------------------------------------------
# Buttons — glossy glass pills, subtle hover lift
--------------------------------------------------------------*/
.btn-primary,
#hero .btn-get-started,
.contact .php-email-form button[type="submit"],
.appt-form button[type="submit"],
.btn-book,
.btn-book-lg,
.back-to-top {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px rgba(25, 119, 204, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary,
#hero .btn-get-started,
.contact .php-email-form button[type="submit"],
.appt-form button[type="submit"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(0, 0, 0, 0.06) 100%),
    var(--glass-blue-strong);
  color: #fff;
}

.btn-book,
.btn-book-lg,
.navbar a.book-online-link:hover .btn-book,
.btn-book:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.04) 100%),
    var(--glass-gold);
  color: #16384e;
}

.navbar a.book-online-link:hover .btn-book,
.btn-book:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(0, 0, 0, 0.04) 100%),
    var(--glass-gold-hover);
  color: #16384e;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 12px 24px rgba(25, 119, 204, 0.16);
}

.btn-primary:hover,
#hero .btn-get-started:hover,
.contact .php-email-form button[type="submit"]:hover,
.appt-form button[type="submit"]:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(0, 0, 0, 0.08) 100%),
    var(--glass-blue-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 24px rgba(25, 119, 204, 0.22);
}

.back-to-top {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04)),
    var(--glass-blue-strong);
  width: 44px;
  height: 44px;
}

.back-to-top:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04)),
    var(--glass-blue-hover);
  transform: translateY(-2px);
}

/* Sidebar title chip */
.sidebar .title h5 {
  background: var(--glass-blue-strong);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--glass-inset);
  color: #fff;
}

/*--------------------------------------------------------------
# Footer — navy glass so the white footer logo and type stay readable
--------------------------------------------------------------*/
#footer {
  background: var(--glass-navy);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
}

#footer .footer-top {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 0;
  box-shadow: none;
}

#footer .credits,
.copyright,
#footer .footer-top .footer-contact p,
#footer .footer-top h4,
#footer .footer-top .footer-links ul a,
#footer .footer-top .footer-links ul.locations .loc-fax {
  color: #eef6fb;
}

#footer .footer-top .footer-links ul a:hover {
  color: #fff04b;
}

/*--------------------------------------------------------------
# Fallback: no backdrop-filter → more opaque fills so text still reads
--------------------------------------------------------------*/
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header::before,
  .navbar .dropdown ul,
  .navbar-mobile .dropdown ul,
  .navbar-mobile ul,
  .why-us .icon-boxes .icon-box,
  .doctors .member,
  .testimonials .testimonial-item,
  .services .icon-box,
  .provider-card,
  .contact .php-email-form,
  .contact .info,
  .card,
  .appt-form,
  .alert-info,
  .news-body,
  .share-post,
  .lang-toggle,
  #topbar {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .hero-glass {
    background: rgba(22, 56, 78, 0.86) !important;
  }

  #footer {
    background: #373e4c !important;
  }

  .why-us .content {
    background: rgba(43, 150, 204, 0.18) !important;
  }

  .btn-primary,
  #hero .btn-get-started,
  .contact .php-email-form button[type="submit"],
  .appt-form button[type="submit"],
  .departments .nav-link.active,
  .back-to-top,
  .sidebar .title h5 {
    background: #2b96cc !important;
  }

  .btn-book,
  .btn-book-lg {
    background: #fff04b !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #header::before,
  .navbar .dropdown ul,
  .navbar-mobile .dropdown ul,
  .navbar-mobile ul,
  .why-us .icon-boxes .icon-box,
  .doctors .member,
  .testimonials .testimonial-item,
  .services .icon-box,
  .provider-card,
  .contact .php-email-form,
  .contact .info,
  .card,
  .appt-form,
  .alert-info,
  .news-body,
  .share-post,
  .lang-toggle,
  #topbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #header::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-glass {
    background: rgba(22, 56, 78, 0.88) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .why-us .content {
    background: #2b96cc !important;
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .why-us .content h3,
  .why-us .content p {
    color: #fff;
  }

  #footer {
    background: #373e4c !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Phone: slightly tighter radii, same translucency */
@media (max-width: 767.98px) {
  .why-us .icon-boxes .icon-box,
  .provider-card,
  .card,
  .appt-form,
  .doctors .member,
  .services .icon-box {
    border-radius: 16px !important;
  }
}