/* ========================================================
   AROMA HOSPITALITY — site.css
   Exact match to approved HTML design.
   Place at: wwwroot/css/site.css
   ======================================================== */

/* ========== CSS VARIABLES ========== */
:root {
    --bg: #FFFFFF;
    --bg-secondary: #F8F8F8;
    --text: #1A1A1A;
    --text-light: #555555;
    --accent: #C9A96E;
    --accent-hover: #B8943F;
    --card-bg: #F8F8F8;
    --card-border: #E8E8E8;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-border: #E0E0E0;
    --footer-bg: #1A1A1A;
    --footer-text: #CCCCCC;
    --overlay: rgba(0, 0, 0, 0.55);
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.12);
    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="dark"] {
    --bg: #0D0D0D;
    --bg-secondary: #141414;
    --text: #F5F5F5;
    --text-light: #AAAAAA;
    --accent: #C9A96E;
    --accent-hover: #D4BA85;
    --card-bg: #1A1A1A;
    --card-border: #2A2A2A;
    --nav-bg: rgba(13, 13, 13, 0.95);
    --nav-border: #2A2A2A;
    --footer-bg: #060606;
    --footer-text: #888888;
    --overlay: rgba(0, 0, 0, 0.7);
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ========== RESET & BASE ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.7;
    transition: background-color var(--transition), color var(--transition);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========== PROMO BANNER ========== */
.promo-banner {
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 10px 48px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    position: relative;
    z-index: 1100;
}

.promo-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.8;
}

    .promo-close:hover {
        opacity: 1;
    }

/* ========== SCROLL ANIMATIONS ========== */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .fade-in-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .fade-in-right.visible {
        opacity: 1;
        transform: translateX(0);
    }

/* ========== SECTION HEADING ========== */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

    .section-heading h2 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        color: var(--text);
        margin-bottom: 16px;
        letter-spacing: 0.02em;
    }

    .section-heading .accent-line {
        width: 60px;
        height: 2px;
        background: var(--accent);
        margin: 0 auto 16px;
    }

    .section-heading p {
        color: var(--text-light);
        font-size: 1.05rem;
        max-width: 600px;
        margin: 0 auto;
        font-weight: 300;
    }

/* ========== NAVIGATION ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nav-border);
    transition: background var(--transition), border-color var(--transition), box-shadow 0.3s ease;
}

    .navbar.scrolled {
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    }

    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding-left: 20px; /* adds left spacing */
        padding-right: 20px;
    }

.nav-logo {
    margin-right: auto; /* ← this pushes nav links/icons to the right */
    flex-shrink: 0;
}
.nav-logo img {
    height: 64px;
    width: auto;
    object-fit: contain;
    margin-left: 5px;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

    .nav-links a {
        font-size: 0.88rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text);
        position: relative;
        padding: 4px 0;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1.5px;
            background: var(--accent);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* WhatsApp nav button */
.nav-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #25D366;
    transition: opacity 0.3s;
}

    .nav-whatsapp:hover {
        opacity: 0.75;
    }

/* ========== THEME TOGGLE ========== */
.theme-toggle {
    position: relative;
    width: 56px;
    height: 28px;
    cursor: pointer;
}

    .theme-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #E0E0E0;
    border-radius: 14px;
    transition: background 0.4s ease;
}

[data-theme="dark"] .toggle-track {
    background: #3A3A3A;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .toggle-thumb {
    transform: translateX(28px);
    background: #1A1A1A;
}

.toggle-thumb svg {
    width: 14px;
    height: 14px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sun-icon {
    color: #F5A623;
    opacity: 1;
    transform: rotate(0deg);
}

.moon-icon {
    color: #C9A96E;
    opacity: 0;
    transform: rotate(-90deg);
    position: absolute;
}

[data-theme="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ========== HAMBURGER ========== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text);
        transition: all 0.3s ease;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

/* ========== HERO SECTION ========== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #111;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    transition: background var(--transition);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 800px;
}

    .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        color: #FFFFFF;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 20px;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

.hero-tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-divider {
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 24px auto;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

    .scroll-indicator svg {
        width: 28px;
        height: 28px;
        stroke: rgba(255, 255, 255, 0.7);
        stroke-width: 1.5;
        fill: none;
    }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-12px);
    }

    60% {
        transform: translateX(-50%) translateY(-6px);
    }
}

/* ========== ABOUT SECTION ========== */
.about {
    padding: 120px 0;
    background: var(--bg);
    transition: background var(--transition);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

    .about-image img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .about-image:hover img {
        transform: scale(1.03);
    }

    .about-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--accent);
    }

.about-placeholder {
    width: 100%;
    height: 500px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 4rem;
    opacity: 0.3;
}

.about-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 24px;
    color: var(--text);
}

