/* ===== mobile slider styles ===== */

.mobile-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    position: relative;
}

.mobile-track-wrap {
    overflow: hidden;
    width: 75%;
    max-width: 720px;
}

.mobile-slider-track {
    display: flex;
    gap: 12px;
    transition: transform .45s ease;
    will-change: transform;
}

.mobile-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-slide img {
    width: 75%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}

.mobile-prev,
.mobile-next {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
}

.mobile-prev {
    margin-right: 6px;
}

.mobile-next {
    margin-left: 6px;
}

.mobile-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.mobile-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    cursor: pointer;
}

.mobile-dots button.active {
    background: var(--accent-green);
}

@media(min-width:900px) {
    .mobile-slide {
        flex: 0 0 60%;
    }
}


/* ===== end mobile slider styles ===== */


/* ==========================
   Overrides: disable fullpage snap & adjust desktop slide size
   ========================== */


/* make page normal flow */

.fp-container {
    height: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    background: none !important;
}

.fp-slide {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 12px !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}


/* remove any visual overlay that darkens slides */

.fp-slide .overlay {
    display: none !important;
    background: none !important;
}


/* hide the floating fullpage dots */

.fp-dots {
    display: none !important;
}


/* Make desktop carousel touch & pointer friendly on mobile — allow horizontal dragging
   while keeping vertical page scroll natural. Also prevent accidental overlaying
   elements from blocking interactions and ensure smooth scrolling. */

.desktop-carousel {
    -webkit-overflow-scrolling: touch;
    /* momentum on iOS */
    touch-action: pan-y;
    /* allow vertical page pan, enable JS horizontal handling */
    overscroll-behavior-x: contain;
    /* avoid parent scroll chaining */
    cursor: grab;
}


/* while dragging */

.desktop-carousel.dragging {
    cursor: grabbing;
}


/* ensure each slide is interactable and doesn't capture pointer events */

.desktop-slide {
    touch-action: none;
}


/* ensure images inside slides don't intercept pointer events */

.desktop-slide-img {
    pointer-events: none;
}

:root {
    --target-slide-w: 1920px;
    --target-aspect: 16/9;
}

.desktop-carousel-wrap {
    padding: 8px 0 !important;
}

.desktop-carousel {
    padding-inline: 0 !important;
}

.desktop-slide {
    flex: 0 0 min(100%, var(--target-slide-w));
    width: min(100%, var(--target-slide-w));
    aspect-ratio: var(--target-aspect);
    height: auto !important;
    border-radius: 10px;
    overflow: hidden;
}

.desktop-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ensure footer sits after content */

footer {
    position: relative;
    z-index: 1;
}


/* make sure body pseudo-elements don't darken the page (defensive) */

body::before,
body::after {
    display: none !important;
}


/* small-screen adjustments keep previous behavior */

@media (max-width: 900px) {
    .desktop-slide {
        aspect-ratio: 16/9;
        height: auto;
    }
}


/* remove any slide occlusion rules if they remain (defensive) */

.fp-slide:not(.is-active),
.fp-slide.is-active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}


/* assets/css/site.css — تصميم فخم مستوحى من الصور */

:root {
    --accent-dark: #22351f;
    /* أخضر داكن */
    --accent: #2e3e2a;
    /* أخضر متوسط */
    --soft-bg: #f9f2ec;
    /* كريمي فاتح */
    --card: #ffffff;
    --muted: #7b7b7b;
    --radius: 14px;
    --shadow: 0 14px 40px rgba(14, 20, 16, 0.06);
    --glass: rgba(255, 255, 255, 0.7);
}


/* base */

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background: var(--soft-bg);
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* header */

.top-header {
    background: var(--accent-dark);
    color: #fff;
    padding: 12px 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px
}

.logo-wrap {
    flex: 1;
    text-align: center
}

.logo-text {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 8px 0;
}


/* Main container */

.site-main {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 18px
}


/* HERO / SLIDER */

.card-hero {
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    padding: 28px 20px;
    margin-bottom: 28px;
}

.hero-slide {
    min-height: 400px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 14px;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--accent-dark);
    text-align: center;
}


/* hero dots */

.hero-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 6px
}

.hero-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3a3a3a;
    opacity: 0.25;
    border: 0;
}

.hero-dots button.active {
    opacity: 1;
    background: var(--accent-dark)
}


/* special card */

.card-fancy {
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(18, 18, 18, 0.03);
}

.special-card {
    margin-bottom: 28px
}

.special-heading {
    font-size: 22px;
    color: var(--accent-dark);
    text-align: center;
    margin-bottom: 6px;
}

.visitor-number {
    display: inline-block;
    background: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    margin-inline: 6px;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.04)
}


/* form */

.form-label {
    font-weight: 600
}

.form-control {
    border-radius: 10px;
    border: 1px solid #ececec;
    padding: 12px
}

