/* ==========================================================================
   LifeNest Hospital — Color System
   --------------------------------------------------------------------------
   Berry/rose + blue medical palette. To re-theme the site, change the values
   in the :root block below — the rest of the stylesheet and the Bootstrap
   components read from these variables.
   ========================================================================== */
:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --primary:          #C83E6B;   /* berry — buttons, active nav, key UI */
  --primary-dark:     #9E2F56;   /* hover states, strong headings */
  --primary-light:    #F8DCE6;   /* soft rose — badges, highlighted sections */
  --secondary:        #4A6FA5;   /* trust blue — secondary actions, accents */
  --secondary-light:  #E8EEF7;   /* soft blue background */
  --accent:           #D95C7A;   /* warm rose accent */
  --text-dark:        #263238;   /* readable body text / dark slate */
  --background:       #FFFFFF;   /* main page background */
  --soft-background:  #F8F9FB;   /* very light neutral for alternating sections */

  /* RGB channels for translucent shadows / glows */
  --primary-rgb:      200, 62, 107;
  --secondary-rgb:    74, 111, 165;

  /* ---- Map Bootstrap theme tokens onto the palette ---------------------- */
  /* Primary (berry) — drives .text-primary, .bg-primary, .*-subtle, links   */
  --bs-primary:               #C83E6B;
  --bs-primary-rgb:           200, 62, 107;
  --bs-primary-text-emphasis: #9E2F56;
  --bs-primary-bg-subtle:     #F8DCE6;
  --bs-primary-border-subtle: #F1C4D4;

  /* "info" is repurposed as the supporting medical blue (service cards)      */
  --bs-info:               #4A6FA5;
  --bs-info-rgb:           74, 111, 165;
  --bs-info-text-emphasis: #2F486B;
  --bs-info-bg-subtle:     #E8EEF7;
  --bs-info-border-subtle: #B9CBE3;

  /* Links follow the primary colour */
  --bs-link-color:            #C83E6B;
  --bs-link-color-rgb:        200, 62, 107;
  --bs-link-hover-color:      #9E2F56;
  --bs-link-hover-color-rgb:  158, 47, 86;

  /* Neutrals */
  --bs-body-color:      #263238;
  --bs-body-color-rgb:  38, 50, 56;
  --bs-dark-rgb:        38, 50, 56;      /* footer bg + dark headings → brand slate */
  --bs-light-rgb:       248, 249, 251;   /* soft neutral alternating sections */
}

/* ==========================================================================
   Bootstrap component overrides
   These classes ship with hard-coded colours in the compiled Bootstrap CSS,
   so they are re-tinted here to match the palette.
   ========================================================================== */

/* Primary buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

/* Outline primary buttons */
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

/* Secondary (outline) actions use the supporting blue */
.btn-outline-secondary {
  --bs-btn-color: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--secondary);
  --bs-btn-focus-shadow-rgb: var(--secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
  --bs-btn-disabled-color: var(--secondary);
  --bs-btn-disabled-border-color: var(--secondary);
}

/* Form focus states match the branding */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.2);
}

/* ==========================================================================
   Site styles
   ========================================================================== */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-dark);
  scroll-behavior: smooth;
}

/* Gradient text (berry → blue) */
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Service Card Hover Micro-interactions */
.service-card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.12) !important;
}

/* Floating Badge Animation */
.floating-badge {
  bottom: 20px;
  left: -20px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Button Pulse Animation */
.pulse-btn {
  animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(var(--primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
  }
}

/* Responsive adjustment */
@media (max-width: 991px) {
  .floating-badge {
    left: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Layout additions for the multi-page structure
   --------------------------------------------------------------------------- */

/* Hero (home page) — soft rose → blue wash */
.hero-section {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
}

.hero-image-wrapper {
  position: relative;
  display: inline-block;
}

/* Service card icon badge */
.icon-box {
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
}

/* Interior page banner — soft rose → blue wash */
.page-banner {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
}

/* Active nav link */
.navbar .nav-link.active {
  color: var(--primary) !important;
}

/* Gallery tiles */
.gallery-item img {
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* Fallback shown when a gallery image is missing from disk, so the page never
   renders a broken <img>. Matches the tile height of .gallery-item img. */
.gallery-missing {
  height: 220px;
  background: #eef1f5;
  color: #6b7880;
}

/* ---------------------------------------------------------------------------
   Booking wizard
   --------------------------------------------------------------------------- */

/* Step indicator dots */
.booking-steps { position: relative; }

.booking-steps .step-dot {
  width: 40px;
  height: 40px;
  background: var(--secondary-light);
  color: var(--secondary);
  border: 2px solid transparent;
  transition: all 0.25s ease;
}

/* Current step */
.booking-steps [data-step-dot].is-active .step-dot {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

/* Completed steps */
.booking-steps [data-step-dot].is-done .step-dot {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}

/* Date picker tiles */
.date-option {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.date-option.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}

/* Time slot tiles */
.slot-option {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slot-option.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}

.slot-option.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* Disabled (full / passed) slots stay visibly unavailable */
.slot-option.disabled,
.slot-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}