/* Pretpot Two Column Text with Dot Separator Widget */
.pretpot-two-column-dot-separator {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap, 12px);
}

.pretpot-tcds-row {
    display: flex;
    align-items: var(--divider-position, center);
    width: 100%;
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: var(--font-size, 14px);
    letter-spacing: var(--letter-spacing, 1px);
    text-transform: var(--text-transform, uppercase);
    line-height: var(--line-height, 1.4);
    color: var(--text-color, #000000);
}

.pretpot-tcds-left-text {
    flex-shrink: 0;
    text-align: left;
    white-space: nowrap;
}

.pretpot-tcds-divider {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 var(--divider-margin, 10px);
    min-width: 20px;
    position: relative;
}

/* Dot style */
.pretpot-tcds-divider.dots::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: var(--dot-size, 2px) dotted var(--divider-color, #000000);
    height: var(--dot-size, 2px);
}

/* Line style */
.pretpot-tcds-divider.line::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: var(--line-thickness, 1px) solid var(--divider-color, #000000);
    height: var(--line-thickness, 1px);
}

/* Star style */
.pretpot-tcds-divider.stars {
    gap: var(--star-gap, 8px);
    flex-wrap: wrap;
}

.pretpot-tcds-divider.stars::before {
    content: '✦';
    color: var(--divider-color, #000000);
    font-size: var(--star-size, 8px);
    line-height: 1;
    letter-spacing: var(--star-gap, 8px);
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.pretpot-tcds-right-text {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* Alignment variations */
.pretpot-tcds-row.align-top {
    --divider-position: flex-start;
}

.pretpot-tcds-row.align-center {
    --divider-position: center;
}

.pretpot-tcds-row.align-bottom {
    --divider-position: flex-end;
}

/* ============================================
   ANIMATION STYLES
   ============================================ */

/* Base animation wrapper */
.pretpot-tcds-divider.animated::after,
.pretpot-tcds-divider.animated::before {
    transform: scaleX(0);
    transform-origin: var(--anim-origin, left);
    animation: pretpot-tcds-reveal var(--anim-duration, 1.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
}

.pretpot-tcds-divider.animated.stars::before {
    transform: scaleX(0);
    transform-origin: var(--anim-origin, left);
    animation: pretpot-tcds-reveal var(--anim-duration, 1.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
}

@keyframes pretpot-tcds-reveal {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Animation direction: left to right */
.pretpot-tcds-divider.anim-ltr {
    --anim-origin: left;
}

/* Animation direction: right to left */
.pretpot-tcds-divider.anim-rtl {
    --anim-origin: right;
}

/* Staggered row animations */
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(1) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(1) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(2) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(2) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.15s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(3) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(3) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.3s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(4) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(4) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.45s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(5) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(5) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.6s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(6) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(6) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.75s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(7) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(7) .pretpot-tcds-divider.animated::before {
    --anim-delay: 0.9s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(8) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(8) .pretpot-tcds-divider.animated::before {
    --anim-delay: 1.05s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(9) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(9) .pretpot-tcds-divider.animated::before {
    --anim-delay: 1.2s;
}

.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(10) .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.staggered .pretpot-tcds-row:nth-child(10) .pretpot-tcds-divider.animated::before {
    --anim-delay: 1.35s;
}

/* Trigger: on load (default) */
.pretpot-two-column-dot-separator.trigger-load .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.trigger-load .pretpot-tcds-divider.animated::before {
    animation-play-state: running;
}

/* Trigger: on scroll into viewport */
.pretpot-two-column-dot-separator.trigger-scroll .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.trigger-scroll .pretpot-tcds-divider.animated::before {
    animation-play-state: paused;
}

.pretpot-two-column-dot-separator.trigger-scroll.is-in-viewport .pretpot-tcds-divider.animated::after,
.pretpot-two-column-dot-separator.trigger-scroll.is-in-viewport .pretpot-tcds-divider.animated::before {
    animation-play-state: running;
}

/* Loop animation */
.pretpot-tcds-divider.animated.loop {
    animation-iteration-count: infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pretpot-tcds-divider.animated::after,
    .pretpot-tcds-divider.animated::before {
        animation: none !important;
        transform: scaleX(1) !important;
    }
}

/* Blank style - no divider */
.pretpot-tcds-divider.blank::after,
.pretpot-tcds-divider.blank::before {
    display: none;
}