/**
 * Freedom Fuel — Cart Drawer Vote Commit
 *
 * Heavy specificity + !important on color/background/button resets because
 * we're sitting inside Razzi's light-themed mini-cart and need to win
 * against its existing rules without touching the parent theme.
 */

.ff-vote-commit {
    --ffvc-bg: #0a0a0a;
    --ffvc-panel: #111111;
    --ffvc-panel-2: #1a1a1a;
    --ffvc-line: #262626;
    --ffvc-text: #f5f5f5;
    --ffvc-muted: #8a8a8a;
    --ffvc-red: #e11d2e;
    --ffvc-red-hover: #c41624;
    --ffvc-gold: #c9a25b;
    --ffvc-blue: #2563eb;

    /* Inline section in a continuous dark drawer (no card treatment). */
    background: linear-gradient(180deg, rgba(225, 29, 46, 0.05) 0%, transparent 100%) !important;
    color: var(--ffvc-text) !important;
    border: 0 !important;
    border-top: 1px solid var(--ffvc-line) !important;
    border-bottom: 1px solid var(--ffvc-line) !important;
    border-radius: 0 !important;
    padding: 18px 0 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    line-height: 1.4;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Reset child element typography so theme styles can't bleed through. */
.ff-vote-commit,
.ff-vote-commit * {
    box-sizing: border-box;
}
.ff-vote-commit p,
.ff-vote-commit span,
.ff-vote-commit div,
.ff-vote-commit button,
.ff-vote-commit input {
    font-family: inherit;
    color: inherit;
}

/* Subtle red corner accent */
.ff-vote-commit::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 2px;
    background: var(--ffvc-red);
    z-index: 1;
}

/* ============================================================
 * Header
 * ============================================================ */
