/* ==========================================================================
   TemplateGreen Custom Stylesheet
   Dr. Brijendra Singh - Orthopedic Surgeon & Specialist
   Stitch Screen ID: projects/12370554008627169976/screens/eeb906ff456b48abb6c0379f3d98dc95
   ========================================================================== */

/* Google Fonts & Material Symbols Imports */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

/* --- GreenTemplate Design System Tokens --- */
:root {
    --green-template-primary: #4a90a4;
    --green-template-primary-hover: #3b7687;
    --green-template-on-primary: #ffffff;
    --green-template-background: #ffffff;
    --green-template-surface: #f5fafb;
    --green-template-surface-variant: #eaf4f6;
    --green-template-on-surface: #1a1a1a;
    --green-template-on-surface-variant: #4a4a4a;
    --green-template-outline: #4a90a4;
    --green-template-outline-variant: #d1e1e4;

    --green-template-font-family: "Plus Jakarta Sans", sans-serif;

    --green-template-radius-lg: 0.5rem;
    --green-template-radius-xl: 0.75rem;
    --green-template-radius-full: 9999px;
    --green-template-radius-premium: 16px;

    --green-template-container-max: 1280px;

    /* Scrollbar */
    --green-template-scrollbar-width: 5px;
    --green-template-scrollbar-track: #f5f7fb;
    --green-template-scrollbar-thumb: var(--green-template-primary);
    --green-template-scrollbar-thumb-hover: var(--green-template-primary-hover);

    --stitch-bg: #f8f9ff;
    --stitch-surface: #f8f9ff;
    --stitch-surface-low: #eff4ff;
    --stitch-surface-container: #e5eeff;
    --stitch-surface-high: #dce9ff;
    --stitch-surface-white: #ffffff;

    --on-surface: #0b1c30;
    --on-surface-variant: #444651;
    --on-background: #0b1c30;
    --on-tertiary-container: #aaadaf;
    --outline: #757682;
    --outline-variant: #c5c5d3;
    --inverse-surface: #213145;
    --font-display: "Playfair Display", serif;
    --font-body: "Geist", sans-serif;

    --blog-radius-full: var(--green-template-radius-full);
    --blog-radius-premium: var(--green-template-radius-premium);
    --blog-primary: var(--green-template-primary);
    --blog-outline-variant: var(--green-template-outline-variant);
    --blog-shadow: 5px 5px 8px 2px #b5b5b5a6;
}

/* Global Styles */
/* Global Thin Scrollbar */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--green-template-scrollbar-thumb)
        var(--green-template-scrollbar-track);
}

::-webkit-scrollbar {
    width: var(--green-template-scrollbar-width);
    height: var(--green-template-scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--green-template-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--green-template-scrollbar-thumb);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--green-template-scrollbar-thumb-hover);
}

body {
    font-family: var(--green-template-font-family) !important;
    background-color: var(--green-template-background) !important;
    color: var(--green-template-on-surface) !important;
    line-height: 1.6;
    overflow-x: hidden;
}

#about,
#certificates,
#treatments,
#gallery,
#blogs,
#booking,
#faq,
#location {
    scroll-margin-top: 80px;
}

/* Container Utilities */
.gt-container {
    max-width: var(--green-template-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Text & Color Helpers */
.gt-text-primary {
    color: var(--green-template-primary) !important;
}

.gt-bg-primary {
    background-color: var(--green-template-primary) !important;
    color: var(--green-template-on-primary) !important;
}

.gt-bg-surface {
    background-color: var(--green-template-surface) !important;
}

.gt-bg-surface-variant {
    background-color: var(--green-template-surface-variant) !important;
}

.gt-text-muted {
    color: var(--green-template-on-surface-variant) !important;
}

/* Buttons */
.gt-btn-primary {
    background-color: var(--green-template-primary) !important;
    color: var(--green-template-on-primary) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--green-template-radius-xl);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 6px rgba(74, 144, 164, 0.2);
}

.gt-btn-primary:hover {
    background-color: var(--green-template-primary-hover) !important;
    color: var(--green-template-on-primary) !important;
    box-shadow: 0 6px 16px rgba(74, 144, 164, 0.35);
    transform: translateY(-1px);
}

.gt-btn-outline {
    background-color: transparent !important;
    color: var(--green-template-primary) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--green-template-radius-xl);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: 2px solid var(--green-template-primary) !important;
}

.gt-btn-outline:hover {
    background-color: rgba(74, 144, 164, 0.08) !important;
    color: var(--green-template-primary) !important;
}

/* Header & Navbar */
.gt-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--green-template-surface-variant);
}

.gt-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--green-template-primary) !important;
    text-decoration: none;
    line-height: 1.2;
}

.gt-brand-sub {
    font-size: 0.75rem;
    color: var(--green-template-on-surface-variant);
    font-weight: 500;
}

.gt-nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--green-template-on-surface-variant) !important;
    transition: color 0.2s ease;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.gt-nav-link:hover,
.gt-nav-link.active {
    color: var(--green-template-primary) !important;
}

.hover-primary:hover {
    color: var(--green-template-primary) !important;
}

@media (max-width: 991.98px) {
    .gt-header .navbar-collapse {
        background-color: #ffffff;
        padding: 1.25rem;
        border-radius: var(--green-template-radius-xl);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-top: 0.75rem;
        border: 1px solid var(--green-template-surface-variant);
    }
}

/* Pill Badges */
.gt-badge-pill {
    background-color: var(--green-template-surface-variant);
    color: var(--green-template-primary);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--green-template-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hero Section */
.gt-hero-img-wrapper {
    position: relative;
    border-radius: var(--green-template-radius-premium);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 4px solid #ffffff;
    background-color: var(--green-template-surface-variant);
    max-height: 700px;
}

/* Stats Section */
.gt-stat-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--green-template-primary);
    line-height: 1;
    transition: transform 0.3s ease;
}