.btn-primary-accent {
    background: var(--accent-dark);
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    border: 0;
    box-shadow: 0 10px 30px rgba(34, 53, 31, 0.15);
}


/* Ensure file-wrap is positioning context so absolute input stays inside the box */

.custom-file-input .file-wrap,
.clickable-file-wrap .file-wrap {
    position: relative;
}


/* If you used .real-file-input absolute covering, ensure it doesn't overlap outside */

.real-file-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    /* sits above visuals but inside the wrapper */
}


/* Keep visible content above background - labels etc */

.custom-file-input .file-wrap>* {
    position: relative;
    z-index: 5;
}


/* In some browsers, clicking an element that contains an invisible file input still focuses input.
   This CSS ensures the wrapper doesn't capture pointer-events that block children */

.clickable-file-wrap {
    cursor: pointer;
}


/* file input */

.custom-file-input .file-wrap {
    border-radius: 10px;
    border: 1px dashed rgba(18, 18, 18, 0.05);
    background: linear-gradient(180deg, #fff, #fafafa);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-file-input input[type=file] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.file-name {
    font-size: 13px;
    color: var(--muted)
}


/* reviews */

.reviews-section {
    margin-bottom: 22px
}

.section-title {
    font-size: 20px;
    text-align: center;
    color: var(--accent-dark);
    margin-bottom: 12px
}

.reviews-card {
    padding: 18px
}

.review-row {
    background: linear-gradient(180deg, #fff, #fdfaf8);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(18, 18, 18, 0.02);
    align-items: flex-start;
}

.review-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-inline: 12px;
}

.review-name {
    font-weight: 600;
    color: var(--accent-dark)
}

.review-text {
    margin-top: 8px;
    color: #222;
    line-height: 1.6
}


/* counter */

.counter-section {
    margin: 30px 0
}

.counter-box {
    display: inline-block;
    background: #fff;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid rgba(18, 18, 18, 0.04);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-dark);
    box-shadow: 0 6px 18px rgba(18, 18, 18, 0.03);
}

.hero-text-area p {
    margin: 0 0 8px;
}

.hero-text-area span {
    display: inline-block;
}


/* footer */

.site-footer {
    margin-top: 40px;
    color: var(--muted)
}

.fixed-images img {
    width: 100%;
    max-width: 500px;
    /* أقصى عرض */
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}


/* responsiveness */

@media (max-width:900px) {
    .hero-title {
        font-size: 22px
    }
    .hero-slide {
        min-height: 400px
    }
    .header-inner {
        padding: 0 12px
    }
    .site-main {
        padding: 0 12px
    }
}


/* --- Variables (إذا لم تكن معرفة) --- */

:root {
    --accent-dark: #233a24;
    /* لون الهيدر الأخضر الغامق */
    --accent-green: #2f6b3a;
    /* زر أخضر */
    --accent-border: #9cd3a0;
    /* حد أخضر فاتح */
    --card-bg: #ffffff;
}


/* Button style أخضر موحد */

.btn-accent-green {
    background: var(--accent-green);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(47, 107, 58, 0.14);
}

.btn-accent-green:hover {
    opacity: 0.95;
}


/* Reviews list - card style مشابه للصورة */

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.review-card {
    background: var(--card-bg);
    border: 2px solid var(--accent-border);
    border-radius: 12px;
    padding: 18px;
    display: block;
    box-shadow: 0 6px 22px rgba(10, 12, 10, 0.04);
}

.review-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.review-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-green);
}

.review-head {
    display: flex;
    flex-direction: column;
}

.review-name {
    font-weight: 700;
    color: var(--accent-dark);
    font-size: 16px;
}

.review-date {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 3px;
}


/* body of review */

.review-body {
    color: #222;
    line-height: 1.6;
    padding-top: 6px;
    font-size: 15px;
}


/* Responsive */

@media (max-width:768px) {
    .review-meta {
        gap: 10px;
    }
    .review-avatar img {
        width: 48px;
        height: 48px;
    }
    .review-card {
        padding: 14px;
    }
}


/* Ensure modal header uses same accent */

.modal-header {
    background: var(--accent-dark);
    color: #fff;
    border-bottom: none;
}


/* Reviews: clean boxed cards (no stars) */

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 6px;
}

.review-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 20px rgba(12, 20, 12, 0.04);
}

.review-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.review-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.04);
}

.review-head {
    display: flex;
    flex-direction: column;
}

.review-name {
    font-weight: 700;
    color: #111;
    font-size: 16px;
}

.review-date {
    font-size: 13px;
    color: #8a8a8a;
    margin-top: 4px;
}


/* body of review */

.review-body {
    color: #3b3b3b;
    line-height: 1.7;
    font-size: 15px;
    padding-top: 6px;
}


/* remove star-related styles if any exist */

