/* --------------------------------------------------------------------------
   VAIDYAR HOME MODERN STYLES
   Specific non-homepage component styles (Footer, Final CTA, Go To Top,
   Service pages, Doctor Listing, and Doctor Profile pages).
   All primary homepage section styles (Navbar, Hero, Trusted, How It Works,
   Ayurvedic Treatments, Specialized Treatments, Happy Clients Testimonials,
   and Ayurveda Blogs) are centralized in vaidyar-design-system.css.
   -------------------------------------------------------------------------- */

/* ================================================================
   Footer Section — Full-Width, Always-Horizontal, Fluid Scaling
   ================================================================ */

/* Footer styles are centralized in vaidyar-design-system.css */

/* Final CTA Section styles are centralized in vaidyar-design-system.css */

/* Appointment Modal & Form Customization */
.custom-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-white);
  transition: all 0.2s ease;
  outline: none;
}

.custom-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Responsive Utilities */
@media (max-width: 991px) {
  h1,
  .h1-title {
    font-size: 2.2rem !important;
  }

  h2,
  .h2-title {
    font-size: 1.9rem !important;
  }

  .hero-doctor-card img {
    height: 360px;
  }

  .floating-doctor-badge {
    position: relative;
    bottom: 0;
    right: 0;
    max-width: 100%;
    margin-top: 16px;
  }
}

@media (max-width: 575px) {
  h1,
  .h1-title {
    font-size: 1.8rem !important;
  }

  h2,
  .h2-title {
    font-size: 1.5rem !important;
  }

  .btn-primary-pill,
  .btn-secondary-pill {
    width: 100%;
  }
}

/* ================================================================
   Go To Top Floating Button Component
   ================================================================ */
#gotoTop {
  display: none;
  opacity: 0;
  z-index: 99999;
  position: fixed;
  width: 46px;
  height: 46px;
  background-color: var(--color-primary, #10B981);
  color: #FFFFFF;
  border-radius: 50%;
  top: auto;
  left: auto;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

#gotoTop svg {
  width: 22px;
  height: 22px;
  stroke: #FFFFFF;
  display: block;
  transition: transform 0.25s ease;
}

#gotoTop:hover {
  background-color: var(--color-secondary, #0D3330);
  color: #FFFFFF;
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(13, 51, 48, 0.35);
}

#gotoTop:hover svg {
  transform: translateY(-2px);
}

body.gototop-active #gotoTop,
#gotoTop.show {
  display: flex !important;
  opacity: 1 !important;
}


/* Modern Doctor Section Styles are centralized in vaidyar-design-system.css */

/* Modern Doctor Profile Page Styles are centralized in vaidyar-design-system.css */