/* ---- متغيرات عامة ---- */
html {
  font-size: 10px;
  scroll-behavior: smooth;
}
body {
      font-family: 'Markazi Text', serif;

  font-family: var(--font-main-ar);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  /* إن أردت تباعد داخلي عام */
}
p {
    font-family: 'Tajawal', sans-serif;
}
/* fin */
:root {
    --dark-brown: #3d2412;
    --medium-brown: #6a4025;
    --light-golden-brown: #c9a265;
    --golden-orange: #d89b4d;
    --almost-black: #1a0d08;
    --white: #ffffff;
}

/* شاشة الترحيب */
#splash258{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,var(--dark-brown),var(--medium-brown));
    background-size:200% 200%;
    animation:bgMove258 6s ease-in-out infinite alternate;
    z-index:9999;
    color:var(--white);
    text-align:center;
    transition:opacity 1s ease;
}
@keyframes bgMove258{
    0%{background-position:0 0;}
    100%{background-position:100% 100%;}
}

/* شعار المجلة */
.logo-img258{
    width:160px;
    height:auto;
    margin-bottom:20px;
    opacity:0;
    animation:slideUp258 1.5s forwards 0.2s, glow258 1s infinite alternate 1.8s;
}
@keyframes slideUp258{
    0%{transform:translateY(40px);opacity:0;}
    100%{transform:translateY(-10px);opacity:1;}
}
/* توهج الشعار */
@keyframes glow258{
    0% { filter: drop-shadow(0 0 0 var(--golden-orange)); }
    50% { filter: drop-shadow(0 0 20px var(--golden-orange)); }
    100% { filter: drop-shadow(0 0 0 var(--golden-orange)); }
}

#splash258 p{
    font-size:1.2rem;
    color:var(--light-golden-brown);
    margin-top:15px;
    opacity:0;
    animation:fadeUp258 1.5s forwards 0.9s;
}
@keyframes fadeUp258{
    0%{opacity:0;transform:translateY(20px);}
    100%{opacity:1;transform:translateY(0);}
}

/* شريط التحميل المتقطع */
.loading-dots258{
    display:flex;
    gap:8px;
    margin-top:25px;
    opacity:0;
    animation:fadeUp258 1s forwards 1.3s;
}
.loading-dots258 span{
    width:10px;
    height:10px;
    background:var(--golden-orange);
    border-radius:50%;
    display:inline-block;
    animation:bounce258 1s infinite ease-in-out;
}
.loading-dots258 span:nth-child(2){animation-delay:0.2s;}
.loading-dots258 span:nth-child(3){animation-delay:0.4s;}
.loading-dots258 span:nth-child(4){animation-delay:0.6s;}
@keyframes bounce258{
    0%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-8px);}
}

/* المحتوى الرئيسي */
#main-content258{
    opacity:0;
    padding:40px;
    text-align:center;
    transition:opacity 1s ease;
}
#main-content258.show{opacity:1;}
#main-content258 h2{color:var(--medium-brown);}
#main-content258 p{color:var(--almost-black);}

 /* fin */

/*feedback*/
:root{
  --dark-brown: #3d2412;
  --medium-brown: #6a4025;
  --light-golden-brown: #c9a265;
  --golden-orange: #d89b4d;
  --almost-black: #1a0d08;
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --shadow: rgba(61,36,18,0.12);
  --shadow-hover: rgba(61,36,18,0.22);

  /* عرض الزر العمودي: يؤثر على موضع اللوحة (gap) */
  --vertical-width: 56px;
  --gap-after-vertical: 16px;
}

/* الحاوية العامة */
.feedback-widget480 {
  font-family: "Segoe UI", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Naskh Arabic", "Cairo", sans-serif;
  z-index: 100000;
  position: relative;
}

