/* --- Hero Slider --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
}

.slider-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-lg);
    background-size: cover;
    background-position: center;
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
}

.slide-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-gold);
    margin-bottom: 4px;
}

.slide-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


.slider-dots {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--color-gold);
    transform: scale(1.2);
}

.marquee-container {
    width: 100%;
    overflow-x: auto; /* السماح بالتمرير اليدوي */
    overflow-y: hidden;
    scrollbar-width: none; /* إخفاء شريط التمرير الافتراضي */
    -webkit-overflow-scrolling: touch; /* تفعيل نعومة التمرير في الهواتف */
    position: relative;
    margin-bottom: 15px;
    display: flex;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-container::-webkit-scrollbar {
    display: none;
}

/* الشريط اللانهائي: أربع نسخ متطابقة من نفس القائمة داخل المسار.
   عرض المسار = 4W + 3g، والإزاحة المطلوبة لتحلّ النسخة الثانية محل الأولى
   هي W + g، وهي بالضبط 25% من عرض المسار + ربع الفجوة. فتعود الحركة إلى
   نقطة تطابق تام ولا تُرى إعادة ولا قفزة إطلاقاً. */
.marquee-track {
    display: inline-flex;
    flex-direction: row;
    white-space: nowrap;
    width: max-content;
    gap: 15px;
    animation: scrollMarqueeRight 60s linear infinite;
    will-change: transform;
}

/* إيقاف الحركة التلقائية عند اللمس ليتيح للمستخدم التمرير بحرية */
.marquee-container:active .marquee-track,
.marquee-container:hover .marquee-track,
.marquee-track:hover,
.marquee-track:active {
    animation-play-state: paused;
}

@keyframes scrollMarqueeRight {
    /* في واجهات اليمين-لليسار (RTL) الإزاحة الموجبة تحرك المسار لليمين،
       فتدخل النسخة التالية من اليسار في نفس اللحظة التي تخرج فيها السابقة */
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(25% + 3.75px)); }
}

/* الشريط المعاكس: نفس المسافة بالاتجاه الآخر */
/* كل نسخة مجموعة واحدة بنفس الفجوة الداخلية، فيتحقق الشرط 4W + 3g */
.marquee-group {
    display: inline-flex;
    flex-direction: row;
    gap: 15px;
}

/* الاتجاه المعاكس يُنفَّذ بعكس تشغيل نفس الحركة لا بإزاحة سالبة:
   الإزاحة السالبة في واجهة RTL تدفع المسار خارج حدوده فيظهر فراغ عند
   طرفه، أما عكس التشغيل فيبقى داخل المدى نفسه ويظل لانهائياً. */
.marquee-track--reverse { animation-direction: reverse; }

/* احترام تفضيل تقليل الحركة: تبقى القائمة قابلة للتمرير يدوياً */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

.category-item {
    display: inline-flex;
    flex-direction: row; /* محاذاة الأيقونة والكلمة بجانب بعضهما البعض */
    align-items: center;
    gap: 8px;
    padding: 8px 14px; /* إضافة حشوة داخلية لتشكيل لوحة موحدة */
    flex-shrink: 0; 
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.85;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    /* دمج تصميم اللوحة الهندسية للعنصر بالكامل */
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, var(--veil-30) 100%);
    border-radius: 0 12px 4px 20px; 
    border: none;
    border-right: 1.5px solid rgba(201, 168, 76, 0.3);
    box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
}

.category-item.active {
    opacity: 1;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.25) 0%, var(--veil-50) 100%);
    border-right: 2px solid var(--color-gold);
    box-shadow: -3px 3px 12px rgba(0,0,0,0.3);
}

.cat-icon {
    font-size: 16px; /* تصغير حجم الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.category-item span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap; /* منع نزول النص لسطر جديد داخل اللوحة */
}

.category-item.active span {
    color: var(--color-gold);
}

/* --- Awareness Nav Specialization --- */
.awareness-nav {
    margin-top: 5px;
    margin-bottom: var(--spacing-lg); /* مسافة سفلية أصغر قليلاً */
}



/* --- Trip Sections & Cards --- */
.trip-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: 0 5px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-title {
    color: var(--color-gold);
    font-size: 15px;
    font-weight: 700;
}

.view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-008);
    border: 1px solid var(--line-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-full);
    padding: 6px 14px;
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.view-all:hover, .view-all:active {
    background: var(--tint-015);
    transform: scale(0.95);
}

.trip-cards-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* الهامش السالب يمدّ الشريط 5px خارج أبيه من كل جهة ليلامس حافة
       الشاشة، والحشو يعيد المحتوى إلى مكانه. لكن الأب نفسه محشوّ
       بـ 5px، فيصير المجموع تجاوزاً أفقياً 5px في كل قسم من الرئيسية:
       اهتزازة صغيرة عند السحب لا يعرف أحد من أين تأتي.
       فالمدّ من جهة البداية وحدها بقدر حشو الأب. */
    margin-inline: -5px 0;
    padding: 0 5px 15px 5px;
}
.trip-cards-container::-webkit-scrollbar { display: none; }

