/* Single Post & Page Containers */
.doctor-single-post-container,
.doctor-single-page-container,
.doctor-404-page-container,
.doctor-search-page-container,
.doctor-archive-page-container,
.doctor-contact-page-container,
.doctor-about-page-container {
    padding: 2rem 1rem;
    background-color: #fff;
    max-width: 100%;
}

/* Content Wrappers */
.doctor-single-content-wrapper,
.doctor-404-content-wrapper {
    max-width: 640px;
    margin: 0 auto !important;
}

.doctor-page-content-wrapper,
.doctor-search-content-wrapper,
.doctor-archive-content-wrapper {
    max-width: 980px;
    margin: 0 auto !important;
}

/* Titles */
.doctor-single-title,
.doctor-404-title,
.doctor-search-title,
.doctor-archive-title {
    margin-bottom: 2rem;
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

.doctor-archive-title {
    color: #80319a; /* Secondary color */
}

/* Featured Image */
.doctor-single-image {
    border-radius: 10px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 100%;
    height: auto;
}

/* Content Body */
.entry-content,
.wp-block-post-content,
.doctor-page-content-wrapper .wp-block-post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: right;
    direction: rtl;
        padding: 30px 0;
}



.entry-content a,
.wp-block-post-content a {
    color: #0073aa;
    text-decoration: underline;
}

.entry-content h2, .entry-content h3, .entry-content h4,
.wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Post Navigation */
.doctor-post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

/* Comments */
.doctor-comments-section {
    margin-top: 3rem;
}

.doctor-comments-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.doctor-comments-section .comment-form label {
    display: block;
    margin-bottom: 0.5rem;
}

.doctor-comments-section .comment-form input,
.doctor-comments-section .comment-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.doctor-comments-section .submit {
    background-color: #13bfb1;
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
}

/* Related Posts & Search/Archive Grid */
.doctor-related-posts .doctor-blog-grid,
.doctor-search-results-grid,
.doctor-archive-results-grid,
.doctor-404-content-wrapper .doctor-blog-grid {
    margin-top: 3rem;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.doctor-related-posts .doctor-blog-card,
.doctor-search-results-grid .doctor-blog-card,
.doctor-archive-results-grid .doctor-blog-card,
.doctor-404-content-wrapper .doctor-blog-card,
.doctor-search-card,
.doctor-archive-card {
    display: flex !important;
    flex-direction: row !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    align-items: stretch !important; /* Ensure full height */
    min-height: 150px; /* Minimum height for consistency */
}

/* Thumbnail Wrapper in Cards */
.doctor-related-posts .doctor-blog-image-wrapper,
.doctor-search-image-wrapper,
.doctor-archive-image-wrapper,
.doctor-404-content-wrapper .doctor-blog-image-wrapper {
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    position: relative !important; /* For absolute positioning of child */
    padding-top: 0 !important; /* Override padding aspect ratio */
    align-self: stretch !important; /* Ensure it stretches to fill height */
    min-height: 100% !important;
    order: 1 !important; /* Ensure it's the first item (Right in RTL) */
    overflow: hidden !important;
    display: flex !important;
}

/* The actual image link/span */
.doctor-post-thumbnail-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
    z-index: 1 !important;
}

/* Allow images in archive/search wrappers (for wp:post-featured-image block) */
.doctor-search-image-wrapper img,
.doctor-archive-image-wrapper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Related posts still use the span background, so images inside might be hidden if present, but usually aren't there. 
   But we removed display:none for related posts too just in case we switch later. 
   Wait, if we allow img, does it break the span? The span is empty. 
   If we add an img inside the span, it might be weird. 
   But wp:post-featured-image outputs figure > a > img. 
   My previous CSS: .doctor-related-posts .doctor-blog-image-wrapper img { display: none !important; }
   I will update this to be specific to related posts if needed, or just allow images generally.
*/

.doctor-related-posts .doctor-blog-image-wrapper img,
.doctor-404-content-wrapper .doctor-blog-image-wrapper img {
    /* Keep hiding images here if they are autogenerated by WP inside the wrapper, 
       but the shortcode generates a span. So this is likely fine to remove or keep.
       I'll remove the display:none rule entirely. */
}

/* Style the figure/link for wp-block-post-featured-image */
.wp-block-post-featured-image {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}
.wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Content in Cards */
.doctor-related-posts .doctor-blog-content,
.doctor-search-content,
.doctor-archive-content,
.doctor-404-content-wrapper .doctor-blog-content {
    width: 60% !important;
    padding: 1.5rem;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    order: 2 !important; /* Ensure it's the second item (Left in RTL) */
}

.doctor-related-posts .doctor-blog-link,
.doctor-404-content-wrapper .doctor-blog-link {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
}