.about-text .accent-line {
    width: 50px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 24px;
}

.about-text p {
    color: var(--text-light);
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 300;
}

.about-text .signature {
    margin-top: 32px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--accent);
    font-size: 1.1rem;
}

/* ========== SERVICES SECTION ========== */
.services {
    padding: 120px 0;
    background: var(--bg-secondary);
    transition: background var(--transition);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background var(--transition), border-color var(--transition);
    box-shadow: var(--shadow);
}

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

.service-card-image {
    overflow: hidden;
    height: 240px;
}

    .service-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.service-card:hover .service-card-image img {
    transform: scale(1.08);
}

.service-card-content {
    padding: 28px;
}

    .service-card-content h3 {
        font-size: 1.3rem;
        margin-bottom: 12px;
        color: var(--text);
    }

    .service-card-content p {
        color: var(--text-light);
        font-size: 0.95rem;
        font-weight: 300;
        line-height: 1.6;
    }

    .service-card-content .card-accent {
        width: 30px;
        height: 2px;
        background: var(--accent);
        margin-bottom: 12px;
    }

.card-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-transform: uppercase;
    transition: color 0.3s;
}

    .card-link:hover {
        color: var(--accent-hover);
    }

/* ========== BRANCHES SECTION ========== */
.branches {
    padding: 120px 0;
    background: var(--bg);
    transition: background var(--transition);
}

.branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.branch-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background var(--transition), border-color var(--transition);
    box-shadow: var(--shadow);
}

    .branch-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

.branch-card-image {
    overflow: hidden;
    height: 200px;
}

    .branch-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.branch-card:hover .branch-card-image img {
    transform: scale(1.08);
}

.branch-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
}

.branch-card-content {
    padding: 24px;
}

    .branch-card-content h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: var(--text);
    }

    .branch-card-content p {
        color: var(--text-light);
        font-size: 0.93rem;
        font-weight: 300;
        line-height: 1.6;
        margin-bottom: 12px;
    }

.branch-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: 300;
}

    .branch-meta a {
        color: var(--accent);
    }

        .branch-meta a:hover {
            color: var(--accent-hover);
        }

.branch-meta-icon {
    flex-shrink: 0;
}

/* ========== GALLERY SECTION ========== */
.gallery {
    padding: 120px 0;
    background: var(--bg-secondary);
    transition: background var(--transition);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    height: 350px;
}

    .gallery-item:nth-child(3n+2) {
        height: 400px;
    }

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

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

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.gallery-overlay span {
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover .gallery-overlay span {
    opacity: 1;
    transform: translateY(0);
}

/* ========== LIGHTBOX ========== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .lightbox.active {
        display: flex;
        opacity: 1;
    }

    .lightbox img {
        max-width: 90%;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 4px;
    }

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

    .lightbox-close svg {
        width: 32px;
        height: 32px;
        stroke: #FFFFFF;
        stroke-width: 2;
        fill: none;
    }

/* ========== TEAM SECTION ========== */
.team {
    padding: 120px 0;
    background: var(--bg);
    transition: background var(--transition);
}

.team-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4px;
}

.team-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.team-placeholder {
    width: 100%;
    height: 500px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 40px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3), transparent);
    color: #FFFFFF;
}

    .team-text-overlay h3 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .team-text-overlay p {
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.7;
        max-width: 650px;
        color: rgba(255, 255, 255, 0.9);
    }

/* ========== CONTACT SECTION ========== */
.contact {
    padding: 120px 0;
    background: var(--bg-secondary);
    transition: background var(--transition);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
    color: var(--text);
}

.contact-info .accent-line {
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 28px;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-detail-icon {
    width: 40px;
    height: 40px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition);
}

    .contact-detail-icon svg {
        width: 18px;
        height: 18px;
        stroke: var(--accent);
        stroke-width: 1.5;
        fill: none;
    }

