/* ================================================================
   DENTAL STUDIO DR. SHKENZA  ·  MAIN STYLESHEET
   ================================================================ */

/* ----- CSS Variables ------------------------------------------ */
:root {
    --navy:        #112236;
    --blue:        #436280;
    --sky:         #a3bad2;
    --pale:        #dbe4ed;
    --white:       #ffffff;
    --radius:      12px;
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm:   0 2px 12px rgba(17, 34, 54, 0.07);
    --shadow-md:   0 6px 28px rgba(17, 34, 54, 0.13);
    --shadow-lg:   0 16px 60px rgba(17, 34, 54, 0.20);
}

/* ----- Custom font -------------------------------------------- */
@font-face {
    font-family: 'baloo';
    src: url('assets/fonts/baloo.ttf') format('truetype');
    font-display: swap;
}

/* ----- Reset / base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: Verdana, Geneva, sans-serif;
    color: #2c3e50;
    overflow-x: hidden;
    line-height: 1.75;
}

a         { color: #fff; text-decoration: none; }
a:visited { color: #fff; }
a:hover   { color: var(--pale); }


/* ================================================================
   HEADER
   ================================================================ */
header {
    font-family: 'baloo', sans-serif;
    background-color: var(--sky);
    z-index: 1040;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

/* Top info bar */
.meta-bar {
    background-color: var(--navy);
    font-size: 0.82rem;
    letter-spacing: 0.015em;
}
.meta-bar .text-white  { opacity: 0.9; }
.meta-bar .opacity-40  { opacity: 0.4; }
.meta-bar .opacity-75  { opacity: 0.75; }

.meta-social {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    transition: color 0.25s var(--ease);
}
.meta-social:hover { color: #fff; }

/* Main nav */
.main-navbar { background-color: var(--sky); }

.navbar-brand {
    font-family: 'baloo', sans-serif;
    font-size: 1.65rem;
    color: var(--navy) !important;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.navbar-nav .nav-link {
    color: var(--navy) !important;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    padding: 0.4rem 0.85rem !important;
    border-radius: 6px;
    transition: background 0.2s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(17, 34, 54, 0.1);
}

/* Language switcher */
.btn-lang {
    background: transparent;
    border: 1.5px solid rgba(17, 34, 54, 0.22);
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-lang:hover { background: rgba(17, 34, 54, 0.1); border-color: rgba(17, 34, 54, 0.4); }

.lang-dropdown .dropdown-item {
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    color: var(--navy);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.lang-dropdown .dropdown-item:hover { background: var(--pale); }
.lang-dropdown .dropdown-item.active { background: var(--blue); color: #fff; }


/* ================================================================
   HERO / HOME
   ================================================================ */
#home {
    font-family: 'baloo', sans-serif;
    background-image: url('assets/images/bg-home.jpg');
    background-repeat: repeat-x;
    background-color: var(--pale);
    padding: 130px 50px 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

#home .container-fluid { width: 100%; }

/* Doctor image */
.hero-doctor {
    max-height: 62vh;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 50px rgba(17, 34, 54, 0.18));
    display: block;
    margin: 0 auto;
}

/* Divider rule */
.hero-rule {
    width: 55px;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--blue));
    border-radius: 2px;
    margin: 1.3rem auto;
}

/* Title text */
.hero-title {
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    color: var(--navy);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--blue);
    font-weight: 400;
}

/* Phone card */
.phone-card {
    background-color: var(--blue);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.phone-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 80px rgba(17, 34, 54, 0.26);
}
.phone-number {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}
.open-hours { opacity: 0.75; font-size: 0.9rem; }

/* CTA card */
.cta-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(163, 186, 210, 0.25);
    transition: transform 0.35s var(--ease);
}
.cta-card:hover { transform: translateY(-7px); }
.cta-icon { color: var(--blue); }

.btn-cta {
    background-color: var(--blue);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.55rem 2rem;
    font-family: 'baloo', sans-serif;
    font-size: 1.05rem;
    box-shadow: 0 4px 16px rgba(67, 98, 128, 0.4);
    transition: all 0.25s var(--ease);
}
.btn-cta:hover {
    background-color: var(--navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(17, 34, 54, 0.28);
}


/* ================================================================
   SECTION UTILITIES
   ================================================================ */
.section-white {
    background-color: var(--white);
    font-family: Verdana, Geneva, sans-serif;
    padding: 90px 50px;
}

.section-blue {
    background-color: var(--pale);
    font-family: Verdana, Geneva, sans-serif;
    padding: 90px 50px;
}

.videos-section { border-top: 1px solid #eaeef3; }

.section-title {
    font-family: 'baloo', sans-serif;
    text-align: center;
    color: var(--navy);
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.section-rule {
    width: 68px;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--blue));
    border-radius: 2px;
    margin: 0.4rem auto 2.5rem;
}

.section-body {
    font-size: 0.94rem;
    line-height: 1.95;
    color: #4a5568;
    max-width: 860px;
    margin: 0 auto;
}


/* ================================================================
   SERVICES ACCORDION
   ================================================================ */
.acc-item {
    background: var(--white);
    border-radius: var(--radius);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.acc-btn {
    width: 100%;
    text-align: left;
    background: var(--white);
    color: var(--navy);
    border: none;
    padding: 0.95rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.015em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
    /* Bootstrap collapse integration */
    position: relative;
}

.acc-btn[aria-expanded="true"],
.acc-btn:not(.collapsed) {
    background-color: var(--blue);
    color: var(--white);
}
.acc-btn[aria-expanded="true"] .acc-icon,
.acc-btn:not(.collapsed) .acc-icon { color: rgba(255,255,255,0.85); }

.acc-btn:focus { outline: none; box-shadow: none; }

.acc-icon {
    width: 16px;
    text-align: center;
    color: var(--blue);
    flex-shrink: 0;
    transition: color 0.2s var(--ease);
}

.acc-body {
    padding: 1rem 1.4rem 1.1rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #555;
    border-top: 1px solid rgba(163, 186, 210, 0.2);
}


/* ================================================================
   PRICING TABLE
   ================================================================ */
.price-wrapper {
    max-height: 530px;
    overflow-y: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.price-wrapper::-webkit-scrollbar       { width: 5px; }
.price-wrapper::-webkit-scrollbar-track { background: #f0f4f8; }
.price-wrapper::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 3px; }

.price-table {
    font-size: 0.83rem;
    margin-bottom: 0;
}

.price-table thead th {
    background-color: var(--navy);
    color: var(--white);
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
    border: none;
}

.price-table tbody tr { border-color: rgba(163, 186, 210, 0.2); }
.price-table tbody td {
    padding: 0.55rem 1rem;
    vertical-align: middle;
    border-color: rgba(163, 186, 210, 0.18);
}

.price-table tbody tr:nth-child(odd) td  { background-color: rgba(219, 228, 237, 0.35); }
.price-table tbody tr:nth-child(even) td { background-color: var(--white); }

.price-val {
    white-space: nowrap;
    font-weight: 700;
    color: var(--blue);
}


/* ================================================================
   GALLERY
   ================================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 80px;
}

@media (max-width: 992px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); padding: 0; }
}
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    outline: 2px solid transparent;
    transition: outline-color 0.2s;
}
.gallery-item:focus { outline-color: var(--blue); }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 34, 54, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s var(--ease);
}
.gallery-overlay i {
    color: var(--white);
    font-size: 1.8rem;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.gallery-item:hover img,
.gallery-item:focus img            { transform: scale(1.07); }
.gallery-item:hover .gallery-overlay,
.gallery-item:focus .gallery-overlay { background: rgba(17, 34, 54, 0.45); }
.gallery-item:hover .gallery-overlay i,
.gallery-item:focus .gallery-overlay i { opacity: 1; transform: scale(1); }

/* ----- Lightbox ------------------------------------------------ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox.active { display: flex; }

.lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    animation: lbZoom 0.28s var(--ease) both;
    transition: opacity 0.15s ease;
}

@keyframes lbZoom {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.lb-btn {
    position: fixed;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--white);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.28); }

.lb-close {
    top: 1.25rem; right: 1.25rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
}

.lb-prev, .lb-next {
    top: 50%; transform: translateY(-50%);
    padding: 1.1rem 1rem;
    border-radius: 8px;
    font-size: 2.6rem;
    line-height: 0.85;
}
.lb-prev { left: 1.25rem; }
.lb-next { right: 1.25rem; }


/* ================================================================
   TEAM
   ================================================================ */
.team-card {
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.team-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--shadow-lg);
}

.team-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--sky);
    transition: border-color 0.3s var(--ease);
}
.team-card:hover .team-photo { border-color: var(--blue); }

.team-role {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 600;
    display: block;
}

.team-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
}


