/* ==================================================================== */
/* --- DEDICATED Styles for Patient Info Page ("PREMIUM HUB" Version) --- */
/* ==================================================================== */

/* --- Immersive Hero Section --- */
.pi-hero-section { position: relative; padding: 6rem 1rem; text-align: center; background-image: url('https://images.pexels.com/photos/3279197/pexels-photo-3279197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; color: white; }
.pi-hero-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 74, 141, 0.7); z-index: 1; }
.pi-hero-section .container { position: relative; z-index: 2; }
.pi-hero-section h1 { font-size: 3rem; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); transform: translateY(20px); opacity: 0; animation: heroic-fade-up 0.8s 0.2s ease-out forwards; }
.pi-hero-section p { transform: translateY(20px); opacity: 0; animation: heroic-fade-up 0.8s 0.4s ease-out forwards; }
@keyframes heroic-fade-up { to { transform: translateY(0); opacity: 1; } }

/* --- General Section & Title Styling --- */
.pi-content-section { padding: 5rem 1rem; }
.pi-content-section:nth-of-type(even) { background-color: #f8f9fa; }
.pi-content-section .section-title { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; }
.pi-content-section .section-subtitle { font-size: 1.1rem; text-align: center; color: var(--color-text-light); max-width: 600px; margin: 0 auto 4rem auto; }



/* ==================================================================== */
/* --- FINAL "3D GLASS" GOOGLE REVIEWS SECTION --- */
/* Designed to precisely match the reference image. */
/* ==================================================================== */

/* 1. Section Background */
#testimonials {
    /* The light grey background from the reference image */
    background-color: #eef2f5;
    overflow: hidden; /* Prevents shadow clipping */
}

/* 2. Swiper Container for Layout and 3D Perspective */
.testimonial-slider-container {
    padding: 5rem 0; /* Generous vertical padding for the floating icon and shadows */
}

/* This wrapper is crucial for aligning all cards properly */
.swiper-wrapper {
    /* Ensures all slides align from the top, even if content height varies */
    align-items: center; 
}

/* 3. The 3D Glass Card Itself */
.testimonial-card-glass {
    position: relative;
    padding: 2.5rem;
    padding-top: 3.5rem; /* Extra top padding to make space for the floating icon */
    border-radius: 20px;
    text-align: center;
    color: #ffffff; /* All text inside will be white */
    
    /* The "Frosted Glass" Effect */
    background: linear-gradient(145deg, #0a60ab, #00408a);  /* Dark, semi-transparent background */
    backdrop-filter: blur(16px); /* The magic for the blur effect */
    -webkit-backdrop-filter: blur(16px); /* For Safari */
    
    /* Subtle border to catch the light */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Soft shadow to lift the card */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

    /* Ensures consistent height and flex properties */
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 320px; /* Set a minimum height for visual consistency */
}

/* 4. The Floating Google Icon Badge */
.google-icon-badge {
    position: absolute;
    top: -30px; /* Positions it floating above the card */
    left: 50%;
    transform: translateX(-50%);
    
    background: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* Perfect centering for the SVG icon inside */
    display: grid;
    place-items: center;
    
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.google-icon-badge svg {
    width: 28px;
    height: 28px;
}

/* 5. Star Rating */
.star-rating-glass {
    font-size: 1.7rem;
    color: #FFC107; /* Bright gold color for stars */
    letter-spacing: 5px; /* Spacing between stars */
    margin-bottom: 1.5rem;
}

/* 6. The Review Quote */
.quote-glass {
    font-size: 1.15rem;
    font-weight: 500; /* Bold but not too heavy */
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* Allows the quote to fill available space, pushing footer down */
}

/* 7. Patient Info (Name and Location) */
.patient-info-glass {
    margin-top: 2rem; /* Space above the name */
}
.patient-name-glass {
    font-size: 1.1rem;
    font-weight: 700; /* Bold name */
    margin: 0;
}
.patient-location-glass {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7); /* Lighter white for the location */
    margin-top: 0.25rem;
}


/* ==================================================================== */
/* --- FINAL FAQ Section (Matches Reference Image) --- */
/* ==================================================================== */

/* 1. Section Styling */
#faq.pi-content-section {
    background-color: #f8f9fa; /* The light grey background from the image */
}

/* 2. Section Header for Centered Title */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.section-header .section-title {
    margin-bottom: 0; /* Remove default margin from the title */
}

/* 3. FAQ Container */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* The space between each question card */
}

/* 4. The Accordion Item (the Card) */
.faq-item {
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid transparent; /* Key trick: Use a transparent border to prevent layout shifts */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

/* 5. The Question (Summary) part of the card */
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #333; /* Dark text color for the question */
    cursor: pointer;
    list-style: none; /* Removes the default arrow/marker */
    transition: color 0.3s ease-in-out;
}
.faq-item summary::-webkit-details-marker {
    display: none; /* Hides the marker in Safari */
}

