/* ============================================================
   main.css — All custom styles for the Dr. Mona Saad theme
   Loaded via wp_enqueue_style() in functions.php.

   TABLE OF CONTENTS
   -----------------
   1.  Layout / Container
   2.  Hero gradient + shadows
   3.  Gradient utilities (pink-gradient, etc.)
   4.  Navigation shadows
   5.  Card shadows
   6.  Footer shadow
   7.  Glassmorphism (hero floating badges)
   8.  Responsive visibility helpers (top-bar, desktop-nav, mobile-only)
   9.  Fade-in scroll animation
   10. Mobile menu slide
   11. Testimonial carousel
   12. Star icon colour
   13. About-section number circles
   14. About tabs
   15. Scrollbar hiding (no-scrollbar)
   ============================================================ */


/* ------------------------------------------------------------------
   1. LAYOUT / CONTAINER
   ------------------------------------------------------------------ */
body {
  background-color: #fffdfe;
  scroll-behavior: smooth;
  font-family: 'Montserrat', 'Cairo', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.content-wrapper {
  max-width: 1536px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .content-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .content-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .content-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}


/* ------------------------------------------------------------------
   2. HERO BACKGROUND GRADIENT
   ------------------------------------------------------------------ */
.hero-bg {
  background:
    linear-gradient(
      106deg,
      rgba(150, 31, 95, 0.10) 0.42%,
      rgba(255, 251, 253, 0.25) 11.05%,
      rgba(255, 251, 253, 0.25) 83.35%
    ),
    linear-gradient(
      71deg,
      rgba(150, 31, 95, 0.10) 0%,
      rgba(255, 251, 253, 0.25) 10.58%,
      rgba(255, 251, 253, 0.25) 82.53%,
      rgba(150, 31, 95, 0.10) 103.16%
    );
  box-shadow: 0 0 8px 0 rgba(150, 31, 95, 0.15);
}


/* ------------------------------------------------------------------
   3. GRADIENT UTILITIES
   Used by "Who We Are" banner and "Get in Touch" section.
   ------------------------------------------------------------------ */
.pink-gradient {
  background: linear-gradient(270deg, #961F5F 0%, #4E1835 100%);
}


/* WaitingFor banner uses double-layered gradient */
.waiting-gradient {
  background:
    linear-gradient(270deg, #961F5F 0%, #4E1835 100%),
    linear-gradient(93deg, #0066AD 3.92%, #499DD8 111.8%);
}


/* ------------------------------------------------------------------
   4. NAVIGATION SHADOWS
   ------------------------------------------------------------------ */
.nav-shadow {
  box-shadow: 0 8px 8px 0 rgba(150, 31, 95, 0.05);
}


/* ------------------------------------------------------------------
   5. CARD SHADOWS
   ------------------------------------------------------------------ */
.card-shadow {
  box-shadow: 0 0 5px 0 rgba(50, 50, 50, 0.10);
}

.card-shadow-pink {
  box-shadow: 0 0 8px 0 rgba(150, 31, 95, 0.15);
}


/* ------------------------------------------------------------------
   6. FOOTER SHADOW
   ------------------------------------------------------------------ */
.footer-shadow {
  box-shadow: 0 -15px 40px 0 rgba(255, 204, 229, 0.40);
}


/* ------------------------------------------------------------------
   7. GLASSMORPHISM (floating hero badges)
   ------------------------------------------------------------------ */
.glass {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ------------------------------------------------------------------
   8. RESPONSIVE VISIBILITY HELPERS
   top-bar      — hidden on mobile, visible ≥ 1224px
   desktop-nav  — same rule
   mobile-only  — visible on mobile, hidden ≥ 1224px
   ------------------------------------------------------------------ */
@media (max-width: 1223px) {
  .top-bar     { display: none; }
  .desktop-nav { display: none; }
  .mobile-only { display: flex; }
}

@media (min-width: 1224px) {
  .mobile-only { display: none; }
}


/* ------------------------------------------------------------------
   9. FADE-IN SCROLL ANIMATION
   Replaces the original Framer Motion animations.
   .fade-in starts hidden; IntersectionObserver in main.js adds
   .visible once the element enters the viewport.
   ------------------------------------------------------------------ */
.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------------------------
   10. MOBILE MENU SLIDE
   max-height transition gives a smooth slide-down effect.
   main.js toggles the .open class by setting aria-hidden and
   adding/removing .open on #mobile-menu.
   ------------------------------------------------------------------ */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  max-height: 600px; /* large enough to never clip the menu content */
}


/* ------------------------------------------------------------------
   11. TESTIMONIAL CAROUSEL
   Track slides horizontally; JS updates transform: translateX.
   Responsive per-view counts:
     Mobile  : 1 slide   (flex: 0 0 100%)
     Tablet  : 2 slides  (flex: 0 0 50%)
     Desktop : 3 slides  (flex: 0 0 33.3%)
   ------------------------------------------------------------------ */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  flex: 0 0 100%;
  padding: 0 8px;
}

@media (min-width: 640px) {
  .carousel-slide { flex: 0 0 50%; }
}

@media (min-width: 1024px) {
  .carousel-slide { flex: 0 0 33.3333%; }
}


/* ------------------------------------------------------------------
   12. STAR ICON COLOUR
   ------------------------------------------------------------------ */
.star {
  color: #FFC107;
}


/* ------------------------------------------------------------------
   13. ABOUT-SECTION NUMBER CIRCLES
   ------------------------------------------------------------------ */
.num-circle {
  min-width: 1.5rem;
  min-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid #961F5F;
  color: #961F5F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0; /* prevent squishing in flex rows */
}


/* ------------------------------------------------------------------
   14. ABOUT TABS
   .tab-btn        — inactive state
   .tab-btn.active — active state (accent colour + accent border)
   ------------------------------------------------------------------ */
.tab-btn {
  border-bottom: 1px solid #F6A2A3;
  color: #F6A2A3;
  padding-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s;
  background: none;
  cursor: pointer;
}

.tab-btn.active {
  border-bottom-color: #961F5F;
  color: #961F5F;
}

@media (min-width: 1024px) {
  .tab-btn { font-size: 1.5rem; }
}


/* ------------------------------------------------------------------
   15. HIDE SCROLLBAR (testimonials overflow container)
   ------------------------------------------------------------------ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Contact info card icon */
    .info-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, #961F5F 0%, #4E1835 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }

    /* Form input styling */
    .form-input {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid #E8E8EA;
      border-radius: 12px;
      font-family: inherit;
      font-size: 15px;
      color: #022144;
      background: white;
      transition: all 0.2s;
    }
    .form-input:focus {
      outline: none;
      border-color: #961F5F;
      box-shadow: 0 0 0 3px rgba(150, 31, 95, 0.1);
    }
    .form-input::placeholder { color: #9CA3AF; }
    .form-label {
      display: block;
      font-weight: 500;
      color: #022144;
      margin-bottom: 6px;
      font-size: 14px;
    }

    /* Working hours table */
    .hours-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }
    .hours-table tr td {
      padding: 14px 18px;
      border-bottom: 1px solid #F1E1E8;
    }
    .hours-table tr:last-child td { border-bottom: none; }
    .hours-table tr:nth-child(even) { background: #FFF5F8; }
    .hours-table .day { font-weight: 600; color: #022144; }
    .hours-table .time { color: #961F5F; font-weight: 500; text-align: right; }

    /* FAQ */
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: 1.5rem;
      color: #961F5F;
      transition: transform 0.2s;
    }

    /* Hero floating trust badges */
    .glass-badge {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Benefit cards */
    .benefit-card {
      background: #fff;
      border: 1px solid #F6E1EA;
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .benefit-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px -6px rgba(150, 31, 95, 0.15);
    }
    .benefit-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, #961F5F 0%, #4E1835 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-bottom: 16px;
    }

    /* Timeline */
    .timeline-step {
      position: relative;
    }
    .timeline-step::before {
      content: '';
      position: absolute;
      top: 30px;
      left: calc(50% + 30px);
      right: calc(-50% + 30px);
      height: 2px;
      background: linear-gradient(90deg, #961F5F 0%, #F6A2A3 100%);
      z-index: 0;
    }
    .timeline-step:last-child::before { display: none; }
    @media (max-width: 767px) {
      .timeline-step::before { display: none; }
    }
    .timeline-number {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #961F5F;
      color: #961F5F;
      font-weight: 700;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* Pain Management option border */
    .option-bordered {
      border-left: 4px solid #961F5F;
      padding-left: 20px;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    /* FAQ collapsible */
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: 1.75rem;
      color: #961F5F;
      font-weight: 300;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item[open] {
      border-color: #961F5F;
      background: #FFF5F8;
    }

    /* Check list */
    .check-list li {
      position: relative;
      padding-left: 2rem;
    }
    .check-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #961F5F;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px;
    }

    /* Comparison table */
    .compare-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 24px -4px rgba(150, 31, 95, 0.08);
    }
    .compare-table th {
      padding: 18px;
      font-weight: 600;
      text-align: left;
    }
    .compare-table th:nth-child(1) { background: #022144; color: #fff; }
    .compare-table th:nth-child(2) { background: #6B7280; color: #fff; }
    .compare-table th:nth-child(3) { background: #961F5F; color: #fff; }
    .compare-table td {
      padding: 16px 18px;
      border-bottom: 1px solid #F1E1E8;
    }
    .compare-table tr:last-child td { border-bottom: 0; }
    .compare-table tr:nth-child(even) td { background: #FFF5F8; }
    .compare-table td:nth-child(3) {
      color: #961F5F;
      font-weight: 600;
    }

    /* Testimonial carousel */
    .testimonial-track {
      display: flex;
      transition: transform 0.5s ease;
    }
    .testimonial-slide {
      min-width: 100%;
      padding: 0 8px;
    }
    @media (min-width: 768px) {
      .testimonial-slide { min-width: 50%; }
    }
    @media (min-width: 1024px) {
      .testimonial-slide { min-width: 33.333%; }
    }

    /* Service card grid */
    .service-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px -6px rgba(150, 31, 95, 0.15);
    }