.doctor-blog-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.doctor-blog-excerpt {
    font-size: 0.9rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile Responsive for Cards */
@media (max-width: 600px) {
    .doctor-related-posts .doctor-blog-card,
    .doctor-search-results-grid .doctor-blog-card,
    .doctor-archive-results-grid .doctor-blog-card,
    .doctor-404-content-wrapper .doctor-blog-card,
    .doctor-search-card,
    .doctor-archive-card {
        flex-direction: column !important;
    }

    .doctor-related-posts .doctor-blog-image-wrapper,
    .doctor-search-image-wrapper,
    .doctor-archive-image-wrapper,
    .doctor-404-content-wrapper .doctor-blog-image-wrapper {
        width: 100% !important;
        height: 200px !important; /* Fixed height for mobile */
    }

    .doctor-related-posts .doctor-blog-content,
    .doctor-search-content,
    .doctor-archive-content,
    .doctor-404-content-wrapper .doctor-blog-content {
        width: 100% !important;
    }
}

/* Header Wrapper Fix */
.doctor-header-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Contact Page Styles */
.doctor-contact-page-container {
    padding-top: 2rem;
    padding-bottom: 0;
    direction: rtl;
}

.doctor-contact-intro-wrapper {
    margin-bottom: 3rem !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.doctor-contact-main-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: #80319a;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.doctor-contact-intro-text {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
}

.doctor-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem !important;
    max-width: 1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.doctor-contact-info-item {
    background: #fff;
    border: 1px solid rgba(19, 191, 177, 0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.doctor-contact-info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #13bfb1;
}

.doctor-contact-info-item h3 {
    color: #80319a;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 700;
    margin-top: 0;
}

.doctor-contact-info-item p {
    color: #333;
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}

.doctor-contact-main-columns {
    gap: 2rem !important;
    max-width: 1024px !important;
    margin: 0 auto 4rem auto !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Modifier to reset home page absolute positioning for contact page only */
.doctor-working-hours-column.doctor-static-column,
.doctor-contact-form-column.doctor-static-column {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 16px;
    width: 100% !important;
    background-color: #80319a !important; /* Default purple */
}

.doctor-contact-form-column.doctor-static-column {
    background-color: #13bfb1 !important; /* Green for form */
    box-shadow: 0 10px 30px rgba(19, 191, 177, 0.15) !important;
}

.doctor-working-hours-column.doctor-static-column {
    box-shadow: 0 10px 30px rgba(128, 49, 154, 0.15) !important;
}

.doctor-contact-map {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.doctor-contact-map iframe {
    display: block;
    vertical-align: bottom;
    width: 100%;
    height: 450px;
}

/* About Page Styles */
.doctor-about-page-container {
    padding-top: 3rem;
    padding-bottom: 4rem;
    direction: rtl;
}

/* Intro Section */
.doctor-about-intro {
    max-width: 1200px !important;
    margin: 0 auto 4rem auto !important;
}

.doctor-about-intro-columns {
    gap: 3rem !important;
    align-items: center !important;
}

.doctor-about-image-column {
    display: flex;
    justify-content: center;
}

.doctor-about-image {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    height: auto;
}

.doctor-about-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: #80319a;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: right;
}

.doctor-about-content {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
    text-align: justify;
}

.doctor-about-content p {
    margin-bottom: 1.5rem;
}

/* Video Section */
.doctor-about-video {
    max-width: 1024px !important;
    margin: 0 auto 5rem auto !important;
    text-align: center;
}

.doctor-about-video-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 900px;
}

.doctor-about-video-cover {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: block;
}

.doctor-about-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(128, 49, 154, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(128, 49, 154, 0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.doctor-about-play-button:hover {
    background-color: #13bfb1;
    transform: translate(-50%, -55%);
    box-shadow: 0 15px 40px rgba(19, 191, 177, 0.4);
}

.doctor-play-icon {
    font-size: 1.5rem;
}

.doctor-play-text {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Portfolio Section */
.doctor-about-portfolio {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.doctor-about-portfolio-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: #80319a;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

.doctor-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.doctor-portfolio-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
}

.doctor-portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.doctor-portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.doctor-portfolio-item:hover img {
    transform: scale(1.02);
}

.doctor-portfolio-caption {
    padding: 1.25rem;
    text-align: center;
    font-weight: 600;
    color: #333;
    margin: 0;
    background: #fff;
    border-top: 1px solid #eee;
    position: relative;
    z-index: 2;
}

/* Responsive About Page */
@media (max-width: 900px) {
    .doctor-contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .doctor-about-intro-columns {
        flex-direction: column-reverse !important; /* Image on top on mobile */
    }
    
    .doctor-about-text-column {
        text-align: justify;
    }
    
    .doctor-about-title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .doctor-contact-info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .doctor-contact-main-columns {
        flex-direction: column;
        gap: 2rem !important;
    }
    
    .doctor-contact-page-container {
        padding-top: 1rem;
    }
    
    .doctor-portfolio-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .doctor-about-play-button {
        padding: 0.75rem 1.5rem;
        width: 80%;
        justify-content: center;
    }
    
    .doctor-play-text {
        font-size: 1rem;
    }
}

/* FAQ Single Page List */
.doctor-faq-simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.doctor-faq-simple-list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.doctor-faq-simple-list li:last-child {
    border-bottom: none;
}

.doctor-faq-simple-list li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: block;
    transition: color 0.3s ease;
}

.doctor-faq-simple-list li a:hover {
    color: #13bfb1; /* Primary color */
}

/* Ensure Title is RTL */
.doctor-single-title {
    text-align: right !important;
}

/* Pagination Styling */
.wp-block-query-pagination {
    margin-top: 3rem !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    font-family: inherit !important;
}

.wp-block-query-pagination a.page-numbers,
.wp-block-query-pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #eee;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.wp-block-query-pagination span.page-numbers.current {
    background-color: #80319a; /* Primary/Secondary color */
    color: #fff;
    border-color: #80319a;
}

.wp-block-query-pagination a.page-numbers:hover {
    background-color: #13bfb1;
    color: #fff;
    border-color: #13bfb1;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    /* These are typically links inside, but sometimes buttons depending on block version. 
       Usually they output `a.wp-block-query-pagination-previous` */
}
/* Top Announcement Bar */
.doctor-top-announcement-bar {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    padding: 18px 0 15px 0;
    width: 100%;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
    z-index: 1000;
    position: relative;
    direction: rtl;
}

/* Quick Access Buttons */
.doctor-quick-access-section {
    margin: 2rem 0;
    padding-bottom: 2rem;
}

.doctor-quick-access-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 1rem;
    max-width: 1024px;
    margin: 0 auto !important;
}

.doctor-qa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 24%;
    max-width: 200px;
    height: 60px;
    max-height: 80px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    padding: 0 1%;
    box-shadow: 0 5px 24px -7px rgba(0, 0, 0, 0.4);
    
}

.doctor-qa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.doctor-qa-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.doctor-qa-btn span {
    white-space: nowrap;
}

/* Instagram */
.doctor-qa-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    border: none;
}
.doctor-qa-instagram:hover {
    color: #fff;
    opacity: 0.9;
}

