/* ==========================================
   ULTRAKIT POST TICKER — Premium
   6 Ticker Styles × 2 Modes (Marquee / Auto-Rotate) × Live Badge
   ========================================== */

.ultrakit-ptk-wrapper {
    --ultrakit-ptk-accent: #e63946;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px 14px 20px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    box-sizing: border-box;
    /* Keep the badge/track order deterministic even if the page or
       site language is RTL — badge position is controlled explicitly
       below via the Badge Position setting, not by page direction. */
    direction: ltr;
    overflow: hidden;
}

.ultrakit-ptk-no-posts { text-align: center; color: #aaa; padding: 16px; }

/* ==========================================
   BADGE
   ========================================== */
.ultrakit-ptk-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    order: 0;
    background: var(--ultrakit-ptk-accent);
    color: #ffffff;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ultrakit-ptk-badge-icon { font-size: 13px; line-height: 1; }

/* Badge Position — forces order regardless of item markup order */
.ultrakit-ptk-badge-pos-left .ultrakit-ptk-badge  { order: -1; }
.ultrakit-ptk-badge-pos-right .ultrakit-ptk-badge { order: 3; }
/* badge-pos-none: no override, natural document order (badge first) */

.ultrakit-ptk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
    flex-shrink: 0;
}
.ultrakit-ptk-dot::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.55;
    animation: ultrakit-ptk-pulse 1.6s ease-out infinite;
}
@keyframes ultrakit-ptk-pulse {
    0%   { transform: scale(0.5); opacity: 0.55; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================
   MARQUEE MODE
   ========================================== */
.ultrakit-ptk-marquee-outer { overflow: hidden; flex: 1; min-width: 0; }
.ultrakit-ptk-marquee-track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: ultrakit-ptk-scroll-left var(--ultrakit-ptk-speed, 35s) linear infinite;
}
.ultrakit-ptk-marquee-track.ultrakit-ptk-dir-right {
    animation-name: ultrakit-ptk-scroll-right;
}
.ultrakit-ptk-wrapper[data-pause="yes"] .ultrakit-ptk-marquee-outer:hover .ultrakit-ptk-marquee-track {
    animation-play-state: paused;
}
@keyframes ultrakit-ptk-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ultrakit-ptk-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.ultrakit-ptk-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.ultrakit-ptk-separator {
    color: #cccccc;
    font-size: 12px;
    flex-shrink: 0;
    margin: 0 2px;
}

.ultrakit-ptk-cat {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ultrakit-ptk-accent);
}
.ultrakit-ptk-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    transition: color 0.2s ease;
}
.ultrakit-ptk-date {
    font-size: 12px;
    color: #999999;
}

/* ==========================================
   ROTATOR MODE (one at a time)
   ========================================== */
.ultrakit-ptk-rotator-outer {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    height: 22px;
}
.ultrakit-ptk-rotator-track { position: relative; width: 100%; height: 100%; }
.ultrakit-ptk-rotator-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
}
.ultrakit-ptk-rotator-item.is-active { opacity: 1; pointer-events: auto; position: relative; }

/* Slide-up transition */
.ultrakit-ptk-trans-slide-up .ultrakit-ptk-rotator-item {
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.ultrakit-ptk-trans-slide-up .ultrakit-ptk-rotator-item.is-active { transform: translateY(0); }
.ultrakit-ptk-trans-slide-up .ultrakit-ptk-rotator-item.is-leaving { transform: translateY(-100%); opacity: 0; }

/* Fade transition */
.ultrakit-ptk-trans-fade .ultrakit-ptk-rotator-item { transition: opacity 0.5s ease; }

.ultrakit-ptk-rotator-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ultrakit-ptk-arrow {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box;
    color: #999999 !important;
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.ultrakit-ptk-arrow:hover { color: var(--ultrakit-ptk-accent) !important; }
.ultrakit-ptk-arrow-icon { width: 16px; height: 16px; display: block; pointer-events: none; flex-shrink: 0; }

/* ==========================================
   TICKER STYLES
   ========================================== */

/* Style 1: Classic Red Badge — default (white bar, red badge) */

/* Style 2: Dark Mode */
.pt-style-2 { background: #1a1a2e; }
.pt-style-2 .ultrakit-ptk-title { color: #ffffff; }
.pt-style-2 .ultrakit-ptk-date { color: #8888aa; }
.pt-style-2 .ultrakit-ptk-separator { color: #4a4a68; }
.pt-style-2 .ultrakit-ptk-arrow { color: #8888aa !important; }

/* Style 3: Minimal Borderless */
.pt-style-3 {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #ececf2;
    border-radius: 0 !important;
    padding-left: 4px;
}
.pt-style-3 .ultrakit-ptk-badge {
    background: transparent;
    color: var(--ultrakit-ptk-accent);
    padding: 0;
}
.pt-style-3 .ultrakit-ptk-dot { background: var(--ultrakit-ptk-accent); }
.pt-style-3 .ultrakit-ptk-dot::before { background: var(--ultrakit-ptk-accent); }

/* Style 4: Gradient Badge */
.pt-style-4 .ultrakit-ptk-badge {
    background: linear-gradient(135deg, var(--ultrakit-ptk-accent) 0%, #ff8fa3 100%);
}

/* Style 5: Boxed Card */
.pt-style-5 {
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    padding-left: 6px;
}
.pt-style-5 .ultrakit-ptk-badge { border-radius: 999px; }

/* Style 6: Outlined */
.pt-style-6 {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid #e6e6ee;
}
.pt-style-6 .ultrakit-ptk-badge {
    background: transparent;
    color: var(--ultrakit-ptk-accent);
    border: 1.5px solid var(--ultrakit-ptk-accent);
    padding: 5px 14px;
}
.pt-style-6 .ultrakit-ptk-dot { background: var(--ultrakit-ptk-accent); }
.pt-style-6 .ultrakit-ptk-dot::before { background: var(--ultrakit-ptk-accent); }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 600px) {
    .ultrakit-ptk-wrapper { gap: 12px; padding-right: 12px; }
    .ultrakit-ptk-badge { padding: 6px 12px; font-size: 11px; }
    .ultrakit-ptk-title { font-size: 13px; }
}