.review-stars {
    display: none !important;
}


/* Green accent button */

.btn-accent-green {
    background: var(--accent-green);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-accent-green:hover {
    opacity: 0.95;
}


/* Modal header tone */

.modal-header {
    background: var(--accent-dark);
    color: #fff;
    border-bottom: none;
}


/* smaller devices */

@media (max-width:576px) {
    .review-avatar img {
        width: 48px;
        height: 48px;
    }
    .review-card {
        padding: 12px;
    }
}


/* ===========================
   تخصيصات واجهة: خلفية داكنة
   =========================== */


/* خلفية الصفحة: أسود، ونص رئيسي أبيض */

body {
    background: #000 !important;
    color: #f5f5f5 !important;
}


/* إذا كانت هناك مناطق تستخدم متغير --soft-bg فضعنا بديل داكن افتراضي */

:root {
    --soft-bg: #000;
    --page-text: #f5f5f5;
    --muted-on-dark: #bdbdbd;
    --card-contrast: #ffffff;
    /* البطاقات تبقى بيضاء لقراءة المحتوى */
    --accent-green: #2f6b3a;
    /* لون pagination الأخضر */
}


/* ضبط النص داخل العناصر التي كانت تفترض خلفية فاتحة */

.card-fancy,
.card-panel,
.login-card,
.review-card,
.admin-header,
.container-admin,
.card-hero,
.modal-content,
.custom-file-input .file-wrap {
    /* نترك خلفية البطاقات فاتحة لتسهيل القراءة */
    background: var(--card-contrast) !important;
    color: #111 !important;
}


/* نص-muted على خلفية سوداء */

.muted,
.muted.small {
    color: var(--muted-on-dark) !important;
}


/* الروابط والنصوص المتفرّقة في الواجهة */

a,
.btn-link {
    color: var(--page-text);
}


/* رؤوس الهيدر: اجعلها بارزة على الخلفية السوداء */

.top-header,
.admin-header {
    background: #0b0b0b !important;
    color: #fff !important;
}


/* إذا أردت أن يبقى الهيدر كما كان لكن على داكن يمكنك التعديل لاحقاً */


/* ===========================
   زر الشروط والاحكام — أبيض
   =========================== */


/* استخدام الصنف المخصص (أفضل) */

.btn-terms {
    background: #ffffff;
    color: #000000;
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-weight: 600;
}


/* استهداف الزر بالـ data-bs-target (بدون تغيير HTML) */

button[data-bs-target="#termsModal"],
a[data-bs-target="#termsModal"] {
    background: #ffffff;
    color: #000000;
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}


/* تبديل لون الزر عند hover */

button[data-bs-target="#termsModal"]:hover,
.btn-terms:hover {
    opacity: 0.94;
    transform: translateY(-1px);
}


/* ===========================
   Pagination — أخضر
   =========================== */


/* الروابط العادية للمقطع pagination */

.pagination .page-link {
    color: var(--accent-green);
    border-color: transparent;
    background: transparent;
}


/* الصفحة النشطة */

.pagination .page-item.active .page-link,
.pagination .page-link.active {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
}


/* hover على روابط pagination */

.pagination .page-link:hover {
    background: rgba(47, 107, 58, 0.08);
    color: var(--accent-green);
}


/* disabled */

.pagination .page-item.disabled .page-link {
    color: rgba(255, 255, 255, 0.35);
}


/* تخصيص حجم دائري للنقّاط إن وُجد */

.hero-dots button.active {
    background: var(--accent-green) !important;
}


/* ===========================
   تحسينات لظهور النص على خلفية سوداء
   =========================== */


/* نصوص المحتوى الرئيسية داخل البطاقات نتركها سوداء على البطاقات البيضاء */


/* أما النصوص العامة خارج البطاقات فتبقى بيضاء للظهور على الخلفية السوداء */

.container,
main,
header,
footer {
    color: var(--page-text);
}


/* تعديلات طفيفة على modal المحتوى (مثلاً terms modal) ليظهر مناسباً */

.modal-content {
    background: var(--card-contrast) !important;
    color: #111 !important;
}


/* تأكد أن الأزرار الخضراء الافتراضية تبقى واضحة */

.btn-accent,
.btn-accent-green {
    box-shadow: 0 8px 24px rgba(47, 107, 58, 0.12);
}


/* إذا ظهرت عناصر بخط داكن على الخلفية السوداء، يمكن إعادة ضبطها هنا */


/* === إعادة الهيدر إلى اللون الأخضر (يتجاوز الخلفية السوداء السابقة) === */


/* الهيدر العلوي للموقع */

.top-header {
    background: var(--accent-dark) !important;
    /* يستخدم المتغير الموجود في الملف */
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}


/* هيدر لوحة التحكم */

.admin-header {
    background: var(--accent-dark) !important;
    color: #fff !important;
    border-bottom: 4px solid rgba(255, 255, 255, 0.03);
}


/* إذا أردت ظل أغمق قليلاً للهيدر على الداكن */

.top-header,
.admin-header {
    background-image: linear-gradient(180deg, var(--accent-dark), rgba(18, 30, 18, 0.95));
}


/* تأكد أن الروابط داخل الهيدر تكون بيضاء وقابلة للقراءة */

.top-header a,
.admin-header a,
.admin-header .nav,
.top-header .logo-text {
    color: #fff !important;
}


/* ===========================
   خلفية سوداء داخل إطار أخضر
   =========================== */


/* اجعل كامل الصفحة بلون الإطار الأخضر */

html,
body {
    background: #2e3e2a !important;
    /* أخضر متوسط (لون الإطار) */
    height: 100%;
    margin: 0;
    padding: 0;
}


/* الحاوية الداخلية (الموقع نفسه) */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #2e3e2a;
    /* إطار خارجي أخضر */
    z-index: -2;
    /* خلف كل شيء */
}