/* 6. The Icon (+ or x) */
.faq-item summary::after {
    /* The '+' icon for the closed state */
    content: '+';
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-primary);
    transition: transform 0.3s ease-in-out;
}

/* 7. The Answer part of the card */
.faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Padding only appears when open */
    color: #556270; /* Slightly lighter text color for the answer */
    line-height: 1.7;
    overflow: hidden; /* Ensures content doesn't spill out during animation */
}
.faq-answer p {
    margin: 0;
}

/* 8. STYLES FOR THE "OPEN" STATE */
.faq-item[open] {
    border-color: var(--color-primary); /* The blue border when open */
    box-shadow: 0 8px 30px rgba(10, 96, 171, 0.1);
}
.faq-item[open] > summary {
    color: var(--color-primary); /* The question text turns blue */
    font-weight: 700;
}
.faq-item[open] > summary::after {
    /* The 'x' icon for the open state */
    content: '×'; /* Using the multiplication sign for a cleaner 'x' */
    transform: rotate(180deg); /* Smoothly animates the icon change */
}

/* ==================================================================== */
/* --- FINAL "GLASS EFFECT" PATIENT INSTRUCTIONS SECTION --- */
/* ==================================================================== */

/* 1. Section Background */
#patient-instructions.pi-content-section {
    /* We need a background for the blur effect to work on. 
       This light grey matches the other enhanced sections. */
    background-color: #eef2f5; 
}

/* 2. The Main Glass Card Container */
.instructions-container {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 20px; /* Softer, more modern corners */
    overflow: hidden; /* CRITICAL: This makes children respect the border-radius */
    
    /* The Frosted Glass Effect */
    background: rgba(255, 255, 255, 0.65); /* A milky, semi-transparent white */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); /* For Safari */
    
    /* The Full Border */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* The Shadow for depth */
    box-shadow: 0 15px 35px rgba(0, 74, 141, 0.1);
}

/* 3. The Tab Bar Styling */
.instruction-tabs {
    display: flex;
    /* A subtle separator line */
    border-bottom: 1px solid rgba(0, 74, 141, 0.1);
}

/* 4. The Tab Buttons (Inactive and Active states) */
.instruction-tabs .tab-button {
    flex-grow: 1; /* Makes both buttons take up equal space */
    width: 50%;
    
    background: transparent; /* Inactive tabs are fully transparent */
    border: none;
    padding: 1.25rem 1.5rem;
    
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(0, 48, 96, 0.6); /* Muted color for inactive text */
    cursor: pointer;
    
    /* Smooth transition for all properties */
    transition: all 0.3s ease-in-out;
}
.instruction-tabs .tab-button.active {
    /* The active tab gets a background highlight and bold text */
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-primary); /* Use the main theme color for emphasis */
    font-weight: 700;
}
.instruction-tabs .tab-button:hover:not(.active) {
    /* A subtle hover effect for inactive tabs */
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-primary);
}

/* 5. The Content Area Styling */
.instruction-content {
    padding: 2.5rem;
}
.instruction-content .tab-pane {
    display: none; /* Hide panes by default */
}
.instruction-content .tab-pane.active {
    display: block; /* Show active pane */
    /* A gentle fade-in animation */
    animation: fadeInPane 0.5s ease-in-out;
}
@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 6. List Styling (Headings and Checkmarks) */
.instruction-content h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    color: #002c58; /* A deep, professional blue */
}
.instruction-content ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each instruction */
}
.instruction-content li {
    padding-left: 2.2rem;
    position: relative;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #34495e; /* Softer dark color for readability */
}
.instruction-content li::before {
    /* The checkmark icon */
    content: '✓';
    color: #27ae60; /* A pleasant green for the checkmark */
    background: rgba(39, 174, 96, 0.1);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 28px;
    height: 28px;
    border-radius: 50%;
    
    /* Perfect centering for the checkmark */
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
}



/* =================================================================== */
/* --- Insurance & TPA Section (V2 - 3D Blue Card Redesign) --- */
/* =================================================================== */

/* 1. Main Section Styling */
#insurance.pi-content-section {
    background-color: #f8f9fa;
    text-align: center;
    padding: 5rem 1rem; /* Added vertical padding */
    overflow: hidden; /* Prevents shadows from creating scrollbars */
}
#insurance .section-title {
    color: #2c3e50;
}
#insurance .section-subtitle {
    margin-bottom: 4rem;
}

