/*
 * WC Advanced Filters – Frontend Panel Styles
 * Uses CSS custom properties so Pro's design customizer can override colors/fonts
 * without touching this file.
 *
 * @package WC_Advanced_Filters
 */

/* ─── Inline sidebar layout (enabled = false mode) ───────────────────────── */
/*
 * When the floating panel is disabled, the filter is injected before the
 * product loop via woocommerce_before_shop_loop. We use a negative bottom
 * margin + sticky positioning so the filter sits alongside the products in
 * a two-column layout without needing to modify the theme's HTML.
 *
 * The .wcaf-sidebar-wrap is pulled left and the products naturally flow right.
 */
.wcaf-sidebar-wrap {
    float          : left;
    width          : 270px;
    margin-right   : 30px;
    margin-bottom  : 30px;
    position       : sticky;
    top            : 20px;
    align-self     : flex-start;
}

/* If the theme uses flexbox for its shop layout, the sidebar wraps cleanly. */
.woocommerce-page ul.products,
.woocommerce ul.products {
    /* Allow the products grid to shrink alongside our sidebar. */
    flex           : 1 1 auto;
    min-width      : 0;
}

/* Stack on mobile */
@media (max-width: 768px) {
    .wcaf-sidebar-wrap {
        float    : none;
        width    : 100%;
        margin   : 0 0 20px;
        position : relative;
        top      : auto;
    }
}

