/**
 * Outsole Lace Matcher — base styles.
 *
 * Most of the page's styling lives in the inline <style> block that
 * shortcode.php prints (it ships with the PHP, so it can never drift from
 * the markup). This file only carries what the inline block builds ON:
 * the CSS variables, the box-sizing reset, and the JS-created elements
 * that live outside #olm-app (the eyedropper loupe and the toast).
 *
 * 0.62.0 cleanup: all rules for the removed legacy matcher (custom result
 * grid, quick-add, shape filter, top-box layout, spinner, quality badges,
 * old eyedropper chip) were deleted — dead selectors on the live page.
 */

.olm-app, .olm-app *, .olm-app *::before, .olm-app *::after {
    box-sizing: border-box;
}

.olm-app {
    --olm-primary: #e71e25;
    --olm-success: #18e1da;
    --olm-alert: #FF5F00;
    --olm-text: #000;
    --olm-muted: #777;
    --olm-border: #e5e5e5;
    --olm-bg: #fff;
    /* No font-family here on purpose: inherit Flatsome's Base Text Font (Inter)
       so all matcher body text follows the theme instead of a hardcoded font.
       Headings pick up the theme's heading font (Antonio). */
    color: var(--olm-text);
    line-height: 1.4;
}

/* Anchor for the reupload button, "Kies kleur" chip and tap hint. */
.olm-shoe-image-wrap {
    position: relative;
}

.olm-shoe-image-wrap img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* Colour preview bubble that follows the eyedropper (JS appends it to
   <body>, outside #olm-app — so it can't live in the inline block, which
   scopes everything under the app id). */
.olm-color-loupe {
    position: fixed;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.1);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100000; /* above the zoom overlay (99980), under nothing that matters */
    display: none;
}

/* Error toast (bottom-centre, fixed — also outside the app's stacking flow). */
.olm-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--olm-primary, #e71e25);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.3s;
}

.olm-toast.olm-hidden { opacity: 0; pointer-events: none; }