.ff-vote-commit .ff-vc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 0 18px 14px !important;
    gap: 12px !important;
    margin: 0 !important;
}
.ff-vote-commit .ff-vc-title {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    text-align: left !important;
}
.ff-vote-commit .ff-vc-title-main {
    font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--ffvc-text) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.ff-vote-commit .ff-vc-title-sub {
    font-size: 11px !important;
    color: var(--ffvc-muted) !important;
    margin-top: 4px !important;
    letter-spacing: 0.3px !important;
    font-weight: 400 !important;
    text-transform: none !important;
}
.ff-vote-commit .ff-vc-balance {
    text-align: right !important;
    flex-shrink: 0;
}
.ff-vote-commit .ff-vc-balance-label {
    display: block !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    color: var(--ffvc-muted) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.ff-vote-commit .ff-vc-balance-value {
    display: block !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 26px !important;
    color: var(--ffvc-red) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 2px 0 0 !important;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s, color 0.2s;
}
.ff-vote-commit .ff-vc-balance-detail {
    display: block !important;
    font-size: 9px !important;
    color: var(--ffvc-muted) !important;
    letter-spacing: 0.3px !important;
    margin-top: 2px !important;
    text-transform: none !important;
}

/* ============================================================
 * Filter chips
 * ============================================================ */
.ff-vote-commit .ff-vc-filter {
    display: flex !important;
    gap: 6px !important;
    padding: 0 18px 10px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 !important;
    list-style: none !important;
    align-items: center;
}
.ff-vote-commit .ff-vc-filter::-webkit-scrollbar { display: none; }

.ff-vote-commit .ff-chip {
    flex-shrink: 0;
    background: var(--ffvc-panel-2) !important;
    border: 1px solid var(--ffvc-line) !important;
    color: var(--ffvc-text) !important;
    padding: 6px 12px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    text-transform: uppercase !important;
    border-radius: 14px !important;
    transition: all 0.18s;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.ff-vote-commit .ff-chip:hover {
    border-color: var(--ffvc-red) !important;
    color: var(--ffvc-text) !important;
    background: var(--ffvc-panel-2) !important;
}
.ff-vote-commit .ff-chip.is-active {
    background: var(--ffvc-red) !important;
    border-color: var(--ffvc-red) !important;
    color: #fff !important;
}
.ff-vote-commit .ff-chip--search {
    margin-left: auto !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

/* ============================================================
 * Search bar
 * ============================================================ */
.ff-vote-commit .ff-vc-search {
    padding: 0 18px 10px !important;
    margin: 0 !important;
}
.ff-vote-commit .ff-vc-search input {
    width: 100% !important;
    background: var(--ffvc-panel-2) !important;
    border: 1px solid var(--ffvc-line) !important;
    color: var(--ffvc-text) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    border-radius: 2px !important;
    outline: none !important;
    height: auto !important;
    box-shadow: none !important;
}
.ff-vote-commit .ff-vc-search input:focus {
    border-color: var(--ffvc-red) !important;
}

/* ============================================================
 * Carousel — flex layout with arrows as siblings (not absolute)
 * so they always stay anchored to the carousel area.
 * ============================================================ */
.ff-vote-commit .ff-vc-carousel-wrap {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 6px !important;
    min-height: 240px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ff-vote-commit .ff-vc-carousel {
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 12px 14px !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 240px !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    align-items: stretch !important;
    width: 0 !important; /* allow flex shrink so overflow scrolls */
}
.ff-vote-commit .ff-vc-carousel::-webkit-scrollbar { display: none; }

/* Loader / Empty / Error states fill the full carousel area */
.ff-vote-commit .ff-vc-loading,
.ff-vote-commit .ff-vc-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 200px !important;
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
    gap: 12px !important;
    color: var(--ffvc-muted) !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-family: 'Bebas Neue', sans-serif !important;
    text-align: center !important;
    padding: 30px 20px !important;
}
.ff-vote-commit .ff-vc-loading::after {
    content: 'Loading heroes…';
    color: var(--ffvc-muted) !important;
    letter-spacing: 1.5px;
}
.ff-vote-commit .ff-vc-loading {
    flex-direction: row !important;
}
.ff-vote-commit .ff-vc-loading > div {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}
.ff-vote-commit .ff-vc-loading span {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: var(--ffvc-red) !important;
    opacity: 0.3;
    animation: ffvc-pulse 1.2s infinite ease-in-out;
    display: inline-block !important;
}
.ff-vote-commit .ff-vc-loading span:nth-child(2) { animation-delay: 0.15s; }
.ff-vote-commit .ff-vc-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ffvc-pulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.3); }
}
.ff-vote-commit .ff-vc-empty {
    width: 100%;
    text-align: center;
    color: var(--ffvc-muted) !important;
    font-size: 12px !important;
    padding: 60px 20px !important;
    letter-spacing: 0.3px;
}

