/* ==========================================================================
   tg-mobile-header (AR / RTL)
   --------------------------------------------------------------------------
   Namespaced styles for the public mobile header (Arabic theme).
   Mirrors WebEn but uses logical properties so RTL is correct.

   Selectors:
     .tg-mobile-menu-trigger    -> hamburger / menu opener (NEVER animates)
     .tg-mobile-notify-btn      -> notification opener (own dot + pulse)
     .tg-mobile-notify-dot      -> red status dot (notify only)
     .tg-mobile-notify-pulse    -> attention pulse (notify only)
     .tg-web-header-actions     -> top-right action group context

   Loaded by: Web.Master.vb (added after tender-header.css)
   ========================================================================== */

.tg-web-header-actions {
    position: relative;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Mobile MENU trigger (hamburger) ──────────────────────────────────── */
.tg-mobile-menu-trigger {
    position: relative;
    z-index: 1051;
}

.tg-mobile-menu-trigger,
.tg-mobile-menu-trigger * {
    animation: none !important;
}

/* Defensive: kill any legacy notification animation on the menu trigger */
.tg-mobile-menu-trigger.has-notif i,
.tg-mobile-menu-trigger.is-ringing i,
.tg-mobile-menu-trigger.has-notif .menu-notif-dot,
.tg-mobile-menu-trigger.is-ringing .menu-notif-dot {
    animation: none !important;
}

.tg-mobile-menu-trigger .menu-notif-dot,
.tg-mobile-menu-trigger .tg-mobile-notify-dot {
    display: none !important;
}

/* ── Mobile NOTIFICATION trigger ──────────────────────────────────────── */
/* High specificity + !important on color tokens because legacy style.css
   sets `button { background: #98ce44 }` for ALL buttons. */
button.tg-mobile-notify-btn {
    position: relative;
    z-index: 1051;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    border: none !important;
    background: #e4eff1 !important;
    color: #2e8795 !important;
    text-decoration: none;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    font-size: inherit !important;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

button.tg-mobile-notify-btn:hover,
button.tg-mobile-notify-btn:focus-visible {
    background: #d3e6e9 !important;
    color: #1d5c67 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    outline: none;
}

button.tg-mobile-notify-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(46, 135, 149, 0.30);
}

button.tg-mobile-notify-btn i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}

/* Red status dot — RTL safe via logical property */
.tg-mobile-notify-dot {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    display: none;
}

.tg-mobile-notify-btn[data-has-notif="true"] .tg-mobile-notify-dot {
    display: block;
}

/* Attention pulse — only on notify button */
.tg-mobile-notify-btn[data-has-notif="true"] .tg-mobile-notify-pulse {
    animation: tg-mobile-notify-pulse-rtl 1.6s ease-in-out infinite;
    transform-origin: top center;
    display: inline-block;
}

@keyframes tg-mobile-notify-pulse-rtl {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-12deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-7deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(-3deg); }
    60% { transform: rotate(1deg); }
}

@keyframes tg-mobile-notify-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.9; }
}

.tg-mobile-notify-btn[data-has-notif="true"] .tg-mobile-notify-dot {
    animation: tg-mobile-notify-dot-pulse 1.6s ease-in-out infinite;
}

/* ── Mobile-only display rules ────────────────────────────────────────── */
@media (max-width: 992px) {
    .tg-mobile-notify-btn[data-has-notif="true"] {
        display: inline-flex;
    }
}

@media (min-width: 993px) {
    .tg-mobile-notify-btn {
        display: none !important;
    }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .tg-mobile-notify-btn[data-has-notif="true"] .tg-mobile-notify-pulse,
    .tg-mobile-notify-btn[data-has-notif="true"] .tg-mobile-notify-dot {
        animation: none !important;
    }
}