.gt-stat-card:hover .gt-stat-number {
    transform: scale(1.05);
}

.gt-stat-divider {
    height: 4px;
    width: 48px;
    background-color: rgba(74, 144, 164, 0.25);
    border-radius: 2px;
    margin: 0.5rem 0;
}

/* Treatment Tabs */
.gt-treatment-tab {
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    border-radius: var(--green-template-radius-xl);
    font-weight: 600;
    background-color: #ffffff;
    border: 1px solid var(--green-template-surface-variant);
    color: var(--green-template-on-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.gt-treatment-tab:hover {
    border-color: var(--green-template-primary);
}

.gt-treatment-tab.active {
    background-color: var(--green-template-primary);
    color: #ffffff;
    border-color: var(--green-template-primary);
}

.gt-treatment-tab .material-symbols-outlined {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gt-treatment-tab:hover .material-symbols-outlined,
.gt-treatment-tab.active .material-symbols-outlined {
    opacity: 1;
}

.gt-treatment-tab.active .tab-title {
    color: #ffffff !important;
}
.gt-treatment-tab .tab-title {
    color: var(--green-template-on-surface-variant);
}

.gt-treatment-tab.active .tab-subtitle {
    color: var(--green-template-surface-variant) !important;
}

.gt-treatment-tab .tab-subtitle {
    color: rgba(68, 70, 81, 0.6);
}
.video-play-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--green-template-primary);
    backdrop-filter: blur(12px);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

/* Hours Cards */
.gt-hours-card {
    padding: 1.5rem;
    border-radius: var(--green-template-radius-xl);
    border: 1px solid rgba(74, 144, 164, 0.2);
    background-color: #ffffff;
    text-align: center;
    transition: all 0.3s ease;
}

.gt-hours-card:hover {
    box-shadow: 0 10px 25px rgba(74, 144, 164, 0.12);
    transform: translateY(-2px);
}

.gt-hours-card.closed {
    border-color: rgba(74, 144, 164, 0.1);
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.6;
}

/* Gallery Section */
.gt-gallery-item {
    aspect-ratio: 1 / 1;
    border-radius: var(--green-template-radius-premium);
    overflow: hidden;
    border: 1px solid var(--green-template-surface-variant);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    background-color: var(--green-template-surface-variant);
}

.gt-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gt-gallery-item:hover img {
    transform: scale(1.06);
}

/* FAQ Details */
details.gt-faq-item {
    background-color: #ffffff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--green-template-radius-premium);
    border: 1px solid var(--green-template-surface-variant);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

details.gt-faq-item summary {
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--green-template-on-surface);
}

details.gt-faq-item summary::-webkit-details-marker {
    display: none;
}

.gt-faq-item .material-symbols-outlined {
    transition: transform 0.2s ease;
}

.gt-faq-item[open] summary .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Input Overrides */
.gt-input {
    background-color: var(--green-template-surface-variant) !important;
    border: 1px solid var(--green-template-outline-variant) !important;
    border-radius: var(--green-template-radius-lg) !important;
    padding: 0.85rem 1rem !important;
}

.gt-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(74, 144, 164, 0.25) !important;
    border-color: var(--green-template-primary) !important;
}

/* Footer */
.gt-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--green-template-surface-variant);
}

/* Helper classes to replace inline styles */
.gt-main-content {
    padding-top: 80px;
}

.gt-fs-10 {
    font-size: 10px !important;
}

.gt-cursor-pointer {
    cursor: pointer;
}

.gt-location-map-container {
    height: 350px;
}

/* Utility to ensure broken images fall back cleanly without broken alt text display */
img {
    text-indent: -10000px;
}

/* ==========================================================================
   Clinic Hours Section (Morning & Evening Session Timing Styles)
   ========================================================================== */
.gt-hours-day {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--green-template-on-surface);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--green-template-surface-variant);
}

.gt-hours-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.gt-hours-label {
    color: var(--green-template-on-surface-variant);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gt-hours-label .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--green-template-primary);
}

.gt-hours-time {
    font-weight: 700;
    color: var(--green-template-primary);
}

.gt-hours-closed-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--green-template-on-surface-variant);
    opacity: 0.7;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Treatments Section Mobile Horizontal Scroll Tabs (Below 576px)
   ========================================================================== */
.gt-treatment-tabs-wrapper {
    max-height: 700px;
    overflow-y: auto;
}
@media (max-width: 575.98px) {
    .gt-treatment-tabs-wrapper {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        padding-bottom: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .gt-treatment-tabs-wrapper::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .gt-treatment-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 140px;
        padding: 0.65rem 1.25rem !important;
        min-width: 130px;
        padding: 0.6rem 1rem !important;
        white-space: nowrap !important;
        font-size: 0.875rem !important;
        font-size: 0.85rem !important;
    }
    .gt-treatment-tab .material-symbols-outlined {
        display: none !important;
    }
}

/* Scroll-triggered Reveal Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar */
.custom-scrollbar {
    scrollbar-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--green-template-scrollbar-thumb)
        var(--green-template-scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar {
    width: var(--green-template-scrollbar-width);
    height: var(--green-template-scrollbar-width);
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--green-template-primary);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--green-template-scrollbar-thumb);
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--green-template-scrollbar-thumb-hover);
}

.gt-footer-disc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 320px;
}

/* Gallery Section Utility Classes */
.gallery-card {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 4px 20px #afd5df6b;
    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}