/* ═══════════════════════════════════════════════════════════════
   Mobile Enhancements — TenderGlobal
   1. Hide breadcrumbs / user pathway on mobile
   2. Hide floating communication icons on mobile
   3. App Download Smart Banner (one-time dismissible popup)
   4. Mobile QA fixes (320–768px)
   5. Mobile Header (top) & Bottom Navigation Bar
   6. TendersSearch Hero Mobile Compaction
   7. Homepage-specific mobile hides
   8. Compact footer on mobile
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Hide breadcrumbs / pathway on mobile ────────────────── */
@media (max-width: 768px) {
    .breadcrumbs,
    .breadcrumbs.pull-right,
    .sl-breadcrumb,
    .sd-breadcrumb,
    .ts-hero-breadcrumb,
    .page-title-container .breadcrumbs,
    nav[aria-label="breadcrumb"] {
        display: none !important;
    }
}

/* ── 2. Hide floating icons on mobile ───────────────────────── */
@media (max-width: 768px) {
    /* Support widget (headset FAB) */
    .support-widget {
        display: none !important;
    }

    /* UserWay accessibility widget */
    .userway_p1,
    .userway_p2,
    .userway_p3,
    .userway_p4,
    .userway_p5,
    .userway_p6,
    #userwayAccessibilityIcon,
    [data-userway],
    .uwy {
        display: none !important;
    }

    /* Scroll-to-top button */
    #scrollToTopBtn {
        display: none !important;
    }
}


/* ── 3. App Download Banner ─────────────────────────────────── */
.tg-app-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999990;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.tg-app-banner.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.tg-app-banner__inner {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 -1px 6px rgba(0, 0, 0, 0.04);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}

/* App icon */
.tg-app-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2e8795 0%, #1a5f6a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(46, 135, 149, 0.3);
}

.tg-app-banner__icon img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.tg-app-banner__icon i {
    font-size: 22px;
    color: #fff;
}

/* Text block */
.tg-app-banner__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-app-banner__title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-app-banner__subtitle {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-app-banner__stars {
    color: #f59e0b;
    font-size: 10px;
    letter-spacing: -1px;
}

/* CTA button */
.tg-app-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #2e8795 0%, #237a87 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(46, 135, 149, 0.3);
    white-space: nowrap;
}