.contact-detail-text h4 {
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 4px;
}

.contact-detail-text p {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 300;
}

.contact-detail-text a {
    color: var(--accent);
}

    .contact-detail-text a:hover {
        color: var(--accent-hover);
    }

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.social-link {
    width: 42px;
    height: 42px;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

    .social-link:hover {
        background: var(--accent);
        border-color: var(--accent);
    }

        .social-link:hover svg {
            stroke: #FFFFFF;
        }

    .social-link svg {
        width: 18px;
        height: 18px;
        stroke: var(--text-light);
        stroke-width: 1.5;
        fill: none;
        transition: stroke 0.3s ease;
    }

/* ========== CONTACT FORM ========== */
.contact-form-wrap h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
    color: var(--text);
}

.contact-form-wrap .accent-line {
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 28px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

    .contact-form .form-group label {
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
    }

    .contact-form .form-group input,
    .contact-form .form-group textarea {
        width: 100%;
        padding: 14px 16px;
        font-family: 'Lato', sans-serif;
        font-size: 0.95rem;
        font-weight: 300;
        color: var(--text);
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 4px;
        outline: none;
        transition: border-color 0.3s ease, background var(--transition);
    }

        .contact-form .form-group input:focus,
        .contact-form .form-group textarea:focus {
            border-color: var(--accent);
        }

    .contact-form .form-group textarea {
        height: 130px;
        resize: vertical;
    }

.form-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

    .form-submit:hover {
        background: var(--accent-hover);
        transform: translateY(-2px);
    }

    .form-submit:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.contact-result {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
}

    .contact-result.success {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #16a34a;
    }

    .contact-result.error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #dc2626;
    }

/* ========== SERVICE & BRANCH DETAIL PAGE ========== */
.detail-hero {
    margin-top: 72px;
    position: relative;
    height: 380px;
    overflow: hidden;
}

    .detail-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.detail-hero-title {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-family: 'Playfair Display', serif;
}

.detail-content {
    padding: 80px 0;
    background: var(--bg);
}

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

.detail-body {
    color: var(--text-light);
    line-height: 1.8;
    font-weight: 300;
}

.detail-sidebar h4 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: var(--text);
}

.related-card {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--card-bg);
    transition: border-color 0.3s;
}

    .related-card:hover {
        border-color: var(--accent);
    }

    .related-card img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 3px;
    }

.related-card-text h5 {
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 4px;
}

.related-card-text p {
    font-size: 0.82rem;
    color: var(--text-light);
    font-weight: 300;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 32px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

    .btn-primary:hover {
        background: var(--accent-hover);
        transform: translateY(-2px);
    }

/* ========== FOOTER ========== */
.footer {
    background: var(--footer-bg);
    padding: 60px 0 30px;
    transition: background var(--transition);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-brand p {
    color: var(--footer-text);
    font-weight: 300;
    font-size: 0.95rem;
    margin-top: 16px;
    line-height: 1.7;
}

.footer-logo {
    height: 100px;
    width: 200px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}

.footer h4 {
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
}

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: var(--footer-text);
        font-size: 0.95rem;
        font-weight: 300;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: var(--accent);
        }

    .footer-links.no-link li {
        color: var(--footer-text);
        font-size: 0.93rem;
        font-weight: 300;
    }

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

    .footer-social a {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

        .footer-social a:hover {
            border-color: var(--accent);
            background: var(--accent);
        }

            .footer-social a:hover svg {
                stroke: #FFFFFF;
            }

    .footer-social svg {
        width: 16px;
        height: 16px;
        stroke: var(--footer-text);
        stroke-width: 1.5;
        fill: none;
        transition: stroke 0.3s ease;
    }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    text-align: center;
}

    .footer-bottom p {
        color: var(--footer-text);
        font-size: 0.85rem;
        font-weight: 300;
    }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .about-grid {
        gap: 40px;
    }

    .about-image img {
        height: 400px;
    }

    .branches-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .navbar .container {
        height: 64px;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background var(--transition);
        z-index: 999;
    }

        .nav-links.open {
            transform: translateX(0);
        }

        .nav-links a {
            font-size: 1.1rem;
        }

    .about-grid,
    .contact-grid,
    .footer-grid,
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image img {
        height: 300px;
    }

    .services-grid,
    .branches-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-item,
    .gallery-item:nth-child(3n+2) {
        height: 260px;
    }

    .team-image {
        height: 350px;
    }

    .team-text-overlay {
        padding: 40px 24px 24px;
    }

        .team-text-overlay h3 {
            font-size: 1.4rem;
        }

    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .about, .services, .gallery, .team, .contact, .branches {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 0.9rem;
        letter-spacing: 0.06em;
    }

    .service-card-image {
        height: 200px;
    }

    .gallery-item,
    .gallery-item:nth-child(3n+2) {
        height: 220px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ========== CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent);
    }

