:root { --neon: #39ff14; --dark: #121212; --card: #1a1a1a; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: black; color: white; overflow: hidden; }

/* Loader */
#loader-overlay { position: fixed; inset: 0; background: black; z-index: 10000; display: flex; justify-content: center; align-items: center; transition: 0.5s; }
.liquid-line { width: 200px; height: 3px; background: var(--neon); box-shadow: 0 0 15px var(--neon); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Welcome Screen */
.screen { display: none; height: 100vh; position: relative; }
.screen.active { display: block; }
#matrix-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0.3; }
.welcome-container { position: relative; z-index: 2; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.store-tag { color: var(--neon); font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 10px; }
.welcome-title { font-size: 8rem; font-weight: 900; letter-spacing: -2px; }
.glow-divider { width: 600px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon), transparent); margin: 20px 0; box-shadow: 0 0 20px var(--neon); }
.start-btn { background: none; border: 2px solid var(--neon); color: var(--neon); padding: 15px 60px; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: 0.3s; }
.start-btn:hover { background: var(--neon); color: black; box-shadow: 0 0 30px var(--neon); }
.nav-links-small { margin-top: 30px; font-size: 0.9rem; color: #888; }
.nav-links-small span { margin: 0 15px; cursor: pointer; transition: 0.3s; }
.nav-links-small span:hover { color: white; }

/* Grid Store */
.titan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding: 40px; overflow-y: auto; height: 80vh; }
.asset-card { background: var(--card); border: 2px solid #222; border-radius: 15px; overflow: hidden; transition: 0.3s; cursor: pointer; }
.asset-card:hover { border-color: var(--neon); transform: translateY(-10px); }
.card-img { width: 100%; height: 80%; object-fit: cover; border-bottom: 2px solid var(--neon); }
.card-info { padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.percent-tag { background: #333; padding: 2px 10px; border-radius: 10px; font-size: 0.7rem; }

/* Download Portal */
.portal-overlay { height: 100vh; background: rgba(0,0,0,0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* 1. تعديل الحاوية عشان تستوعب الأزرار اللي تحت الصورة */
.media-stage-container {
    position: relative;
    width: 800px;
    height: auto; /* خليناها auto عشان تكبر لما تطلع الأزرار */
    min-height: 450px;
    background: #000;
    border: 3px solid var(--neon);
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(57,255,20,0.3);
    padding: 15px; /* مسافة داخلية عشان الأزرار ما تلزق بالإطار */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. تعديل الـ stage عشان ما يقص الأزرار */
.media-stage {
    width: 100%;
    height: auto; /* يتبع حجم الصورة */
    overflow: visible; /* مهم جداً عشان الأزرار المشعة تظهر */
    border-radius: 12px;
}

/* 3. تأمين ظهور الأزرار فوق أي طبقة تانية */
.quality-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px; /* مسافة بين الصورة والأزرار */
    width: 100%;
    z-index: 100 !important; /* ارفعها فوق الكل */
    position: relative;
}

/* 4. تعديل بسيط عشان الصورة ما تطلع بره الإطار الجديد */
.media-stage img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}
/* Google Style Modal */
.white-modal { position: fixed; inset: 0; background: white; color: black; z-index: 20000; display: none; justify-content: center; padding-top: 100px; }
.white-content { width: 600px; }
.white-header { display: flex; justify-content: space-between; color: #1a73e8; font-weight: bold; margin-bottom: 50px; }
.close-x { cursor: pointer; color: #5f6368; }
#modal-title { font-size: 3rem; margin-bottom: 20px; font-family: 'Product Sans', Arial; }
#modal-body { line-height: 1.6; color: #3c4043; }/* --- التعديلات النهائية للمتجر --- */

/* 1. تنسيق الهيدر لضمان توزيع البحث واللوجو */
.titan-header {
    display: flex;
    justify-content: space-between; /* اللوجو يسار والبحث يمين بالملي */
    align-items: center;
    padding: 20px 50px;
    background: #000;
    border-bottom: 2px solid #1a1a1a;
    position: sticky; /* يضل ثابت فوق وإنت بتنزل */
    top: 0;
    z-index: 1000;
}

/* 2. اسم المتجر المشع الفسفوري */
.brand-logo-glow {
    font-size: 2.2rem;
    font-weight: 900;
    color: #39ff14;
    text-shadow: 0 0 10px #39ff14, 0 0 30px #39ff14; /* إشعاع قوي */
    letter-spacing: 2px;
}

/* 3. خانة البحث المشعة في أقصى اليمين */
.search-engine-container {
    width: 350px;
}

.neon-search-input {
    width: 100%;
    background: #050505;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 20px;
    color: white;
    outline: none;
    transition: 0.4s;
}

.neon-search-input:focus {
    border-color: #39ff14;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6); /* إشعاع عند الضغط */
}

/* 4. نظام الإعلانات الاحترافي */
.pro-ad-strip {
    background: #080808;
    border-bottom: 1px solid #39ff1433; /* خط فسفوري خفيف */
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
}/* نظام الإعلانات الحقيقي */
.real-ad-space {
    background: #050505;
    border: 1px dashed #39ff14;
    margin: 20px 50px;
    padding: 20px;
    text-align: center;
    position: relative;
}
.ad-label {
    position: absolute;
    top: -10px;
    left: 20px;
    background: #39ff14;
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
}

/* فوتر نهاية الصفحة */
.store-footer-pro {
    background: #000;
    border-top: 1px solid #1a1a1a;
    padding: 60px 50px 30px;
    margin-top: 50px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}
.footer-section h3 {
    color: #39ff14;
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.footer-section p {
    color: #888;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* تمنيات التوفيق والباتريون */
.footer-bottom-info {
    text-align: center;
    border-top: 1px solid #111;
    padding-top: 30px;
}
.wishes {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 15px;
    font-family: 'Arial', sans-serif;
}
.patreon-text-link {
    color: #39ff14;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transition: 0.3s;
}
.patreon-text-link:hover {
    text-shadow: 0 0 10px #39ff14;
}
.copy-text {
    margin-top: 20px;
    color: #444;
    font-size: 0.7rem;
}/* خلفية الأشكال الهندسية المتطورة */
#main-store {
    background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
    overflow-x: hidden;
    position: relative;
}

#main-store::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(circle, #39ff14 1px, transparent 1px),
        linear-gradient(to right, #111 1px, transparent 1px),
        linear-gradient(to bottom, #111 1px, transparent 1px);
    background-size: 40px 40px, 100px 100px, 100px 100px;
    opacity: 0.15;
    z-index: -1;
    animation: backgroundMove 20s linear infinite;
}

@keyframes backgroundMove {
    from { background-position: 0 0; }
    to { background-position: 100px 100px; }
}

/* تنسيق الشاشة الافتراضي (مخفية بنعومة) */
.screen {
    position: fixed; /* يضمن إن الشاشات فوق بعض */
    inset: 0;
    opacity: 0;
    visibility: hidden; /* بديل عن display none عشان يشتغل الترانزيشن */
    transform: scale(1.1); /* تبدأ كبيرة شوي عشان تأثير الدخول */
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
    background: black;
    z-index: 1;
}

/* تنسيق الشاشة النشطة (تظهر بنعومة) */
.screen.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* ترجع لحجمها الطبيعي */
    z-index: 10;
}

.titan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px;
}

.asset-card {
    background: #050505;
    border: 2px solid #1a1a1a;
    border-radius: 12px; /* بدل الـ 50% عشان تصير مستطيلة */
    display: flex;
    flex-direction: column; /* صورة فوق ووصف تحت */
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 380px; /* طول الخانة عشان تطلع مطاولة */
    cursor: pointer;
}

.asset-card:hover {
    border-color: #39ff14;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
    /* هاد هو الكود اللي بيخليها تلف وتتحرك بطريقة جميلة */
    transform: translateY(-10px) rotate(3deg) scale(1.05); 
}
/* زر BACK مشع دايماً */
.small-back-btn {
    background: none;
    color: var(--neon);
    border: 1px solid var(--neon);
    box-shadow: 0 0 10px var(--neon);
    text-shadow: 0 0 5px var(--neon);
    font-weight: bold;
    transition: 0.3s;
}

/* كلمة DOWNLOAD مشعة وعند اللمس تقلب أزرق */
.mega-download-text {
    transition: 0.4s ease;
    text-shadow: 0 0 20px var(--neon);
}

.mega-download-text:hover {
    color: #00d4ff; /* أزرق سماوي فخم */
    text-shadow: 0 0 30px #00d4ff, 0 0 10px #39ff14; /* دمج أزرق وفسفوري */
    transform: scale(1.1);
}

/* تنسيق السعر والقفل */
.price-tag {
    color: #ffd700; /* ذهبي للسعر */
    font-weight: bold;
    font-size: 0.9rem;
}
.locked-icon {
    filter: drop-shadow(0 0 5px red);
    margin-left: 5px;
}
#top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%; /* بيبدأ من الصفر */
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #39ff14); /* دمج أزرق وفسفوري */
    box-shadow: 0 0 10px #00d4ff;
    z-index: 99999;
    transition: width 0.4s ease; /* عشان الحركة تكون ناعمة */
}
/* 1. خط كبسة START: بيمتد من اليسار لليمين بسرعة */
#start-click-bar {
    position: fixed; top: 0; left: 0; width: 0%; height: 3px;
    background: #39ff14; box-shadow: 0 0 15px #39ff14;
    z-index: 99999; transition: width 0.5s ease; opacity: 0;
}

/* 2. خط الحية (Snake): خيط صغير بيجري من النص للملحقات */
#asset-snake-bar {
    position: fixed; top: 0; left: -150px; width: 150px; height: 3px;
    background: linear-gradient(90deg, transparent, #00d4ff, #39ff14, transparent);
    box-shadow: 0 0 15px #00d4ff; z-index: 99999; display: none;
}

@keyframes snakeRun {
    0% { left: -150px; }
    100% { left: 100%; }
}

.run-snake {
    display: block !important;
    animation: snakeRun 1s linear infinite;
}
/* تصميم اللوجو الصغير في الزاوية */
.corner-brand {
    position: absolute; /* عشان يضل جوا الهيدر وما يطير بره */
    top: 22px;
    right: 20px; /* خليه يمين عشان البحث بكون عالشمال */
    z-index: 100;
}

.corner-brand img {
    width: 45px; /* حجم صغير وراقي */
    height: 45px;
    border-radius: 50%; /* عشان تطلع دائرية بالظبط */
    border: 2px solid var(--neon); /* إطار يضوي */
    object-fit: cover; /* عشان الصورة ما تمط وتضل واضحة */
    filter: drop-shadow(0 0 8px var(--neon)); /* إشعاع خلف الذئب */
    transition: 0.3s ease;
    cursor: pointer;
}

/* حركة حلوة لما تحط الماوس عليه */
.corner-brand img:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 15px var(--neon));
}
/* حاوية الأزرار - بتخليها تظهر تحت بعض بانتظام */
.quality-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
    z-index: 10;
}

/* الصفوف - عشان كل زرين يكونوا جنب بعض */
.tier-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* تصميم الزر الموحد */
.btn-q {
    background: #000;
    padding: 10px 2px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
    transition: 0.3s all ease;
}

/* --- ألوان الإشعاع --- */

/* 1. جودة 480 & 720 (أخضر فسفوري مجاني) */
.free-btn {
    color: #00ff88;
    border-color: #00ff88;
}
.free-btn:hover {
    background: #00ff88;
    color: #000;
    box-shadow: 0 0 15px #00ff88;
}

/* 2. جودة 1080p (أزرق مشع) */
.paid-btn {
    color: #00e5ff;
    border-color: #00e5ff;
}
.paid-btn:hover {
    background: #00e5ff;
    color: #000;
    box-shadow: 0 0 15px #00e5ff;
}

/* 3. جودة 4K Titan (أصفر نيون مشع) */
.titan-btn {
    color: #ffff00;
    border-color: #ffff00;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}
.titan-btn:hover {
    background: #ffff00;
    color: #000;
    box-shadow: 0 0 30px #ffff00, 0 0 50px #ffff00;
    transform: scale(1.05); /* تكبير خفيف عشان يبين الفخامة */
}
/* 1. حل مشكلة شكل الماوس لزر الرجوع وأي زر تاني */
.small-back-btn, .btn-q, .start-btn, .asset-card, .mega-download-text {
    cursor: pointer !important; /* بيحول الماوس لشكل يد فوراً */
}

/* 2. تأمين لون كلمة DOWNLOAD ومنع تحولها للبنفسجي */
.mega-download-text {
    color: #39ff14 !important; /* أخضر فسفوري نيون */
    text-shadow: 0 0 20px #39ff14;
    text-decoration: none;
    user-select: none; /* منع تحديد النص بالماوس */
    transition: 0.4s ease;
    display: inline-block;
}

/* 3. تأثير اللمس (Hover) لكلمة DOWNLOAD */
.mega-download-text:hover {
    color: #00d4ff !important; /* يقلب أزرق سماوي */
    text-shadow: 0 0 30px #00d4ff;
    transform: scale(1.05);
}
/* تنسيق حاوية التحميل الجديدة */
.portal-container {
    animation: fadeIn 0.5s ease-in-out; /* حركة دخول ناعمة لراحة العين */
}

/* زر التيتان - تأثير الوميض عند التحويم */
.titan-btn:hover {
    background: #fff !important;
    box-shadow: 0 0 30px var(--neon);
    transform: translateY(-2px);
}

/* زر الدعم - تأثير شفاف محترف */
.donate-btn:hover {
    background: rgba(57, 255, 20, 0.1) !important;
    color: #fff !important;
}

/* حركة الـ Fade In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* أهم جزء: للموبايل */
@media (max-width: 768px) {
    .portal-container {
        flex-direction: column; /* الفيديوهات والأزرار بصيروا تحت بعض في الموبايل */
    }
    .video-preview-box {
        max-width: 100% !important;
    }
}
/* تنسيق اللوجو في أقصى يمين الشاشة من فوق */
.top-right-logo {
    position: fixed; /* عشان يضل ثابت في زاوية الشاشة */
    right: 20px;
    top: 20px;
    z-index: 3000; /* عشان يكون فوق الـ canvas والـ loader */
}

.top-right-logo img {
    width: 150px; /* حجم مناسب للزاوية */
    height: auto;
    filter: drop-shadow(0 0 15px var(--neon));
    opacity: 0.8; /* شفافية خفيفة عشان الهيبة */
    transition: 0.3s;
}

.top-right-logo img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* تأكد إن الـ welcome-title موجودة بتنسيقها القديم */
.welcome-title {
    font-size: 8rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 10px;
}
/* تنسيق اللوجو في أقصى اليمين فوق - شاشة البداية */
.top-right-logo {
    position: absolute;
    right: 10px;  /* قربه من الحافة أكتر */
    top: 10px;
    z-index: 5000;
}

.top-right-logo img {
    width: 250px; /* كبرناه لـ 250 بكسل عشان يملأ العين */
    height: auto;
    opacity: 0.5; /* درجة الشفافية (0.5 تعني 50% شفاف) */
    filter: drop-shadow(0 0 15px var(--neon)); /* وهج نيون خفيف */
    transition: 0.5s ease-in-out; /* حركة ناعمة عند اللمس */
    cursor: pointer;
}

/* حركة إضافية: لما تحط الماوس عليه يوضح ويرجع لونه الأصلي */
.top-right-logo img:hover {
    opacity: 1; /* يرجع واضح 100% */
    transform: scale(1.1); /* يكبر شوية زيادة */
    filter: drop-shadow(0 0 25px var(--neon)); /* الوهج يزيد */
}
/* تسريع الأداء ومنع اللاق */
.asset-card, .portal-content-scroll, video {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* تنعيم السكرول */
.portal-content-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
/* إخفاء شريط التمرير للمتصفحات (Chrome, Safari, Edge) */
.portal-content-scroll::-webkit-scrollbar {
    width: 3px; /* نحيف جداً */
}

.portal-content-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* خلفية شفافة */
}

.portal-content-scroll::-webkit-scrollbar-thumb {
    background: var(--neon); /* لون نيون مشع */
    border-radius: 10px;
    box-shadow: 0 0 10px var(--neon); /* توهج */
}

/* إخفاء الشريط تماماً لو بدك المنظر يكون صافي */
.portal-content-scroll {
    -ms-overflow-style: none;  /* لمتصفح IE */
    scrollbar-width: none;  /* لمتصفح Firefox */
}
.portal-content-scroll::-webkit-scrollbar {
    display: none; /* لمتصفحات Chrome و Edge */
}
/* إخفاء شريط التمرير في كل الموقع لشكل أنظف */
::-webkit-scrollbar {
    display: none;
}

html, body {
    scrollbar-width: none; /* لمتصفح فايرفوكس */
    -ms-overflow-style: none; /* لمتصفح إيدج القديم */
    overflow-x: hidden; /* منع الاهتزاز الجانبي */
}
/* توهج زر التحميل عند مرور الماوس */
.btn-download:hover {
    box-shadow: 0 0 25px var(--neon), 0 0 50px var(--neon);
    transform: translateY(-2px);
    background-color: #fff !important; /* بصير أبيض مشع */
    color: #000 !important;
}

/* توهج زر الدعم بنفسجي عند مرور الماوس */
.btn-support:hover {
    border-color: #a020f0 !important;
    box-shadow: 0 0 20px #a020f0;
    color: #a020f0 !important;
    transform: translateY(-2px);
}
/* حل مشكلة شكل الماوس في كل الخانات والأزرار */
.tab-btn, .asset-card, .start-btn, .small-back-btn, span[onclick] {
    cursor: pointer !important;
}
/* تأثير الشيمر (التحميل الذكي) */
.titan-shimmer-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
}
.shimmer-card {
    aspect-ratio: 9/16;
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 15px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* تنسيق القائمة العمودية للأصوات */
.sfx-row-item:hover {
    box-shadow: 0 0 15px var(--neon);
    transform: scale(1.02);
}

/* تنسيق الفيديو داخل الإطار */
.fitted-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* زر التحميل العملاق */
.mega-dl-btn:hover {
    background: #fff !important;
    box-shadow: 0 0 30px var(--neon);
    transform: scale(1.05);
}
#download-portal {
    overflow-y: auto !important; /* بيشغل السكرول */
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
}

.portal-overlay {
    height: auto !important; /* بيخلي الصفحة تطول */
    min-height: 100vh;
}
.cookie-container {
    position: fixed;
    bottom: 20px; /* بتضل تحت */
    right: 20px;
    max-width: 300px;
    z-index: 10000; /* عشان تضل فوق الكل بس بمكانها */
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #39FF14;
    padding: 15px;
    border-radius: 10px;
}
/* زر الشكاوى العائم - النيون الأخضر */
#feedback-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    background: #000;
    color: #39FF14;
    border: 2px solid #39FF14;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
    transition: all 0.3s ease;
}

#feedback-btn:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 0 25px #39FF14;
    background: #39FF14;
    color: #000;
}