/* منطقة المحتوى (أسود داخل الإطار) */

body::after {
    content: "";
    position: fixed;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #000;
    /* الخلفية السوداء داخل الإطار */
    border-radius: 16px;
    /* حواف ناعمة للإطار */
    box-shadow: 0 0 0 4px #2e3e2a;
    /* تأكيد الحافة الخضراء */
    z-index: -1;
}


/* تأكد أن المحتوى فوق الخلفية */

body,
main,
header,
footer {
    position: relative;
    z-index: 1;
}


/* لإبقاء النصوص واضحة على الخلفية السوداء */

body,
main,
section,
footer,
header {
    color: #f5f5f5;
}


/* تعديل البطاقات لتبدو داخل الإطار الأسود */

.card-fancy,
.card-panel,
.login-card,
.review-card,
.modal-content {
    background: #fff;
    color: #111;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* إذا أردت أن تكون البطاقات شبه شفافة فوق الخلفية السوداء */

.card-fancy.transparent,
.card-panel.transparent {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}


/* ===========================
   إطار أخضر من الأعلى والجوانب فقط
   ويظهر من الأسفل عند نهاية الصفحة
   =========================== */

html,
body {
    background: #2e3e2a;
    /* لون الإطار */
    height: 100%;
    margin: 0;
    padding: 0;
}


/* الإطار العام حول الموقع */

body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2e3e2a;
    /* اللون الأخضر */
    z-index: -2;
}


/* خلفية الصفحة السوداء داخل الإطار */

body::after {
    content: "";
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 0;
    background: #000;
    border-radius: 16px 16px 0 0;
    z-index: -1;
}


/* الإطار السفلي - يظهر فقط عند نهاية الصفحة */

.page-bottom-border {
    position: fixed;
    bottom: -20px;
    /* يبدأ مخفي */
    left: 20px;
    right: 20px;
    height: 20px;
    background: #2e3e2a;
    border-radius: 0 0 16px 16px;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease;
}


/* عندما تصل لنهاية الصفحة */

body.scrolled-bottom .page-bottom-border {
    bottom: 0;
    opacity: 1;
}


/* محتوى الصفحة فوق الخلفية */

body,
main,
header,
footer {
    position: relative;
    z-index: 1;
    color: #f5f5f5;
}


/* ===========================
   خلفية سوداء داخل إطار أخضر
   مع هيدر ثابت وإطار سفلي يظهر عند النهاية
   =========================== */


/* جسم الصفحة */

html,
body {
    background: #2e3e2a;
    /* لون الإطار الأخضر */
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* الحاوية السوداء داخل الإطار */

body::after {
    content: "";
    position: fixed;
    top: 20px;
    bottom: 0;
    left: 20px;
    right: 20px;
    background: #000;
    border-radius: 18px 18px 0 0;
    z-index: -1;
}


/* الإطار السفلي — مخفي حتى الوصول للنهاية */

.page-bottom-border {
    position: fixed;
    left: 20px;
    right: 20px;
    height: 20px;
    background: #2e3e2a;
    border-radius: 0 0 18px 18px;
    z-index: -1;
    opacity: 0;
    bottom: -20px;
    transition: all 0.4s ease;
}


/* عند التمرير للنهاية يظهر الإطار السفلي */

body.scrolled-bottom .page-bottom-border {
    opacity: 1;
    bottom: 0;
}


/* محتوى الصفحة فوق الخلفية */

body,
main,
header,
footer {
    position: relative;
    z-index: 1;
    color: #f5f5f5;
}


/* ========== الهيدر (Sticky) ========== */

.top-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--accent-dark);
    color: #fff;
    padding: 12px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid #2e3e2a;
}

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

.top-header .logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.top-header a {
    color: #fff;
    text-decoration: none;
}


/* ========== زر الشروط والأحكام أبيض ========== */