/* ================================================================
   VIDEOS
   ================================================================ */
.video-frame {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.btn-show-more {
    background-color: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 0.55rem 2.5rem;
    font-family: 'baloo', sans-serif;
    font-size: 1.3rem;
    box-shadow: 0 4px 16px rgba(67, 98, 128, 0.38);
    transition: all 0.25s var(--ease);
}
.btn-show-more:hover {
    background-color: var(--navy);
    color: var(--white);
    transform: translateY(-2px);
}


/* ================================================================
   CONTACT
   ================================================================ */
.map-container {
    height: 350px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Override leaflet link colors inside contact section */
#contact .leaflet-control a,
#contact .leaflet-control a:hover      { color: #000; }
#contact .leaflet-popup-content a,
#contact .leaflet-popup-content a:hover { color: #333; }

.contact-card {
    background-color: var(--navy);
    color: var(--pale);
    font-family: 'baloo', sans-serif;
    border-radius: var(--radius);
    min-height: 350px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-md);
}

.contact-phone { color: var(--pale); }
.contact-phone:hover { color: var(--white); text-decoration: underline !important; }

.contact-divider {
    border-color: rgba(255, 255, 255, 0.15);
    width: 60%;
    margin: 0.25rem auto;
}

.contact-card h5 a { color: var(--pale); }
.contact-card h5 a:hover { color: var(--white); text-decoration: underline !important; }


/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    background-color: var(--navy);
    color: var(--pale);
}

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    width: 58px;
    height: 58px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
    text-decoration: none;
    animation: wa-pulse 2.4s ease-in-out infinite;
}
.whatsapp-btn:hover {
    background-color: #1ebe5d;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
    animation: none;
}
.whatsapp-btn i { line-height: 1; }