/* WhatsApp */
.doctor-qa-whatsapp {
    background-color: #25D366;
    color: #fff;
    border: none;
}
.doctor-qa-whatsapp:hover {
    color: #fff;
    background-color: #1ebe57;
}

/* Appointment */
.doctor-qa-appointment {
    background-color: #fff;
    border: 2px solid #80319a; /* Purple */
    color: #80319a;
}
.doctor-qa-appointment:hover {
    background-color: #80319a;
    color: #fff;
}

/* BMI */
.doctor-qa-bmi {
    background-color: #fff;
    border: 2px solid #13bfb1; /* Teal/Primary */
    color: #13bfb1;
}
.doctor-qa-bmi:hover {
    background-color: #13bfb1;
    color: #fff;
}

@media (max-width: 768px) {
    .doctor-qa-btn {
        width: 48%; /* 2 per row on tablets/large phones */
        max-width: none;
        font-size: 1rem; /* Smaller font */
        padding: 0 0.5rem;
    }
}

@media (max-width: 500px) {
    .doctor-qa-btn {
        width: 100%; /* Full width on small mobile */
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
}


/* Modern Services Grid */
.doctor-services-section {
    padding: 0;
    background: #ffffff;
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 235, 242, 1) 50%, rgba(252, 252, 252, 1) 100%);
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 235, 242, 1) 50%, rgba(252, 252, 252, 1) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 235, 242, 1) 50%, rgba(252, 252, 252, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FCFCFC", GradientType=0);
}

.doctor-services-title {
    margin-bottom: 2rem !important;
    color: #333;
    font-weight: 800 !important;
}

.doctor-services-modern-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding: 0 1rem;
    direction: rtl;
}

.doctor-service-modern-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    border: 2px solid #cecece;
    height: auto;
}

.doctor-service-modern-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border-color: rgba(19, 191, 177, 1);
}

.doctor-service-modern-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.75rem 0;
}

.doctor-service-modern-desc {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes button down */
}

.doctor-service-modern-link {
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    align-self: center; /* Center button */
}

.doctor-service-modern-box:hover .doctor-service-modern-link {
    background-color: #13bfb1;
    color: #fff;
    box-shadow: 0 5px 15px rgba(19, 191, 177, 0.3);
}