button.btn-link,
.btn-link {
    color: #fff !important;
    text-decoration: underline;
}


/* ========== Pagination أخضر ========== */

.pagination .page-link {
    color: #2e3e2a;
    border: 1px solid #2e3e2a;
}

.pagination .page-item.active .page-link {
    background-color: #2e3e2a;
    border-color: #2e3e2a;
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #2e3e2a;
    color: #fff;
}

body::before,
body::after {
    display: none !important;
}


/* خلفية سوداء عامة */

body {
    background: #000 !important;
    color: #fff !important;
}


/* بطاقات داخلية تبقى بيضاء للقراءة */

.card-fancy,
.modal-content {
    background: #fff !important;
    color: #111 !important;
}


/* dots (positioned left for RTL to avoid content overlap) */

.fp-dots {
    left: 12px !important;
}


/* pagination color (if تستخدم pagination عادي) */

.pagination .page-link {
    color: #2f6b3a;
    border-color: transparent;
}

.pagination .page-item.active .page-link {
    background: #2f6b3a;
    color: #fff;
    border-color: #2f6b3a;
}


/* ========== Fullpage slides — Visual polish ========== */


/* قاعدة عامة */

.fp-container {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    background: #000;
}

.fp-slide {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    color: #fff;
    transition: opacity .8s cubic-bezier(.2, .9, .2, 1), transform .9s cubic-bezier(.2, .9, .2, 1);
    will-change: opacity, transform;
}


/* default non-active state (slightly zoomed out and dim) */

.fp-slide:not(.is-active) {
    opacity: 0.32;
    transform: scale(.98) translateY(6px);
    filter: saturate(.86) blur(0.0px);
    pointer-events: none;
    /* prevent accidental clicks on non-active slides */
}


/* active state */

.fp-slide.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    filter: none;
}


/* image slide specifics */

.fp-slide.img-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* desktop default: fill container */
    display: block;
    /* full-bleed visual */
}


/* add a subtle overlay for legibility */

.fp-slide .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.32));
    z-index: 1;
    pointer-events: none;
}


/* inner content sits above overlay */

.fp-slide .inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}


/* caption style for images */

.fp-slide .caption {
    text-align: center;
    color: #fff;
    text-shadow: 0 6px 20px rgba(0, 0, 0, .6);
}

.fp-slide .caption h2 {
    font-size: clamp(20px, 3.4vw, 42px);
    letter-spacing: .6px;
    margin: 0;
    font-weight: 700;
}


/* dots */

.fp-dots {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .16s ease, background .24s ease;
}

