/**
 * ISAB Textbanner Frontend Styles
 */

.isab-tb-banner {
    --isab-tb-bg: #005BAA;
    --isab-tb-text: #ffffff;
    --isab-tb-font-size: 14px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--isab-tb-font-size);
}

/* ==========================================
   MARQUEE (Classic scrolling)
========================================== */
.isab-tb-marquee {
    background: var(--isab-tb-bg);
    color: var(--isab-tb-text);
    padding: 1em 0;
    overflow: hidden;
    position: relative;
}

.isab-tb-marquee-track {
    display: flex;
    width: max-content;
    animation: isab-tb-marquee 20s linear infinite;
}

.isab-tb-marquee-content {
    display: flex;
    align-items: center;
    gap: 60px;
    padding-right: 60px;
}

.isab-tb-marquee-content span {
    font-size: 1em;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.isab-tb-marquee-content span::before {
    content: '\2605';
    font-size: 0.7em;
    opacity: 0.6;
}

/* Speed variants */
.isab-tb-speed-slow .isab-tb-marquee-track {
    animation-duration: 35s;
}

.isab-tb-speed-normal .isab-tb-marquee-track {
    animation-duration: 20s;
}

.isab-tb-speed-fast .isab-tb-marquee-track {
    animation-duration: 12s;
}

@keyframes isab-tb-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.isab-tb-marquee:hover .isab-tb-marquee-track {
    animation-play-state: paused;
}

/* ==========================================
   FADE (Crossfade between messages)
========================================== */
.isab-tb-fade {
    background: linear-gradient(135deg, var(--isab-tb-bg) 0%, color-mix(in srgb, var(--isab-tb-bg), #000 20%) 100%);
    color: var(--isab-tb-text);
    padding: 1em 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.isab-tb-fade-messages {
    position: relative;
    height: 1.5em;
}

.isab-tb-fade-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0;
    animation: isab-tb-fade 8s infinite;
}

/* 2 messages */
.isab-tb-fade[data-count="2"] .isab-tb-fade-message {
    animation-duration: 8s;
}
.isab-tb-fade[data-count="2"] .isab-tb-fade-message:nth-child(2) {
    animation-delay: 4s;
}

/* 3 messages */
.isab-tb-fade[data-count="3"] .isab-tb-fade-message {
    animation-duration: 12s;
}
.isab-tb-fade[data-count="3"] .isab-tb-fade-message:nth-child(2) {
    animation-delay: 4s;
}
.isab-tb-fade[data-count="3"] .isab-tb-fade-message:nth-child(3) {
    animation-delay: 8s;
}

/* 4 messages */
.isab-tb-fade[data-count="4"] .isab-tb-fade-message {
    animation-duration: 16s;
}
.isab-tb-fade[data-count="4"] .isab-tb-fade-message:nth-child(2) {
    animation-delay: 4s;
}
.isab-tb-fade[data-count="4"] .isab-tb-fade-message:nth-child(3) {
    animation-delay: 8s;
}
.isab-tb-fade[data-count="4"] .isab-tb-fade-message:nth-child(4) {
    animation-delay: 12s;
}

/* Speed variants for fade */
.isab-tb-speed-slow.isab-tb-fade .isab-tb-fade-message {
    animation-duration: 12s;
}
.isab-tb-speed-slow.isab-tb-fade[data-count="2"] .isab-tb-fade-message:nth-child(2) {
    animation-delay: 6s;
}

.isab-tb-speed-fast.isab-tb-fade .isab-tb-fade-message {
    animation-duration: 5s;
}
.isab-tb-speed-fast.isab-tb-fade[data-count="2"] .isab-tb-fade-message:nth-child(2) {
    animation-delay: 2.5s;
}

@keyframes isab-tb-fade {
    0%, 45% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* ==========================================
   SLIDE (Slide up/down)
========================================== */
.isab-tb-slide {
    background: var(--isab-tb-bg);
    color: var(--isab-tb-text);
    padding: 1em 20px;
    text-align: center;
    overflow: hidden;
}

.isab-tb-slide-messages {
    position: relative;
    height: 1.5em;
}

.isab-tb-slide-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(100%);
    animation: isab-tb-slide 8s infinite;
}

.isab-tb-slide[data-count="2"] .isab-tb-slide-message:nth-child(2) {
    animation-delay: 4s;
}

.isab-tb-slide[data-count="3"] .isab-tb-slide-message {
    animation-duration: 12s;
}
.isab-tb-slide[data-count="3"] .isab-tb-slide-message:nth-child(2) {
    animation-delay: 4s;
}
.isab-tb-slide[data-count="3"] .isab-tb-slide-message:nth-child(3) {
    animation-delay: 8s;
}

.isab-tb-slide[data-count="4"] .isab-tb-slide-message {
    animation-duration: 16s;
}
.isab-tb-slide[data-count="4"] .isab-tb-slide-message:nth-child(2) {
    animation-delay: 4s;
}
.isab-tb-slide[data-count="4"] .isab-tb-slide-message:nth-child(3) {
    animation-delay: 8s;
}
.isab-tb-slide[data-count="4"] .isab-tb-slide-message:nth-child(4) {
    animation-delay: 12s;
}

@keyframes isab-tb-slide {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    5%, 45% {
        opacity: 1;
        transform: translateY(0);
    }
    50%, 100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* ==========================================
   TYPEWRITER
========================================== */
.isab-tb-typewriter {
    background: var(--isab-tb-bg);
    color: var(--isab-tb-text);
    padding: 1em 20px;
    text-align: center;
}

.isab-tb-typewriter-messages {
    position: relative;
    height: 1.5em;
    display: flex;
    justify-content: center;
}

.isab-tb-typewriter-message {
    position: absolute;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    animation: isab-tb-typewriter 10s infinite;
}

.isab-tb-typewriter[data-count="2"] .isab-tb-typewriter-message:nth-child(2) {
    animation-delay: 5s;
}

.isab-tb-typewriter[data-count="3"] .isab-tb-typewriter-message {
    animation-duration: 15s;
}
.isab-tb-typewriter[data-count="3"] .isab-tb-typewriter-message:nth-child(2) {
    animation-delay: 5s;
}
.isab-tb-typewriter[data-count="3"] .isab-tb-typewriter-message:nth-child(3) {
    animation-delay: 10s;
}

.isab-tb-typewriter[data-count="4"] .isab-tb-typewriter-message {
    animation-duration: 20s;
}
.isab-tb-typewriter[data-count="4"] .isab-tb-typewriter-message:nth-child(2) {
    animation-delay: 5s;
}
.isab-tb-typewriter[data-count="4"] .isab-tb-typewriter-message:nth-child(3) {
    animation-delay: 10s;
}
.isab-tb-typewriter[data-count="4"] .isab-tb-typewriter-message:nth-child(4) {
    animation-delay: 15s;
}

@keyframes isab-tb-typewriter {
    0% {
        opacity: 1;
        width: 0;
    }
    2% {
        opacity: 1;
        width: 0;
    }
    25% {
        opacity: 1;
        width: 100%;
    }
    45% {
        opacity: 1;
        width: 100%;
    }
    48% {
        opacity: 0;
        width: 100%;
    }
    100% {
        opacity: 0;
        width: 0;
    }
}

/* ==========================================
   MARQUEE WITH ICONS
========================================== */
.isab-tb-marquee-icons {
    background: var(--isab-tb-bg);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1.1em 0;
    overflow: hidden;
}

.isab-tb-marquee-icons .isab-tb-marquee-track {
    animation: isab-tb-marquee 25s linear infinite;
}

.isab-tb-marquee-icons .isab-tb-marquee-content {
    gap: 50px;
    padding-right: 50px;
}

.isab-tb-marquee-icons .isab-tb-marquee-content span::before {
    display: none;
}

.isab-tb-marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--isab-tb-text);
    font-size: 1em;
    font-weight: 500;
    white-space: nowrap;
}

.isab-tb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.isab-tb-icon svg {
    width: 1.4em;
    height: 1.4em;
    opacity: 0.8;
}

/* ==========================================
   STATIC WITH CTA
========================================== */
.isab-tb-static-cta {
    background: var(--isab-tb-bg);
    color: var(--isab-tb-text);
    padding: 0.85em 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.isab-tb-static-cta p {
    font-size: 1em;
    font-weight: 500;
    margin: 0;
}

.isab-tb-cta-btn {
    background: var(--isab-tb-text);
    color: var(--isab-tb-bg);
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.5em 1.1em;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.isab-tb-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 600px) {
    .isab-tb-marquee-content,
    .isab-tb-marquee-icons .isab-tb-marquee-content {
        gap: 40px;
        padding-right: 40px;
    }

    .isab-tb-static-cta {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}