/* زر feedback العمودي — يظهر دائماً على جميع الأجهزة */
.feedback-vertical-name480 {
  position: fixed;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  width: var(--vertical-width);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: linear-gradient(180deg,var(--medium-brown),var(--dark-brown));
  color: var(--white);
  padding: 10px 6px;
  border-top-left-radius: 120px;
  border-bottom-left-radius: 120px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 2px;
  user-select: none;
  box-shadow: -6px 12px 28px var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .12s ease, opacity .12s ease;
  z-index: 100001;
}
.feedback-vertical-name480:hover {
  transform: translateY(-50%) scale(1.05) translateX(-6px);
  box-shadow: -10px 18px 36px var(--shadow-hover);
  background: linear-gradient(180deg,var(--light-golden-brown),var(--golden-orange));
}
.feedback-vertical-name480[aria-hidden="true"] { opacity: 0; pointer-events: none; }

/* اللوحة (panel) — تحتفظ بمسافة عن الزر عبر calc */
.feedback-panel480 {
  position: fixed;
  top: 16%;
  right: calc(var(--vertical-width) + var(--gap-after-vertical));
  width: 380px;
  max-width: calc(100vw - (var(--vertical-width) + var(--gap-after-vertical) + 32px));
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,var(--white),#fff);
  box-shadow: 0 18px 40px var(--shadow);
  border: 1px solid rgba(26,13,8,0.04);
  z-index: 100000;

  /* مغلقة افتراضياً خارج الشاشة جهة اليمين */
  transform: translateX(120%);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.22,.9,.32,1), opacity 280ms ease;
  pointer-events: none;
}

/* حالة الفتح: تدخل من اليمين */
.feedback-panel480.open480 {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* حالة الإغلاق: تخرج إلى اليسار بشكل جذاب */
.feedback-panel480.closing480 {
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

/* رأس اللوحة */
.feedback-header480 {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg,var(--light-golden-brown),var(--golden-orange));
  color: var(--almost-black);
}
.feedback-title480 { font-weight:700; font-size:15px; }
.feedback-sub480 { font-size:12px; opacity:.95; }

/* جسم اللوحة وحقول النموذج (بالعربية) */
.feedback-body480 { padding: 14px 16px 18px 16px; background: var(--light-gray); }
.feedback-field480 { width:100%; margin-bottom:12px; }
.feedback-input480, .feedback-textarea480 {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(26,13,8,0.06);
  font-size:14px; outline:none; resize:vertical; min-height:44px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,0.03);
  direction: rtl;
}
.feedback-textarea480 { min-height:92px; }

/* تقييم وأزرار */
.feedback-rating480 { display:flex; gap:6px; align-items:center; margin-bottom:12px; }
.star-btn480 { width:36px; height:36px; display:inline-grid; place-items:center; cursor:pointer; border-radius:8px; background:transparent; border:1px solid rgba(26,13,8,0.05); font-weight:700; transition:background .12s ease, transform .08s ease; direction:ltr; }
.star-btn480:hover { transform: translateY(-3px); }
.star-selected480 { background: linear-gradient(180deg,var(--light-golden-brown),var(--golden-orange)); color:var(--almost-black); border-color: rgba(26,13,8,0.08); }

.feedback-actions480 { display:flex; gap:8px; margin-top:6px; justify-content:flex-end; }
.btn480 { padding:10px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:600; font-size:14px; }
.btn-submit480 { background: linear-gradient(180deg,var(--medium-brown),var(--dark-brown)); color:var(--white); box-shadow:0 10px 24px var(--shadow); }
.btn-cancel480 { background:transparent; border:1px solid rgba(26,13,8,0.07); color:var(--almost-black); }
.btn-disabled480 { opacity:.7; cursor:not-allowed; }

/* حالة الحالة (toast) */
.feedback-toast480 { position: fixed; left: 24px; bottom: 96px; padding: 10px 14px; border-radius: 10px; background: rgba(26,13,8,0.95); color: var(--white); font-size:13px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); opacity:0; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; z-index:100002; pointer-events:none; }
.toast-show480 { opacity:1; transform: translateY(0); pointer-events:auto; }

/* سبينر صغير */
.spinner480 { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color: rgba(255,255,255,0.95); display:inline-block; vertical-align: middle; animation: spin480 0.9s linear infinite; margin-left:8px; }
@keyframes spin480 { to{ transform: rotate(360deg); } }

/* تركيز الوصول */
.feedback-vertical-name480:focus, .star-btn480:focus, .btn480:focus, .feedback-input480:focus, .feedback-textarea480:focus {
  outline:3px solid rgba(216,155,77,0.16);
  outline-offset:2px;
}