/* Mosaic Effect / Variable colors on hover could be added here if desired */
.doctor-service-modern-box:nth-child(odd):hover {
    border-color: rgba(128, 49, 154, 1); /* Purple hint */
}
.doctor-service-modern-box:nth-child(odd):hover .doctor-service-modern-link {
    background-color: #80319a;
    box-shadow: 0 5px 15px rgba(128, 49, 154, 1);
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .doctor-services-modern-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .doctor-services-modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .doctor-services-modern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .doctor-service-modern-box {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .doctor-services-modern-grid {
        grid-template-columns: 1fr;
    }
}

/* Workflow / Timeline Section */
.doctor-workflow-section {
    padding: 4rem 0;
    background-color: #fff;
    overflow: hidden;
}

.doctor-workflow-title {
    margin-bottom: 4rem !important;
    font-weight: 800 !important;
    color: #333;
}

.doctor-workflow-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    direction: rtl; /* RTL for flow from right to left if desired, or can be LTR depending on design preference */
}

/* The Animated Line */
.doctor-workflow-line-wrapper {
    position: absolute;
    top: 50px; /* Adjust based on marker center */
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 1;
}

.doctor-workflow-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.doctor-workflow-path {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 2;
    stroke-dasharray: 10, 5;
    animation: dashAnimation 30s linear infinite;
}

@keyframes dashAnimation {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 1000; }
}

/* Steps Container */
.doctor-workflow-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    gap: 1rem;
}

.doctor-workflow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    position: relative;
}

/* Step Marker (Circle) */
.doctor-step-marker {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 5px #fff; /* Gap from line */
}

.doctor-workflow-step:hover .doctor-step-marker {
    background: #333;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px #fff;
}

/* Special Support Steps style (Nutrition/Psychology) - maybe different color? */
.doctor-workflow-step.special-support .doctor-step-marker {
    border-color: #80319a;
    color: #80319a;
}
.doctor-workflow-step.special-support:hover .doctor-step-marker {
    background: #80319a;
    color: #fff;
}
/* Content Box */
.doctor-step-content {
    background: #fff;
    border: 1px solid #cecece;
    padding: 1rem;
    border-radius: 12px;
    width: 80%;
    max-width: 140px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.doctor-workflow-step:hover .doctor-step-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #333;
}
.doctor-workflow-step.special-support:hover .doctor-step-content {
    border-color: #80319a;
}

.doctor-step-content h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #333;
}

.doctor-step-content p {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .doctor-workflow-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .doctor-workflow-line-wrapper {
        top: 0;
        left: 20px; /* Align with marker center */
        width: 4px;
        height: 100%;
    }
    
    .doctor-workflow-path {
        d: path("M2,0 L2,1000"); /* Vertical line */
    }

    .doctor-workflow-step {
        flex-direction: row;
        width: 100%;
        margin-bottom: 2rem;
        align-items: flex-start;
        text-align: right;
    }

    .doctor-step-marker {
        margin-bottom: 0;
        margin-left: 1.5rem;
        flex-shrink: 0;
    }

    .doctor-step-content {
        max-width: 100%;
        text-align: right;
    }
}

.doctor-bmi-calculator-wrapper{
    max-width: 600px;
    margin: 50px auto 100px auto;
}
.doctor-form-group{    padding: 10px 5px;}
.doctor-form-group label{font-size: 1.5rem; width: 150px;display: inline-block;}
.doctor-form-group input{font-size: 1.5rem; width: 250px;display: inline-block; padding: 10px 5px}

#bmi-calculate-btn{transform: all .3s ease; font-size: 1.5rem; width: 200px; background-color: #13bfb1; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; width: 100%; margin: 20px auto; max-width: 300px; }
#bmi-calculate-btn:hover{background-color: #0faaa0; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(19, 191, 177, 0.3);}

.doctor-bmi-result{
    width: 100%;
    padding: 20px;
    position: relative;
}
.doctor-bmi-result .row{width: 100%;
    display: inline;}
    .bmi-score-circle {
        box-shadow: 0 0 16px -5px rgba(0, 0, 0, 0.4);
        width: 48%;
        max-width: 200px;
        text-align: center;
        padding: 8px 0 2px 0;
        font-size: 1.4rem;
        font-weight: bold;
        border: 1px solid;
        border-radius: 5px;
    }

.bmi-danger{
    background: #ffebeb;
    border: 2px solid #ce3333;
}
.bmi-normal{
    background: #ebffee;
    border: 2px solid #3bce33;
}
.bmi-danger .bmi-score-circle {background: #ffc2c2;
    color: red;}
    .bmi-normal .bmi-score-circle {background: #d8ffc2;
        color: green;}
        
.wp-block-image img{border-radius: 50px;
    box-shadow: 0 4px 21px -11px rgba(0, 0, 0, 0.3);
    overflow: hidden;}