.fp-dots button.active {
    background: #ffd36b;
    transform: scale(1.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}


/* warm golden color */


/* card style (content slides) */

.card-fancy {
    background: linear-gradient(180deg, #fff, #fbfaf8) !important;
    color: #111 !important;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 18px 60px rgba(4, 6, 8, 0.48);
    border: 1px solid rgba(0, 0, 0, 0.06);
}


/* book-like title */

.section-title {
    font-family: "Tajawal", system-ui;
    font-size: 22px;
    color: #0f2b1b;
    font-weight: 800;
    margin-bottom: 14px;
}


/* special accent button */

.btn-primary-accent {
    background: linear-gradient(90deg, #0f2b1b, #2e4a2f);
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    border: 0;
    box-shadow: 0 10px 30px rgba(16, 40, 24, 0.24);
}


/* modal header look */

.modal-header {
    background: linear-gradient(90deg, #111, #222);
    color: #fff;
    border-bottom: none;
}

.modal-content {
    border-radius: 12px;
    overflow: hidden;
}


/* image responsiveness: on small screens show full image using contain */

@media (max-width: 900px) {
    .fp-slide.img-slide {
        background-size: contain;
        background-position: center top;
        background-color: #000;
    }
    .fp-dots {
        left: 10px;
        gap: 8px;
    }
    .card-fancy {
        padding: 18px;
        border-radius: 12px;
    }
}


/* micro animations for inner elements */

.card-fancy .fade-in-up {
    opacity: 0;
    transform: translateY(8px);
    transition: all .6s ease;
}

.fp-slide.is-active .card-fancy .fade-in-up {
    opacity: 1;
    transform: translateY(0);
}


/* reviews styling */

.review-card {
    margin-bottom: 12px;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
    color: #111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}


/* winners table compact */

.table th,
.table td {
    vertical-align: middle;
}


/* fine-tune: ensure page bottom border removed and header removed */

.page-bottom-border {
    display: none !important;
}

.top-header,
.admin-header {
    display: none !important;
}


/* accessibility focus */

.fp-slide:focus {
    outline: 3px solid rgba(255, 211, 107, 0.18);
    outline-offset: -6px;
}


/* ============================
  Mobile: show full-centered slide image
  ============================ */


/* Desktop: cover (ملء) — Mobile: contain (اظهار الصورة كاملة ومتمركزة) */

.fp-slide.img-slide {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    /* الافتراضي لسطح المكتب */
}


/* على الشاشات الصغيرة: اجعل الصورة تظهر كاملة ومتمركزة */

@media (max-width: 900px) {
    .fp-slide.img-slide {
        background-size: contain !important;
        /* يظهر الصورة بالكامل */
        background-position: center center !important;
        /* تمركز مركزي */
        background-color: #000;
        /* خلفية سوداء احتياطية لعدم ظهور مناطق بيضاء */
        height: 100vh;
        /* إحتفظ بارتفاع الشاشة الكامل */
    }
}


/* إضافي: منع امتداد المحتوى فوق حواف الهاتف عند contain */

.fp-slide.img-slide .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.28));
}


/* ============================
  إزالة الخلفية البيضاء لعنصر محدد
  نطبّق فقط على: 
    - صندوق عدد الزوار (.counter-box)
    - محتوى الشروط (modal) (#termsModal .modal-content)
    - نص الـ hero (section الذي يعرض heroBlockText) سنضيف له class .transparent-card
  ============================ */


/* عام: فئات الشفافية التي يمكن إعادة استخدامها */

.card-transparent {
    background: transparent !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* اذا احتجت محتوى داخلي بمظهر فاتح (نص داخل البطاقات) عيّنه صراحة */

.card-transparent .card-inner {
    background: rgba(0, 0, 0, 0.0);
    color: #f5f5f5;
}


/* خاص: الزر والشروط والعدّاد */

.counter-box {
    background: transparent !important;
    color: #99d51f !important;
    /* تغيير لون النص إلى المطلوب */
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 18px;
    font-size: 20px;
    font-weight: 700;
}


/* اجعل مودال الشروط شفّاف من الخلفية (المحتوى الداخلي يبقى داخل صندوق فاتح أو شفاف حسب رغبتك) */

#termsModal .modal-dialog {
    max-width: 960px;
}

#termsModal .modal-content {
    background: rgba(0, 0, 0, 0.0) !important;
    /* خلفية شفافة ليتماشى مع التصميم الداكن */
    box-shadow: none !important;
    border: 0 !important;
    color: #f5f5f5 !important;
}


/* لكن داخل المودال نحتاج صندوق للقراءة — نستخدم .modal-body-card */

#termsModal .modal-body-card {
    background: rgba(255, 255, 255, 0.02);
    color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}


/* النص داخل hero (عند إظهار heroBlockText) لو أردته شفاف */

.hero-text-section.card-transparent {
    padding: 0;
}


/* احرص أن الروابط في الخلفية السوداء تظهر واضحة */

a {
    color: #ffd36b;
}


/* تعطيل الخلفية البيضاء العامة عن بعض البطاقات (لا تقتل كل البطاقات) */

.card-fancy.card-transparent,
.card-panel.card-transparent,
.review-card.card-transparent {
    background: transparent !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* تلميح: إظهار نص داخل بطاقات شفافة بتباين */

.card-fancy.card-transparent .section-title {
    color: #fff !important;
}


/* ============================
  تخصيص إضافي: اجعل نص الهيدر غير موجود (حسب طلبك سابقاً حذف الهيدر)
  (لو لا يزال ظاهراً، نخفيه)
  ============================ */

.top-header,
.admin-header {
    display: none !important;
}


/* Reviews — transparent cards with white border */

.reviews-plain-wrap {
    max-width: 920px;
    margin: 0 auto;
}

.reviews-list-plain {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}


/* كل رأي كـ بطاقة شفافة ذات حد أبيض وزجاجي */

.review-item-plain {
    background: rgba(255, 255, 255, 0.02);
    /* شفاف جداً - يظهر الخلفية السوداء */
    border: 1px solid rgba(255, 255, 255, 0.18);
    /* حد أبيض خفيف كما طلبت */
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 30px rgba(2, 6, 8, 0.45);
    backdrop-filter: blur(6px) saturate(110%);
    /* تأثير زجاجي لطيف */
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    color: #fff;
    transition: transform .28s cubic-bezier(.2, .9, .2, 1), box-shadow .28s;
}


/* تمييز عند المرور */

.review-item-plain:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2, 6, 8, 0.6);
}


/* رأس البطاقة: اسم وتاريخ */

.review-head-plain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.review-name-plain {
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}

.review-date-plain {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}


/* نص الرأي */

.review-body-plain {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}


/* تصميم استجابي */

@media (max-width:900px) {
    .review-item-plain {
        padding: 14px;
        border-radius: 12px;
    }
    .review-head-plain {
        gap: 8px;
    }
    .review-name-plain {
        font-size: 15px;
    }
}


/* section title */

.section-title {
    color: #fff;
    font-weight: 700;
}