/* ===== تجاوب الجوال: bottom-sheet / full-width ===== */
@media (max-width: 480px) {
  .feedback-panel480 {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 72vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(120%);
    transition: transform 420ms cubic-bezier(.22,.9,.32,1), opacity 220ms ease;
    opacity: 0;
    pointer-events: none;
  }

  .feedback-panel480.open480 { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .feedback-panel480.closing480 { transform: translateY(120%); opacity: 0; pointer-events: none; }

  .feedback-body480 { padding: 12px 14px 18px 14px; overflow: auto; height: calc(72vh - 72px); }
  .feedback-vertical-name480 { width: 48px; padding: 8px 6px; font-size: 14px; top: 44%; }
}

/* زر إغلاق القالب */
.feedback-close-btn480 {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--medium-brown);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--shadow);
  transition: background 0.2s ease;
}
.feedback-close-btn480:hover { background: var(--dark-brown); }
/* fin */

/* --- إخفاء البلوك الأصلي نهائياً --- */
.pkp_block.block_language {
    display: none !important;
    visibility: hidden !important;
}

/* --- تصميم المبدّل الجديد داخل الهيدر --- */
.nav-main .language-selector {
  position: relative;
  font-family: inherit;
}

.nav-main .language-selector .selected-lang {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  cursor:pointer;
  color:#fff; /* نص أبيض */
}

.nav-main .language-selector .selected-lang:hover {
  color:#d89b2d; /* لمسة لون عند التمرير */
}

.nav-main .language-selector .arrow {
  transition: transform .25s ease;
  color:#fff; /* سهم أبيض */
}

.nav-main .language-selector.open .arrow {
  transform: rotate(180deg);
}

.nav-main .language-selector .options {
  list-style:none; padding:0; margin:6px 0 0;
  background: rgba(0,0,0,0.9); /* خلفية داكنة */
  border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,0.2);
  position:absolute; left:0; min-width:140px;
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition: max-height .3s ease, opacity .25s ease;
  z-index:9999;
}

.nav-main .language-selector.open .options {
  max-height:200px; opacity:1; visibility:visible;
}

.nav-main .language-selector .option-link {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; text-decoration:none;
  color:#fff; /* نص أبيض */
  transition:background .15s;
}

.nav-main .language-selector .option-link:hover {
  background: rgba(255,255,255,0.2);
  color:#fff;
}

.flag {
  width:20px; height:14px;
  background-size:cover;
  border:1px solid #eee; border-radius:2px;
  display:inline-block;
}

.flag-ar { background-image:url('https://flagcdn.com/w40/sa.png'); }
.flag-en { background-image:url('https://flagcdn.com/w40/gb.png'); }