/* ========== SELECTION ========== */
::selection {
    background: var(--accent);
    color: #FFFFFF;
}
.placeholder-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.service-card-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.branch-card-image {
    position: relative;
    overflow: hidden;
}

    .branch-card-image img {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }

.branch-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    color: #fff;
}

    .branch-overlay h3 {
        margin: 0;
        font-size: 1.3rem;
    }

    .branch-overlay p {
        margin: 5px 0 0;
        font-size: 0.9rem;
    }

.footer {
    background: #0f0f0f;
    color: #ddd;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer h4 {
    margin-bottom: 15px;
    color: #fff;
}

.footer-links {
    list-style: none;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        color: #bbb;
        text-decoration: none;
        transition: 0.3s;
    }

        .footer-links a:hover {
            color: var(--accent);
        }

.footer-social a {
    margin-right: 10px;
    color: #bbb;
}

.footer-bottom {
    border-top: 1px solid #222;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
}

/* FULL WIDTH WRAPPER */
.policy-wrapper {
    width: 100%;
    background: #f4f4f4;
}

/* HERO */
.policy-hero {
    padding: 100px 20px 60px;
    text-align: center;
    background: linear-gradient(135deg, #111, #333);
    color: #fff;
}

    .policy-hero h1 {
        font-size: 44px;
        margin-bottom: 12px;
    }

    .policy-hero p {
        font-size: 18px;
        opacity: 0.85;
    }

/* CONTENT AREA */
.policy-content {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 40px; /* 🔥 LEFT & RIGHT SPACE FIX */
}

/* EACH SECTION */
.policy-section {
    background: #fff;
    padding: 30px 35px; /* 🔥 INTERNAL SPACE */
    margin-bottom: 25px; /* 🔥 GAP BETWEEN BLOCKS */
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

    /* HEADINGS */
    .policy-section h3 {
        font-size: 22px;
        margin-bottom: 12px;
        color: #222;
    }

    /* TEXT */
    .policy-section p {
        color: #555;
        line-height: 1.9; /* 🔥 READABILITY FIX */
        margin-bottom: 10px;
    }

    /* LIST */
    .policy-section ul {
        padding-left: 25px; /* 🔥 LEFT SPACE FOR BULLETS */
        margin-top: 10px;
    }

        .policy-section ul li {
            margin-bottom: 10px; /* 🔥 SPACE BETWEEN POINTS */
            line-height: 1.8;
            color: #444;
        }

.policy-content {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 40px;
}

.policy-section {
    background: #fff;
    padding: 30px 35px;
    margin-bottom: 25px;
    border-radius: 10px;
}

    .policy-section ul {
        padding-left: 25px;
    }

        .policy-section ul li {
            margin-bottom: 10px;
        }

.footer-brand {
    text-align: left;
}

.footer-logo {
    display: block;
    margin-left: 0;
}

.footer-logo-text {
    text-align: left;
}

/* Global responsive image fix */
img {
    max-width: 100%;
    height: auto;
}

/* Hero full-screen fit */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .hero-bg img,
    .hero-video {
        width: 100%;
        height: 100%;
        object-position: center;
    }

    .hero-bg img {
        object-fit: contain;
    }

.hero-video {
    object-fit: cover;
}

/* Service & branch card images */
.service-card-image,
.branch-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

    .service-card-image img,
    .branch-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

/* Gallery */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About section image */
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Team image */
.team-image {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

/* Detail hero */
.detail-hero {
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    position: relative;
}

    .detail-hero img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        object-position: center;
    }

.branch-location-list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.branch-location-item {
    border-top: 1px solid var(--card-border);
    padding-top: 16px;
}

.branch-info-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.branch-meta-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    align-items: start;
}

.branch-meta-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.branch-meta-value {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    word-break: break-word;
}

    .branch-meta-value a {
        color: var(--accent);
    }

.branch-actions {
    margin-top: 12px;
}

@@media (max-width: 640px) {
    .branch-meta-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* =============================================================
   TARGETED ADDITIONS — append to end of wwwroot/css/site.css
   Covers all 5 requested fixes.
   ============================================================= */

/* ──────────────────────────────────────────────────────────────
   FIX 1: Header logo — top-left position
   The navbar container already uses flex with the logo first.
   We remove the left margin that was pushing it right and
   reduce the navbar container's left padding so the logo
   sits flush with the page edge on desktop.
   ────────────────────────────────────────────────────────────── */
.nav-logo {
    margin-right: auto;
    flex-shrink: 0;
    /* Remove any inherited margin that was adding gap */
    margin-left: 0;
    padding-left: 0;
    /* Align with true left edge */
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

/* Override the old nav-logo img rule that was adding margin-left:10px */
.nav-logo-img {
    height: 72px; /* slightly taller for prominence */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left top; /* anchor to top-left corner */
    display: block;
    margin: 0;
}

/* Reduce container left-padding so logo reaches the page edge */
.navbar .container {
    padding-left: 12px;
    padding-right: 20px;
}

/* ──────────────────────────────────────────────────────────────
   FIX 2: Branch outlets on the index card
   ────────────────────────────────────────────────────────────── */
.branch-outlets {
    margin-top: 12px;
    border-top: 1px solid var(--card-border);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branch-outlet-item {
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--card-border);
}

    .branch-outlet-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.branch-outlet-name {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-size: 0.88rem;
    color: var(--text);
}

.branch-outlet-address {
    font-style: normal;
    font-size: 0.83rem;
    color: var(--text-light);
    line-height: 1.6;
    padding-left: 18px; /* indent under the pin icon */
    margin-bottom: 4px;
}

.branch-outlet-phone {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.83rem;
    color: var(--text-light);
    padding-left: 18px;
}

    .branch-outlet-phone a {
        color: var(--accent);
    }

        .branch-outlet-phone a:hover {
            color: var(--accent-hover);
        }

/* ──────────────────────────────────────────────────────────────
   Branch detail page outlets sidebar card
   ────────────────────────────────────────────────────────────── */
.detail-outlets-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}

.detail-outlets-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--card-border);
}

    .detail-outlets-header h4 {
        font-family: 'Lato', sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text);
        margin: 0;
    }

