/* treatment-detail page styles (moved out of treatment-detail.php) */

body{
    font-family: var(--font-sans);
    background:#f6f8fb;
    color:rgba(33,37,41,0.75);
    transition: background-color 0.3s ease;
}

.nav-space{ height:90px; }

/* ============================= */
/* GLOBAL TYPOGRAPHY */
/* ============================= */

.info-card p{
    margin-bottom:8px !important;
    line-height: var(--lh-body) !important;
    font-weight:400 !important;
    font-size: var(--fs-base) !important;
     color:rgba(33,37,41,0.75);
    font-family: var(--font-sans) !important;
}
.info-card li{
    margin-bottom:8px !important;
    line-height: var(--lh-body) !important;
    font-weight:400 !important;
    font-size: var(--fs-base) !important;
     color:rgba(33,37,41,0.75);
    font-family: var(--font-sans) !important;
}
.info-card li strong{
    margin-bottom:8px;
    line-height: var(--lh-body);
    font-size: var(--fs-base);
     font-weight:600 !important;
   color:rgba(33,37,41,0.75);
    font-family: var(--font-sans);
}

.sub-heading{
    font-weight:600;
    font-size: var(--fs-base);
    line-height: var(--lh-body);
     color:rgba(33,37,41,0.75);
    margin-top:15px;
    margin-bottom:5px;
    transition: color 0.3s ease;
}
.sub-heading:hover{
    color:#0d6efd;
}

.section-heading{
    font-weight:600;
    font-size: var(--fs-xl);
     color:rgba(33,37,41,0.75);;
    margin-bottom:12px;
    transition: color 0.3s ease;
}
.section-heading:hover{
    color:#0d6efd;
}

/* ============================= */
/* HEADER */
/* ============================= */

.page-header{
    background:linear-gradient(135deg,#0d6efd,#0a58ca);
    color:#fff;
    padding:25px 15px;
    text-align:center;
    transition: background 0.3s ease;
}
.page-header:hover{
    background:linear-gradient(135deg,#6610f2,#0d6efd);
}
.page-header h1{ 
    font-weight:700; 
}

/* ============================= */
/* CARD BASE STYLES */
/* ============================= */

.detail-box,
.info-card,
.cta-box{
    background:#fff;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    transition: all 0.3s ease;
}

.detail-box{
    padding:40px;
}
.detail-box:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    background:linear-gradient(135deg, #ffffff, #f8f9fa);
}

.info-card{
    padding:22px 28px;
    max-width:900px;
    margin:auto;
}
.info-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    background:linear-gradient(135deg, #ffffff, #f8f9fa);
}

.cta-box{
    padding:30px;
    text-align:center;
    margin-top:0;
}
.cta-box:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,.2);
    background:linear-gradient(135deg, #ffffff, #f8f9fa);
}

/* ============================= */
/* COST + BADGES */
/* ============================= */

.cost-box{
    background:#eaf2ff;
    padding:15px;
    border-radius:10px;
    font-size: var(--fs-md);
    font-weight:700;
    color:#0d6efd;
    transition: background 0.3s ease;
}
.cost-box:hover{
    background:#d1e7ff;
}

.feature-badge{
    background:#eaf2ff;
    padding:8px 14px;
    border-radius:20px;
    font-weight:600;
    color:#0d6efd;
    font-size: var(--fs-xs);
    transition: background 0.3s ease;
}
.feature-badge:hover{
    background:#d1e7ff;
}

.cost-highlight{
    background:linear-gradient(135deg,#0d6efd,#0a58ca);
    color:#fff;
    padding:40px;
    border-radius:18px;
    text-align:center;
    transition: background 0.3s ease;
}
.cost-highlight:hover{
    background:linear-gradient(135deg,#6610f2,#0d6efd);
}
.cost-value{
    font-size: var(--fs-h2);
    font-weight:700;
    margin:10px 0;
}

/* ============================= */
/* DOCTOR CARD */
/* ============================= */

.doctor-card2{
    background:linear-gradient(135deg,#ffffff,#f8f9fa);
    border-radius:20px;
    padding:30px;
    text-align:left;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
    transition:all 0.4s ease;
    border:1px solid #e9ecef;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.doctor-card2::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#6610f2);
}

.doctor-card2:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    border-color:#0d6efd;
}

.doctor-card2 img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
    border:3px solid #0d6efd;
}

.doctor-card2 h5{
    font-size: var(--fs-lg);
    font-weight:700;
     color:rgba(33,37,41,0.75);
    margin-bottom:10px;
}

.doctor-card2 p{
    font-size: var(--fs-sm);
    color:rgba(33,37,41,0.75);
    margin-bottom:8px;
    line-height:1.5;
}

.doctor-card2 .btn{
    background:linear-gradient(135deg,#0d6efd,#6610f2);
    border:none;
    border-radius:25px;
    padding:10px 20px;
    font-weight:600;
    text-transform:uppercase;
    margin-top:15px;
}

/* ============================= */
/* HOSPITAL CARD */
/* ============================= */

.hospital-card2{
    background:linear-gradient(135deg,#ffffff,#f8f9fa);
    border-radius:20px;
    padding:30px;
    text-align:left;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
    transition:all 0.4s ease;
    border:1px solid #e9ecef;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
    margin-bottom:0;
}

.hospital-card2::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,#28a745,#20c997);
}

.hospital-card2:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    border-color:#28a745;
}

.hospital-card2 img {
    width: 90px;
    height: 90px;
    border-radius: 15px;
    object-fit: cover; /* <--- THIS IS THE MAGIC FIX! */
    margin-bottom: 15px;
    border: 3px solid #28a745;
    background-color: #ffffff;
}

/* ============================= */
/* TABLE */
/* ============================= */

.med-table{
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.med-table thead{
    background:linear-gradient(135deg,#0d6efd,#0a58ca);
    color:#fff;
}

.med-table th{
    padding:14px;
    border:none;
    font-weight:600;
}

.med-table td{
    padding:14px;
    border:none;
}

.med-table tbody tr:nth-child(odd){
    background:#f4f7fb;
}
.med-table tbody tr:nth-child(even){
    background:#e9eef5;
}

.table-footer{
    background:#1b9a96;
    color:#fff;
    padding:14px;
    font-weight:600;
}

/* ============================= */
/* CTA BUTTON */
/* ============================= */

.cta-review{
    display:inline-block;
    background:linear-gradient(135deg,#0d6efd,#0a58ca);
    color:#fff;
    padding:12px 24px;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
    transition:all 0.3s ease;
}
.cta-review:hover{
    background:linear-gradient(135deg,#0a58ca,#084298);
    color:#fff;
    transform:translateY(-2px);
}

.cta-center{
    text-align:center;
    margin:10px 0 25px;
}

   /* your old CSS */

   /* ✅ ADD THIS HERE */
   .doctor-card2 {
       overflow: visible;
   }

   .doctor-card2 .btn {
       position: relative;
       z-index: 1000;
       cursor: pointer;
   }

/* ---- Former inline style="..." attributes ----
   :not(#_#_#_) gives these the same strength an inline style had:
   they beat normal rules but still lose to !important rules. */
.treatment-detail-s1:not(#_#_#_) {
  max-width: 1200px;
}
.treatment-detail-s2:not(#_#_#_) {
  font-family: var(--font-sans);
}
.treatment-detail-s3:not(#_#_#_) {
  max-width: 900px;
}