/* fin */

    /* CSS Variables from your design */
    :root {
        --dark-brown: #3d2412;
        --medium-brown: #6a4025;
        --light-golden-brown: #c9a265;
        --golden-orange: #d89b4d;
        --white: #ffffff;
        --light-gray: #f8f9fa;
        --shadow: rgba(61, 36, 18, 0.1);
        
    }

    /* --- DESKTOP: Fixed Buttons Container --- */
    .auth-buttons-container {
        position: fixed;
        top: 20px;
        left: 20px; /* Positioned on the left */
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* --- MOBILE: Floating Action Button (FAB) --- */
    .auth-fab {
        position: fixed;
        bottom: 30px;
        left: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--golden-orange), var(--dark-brown));
        color: var(--white);
        border: none;
        border-radius: 50%;
        box-shadow: 0 8px 25px rgba(61, 36, 18, 0.4);
        font-size: 1.5rem;
        cursor: pointer;
        display: none; /* Hidden by default, shown via media query */
        align-items: center;
        justify-content: center;
        z-index: 1050;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .auth-fab:hover {
        transform: scale(1.1) rotate(15deg);
    }

    /* --- MOBILE: Modal (Popup Window) --- */
    .auth-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(26, 13, 8, 0.7);
        backdrop-filter: blur(8px);
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .auth-modal-overlay.visible {
        opacity: 1;
        visibility: visible;
    }
    .auth-modal-content {
        background: var(--white);
        padding: 2.5rem;
        border-radius: 20px;
        width: 90%;
        max-width: 450px;
        text-align: center;
        border-top: 5px solid var(--golden-orange);
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        position: relative;
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .auth-modal-overlay.visible .auth-modal-content {
        transform: scale(1);
    }
    .auth-modal-content h3 {
        font-family: 'Amiri', serif;
        font-size: 2rem;
        color: var(--dark-brown);
        margin-bottom: 0.5rem;
    }
    .auth-modal-content p {
        color: var(--medium-brown);
        margin-bottom: 2rem;
        font-size: 1.1rem;
    }
    .close-modal-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        background: var(--light-gray);
        border: none;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
        color: var(--medium-brown);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .close-modal-btn:hover {
        background: var(--golden-orange);
        color: var(--white);
        transform: rotate(90deg);
    }

    /* --- CSS Tweaks to style the OJS dynamic menu --- */
    .auth-buttons-container ul,
    .modal-buttons ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .auth-buttons-container ul li,
    .modal-buttons ul li {
        margin: 0;
        padding: 0;
    }
    .auth-buttons-container ul li a,
    .modal-buttons ul li a {
        display: block;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        border: 1px solid var(--golden-orange);
    }
    .auth-buttons-container ul li a:hover,
    .modal-buttons ul li a:hover {
        transform: translateY(-2px);
    }

    /* Desktop button styles */
    .auth-buttons-container ul li a {
        background: var(--golden-orange);
        color: var(--white);
    }
    .auth-buttons-container ul li a[href*="/register"] {
        background: transparent;
        color: var(--white);
    }
    .auth-buttons-container ul li a:hover {
        background: var(--dark-brown);
    }

    /* Mobile modal button styles */
    .modal-buttons ul li a {
        background: var(--golden-orange);
        color: var(--white);
    }
    .modal-buttons ul li a[href*="/register"] {
        background: transparent;
        color: var(--golden-orange);
    }
    .modal-buttons ul li a[href*="/register"]:hover {
        background: var(--golden-orange);
        color: var(--white);
    }

    /* --- Responsive Logic --- */
    @media (max-width: 768px) {
        .auth-buttons-container { display: none; } /* Hide desktop buttons on mobile */
        .auth-fab { display: flex; } /* Show mobile FAB on mobile */
    }
    @media (min-width: 769px) {
        .auth-buttons-container { display: flex; } /* Show desktop buttons on desktop */
        .auth-fab { display: none; } /* Hide mobile FAB on desktop */
    }

    /* fin */

    /* المتغيرات من تصميمك لتوحيد الألوان */
    :root {
        --dark-brown: #3d2412;
        --medium-brown: #6a4025;
        --golden-orange: #d89b4d;
        --white: #ffffff;
        --shadow: rgba(61, 36, 18, 0.1 );
    }

    /* 1. الحاوية الخارجية للبحث */
    .smart-search-wrapper {
        /* هامش علوي ليكون تحت الهيدر الثابت */
        margin-top: 95px; 
        padding: 2rem 0;
        background-color: #f8f9fa;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* 2. الحاوية الداخلية للشريط (الشكل البيضاوي) */
    .smart-search-container {
        position: relative;
        width: 70%;
        max-width: 700px;
        height: 60px;
        background-color: var(--white);
        border-radius: 60px;
        box-shadow: 0 5px 20px var(--shadow);
        display: flex;
        align-items: center;
        transition: box-shadow 0.3s ease;
    }
    
    .smart-search-container:focus-within {
         box-shadow: 0 5px 25px rgba(216, 155, 77, 0.2);
    }

    /* 3. حقل إدخال النص */
    .smart-search-container .search-input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--dark-brown);
        font-family: 'Cairo', sans-serif;
        font-size: 1.1rem;
        font-weight: 500;
        padding: 0 80px 0 30px; 
    }

    .smart-search-container .search-input::placeholder {
        color: var(--medium-brown);
        opacity: 0.7;
    }

    /* 4. زر البحث (الأيقونة) */
    .smart-search-container .search-button {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: var(--golden-orange);
        border: none;
        border-radius: 50%;
        color: var(--white);
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        transition: background-color 0.3s ease;
    }
    
    .smart-search-container .search-button:hover {
        background-color: var(--dark-brown);
    }

    /* fin */

        :root {
            --dark-brown: #3d2412;
            --medium-brown: #6a4025;
            --light-golden-brown: #c9a265;
            --golden-orange: #d89b4d;
            --almost-black: #1a0d08;
            --white: #ffffff;
            --light-gray: #f8f9fa;
            --shadow: rgba(61, 36, 18, 0.1);
            --shadow-hover: rgba(61, 36, 18, 0.2);
            
            
                        /* Colors */
            --whatsapp-color: #25D366;
            --facebook-color: #1877F2;
            --instagram-gradient: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
            --x-twitter-color: #000000;
            --icon-color: #fff;
            --tooltip-font: 'Cairo', sans-serif;

            /* Sizing & Timings */
            --icon-size: 55px;
            --icon-font-size: 1.8rem;
            --expanded-width: 240px;
            --transition-speed: 0.4s;
            
            
            
            
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Cairo', sans-serif;
            line-height: 1.6;
            color: var(--dark-brown);
            background: var(--white);
        }

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

        /* Header Styles */
        .header {
            background: linear-gradient(135deg, var(--almost-black) 0%, var(--dark-brown) 100%);
            color: var(--white);
            padding: 1rem 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 20px var(--shadow);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Amiri', serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--light-golden-brown);
            text-decoration: none;
        }

        .tagline {
            font-size: 0.9rem;
            color: var(--light-golden-brown);
            margin-top: 0.2rem;
        }

        .nav {
            display: flex;
        }

        .nav-main {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .nav-main > li {
            position: relative;
        }

        .nav-main a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            padding: 0.8rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-main a:hover {
            background: var(--medium-brown);
            color: var(--light-golden-brown);
        }


        /* Dropdown Styles - Fixed to show vertically */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
left: 1%;             
transform: translateX(-1%);  
            background: var(--white);
            min-width: 280px;
            max-width: 350px;
            box-shadow: 0 10px 30px var(--shadow-hover);
            border-radius: 12px;
            padding: 1rem 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1001;
            border: 1px solid var(--light-golden-brown);
            max-height: 400px;
            overflow-y: auto;
        }

        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-menu li {
            list-style: none;
        }

        .dropdown-menu a {
            /* #c9a265 */
            display: block;
            padding: 0.8rem 1.5rem;
            color: var(--dark-brown);
            text-decoration: none;
        font-size: 1.5rem;
        font-weight: 800;   
            transition: all 0.3s ease;
            border-right: 3px solid transparent;
        }

        .dropdown-menu a:hover {
            background: #c9a265;
            border-right-color: #3d2412;
            color: var(--almost-black);
        }

        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            position: relative;
            z-index: 1001; 
        }

        .scroll-buttons {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .scroll-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--golden-orange);
            color: var(--white);
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(216, 155, 77, 0.3);
        }

        .scroll-btn:hover {
            background: var(--dark-brown);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(216, 155, 77, 0.4);
        }

        .scroll-btn.hidden {
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
        }

