/* =====================================================
   Stellar Plugin — Announcement Bar Slider
   Pure-CSS marquee: track is 2x wide, animates -50%
   ===================================================== */

/* ---------- Bar wrapper ---------- */
.stellar-ann-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
    min-height: 46px;
    background-color: #2B4535;
    background-image: none;
    box-sizing: border-box;
}

/* ---------- Label / Badge ---------- */
.stellar-ann-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

.stellar-ann-label i,
.stellar-ann-label svg {
    font-size: 13px;
    flex-shrink: 0;
}

/* ---------- Scrolling viewport ---------- */
.stellar-ann-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* ---------- Track: holds 2× the content ---------- */
.stellar-ann-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    /* animation set via inline style from PHP data-duration */
    animation: stellar-marq var(--stellar-duration, 30s) linear infinite;
    will-change: transform;
}

/* The keyframe: scroll exactly one full set (-50% of doubled track) */
@keyframes stellar-marq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Right-direction variant */
.stellar-ann-track.stellar-dir-right {
    animation-name: stellar-marq-right;
}

@keyframes stellar-marq-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Pause state (hover / touch) */
.stellar-ann-bar.stellar-paused .stellar-ann-track {
    animation-play-state: paused;
}

/* ---------- Individual item ---------- */
.stellar-ann-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 8px;
    margin-right: 56px;   /* default gap — overridden by Elementor control */
}

.stellar-ann-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.stellar-ann-item a:hover {
    opacity: 0.8;
}

/* ---------- Icon ---------- */
.stellar-ann-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.stellar-ann-icon i,
.stellar-ann-icon svg {
    font-size: inherit;
    color: #fff;
    fill: #fff;
    display: block;
    line-height: 1;
}

/* ---------- Text ---------- */
.stellar-ann-text {
    display: inline;
    font-size: 13.5px;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
}

/* ---------- Separator ---------- */
.stellar-ann-sep {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    user-select: none;
    margin-right: 56px;   /* same as item gap — overridden by Elementor */
}

/* ---------- Close button ---------- */
.stellar-ann-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    padding: 0 10px;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 14px;
    z-index: 3;
}

.stellar-ann-close:hover {
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.stellar-ann-close i,
.stellar-ann-close svg {
    pointer-events: none;
    font-size: inherit;
    color: inherit;
    fill: currentColor;
}

/* ---------- Hidden after close ---------- */
.stellar-ann-bar.stellar-hidden {
    display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .stellar-ann-label {
        font-size: 10px;
        padding: 4px 8px;
    }
    .stellar-ann-text {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .stellar-ann-item {
        margin-right: 32px;
    }
    .stellar-ann-sep {
        margin-right: 32px;
    }
    .stellar-ann-label {
        padding: 4px 6px;
        font-size: 9.5px;
    }
    .stellar-ann-text {
        font-size: 11.5px;
    }
}

/* ===================================================================
   Stellar Universal Form & Textbox Styling (Suppress Pink/Red Defaults)
   =================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    accent-color: #22382C !important;
}

/* Eliminate native/theme pink and red borders on unsubmitted invalid fields */
input:invalid,
textarea:invalid,
select:invalid,
input:user-invalid,
textarea:user-invalid {
    box-shadow: none !important;
    outline: none !important;
}

/* Harmonious Forest Sage focus state across all forms & textboxes */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    border-color: #5B7262 !important;
    box-shadow: 0 0 0 3px rgba(91, 114, 98, 0.14) !important;
}

/* Neutralize WooCommerce default red/pink required asterisks to luxury warm brass */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required,
abbr.required,
span.required {
    color: #A7843F !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ===================================================================
   Stellar Universal Toast Styling & Clickable Link Support
   =================================================================== */
.pdp-toast,
.stellar-toast,
#stellar-toast,
.stellar-cart-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(31, 51, 40, 0.96) !important;
    color: #F4EBDA !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    z-index: 999999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.pdp-toast a,
.stellar-toast a,
#stellar-toast a,
.stellar-cart-toast a {
    color: #F4EBDA !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
}

.pdp-toast a:hover,
.stellar-toast a:hover,
#stellar-toast a:hover,
.stellar-cart-toast a:hover {
    opacity: 0.8 !important;
    color: #ffffff !important;
}