.detail-outlets-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-outlet-item {
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--card-border);
}

    .detail-outlet-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.detail-outlet-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 6px;
}

.detail-outlet-address {
    font-style: normal;
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.7;
    padding-left: 20px;
    margin-bottom: 6px;
}

    /* Each address line on its own row */
    .detail-outlet-address .addr-line {
        display: block;
    }

.detail-outlet-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-light);
    padding-left: 20px;
    margin-top: 4px;
}

    .detail-outlet-contact a {
        color: var(--accent);
    }

        .detail-outlet-contact a:hover {
            color: var(--accent-hover);
        }

/* ──────────────────────────────────────────────────────────────
   FIX 3: Portrait images — use contain + neutral background
   so the full image is visible without cropping.
   Applied via modifier class on the image wrapper.
   ────────────────────────────────────────────────────────────── */

/* Service cards */
.service-card-image--contain {
    height: 260px;
    background: var(--card-bg);
}

    .service-card-image--contain img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* show full image, no crop */
        object-position: center;
    }

/* Branch cards */
.branch-card-image--contain {
    height: 220px;
    background: var(--card-bg);
}

    .branch-card-image--contain img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

/* Gallery — contain so portrait photos aren't centre-cropped */
.gallery-item .gallery-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--card-bg);
}

/* About section image — contain */
.about-image img {
    object-fit: contain;
    background: var(--card-bg);
}

/* ──────────────────────────────────────────────────────────────
   FIX 4: Contact address — multi-line display
   The address string is split on commas in the view and each
   part rendered as a <span> followed by <br>.
   This class ensures the address block reads naturally.
   ────────────────────────────────────────────────────────────── */
.contact-address-lines {
    font-style: normal; /* override browser <address> italic */
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.8;
    display: block;
}

