/* ==========================================================================
   Vishwaratna Hospital — depth layer.
   Loaded AFTER css/vh-custom.css. Gives the flat theme a consistent sense of
   physical depth: one light source (top-left), raised surfaces that cast
   layered shadows, domed icons, pressable buttons and pointer-driven tilt
   (js/vh-3d.js). Nothing here changes layout; it only changes how surfaces
   are lit, so removing this file returns the site to its flat look.
   ========================================================================== */

:root {
  --vh-ink        : 18, 60, 104;     /* navy as RGB, for shadow tints */
  --vh-teal-hi    : #3FD3CE;
  --vh-teal-lo    : #007A77;
  --vh-teal-edge  : #00625F;

  /* Layered shadows: a tight contact shadow plus a soft ambient one reads as
     a real object sitting above the page, where one big blur reads as fog. */
  --vh-depth-1 : 0 1px 2px rgba(var(--vh-ink), .06), 0 6px 14px -4px rgba(var(--vh-ink), .10);
  --vh-depth-2 : 0 2px 4px rgba(var(--vh-ink), .05), 0 14px 28px -10px rgba(var(--vh-ink), .18),
                 0 36px 70px -30px rgba(var(--vh-ink), .28);
  --vh-depth-3 : 0 4px 8px rgba(var(--vh-ink), .06), 0 24px 44px -12px rgba(var(--vh-ink), .26),
                 0 60px 100px -40px rgba(var(--vh-ink), .38);
  --vh-rim     : inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(var(--vh-ink), .05);
  --vh-glass   : linear-gradient(150deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .02) 100%);
  --vh-glass-rim : inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --vh-ease    : cubic-bezier(.2, .8, .2, 1);
}

/* --- Buttons: raised keys that press down ------------------------------- */

.btn-default {
  background: linear-gradient(180deg, #14BDB8 0%, var(--accent-color) 55%, #008E8A 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .10),
    0 4px 0 var(--vh-teal-edge),
    0 12px 22px -8px rgba(0, 110, 107, .65);
  transform: translateY(0);
  transition: transform .25s var(--vh-ease), box-shadow .25s var(--vh-ease), color .4s ease-in-out;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.btn-default:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .10),
    0 6px 0 var(--vh-teal-edge),
    0 18px 30px -10px rgba(0, 110, 107, .7);
}
.btn-default:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18), 0 1px 0 var(--vh-teal-edge), 0 4px 10px -4px rgba(0, 110, 107, .5);
}
.btn-default.btn-highlighted:hover { text-shadow: none; }
.btn-default:focus-visible { outline: 3px solid #5FD8D4; outline-offset: 4px; }

/* --- Section label pills: a small raised chip --------------------------- */

.section-title .section-sub-title {
  box-shadow: var(--vh-rim), 0 2px 6px -2px rgba(var(--vh-ink), .15);
}
.dark-section .section-title .section-sub-title {
  background: var(--vh-glass);
  box-shadow: var(--vh-glass-rim), 0 6px 16px -8px rgba(0, 0, 0, .5);
}

/* Headings on dark grounds get a soft drop so they sit above the panel. */
.dark-section .section-title h1,
.dark-section .section-title h2,
.page-header-box h1 {
  text-shadow: 0 2px 0 rgba(6, 23, 42, .25), 0 12px 30px rgba(6, 23, 42, .45);
}

/* --- Domed icons -------------------------------------------------------- */
/* Every flat teal disc becomes a lit sphere: highlight top-left, core shade
   bottom-right, and a coloured contact shadow underneath. */

.service-item .icon-box,
.core-features-item .icon-box,
.contact-info-item .icon-box,
.fact-item .icon-box,
.service-item-prime .icon-box,
.why-choose-cta-box .icon-box,
.vh-convenience-item .icon-box,
.vh-form-success .icon-box,
.support-cta-header .icon-box,
.footer-contact-item-prime .icon-box {
  background: radial-gradient(120% 120% at 28% 22%, var(--vh-teal-hi) 0%, var(--accent-color) 42%, var(--vh-teal-lo) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .45),
    inset 0 -5px 10px rgba(0, 50, 48, .28),
    0 10px 18px -6px rgba(0, 110, 107, .55);
}
.service-item .icon-box img,
.core-features-item .icon-box img,
.contact-info-item .icon-box img,
.service-item-prime .icon-box img,
.why-choose-cta-box .icon-box img {
  filter: drop-shadow(0 2px 2px rgba(0, 40, 38, .35));
}
/* The fact tiles ship outline icons with no disc; give them one. */
.fact-item .icon-box {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
}
.fact-item .icon-box img { width: 32px; filter: brightness(0) invert(1) drop-shadow(0 2px 2px rgba(0, 40, 38, .35)); }

/* --- Tilt hooks (driven by js/vh-3d.js) --------------------------------- */
/* --vh-rx/--vh-ry are set per pointer move. The glare layer is injected by
   the script, so it is absent when the script is. */

.vh-tilt {
  --vh-rx: 0deg;
  --vh-ry: 0deg;
  --vh-lift: 0px;
  position: relative;
  transform: perspective(1100px) rotateX(var(--vh-rx)) rotateY(var(--vh-ry)) translateY(var(--vh-lift));
  transform-style: preserve-3d;
  transition: transform .5s var(--vh-ease), box-shadow .5s var(--vh-ease);
  will-change: transform;
}
.vh-tilt.vh-tilt-active { transition: transform .12s linear, box-shadow .4s var(--vh-ease); --vh-lift: -6px; }
/* Some theme cards lift themselves with their own :hover transform, which
   would replace the tilt outright; restate it at matching specificity. */
.vh-tilt:hover {
  transform: perspective(1100px) rotateX(var(--vh-rx)) rotateY(var(--vh-ry)) translateY(var(--vh-lift));
}
.vh-tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--vh-gx, 50%) var(--vh-gy, 0%), rgba(255, 255, 255, .35), transparent 55%);
  mix-blend-mode: soft-light;
}
.vh-tilt.vh-tilt-active .vh-tilt-glare { opacity: 1; }

