/* --- GLOBAL RESET --- */
        :root { --primary: #8f3f99; --bg: #f4f6f8; --dark: #2c0e38; }
        body { margin: 0; padding: 0; font-family: 'Tajawal', sans-serif; background-color: var(--bg); color: #333; }
        * { box-sizing: border-box; }
        a { text-decoration: none; color: inherit; }

        /* --- HEADER --- */
/* --- COMPACT NAVBAR (Inner Pages) --- */
.compact-navbar {
    width: 100%;
    height: 70px;

    /* CHANGE THIS LINE: Force the dark purple color directly */
    background-color: #2c0e38 !important;

    color: white;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);

    /* Grid Layout */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    /* Ensure it sits on top of everything */
    position: relative;
    z-index: 100;
}

/* 1. Logo Section (Right in RTL) */
.nav-right {
    justify-self: start;
    display: flex;
    align-items: center;
}

.nav-right img {
    height: 45px;
    width: auto;
    transition: transform 0.2s;
}
.nav-right img:hover {
    transform: scale(1.05);
}

/* 2. Title Section (Center) */
.page-title {
    margin: 0;
    font-weight: 700;
    color: #fff;

    /* --- WRAPPING FIX --- */
    font-size: 1rem;          /* Slightly smaller to fit 2 lines comfortably */
    white-space: normal;      /* Allow text to wrap */
    max-width: 200px;         /* Force wrap after approx 4-5 words */
    line-height: 1.1;         /* Tight line spacing so it fits in the 70px header */

    /* Optional: Ensure it handles very long words nicely */
    overflow-wrap: break-word;
}

/* 3. Left Section (Back Button) */
.nav-left {
    justify-self: end;
}
.back-link {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    transition: 0.2s;
}
.back-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .page-title { font-size: 1rem; }
    .compact-navbar { padding: 0 10px; height: 60px; }
    .nav-right img { height: 35px; }
}

/* 3. Actions Section (Left in RTL) */
.nav-left {
    justify-self: end; /* Pushes to the end (Left) */
}

