/* ضفت خط Cairo في الرابط ده */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=El+Messiri:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'El Messiri', sans-serif; /* الخط الأساسي للعناوين */
}

/* هنا التغيير: أي P أو الفوتر هيبقى بخط كايرو */
p, .tagline, footer {
    font-family: 'Cairo', sans-serif;
}

body {

    background-image: url(".//abu_hassanain.jpg");
    height: 100dvh; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: #fff;
    overflow: hidden;
    background-size: cover;       /* بتخلي الصورة تملأ الشاشة بالكامل بدون فراغات */
    background-position: center center;  /* بتجيب منتصف الصورة بالظبط (عشان الوشوش تبان) */
    background-repeat: no-repeat; /* تمنع تكرار الصورة */
    background-attachment: scroll; 
}

.glass-card {
    /* شفاف جداً جداً */
    background: rgba(255, 255, 255, 0.05);
    
    /* تغبيش قوي */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* باقي الكود زي ما هو... */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px 15px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-height: 95dvh;
}

/* === تعديل اللوجو ليكون لامع === */
.logo-area {
    width: 65px;
    height: 65px;
    margin: 0 auto 10px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    /* تأثير الإطار الدهبي اللامع */
    border: 2px solid transparent;
    background-image: linear-gradient(#141414, #141414), linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); /* ضي خفيف ورا اللوجو */
}

.logo-area i {
    /* تلوين الأيقونة نفسها بتدرج دهبي */
    background: linear-gradient(to bottom, #BF953F, #FCF6BA, #B38728, #FBF5B7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === تعديل اسم المحل ليكون شيك جداً === */
h1 { 
    font-family: 'El Messiri', sans-serif; /* خط النسخ المزخرف */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    
    /* التدرج الدهبي للكتابة */
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* ضل خفيف يبرز الكلام */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
}

.tagline { 
    color: #bbb; /* فتحت اللون شوية عشان الخط الجديد يبان */
    font-size: 13px; 
    margin-bottom: 15px;
    letter-spacing: 0.5px; /* مسافة بسيطة بين الحروف */
}

/* === الشبكة === */
.links-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.link-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* خلفية شفافة جداً (شبه مش موجودة) */
    background: rgba(0, 0, 0, 0.1); 
    
    /* برواز أبيض شفاف خفيف يحدد الزرار */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    text-decoration: none;
    height: 85px; 
    border-radius: 12px;
    transition: 0.3s;
}

/* لما تقف على الزرار ينور خفيف */
.link-btn:hover {
    background: rgba(255, 255, 255, 0.1); /* تفتيح بسيط */
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
}

.link-btn i {
    font-size: 24px;
    margin-bottom: 5px;
}

.link-btn span {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    font-family: 'Cairo', sans-serif; /* خليت الكلام اللي جوه الزراير برضو كايرو عشان يبقى أوضح */
}

/* === الألوان === */
.link-btn.whatsapp i { color: #25D366; }
.link-btn.whatsapp:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.1); }

.link-btn.facebook i { color: #1877F2; }
.link-btn.facebook:hover { border-color: #1877F2; background: rgba(24, 119, 242, 0.1); }

.link-btn.instagram i { color: #E1306C; }
.link-btn.instagram:hover { border-color: #E1306C; background: rgba(225, 48, 108, 0.1); }

.link-btn.tiktok i { color: #fff; text-shadow: 2px 2px 0px #FE2C55, -2px -2px 0px #25F4EE; }
.link-btn.tiktok:hover { border-color: #FE2C55; background: rgba(254, 44, 85, 0.1); }

.link-btn.phone i { color: #d4af37; }
.link-btn.phone:hover { border-color: #d4af37; background: rgba(212, 175, 55, 0.1); }

.link-btn.map i { color: #EA4335; }
.link-btn.map:hover { border-color: #EA4335; background: rgba(234, 67, 53, 0.1); }

.link-btn:hover { transform: translateY(-3px); }

footer {
    margin-top: 15px;
    color: #777;
    font-size: 11px;
    font-weight: bold;
}
/* === تنسيق شريط المميزات === */
.features-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* عشان لو الشاشة صغيرة ينزلوا تحت بعض */
    gap: 8px; /* مسافة بين كل واحدة والتانية */
    margin-bottom: 20px; /* مسافة قبل الزراير */
}

.feature-item {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)); /* خلفية غامقة */
    border: 1px solid rgba(212, 175, 55, 0.4); /* برواز دهبي خفيف */
    padding: 5px 10px;
    border-radius: 50px; /* شكل بيضاوي (كبسولة) */
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
}

.feature-item:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
}

.feature-item i {
    color: #d4af37; /* لون الأيقونة دهبي */
    font-size: 12px;
}

.feature-item span {
    color: #eee;
    font-size: 11px; /* خط صغير عشان ما يزحمش الشاشة */
    font-weight: bold;
    font-family: 'Cairo', sans-serif;
}
/* === ألوان الأيقونات (كل واحد بلونه المميز) === */

/* واتساب (أخضر) */
.link-btn.whatsapp i { color: #25D366; }
.link-btn.whatsapp:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.1); }

/* فيسبوك (أزرق) */
.link-btn.facebook i { color: #1877F2; }
.link-btn.facebook:hover { border-color: #1877F2; background: rgba(24, 119, 242, 0.1); }

/* انستجرام (فوشيا) */
.link-btn.instagram i { color: #E1306C; }
.link-btn.instagram:hover { border-color: #E1306C; background: rgba(225, 48, 108, 0.1); }

/* تيك توك (أبيض) */
.link-btn.tiktok i { color: #fff; }
.link-btn.tiktok:hover { border-color: #FE2C55; background: rgba(254, 44, 85, 0.1); }

/* اتصال (دهبي) */
.link-btn.phone i { color: #d4af37; }
.link-btn.phone:hover { border-color: #d4af37; background: rgba(212, 175, 55, 0.1); }


/* === التعديل المطلوب: زرار الموقع (أبيض فقط) === */
.link-btn.map i { 
    color: #ffffff !important; /* الأيقونة بيضاء */
}

/* لو عايز الكلام اللي تحت أيقونة الموقع كمان يفضل أبيض */
.link-btn.map span {
    color: #ffffff;
}

/* لما تقف عليه ينور أبيض */
.link-btn.map:hover { 
    border-color: #ffffff; 
    background: rgba(255, 255, 255, 0.15); 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}