/* --- Light cards -------------------------------------------------------- */

.service-item,
.service-item-prime,
.testimonial-item,
.contact-info-item,
.vh-convenience-item,
.vh-location-card,
.why-choose-counter-box,
.why-choose-cta-box,
.support-cta-box {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFC 100%);
  border: 1px solid rgba(var(--vh-ink), .06);
  box-shadow: var(--vh-rim), var(--vh-depth-2);
}
.service-item:hover,
.service-item-prime:hover,
.testimonial-item:hover,
.contact-info-item:hover,
.vh-convenience-item:hover,
.vh-location-card:hover,
.vh-tilt-active.why-choose-counter-box {
  box-shadow: var(--vh-rim), var(--vh-depth-3);
}
/* On the plain white sections the cards need a faint ground to lift from. */
.our-services-prime:not(.bg-section) .service-item-prime { border-color: rgba(var(--vh-ink), .08); }

/* The CTA tile in the departments row is already teal; light it, don't whiten it. */
.service-item.service-cta-box {
  background: radial-gradient(130% 90% at 20% 0%, #19C3BE 0%, var(--accent-color) 45%, #007F7B 100%);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--vh-teal-edge), var(--vh-depth-3);
}
.service-cta-box-title h3 { text-shadow: 0 2px 0 rgba(0, 60, 58, .3), 0 10px 24px rgba(0, 60, 58, .35); }

/* Content inside a tilting card floats a little above its face. */
.vh-tilt .icon-box,
.vh-tilt .vh-doctor-initials { transform: translateZ(30px); }
.vh-tilt h2, .vh-tilt h3 { transform: translateZ(18px); }

/* --- Glass cards on dark sections --------------------------------------- */

.fact-item,
.core-features-item,
.appointment-form,
.our-approach .approach-item {
  background: var(--vh-glass);
  box-shadow: var(--vh-glass-rim), 0 24px 50px -20px rgba(0, 0, 0, .55);
}
.fact-item:hover,
.core-features-item:hover { box-shadow: var(--vh-glass-rim), 0 34px 70px -24px rgba(0, 0, 0, .65); }
.fact-item-counter-content h2 {
  background: linear-gradient(180deg, #FFFFFF 30%, #9FE9E6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

/* Dark panels: a slab that sits on the page, lit from above. */
.dark-section.bg-section,
.main-footer-prime {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(9, 34, 56, .55);
}
.bg-section:not(.dark-section) {
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(var(--vh-ink), .04);
}

/* --- Header ------------------------------------------------------------- */

header.main-header .header-sticky.active {
  background: rgba(14, 46, 80, .82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(6, 23, 42, .6);
}
.navbar-brand img { filter: drop-shadow(0 4px 10px rgba(6, 23, 42, .35)); }

/* --- Hero --------------------------------------------------------------- */

.hero { box-shadow: 0 40px 90px -40px rgba(9, 34, 56, .65); }
.hero .hero-content h1 {
  text-shadow: 0 2px 0 rgba(6, 23, 42, .25), 0 18px 40px rgba(6, 23, 42, .55);
}
.hero .hero-content p { text-shadow: 0 1px 12px rgba(6, 23, 42, .6); }

/* Floating credential cards, stacked in 3D on the right of the hero. */
.vh-hero-stack {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 14px;
  perspective: 1200px;
}
.vh-hero-card {
  --vh-px: 0px;
  --vh-py: 0px;
  width: 320px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 20px;
  color: var(--white-color);
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .12),
              0 30px 60px -24px rgba(3, 15, 28, .8);
  transform: translate3d(var(--vh-px), var(--vh-py), 0) rotateY(-10deg) rotateX(3deg);
  transition: transform .6s var(--vh-ease);
  animation: vh-float 7s ease-in-out infinite;
}
.vh-hero-card:nth-child(2) { margin-right: 40px; animation-delay: -2.3s; }
.vh-hero-card:nth-child(3) { animation-delay: -4.6s; }
.vh-hero-card strong { display: block; font-size: 17px; line-height: 1.25; }
.vh-hero-card small { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }
.vh-hero-card a { color: inherit; }
.vh-hero-card .vh-hero-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 28% 22%, var(--vh-teal-hi) 0%, var(--accent-color) 45%, var(--vh-teal-lo) 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -5px 10px rgba(0, 50, 48, .3), 0 10px 18px -6px rgba(0, 0, 0, .5);
}
.vh-hero-card .vh-hero-icon .vh-icon { width: 24px; height: 24px; color: #fff; }
.vh-hero-card.vh-hero-card-alert .vh-hero-icon {
  background: radial-gradient(120% 120% at 28% 22%, #FF8A8A 0%, #E14B4B 45%, #A82626 100%);
}

@keyframes vh-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@media only screen and (max-width: 1199px) {
  /* The hero button and the floating call button already carry the
     emergency number at this size; a third copy only pushes content down. */
  .vh-hero-card.vh-hero-card-alert { display: none; }
  .vh-hero-stack { align-items: stretch; flex-direction: row; flex-wrap: wrap; margin-top: 40px; perspective: none; }
  .vh-hero-card,
  .vh-hero-card:nth-child(2) { width: auto; flex: 1 1 240px; margin: 0; transform: none; animation: none; }
}
@media only screen and (max-width: 575px) {
  .vh-hero-card { flex-basis: 100%; padding: 14px 16px; }
  .vh-hero-card strong { font-size: 16px; }
}

/* --- Page headers (inner pages) ----------------------------------------- */

.page-header { box-shadow: 0 40px 90px -40px rgba(9, 34, 56, .6); }

/* --- Photographs: framed objects with a backplate ----------------------- */

.about-us-image figure,
.why-choose-us-image figure,
.support-video-image figure,
.google-map-iframe,
.vh-location-map,
.photo-gallery figure {
  box-shadow: var(--vh-depth-2);
}
.about-us-image figure img,
.photo-gallery figure img { border-radius: inherit; }

/* A tinted plate offset behind the About photo gives it a physical edge. */
.about-image-box-1 { position: relative; border-radius: 30px; }
.about-image-box-1::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: 30px;
  background: linear-gradient(140deg, rgba(0, 163, 159, .22), rgba(18, 60, 104, .16));
  z-index: -1;
}
.about-us-image-box { isolation: isolate; }
@media only screen and (max-width: 767px) {
  .about-image-box-1::before { inset: 12px -6px -12px 12px; }
}

.photo-gallery { border-radius: 30px; }
.photo-gallery figure { border-radius: 30px; overflow: hidden; }

/* --- Doctor profiles ---------------------------------------------------- */
/* The initials panel becomes a lit, bevelled medallion so the profile still
   carries weight without a photograph. */

.vh-convenience-item {
  display: flex;
  flex-direction: column;
}
.vh-convenience-item > .btn-default { align-self: flex-start; margin-top: auto; }

.vh-doctor-initials {
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(95, 216, 212, .45) 0%, transparent 55%),
    linear-gradient(155deg, #1C5288 0%, var(--primary-color) 45%, #071F38 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -10px 24px rgba(0, 0, 0, .3),
    0 20px 36px -14px rgba(var(--vh-ink), .7);
}
.vh-doctor-initials::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  z-index: 1;
}
/* Stacked 1px shadows extrude the letters, then a soft cast shadow. */
.vh-doctor-initials span:not(.vh-doctor-seal) {
  font-size: 68px;
  color: #FFFFFF;
  text-shadow:
    0 1px 0 #D5F4F3,
    0 2px 0 #9FD9D7,
    0 3px 0 #2C6F8E,
    0 4px 0 #1A4E74,
    0 5px 0 #123C68,
    0 16px 22px rgba(0, 0, 0, .5);
}
.vh-doctor-initials .vh-doctor-seal {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  filter: none;
}
.vh-doctor-initials .vh-doctor-seal .vh-icon { width: 13px; height: 13px; color: #5FD8D4; }

.vh-doctor-meta { box-shadow: var(--vh-rim), 0 2px 6px -2px rgba(var(--vh-ink), .18); }
.vh-chip-list li {
  background: linear-gradient(180deg, #FFFFFF, var(--secondary-color));
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px -1px rgba(0, 112, 109, .18);
  transition: transform .2s var(--vh-ease), box-shadow .2s var(--vh-ease);
}
.vh-chip-list li:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -4px rgba(0, 112, 109, .3); }

/* --- Service lists and phone pills -------------------------------------- */

.vh-service-list li {
  background: linear-gradient(180deg, #FFFFFF, #F8FCFC);
  box-shadow: var(--vh-rim), var(--vh-depth-1);
  transition: transform .25s var(--vh-ease), box-shadow .25s var(--vh-ease);
}
.vh-service-list li:hover { transform: translateY(-3px); box-shadow: var(--vh-rim), var(--vh-depth-2); }
.vh-phone-pill { box-shadow: var(--vh-rim), var(--vh-depth-1); transition: all .25s var(--vh-ease); }
.vh-phone-pill:hover { transform: translateY(-2px); }

/* --- Forms: fields are wells pressed into the surface ------------------- */

.form-control {
  box-shadow: inset 0 2px 4px rgba(var(--vh-ink), .08), inset 0 0 0 1px rgba(var(--vh-ink), .06);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.form-control:focus {
  box-shadow: inset 0 2px 4px rgba(var(--vh-ink), .06), 0 0 0 3px rgba(0, 163, 159, .28);
}
.dark-section .form-control {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.dark-section .form-control:focus {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28), 0 0 0 3px rgba(95, 216, 212, .45);
}

/* --- Footer contact strip ----------------------------------------------- */

.footer-contact-items-list-prime { box-shadow: var(--vh-glass-rim), 0 24px 50px -24px rgba(0, 0, 0, .6); }
.footer-contact-item-content-prime h3 a { color: inherit; }
.footer-social-links-prime ul:not(.vh-footer-services) li a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 6px 14px -6px rgba(0, 0, 0, .5);
  transition: transform .25s var(--vh-ease), background-color .25s ease;
}
.footer-social-links-prime ul:not(.vh-footer-services) li a:hover { transform: translateY(-3px); }
.footer-logo-prime.vh-footer-logo img { box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); }

/* --- Floating emergency button ------------------------------------------ */
/* Always within reach: the one action a patient in distress needs. */

.vh-sos {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(180deg, #F06464 0%, #D63A3A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #9E2323, 0 16px 30px -10px rgba(158, 35, 35, .7);
  transition: transform .25s var(--vh-ease), box-shadow .25s var(--vh-ease);
}
.vh-sos:hover { color: #fff; transform: translateY(-2px); }
.vh-sos:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2), 0 1px 0 #9E2323; }
.vh-sos .vh-sos-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .2);
}
.vh-sos .vh-sos-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  animation: vh-ping 1.8s ease-out infinite;
}
.vh-sos .vh-icon { width: 18px; height: 18px; }
.vh-sos small { display: block; font-size: 11px; font-weight: 600; opacity: .9; letter-spacing: .04em; text-transform: uppercase; }
@keyframes vh-ping {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media only screen and (max-width: 575px) {
  /* Icon only on phones, so it never sits over the text being read. */
  .vh-sos { right: 14px; bottom: 14px; padding: 8px; }
  .vh-sos .vh-sos-icon { width: 44px; height: 44px; }
  .vh-sos .vh-icon { width: 22px; height: 22px; }
  .vh-sos > span:last-child { display: none; }
}

/* --- Leftover layout fixes surfaced by the depth pass ------------------- */

/* Department headers on the departments page were set in a 2/10 grid that
   left a wide gap between the icon and its name. */
.our-services-prime[id] .section-row > .col-lg-2 { flex: 0 0 auto; width: auto; }
.our-services-prime[id] .section-row > .col-lg-10 { flex: 1 1 0; width: auto; }
.our-services-prime[id] .section-row .icon-box {
  /* The icons are white line art; on the old pale tile they all but vanished. */
  background: radial-gradient(120% 120% at 28% 22%, var(--vh-teal-hi) 0%, var(--accent-color) 42%, var(--vh-teal-lo) 100%) !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -6px 12px rgba(0, 50, 48, .28), 0 14px 26px -8px rgba(0, 110, 107, .55);
}

/* The appointment panel on the contact page sat flush left with a gap on
   the right; centre it like every other section slab. */
.hero-cta-box-prime.vh-standalone-cta { margin: 0 auto; }

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vh-hero-card,
  .vh-sos .vh-sos-icon::after { animation: none; }
  .vh-tilt,
  .btn-default,
  .vh-chip-list li,
  .vh-service-list li { transition: none; }
}