/**
 * mobile-fix.css
 * 
 * يُحمَّل بعد components.css مباشرة لضمان الأولوية.
 * يحل مشكلة زر الواتساب الفلوت والـ sticky bar على الموبايل.
 *
 * @package hurghada-transfers
 */

/* ==========================================================
   FLOATING WHATSAPP BUTTON — إصلاح الموبايل
   ==========================================================
   المشكلة: الـ base CSS يستخدم top: 60% + transform: translateY(-50%)
   وعلى الموبايل يخفي الزر خارج الشاشة أو يتداخل مع الـ sticky bar.
   الحل: نعيد تعريف الزر بالكامل بـ bottom-anchored positioning.
   ========================================================== */

/* ── الموبايل والتابلت (≤ 768px) ── */
@media screen and (max-width: 768px) {

    /* إعادة تعريف الزر كاملاً */
    #ht-float-wa.ht-float-wa,
    .ht-float-wa {
        /* إلغاء top تماماً */
        top: unset !important;
        /* تثبيت في أسفل يمين الشاشة */
        bottom: 20px !important;
        right: 14px !important;
        /* إلغاء أي transform موروث */
        transform: none !important;
        /* حجم مناسب للموبايل */
        width: 54px !important;
        height: 54px !important;
        /* تأكيد الظهور */
        display: flex !important;
        position: fixed !important;
        z-index: 9990 !important;
    }

    #ht-float-wa.ht-float-wa:hover,
    .ht-float-wa:hover {
        transform: scale(1.08) !important;
    }

    /* لما الـ sticky bar يظهر: اخفِ الزر العائم بدل رفعه فوق البار
       (البار نفسه فيه زرار واتساب، فمفيش داعي لزرارين واتساب فوق بعض) */
    body.ht-sticky-active #ht-float-wa.ht-float-wa,
    body.ht-sticky-active .ht-float-wa {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility .2s ease !important;
    }
}

/* ==========================================================
   STICKY BOOKING BAR — إصلاح الموبايل
   ==========================================================
   المشكلة: على الموبايل الـ bar بيصير صفين (column layout)
   فبيكون طويل جداً وبيغطي المحتوى.
   الحل: صف واحد دايماً، الأزرار جنب بعض.
   ========================================================== */

@media screen and (max-width: 600px) {

    /* صف واحد دايماً */
    #ht-sticky-bar .ht-sticky-bar-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0 10px !important;
        gap: 8px !important;
        align-items: center !important;
        height: 58px !important;          /* ارتفاع ثابت = لا layout shift */
    }

    /* اسم الترانسفير: يأخذ المساحة المتبقية */
    #ht-sticky-bar .ht-sticky-bar-route {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 6px !important;
        font-size: 12px !important;
    }

    #ht-sticky-bar .ht-sticky-bar-route svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    #ht-sticky-bar .ht-sticky-bar-route span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100px !important;
    }

    #ht-sticky-bar .ht-sticky-bar-price {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* حاوية الأزرار: لا تنكمش */
    #ht-sticky-bar .ht-sticky-bar-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 6px !important;
    }

    /* الأزرار نفسها */
    #ht-sticky-bar .ht-sticky-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        border-radius: 8px !important;
    }

    #ht-sticky-bar .ht-sticky-btn svg {
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
    }
}

/* شاشات صغيرة جداً (≤ 380px): اخفي اسم الترانسفير */
@media screen and (max-width: 380px) {
    #ht-sticky-bar .ht-sticky-bar-route span {
        display: none !important;
    }
    #ht-sticky-bar .ht-sticky-btn {
        padding: 9px 9px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================
   تأكيد ظهور الـ sticky bar عند إضافة الـ class
   ========================================================== */
#ht-sticky-bar {
    /* تأكيد أن الـ bar مخفي في البداية */
    transform: translateY(100%);
    pointer-events: none;
}

#ht-sticky-bar.ht-sticky-bar--visible {
    transform: translateY(0) !important;
    pointer-events: auto !important;
}