@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    60%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.footer-social {
    color: rgba(219, 228, 237, 0.55);
    font-size: 1.05rem;
    transition: color 0.2s var(--ease);
}
.footer-social:hover { color: var(--white); }


/* ================================================================
   RESPONSIVE OVERRIDES
   ================================================================ */

/* --- Tablet (≤ 991px) ----------------------------------------- */
@media (max-width: 991px) {
    .section-white,
    .section-blue    { padding: 70px 28px; }
    #home            { padding: 110px 28px 70px; min-height: auto; }
}

/* --- Mobile (≤ 575px) ----------------------------------------- */
@media (max-width: 575px) {
    .section-white,
    .section-blue    { padding: 55px 16px; }
    #home            { padding: 90px 16px 50px; }
    .section-title   { font-size: 1.65rem; }

    /* Lightbox arrows closer to edge */
    .lb-prev { left: 0.4rem; }
    .lb-next { right: 0.4rem; }

    /* Phone number scales with screen width on small phones */
    .phone-number { font-size: clamp(1.15rem, 6vw, 1.9rem); }

    /* Price table: shrink font, let wrapper scroll horizontally */
    .price-table { font-size: 0.76rem; }
    .price-table thead th,
    .price-table tbody td { padding: 0.45rem 0.7rem; }

    /* Contact card: allow email to wrap */
    .contact-card h5 {
        font-size: 0.95rem;
        flex-wrap: wrap;
        justify-content: center;
        word-break: break-all;
    }

    /* WhatsApp button: tuck in a bit more */
    .whatsapp-btn { bottom: 1.25rem; right: 1.25rem; width: 52px; height: 52px; font-size: 1.55rem; }

    /* Gallery 1-column already handled above */
}

/* Pricing table: always allow horizontal scroll on narrow viewports */
.price-wrapper { overflow-x: auto; }

/* Tap targets — ensure gallery items are easy to tap */
.gallery-item { touch-action: manipulation; }