/* ============================================================
   Scrolling Ticker Bar Pro — Frontend Styles
   ============================================================ */

/* Google Font loaded dynamically by PHP */

/* ── Bar ── */
#stb-ticker-bar {
    position: relative;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    width: 100%;
    height: var(--stb-height, 44px);
    background: var(--stb-bg, linear-gradient(135deg,#1a1a2e 0%,#16213e 100%));
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
#stb-ticker-bar.stb-is-sticky { position: fixed; }

/* ── Inner ── */
.stb-ticker-inner {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* fade edges */
.stb-ticker-inner::before,
.stb-ticker-inner::after {
    content: '';
    position: absolute; top: 0;
    width: 60px; height: 100%;
    z-index: 2; pointer-events: none;
}
.stb-ticker-inner::before {
    right: 0;
    background: linear-gradient(to left, var(--stb-bg,#1a1a2e), transparent);
}
.stb-ticker-inner::after {
    left: 0;
    background: linear-gradient(to right, var(--stb-bg,#1a1a2e), transparent);
}

/* ── Track ── */
.stb-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    font-family: var(--stb-font-family, 'Tajawal', sans-serif);
    font-size: var(--stb-font-size, 14px);
    font-weight: var(--stb-font-weight, 500);
    letter-spacing: var(--stb-letter-spacing, 0.5px);
    color: var(--stb-text, #ffffff);
}

/* RTL scroll */
.stb-dir-rtl .stb-ticker-track {
    animation: stb-scroll-rtl var(--stb-speed, 30s) linear infinite;
}
/* LTR scroll */
.stb-dir-ltr .stb-ticker-track {
    animation: stb-scroll-ltr var(--stb-speed, 30s) linear infinite;
}

/* pause on hover */
#stb-ticker-bar.stb-paused .stb-ticker-track {
    animation-play-state: paused;
}

/* ── Items ── */
.stb-item {
    padding: 0 24px;
    display: inline-flex; align-items: center;
    height: var(--stb-height, 44px);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.stb-separator {
    color: var(--stb-sep, #e94560);
    font-size: 1.1em;
    display: inline-flex; align-items: center;
    height: var(--stb-height, 44px);
    opacity: 0.9;
    text-shadow: 0 0 8px var(--stb-sep, #e94560);
}

/* ── Close button ── */
.stb-close-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: var(--stb-text, #ffffff);
    width: 30px; height: 30px;
    border-radius: 50%; cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 10px; flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    line-height: 1; padding: 0;
}
.stb-close-btn:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

/* ── Animations ── */
@keyframes stb-scroll-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}
@keyframes stb-scroll-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Hide bar ── */
@keyframes stb-slide-up {
    from { height: var(--stb-height, 44px); opacity: 1; }
    to   { height: 0; opacity: 0; padding: 0; }
}
#stb-ticker-bar.stb-hiding {
    animation: stb-slide-up 0.4s ease forwards;
}

/* ============================================================
   MODE: FADE & TYPEWRITER — hide edge fades
   ============================================================ */
#stb-ticker-bar.stb-mode-fade .stb-ticker-inner::before,
#stb-ticker-bar.stb-mode-fade .stb-ticker-inner::after,
#stb-ticker-bar.stb-mode-typewriter .stb-ticker-inner::before,
#stb-ticker-bar.stb-mode-typewriter .stb-ticker-inner::after {
    display: none;
}

.stb-single-msg {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    height: 100%; padding: 0 20px;
    text-align: center; overflow: hidden;
}
.stb-msg-text {
    font-family: var(--stb-font-family, 'Tajawal', sans-serif);
    font-size: var(--stb-font-size, 14px);
    font-weight: var(--stb-font-weight, 500);
    letter-spacing: var(--stb-letter-spacing, 0.5px);
    color: var(--stb-text, #ffffff);
    display: inline-block; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.stb-msg-text.stb-fade-in  { animation: stb-fade-in  0.6s ease forwards; }
.stb-msg-text.stb-fade-out { animation: stb-fade-out 0.5s ease forwards; }
@keyframes stb-fade-in  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes stb-fade-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }

/* ============================================================
   MODE: TYPEWRITER
   ============================================================ */
#stb-ticker-bar.stb-mode-typewriter .stb-msg-text {
    overflow: hidden; white-space: nowrap;
    border-left: 2px solid var(--stb-sep, #e94560);
    display: inline-block;
}
#stb-ticker-bar.stb-mode-typewriter .stb-msg-text.stb-typing {
    animation: stb-cursor-blink 0.7s step-end infinite;
}
@keyframes stb-cursor-blink {
    0%,100% { border-color: var(--stb-sep, #e94560); }
    50%      { border-color: transparent; }
}

/* ============================================================
   MODE: BOUNCE
   ============================================================ */
#stb-ticker-bar.stb-mode-bounce .stb-ticker-track {
    animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55) !important;
}
#stb-ticker-bar.stb-mode-bounce.stb-dir-rtl .stb-ticker-track {
    animation-name: stb-scroll-rtl-bounce !important;
}
#stb-ticker-bar.stb-mode-bounce.stb-dir-ltr .stb-ticker-track {
    animation-name: stb-scroll-ltr-bounce !important;
}
@keyframes stb-scroll-rtl-bounce {
    0%   { transform: translateX(0); }
    5%   { transform: translateX(1%); }
    95%  { transform: translateX(49%); }
    100% { transform: translateX(50%); }
}
@keyframes stb-scroll-ltr-bounce {
    0%   { transform: translateX(0); }
    5%   { transform: translateX(-1%); }
    95%  { transform: translateX(-49%); }
    100% { transform: translateX(-50%); }
}
#stb-ticker-bar.stb-mode-bounce .stb-separator {
    animation: stb-shimmer 2s ease-in-out infinite;
}
@keyframes stb-shimmer {
    0%,100% { opacity:0.7; text-shadow:0 0 8px var(--stb-sep,#e94560); }
    50%      { opacity:1;   text-shadow:0 0 20px var(--stb-sep,#e94560),0 0 40px var(--stb-sep,#e94560); }
}