/* ──────────────────────────────────────────────────────────────
   FIX 5: Footer uploaded logo — DO NOT invert it.
   The existing .footer-logo class used filter:brightness(0) invert(1)
   which made any coloured logo appear white / invisible against the
   dark footer. The new class footer-logo-uploaded renders as-is.
   ────────────────────────────────────────────────────────────── */
.footer-logo-uploaded {
    display: block;
    height: 80px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
    /* NO filter — show the logo exactly as uploaded */
    margin-bottom: 4px;
}

/* Keep the old .footer-logo class intact for text-fallback scenario */
/* (It's still used when no custom logo is set.) */
/* Header: keep WhatsApp simple and add space after Contact */
.nav-right {
    display: flex;
    align-items: center;
    gap: 26px; /* space between whatsapp and toggle */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px; /* increases menu spacing, including Contact -> WhatsApp side gap feel */
}

.nav-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* remove pill padding */
    margin-left: 14px; /* extra space after Contact */
    background: transparent; /* remove green shade */
    border: none; /* remove border */
    border-radius: 0; /* remove rounded pill look */
    color: #25D366;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .nav-whatsapp:hover {
        opacity: 0.75;
        transform: translateY(-1px);
    }

.nav-whatsapp-text {
    display: none; /* hide WhatsApp text if showing */
}
.branches-group-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 12px;
}

/* ── One brand group card ────────────────────────────────────── */
.branch-group-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e8e0d4);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    transition: box-shadow .25s;
}

    .branch-group-card:hover {
        box-shadow: 0 6px 28px rgba(0,0,0,.11);
    }

/* ── Header row: logo + name + "View All" button ─────────────── */
.branch-group-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--card-border, #e8e0d4);
    background: var(--bg-secondary, #faf6f1);
    flex-wrap: wrap;
}

.branch-group-logo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg, #fff);
    border: 1px solid var(--card-border, #e8e0d4);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .branch-group-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.branch-group-meta {
    flex: 1;
    min-width: 0;
}

    .branch-group-meta h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.35rem;
        color: var(--text, #1a1a1a);
        margin: 0 0 4px;
        line-height: 1.25;
    }

.branch-group-tagline {
    font-size: 0.9rem;
    color: var(--text-light, #7a6e65);
    margin: 0;
    line-height: 1.4;
}

.branch-group-viewbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--accent, #C9A96E);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
    white-space: nowrap;
}

    .branch-group-viewbtn:hover {
        opacity: .88;
        transform: translateY(-1px);
    }

/* ── Grid of outlet tiles inside each group ─────────────────── */
.branch-outlets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
    padding: 0;
}