/* muted text needs to be lighter on dark bg */

.muted {
    color: rgba(255, 255, 255, 0.6);
}


/* reply styling */

.review-reply {
    background: rgba(255, 255, 255, 0.05);
    /* شفاف داكن قليلًا على الأسود */
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    margin-left: 0;
    /* RTL */
    direction: rtl;
}

.review-reply .reply-head strong {
    color: #fff;
}

.review-reply .reply-body {
    color: #eaeaea;
    line-height: 1.45;
}



/* ========== Override: show sticky green header ========== */

:root {
    --site-green: #99d51f;
}


/* Force show (override any earlier display:none !important) */

.top-header {
    display: flex !important;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300 !important;
    align-items: center;
    justify-content: center;
    background: var(--site-green);
    color: #07110a;
    padding: 10px 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    border-bottom: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}


/* inner container */

.top-header .header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* logo */

.top-header .logo-text {
    color: #07110a;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
}


/* nav list (RTL-friendly) */

.top-header .nav-list {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* links */

.top-header .nav-list .nav-link {
    color: #07110a;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .14s ease, transform .12s ease;
}

.top-header .nav-list .nav-link:hover,
.top-header .nav-list .nav-link:focus {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}


/* active tab look */

.top-header .nav-list .nav-link.active {
    background: #07110a;
    color: var(--site-green);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


/* small screens: stack/center */

@media (max-width: 820px) {
    .top-header .header-inner {
        gap: 8px;
    }
    .top-header .nav-list {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .top-header .logo-text {
        font-size: 18px;
    }
}


/* ensure page top anchor (used by "logo" link) is reachable */

#top {
    position: relative;
    top: 0;
    left: 0;
}

:root {
    --site-green: #172300;
}


/* Header */

.top-header.sticky-green {
    position: sticky;
    top: 0;
    z-index: 1300;
    background: var(--site-green);
    color: #07110a;
    padding: 10px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.logo-text {
    color: #07110a;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
}


/* القائمة */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.nav-list {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: #07110a;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.nav-link:hover,
.nav-link.active {
    background: #07110a;
    color: var(--site-green);
}


/* زر القائمة للجوال */

.menu-toggle {
    background: transparent;
    border: none;
    font-size: 28px;
    color: #07110a;
    display: none;
    cursor: pointer;
    transition: transform .2s ease;
}

.menu-toggle:hover {
    transform: scale(1.1);
}


/* في الجوال تظهر القائمة منسدلة */

@media (max-width: 820px) {
    .menu-toggle {
        display: block;
    }
    .main-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--site-green);
        flex-direction: column;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    .main-nav.open {
        max-height: 320px;
        opacity: 1;
        pointer-events: all;
        transition: max-height .35s ease, opacity .3s ease;
    }
    .nav-list {
        flex-direction: column;
        gap: 10px;
        padding: 12px 0;
    }
    .nav-link {
        display: block;
        text-align: center;
        width: 100%;
        padding: 10px;
    }
}


/* ---- books slider styles ---- */
.books-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
}

.books-track-wrap {
  overflow: hidden;
  flex: 1 1 auto;
}

.books-track {
  display: flex;
  gap: 20px;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  touch-action: pan-y;
}

.book-slide {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 100%;
  box-sizing: border-box;
  padding: 18px;
}

/* نص/محتوى */
.book-content {
  flex: 1 1 50%;
  min-width: 220px;
  direction: rtl;
}

.book-title {
  font-size: 1.4rem;
  margin: 0 0 8px 0;
}

/* غلاف الكتاب */
.book-visual {
  flex: 0 0 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
}

.book-visual img {
  width: 70%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.25);
  transform: rotate(-3deg);
  transition: transform .24s ease, box-shadow .24s ease;
  background: #fff;
}

/* زر ال prev / next */
.books-prev,
.books-next {
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #222;
  user-select: none;
  transition: background .18s ease;
}
.books-prev:hover,
.books-next:hover { background: rgba(0,0,0,0.06); }

/* النقاط */
.books-dots {
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:14px;
}
.books-dots button {
  width:10px; height:10px; border-radius:50%; border: none;
  background: rgba(0,0,0,0.18); cursor:pointer;
}
.books-dots button.active { background: rgba(0,0,0,0.8); }

/* Hover effect (desktop) */
@media(min-width: 900px){
  .book-visual img:hover { transform: rotate(-1deg) translateY(-6px) scale(1.04); box-shadow: 0 28px 60px rgba(0,0,0,0.32); }
}

/* Mobile layout: stack content, make image smaller */
@media(max-width: 767px){
  .book-slide { flex-direction: column; align-items: center; text-align:center; padding: 12px; }
  .book-content { order: 2; width: 100%; }
  .book-visual { order: 1; width: 100%; }
  .book-visual img { width: 56%; transform: rotate(0); box-shadow: 0 10px 24px rgba(0,0,0,0.14); }
  .books-prev, .books-next { display: none; }
  .books-slider { padding: 0 6px; }
}



/* جعل القسم كامل في منتصف الشاشة 100% */

#consentFormSection {
    min-height: 100vh;
    padding: 40px 15px;
    display: flex;
    justify-content: center;
    /* توسيط أفقي */
    align-items: center;
    /* توسيط عمودي */
    background: transparent;
    text-align: center;
    /* مهم لمنع دفع النموذج لليمين */
}