.back-link {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    transition: 0.2s;
}
.back-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Responsive Tweak for Mobile */
@media (max-width: 600px) {
    .page-title { font-size: 1rem; }
    .compact-navbar { padding: 0 10px; height: 60px; }
    .nav-right img { height: 35px; }
    .back-link { font-size: 0.8rem; padding: 4px 8px; }
}

        /* --- PAGE CONTAINER --- */
        .page-container {
            max-width: 90%; margin: 0 auto; padding: 0 5px 80px 5px;
            display: flex; flex-direction: column; gap: 30px;
        }

        /* --- SHARED CARD STYLE --- */
        .content-block {
            background: #fff; border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.04);
            border: 1px solid #eef0f2;
            overflow: hidden; padding: 15px;
            position: relative; z-index: 1;
        }

        /* =========================================
           BLOCK 1: VISUALS (Images + Map)
           ========================================= */
        .visuals-grid {
            display: grid;
            grid-template-columns: 8fr 2fr; /* 70% Images | 30% Map */
            gap: 20px;
            height: 600px;
        }

        /* -- Images Column -- */
        .gallery-col {
            display: flex; flex-direction: column; gap: 15px; height: 100%;
            overflow: hidden;
        }

        /* Main Image Box */
        .main-display-box {
            flex: 1; min-height: 0;
            width: 100%; border-radius: 12px; overflow: hidden;
            border: 1px solid #eee; position: relative;
        }
        .main-display-box img { width: 100%; height: 100%; object-fit: cover; }

        /* SCROLLABLE THUMBNAILS STRIP (FLEXBOX FIX) */
        .thumbs-strip {
            height: 90px;
            display: flex; /* Force Flexbox */
            flex-direction: row; /* Horizontal */
            flex-wrap: nowrap; /* CRITICAL: Never wrap to next line */
            gap: 10px;
            overflow-x: auto; /* Allow horizontal scroll */
            overflow-y: hidden;
            flex-shrink: 0;
            padding-bottom: 5px;
            scroll-behavior: smooth;
            width: 100%; /* Ensure full width usage */
        }

        /* Thumb Item */
        .thumb {
            flex: 0 0 110px; /* FIXED WIDTH: Don't shrink below 110px */
            height: 100%;
            border-radius: 8px; overflow: hidden; cursor: pointer;
            border: 2px solid transparent; position: relative;
        }
        .thumb.active { border-color: var(--primary); }
        .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.2s; }
        .thumb:hover img { opacity: 1; }

        /* Custom Scrollbar */
        .thumbs-strip::-webkit-scrollbar { height: 8px; }
        .thumbs-strip::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
        .thumbs-strip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
        .thumbs-strip::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* -- Map Column -- */
        .map-col {
            height: 100%; width: 100%;
            border-radius: 12px; overflow: hidden; border: 1px solid #ddd;
            position: relative; background: #e0e0e0;
        }
        #single-map { width: 100%; height: 100%; direction: ltr; }
        .map-btn-overlay {
            position: absolute; bottom: 5px; right: 5px; z-index: 999;
            background: #fff; padding: 8px 15px; border-radius: 8px;
            font-size: 0.85rem; font-weight: bold; color: var(--primary);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-decoration: none;
        }

        /* =========================================
           BLOCK 2: MAIN INFO
           ========================================= */
        .hall-title { font-size: 1.2rem; font-weight: 800; color: var(--dark); margin: 0 0 20px 0; }

        /* UNIFIED SINGLE ROW */
        .unified-meta-row {
            display: flex; align-items: center;
            background: #f8f9fa; border: 1px solid #eee; border-radius: 12px;
            padding: 15px 20px; margin-bottom: 25px;
            flex-wrap: nowrap; overflow-x: auto;
        }
        .meta-item {
            display: flex; align-items: center; gap: 8px;
            font-size: 1.0rem; font-weight: 600; color: #555;
            padding: 0 25px; white-space: nowrap;
        }
        .meta-item:first-child { padding-right: 0; }
        .meta-divider { width: 1px; height: 30px; background-color: #ddd; margin: 0; flex-shrink: 0; }
        .meta-icon { color: var(--primary); font-size: 1.3rem; }

        /* Services Tags */
        .services-area { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 10px; }
        .svc-tag { background: #eef2ff; color: #4f46e5; padding: 6px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; }

        /* =========================================
           BLOCK 3: DESCRIPTION
           ========================================= */
        .desc-label { font-size: 1.3rem; font-weight: 800; color: var(--dark); margin-bottom: 15px; display: block; border-bottom: 3px solid #eee; padding-bottom: 10px; width: fit-content; }
        .desc-text { font-size: 1.1rem; line-height: 1.9; color: #444; }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            .visuals-grid { grid-template-columns: 1fr; height: auto; }
            .gallery-col { height: auto; }
            .main-display-box { height: 350px; }
            .map-col { height: 250px; margin-top: 20px; }
            .unified-meta-row { flex-wrap: wrap; gap: 15px; }
            .meta-divider { display: none; }
            .meta-item { padding: 0; width: 100%; }
        }
/* Make the container a reference point for the overlay */
.main-display-box {
    position: relative;
    /* ... keep your existing styles ... */
}

/* The Watermark Style */
.watermark-logo {
    position: absolute;
    top: 15px;
    right: 15px;

    /* FIX: Force specific width to stop it from stretching */
    width: 80px !important;
    height: auto !important;

    opacity: 0.4;
    z-index: 10;
    pointer-events: none;
}
.service-pill {
        display: flex;
        align-items: center;
        gap: 4px;
        background-color: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 50px; /* Fully rounded pill shape */
        padding: 3px 3 3px 3px; /* Extra padding on right for text */
        transition: 0.3s;
    }
    .service-pill:hover {
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }
    .service-pill img {
        width: 15px;  /* Requested Size */
        height: 15px; /* Requested Size */
        object-fit: contain;
    }
    .service-pill span {
        font-weight: 400;
        color: #555;
        font-size: 0.75rem;
    }
     /* Map height fix */
        #single-map {
            width: 100%;
            height: 500px; /* Taller as requested */
            border-radius: 8px;
            background: #f0f0f0;
        }
        .map-col { height: 500px; position: relative; }

        /* Horizontal Services Grid */
        .services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .service-pill {
            display: flex;
            align-items: center;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        .service-pill img {
            width: 20px;
            height: 20px;
            margin-left: 8px; /* RTL spacing */
            object-fit: contain;
        }

        /* Thumbnails auto-scroll container */
        .thumbs-strip {
            display: flex;
            overflow-x: auto;
            gap: 10px;
            padding: 10px 0;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        .thumb { flex: 0 0 80px; height: 60px; cursor: pointer; border-radius: 5px; overflow: hidden; border: 2px solid transparent; }
        .thumb.active { border-color: #8f3f99; }
        .thumb img { width: 100%; height: 100%; object-fit: cover; }

        /* Event Types Badges with shape */
        .event-badge {
            background: #fff0f6;
            color: #d63384;
            border: 1px solid #fcc2d7;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.85rem;
            display: inline-block;
        }

        /* Related products single row fix */
        .related-row {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 1rem;
            padding-bottom: 1rem;
        }
        .related-item {
            flex: 0 0 25%;
            min-width: 250px;
        }
/* --- INQUIRY MODAL STYLES --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-card {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header-styled {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header-styled h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #1e293b; }
.modal-header-styled p { margin: 4px 0 0; font-size: 0.875rem; color: #64748b; }

.close-btn-styled {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
}

.styled-form { padding: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.input-group input, .input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: 0.2s;
}

.input-group input:focus, .input-group textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-footer { display: flex; gap: 12px; margin-top: 8px; }

.btn-cancel { flex: 1; background: #f1f5f9; color: #475569; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.btn-send-inquiry { flex: 2; background: #3b82f6; color: #fff; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.btn-send-inquiry:hover { background: #2563eb; }

/* Responsive for mobile */
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}
/* Main Product Image */
.product-img.main-img {
    width: 100%;
    height: 200px; /* Adjust height as needed */
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Thumbnails Container */
.product-thumbs-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px;
}

/* Individual Thumbnail */
.small-thumb {
    flex: 1; /* Distribute space equally */
    height: 60px; /* Fixed height for neatness */
    overflow: hidden;
    border-radius: 4px;
}

.small-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.small-thumb img:hover {
    transform: scale(1.1);
}