.branch-outlet-tile {
    padding: 22px 26px;
    border-right: 1px solid var(--card-border, #e8e0d4);
    border-bottom: 1px solid var(--card-border, #e8e0d4);
    transition: background .2s;
}

    .branch-outlet-tile:hover {
        background: var(--bg-secondary, #faf6f1);
    }
    /* remove right border on last column, bottom border on last row */
    .branch-outlet-tile:last-child {
        border-right: none;
    }

.outlet-tile-name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

    .outlet-tile-name strong {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--text, #1a1a1a);
        line-height: 1.25;
    }

.outlet-tile-address {
    font-style: normal;
    font-size: 0.83rem;
    color: var(--text-light, #7a6e65);
    line-height: 1.65;
    margin: 0 0 9px;
}

    .outlet-tile-address span {
        display: inline;
    }

.outlet-tile-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    margin-bottom: 10px;
}

    .outlet-tile-phone a {
        color: var(--accent, #C9A96E);
        text-decoration: none;
    }

        .outlet-tile-phone a:hover {
            text-decoration: underline;
        }

.outlet-tile-map {
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--card-border, #e8e0d4);
}

/* ── Fallback when no outlets exist ─────────────────────────── */
.branch-no-outlets {
    padding: 18px 28px;
    font-size: 0.88rem;
    color: var(--text-light, #7a6e65);
}

    .branch-no-outlets .branch-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .branch-group-header {
        padding: 16px 18px;
        gap: 14px;
    }

    .branch-group-logo {
        width: 52px;
        height: 52px;
    }

    .branch-group-meta h3 {
        font-size: 1.1rem;
    }

    .branch-group-viewbtn {
        width: 100%;
        justify-content: center;
        margin-top: 6px;
    }

    .branch-outlets-grid {
        grid-template-columns: 1fr;
    }

    .branch-outlet-tile {
        border-right: none;
        padding: 16px 18px;
    }
}


/* ================================================================
   BRANCH DETAIL PAGE — full outlets sidebar / main
   (these styles complement what you already have in _Layout.cshtml)
   ================================================================ */

/* Outlet card on detail page */
.detail-outlets-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e8e0d4);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}

.detail-outlets-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--card-border, #e8e0d4);
    background: var(--bg-secondary, #faf6f1);
}

    .detail-outlets-header h4 {
        font-family: 'Lato', sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text, #1a1a1a);
        margin: 0;
    }

.detail-outlets-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual outlet inside detail sidebar */
.detail-outlet-item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--card-border, #e8e0d4);
}

    .detail-outlet-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.detail-outlet-name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

    .detail-outlet-name strong {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text, #1a1a1a);
    }

.detail-outlet-address {
    font-style: normal;
    font-size: 0.82rem;
    color: var(--text-light, #7a6e65);
    line-height: 1.65;
    margin: 0 0 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.addr-line {
    display: block;
}

.detail-outlet-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-light, #7a6e65);
    margin-top: 4px;
}

    .detail-outlet-contact a {
        color: var(--accent, #C9A96E);
        text-decoration: none;
    }

        .detail-outlet-contact a:hover {
            text-decoration: underline;
        }


.branch-group-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
}

/* Header row inside brand card */
.branch-group-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--card-border);
    flex-wrap: wrap;
}

.branch-group-logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .branch-group-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.branch-group-meta {
    flex: 1;
    min-width: 0;
}

    .branch-group-meta h3 {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.1rem, 2vw, 1.4rem);
        color: var(--text);
        margin: 0 0 4px;
        line-height: 1.2;
    }

.branch-group-tagline {
    font-size: 0.88rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.5;
}

.branch-group-viewbtn {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 6px 14px;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

    .branch-group-viewbtn:hover {
        background: var(--accent);
        color: #fff;
    }

/* Grid of outlet tiles */
.branch-outlets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
}

/* Individual outlet tile */
.branch-outlet-tile {
    padding: 20px 22px;
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    transition: background .2s;
}

    .branch-outlet-tile:hover {
        background: var(--bg-secondary);
    }

    /* Remove border from last column / row */
    .branch-outlet-tile:nth-child(n+4) {
        /* handled by grid auto-fill — just keep bottom border on all */
    }

    .branch-outlet-tile:last-child {
        border-bottom: none;
    }

/* Outlet name row */
.outlet-tile-name {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 8px;
}

    .outlet-tile-name strong {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.3;
    }

/* Structured address — one field per visual line */
.outlet-tile-address {
    font-style: normal;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.8;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column; /* each <span> on its own line */
    padding-left: 21px; /* align under name text, past the pin icon */
}

/* Phone link */
.outlet-tile-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    padding-left: 21px;
    margin-bottom: 10px;
}

    .outlet-tile-phone a {
        color: var(--accent);
        text-decoration: none;
    }

        .outlet-tile-phone a:hover {
            text-decoration: underline;
        }

/* Inline map */
.outlet-tile-map {
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

/* Fallback (no outlets) */
.branch-no-outlets {
    padding: 20px 24px;
}

.branch-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-light);
    margin-bottom: 10px;
    line-height: 1.6;
}

    .branch-meta a {
        color: var(--accent);
        text-decoration: none;
    }

.branch-meta-icon {
    flex-shrink: 0;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .branch-outlets-grid {
        grid-template-columns: 1fr;
    }

    .branch-outlet-tile {
        border-right: none;
    }

    .branch-group-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .branch-group-viewbtn {
        align-self: flex-start;
    }
}


/*
 * ════════════════════════════════════════════════════════════════
 *  ADMIN — Branches list table updates
 *  The existing admin table already works. These just tighten the
 *  "Address" column so it shows structured outlet count instead.
 * ════════════════════════════════════════════════════════════════
 */

.outlet-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
}

/* =========================================================
   IMAGE FIT FIX — show full image inside frame everywhere
   ========================================================= */