/* شكل النموذج الشفاف */

.consent-wrapper {
    width: 100%;
    max-width: 520px;
    padding: 30px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    /* شفافية بسيطة */
    border: 2px solid rgba(255, 255, 255, 0.6);
    /* حدود بيضاء ظاهرة */
    backdrop-filter: blur(8px);
    /* تعتيم خلفية جميل مثل الآراء */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    text-align: right;
}


/* العنوان */

.form-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 5px;
}

.form-subtitle {
    text-align: center;
    font-size: 14px;
    color: #eee;
    margin-bottom: 20px;
}


/* الحقول */

.consent-form .form-group {
    margin-bottom: 18px;
}

.consent-form label {
    font-weight: 600;
    color: white;
    margin-bottom: 6px;
    display: block;
}

.consent-form .form-control {
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.85);
}


/* الشيك بوكس */

.form-check-label {
    color: white !important;
}


/* زر الإرسال */

.submit-btn {
    width: 100%;
    background: #2e3e2a;
    color: white;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 17px;
    font-weight: bold;
    transition: 0.2s;
}

.submit-btn:hover {
    background: #253421;
}

#consentFormSection {
    display: flex;
    justify-content: center;
    /* توسيط أفقي */
    align-items: center;
    /* توسيط عمودي */
    min-height: 100vh;
    /* يملأ كامل ارتفاع الشاشة */
    padding: 40px 0;
}

#consentFormSection .container {
    display: flex;
    justify-content: center;
}

.consent-wrapper {
    width: 100%;
    max-width: 520px;
    /* حجم ثابت جميل */
    background: rgba(0, 0, 0, 0.55);
    /* شفافية خلفية */
    border: 1px solid #fff;
    /* حدود بيضاء */
    border-radius: 14px;
    /* زوايا ناعمة */
    padding: 30px;
}


/* Gifts carousel styles */

.gifts-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.gifts-viewport {
    overflow: hidden;
    width: calc(100% - 120px);
}

.gifts-carousel {
    display: flex;
    gap: 16px;
    transition: transform .35s ease;
    will-change: transform;
}

.gift-card {
    width: 220px;
    flex: 0 0 220px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.gift-img {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.gift-caption {
    padding: 8px;
    font-size: 14px;
    text-align: center;
}

.gifts-arrow {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

@media (max-width:900px) {
    .gifts-viewport {
        width: 100%;
    }
    .gifts-arrow {
        display: none;
    }
    .gift-card {
        width: 60vw;
        flex: 0 0 60vw;
    }
}


/* Gifts slider (simple, responsive) */

.gifts-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 10px
}

.gifts-track-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 920px
}

.gifts-track {
    display: flex;
    gap: 12px;
    transition: transform .45s ease;
    will-change: transform
}

.gift-item {
    flex: 0 0 260px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    color: #111
}

.gift-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block
}

.gift-caption {
    margin-top: 8px;
    font-size: 14px;
    color: #333
}

.gifts-prev,
.gifts-next {
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer
}

@media(max-width:900px) {
    .gift-item {
        flex: 0 0 68%;
    }
    .gifts-track {
        gap: 8px
    }
}


/* gifts scroll-snap base */

.gifts-viewport {
    overflow: hidden;
}


/* outer container */

#giftsCarousel {
    display: flex;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* hide IE scrollbar */
}

.gift-card {
    scroll-snap-align: center;
    flex: 0 0 auto;
    /* width set by script */
    box-sizing: border-box;
}


/* dots / arrows */

.gifts-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.gifts-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.gifts-dots .dot.active {
    background: var(--accent-green, #2e3e2a);
}

.gifts-arrow {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.slider-dots2 {
  text-align: center;
  margin-top: 10px;
  user-select: none;
}

.slider-dots2 .dot2 {
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
}

.slider-dots2 .dot2.active2 {
  background-color: #333;
  transform: scale(1.3);
}


.mobile-prev, .mobile-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: white;
  font-size: 26px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 20;
  backdrop-filter: blur(3px);
}

/* يمين ويسار */
.mobile-prev { left: 10px; }
.mobile-next { right: 10px; }

/* تأثير عند اللمس */
.mobile-prev:active, .mobile-next:active {
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(0.95);
}

/* تأكد أن parent position relative */
.mobile-track-wrap {
  position: relative;
}