/* نافذة الشكاوى - ستايل تيتان سينمائي */
#feedback-window {
    display: none; /* مخفية تلقائياً */
    position: fixed;
    bottom: 90px;
    left: 25px;
    width: 300px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #39FF14;
    border-radius: 15px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    backdrop-filter: blur(10px); /* تأثير زجاجي فخم */
}

#feedback-window h4 {
    color: #39FF14;
    margin: 0 0 15px 0;
    font-family: sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
}

#feedback-window textarea {
    width: 100%;
    height: 100px;
    background: #111;
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    resize: none;
    outline: none;
    font-family: sans-serif;
    margin-bottom: 15px;
}

#feedback-window textarea:focus {
    border-color: #39FF14;
}

#feedback-window button {
    width: 100%;
    background: #39FF14;
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

#feedback-window button:hover {
    background: #fff;
    box-shadow: 0 0 15px #fff;
}
/* حاوية المنتجات (الملحقات) */
.accessories-container {
    display: grid;
    /* هذا السطر هو السر: بيخلي العناصر تتوزع تلقائياً حسب حجم الشاشة */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* المسافة بين الملحقات */
    padding: 20px;
}

/* شكل المنتج الواحد */
.accessory-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

/* جعل الصور لا تخرج عن حجم الجوال */
img {
    max-width: 100%;
    height: auto;
    display: block;
}



.fade-word {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    animation: wordSequence 8s infinite;
}

@keyframes wordSequence {
    0%, 20% { opacity: 0; }
    25%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}