/* Nominee card */
.ff-vote-commit .ff-nominee-card {
    flex-shrink: 0 !important;
    width: 170px !important;
    max-width: 170px !important;
    scroll-snap-align: start;
    background: var(--ffvc-panel) !important;
    border: 1px solid var(--ffvc-line) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: all 0.2s;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.ff-vote-commit .ff-nominee-card.has-allocation {
    border-color: var(--ffvc-red) !important;
    box-shadow: 0 0 0 1px var(--ffvc-red), 0 4px 18px rgba(225, 29, 46, 0.18) !important;
}

.ff-vote-commit .ff-nominee-photo {
    height: 100px !important;
    width: 100% !important;
    background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%);
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.ff-vote-commit .ff-nominee-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
/* Fallback initials shown only when a nominee has no featured image. */
.ff-vote-commit .ff-nominee-photo.is-fallback {
    background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%) !important;
    align-items: center !important;
    justify-content: center !important;
}
.ff-vote-commit .ff-nominee-fallback {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid var(--ffvc-red) !important;
    background: var(--ffvc-panel-2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ffvc-red) !important;
    z-index: 1;
}
.ff-vote-commit .ff-nominee-tag {
    position: absolute;
    top: 5px; right: 5px;
    background: rgba(0, 0, 0, 0.78) !important;
    color: var(--ffvc-text) !important;
    padding: 2px 6px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 0.8px !important;
    border-radius: 2px !important;
    border-left: 2px solid var(--ffvc-muted) !important;
    z-index: 2;
    text-transform: uppercase;
    line-height: 1.3 !important;
    /* Cap at "card width − allocated-badge − gutter" so the two corner
       chips never visually overlap on narrow cards. */
    max-width: calc(100% - 70px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ff-vote-commit .ff-nominee-tag[data-area*="Police" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Sheriff" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Law" i] {
    border-left-color: var(--ffvc-blue) !important;
}
.ff-vote-commit .ff-nominee-tag[data-area*="First" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Fire" i],
.ff-vote-commit .ff-nominee-tag[data-area*="EMS" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Medic" i] {
    border-left-color: var(--ffvc-red) !important;
}
.ff-vote-commit .ff-nominee-tag[data-area*="Military" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Army" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Marine" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Navy" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Air" i],
.ff-vote-commit .ff-nominee-tag[data-area*="Veteran" i] {
    border-left-color: var(--ffvc-gold) !important;
}
.ff-vote-commit .ff-nominee-allocated {
    position: absolute;
    top: 5px; left: 5px;
    background: var(--ffvc-red) !important;
    color: #fff !important;
    padding: 2px 7px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 2px !important;
    z-index: 2;
    line-height: 1.2 !important;
    max-width: 50px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-vote-commit .ff-nominee-info {
    padding: 8px 10px 10px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--ffvc-panel) !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Constrain text inside the info area so long names/excerpts can't push
   the card wider than its declared width. */
.ff-vote-commit .ff-nominee-info > * {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word;
}
.ff-vote-commit .ff-nominee-name {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    color: var(--ffvc-text) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.ff-vote-commit .ff-nominee-meta {
    font-size: 10px !important;
    color: var(--ffvc-muted) !important;
    margin: 2px 0 0 !important;
    letter-spacing: 0.3px;
    line-height: 1.3 !important;
    height: 26px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ff-vote-commit .ff-nominee-stats {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--ffvc-line) !important;
    font-size: 10px !important;
    color: var(--ffvc-muted) !important;
    letter-spacing: 0.3px;
}
.ff-vote-commit .ff-nominee-total {
    font-family: 'Bebas Neue', sans-serif !important;
    color: var(--ffvc-text) !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
}
.ff-vote-commit .ff-nominee-rank {
    font-family: 'Bebas Neue', sans-serif !important;
    color: var(--ffvc-gold) !important;
    font-size: 11px !important;
    letter-spacing: 1px;
}

/* "Learn more" link — opens nominee post in a new tab so cart state stays. */
.ff-vote-commit .ff-nominee-learn {
    display: block !important;
    text-align: center !important;
    margin-top: 6px !important;
    padding: 4px 6px !important;
    color: var(--ffvc-muted) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid var(--ffvc-line) !important;
    border-radius: 2px !important;
    background: transparent !important;
    transition: all 0.15s ease;
    line-height: 1.4 !important;
}
.ff-vote-commit .ff-nominee-learn:hover,
.ff-vote-commit .ff-nominee-learn:focus {
    color: var(--ffvc-red) !important;
    border-color: var(--ffvc-red) !important;
    background: rgba(225, 29, 46, 0.06) !important;
    text-decoration: none !important;
}

/* Allocator */
.ff-vote-commit .ff-vc-allocator {
    display: flex !important;
    align-items: center !important;
    margin-top: 8px !important;
    border: 1px solid var(--ffvc-line) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: var(--ffvc-bg) !important;
    height: 28px;
}
.ff-vote-commit .ff-nominee-card.has-allocation .ff-vc-allocator {
    border-color: var(--ffvc-red) !important;
}
.ff-vote-commit .ff-vc-alloc-btn {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--ffvc-panel-2) !important;
    border: none !important;
    color: var(--ffvc-text) !important;
    cursor: pointer;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: background 0.15s;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    text-transform: none !important;
}
.ff-vote-commit .ff-vc-alloc-btn:hover:not(:disabled) {
    background: var(--ffvc-red) !important;
    color: #fff !important;
}
.ff-vote-commit .ff-vc-alloc-btn:disabled {
    color: var(--ffvc-line) !important;
    cursor: not-allowed;
    opacity: 0.4;
}
.ff-vote-commit input.ff-vc-alloc-val,
.ff-vote-commit .ff-vc-alloc-val {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    text-align: center !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: var(--ffvc-bg) !important;
    line-height: 28px !important;
    letter-spacing: 0.5px !important;
    color: var(--ffvc-text) !important;
    font-variant-numeric: tabular-nums;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}
/* Strip the native number-input spinners (we have +/- buttons). */
.ff-vote-commit input.ff-vc-alloc-val::-webkit-outer-spin-button,
.ff-vote-commit input.ff-vc-alloc-val::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.ff-vote-commit input.ff-vc-alloc-val:focus {
    background: var(--ffvc-panel-2) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px var(--ffvc-red) !important;
}
.ff-vote-commit .ff-nominee-card:not(.has-allocation) .ff-vc-alloc-val {
    color: var(--ffvc-muted) !important;
}

/* ============================================================
 * Carousel arrows — flex siblings of carousel, no absolute
 * positioning. This keeps them anchored even when carousel
 * content collapses (e.g. loading/empty states).
 * ============================================================ */
.ff-vote-commit .ff-vc-nav {
    position: relative !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    align-self: center !important;
    background: rgba(10, 10, 10, 0.92) !important;
    border: 1px solid var(--ffvc-line) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    color: var(--ffvc-text) !important;
    transition: all 0.2s;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    text-transform: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}
.ff-vote-commit .ff-vc-nav:hover {
    background: var(--ffvc-red) !important;
    border-color: var(--ffvc-red) !important;
    color: #fff !important;
}
.ff-vote-commit .ff-vc-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.ff-vote-commit .ff-vc-nav svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    flex-shrink: 0;
    color: currentColor !important;
}

/* ============================================================
 * Guest note + summary
 * ============================================================ */
.ff-vote-commit .ff-vc-guest-note {
    margin: 0 18px 8px !important;
    padding: 8px 10px !important;
    background: rgba(201, 162, 91, 0.1) !important;
    border-left: 2px solid var(--ffvc-gold) !important;
    font-size: 11px !important;
    color: var(--ffvc-text) !important;
    letter-spacing: 0.3px;
    line-height: 1.4 !important;
}
.ff-vote-commit .ff-vc-guest-note a {
    color: var(--ffvc-gold) !important;
    text-decoration: underline !important;
}
.ff-vote-commit .ff-vc-summary {
    padding: 8px 18px 0 !important;
    margin: 6px 0 0 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    color: var(--ffvc-muted) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-top: 1px dashed var(--ffvc-line);
}
.ff-vote-commit .ff-vc-summary [data-ff-summary-allocated] {
    color: var(--ffvc-red) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}
.ff-vote-commit .ff-vc-summary [data-ff-summary-pool] {
    color: var(--ffvc-text) !important;
    font-variant-numeric: tabular-nums;
}
.ff-vote-commit .ff-vc-summary-sep {
    margin: 0 4px;
    color: var(--ffvc-line) !important;
}
.ff-vote-commit .ff-vc-summary-label {
    margin-left: 6px;
}

/* Pulse animation when user tries to over-allocate */
.ff-vote-commit .ff-vc-balance-value.is-pulsing {
    transform: scale(1.15);
    color: #fff !important;
}

/* ============================================================================
 * FULL DRAWER THEME — Freedom Fuel dark/red aesthetic.
 * Targets the Elementor menu-cart container so the entire slide-out matches
 * the mockup, not just the vote-commit section.
 * ============================================================================ */

/* Local tokens reused below. */
.elementor-menu-cart__main,
.elementor-menu-cart__container,
.elementor-menu-cart__main-cart {
    --ffd-bg: #0a0a0a;
    --ffd-panel: #111111;
    --ffd-panel-2: #1a1a1a;
    --ffd-line: #262626;
    --ffd-text: #f5f5f5;
    --ffd-muted: #8a8a8a;
    --ffd-red: #e11d2e;
    --ffd-red-hover: #c41624;
    --ffd-gold: #c9a25b;
}

/* === Outer drawer === */
.elementor-menu-cart__main,
.elementor-menu-cart__container .elementor-menu-cart__main {
    background: var(--ffd-bg) !important;
    color: var(--ffd-text) !important;
    border-left: 2px solid var(--ffd-red) !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    padding: 0 !important;
    width: 520px !important;
    max-width: 95vw !important;
}
@media (max-width: 600px) {
    .elementor-menu-cart__main,
    .elementor-menu-cart__container .elementor-menu-cart__main {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* Defeat the white background that Elementor applies to inner wrappers. */
.elementor-menu-cart__main .widget_shopping_cart,
.elementor-menu-cart__main .widget_shopping_cart_content,
.elementor-menu-cart__main .woocommerce-mini-cart,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons,
.elementor-menu-cart__main .woocommerce-mini-cart__total,
.elementor-menu-cart__main .widget_shopping_cart_footer {
    background: transparent !important;
    color: var(--ffd-text) !important;
    border-color: var(--ffd-line) !important;
}

/* === Close button === */
.elementor-menu-cart__close-button,
.elementor-menu-cart__main .elementor-menu-cart__close-button {
    color: var(--ffd-text) !important;
    background: transparent !important;
    border: 1px solid var(--ffd-line) !important;
    border-radius: 2px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 14px 16px 0 0 !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.elementor-menu-cart__close-button:hover {
    color: var(--ffd-red) !important;
    border-color: var(--ffd-red) !important;
}
.elementor-menu-cart__close-button svg,
.elementor-menu-cart__close-button i {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* (red accent line removed — was overlapping the ship-progress bar) */

/* === Ship-progress bar === */
.elementor-menu-cart__main .ff-cart-shipbar {
    background: var(--ffd-panel) !important;
    border-top: 1px solid var(--ffd-line) !important;
    border-bottom: 1px solid var(--ffd-line) !important;
    padding: 12px 18px !important;
    margin: 0 !important;
}
.elementor-menu-cart__main .ff-cart-shipbar__msg,
.elementor-menu-cart__main .ff-cart-shipbar__msg.is-unlocked {
    color: var(--ffd-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.elementor-menu-cart__main .ff-cart-shipbar__msg strong {
    color: var(--ffd-red) !important;
    font-weight: 700 !important;
}
.elementor-menu-cart__main .ff-cart-shipbar__msg img.emoji {
    width: 16px !important;
    height: 16px !important;
}
.elementor-menu-cart__main .ff-cart-shipbar__track {
    background: #1f1f1f !important;
    height: 4px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.elementor-menu-cart__main .ff-cart-shipbar__fill {
    background: linear-gradient(90deg, var(--ffd-red) 0%, #ff3a4f 100%) !important;
    box-shadow: 0 0 10px rgba(225, 29, 46, 0.5) !important;
    height: 100% !important;
    transition: width 0.3s ease;
}

/* === Layout: stop the items list from greedy-growing and squashing the
 *     vote section. `widget_shopping_cart_content` is a flex column; we
 *     want items + vote section to size to content and the FOOTER to be
 *     pushed to the bottom only if there's leftover space. */
.elementor-menu-cart__main .widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.elementor-menu-cart__main .ff-cart-shipbar {
    flex: 0 0 auto !important;
}
.elementor-menu-cart__main ul.woocommerce-mini-cart.razzi-scrollbar,
.elementor-menu-cart__main ul.woocommerce-mini-cart {
    flex: 0 1 auto !important;
    height: auto !important;
    max-height: 40vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
.elementor-menu-cart__main .ff-vote-commit {
    flex: 1 1 auto !important;
    min-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.elementor-menu-cart__main .widget_shopping_cart_footer {
    flex: 0 0 auto !important;
}

/* === Mini-cart items list === */
.elementor-menu-cart__main ul.woocommerce-mini-cart {
    padding: 4px 18px !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-rows: auto 1fr !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ffd-line) !important;
    background: transparent !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__thumbnail {
    grid-row: 1 / span 2 !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__thumbnail {
    width: 56px !important;
    height: 56px !important;
    background: var(--ffd-panel-2) !important;
    border: 1px solid var(--ffd-line) !important;
    border-radius: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    align-self: start !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(225, 29, 46, 0.12), transparent 65%);
    pointer-events: none;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__thumbnail img {
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    position: relative;
    z-index: 1;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__summary {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__name {
    display: block !important;
    margin: 0 !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__title,
.elementor-menu-cart__main a.woocommerce-mini-cart-item__title {
    font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--ffd-text) !important;
    text-decoration: none !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    display: block !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__title:hover {
    color: var(--ffd-red) !important;
}
.elementor-menu-cart__main .ff-cart-item__votes {
    display: inline-block !important;
    margin-left: 6px !important;
    background: rgba(225, 29, 46, 0.12) !important;
    border: 1px solid rgba(225, 29, 46, 0.3) !important;
    color: var(--ffd-red) !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item__price {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 14px !important;
    color: var(--ffd-text) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-top: 2px !important;
    display: block !important;
}
/* Nuclear price color — beat any selector specificity from Razzi/WC/Elementor. */
body .elementor-menu-cart__main bdi,
body .elementor-menu-cart__main bdi *,
body .elementor-menu-cart__main .woocommerce-Price-amount,
body .elementor-menu-cart__main .woocommerce-Price-amount *,
body .elementor-menu-cart__main .woocommerce-Price-currencySymbol,
body .elementor-menu-cart__main .amount,
body .elementor-menu-cart__main .amount *,
body .elementor-menu-cart__main .woocommerce-mini-cart-item__price,
body .elementor-menu-cart__main .woocommerce-mini-cart-item__price *,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total *,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total strong,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total bdi,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total .amount,
body .elementor-menu-cart__main p.woocommerce-mini-cart__total .woocommerce-Price-amount,
body .elementor-menu-cart__main .total,
body .elementor-menu-cart__main .total *,
body .elementor-menu-cart__main .total bdi {
    color: #f5f5f5 !important;
    background: transparent !important;
    -webkit-text-fill-color: #f5f5f5 !important; /* Safari sometimes ignores color via -webkit-text-fill-color */
}
/* …but keep the muted "count notice" actually muted (it's hidden anyway). */
body .elementor-menu-cart__main .woocommerce-mini-cart__count_notice {
    color: var(--ffd-muted) !important;
    -webkit-text-fill-color: var(--ffd-muted) !important;
}

/* Variation rows ("Votes Earned: 75") — collapse, our pill already shows it */
.elementor-menu-cart__main .woocommerce-mini-cart-item dl.variation,
.elementor-menu-cart__main .woocommerce-mini-cart-item dl.variation * {
    display: none !important;
}

/* Qty stepper (Razzi/custom .ff-cart-qty) */
.elementor-menu-cart__main .ff-cart-qty,
.elementor-menu-cart__main .woocommerce-cart-item__qty .ff-cart-qty {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--ffd-line) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: var(--ffd-panel-2) !important;
    height: 24px !important;
    margin-right: 8px !important;
}
.elementor-menu-cart__main .ff-cart-qty__dec,
.elementor-menu-cart__main .ff-cart-qty__inc {
    background: transparent !important;
    border: none !important;
    color: var(--ffd-text) !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s !important;
}
.elementor-menu-cart__main .ff-cart-qty__dec:not(:disabled):hover,
.elementor-menu-cart__main .ff-cart-qty__inc:not(:disabled):hover {
    background: var(--ffd-red) !important;
    color: #fff !important;
}
.elementor-menu-cart__main .ff-cart-qty__dec:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}
.elementor-menu-cart__main .ff-cart-qty__value {
    width: 26px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ffd-text) !important;
    font-variant-numeric: tabular-nums !important;
    background: var(--ffd-bg) !important;
    line-height: 22px !important;
    height: 22px !important;
    display: inline-block !important;
}

/* Remove link */
.elementor-menu-cart__main .woocommerce-mini-cart-item .remove,
.elementor-menu-cart__main a.remove_from_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--ffd-muted) !important;
    background: transparent !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
    border-radius: 2px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    transition: color 0.2s !important;
    border: 0 !important;
    box-shadow: none !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item .remove:hover,
.elementor-menu-cart__main a.remove_from_cart_button:hover {
    color: var(--ffd-red) !important;
    background: transparent !important;
}
.elementor-menu-cart__main .remove .razzi-svg-icon,
.elementor-menu-cart__main .remove svg {
    color: currentColor !important;
    width: 14px !important;
    height: 14px !important;
}
.elementor-menu-cart__main .remove .name {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 1px !important;
}

/* === Empty cart message === */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
    color: var(--ffd-muted) !important;
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
}

/* === Footer wrapper === */
.elementor-menu-cart__main .widget_shopping_cart_footer {
    border-top: 1px solid var(--ffd-line) !important;
    background: linear-gradient(180deg, var(--ffd-panel) 0%, var(--ffd-bg) 100%) !important;
    padding: 10px 16px 14px !important;
    margin: 0 !important;
}

/* Subtotal row */
.elementor-menu-cart__main .woocommerce-mini-cart__total,
.elementor-menu-cart__main .woocommerce-mini-cart__total.total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--ffd-text) !important;
    border: 0 !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart__total strong {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--ffd-text) !important;
    font-weight: 700 !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart__total .woocommerce-Price-amount {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 16px !important;
    color: var(--ffd-text) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.5px !important;
}

/* Custom "Votes you'll earn" tally */
.elementor-menu-cart__main .ff-cart-votes-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin: 2px 0 !important;
    border-top: 1px dashed var(--ffd-line) !important;
    border-bottom: 1px dashed var(--ffd-line) !important;
}
.elementor-menu-cart__main .ff-cart-votes-total__label {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--ffd-muted) !important;
}
.elementor-menu-cart__main .ff-cart-votes-total__value {
    font-family: 'Bebas Neue', sans-serif !important;
    color: var(--ffd-red) !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-variant-numeric: tabular-nums !important;
}
.elementor-menu-cart__main .ff-cart-votes-total__value span {
    font-size: 10px !important;
    margin-left: 4px !important;
    color: var(--ffd-muted) !important;
    letter-spacing: 1px !important;
}

/* Buttons — only Checkout shown; View Cart hidden. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons.buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}
/* Hide the View Cart (non-checkout) button entirely. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button:not(.checkout),
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.razzi-button:not(.checkout),
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
    display: none !important;
}
/* Primary checkout: filled red, more compact. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .checkout,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.checkout.wc-forward,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button.checkout {
    width: 100% !important;
    padding: 10px 14px !important;
    font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    border: 1px solid var(--ffd-red) !important;
    background: var(--ffd-red) !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1 !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .checkout:hover {
    background: var(--ffd-red-hover) !important;
    border-color: var(--ffd-red-hover) !important;
}

/* Hide Razzi's button-outline ::before/::after gimmicks if any */
.elementor-menu-cart__main .razzi-button::before,
.elementor-menu-cart__main .razzi-button::after {
    display: none !important;
}

/* === Scrollbar inside drawer === */
.elementor-menu-cart__main .widget_shopping_cart_content,
.elementor-menu-cart__main .razzi-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--ffd-red) transparent;
}
.elementor-menu-cart__main *::-webkit-scrollbar { width: 4px !important; }
.elementor-menu-cart__main *::-webkit-scrollbar-thumb { background: var(--ffd-red) !important; }
.elementor-menu-cart__main *::-webkit-scrollbar-track { background: transparent !important; }

/* ============================================================================
 * TEMPORARY: hide filter chips & search until we wire them up. Placed at the
 * end of the file so this `display: none` wins source-order against the
 * earlier `display: flex !important` rule of equal specificity.
 * ============================================================================ */
.ff-vote-commit .ff-vc-filter,
.ff-vote-commit .ff-vc-search {
    display: none !important;
}

/* ============================================================================
 * MOBILE FIX — single-scroll drawer with sticky footer.
 *
 * Why: on desktop we use nested scroll containers (items list scrolls
 * vertically; vote-commit section scrolls vertically; carousel scrolls
 * horizontally) with the footer pinned via flex. That works great with a
 * mouse but on iOS Safari it falls apart:
 *
 *   1. When a user focuses the votes input, iOS tries to scroll it into
 *      view — but with nested scrollers, iOS picks the wrong one and the
 *      input stays hidden behind the (flex-pinned) footer.
 *   2. With the iOS keyboard visible, viewport height drops by ~300px,
 *      and the vote-commit section's `min-height` forces it past the
 *      drawer's internal flex space, clipping content under the footer.
 *
 * Fix: on phones, collapse to ONE vertical scroll container (the entire
 * cart body), with the footer using `position: sticky` so it stays
 * visible without breaking iOS's scroll-into-view logic. Big
 * `scroll-padding-bottom` ensures focused inputs get clearance above the
 * keyboard + sticky footer.
 * ========================================================================== */

@media (max-width: 768px) {

    /* The drawer becomes one scroll container. */
    .elementor-menu-cart__main .widget_shopping_cart_content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        /* Reserve room below the focused-into-view target so the iOS
           keyboard + sticky footer don't cover it. ~150px footer + ~80px
           buffer = 230px. */
        scroll-padding-bottom: 240px !important;
    }

    /* Items list: stop capping at 40vh (would force its own nested scroll);
       let the page scroll naturally. */
    .elementor-menu-cart__main ul.woocommerce-mini-cart.razzi-scrollbar,
    .elementor-menu-cart__main ul.woocommerce-mini-cart {
        max-height: none !important;
        overflow-y: visible !important;
        flex: 0 0 auto !important;
    }

    /* Vote-commit: shed its own scroll container & min-height so it
       inherits the drawer's scroll. The horizontal carousel inside still
       scrolls left/right normally. */
    .elementor-menu-cart__main .ff-vote-commit {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Footer pinned via sticky instead of flex — keeps Checkout always
       visible without taking the input out of iOS's scroll path. */
    .elementor-menu-cart__main .widget_shopping_cart_footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
        flex: 0 0 auto !important;
        margin-top: auto !important;
        /* Subtle top fade so cards don't visually slam into the footer. */
        box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.6) !important;
    }

    /* Belt-and-suspenders: when an allocator input is focused, iOS will
       scroll it into view; this `scroll-margin-bottom` adds extra room so
       it always lands above the sticky footer + keyboard. */
    .ff-vote-commit input.ff-vc-alloc-val,
    .ff-vote-commit .ff-nominee-card {
        scroll-margin-bottom: 260px !important;
    }

    /* Add a little breathing room below the carousel so the last card's
       allocator isn't flush against the summary line. */
    .ff-vote-commit .ff-vc-carousel-wrap {
        padding-bottom: 12px !important;
    }
}