/* ALA Discount Deadline Banner - Frontend v1.3.0
   Top announcement bar — luxury/fashion ecommerce style
   ─────────────────────────────────────────────────── */

/* ── Fixed wrapper: always at the very top of the viewport ── */
.ala-ddb-bar-outer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: var(--ala-ddb-bg, #000000) !important;
    border: var(--ala-ddb-border-width, 0px) solid var(--ala-ddb-border-color, #333333) !important;
    border-radius: 0 !important;
    box-shadow: var(--ala-ddb-shadow, none) !important;
    z-index: 999999 !important;
    float: none !important;
}

/* ── Spacer: invisible block that reserves the banner height ── */
.ala-ddb-spacer {
    display: block !important;
    width: 100% !important;
    height: var(--ala-ddb-height, 36px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* ── WordPress admin bar: push the fixed banner down on desktop ── */
.admin-bar .ala-ddb-bar-outer {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .ala-ddb-bar-outer {
        top: 46px !important;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar .ala-ddb-bar-outer {
        top: 0 !important;
    }
}

/* ── The banner itself ── */
.ala-ddb-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--ala-ddb-height, 36px) !important;
    height: var(--ala-ddb-height, 36px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 var(--ala-ddb-padding, 16px) !important;
    background: var(--ala-ddb-bg, #000000) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    /* overflow visible so countdown is never clipped */
    overflow: visible !important;
    white-space: nowrap !important;
    gap: 0 !important;
}

/* ── Inner content group ── */
.ala-ddb-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
    /* overflow visible — clipping was hiding the countdown */
    overflow: visible !important;
    max-width: 100% !important;
}

/* ── Clock icon ── */
.ala-ddb-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: var(--ala-ddb-icon-size, 17px) !important;
    height: var(--ala-ddb-icon-size, 17px) !important;
    color: var(--ala-ddb-text, #ffffff) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ala-ddb-icon svg {
    display: block !important;
    width: var(--ala-ddb-icon-size, 17px) !important;
    height: var(--ala-ddb-icon-size, 17px) !important;
    stroke: var(--ala-ddb-text, #ffffff) !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

/* ── Thin vertical divider ── */
.ala-ddb-divider {
    display: inline-block !important;
    width: 1px !important;
    height: var(--ala-ddb-divider-height, 16px) !important;
    background: var(--ala-ddb-divider, rgba(255,255,255,.35)) !important;
    margin: 0 var(--ala-ddb-content-gap, 9px) !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Text block ── */
.ala-ddb-text {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ala-ddb-text, #ffffff) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* ── Bold label part ── */
.ala-ddb-label {
    color: var(--ala-ddb-text, #ffffff) !important;
    font-weight: var(--ala-ddb-label-weight, 700) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Separator between label and deadline ── */
.ala-ddb-sep {
    display: inline !important;
    color: var(--ala-ddb-muted, rgba(255,255,255,.6)) !important;
    margin: 0 5px !important;
    font-weight: var(--ala-ddb-countdown-weight, 400) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
}

/* ── Deadline text part ── */
.ala-ddb-deadline {
    color: var(--ala-ddb-muted, rgba(255,255,255,.88)) !important;
    font-weight: var(--ala-ddb-countdown-weight, 400) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Separator before countdown ── */
.ala-ddb-countdown-sep {
    display: inline !important;
    color: var(--ala-ddb-muted, rgba(255,255,255,.6)) !important;
    margin: 0 5px !important;
    font-weight: var(--ala-ddb-countdown-weight, 400) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
}

/* ── Live countdown timer ── */
.ala-ddb-countdown {
    display: inline !important;
    color: var(--ala-ddb-accent, var(--ala-ddb-text, #ffffff)) !important;
    font-weight: var(--ala-ddb-countdown-weight, 400) !important;
    font-size: var(--ala-ddb-font-size, 12.5px) !important;
    letter-spacing: var(--ala-ddb-letter-spacing, 0.03em) !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ── Tablet ── */
@media (max-width: 768px) {
    .ala-ddb-banner {
        min-height: var(--ala-ddb-mobile-height, 34px) !important;
        height: var(--ala-ddb-mobile-height, 34px) !important;
    }
    .ala-ddb-spacer {
        height: var(--ala-ddb-mobile-height, 34px) !important;
    }
}

/* ── Mobile: tighten spacing, shrink font ── */
@media (max-width: 480px) {
    .ala-ddb-banner {
        min-height: var(--ala-ddb-mobile-height, 34px) !important;
        height: var(--ala-ddb-mobile-height, 34px) !important;
        padding: 0 8px !important;
    }
    .ala-ddb-spacer {
        height: var(--ala-ddb-mobile-height, 34px) !important;
    }
    .ala-ddb-icon {
        width: 14px !important;
        height: 14px !important;
    }
    .ala-ddb-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
    .ala-ddb-divider {
        height: 13px !important;
        margin: 0 6px !important;
    }
    .ala-ddb-sep,
    .ala-ddb-countdown-sep {
        margin: 0 4px !important;
    }
    .ala-ddb-text,
    .ala-ddb-label,
    .ala-ddb-sep,
    .ala-ddb-deadline,
    .ala-ddb-countdown-sep,
    .ala-ddb-countdown {
        font-size: var(--ala-ddb-mobile-font-size, 10px) !important;
        letter-spacing: 0 !important;
    }
}

/* ── Small mobile (360–412px): hide day name to save space ── */
@media (max-width: 412px) {
    .ala-ddb-deadline-day {
        display: none !important;
    }
    .ala-ddb-deadline-comma {
        display: none !important;
    }
}

/* ── Very small (320px): squeeze a bit more ── */
@media (max-width: 359px) {
    .ala-ddb-banner {
        padding: 0 6px !important;
    }
    .ala-ddb-divider {
        margin: 0 5px !important;
    }
    .ala-ddb-sep,
    .ala-ddb-countdown-sep {
        margin: 0 3px !important;
    }
    .ala-ddb-text,
    .ala-ddb-label,
    .ala-ddb-sep,
    .ala-ddb-deadline,
    .ala-ddb-countdown-sep,
    .ala-ddb-countdown {
        font-size: 9.5px !important;
    }
}