/* 2. Marquee Container (Unchanged) */
.insurance-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 6rem;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-group {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-around;
    gap: 6rem; min-width: 100%; animation: scroll-slow 50s linear infinite;
}
@keyframes scroll-slow {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.insurance-marquee:hover .marquee-group { animation-play-state: paused; }
.marquee-logo img {
    max-height: 45px; width: auto; transition: transform 0.3s ease;
}
.marquee-logo:hover img { transform: scale(1.1); }


/* 3. NEW: The 3D Blue Card Container */
/* This is the new card that wraps the two lists */
.empanelment-lists-grid {
    /* NEW: Gradient blue background for depth */
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
    color: #ffffff; /* All text inside will be light */
    
    display: grid;
    grid-template-columns: 1fr; /* Mobile First: 1 column */
    gap: 2.5rem; /* Space between the two lists on mobile */
    
    margin-top: 5rem; /* Space between marquee and this card */
    padding: 3rem; /* Generous padding */
    border-radius: 20px; /* Softer, more modern corners */

    /* NEW: The 3D Shadow Effect */
    box-shadow: 0 15px 45px rgba(10, 96, 171, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* NEW: The hover effect to make it "lift" */
.empanelment-lists-grid:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 55px rgba(10, 96, 171, 0.3), 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 4. Styling the Content Inside the Card */
.list-column .list-title {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    color: #ffffff; /* Bright white title */
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle separator line */
}

.empanelment-list {
    list-style: none; padding: 0; margin: 0;
    column-count: 1; column-gap: 2rem;
}

.empanelment-list li {
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.9); /* Slightly off-white for readability */
    font-size: 1rem;
    break-inside: avoid;
}

/* 5. The WhatsApp Button (Unchanged) */
.insurance-disclaimer {
    margin-top: 4rem;
    text-align: center;
}
.btn-whatsapp-contact {
    display: inline-block; background-color: #25D366; color: white;
    padding: 0.9rem 2.5rem; border-radius: 50px; font-weight: 700;
    font-size: 1rem; text-decoration: none; border: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}
.btn-whatsapp-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(37, 211, 102, 0.4);
}

/* --- Responsive Tablet and Desktop Styles --- */
@media (min-width: 768px) {
    .empanelment-lists-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns for the two lists */
        gap: 3rem;
        padding: 4rem; /* More padding on larger screens */
    }
}

@media (min-width: 992px) {
    .empanelment-list {
        column-count: 2; /* 2 columns within each list on desktop */
    }
}

/* ==================================================================== */
/* --- PREMIUM 3D APPOINTMENT CARD SECTION --- */
/* ==================================================================== */

/* Section background and 3D perspective */
#appointment.pi-content-section {
    background-color: #f0f4f8; /* Light, cool grey background */
    padding: 6rem 1rem;
    perspective: 1800px; /* Establishes the 3D space for the card */
}

/* Wrapper to center the card and apply the 3D tilt */
.appointment-card-wrapper {
    max-width: 750px;
    margin: 0 auto;
    transform: rotateX(8deg) rotateY(-10deg) rotateZ(4deg); /* Initial 3D tilt */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.appointment-card-wrapper:hover {
    transform: rotateX(0) rotateY(0) rotateZ(0); /* Flatten on hover for a satisfying effect */
}

/* The main blue card styling */
.appointment-form-container {
    background: linear-gradient(145deg, #0a60ab, #00408a); /* Rich blue gradient */
    border-radius: 24px;
    padding: 2.5rem;
    color: #fff;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1), /* Base shadow for lift */
        0 30px 60px rgba(0, 64, 138, 0.35), /* Deep color shadow for richness */
        inset 0 1px 2px rgba(255, 255, 255, 0.25); /* Inner highlight for glass effect */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns on desktop */
    gap: 1.5rem;
}

/* Form header styling */
.form-header {
    text-align: center;
    margin-bottom: 1rem;
}
.form-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
}
.form-subtitle {
    font-size: 1rem;
    color: #cce0ff;
    margin: 0;
}

/* General form group and label styling */
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group.full-width {
    grid-column: 1 / -1; /* Makes an element span both columns */
}
.form-group label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e0f0ff;
}

/* Input and Select field styling */
.appointment-form-container input,
.appointment-form-container select {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Dark, translucent background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #fff;
    transition: all 0.3s ease;
}
.appointment-form-container input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Focus state for inputs */
.appointment-form-container input:focus,
.appointment-form-container select:focus {
    outline: none;
    border-color: #55aaff;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(85, 170, 255, 0.3);
}

/* Specific styling for the date input to make the icon visible */
input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 2px rgba(0,0,0,0.5));
    cursor: pointer;
}

/* Custom dropdown arrow for the select box */
.appointment-form-container select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* WhatsApp Submit Button Styling */
.btn-submit-whatsapp {
    width: 100%;
    background: linear-gradient(145deg, #25D366, #128C7E); /* WhatsApp green gradient */
    color: white;
    font-weight: 700;
    text-align: center;
    padding: 0.9rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 5px 15px rgba(18, 140, 126, 0.4);
    margin-top: 1rem; /* Add some space above the button */
}
.btn-submit-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(18, 140, 126, 0.5);
}

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    #appointment.pi-content-section {
        padding: 4rem 1rem;
    }
    .appointment-card-wrapper {
        /* Tone down the 3D effect on mobile for better usability */
        transform: rotateX(3deg);
    }
    .appointment-form-container {
        /* Switch to a single-column layout */
        grid-template-columns: 1fr;
        padding: 2rem;
    }
    .form-title {
        font-size: 1.8rem;
    }
}