/**
 * Vina Derma - Marquee Widget Styles
 *
 * @since 1.0.0
 */

.elementor-widget-vina_marquee .marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: block;
    width: 100%;
    background: linear-gradient(to left, #0F1E2F, #1A3148, #0F1E2F);
    color: white;
    padding: 10px 0;
}

.elementor-widget-vina_marquee .marquee-content {
    display: inline-block;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    font-size: 0.875rem;
    font-weight: 500;
}

.elementor-widget-vina_marquee .marquee--rtl .marquee-content {
    animation: vina-marquee-rtl var(--marquee-speed, 28s) linear infinite;
}

.elementor-widget-vina_marquee .marquee--ltr .marquee-content {
    animation: vina-marquee-ltr var(--marquee-speed, 28s) linear infinite;
}

@keyframes vina-marquee-rtl {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes vina-marquee-ltr {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.elementor-widget-vina_marquee .marquee-container:hover .marquee-content {
    animation-play-state: paused !important;
}

.elementor-widget-vina_marquee .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
    margin: 0 var(--margin-items, 32px);
}

.elementor-widget-vina_marquee .marquee-item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    margin-inline-start: var(--margin-items, 32px);
    border-radius: 50%;
    background-color: var(--dot-color, #E8C4B8);
    flex-shrink: 0;
}

.elementor-widget-vina_marquee .pulse-dot {
    display: inline-block;
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    border-radius: 50%;
    background-color: var(--dot-color, #E8C4B8);
    flex-shrink: 0;
    animation: vina-pulse-dot 2s infinite;
}

@keyframes vina-pulse-dot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 196, 184, 0.6);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(232, 196, 184, 0);
    }
}

.elementor-widget-vina_marquee .marquee-button {
    display: inline-block;
    background-color: #C48B7D;
    color: white;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.elementor-widget-vina_marquee .marquee-button:hover {
    background-color: #A87063;
    transform: scale(1.05);
}

.elementor-widget-vina_marquee .marquee-button:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .elementor-widget-vina_marquee .marquee-content {
        font-size: 0.75rem;
    }

    .elementor-widget-vina_marquee .marquee-button {
        padding: 4px 12px !important;
        font-size: 0.75rem !important;
    }

    .elementor-widget-vina_marquee .marquee-item {
        gap: 4px;
    }
}

.elementor-edit-mode .elementor-widget-vina_marquee .marquee-content {
    animation: none !important;
    transform: translateX(0) !important;
}