/* ============================================
   Surgery Cost Pages — Unittas Hospital
   External CSS (place in assets/css/)
   ============================================ */

/* --- Hero / Breadcrumb Section --- */
.cost-hero {
  background: linear-gradient(135deg, #0e3d6b 0%, #1a6fb5 100%);
  padding: 200px 0 50px !important;
  color: #fff !important;
  text-align: center;
}
.cost-hero h1 {
  font-size: 2rem;
  font-weight: 700 !important;
  margin-bottom: 12px;
  line-height: 1.3;
  color: #fff !important;
}
.cost-hero .breadcrumb-nav {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85) !important;
}
.cost-hero .breadcrumb-nav a {
  color: #fff !important;
  text-decoration: underline;
}

/* --- Main Content Area --- */
.cost-content-area {
  padding: 50px 0 60px;
}
.cost-content-area p,
.cost-content-area li,
.cost-content-area td,
.cost-content-area th {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #1a1a1a !important;
}
.cost-content-area h2 {
  font-size: 1.6rem;
  font-weight: 700 !important;
  color: #0e3d6b !important;
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8e8e8;
}
.cost-content-area h3 {
  font-size: 1.25rem;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 28px 0 12px;
}
.cost-content-area strong {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.cost-content-area em {
  color: #333 !important;
}
.cost-content-area a {
  color: #0e3d6b !important;
  text-decoration: underline;
}

/* --- Responsive Tables --- */
.table-responsive-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 30px;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.cost-table th,
.cost-table td {
  padding: 14px 16px;
  border: 1px solid #d0d0d0 !important;
  vertical-align: top;
}
.cost-table thead th {
  background: #0e3d6b !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  white-space: nowrap;
}
.cost-table tbody tr:nth-child(even) {
  background: #f7f9fc;
}
.cost-table tbody tr:hover {
  background: #edf3fa;
}

/* --- Package Include / Exclude Lists --- */
.package-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 25px;
}
.package-list li {
  padding: 8px 0 8px 32px;
  position: relative;
}
.package-list.included li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 8px;
}
.package-list.excluded li::before {
  content: "❌";
  position: absolute;
  left: 0;
  top: 8px;
}

/* --- CTA Box --- */
.cta-box {
  background: linear-gradient(135deg, #0e3d6b 0%, #1565a0 100%) !important;
  color: #fff !important;
  padding: 35px 30px;
  border-radius: 10px;
  text-align: center;
  margin: 40px 0;
}
.cta-box h2,
.cta-box h3 {
  color: #fff !important;
  border-bottom: none !important;
  margin-top: 0;
}
.cta-box p {
  color: #fff !important;
}
.cta-box a.cta-phone {
  display: inline-block;
  background: #fff !important;
  color: #0e3d6b !important;
  font-size: 1.3rem;
  font-weight: 700 !important;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none !important;
  margin-top: 15px;
  transition: background 0.3s;
}
.cta-box a.cta-phone:hover {
  background: #e0ecf7;
}
.cta-box .branch-text {
  margin-top: 12px;
  font-size: 15px;
  opacity: 0.9;
}

/* --- FAQ Accordion --- */
.faq-section {
  margin: 40px 0;
}
.faq-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: #f7f9fc !important;
  border: none;
  padding: 18px 50px 18px 20px;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.faq-question:hover {
  background: #edf3fa;
}
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: #0e3d6b;
  transition: transform 0.3s;
}
.faq-item.active .faq-question::after {
  content: "−";
}
.faq-answer {
  display: none;
  padding: 15px 20px 20px;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #1a1a1a !important;
}
.faq-answer p {
  color: #1a1a1a !important;
}
.faq-item.active .faq-answer {
  display: block;
}

/* --- Doctor Card --- */
.doctor-card {
  background: #f7f9fc;
  border-left: 4px solid #0e3d6b;
  padding: 22px 25px;
  margin: 15px 0;
  border-radius: 0 8px 8px 0;
}
.doctor-card strong {
  font-size: 1.1rem;
  color: #0e3d6b !important;
}
.doctor-card p {
  margin: 4px 0;
  color: #1a1a1a !important;
}

/* --- Sticky Sidebar (Desktop) --- */
.sticky-sidebar {
  position: sticky;
  top: 100px;
}
.sidebar-cta {
  background: #f7f9fc;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 25px 20px;
  text-align: center;
  margin-bottom: 20px;
}
.sidebar-cta h4 {
  font-size: 1.1rem;
  color: #0e3d6b !important;
  margin-bottom: 12px;
}
.sidebar-cta p {
  color: #333 !important;
}
.sidebar-cta a.sidebar-phone {
  display: block;
  background: #0e3d6b !important;
  color: #fff !important;
  font-size: 1.1rem;
  font-weight: 700 !important;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none !important;
  margin: 10px 0;
  transition: background 0.3s;
}
.sidebar-cta a.sidebar-phone:hover {
  background: #1565a0 !important;
}
.sidebar-links {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
}
.sidebar-links h4 {
  font-size: 1rem;
  color: #0e3d6b !important;
  margin-bottom: 12px;
}
.sidebar-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-links ul li {
  font-size: 15px !important;
}
.sidebar-links ul li a {
  display: block;
  padding: 8px 0;
  color: #1a1a1a !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s;
}
.sidebar-links ul li a:hover {
  color: #0e3d6b !important;
}

/* --- Recovery Timeline --- */
.recovery-block {
  margin: 15px 0;
  padding: 18px 20px;
  background: #f9fafb;
  border-radius: 8px;
}
.recovery-block strong {
  color: #0e3d6b !important;
}
.recovery-block p {
  color: #1a1a1a !important;
}

/* --- Insurance Block --- */
.insurance-block {
  background: #eef6ee;
  border-left: 4px solid #2e7d32;
  padding: 20px 25px;
  border-radius: 0 8px 8px 0;
  margin: 25px 0;
}
.insurance-block h3 {
  color: #2e7d32 !important;
  border-bottom: none !important;
}
.insurance-block p {
  color: #1a1a1a !important;
}

/* --- EMI Block --- */
.emi-block {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  padding: 20px 25px;
  border-radius: 0 8px 8px 0;
  margin: 25px 0;
}
.emi-block h3 {
  color: #e65100 !important;
  border-bottom: none !important;
}
.emi-block p {
  color: #1a1a1a !important;
}

/* --- Branch Maps --- */
.branch-maps {
  margin: 30px 0;
}
.branch-maps iframe {
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 300px;
}

/* --- Mobile Responsive --- */
@media (max-width: 991px) {
  .cost-hero {
    padding: 160px 0 35px !important;
  }
  .cost-hero h1 {
    font-size: 1.5rem;
  }
  .cost-content-area {
    padding: 30px 0 40px;
  }
  .sticky-sidebar {
    position: static;
    margin-top: 30px;
  }
}
@media (max-width: 576px) {
  .cost-hero {
    padding: 140px 0 30px !important;
  }
  .cost-hero h1 {
    font-size: 1.3rem;
  }
  .cost-content-area p,
  .cost-content-area li,
  .cost-content-area td {
    font-size: 16px !important;
  }
  .faq-question {
    font-size: 16px !important;
    padding: 14px 45px 14px 16px;
  }
  .faq-answer {
    font-size: 16px !important;
  }
  .cta-box {
    padding: 25px 18px;
  }
}