/* عرض البطاقة على الجوال: 165px لا 220px.

   كانت البطاقة 220px على شاشة 390px — أكثر من نصف العرض — وطولها
   278px، فلا يُرى منها في الشاشة إلا واحدةٌ وبعض الثانية. والشريط
   الأفقي معناه المقارنة، ولا مقارنة بين واحدةٍ وطرف.

   و‎min-width: 220px‎ كان يعلو على كل عرضٍ يضعه شريطٌ آخر: صفوف
   «استكشف» تطلب 210px فتصير 220px، فبطلت التسوية من حيث لا تُرى.
   فيبقى العرض وحده، ويُضبط عند كل مقاس. */
.trip-card {
    width: 165px;
    min-width: 0;
    height: auto; /* السماح بالتمدد التلقائي */
    background: linear-gradient(145deg, var(--tint-005) 0%, var(--tint-001) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(201, 168, 76, 0.1);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trip-card:active {
    transform: scale(0.98);
}

/* البطاقة كلها مساحة ضغط واحدة: الرابط يتمدد فوقها بعنصر زائف،
   فلا يضطر المستخدم لإصابة الصورة أو العنوان بالذات. */
.trip-card { position: relative; }
.trip-card .stretched::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* زر المفضلة وحده يعلو مساحة الضغط. الشارة والتقييم زخرفة، فتركها
   تحتها يجعل الضغط عليها يفتح الرحلة أيضاً بدل أن يبتلع الضغطة. */
.trip-card .fav-btn { z-index: 2; }

.trip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    border-color: var(--color-gold-border);
}
.trip-card:focus-within {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* نسبةٌ لا ارتفاعٌ ثابت: 170px على بطاقةٍ عرضها 165px صورةٌ أطول من
   عرضها، ومنظر الوادي يُقصّ من جانبيه فيصير جداراً. والنسبة تُبقيها
   منظراً عند كل عرض. */
.trip-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
    overflow: hidden;
}

.trip-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.trip-card:hover .trip-img-wrap img {
    transform: scale(1.05);
}

.trip-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.95) 0%, rgba(160, 130, 50, 0.95) 100%);
    color: #111;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.fav-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line-soft);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.3s ease;
}
.fav-btn:hover, .fav-btn:active {
    background: rgba(201, 168, 76, 0.9);
    color: #111;
    border-color: rgba(201, 168, 76, 1);
    transform: scale(1.1);
}

.trip-rating-floating {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line-soft);
}
.trip-rating-floating span {
    color: var(--color-gold);
    font-weight: 800;
}

.trip-details {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1 0 auto; 
    min-height: min-content;
}

/* سطران لا سطر: البطاقة 158px على 360px، وسطرٌ واحد يقصّ «استكشاف
   وادي لجب» إلى «استكشاف وادي ل». والاسم هو ما يُختار به، فقصّه يجعل
   الرحلتين المتشابهتين اسماً واحداً.
   وارتفاعٌ ثابت بسطرين يُبقي أسفل البطاقات على خطّ واحد، فلا يتعرّج
   الصفّ بين اسمٍ قصير وآخر طويل. */
.trip-title {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* «يبدأ من» والسعر شيء واحد يُقرأ معاً، فيلتصقان.
   كان space-between يدفعهما إلى طرفَي البطاقة، فيبعدان 328px في
   بطاقة عريضة ولا تعود العبارة تصف الرقم الذي بجانبها. */
.trip-price {
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.trip-price::before {
    content: 'يبدأ من';
}
.trip-price span {
    color: var(--color-gold);
    font-size: 16px;
    font-weight: 800;
}

/* --- Partners Section --- */
.partners-section {
    margin-top: var(--spacing-xl);
    margin-bottom: 90px; /* مسافة للشريط السفلي */
    padding: 0 5px;
}

.partners-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 25px;
    background: linear-gradient(145deg, var(--tint-003) 0%, var(--tint-001) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(201, 168, 76, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.partner-logo {
    width: 150px;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 0 10px var(--tint-005));
    transition: all 0.3s ease;
}

.partner-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(201, 168, 76, 0.2));
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* فلتر لتحويل الشعار الأسود إلى أبيض */
.invert-to-white {
    filter: invert(1) brightness(100);
}

/* شارة «جديدة» على رحلة لم تُقيَّم: تُقرأ حالةً لا درجةً، فلا تأخذ
   لون النجوم الذهبي ولا وزنه. */
.trip-rating-floating--new {
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* --- شريط الشعارات الدائري --- */
/* القائمة مكرّرة مرّتين، والحركة تنتهي عند نصف العرض بالضبط، فتعود
   إلى نقطة تطابق ما قبلها ولا يُرى وثب. */
.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll var(--loop-seconds, 30s) linear infinite;
}

.marquee__group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding-inline-end: var(--spacing-xl);
}

/* يتوقّف عند المرور بالفأرة وعند التركيز بلوحة المفاتيح: شعارٌ
   يتحرّك لا يُضغط، ومن أراد فتحه يحتاجه واقفاً. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* ومن طلب تقليل الحركة لا يُفرَض عليه شريط لا يقف. وهذا ليس تجميلاً:
   الحركة الدائمة تسبّب دواراً لمن عنده حساسية حركة. */
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}