.scroll-buttons {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 768px) {
    .scroll-buttons {
        margin-bottom: 70px !important;

    }
}
/* ===================================================== */
/* ===== START: CSS for Logo Section with Image ===== */
/* ===================================================== */

.logo-section .logo-link {
    display: flex;         
    align-items: center;   
    gap: 15px;             
    text-decoration: none; 
}

.logo-icon {
    height: 60px;
    width: auto;  
    transition: transform 0.3s ease; 
    
        /* الإضافة الجديدة */
    background-color: #ffffff; /* الخلفية البيضاء */
    padding: 0px 0px;          /* مساحة حول اللوجو، يمكنك تعديلها حسب الحاجة */
    border-radius: 60px;        /* إذا تحب الحواف دائرية قليلاً */
    display: inline-block;     /* لضبط البلوك حول الصورة */

    
    
}


.logo-text-wrapper {
    display: flex;
    flex-direction: column; 
}


.logo {
    font-family: 'Amiri', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--light-golden-brown);
    line-height: 1.1;
}

.tagline {
    font-size: 0.9rem;
    color: var(--light-golden-brown);
    margin-top: 0; 
}


/*2011*/
    
.auth-fab {
    position: fixed;
    bottom: 70px;
    left: 10px; 
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--golden-orange), var(--dark-brown));
    color: var(--white);
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(61, 36, 18, 0.4);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-fab:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 12px 30px rgba(61, 36, 18, 0.5);
}