/* ─── Inline filter (widget / shortcode) ─────────────────────────────────── */
/* Normal document flow — no fixed position, no overlay, no slide animation.  */
.wcaf-inline-filters {
    width      : 100%;
    font-family: var(--wcaf-font, inherit);
    color      : var(--wcaf-text, #2c3e50);
}
.wcaf-inline-filters .wcaf-filter-section {
    border-bottom : 1px solid var(--wcaf-border, #e0e0e0);
}
.wcaf-inline-filters .wcaf-filter-section:last-of-type {
    border-bottom: none;
}

/* ─── Design tokens (defaults; overridden by Pro customizer) ─────────────── */
:root {
    --wcaf-primary       : #FECA0F;
    --wcaf-primary-hover : #ffd61a;
    --wcaf-secondary     : #2c3e50;
    --wcaf-secondary-hover: #34495e;
    --wcaf-btn-text      : #57351D;
    --wcaf-text          : #2c3e50;
    --wcaf-bg            : #ffffff;
    --wcaf-border        : #e0e0e0;
    --wcaf-hover-bg      : #f5f5f5;
    --wcaf-font          : inherit;
    --wcaf-panel-width   : 400px;
    --wcaf-radius        : 4px;
    --wcaf-transition    : 0.3s ease;
}

/* ─── Filter Button ──────────────────────────────────────────────────────── */
.wcaf-filter-button {
    position       : fixed;
    left           : 20px;
    top            : 50%;
    transform      : translateY(-50%);
    background     : var(--wcaf-secondary);
    color          : #fff;
    border         : none;
    padding        : 15px 20px;
    border-radius  : 0 var(--wcaf-radius) var(--wcaf-radius) 0;
    cursor         : pointer;
    font-family    : var(--wcaf-font);
    font-size      : 16px;
    font-weight    : 600;
    box-shadow     : 2px 2px 10px rgba(0,0,0,.2);
    z-index        : 9999;
    transition     : all var(--wcaf-transition);
    display        : flex;
    align-items    : center;
    gap            : 8px;
}
.wcaf-filter-button:hover  { background: var(--wcaf-secondary-hover, #34495e); padding-left: 25px; }
.wcaf-filter-button .wcaf-icon { font-size: 20px; }
body.wcaf-panel-open .wcaf-filter-button {
    opacity        : 0;
    pointer-events : none;
    transform      : translateY(-50%) translateX(-20px);
}

/* ─── Filter Panel ───────────────────────────────────────────────────────── */
.wcaf-filter-panel {
    position    : fixed;
    left        : calc(-1 * var(--wcaf-panel-width));
    top         : 0;
    width       : var(--wcaf-panel-width);
    height      : 100vh;
    background  : var(--wcaf-bg);
    box-shadow  : 2px 0 15px rgba(0,0,0,.1);
    z-index     : 10000;
    transition  : left var(--wcaf-transition);
    overflow-y  : auto;
    overflow-x  : hidden;
    font-family : var(--wcaf-font);
    -webkit-overflow-scrolling: touch;
}
.wcaf-filter-panel.active { left: 0; }

/* ─── Panel Header ───────────────────────────────────────────────────────── */
.wcaf-panel-header {
    position        : sticky;
    top             : 0;
    background      : var(--wcaf-secondary);
    color           : #fff;
    padding         : 20px;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    z-index         : 10;
}
.wcaf-panel-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: #fff; }

.wcaf-close-btn {
    background : transparent;
    border     : none;
    color      : #fff;
    font-size  : 28px;
    cursor     : pointer;
    padding    : 0;
    width      : 30px;
    height     : 30px;
    display    : flex;
    align-items: center;
    justify-content: center;
    transition : transform var(--wcaf-transition);
    -webkit-tap-highlight-color: transparent;
}
.wcaf-close-btn:hover,
.wcaf-close-btn:active  { transform: rotate(90deg); color: var(--wcaf-primary); }

/* ─── Panel Content ──────────────────────────────────────────────────────── */
.wcaf-panel-content { padding: 20px; }

.wcaf-filter-section {
    margin-bottom : 16px;
    border-bottom : 1px solid var(--wcaf-border);
    padding-bottom: 12px;
}
.wcaf-filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.wcaf-filter-section h4 {
    margin         : 0 0 12px;
    font-size      : 14px;
    font-weight    : 700;
    color          : var(--wcaf-text);
    text-transform : uppercase;
    letter-spacing : .4px;
    font-family    : var(--wcaf-font);
}

/* ─── Collapsible sections ───────────────────────────────────────────────── */
.wcaf-filter-title.wcaf-collapsible {
    cursor          : pointer;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 10px 0;
    user-select     : none;
    -webkit-tap-highlight-color: transparent;
}
.wcaf-filter-title.wcaf-collapsible:hover { color: var(--wcaf-text); opacity: .8; }

.wcaf-toggle-icon {
    font-size  : 20px;
    font-weight: bold;
    min-width  : 20px;
    text-align : center;
}

.wcaf-filter-content {
    max-height : 0;
    overflow   : hidden;
    transition : max-height var(--wcaf-transition), opacity var(--wcaf-transition);
    opacity    : 0;
}
.wcaf-filter-content.wcaf-expanded { max-height: 1200px; opacity: 1; }

/* ─── Categories ─────────────────────────────────────────────────────────── */
.wcaf-category-list,
.wcaf-subcategory-list { list-style: none; padding: 0; margin: 0; }
.wcaf-subcategory-list { padding-left: 25px; margin-top: 5px; }

.wcaf-category-item   { margin-bottom: 8px; }
.wcaf-subcategory-item{ margin-bottom: 5px; }

.wcaf-category-item label,
.wcaf-subcategory-item label {
    display    : flex;
    align-items: center;
    padding    : 12px 10px;
    cursor     : pointer;
    border-radius: var(--wcaf-radius);
    transition : background var(--wcaf-transition);
    min-height : 44px;
    -webkit-tap-highlight-color: transparent;
}
.wcaf-category-item label:hover,
.wcaf-subcategory-item label:hover { background: var(--wcaf-hover-bg); }

.wcaf-category-item input[type="checkbox"],
.wcaf-subcategory-item input[type="checkbox"] {
    margin-right: 10px;
    cursor      : pointer;
    width       : 20px;
    height      : 20px;
    flex-shrink : 0;
    accent-color: var(--wcaf-primary);
}
.wcaf-subcategory-item label { font-size: 14px; color: #666; }
.wcaf-count { margin-left: auto; color: #999; font-size: .9em; }

/* ─── Active filter badges ───────────────────────────────────────────────── */
.wcaf-active-badges {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 6px;
    margin-bottom  : 10px;
    min-height     : 0;
}
.wcaf-active-badges:empty { display: none; }

.wcaf-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    padding        : 3px 8px 3px 10px;
    background     : var(--wcaf-primary, #FECA0F);
    color          : var(--wcaf-btn-text, #57351D);
    border-radius  : 20px;
    font-size      : 12px;
    font-weight    : 600;
    line-height    : 1.4;
    max-width      : 100%;
    word-break     : break-word;
}

.wcaf-badge-label {
    flex           : 1;
    min-width      : 0;
}

.wcaf-badge-remove {
    background     : none;
    border         : none;
    cursor         : pointer;
    color          : inherit;
    font-size      : 10px;
    line-height    : 1;
    padding        : 0 0 0 2px;
    opacity        : .7;
    flex-shrink    : 0;
    transition     : opacity .15s;
}
.wcaf-badge-remove:hover { opacity: 1; }

/* ─── Search field ───────────────────────────────────────────────────────── */
.wcaf-search-wrap {
    position      : relative;
    display       : flex;
    align-items   : center;
    margin        : 0 0 16px;
    border        : 1px solid var(--wcaf-border, #e0e0e0);
    border-radius : var(--wcaf-radius, 4px);
    background    : #fff;
    transition    : border-color .2s;
}
.wcaf-search-wrap:focus-within {
    border-color  : var(--wcaf-primary, #FECA0F);
}
.wcaf-search-icon {
    display       : none; /* hidden — icon looked odd in sidebar context */
}
.wcaf-search-input {
    width         : 100%;
    padding       : 9px 30px 10px 12px !important;
    border        : none !important;
    background    : transparent !important;
    box-shadow    : none !important;
    font-family   : var(--wcaf-font);
    font-size     : 15px;
    line-height   : 1.4;
    color         : var(--wcaf-text, #2c3e50);
    outline       : none;
    -webkit-appearance: none !important;
    appearance    : none !important;
}
.wcaf-search-input::placeholder { color: #bbb; }

/* Hide the browser's native search clear/decoration so only our × button shows. */
.wcaf-search-input::-webkit-search-cancel-button,
.wcaf-search-input::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance        : none !important;
    display           : none !important;
}
.wcaf-search-input::-ms-clear,
.wcaf-search-input::-ms-reveal { display: none !important; width: 0; height: 0; }

.wcaf-search-clear {
    position          : absolute;
    right             : 8px;
    top               : 50%;
    transform         : translateY(-50%);
    background        : none !important;
    border            : none !important;
    box-shadow        : none !important;
    color             : #bbb;
    font-size         : 12px;
    cursor            : pointer;
    padding           : 4px;
    margin            : 0;
    line-height       : 1;
    min-height        : 0;
    transition        : color .15s;
    -webkit-appearance: none !important;
    appearance        : none !important;
}
.wcaf-search-clear:hover { color: var(--wcaf-text, #2c3e50); }

/* ─── jQuery UI slider structural CSS ────────────────────────────────────── */
/* Minimal positioning rules normally provided by the jQuery UI base theme.
   Bundled here so we don't load CSS from an external CDN. */
.wcaf-price-slider-wrapper .ui-slider { position: relative; text-align: left; }
.wcaf-price-slider-wrapper .ui-slider .ui-slider-handle {
    position    : absolute;
    z-index     : 2;
    cursor      : default;
    touch-action: none;
}
.wcaf-price-slider-wrapper .ui-slider .ui-slider-range {
    position : absolute;
    z-index  : 1;
    display  : block;
    border   : 0;
}
.wcaf-price-slider-wrapper .ui-slider-horizontal .ui-slider-range     { top: 0; height: 100%; }
.wcaf-price-slider-wrapper .ui-slider-horizontal .ui-slider-range-min { left: 0; }
.wcaf-price-slider-wrapper .ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* ─── Price Slider ───────────────────────────────────────────────────────── */
.wcaf-price-slider-wrapper { padding: 6px 0 4px; }

.wcaf-price-inputs {
    display        : flex;
    align-items    : flex-end;
    gap            : 8px;
    margin-bottom  : 16px;
}
.wcaf-price-input-group {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    gap            : 3px;
}
.wcaf-price-input-group label {
    font-size      : 10px;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : .5px;
    color          : #aaa;
    margin         : 0;
}
.wcaf-price-input-wrap {
    position       : relative;
    display        : flex;
    align-items    : center;
}
.wcaf-currency-symbol {
    position       : absolute;
    left           : 8px;
    font-size      : 12px;
    font-weight    : 700;
    color          : #999;
    pointer-events : none;
    z-index        : 1;
    line-height    : 1;
}
.wcaf-price-text-input {
    width          : 100%;
    padding        : 7px 6px 7px 22px !important;
    border         : 1px solid var(--wcaf-border, #e0e0e0);
    border-radius  : var(--wcaf-radius, 4px);
    font-size      : 13px;
    font-weight    : 600;
    color          : var(--wcaf-text, #2c3e50);
    background     : #fff;
    transition     : border-color .2s;
    -moz-appearance: textfield;
    box-sizing     : border-box;
}
.wcaf-price-text-input:focus {
    outline        : none;
    border-color   : var(--wcaf-primary, #FECA0F);
}
.wcaf-price-text-input::-webkit-outer-spin-button,
.wcaf-price-text-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wcaf-price-dash {
    font-size      : 16px;
    color          : #ccc;
    padding-bottom : 4px;
    flex-shrink    : 0;
}

/* Slider track — horizontal padding = half handle width (11px) so handles
   never overflow the edges of the track at min/max positions */
#wcaf-price-slider {
    margin         : 10px 0 16px;
    height         : 4px;
    background     : #e0e0e0;
    border-radius  : 2px;
    touch-action   : none;
    /* Inset the track so handles sit flush with the edges of the wrapper */
    padding        : 0;
    box-sizing     : content-box;
}
.wcaf-price-slider-wrapper {
    /* Give the slider room so the 11px-wide handles don't get clipped */
    padding        : 6px 11px 4px;
}

.ui-slider-horizontal            { height: 4px; }
.ui-slider-horizontal .ui-slider-handle {
    width          : 18px;
    height         : 18px;
    top            : -7px;
    margin-left    : -9px;
    background     : var(--wcaf-primary, #FECA0F);
    border         : 2px solid var(--wcaf-btn-text, #57351D);
    border-radius  : 50%;
    cursor         : grab;
    outline        : none;
    touch-action   : none;
    box-shadow     : 0 1px 4px rgba(0,0,0,.2);
    transition     : transform .15s, box-shadow .15s;
}
.ui-slider-horizontal .ui-slider-handle:hover,
.ui-slider-horizontal .ui-slider-handle:focus-visible { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.ui-slider-horizontal .ui-slider-handle:active { cursor: grabbing; transform: scale(1.1); }
.ui-slider-range { background: var(--wcaf-primary, #FECA0F); border-radius: 2px; }

/* ─── Action Buttons ─────────────────────────────────────────────────────── */
.wcaf-panel-footer {
    position   : sticky;
    bottom     : 0;
    background : var(--wcaf-bg, #ffffff);
    padding    : 12px 20px;
    border-top : 1px solid var(--wcaf-border, #e0e0e0);
    display    : flex;
    gap        : 8px;
    z-index    : 20;
    box-shadow : 0 -2px 8px rgba(0,0,0,.06);
}

.wcaf-inline-footer {
    display   : flex;
    gap       : 8px;
    padding   : 12px 0 2px;
}
.wcaf-inline-footer .wcaf-btn { flex: 1; }

.wcaf-btn {
    flex           : 1;
    padding        : 9px 12px;
    border         : 1px solid transparent;
    border-radius  : var(--wcaf-radius, 4px);
    font-family    : var(--wcaf-font);
    font-size      : 13px;
    font-weight    : 700;
    cursor         : pointer;
    transition     : all .2s;
    min-height     : 36px;
    position       : relative;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 5px;
    -webkit-tap-highlight-color: transparent;
}
.wcaf-btn:active { transform: scale(.97); }

.wcaf-btn-icon {
    font-size   : 14px;
    line-height : 1;
    flex-shrink : 0;
}

.wcaf-btn-primary {
    background  : var(--wcaf-primary, #FECA0F);
    color       : var(--wcaf-btn-text, #57351D);
    border-color: var(--wcaf-primary, #FECA0F);
}
.wcaf-btn-primary:hover  {
    background  : var(--wcaf-primary-hover, #ffd61a);
    border-color: var(--wcaf-primary-hover, #ffd61a);
    color       : var(--wcaf-btn-text, #57351D);
    box-shadow  : 0 2px 8px rgba(0,0,0,.15);
}

.wcaf-btn-secondary {
    background   : transparent;
    color        : var(--wcaf-text, #2c3e50);
    border-color : var(--wcaf-border, #e0e0e0);
}
.wcaf-btn-secondary:hover { background: var(--wcaf-hover-bg, #f5f5f5); border-color: #bbb; }

/* Loading state */
.wcaf-btn.loading               { pointer-events: none; opacity: .7; }
.wcaf-btn.loading .wcaf-btn-text,
.wcaf-btn.loading .wcaf-btn-icon { opacity: 0; }

.wcaf-btn-spinner {
    display         : none;
    position        : absolute;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    width           : 20px;
    height          : 20px;
    border          : 3px solid rgba(0,0,0,.15);
    border-top-color: var(--wcaf-btn-text, #57351D);
    border-radius   : 50%;
    animation       : wcaf-spin .8s linear infinite;
}
.wcaf-btn.loading .wcaf-btn-spinner { display: block; }

@keyframes wcaf-spin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.wcaf-checkbox-list { display: flex; flex-direction: column; gap: 8px; }

.wcaf-checkbox-item {
    display      : flex;
    align-items  : center;
    padding      : 12px 10px;
    border-radius: var(--wcaf-radius);
    transition   : background var(--wcaf-transition);
    min-height   : 44px;
    -webkit-tap-highlight-color: transparent;
}
.wcaf-checkbox-item:hover { background: var(--wcaf-hover-bg); }
.wcaf-checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    cursor      : pointer;
    width       : 20px;
    height      : 20px;
    flex-shrink : 0;
    accent-color: var(--wcaf-primary);
}
.wcaf-checkbox-item label { cursor: pointer; display: flex; align-items: center; width: 100%; }

/* ─── Overlay ────────────────────────────────────────────────────────────── */
.wcaf-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,.5);
    z-index    : 9998;
    display    : none;
    opacity    : 0;
    transition : opacity var(--wcaf-transition);
}
.wcaf-overlay.active { display: block; opacity: 1; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
.wcaf-filter-panel::-webkit-scrollbar       { width: 8px; }
.wcaf-filter-panel::-webkit-scrollbar-track { background: #f1f1f1; }
.wcaf-filter-panel::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.wcaf-filter-panel::-webkit-scrollbar-thumb:hover { background: #555; }

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wcaf-filter-panel {
        width        : 100%;
        left         : -100%;
        max-width    : 100vw;
        height       : 100%;
        max-height   : 100vh;
        display      : flex;
        flex-direction: column;
    }
    .wcaf-filter-panel.active { left: 0; }

    .wcaf-panel-content {
        flex           : 1;
        overflow-y     : auto;
        overflow-x     : hidden;
        min-height     : 0;
        -webkit-overflow-scrolling: touch;
    }

    .wcaf-panel-footer { position: relative; flex-shrink: 0; }

    #wcaf-filter-toggle.wcaf-filter-button {
        top          : calc(50vh - 60px) !important;
        left         : 15px !important;
        transform    : none !important;
        height       : 50px !important;
        padding      : 12px 18px !important;
        font-size    : 14px !important;
        border-radius: 8px !important;
    }

    body.wcaf-panel-open #wcaf-filter-toggle { display: none !important; }

    .ui-slider-horizontal .ui-slider-handle { width: 28px; height: 28px; top: -11px; margin-left: -14px; }
    #wcaf-price-slider { height: 8px; margin: 8px 4px 18px; }
    .wcaf-price-text-input { font-size: 16px; padding: 12px 10px 12px 26px !important; }
    .wcaf-btn { min-height: 56px; font-size: 16px; }
    .wcaf-category-item label,
    .wcaf-checkbox-item { min-height: 52px; padding: 15px 12px; }
}

@media (max-width: 480px) {
    #wcaf-filter-toggle.wcaf-filter-button {
        top   : calc(50vh - 50px) !important;
        left  : 10px !important;
        height: 45px !important;
    }
}

/* Prevent body scroll when panel is open */
body.wcaf-panel-open { overflow: hidden; }
@media (max-width: 768px) {
    body.wcaf-panel-open { position: fixed; width: 100%; height: 100%; }
}

/* iOS safe-area fix */
@supports (-webkit-touch-callout: none) {
    .wcaf-filter-panel { height: -webkit-fill-available; }
}

/* ─── Polish & accessibility ─────────────────────────────────────────────── */

/* Visible keyboard-focus rings on all interactive controls. */
.wcaf-filter-button:focus-visible,
.wcaf-close-btn:focus-visible,
.wcaf-btn:focus-visible,
.wcaf-badge-remove:focus-visible,
.wcaf-search-clear:focus-visible,
.wcaf-filter-title.wcaf-collapsible:focus-visible {
    outline        : 2px solid var(--wcaf-primary, #FECA0F);
    outline-offset : 2px;
    border-radius  : var(--wcaf-radius, 4px);
}
.wcaf-checkbox-item input[type="checkbox"]:focus-visible,
.wcaf-category-item input[type="checkbox"]:focus-visible,
.wcaf-subcategory-item input[type="checkbox"]:focus-visible {
    outline        : 2px solid var(--wcaf-primary, #FECA0F);
    outline-offset : 1px;
}

/* Count pill: lighter, right-aligned, consistent in both layouts. */
.wcaf-count {
    margin-left : auto;
    color       : #8a8a8a;
    font-size   : 12px;
    font-weight : 500;
    font-variant-numeric: tabular-nums;
    flex-shrink : 0;
    padding-left: 8px;
}

/* Active badges: a little more breathing room and a clear hover target. */
.wcaf-active-badges { margin-bottom: 12px; }
.wcaf-badge {
    box-shadow : 0 1px 2px rgba(0,0,0,.08);
}
.wcaf-badge-remove {
    width          : 16px;
    height         : 16px;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
}
.wcaf-badge-remove:hover { background: rgba(0,0,0,.12); opacity: 1; }

/* Tidy the collapsible chevron so it lines up with the title baseline. */
.wcaf-filter-title.wcaf-collapsible { gap: 8px; }
.wcaf-toggle-icon { color: var(--wcaf-text, #2c3e50); opacity: .55; }
.wcaf-filter-title.wcaf-collapsible:hover .wcaf-toggle-icon { opacity: 1; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .wcaf-filter-panel,
    .wcaf-overlay,
    .wcaf-filter-content,
    .wcaf-btn,
    .ui-slider-horizontal .ui-slider-handle {
        transition: none !important;
    }
    .wcaf-btn-spinner { animation-duration: 1.4s; }
}

/* ─── Inline filter shown on a no-results page (no theme sidebar) ─────────── */
.wcaf-inline-filters-standalone {
    max-width    : 340px;
    margin       : 0 0 28px;
}

/* ─── AJAX product-grid loading state ────────────────────────────────────── */
.wcaf-loading {
    position      : relative;
    opacity       : .55;
    pointer-events: none;
    transition    : opacity .2s;
}
.wcaf-loading::after {
    content       : "";
    position      : absolute;
    top           : 50px;
    left          : 50%;
    width         : 34px;
    height        : 34px;
    margin-left   : -17px;
    border        : 3px solid rgba(0,0,0,.15);
    border-top-color: var(--wcaf-primary, #FECA0F);
    border-radius : 50%;
    animation     : wcaf-spin-grid .8s linear infinite;
}
@keyframes wcaf-spin-grid { to { transform: rotate(360deg); } }