/* ==========================================================================
   portal-extras.css
   Beta Ribbon + Login News Ticker
   Jordanian Customs SSO Portal
   ========================================================================== */

/* ============================================================
   1. BETA RIBBON — fixed top-left corner, all layouts
   ============================================================ */

.beta-ribbon-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    /*
     * z-index must stay BELOW mobile nav elements:
     *   mobile-phone-header  z-index: 10100
     *   mobile-nav-overlay   z-index: 10000
     *   mobile-nav-panel     z-index: 10001
     * Use 1050 — sits above regular page content but never blocks navigation.
     */
    z-index: 1050;
    pointer-events: none;
}

.beta-ribbon {
    position: absolute;
    top: 36px;
    left: -42px;
    width: 170px;
    background: linear-gradient(135deg, #b71c1c, #e53935);
    color: #ffffff;
    font-weight: 700;
    font-size: 11.5px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding: 7px 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.4px;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================================
   2. NEWS TICKER — login page only
   ============================================================ */

.news-ticker-section {
    background: #000000;
    width: 100%;
    overflow: hidden;
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    position: relative;
    flex-shrink: 0;
}

.news-ticker-inner {
    display: flex;
    align-items: stretch;
    height: 46px;
}

/* Red label badge — in RTL this appears on the physical RIGHT */
.news-ticker-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #b71c1c, #e53935);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0 14px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

/*
 * Arrow chevron pointing LEFT (into the scroll track).
 * Height = half of .news-ticker-inner height on each side:
 *   desktop default height = 46px → 23px + 23px
 * MUST be updated in every breakpoint that changes .news-ticker-inner height.
 */
.news-ticker-label::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 14px solid #e53935;
}

.ticker-label-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/*
 * Scrolling track.
 * dir="ltr" is set on the HTML element so that in an RTL page the slide
 * still lays out physically left-to-right, making translateX(-50%) reliable
 * regardless of the page's writing direction.
 */
.news-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

/*
 * Slide wrapper injected by JS — contains two identical copies of the content.
 * The JS-injected @keyframes translates the slide left by exactly ONE copy's
 * pixel width, then loops back to 0 — seamless infinite scroll.
 */
.news-ticker-slide {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    will-change: transform;
    /*
     * NO static transform here.
     * A static transform: translateZ(0) conflicts with the JS-injected
     * @keyframes animation that also sets `transform`, causing the animation
     * to be ignored on some browsers.  `will-change: transform` is enough
     * to promote the element to a GPU compositing layer.
     */
}

/* Each original content block (original + clone share this class) */
.news-ticker-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-item {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0 36px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-divider-logo {
    height: 24px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.90;
    vertical-align: middle;
    margin: 0 14px;
}

/*
 * @keyframes for the ticker is intentionally NOT defined here.
 * The JS (window 'load' handler in _LoginLayout.cshtml) injects a
 * pixel-exact rule like:
 *   @keyframes tickerScrollPx { from { transform: translateX(0); }
 *                               to   { transform: translateX(-NNNpx); } }
 * Using an absolute pixel value avoids any percentage-resolution ambiguity
 * that can occur on inline-flex elements before or after image load.
 */

/* ============================================================
   3. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Large tablets (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Slightly smaller ribbon on all tablets */
    .beta-ribbon-wrapper {
        width: 135px;
        height: 135px;
    }

    .beta-ribbon {
        top: 32px;
        left: -40px;
        width: 160px;
        font-size: 11px;
        padding: 6px 0;
    }
}

/* ── Small tablets (≤ 768px) ── */
@media (max-width: 768px) {

    .beta-ribbon-wrapper {
        width: 125px;
        height: 125px;
    }

    .beta-ribbon {
        top: 30px;
        left: -39px;
        width: 155px;
        font-size: 10.5px;
        padding: 6px 0;
    }

    .ticker-item {
        font-size: 13px;
        padding: 0 28px;
    }

    .ticker-divider-logo {
        margin: 0 10px;
    }
}

/* ── Phone boundary (≤ 600px) ──
      On NON-LOGIN layouts (.enhanced-layout, .dashboard-layout, etc.) the fixed
      .mobile-phone-header (z-index:10100) fills the top strip and covers the
      ribbon's top-left position.  Relocate the ribbon to the BOTTOM-LEFT corner
      for those layouts so it remains visible without blocking navigation.
      The LOGIN layout body (.unselectable-text) has no phone header, so its
      ribbon stays at the top-left — handled by the generic rules above.        ── */
@media (max-width: 600px) {

    /* Generic: shrink wrapper (applies to all layouts) */
    .beta-ribbon-wrapper {
        width: 115px;
        height: 115px;
    }

    .beta-ribbon {
        top: 27px;
        left: -38px;
        width: 148px;
        font-size: 10px;
        padding: 5px 0;
    }

    /* Non-login layouts: flip ribbon to bottom-left corner */
    body.enhanced-layout .beta-ribbon-wrapper,
    body.dashboard-layout .beta-ribbon-wrapper,
    body.identity-layout .beta-ribbon-wrapper,
    body.main-layout .beta-ribbon-wrapper {
        top: auto;
        bottom: 0;
    }

    body.enhanced-layout .beta-ribbon,
    body.dashboard-layout .beta-ribbon,
    body.identity-layout .beta-ribbon,
    body.main-layout .beta-ribbon {
        top: auto;
        bottom: 28px;
        transform: rotate(45deg); /* +45deg positions the stripe in the bottom-left corner */
    }
}

/* ── Small phones (≤ 576px): also adjusts ticker height ── */
@media (max-width: 576px) {

    /* ---- Ribbon ---- */
    .beta-ribbon-wrapper {
        width: 110px;
        height: 110px;
    }

    .beta-ribbon {
        top: 25px;
        left: -37px;
        width: 144px;
        font-size: 9.5px;
        padding: 5px 0;
    }

    /* ---- Ticker ---- */
    .news-ticker-inner {
        height: 40px;   /* ← reduced from 46px */
    }

    /*
     * Arrow must match new height: 40px / 2 = 20px per side.
     * Failing to update this causes the chevron to overflow the ticker bar.
     */
    .news-ticker-label::after {
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        /* border-right colour unchanged */
    }

    .news-ticker-label {
        font-size: 11px;
        padding: 0 10px;
        gap: 6px;
    }

    .ticker-label-logo {
        height: 20px;
    }

    .ticker-item {
        font-size: 12px;
        padding: 0 20px;
    }

    .ticker-divider-logo {
        height: 18px;
        margin: 0 8px;
    }
}

/* ── Very small phones (≤ 400px) ── */
@media (max-width: 400px) {

    /*
     * Ribbon:
     *   LOGIN layout (.unselectable-text): no phone header → ribbon stays at
     *     top-left, visible at the small size set by the ≤576px rule above.
     *   NON-LOGIN layouts: already relocated to bottom-left by the body-class
     *     rules in the ≤600px block (higher specificity), so they remain there.
     * Nothing extra needed here — just remove the old display:none.
     */

    .news-ticker-label {
        font-size: 10px;
        padding: 0 8px;
        gap: 4px;
    }

    .ticker-label-logo {
        display: none;   /* save space; text label "أخبار" is enough */
    }

    .ticker-item {
        font-size: 11px;
        padding: 0 12px;
    }

    .ticker-divider-logo {
        height: 14px;
        margin: 0 5px;
    }
}