.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 13, 8, 0.7); 
    backdrop-filter: blur(8px); 
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.auth-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.auth-modal-content {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    border-top: 5px solid var(--golden-orange);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-modal-overlay.visible .auth-modal-content {
    transform: scale(1);
}

.auth-modal-content h3 {
    font-family: 'Amiri', serif;
    font-size: 2rem;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
}

.auth-modal-content p {
    color: var(--medium-brown);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    left: 15px; 
    background: var(--light-gray);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.5rem;
    color: var(--medium-brown);
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal-btn:hover {
    background: var(--golden-orange);
    color: var(--white);
    transform: rotate(90deg);
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-btn {
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    border: 2px solid transparent;
}

.modal-btn.create-account {
    background: transparent;
    border-color: var(--golden-orange);
    color: var(--golden-orange);
}

.modal-btn.create-account:hover {
    background: var(--golden-orange);
    color: var(--white);
}

.scroll-buttons {
    right: 30px;
    left: auto;  
}



@media (max-width: 768px) {
    .auth-buttons-container {
        display: none; 
    }
}


@media (min-width: 769px) {
    .auth-fab {
        display: none;  
    }
}


/*2010-2011*/
@media (max-width: 768px) {
  .nav {
    display: none; 
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--almost-black);
    width: 100%;
    flex-direction: column;
  }

  .nav.show {
    display: flex;
  }

  .nav-main {
    flex-direction: column;
    gap: 0;
  }

  .nav-main li a {
    padding: 1rem;
    border-bottom: 1px solid var(--medium-brown);
  }

  .mobile-menu-toggle {
    display: block;
  }
}


/*2011*/
.header .dropdown { position: relative; }

.header .dropdown-menu {
  right: auto !important;          
  left: 50% !important;             
  transform: translate(-50%, -10px) !important;  
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
}

.header .dropdown:hover .dropdown-menu,
.header .dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) !important;  
}

      /* Container for the buttons */
        .scroll-buttons {
            position: fixed;
            bottom: 30px;
            left: 30px; /* Positioned on the left */
            z-index: 1000;  /*لو المشكلة لسه شغالة ، ممكن ننزل من القيمة هنا*/
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        /*حل المشكلة هنا ، مشكلة الضغط على الأزرار التي في مستوى زر السكرل*/
        .scroll-buttons {
  pointer-events: none;
}
.scroll-btn {
  pointer-events: auto; /* الأزرار نفسها فقط تقبل الضغط */
}
/*إلى هنا حل المشكلة*/
        

        /* General style for each button */
        .scroll-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--golden-orange );
            color: var(--white);
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex; /* To center the icon */
            align-items: center; /* To center the icon */
            justify-content: center; /* To center the icon */
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(216, 155, 77, 0.3);
        }

        /* Hover effect */
        .scroll-btn:hover {
            background: var(--dark-brown);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(216, 155, 77, 0.4);
        }

        /* Class to hide a button */
        .scroll-btn.hidden {
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
        }

        /* Responsive styles for mobile devices */
        @media (max-width: 768px) {
            .scroll-buttons {
                /* In the original code, there was a rule to move it to the right, 
                   but for this snippet, we'll keep it on the left and adjust the bottom margin. */
                left: 20px;
                bottom: 20px;
                margin-bottom: 70px !important; /* To avoid overlapping with other mobile elements */
            }

            .scroll-btn {
                width: 45px;
                height: 45px;
                font-size: 1rem;
            }
        }
        /* ===== END: Scroll Buttons CSS ===== */










        /* 1. الحاوية الرئيسية للشريط الاجتماعي */
        .sticky-social-bar {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 1010;
            transition: transform 0.5s ease-in-out;
        }

        .sticky-social-bar.hidden {
            transform: translateY(-50%) translateX(-100%);
        }

        .sticky-social-bar ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        /* 2. تنسيق كل أيقونة على حدة */
        .sticky-social-bar .social-icon {
            display: flex;
            align-items: center;
            height: var(--icon-size);
            width: var(--icon-size);
            margin: 5px 0;
            background-color: #fff;
            color: var(--icon-color);
            border-radius: 0 50px 50px 0;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
            text-decoration: none;
            overflow: hidden;
            transition: width var(--transition-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55),
                        border-radius var(--transition-speed) ease-in-out,
                        transform 0.5s ease-out;
        }

        /* تأثير الدخول عند تحميل الصفحة */
        .sticky-social-bar .social-icon {
            transform: translateX(-100%);
            opacity: 0;
            animation: slideIn 0.5s forwards ease-out;
        }

        @keyframes slideIn {
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* تأخير متتابع لكل أيقونة */
        .sticky-social-bar li:nth-child(1) .social-icon { animation-delay: 0.2s; }
        .sticky-social-bar li:nth-child(2) .social-icon { animation-delay: 0.3s; }
        .sticky-social-bar li:nth-child(3) .social-icon { animation-delay: 0.4s; }
        .sticky-social-bar li:nth-child(4) .social-icon { animation-delay: 0.5s; }

        /* 3. تنسيق الأيقونة نفسها (Font Awesome) */
        .sticky-social-bar .social-icon i {
            font-size: var(--icon-font-size);
            line-height: var(--icon-size);
            width: var(--icon-size);
            text-align: center;
            flex-shrink: 0;
            transition: transform var(--transition-speed) ease-in-out;
        }

        /* 4. تنسيق النص المخفي (Tooltip) */
        .sticky-social-bar .social-icon .social-tooltip {
            font-family: var(--tooltip-font);
            font-size: 1rem;
            font-weight: 600;
            padding: 0 15px 0 10px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease-in-out 0.1s;
        }

        /* 5. التأثير عند التأشير (Hover) */
        .sticky-social-bar .social-icon:hover {
            width: var(--expanded-width);
            border-radius: 0 10px 10px 0;
        }

        .sticky-social-bar .social-icon:hover i {
            transform: rotate(360deg);
        }

        .sticky-social-bar .social-icon:hover .social-tooltip {
            opacity: 1;
        }

        /* 6. تخصيص الألوان لكل أيقونة */
        .sticky-social-bar .whatsapp { background-color: var(--whatsapp-color); }
        .sticky-social-bar .facebook { background-color: var(--facebook-color); }
        .sticky-social-bar .instagram { background: var(--instagram-gradient); }
        .sticky-social-bar .x-twitter { background-color: var(--x-twitter-color); }

        /* تأثير النبض لجذب الانتباه */
        @keyframes pulse-animation {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
        }

        .sticky-social-bar .whatsapp {
            animation: slideIn 0.5s forwards ease-out 0.2s, 
                         pulse-animation 2s infinite 1s;
        }

        .sticky-social-bar .whatsapp:hover {
            animation-name: slideIn;
        }

        /* 7. تجاوب للشاشات الصغيرة */
        @media (max-width: 768px) {
            .sticky-social-bar,
            .sticky-social-bar.hidden {
                width: 100%;
                bottom: 0;
                top: auto;
                left: 0;
                transform: none;
                background-color: #fff;
                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

            }

            .sticky-social-bar ul {
                flex-direction: row;
                justify-content: space-around;
                padding: 5px 0;
            }

            .sticky-social-bar .social-icon {
                margin: 0;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                box-shadow: none;
                animation: none;
                transform: none;
                opacity: 1;
            }

            .sticky-social-bar .social-icon i {
                font-size: 1.6rem;
                line-height: 50px;
                width: 50px;
                transform: none;
            }

            .sticky-social-bar .social-icon:hover {
                width: 50px;
                transform: scale(1.1);
            }
            
            .sticky-social-bar .social-icon:hover i {
                transform: none;
            }

            .sticky-social-bar .social-icon .social-tooltip {
                display: none;
            }
        }
        /* =================================================== */
        /* ===== END: CSS for Sticky Social Bar (Enhanced) ===== */
        /* =================================================== */