.tg-app-banner__cta:hover,
.tg-app-banner__cta:focus {
    background: linear-gradient(135deg, #237a87 0%, #1a5f6a 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(46, 135, 149, 0.4);
    transform: translateY(-1px);
}

.tg-app-banner__cta i {
    font-size: 14px;
}

/* Close button */
.tg-app-banner__close {
    position: absolute;
    top: -10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
}

[dir="rtl"] .tg-app-banner__close {
    right: auto;
    left: 12px;
}

.tg-app-banner__close:hover {
    background: #f3f4f6;
    color: #111827;
    transform: scale(1.1);
}

/* Hide on desktop — only show on mobile */
@media (min-width: 769px) {
    .tg-app-banner {
        display: none !important;
    }
}

/* Safe area padding for iOS notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .tg-app-banner__inner {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

/* ── 4. Mobile QA fixes (320–768px) ─────────────────────────── */

/* Fix: BuyersList card grid — the 1200px :not(.view-list) selector
   has higher specificity than the plain 768px selector, forcing 2
   columns on mobile. Match specificity to ensure single column. */
@media (max-width: 768px) {
    .bl-card-grid,
    .bl-card-grid:not(.view-list) {
        grid-template-columns: 1fr !important;
    }
}

/* Fix: Services page divider-with-image overflows at ≤ 320px.
   The gem image (150px) + two divider lines create a 346px row. */
@media (max-width: 414px) {
    .service-page .divider-with-image {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .service-page .divider-with-image .divider-line {
        display: none;
    }
    .service-page .divider-with-image img {
        max-width: 120px;
        height: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════
   5. MOBILE HEADER & BOTTOM NAVIGATION BAR
   Top header: Account/Login | Logo (center) | Country Selector
   Bottom bar (fixed): Tenders | Categories | Newsletter | ☰ Hamburger
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Top Header ───────────────────────────────────────────── */

    /* Make header non-sticky and scroll normally */
    .TenderHeaderMenu-navbar {
        position: relative !important;
        top: auto !important;
        z-index: 1000 !important;
    }

    /* Compact the navbar container to a single row */
    [dir="rtl"] .TenderHeaderMenu-navContainer,
    [dir="ltr"] .TenderHeaderMenu-navContainer,
    .TenderHeaderMenu-navContainer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        min-height: 48px !important;
        flex-wrap: nowrap !important;
    }

    /* Left side: Logo + region — reorder so logo is visually centered */
    .TenderHeaderMenu-left {
        order: 2 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    /* Logo link — centered, compact */
    .TenderHeaderMenu-logoLink {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Logo image */
    .TenderHeaderMenu-logo img {
        max-height: 28px !important;
        width: auto !important;
    }

    /* Hide the locale text next to logo on mobile */
    .TenderHeaderMenu-logoLocale {
        display: none !important;
    }

    /* Region selector — compact, just flag + chevron */
    .TenderHeaderMenu-regionContainer {
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    .TenderHeaderMenu-regionSelector {
        padding: 4px !important;
        gap: 2px !important;
    }

    .TenderHeaderMenu-regionLabel,
    .TenderHeaderMenu-langLabel {
        display: none !important;
    }

    .TenderHeaderMenu-regionIcon {
        width: 22px !important;
        height: 22px !important;
    }

    /* Dividers — hide on mobile */
    .TenderHeaderMenu-leftDivider {
        display: none !important;
    }

    /* Actions area (bell) — appears next to logo */
    .TenderHeaderMenu-actions {
        order: 1 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Newsletter button in header — hide on mobile (it's in bottom bar) */
    .TenderHeaderMenu-newsletterBtn {
        display: none !important;
    }

    /* Profile dropdown button — compact avatar only, pushed to edge */
    .TenderHeaderMenu-profileDropdown {
        order: 0 !important;
        flex-shrink: 0 !important;
    }

    .TenderHeaderMenu-profileBtn {
        padding: 2px !important;
        gap: 0 !important;
    }

    .TenderHeaderMenu-profileInfo,
    .TenderHeaderMenu-profileArrow {
        display: none !important;
    }

    .TenderHeaderMenu-profileAvatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    /* Get Started button — compact, icon-like */
    .get-started-container .get-started-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .get-started-container .btn-text {
        font-size: 11px !important;
    }

    /* Bell module — compact */
    .tg-bell-header .tg-bell-btn {
        padding: 4px !important;
    }

    .tg-bell-header .tg-bell-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* Employee wheat badge — hide on mobile */
    .TenderHeaderMenu-employeeWheat {
        display: none !important;
    }

    /* Membership badge on avatar — smaller */
    .TenderHeaderMenu-membershipBadge {
        width: 14px !important;
        height: 14px !important;
    }
    .TenderHeaderMenu-membershipBadge img {
        width: 14px !important;
        height: 14px !important;
    }


    /* ── TenderCompactNav: hide entirely on mobile ────────────── */
    /* The bottom bar replaces this; no second header row needed */
    .TenderCompactNav {
        display: none !important;
    }


    /* ── Bottom Navigation Bar (fixed) ────────────────────────── */
    /* Injected by JS as #tg-mobile-bottombar, appended to body  */
    .tg-mobile-bottombar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9998 !important;
        background: #fff !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
        display: flex !important;
        align-items: stretch !important;
        min-height: 52px !important;
        padding-bottom: 0 !important;
    }

    /* iOS safe-area support */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .tg-mobile-bottombar {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }

    /* Bottom bar links */
    .tg-bottombar-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px 4px;
        color: #6b7280;
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
        border: none;
        background: transparent;
        cursor: pointer;
        line-height: 1.2;
    }

    .tg-bottombar-link:hover,
    .tg-bottombar-link:focus {
        color: #2e8795;
        text-decoration: none;
    }

    .tg-bottombar-link.is-active {
        color: #2e8795;
    }

    .tg-bottombar-link i {
        font-size: 18px;
        flex-shrink: 0;
    }

    .tg-bottombar-link span {
        line-height: 1;
    }

    /* Body padding so content isn't hidden behind fixed bar */
    body {
        padding-bottom: 60px !important;
    }
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Hide bottom bar on desktop */
@media (min-width: 769px) {
    .tg-mobile-bottombar {
        display: none !important;
    }
    /* Remove mobile body padding on desktop */
    body {
        padding-bottom: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   5b. HAMBURGER MOBILE OFF-CANVAS MENU
   When hamburger is tapped, a full off-canvas menu slides in.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Off-canvas panel — uses flexbox: topbar (pinned) + list (scrollable) */
    .tg-mobile-offcanvas {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 85vw;
        max-width: 360px;
        background: #fff;
        z-index: 10000;
        overflow: hidden;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    /* LTR: slide from left */
    [dir="ltr"] .tg-mobile-offcanvas,
    :not([dir]) .tg-mobile-offcanvas {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }
    [dir="ltr"] .tg-mobile-offcanvas.is-open,
    :not([dir]) .tg-mobile-offcanvas.is-open {
        transform: translateX(0);
    }

    /* RTL: slide from right */
    [dir="rtl"] .tg-mobile-offcanvas {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }
    [dir="rtl"] .tg-mobile-offcanvas.is-open {
        transform: translateX(0);
    }

    /* Off-canvas overlay */
    .tg-mobile-offcanvas-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .tg-mobile-offcanvas-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* ── Pinned top bar (Logo + Home + Fav + Close) ────────── */
    .tg-offcanvas-topbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
        background: #fff;
        min-height: 50px;
    }

    .tg-offcanvas-logo {
        display: flex;
        align-items: center;
    }
    .tg-offcanvas-logo img {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }

    .tg-offcanvas-topbar-spacer {
        flex: 1;
    }

    .tg-offcanvas-topbar-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: #2e8795;
        font-size: 16px;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .tg-offcanvas-topbar-icon:hover,
    .tg-offcanvas-topbar-icon:focus {
        background: rgba(46,135,149,0.08);
        color: #1a5f6a;
        text-decoration: none;
    }

    /* Close button (X) in top bar — slightly different color */
    .tg-offcanvas-close {
        color: #6b7280;
    }
    .tg-offcanvas-close:hover {
        background: #f3f4f6;
        color: #374151;
    }

    /* ── Scrollable menu list ────────────────────────────────── */
    .tg-offcanvas-list {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 16px;
    }

    /* Off-canvas menu item */
    .tg-offcanvas-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 20px;
        color: #374151;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.15s;
    }
    .tg-offcanvas-item:hover {
        background: rgba(46,135,149,0.06);
        color: #2e8795;
        text-decoration: none;
    }
    .tg-offcanvas-item i {
        width: 20px;
        text-align: center;
        color: #2e8795;
        font-size: 15px;
        flex-shrink: 0;
    }

    /* Off-canvas section heading */
    .tg-offcanvas-heading {
        padding: 14px 20px 4px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #9ca3af;
    }
    /* First heading — no top padding */
    .tg-offcanvas-list .tg-offcanvas-heading:first-child {
        padding-top: 8px;
    }
}


/* Hide off-canvas on desktop */
@media (min-width: 769px) {
    .tg-mobile-offcanvas,
    .tg-mobile-offcanvas-overlay {
        display: none !important;
    }
}


/* ── 6. TendersSearch Hero Mobile Compaction ─────────────────── */
@media (max-width: 768px) {
    .ts-hero {
        padding: 12px 0 10px !important;
    }
    .ts-hero::before,
    .ts-hero::after {
        display: none !important;
    }
    .ts-hero-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }
    .ts-hero-inner {
        flex-direction: row !important;
        text-align: start !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .ts-hero .ts-hero-text h1,
    .ts-hero .ts-hero-text h2,
    .ts-hero .ts-hero-text h3,
    .ts-hero .ts-hero-text h4,
    .ts-hero .ts-hero-text h5,
    .ts-hero .ts-hero-text h6,
    .ts-hero .ts-hero-text .entry-title {
        font-size: 18px !important;
    }
    .ts-hero-text p {
        font-size: 12px !important;
        margin: 2px 0 0 !important;
    }
    .ts-hero-pills {
        display: none !important;
    }
}


/* ── 7. Homepage-specific mobile hides ──────────────────────── */
@media (max-width: 768px) {
    /* Hide notification bell on homepage mobile */
    .default-page .tg-bell-module,
    .default-page .tg-bell-header {
        display: none !important;
    }

    /* Hide buyer/publisher rep banner on homepage mobile */
    .default-page .publisher-rep-banner,
    .default-page #dvPublisherRepBanner {
        display: none !important;
    }

    /* Hide buyer badge / publisher portal flag on homepage mobile */
    .default-page .TenderHeaderMenu-publisherPortalItem {
        display: none !important;
    }

    /* Hide notification center section (cards) on homepage mobile */
    .default-page #NotificationCenter {
        display: none !important;
    }
}


/* ── 8. Compact footer on mobile ────────────────────────────── */
@media (max-width: 768px) {
    .tg-footer {
        padding: 16px 0 0 !important;
        margin-top: 16px !important;
    }

    .tg-footer__container {
        padding: 0 12px !important;
    }

    .tg-footer__main {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Brand column — very compact */
    .tg-footer__brand {
        text-align: center !important;
        padding-bottom: 12px !important;
    }

    .tg-footer__tagline {
        font-size: 11px !important;
        margin: 2px 0 6px !important;
    }

    .tg-footer__logo {
        max-height: 24px !important;
    }

    /* Hide app store buttons in brand section — mobile users already have the app */
    .tg-footer__apps {
        display: none !important;
    }

    /* Hide the link columns on mobile — navigation is via bottom bar */
    .tg-footer__col:not(.tg-footer__brand):not(.tg-footer__contact) {
        display: none !important;
    }

    /* Compact contact section */
    .tg-footer__contact {
        padding: 10px 0 !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
    }

    .tg-footer__heading {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .tg-footer__contact-block {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .tg-footer__contact-label {
        font-size: 10px !important;
    }

    .tg-footer__contact-row {
        font-size: 11px !important;
        gap: 4px !important;
    }

    /* Hide the decorative headset icon */
    .tg-footer__contact-icon,
    .tg-footer__contact > img,
    .tg-footer__contact .tg-footer__contact-block > img {
        display: none !important;
    }

    /* Base/legal row — includes bottom padding to clear the fixed bottom bar */
    .tg-footer__base {
        padding: 8px 0 12px !important;
        margin-top: 8px !important;
        font-size: 10px !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .tg-footer__social {
        gap: 12px !important;
        justify-content: center !important;
    }

    .tg-footer__social a {
        font-size: 14px !important;
    }

    .tg-footer__legal {
        font-size: 10px !important;
    }

    .tg-footer__copy {
        font-size: 10px !important;
    }
}


/* ── 8b. Compact LEGACY footer (Default.aspx dynamic-footer) ── */
@media (max-width: 768px) {
    .dynamic-footer {
        padding: 12px 0 0 !important;
        margin-top: 16px !important;
    }

    .dynamic-footer .footer-wave {
        display: none !important;
    }

    .dynamic-footer .footer-container {
        padding: 0 12px !important;
    }

    /* Compact header — smaller logo and flags */
    .dynamic-footer .footer-header {
        padding: 8px 0 !important;
        gap: 8px !important;
    }

    .dynamic-footer .footer-logo img {
        max-height: 24px !important;
    }

    .dynamic-footer .footer-header > img {
        max-width: 140px !important;
    }

    /* Hide all link columns (Shortcuts, Customers, Publishers) */
    .dynamic-footer .footer-grid {
        display: none !important;
    }

    /* Compact contact/social section */
    .dynamic-footer .footer-contact-card {
        padding: 10px 12px !important;
        margin: 8px 0 !important;
        border-radius: 8px !important;
    }

    .dynamic-footer .footer-contact-card img {
        max-width: 40px !important;
    }

    .dynamic-footer .footer-contact-info {
        font-size: 12px !important;
    }

    /* Compact social and legal */
    .dynamic-footer .footer-bottom {
        padding: 8px 0 !important;
        font-size: 10px !important;
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .dynamic-footer .footer-social a {
        font-size: 14px !important;
    }

    /* Payment logos — smaller */
    .dynamic-footer .footer-payments,
    .dynamic-footer .payment-logos {
        gap: 4px !important;
    }

    .dynamic-footer .footer-payments img,
    .dynamic-footer .payment-logos img {
        max-height: 20px !important;
    }

    /* Add padding to clear the fixed bottom bar */
    .dynamic-footer {
        padding-bottom: 12px !important;
    }
}


/* ── 9. Newsletter Mobile Fixes ─────────────────────────────── */
@media (max-width: 768px) {
    /* Fix: Tender card date/deadline row overflows horizontally.
       Three col-sm-* children (4+6+2=12) each get forced to width: 50%
       on mobile, totalling 150% — the third col (location) is clipped.
       Allow wrapping so location drops to its own line. */
    article.box.demo-card-hover .second-row.border-bl .time,
    article.box.demo-card-hover .second-row .time,
    .flight-list .time {
        flex-flow: row wrap !important;
    }

    /* Location column (col-sm-2) — when wrapped, give it full width */
    article.box.demo-card-hover .second-row .time .col-sm-2 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Location — center the flag+text nicely when wrapped */
    article.box.demo-card-hover .tender-location-enhanced {
        justify-content: flex-end !important;
        padding: 4px 0 !important;
    }

    /* Fix: Deadline badge (منتهي) aligns to LTR start instead of RTL end
       in the column flex layout. Use flex-start which in RTL column = right. */
    [dir="rtl"] article.box.demo-card-hover .deadline-info-inline {
        align-items: flex-start !important;
    }

    /* Fix: Calendar popup (caleran) overflows left side on mobile.
       The popup is 470px wide and anchored to the right-side calendar
       button, causing it to clip off-screen at negative left. */
    body .caleran-container.caleran-popup {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 0) !important;
        max-width: 95vw !important;
    }
}