.service-card-image,
.branch-group-logo,
.gallery-item,
.about-image,
.team-wrapper,
.current-image-preview,
.file-preview {
    overflow: hidden;
}

    .service-card-image.service-card-image--fit {
        height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        padding: 12px;
    }

.card-fit-image {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    display: block;
    background: transparent;
}

/* keep full image visible in gallery too */
.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.gallery-img-fit {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    display: block;
    background: var(--bg-secondary);
}

/* about image full visible */
.about-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        object-position: center;
        background: var(--bg-secondary);
    }

/* branch logo image frame for grouped branch card */
.branch-group-logo {
    width: 110px;
    min-width: 110px;
    height: 110px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

    .branch-group-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        object-position: center;
        display: block;
    }

/* admin previews */
.current-image-preview img,
.file-preview img {
    width: 100%;
    max-height: 240px;
    object-fit: contain !important;
    object-position: center;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* mobile responsiveness */
@media (max-width: 768px) {
    .service-card-image.service-card-image--fit {
        height: 220px;
        padding: 10px;
    }

    .branch-group-logo {
        width: 88px;
        min-width: 88px;
        height: 88px;
        padding: 8px;
    }

    .gallery-item,
    .gallery-item:nth-child(3n+2) {
        height: 240px;
    }
}

@media (max-width: 480px) {
    .service-card-image.service-card-image--fit {
        height: 200px;
        padding: 8px;
    }

    .branch-group-logo {
        width: 74px;
        min-width: 74px;
        height: 74px;
    }

    .gallery-item,
    .gallery-item:nth-child(3n+2) {
        height: 220px;
    }
}
/* =========================================================
   BRANCH GROUP CARD LAYOUT
   ========================================================= */

.branches-group-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.branch-group-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    .branch-group-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

.branch-group-header {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.branch-group-meta {
    flex: 1;
    min-width: 0;
}

    .branch-group-meta h3 {
        margin: 0 0 6px;
        color: var(--text);
    }

.branch-group-tagline {
    margin: 0;
    color: var(--text-light);
    line-height: 1.6;
}

.branch-group-viewbtn {
    white-space: nowrap;
    color: var(--accent);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.branch-outlets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.branch-outlet-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px;
}

@media (max-width: 768px) {
    .branch-group-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .branch-group-viewbtn {
        margin-top: 4px;
    }

    .branch-outlets-grid {
        grid-template-columns: 1fr;
    }
}
.contact-address-html {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

    .contact-address-html b {
        color: var(--text);
        font-weight: 600;
    }
/* =========================================================
   HERO / LANDING PAGE IMAGE FIT FIX
   Show full image for any uploaded hero image
   ========================================================= */

/* =========================================================
   HERO / LANDING PAGE — FULL SCREEN COVER FIX
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}

.hero-fit-image,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

    .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        color: #fff;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 20px;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    }

.hero-divider {
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 24px auto;
}

.hero-tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

    .scroll-indicator svg {
        width: 28px;
        height: 28px;
        stroke: rgba(255, 255, 255, 0.7);
        stroke-width: 1.5;
        fill: none;
    }

/* Prevent any old contain rule from affecting hero */
.hero-bg img {
    object-fit: cover !important;
    object-position: center center !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero {
        height: 100svh;
        min-height: 100svh;
    }

    .hero-content {
        max-width: 92%;
        padding: 0 18px;
    }

        .hero-content h1 {
            font-size: clamp(2rem, 8vw, 3rem);
        }

    .hero-tagline {
        font-size: 0.95rem;
        letter-spacing: 0.08em;
    }

    .scroll-indicator {
        bottom: 24px;
    }
}

@media (max-width: 480px) {
    .hero-content {
        max-width: 94%;
        padding: 0 14px;
    }

        .hero-content h1 {
            font-size: 2rem;
        }

    .hero-tagline {
        font-size: 0.9rem;
        letter-spacing: 0.06em;
    }
}
/* Move WhatsApp + theme toggle slightly more to the right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: 24px;
    padding-right: 10px;
}

/* Keep WhatsApp a little away from Contact */
.nav-whatsapp {
    margin-left: 10px;
}

/* Desktop only fine-tune */
@media (min-width: 769px) {
    .nav-right {
        margin-left: 32px;
        padding-right: 14px;
    }
}