/* ==========================================================================
   1. استدعاء الخطوط وتوحيدها (Fonts & Import)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;800&display=swap');

@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Questv1';
    src: url('../fonts/Questv1 Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Sakkal Majalla';
    src: url('../fonts/Sakkal Majalla Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* ==========================================================================
   2. متغيرات الهوية الرقمية الموحدة (Global Variables)
   ========================================================================== */
:root {
    /* لوحة الألوان المعتمدة */
    --primary-blue: #3b71b9;
    --accent-green: #5bc4bf;
    --black-fakhim: #111827;
    --white: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #2d3436;
    --text-dim: #636e72;
    
    /* نظام الخطوط الثلاثة الموحد */
    --font-main: 'Sakkal Majalla', 'Arial', sans-serif;
    --font-headers: 'Cairo', 'Helvetica', sans-serif;
    --font-accent: 'Questv1', sans-serif;
}

/* ==========================================================================
   3. إعدادات الهيكل الأساسي (Base Styles)
   ========================================================================== */
body { 
    margin: 0; 
    padding: 0; 
    font-family: var(--font-headers); 
    background: radial-gradient(circle at center, var(--primary-blue), var(--black-fakhim));
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   4. مكونات بطاقة الاستجابة السريعة (QR Card Components)
   ========================================================================== */
.qr-hero { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
    width: 100%; 
}

.qr-glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    color: var(--white);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.qr-logo { 
    width: 120px; 
    height: 120px;
    margin-bottom: 1px; 
}

.brand-identity {
    margin-bottom: 30px;
}

.brand-identity h1 {
    margin: 0; 
    font-size: 2rem; 
    color: var(--accent-green); 
    font-weight: 800;
}

.brand-identity h2 {
    margin: 5px 0 0; 
    font-size: 1.2rem; 
    color: var(--white);
    font-weight: 700;
}

.brand-identity p {
    margin: 10px 0 0; 
    color: #cbd5e1; 
    font-size: 1.5rem;
}

.quick-links { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 30px; 
}

.qr-btn {
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 15px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



.qr-btn.call-btn {
    background: var(--white); 
    border: none; 
    color: var(--primary-blue)
}

.qr-btn.call-btn:hover {
    color: #000;
}

.qr-btn.whatsapp { 
    background: #25d366; 
    border: none; 
}

.qr-btn.whatsapp:hover {
    background: #20ba5a;
    color: var(--white);
}

.qr-btn.secondary { 
    background: rgba(255, 255, 255, 0.05); 
}
.fa-solid, .fas {
    color: var(--accent-green);
}
.social-hex-grid {
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    margin-bottom: 30px; 
    flex-wrap: wrap;
}

/* ==========================================================================
   5. التنسيق السداسي الاحترافي المطور (Social Hexagon)
   ========================================================================== */
.social-hex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 73px;
    background:var(--white);
    color: var(--accent-green);
    position: relative;
    text-decoration: none;
    font-size: 1.4rem;
    cursor: pointer;
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 92 116'><path fill='black' d='M110.78,74.78v-32.21c0-6.48-3.41-12.48-8.97-15.8l-26.04-15.56c-5.81-3.47-13.06-3.47-18.88,0l-26.04,15.56c-5.56,3.32-8.97,9.32-8.97,15.8v32.21c0,6.48,3.41,12.48,8.97,15.8l26.04,15.56c5.81,3.47,13.06,3.47,18.88,0l26.04-15.56c5.56-3.32,8.97-9.32,8.97-15.8Z'/></svg>");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.social-hex i,
.social-hex svg {
    transition: transform 0.3s ease;
    z-index: 2;
}

.social-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
}

.social-hex:hover {
    background: var(--accent-green);
    color: var(--white) !important;
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(91, 196, 191, 0.3)); 
}

.social-hex:hover i,
.social-hex:hover svg {
    transform: scale(1.1);
}

.social-hex:hover::before {
    border-color: transparent;
}

.contact-detail { 
    margin-bottom: 20px; 
    font-size: 1rem; 
    opacity: 0.9; 
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.map-action-container {
    text-align: center; 
    margin-top: 20px;
}

.map-btn {
    background-color: var(--primary-blue); 
    color: var(--white); 
    padding: 12px 25px; 
    text-decoration: none; 
    border-radius: 25px; 
    font-weight: bold; 
    display: inline-flex; 
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

.map-btn:hover {
    background-color: #1d4ed8;
}

/* ==========================================================================
   6. شاشات الجوال والتجاوب (Responsive Styles)
   ========================================================================== */
@media (max-width: 480px) { 
    .qr-glass-card { 
        padding: 25px; 
    } 
}