:root { --dark: #0a1410; --dark2: #0e1f17; --green: #0a6b46; --green-dark: #084f34; --green-light: #e7f3ec; --bg: #f4f7f5; --card: #ffffff; --text: #101a15; --muted: #5b6b62; --border: #e2e8e4; --shadow: 0 10px 28px rgba(10, 20, 16, 0.12); --gold: #9a5b00; --sky: #0ea5e9; --sky-dark: #0284c7; --price-blue: #1e3a8a; /* ذهبي حقيقي لإطار بطاقة الفنادق (بعيد عن --gold اللي فوق ده بني أكتر ومستخدم في حاجات تانية زي شارة درجة رجال الأعمال في نتايج الطيران — ملموسناهوش عشان منأثرش على حاجة تانية في الموقع غير الفنادق) */ --hotel-gold: #d4af37; --hotel-gold-dark: #b8932c; /* أزرق Booking.com الرسمي لزرار البحث بتاع الفنادق */ --booking-blue: #0071c2; --booking-blue-dark: #00487a; } * { box-sizing: border-box; } html { /* ملحوظة: مفيش direction:rtl ثابت هنا — الاتجاه بيتحدد ديناميكيًا حسب خاصية dir على اللي بيغيّرها js/i18n.js لما المستخدم يبدّل اللغة، ومعظم الليه-آوت (flex/grid) بيتبع الاتجاه ده تلقائيًا. */ color-scheme: light; } body { margin: 0; font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); /* خط دفاع أخير ضد أي عنصر يعمل overflow أفقي على الموبايل من غير ما نلاحظه (زي سيليكت العملة اللي كان بيوسّع الصفحة كلها قبل إصلاح header-controls تحت) — الحل الجذري دايمًا أفضل، ده بس شبكة أمان */ overflow-x: hidden; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } header.site-header { background: var(--dark); color: #fff; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; } .logo { font-weight: 800; font-size: 22px; display: flex; align-items: center; gap: 8px; } .logo-mark { width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px; } .header-controls { display: flex; align-items: center; gap: 10px; } .header-nav-link { color: #fff; font-size: 13px; font-weight: 700; opacity: 0.85; padding: 6px 4px; } .header-nav-link:hover { opacity: 1; text-decoration: underline; } @media (max-width: 480px) { .header-nav-link { font-size: 11px; } } .currency-switcher { display: flex; } .currency-switcher select { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; border-radius: 8px; padding: 6px 9px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.2px; } .currency-switcher select:hover { border-color: #fff; } .currency-switcher select option { color: var(--text); background: #fff; font-weight: 500; } .lang-switcher { display: flex; gap: 6px; } .lang-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; } .lang-btn:hover { border-color: #fff; } .lang-btn.active { background: var(--green); border-color: var(--green); } /* على الموبايل، سيليكت العملة (بأسمائه الكاملة زي "دولار أمريكي (US$)") + أزرار اللغة كانوا بياخدوا مساحة أعرض من عرض الشاشة نفسه ويعملوا overflow أفقي لصفحة كاملة — بنصغّر المقاسات هنا عشان يتظبطوا في هيدر بعرض الموبايل */ @media (max-width: 480px) { header.site-header { padding: 12px 12px; } .logo { font-size: 14px; gap: 5px; } .logo-mark { width: 22px; height: 22px; } .header-controls { gap: 4px; } .currency-switcher select { max-width: 80px; font-size: 10px; padding: 5px 4px; } .lang-switcher { gap: 3px; } .lang-btn { padding: 5px 6px; font-size: 10px; } } .hero { background: radial-gradient(ellipse at 30% 0%, rgba(10, 107, 70, 0.55), transparent 60%), linear-gradient(180deg, var(--dark) 0%, #060a08 100%); color: #fff; padding: 48px 20px 130px; text-align: center; } .hero h1 { font-size: 32px; margin: 0 0 8px; } .hero p { margin: 0; opacity: 0.85; font-size: 16px; } /* ================= شارة التقييم (تظهر في الهيدر وصفحة widgets) ================= */ .rating-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; } .rating-badge .rb-stars { color: #ffb400; letter-spacing: 1px; font-size: 14px; } .rating-badge .rb-avg { font-weight: 800; } .rating-badge .rb-count { opacity: 0.75; } .rating-badge.rb-empty { opacity: 0.85; } /* ================= زرار "ثبت البرنامج" (PWA install CTA) تحت شارة التقييم في الهيدر ================= */ /* مخفي افتراضيًا بـ style="display:none" في الـ HTML، وبيظهره JS بس لو الجهاز موبايل (اندرويد/iOS) والموقع مش مثبّت أصلاً */ .hero-install { margin-top: 16px; } .btn-hero-install { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--dark); border: none; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); transition: transform 0.15s, box-shadow 0.15s; } .btn-hero-install:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); } .btn-hero-install .hi-icon { font-size: 17px; line-height: 1; } .install-ios-steps { max-width: 300px; margin: 14px auto 0; background: var(--card); color: var(--text); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; font-size: 13px; line-height: 1.9; text-align: start; } .install-ios-steps p { margin: 0 0 10px; } .install-ios-close-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 16px; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; } .install-ios-close-btn:hover { border-color: var(--green); color: var(--green-dark); } /* ================= بطاقة البحث (Saudia-style) ================= */ /* ================= تابس التبديل بين الطيران والفنادق ================= */ .channel-tabs { max-width: 1040px; margin: -46px auto 0; padding: 0 26px; position: relative; display: flex; gap: 6px; } .channel-tab { background: var(--dark2, #0e1f17); color: rgba(255, 255, 255, 0.75); border: none; border-radius: 12px 12px 0 0; padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .channel-tab.active { background: var(--card); color: var(--text); } .channel-tab:not(.active):hover { color: #fff; } @media (max-width: 480px) { .channel-tabs { margin-top: -30px; padding: 0 12px; } .channel-tab { padding: 10px 14px; font-size: 12px; } } .search-card { max-width: 1040px; margin: -90px auto 0; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 26px 26px; position: relative; } .channel-tabs + .search-card, .channel-tabs ~ .hotel-search-card { margin-top: 0; border-radius: 0 16px 16px 16px; } /* الفنادق: نفس شكل وأبعاد بطاقة بحث الطيران بالظبط (نفس max-width:1040px الموروثة من .search-card) — الفرق الوحيد إطار ذهبي فوق عشان يتميّز بصريًا. ملحوظة: كانت فيه max-width:640px هنا قبل كده وهي سبب إن كارت الفنادق كان طالع أصغر وشكله مختلف عن كارت الطيران — اتشالت خالص. */ .hotel-search-card { border-top: 4px solid var(--hotel-gold); } /* خانة "الوجهة": نفس location-box بتاع الطيران بالظبط (من/إلى)، بس هنا خانة واحدة طويلة بعرض الكارت كله بدل خانتين جنب بعض، بنفس المسافة اللي route-row بتسيبها تحتها في الطيران (margin-bottom: 14px) */ .hotel-search-card .hotel-destination-box { margin-bottom: 14px; } .hotel-search-card .field-group { margin-bottom: 16px; } .hotel-search-card .field-group label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; } .hotel-search-card select, .hotel-search-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 15px; color: var(--text); background: #fff; } .hotel-search-card select:focus, .hotel-search-card input:focus { outline: 2px solid var(--hotel-gold); } .btn-search-hotel { background: var(--booking-blue) !important; } .btn-search-hotel:hover { background: var(--booking-blue-dark) !important; } .hotel-error-msg { color: #b3261e; font-size: 13px; margin-top: 8px; } /* صف "تاريخ الوصول / تاريخ المغادرة / الضيوف والدرجة" في الفنادق: نفس الشبكة والأبعاد بالظبط بتاعة details-row في الطيران (تاريخ المغادرة/ العودة/المسافرين)، عشان المستطيلات تطلع بنفس المقاس بالظبط. عاملينها كلاس منفصل (مش نفس كلاس الطيران) عشان أي تعديل هنا يفضل معزول تمامًا عن فورم الطيران. */ .hotel-details-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; position: relative; margin-bottom: 16px; } @media (max-width: 800px) { .hotel-details-row { grid-template-columns: 1fr 1fr; } } .hotel-date-box { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hotel-date-box:focus-within { border-color: var(--hotel-gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.15); } .hotel-date-box label { font-size: 11px; color: var(--muted); font-weight: 700; margin: 0; } .hotel-search-card .hotel-date-box input[type="date"] { border: none; background: transparent; padding: 0; width: 100%; font-size: 14px; font-weight: 700; color: var(--text); } .hotel-search-card .hotel-date-box input[type="date"]:focus { outline: none; } /* صندوق "الضيوف والدرجة" في الفنادق: نفس pax-box/pax-popover بتاع الطيران بالظبط — hotel-details-row فوق عندها position:relative زي details-row بتاع الطيران بالظبط عشان النافذة المنبثقة تترص تحته صح */ .hotel-search-card .pax-box { width: 100%; } .hotel-search-card .pax-popover { inset-inline-end: 0; inset-inline-start: auto; min-width: 280px; } .stepper-sub { font-size: 11px; color: var(--muted); margin: -4px 0 12px; } .trip-type-radios { display: flex; justify-content: flex-end; gap: 26px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .trip-type-radios label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); } .trip-type-radios input[type="radio"] { appearance: none; width: 18px; height: 18px; border: 2px solid #b9c3bd; border-radius: 50%; margin: 0; cursor: pointer; position: relative; flex-shrink: 0; } .trip-type-radios input[type="radio"]:checked { border-color: var(--green); } .trip-type-radios input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); } /* ---- صف من / تبديل / إلى ---- */ .route-row { display: flex; align-items: stretch; gap: 0; margin-bottom: 14px; position: relative; } .location-box { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: relative; min-width: 0; } .location-box .loc-icon { font-size: 20px; color: var(--green); flex-shrink: 0; } .loc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .loc-text label { font-size: 11px; color: var(--muted); font-weight: 700; } .loc-text input { border: none; background: transparent; font-size: 17px; font-weight: 700; padding: 0; width: 100%; color: var(--text); font-family: inherit; } .loc-text input:focus { outline: none; } .swap-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--dark); color: #fff; border: 4px solid var(--card); font-size: 16px; cursor: pointer; margin: 0 -20px; z-index: 2; align-self: center; box-shadow: var(--shadow); transition: transform 0.15s; } .swap-btn:hover { background: var(--green); transform: rotate(180deg); } @media (max-width: 700px) { .route-row { flex-direction: column; gap: 10px; } .swap-btn { margin: -8px auto; transform: rotate(90deg); } .swap-btn:hover { transform: rotate(270deg); } } /* ---- صف التواريخ + المسافرين ---- */ .details-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; position: relative; } @media (max-width: 800px) { .details-row { grid-template-columns: 1fr 1fr; } } .date-box, .pax-box { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; /* min-width:0 ضروري هنا لأنهم عناصر جوه CSS Grid (.details-row) — من غيرها المتصفح بيحسب أقل عرض ممكن للعنصر بناءً على أطول نص جواه (زي تاريخ طويل) وبيتجاهل الـ ellipsis اللي حطيناها في .date-value، فيعمل overflow أفقي لكل الصفحة على الشاشات الصغيرة */ min-width: 0; } .date-box:hover, .pax-box:hover { border-color: var(--green); } .date-box.active, .pax-box.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(10,107,70,0.15); } .date-icon { font-size: 18px; color: var(--green); } .date-text, .pax-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .date-text label, .pax-text label { font-size: 11px; color: var(--muted); font-weight: 700; } .date-value, .pax-value { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pax-box .chevron { color: var(--muted); font-size: 12px; } /* ---- نافذة التقويم المنبثقة ---- */ .calendar-popover { position: absolute; top: calc(100% + 8px); inset-inline: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; z-index: 30; } .calendar-popover[hidden] { display: none; } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dp-reset { font-size: 13px; color: var(--green); font-weight: 700; cursor: pointer; } .dp-nav-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 14px; } .dp-months { display: flex; gap: 24px; flex-wrap: wrap; } @media (max-width: 700px) { .dp-months { flex-direction: column; } } .dp-month { flex: 1; min-width: 230px; } .dp-month-title { text-align: center; font-weight: 800; margin-bottom: 10px; font-size: 14px; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-dow { text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; padding-bottom: 6px; } .dp-day { text-align: center; padding: 8px 0; font-size: 13px; border-radius: 8px; cursor: pointer; } .dp-day:hover:not(.dp-disabled):not(.dp-empty) { background: var(--green-light); } .dp-day.dp-empty { cursor: default; } .dp-day.dp-disabled { color: #c7cec9; cursor: not-allowed; } .dp-day.dp-selected { background: var(--green); color: #fff; font-weight: 800; } .dp-day.dp-in-range { background: var(--green-light); color: var(--green-dark); } .dp-footer { margin-top: 14px; text-align: end; } .btn-dp-apply { background: var(--green); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-weight: 700; cursor: pointer; } /* ---- نافذة المسافرين والدرجة المنبثقة ---- */ .pax-popover { position: absolute; top: calc(100% + 8px); /* pax-box هو آخر عنصر في details-row، فبيقع دايمًا عند حافة "نهاية" الصف أيًا كان الاتجاه (يمين في RTL، يسار في LTR) — عشان كده بنستخدم خاصية منطقية (logical property) بدل left:0 الثابتة اللي كانت بتتكسر مع الإنجليزي */ inset-inline-end: 0; min-width: 300px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; z-index: 30; } .pax-popover[hidden] { display: none; } .pax-section-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 10px; } .stepper-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .stepper-row .stepper-label { font-size: 14px; font-weight: 600; } .stepper-controls { display: flex; align-items: center; gap: 12px; } .stepper-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); font-size: 16px; cursor: pointer; line-height: 1; } .stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .stepper-value { min-width: 18px; text-align: center; font-weight: 700; } .pax-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; } .class-radio-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; } .class-radio-row input[type="radio"] { appearance: none; width: 18px; height: 18px; border: 2px solid #b9c3bd; border-radius: 50%; margin: 0; position: relative; cursor: pointer; flex-shrink: 0; } .class-radio-row input[type="radio"]:checked { border-color: var(--green); } .class-radio-row input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); } .search-actions { display: flex; justify-content: flex-start; margin-top: 18px; } .btn-search-main { background: var(--green); color: #fff; border: none; border-radius: 10px; padding: 15px 30px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s; } .btn-search-main:hover { background: var(--green-dark); } /* ---- الوجهات المتعددة (Multi-city) ---- */ .leg-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); } @media (max-width: 900px) { .leg-row { grid-template-columns: 1fr 1fr; } } .leg-number { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 6px; } .field { position: relative; display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; color: var(--muted); font-weight: 600; } .field input, .field select { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; font-size: 15px; width: 100%; background: var(--bg); } .field input:focus, .field select:focus { outline: 2px solid var(--green); } .btn-remove-leg { background: #fff0f0; color: #b3261e; border: 1px solid #f3c9c9; border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap; height: 46px; } .btn-remove-leg:hover { background: #ffe3e3; } .btn-remove-leg:disabled { opacity: 0.35; cursor: not-allowed; } .multicity-actions { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .btn-add-leg { background: var(--green-light); color: var(--green-dark); border: 1px dashed var(--green); border-radius: 10px; padding: 12px 18px; font-weight: 700; font-size: 14px; cursor: pointer; } .btn-add-leg:hover { background: #dcf0e5; } .leg-result-group { margin-bottom: 26px; } .leg-result-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; color: var(--text); } .multicity-summary { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: var(--shadow); } .multicity-summary .total-price { font-size: 20px; font-weight: 800; color: var(--text); } .autocomplete-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto; z-index: 25; display: none; } .autocomplete-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; } .autocomplete-list li:hover { background: var(--bg); } .demo-notice { max-width: 1040px; margin: 20px auto 0; background: #fff7e6; border: 1px solid #ffd98a; color: #7a5200; padding: 12px 16px; border-radius: 10px; font-size: 14px; display: none; } .best-deals { max-width: 1040px; margin: 36px auto 0; padding: 0 20px; } .best-deals h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; } .deals-subtitle { color: var(--muted); font-size: 14px; margin: 0 0 16px; } .deals-status { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; grid-column: 1 / -1; } .deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .deal-card { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; text-align: start; } .deal-card:hover { border-color: var(--sky); transform: translateY(-2px); } .deal-card .deal-route { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; margin-bottom: 6px; } .deal-card .deal-airline { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .deal-card .deal-date { color: var(--muted); font-size: 12px; margin-bottom: 8px; } .deal-card .deal-price { font-size: 20px; font-weight: 800; color: var(--sky-dark); } .deal-card .deal-from-label { font-size: 12px; color: var(--muted); font-weight: 400; } #results-section { max-width: 1180px; margin: 32px auto; padding: 0 20px; display: none; } /* ---- شكل صفحة النتائج: شريط فلاتر جانبي + عمود النتائج ---- */ .results-shell { display: flex; align-items: flex-start; gap: 22px; } @media (max-width: 860px) { .results-shell { flex-direction: column; } .filters-sidebar { order: 2; width: 100%; position: static; } .results-main { order: 1; width: 100%; } } .filters-sidebar { width: 250px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; position: sticky; top: 16px; } .filter-group { margin-bottom: 20px; } .filter-group:last-of-type { margin-bottom: 14px; } .filter-group h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); } .filter-radio, .filter-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; cursor: pointer; color: var(--text); } .filter-radio input, .filter-check input { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } .filter-check span:first-of-type { flex: 1; } .filter-count { font-size: 11px; color: var(--muted); white-space: nowrap; } .filter-check:has(input:disabled) { opacity: 0.45; cursor: not-allowed; } .filter-check input:disabled { cursor: not-allowed; } .btn-reset-filters { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; } .btn-reset-filters:hover { border-color: var(--green); color: var(--green-dark); } .results-main { flex: 1; min-width: 0; } .results-header { margin-bottom: 16px; } .results-header h2 { margin: 0 0 4px; font-size: 22px; } .results-meta { color: var(--muted); font-size: 13px; margin-bottom: 4px; } .results-count { color: var(--muted); font-size: 13px; } /* ---- شريط أسعار الأيام فوق النتائج (Saudia-style) ---- */ .date-price-strip { display: flex; align-items: stretch; gap: 8px; margin: 14px 0 20px; } .date-price-strip .strip-nav { flex-shrink: 0; align-self: center; } .date-strip-days { flex: 1; display: flex; gap: 8px; min-width: 0; } @media (max-width: 700px) { .date-strip-days { overflow-x: auto; padding-bottom: 4px; } .date-strip-day { flex: 0 0 92px; } } .date-strip-day { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; text-align: center; cursor: pointer; } .date-strip-day:hover { border-color: var(--green); } .date-strip-day.selected { border-color: var(--green); background: var(--green-light); } .date-strip-day .dsd-label { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .date-strip-day.selected .dsd-label { color: var(--green-dark); font-weight: 700; } .date-strip-day .dsd-price { font-size: 13px; font-weight: 800; } .loading, .no-results { color: var(--muted); text-align: center; padding: 30px; } .result-card { background: var(--card); border: 2px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; box-shadow: var(--shadow); } /* ---- عمود الشركة: اسم الشركة فوق، وتحته الشعار الحقيقي على خلفية بيضاء بسيطة زي شكله في مواقع المقارنة الكبيرة (من غير مربع ملوّن حواليه). لو الشعار فشل يتحمل، بيظهر بدلاً منه حرف داخل شارة ملوّنة بلون الشركة عشان الصفحة متفضلش فاضية ---- */ .airline-logo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; } .airline-name-label { font-size: 13px; font-weight: 700; color: var(--text); text-align: center; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .airline-logo { width: 96px; height: 72px; border-radius: 10px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .airline-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; } .airline-logo-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 28px; } /* لما ميكونش عندنا كود شركة طيران حقيقي (نتايج v2/prices/latest اللي بترجع اسم وكيل/موقع الحجز بدل كود الشركة) — بنعرض اسم الوكيل بوضوح بدل ما نسيب خانة فاضية أو نخمّن شركة مش أكيدة، مع أيقونة طيارة عامة محايدة بدل شعار */ .airline-name-label.via-partner { color: var(--muted); font-weight: 600; } .airline-logo-fallback-generic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--green-light); color: var(--muted); font-size: 26px; } /* ---- الخط الفاصل الرأسي قبل السعر ---- */ .result-divider { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; } .result-main .airline { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .class-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; } .class-badge.class-economy { background: var(--green-light); color: var(--green-dark); } .class-badge.class-business { background: #fff1e0; color: var(--gold); } .class-badge.class-first { background: #f3e8ff; color: #6b21a8; } .result-main .route { font-size: 18px; font-weight: 700; display: flex; gap: 8px; align-items: center; } .result-main .arrow { color: var(--green); } .result-main .dates, .result-main .stops { color: var(--muted); font-size: 13px; margin-top: 4px; } .fare-freshness { color: var(--muted); font-size: 12px; margin-top: 2px; } .fare-different-date { color: #b45309; font-size: 12px; font-weight: 600; margin-top: 2px; } /* ---- خط زمن الرحلة (وقت المغادرة/الوصول والمدة) — Skyscanner-style ---- */ .flight-timeline { display: flex; align-items: center; gap: 18px; } .ft-time { display: flex; flex-direction: column; align-items: center; min-width: 54px; } .ft-clock { font-size: 17px; font-weight: 800; color: var(--text); } .ft-code { font-size: 11px; color: var(--muted); margin-top: 2px; } .ft-line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .ft-duration { font-size: 11px; color: var(--muted); } .ft-track { display: flex; align-items: center; gap: 4px; width: 100%; } .ft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .ft-track::before, .ft-track::after { content: ""; flex: 1; height: 1px; background: var(--border); } .ft-plane { font-size: 13px; color: var(--green); flex-shrink: 0; } .ft-stops { font-size: 11px; color: var(--muted); } .flight-timeline-partial { gap: 10px; } .ft-partial-note { font-size: 12px; color: var(--muted); } @media (max-width: 600px) { .flight-timeline { gap: 10px; } .ft-time { min-width: 44px; } } .result-side { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .result-side .price { font-size: 22px; font-weight: 800; color: var(--text); } /* رمز العملة دايمًا أخضر غامق، والرقم/السعر دايمًا أزرق غامق — في كل مكان بيظهر فيه سعر (نتايج البحث، شريط التواريخ، أرخص العروض، إجمالي الوجهات المتعددة) عشان يبقى شكل موحّد في الموقع كله */ .price-currency { color: var(--green-dark); } .price-amount { color: var(--price-blue); } .btn-book { background: var(--sky); color: #fff; padding: 14px 28px; border-radius: 10px; font-weight: 800; font-size: 16px; white-space: nowrap; border: none; cursor: pointer; display: inline-block; line-height: 1.3; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .btn-book:hover { background: var(--green); box-shadow: 0 2px 8px rgba(10, 107, 70, 0.35); transform: translateY(-1px); } .btn-book:active { background: var(--green-dark); transform: translateY(0); } /* زرار "تأكد من السعر الفعلي" — بيودي المستخدم لصفحة بحث حي منفصلة (live-price.html) مدعومة بـ White Label widget من Travelpayouts، عشان يتأكد من السعر اللحظي قبل الحجز. مقصود يكون شكله أهدأ من زرار الحجز الأساسي (ثانوي، مش المسار الرئيسي) */ .btn-verify-live { display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--green); color: var(--green-dark); background: transparent; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; text-decoration: none; transition: background 0.15s ease; } .btn-verify-live:hover { background: var(--green-light); } @media (max-width: 600px) { .result-card { flex-direction: column; align-items: stretch; text-align: center; } .airline-logo-col { margin: 0 auto 10px; } .result-divider { display: none; } .result-side { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; } } .how-it-works { max-width: 1040px; margin: 40px auto; padding: 0 20px 40px; } .how-it-works h2 { text-align: center; margin-bottom: 24px; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 700px) { .how-grid { grid-template-columns: 1fr; } } .how-card { background: var(--card); border-radius: 12px; padding: 20px; text-align: center; box-shadow: var(--shadow); } .how-card .emoji { font-size: 30px; margin-bottom: 8px; } /* ================= قسم التقييمات والتعليقات ================= */ .rating-section { max-width: 640px; margin: 0 auto 40px; padding: 0 20px; text-align: center; } .rating-section h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; } .rating-section-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; } .rating-summary-block { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; min-height: 24px; } .rating-summary-block .rb-stars { color: #ffb400; font-size: 20px; letter-spacing: 2px; } .rating-summary-block .rb-avg { font-weight: 800; font-size: 17px; } .rating-summary-block .rb-count { color: var(--muted); font-size: 13px; } .rating-summary-block .rb-empty-text { color: var(--muted); font-size: 14px; } .rating-form { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 24px 22px; text-align: start; } .rating-stars-input { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; } .star-input-btn { background: none; border: none; cursor: pointer; font-size: 34px; line-height: 1; color: var(--border); padding: 2px; transition: color 0.1s, transform 0.1s; } .star-input-btn:hover { transform: scale(1.12); } .star-input-btn.filled { color: #ffb400; } .rating-low-nudge { background: var(--green-light); border: 1px solid var(--green); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 0 0 16px; text-align: center; } .rating-field { margin-bottom: 14px; } .rating-field label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 5px; } .rating-field textarea, .rating-field input[type="email"] { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; } .rating-field textarea:focus, .rating-field input[type="email"]:focus { outline: 2px solid var(--sky); border-color: var(--sky); } /* حقل الفخ (Honeypot) — مخفي تمامًا عن المستخدمين الحقيقيين وبراوزرز الوصول */ .rating-hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .btn-rating-submit { width: 100%; background: var(--green); color: #fff; border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; transition: background 0.15s; } .btn-rating-submit:hover { background: var(--green-dark); } .btn-rating-submit:disabled { opacity: 0.65; cursor: not-allowed; } .rating-msg { margin: 12px 0 0; font-size: 13px; text-align: center; min-height: 16px; } .rating-msg.rm-success { color: var(--green); font-weight: 700; } .rating-msg.rm-error { color: #b3261e; font-weight: 700; } footer { background: var(--dark); color: #b9c9c0; text-align: center; padding: 24px; font-size: 13px; } footer a { color: var(--green); }