/* ============================================
   STOEVELAAR MACHINERY — Site CSS
   Bijgewerkt: 1 mei 2026 v33
   Samenvoeging: occasions.css v32 + mobiel v25
   ============================================ */


/* ============================================
   TYPOGRAFIE — Cera Pro font
   ============================================ */

body,
h1, h2, h3, h4, h5, h6,
p, a, span, div,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button-text,
.elementor-nav-menu a,
input, select, textarea, button {
    font-family: 'Cera Pro', sans-serif;
}


/* ============================================
   LOOP RASTER — ruimte tussen machinekaarten
   ============================================ */

.elementor-loop-container.elementor-grid {
    gap: 16px !important;
    align-items: stretch !important;
    padding-bottom: 60px !important;
}


/* ============================================
   ZOEKBALK — aangepaste HTML widget (.stv-search-wrap)
   ============================================ */

.stv-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.stv-search-wrap input[type="search"] {
    width: 100%;
    height: 44px;
    font-family: 'Cera Pro', sans-serif;
    font-size: 13px;
    font-weight: 400;
    border: 1.5px solid #E4002B;
    border-radius: 7px;
    padding: 0 44px 0 14px;
    box-sizing: border-box;
    color: #222;
    background: #fff;
    -webkit-appearance: none;
}
.stv-search-wrap input[type="search"]:focus {
    outline: none;
    border-color: #C0001F;
}
.stv-search-wrap input[type="search"]::placeholder {
    color: #C0BDB8;
    font-weight: 300;
}
.stv-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: #333333;
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}


/* ============================================
   FACETWP — algemeen
   ============================================ */

.elementor-widget-shortcode {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.facetwp-facet-zoek_occasion_nl,
.facetwp-facet-zoek_occasion_en {
    display: none !important;
}
.facetwp-facet-label,
.facetwp-facet::before {
    display: none !important;
}
.stv-filter-body .facetwp-facet {
    margin-bottom: 0 !important;
}
.facetwp-selections,
.facetwp-selections * {
    display: none !important;
}

/* Wis alle filters — rode tekstlink */
.stv-reset-wrap {
    text-align: right;
    margin-bottom: 8px;
}
.stv-reset-btn {
    all: unset;
    font-size: 12px;
    color: #E4002B !important;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Cera Pro', sans-serif;
}
.stv-reset-btn:hover {
    color: #C0001F !important;
}

/* Number range — Van/Tot en Min/Max inline met rode knop */
.facetwp-type-number_range {
    display: grid !important;
    grid-template-columns: 1fr 1fr 36px !important;
    grid-template-rows: auto !important;
    gap: 4px !important;
    align-items: center !important;
}
.facetwp-type-number_range .facetwp-number-min {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    font-size: 13px !important;
    font-family: 'Cera Pro', sans-serif !important;
    border: 1px solid #D5D2CD !important;
    border-radius: 5px !important;
    padding: 0 6px !important;
    color: #333 !important;
}
.facetwp-type-number_range .facetwp-number-max {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    font-size: 13px !important;
    font-family: 'Cera Pro', sans-serif !important;
    border: 1px solid #D5D2CD !important;
    border-radius: 5px !important;
    padding: 0 6px !important;
    color: #333 !important;
}
.facetwp-type-number_range .facetwp-number-min:focus,
.facetwp-type-number_range .facetwp-number-max:focus {
    outline: none !important;
    border-color: #E4002B !important;
}
.facetwp-type-number_range .facetwp-submit {
    display: none !important;
}
.stv-number-go {
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    background: #E4002B !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.stv-number-go:hover {
    background: #C0001F !important;
}


/* ============================================
   SIDEBAR FILTERS — accordion groepen
   ============================================ */

.stv-filter-group {
    border-bottom: 1px solid #E0DDD9;
    margin-bottom: 0;
    display: block;
}
.stv-filter-group:last-child {
    border-bottom: none;
}
.stv-filter-group + .stv-filter-group {
    border-top: 2px solid #1a1a1a;
}

/* Accordion header */
.stv-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px !important;
    background: #333333 !important;
    cursor: pointer !important;
    user-select: none !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-family: 'Cera Pro', sans-serif !important;
}
.stv-filter-header svg {
    width: 13px !important;
    height: 13px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.2;
    transition: transform 0.2s;
    flex-shrink: 0;
    display: block !important;
}
.stv-filter-group.is-open .stv-filter-header svg {
    transform: rotate(180deg);
}

/* Border-radius eerste en laatste header */
.stv-filter-group:first-child .stv-filter-header {
    border-radius: 7px 7px 0 0;
}
.stv-filter-group:last-child .stv-filter-header {
    border-radius: 0 0 7px 7px;
}

/* Accordion body */
.stv-filter-body {
    display: none;
    padding: 10px 14px;
    background: #fff;
}
.stv-filter-group.is-open .stv-filter-body {
    display: block;
}

/* Checkboxen */
.stv-filter-body .facetwp-checkbox {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
    padding-left: 0 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #333 !important;
    font-family: 'Cera Pro', sans-serif !important;
    gap: 8px !important;
    background-image: none !important;
    margin-bottom: 0 !important;
}
.stv-filter-body .facetwp-checkbox::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border: 1.5px solid #C0BDB8 !important;
    border-radius: 3px !important;
    background: #fff !important;
    background-image: none !important;
    flex-shrink: 0 !important;
}
.stv-filter-body .facetwp-checkbox.checked::before {
    background: #E4002B !important;
    border-color: #E4002B !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.stv-filter-body .facetwp-checkbox:hover {
    color: #E4002B !important;
}
.stv-filter-body .facetwp-checkbox.checked {
    color: #E4002B !important;
    font-weight: 600 !important;
}
.stv-filter-body .facetwp-display-value {
    flex: 1;
}
.stv-filter-body .facetwp-counter {
    font-size: 11px;
    color: #999;
}

/* Dropdown (Soort / Categorie) */
.stv-filter-body .facetwp-dropdown {
    width: 100%;
    height: 36px;
    font-size: 13px;
    font-family: 'Cera Pro', sans-serif;
    border: 1px solid #D5D2CD;
    border-radius: 5px;
    padding: 0 30px 0 10px;
    color: #333;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}
.stv-filter-body .facetwp-dropdown:focus {
    outline: none;
    border-color: #E4002B;
}

/* noUiSlider (Bouwjaar / Urenstand) */
.stv-filter-body .noUi-target {
    background: #E8E5E0;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    height: 4px;
    margin: 16px 6px 10px;
}
.stv-filter-body .noUi-connect {
    background: #E4002B;
}
.stv-filter-body .noUi-handle {
    background: #E4002B;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    width: 18px !important;
    height: 18px !important;
    top: -8px !important;
    right: -9px !important;
    cursor: grab;
}
.stv-filter-body .noUi-handle::before,
.stv-filter-body .noUi-handle::after {
    display: none;
}
.stv-filter-body .facetwp-slider-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    margin-top: 4px;
    text-align: center;
    font-family: 'Cera Pro', sans-serif;
}
.stv-filter-body .facetwp-slider-reset {
    display: block;
    margin: 8px auto 0;
    padding: 3px 12px;
    font-size: 11px;
    font-family: 'Cera Pro', sans-serif;
    color: #888;
    background: transparent;
    border: 1px solid #D5D2CD;
    border-radius: 4px;
    cursor: pointer;
}
.stv-filter-body .facetwp-slider-reset:hover {
    border-color: #E4002B;
    color: #E4002B;
}


/* ============================================
   MACHINEKAART — layout, foto, titel, iconen, badge
   ============================================ */

.e-loop-item .e-con-full {
    position: relative !important;
    overflow: hidden;
    border-radius: 12px;
    padding-top: 0 !important;
}
.e-loop-item .e-con-full.e-flex.e-con.e-parent {
    padding-top: 0 !important;
    padding-block-start: 0 !important;
    row-gap: 8px !important;
}
.e-loop-item .e-con-full > .e-con:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.e-loop-item .e-con-full > .e-con {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.e-loop-item .elementor-widget-image {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.e-loop-item .elementor-widget-image .elementor-widget-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 0 !important;
}
.e-loop-item .elementor-widget-image img {
    display: block !important;
    margin-top: 0 !important;
    border-radius: 12px 12px 0 0 !important;
}

.e-loop-item .elementor-heading-title {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.e-loop-item .elementor-icon-list-items {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-top: 20px !important;
    padding-bottom: 8px !important;
}
.e-loop-item .elementor-icon-list-text {
    color: #666666 !important;
    line-height: 1.4 !important;
}
.e-loop-item .elementor-icon-list-icon {
    line-height: 1.4 !important;
}
.e-loop-item .elementor-icon-list-icon i,
.e-loop-item .elementor-icon-list-icon svg {
    color: #666666 !important;
    fill: #666666 !important;
}

.stv-badge {
    position: absolute !important;
    bottom: 10px;
    right: 10px;
    top: auto !important;
    left: auto !important;
    z-index: 10;
    margin: 0 !important;
}
.stv-badge .elementor-heading-title {
    background-color: #E8A000;
    color: #fff;
    font-family: 'Cera Pro', sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    line-height: 1.4;
    margin-bottom: 0 !important;
}
.stv-badge .elementor-heading-title:empty {
    display: none;
}


/* ============================================
   SINGLE OCCASION — detail pagina
   ============================================ */

.occasion-top {
    align-items: stretch;
}
.occasion-top .col-md-8 {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.occasion-top .col-md-4 {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.occasion_table {
    flex: 1;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}
.occasion_table tr:last-child td,
.occasion_table tr:last-child th {
    border-bottom: none;
}
.occasion-top .table {
    margin-bottom: 0 !important;
}
.extra-informatie {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.extra-informatie h2 {
    color: #E4002B;
    margin-bottom: 12px;
}
.single-occasions h1 {
    font-weight: 800 !important;
    margin-top: 40px;
    margin-bottom: 16px;
}


/* ============================================
   TOPBAR — zwarte balk symmetrisch
   ============================================ */

.elementor-element-851c871 > .e-con-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}


/* ============================================
   PAGINERING — Elementor (desktop + mobiel)
   ============================================ */

.elementor-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

.elementor-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1.5px solid #D5D2CD !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-family: 'Cera Pro', sans-serif !important;
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: #fff !important;
    text-decoration: none !important;
}

.elementor-pagination .page-numbers.current {
    background: #E4002B !important;
    border-color: #E4002B !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.elementor-pagination .page-numbers:hover:not(.current) {
    border-color: #E4002B !important;
    color: #E4002B !important;
}

.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
    font-weight: 600 !important;
    padding: 0 16px !important;
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

.elementor-pagination .page-numbers.prev:hover,
.elementor-pagination .page-numbers.next:hover {
    background: #E4002B !important;
    border-color: #E4002B !important;
    color: #fff !important;
}

.elementor-pagination .elementor-screen-only {
    display: none !important;
}


/* ============================================
   DESKTOP — filters links forceren
   ============================================ */

@media (min-width: 769px) {
    .elementor-element-7a374f2 {
        order: -1 !important;
    }
    .elementor-element-c7e3d8b {
        order: 0 !important;
    }
}


/* ============================================
   MOBIEL
   ============================================ */

@media (max-width: 768px) {

    /* Pagina breedte fix */
    .elementor-21067,
    .elementor-18888,
    .elementor-element-f37f740,
    .elementor-element-f37f740 > .e-con-inner {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buitenste container — verticaal stapelen */
    .elementor-element-f37f740 > .e-con-inner {
        flex-direction: column !important;
    }

    /* Loop grid — 1 kolom */
    .elementor-loop-container.elementor-grid {
        grid-template-columns: 1fr !important;
        padding-bottom: 30px !important;
        gap: 12px !important;
    }

    /* Machinekaart — volledige breedte */
    .e-loop-item {
        width: 100% !important;
        max-width: 100% !important;
    }
    .e-loop-item .e-con-full {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Machinekaart foto hoogte beperken */
    .e-loop-item .elementor-widget-image img {
        max-height: 220px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    /* Filters header — minder padding */
    .stv-filter-header {
        padding: 9px 14px !important;
    }

    /* Filter headers — geen border-radius op mobiel */
    .stv-filter-group:first-child .stv-filter-header,
    .stv-filter-group:last-child .stv-filter-header {
        border-radius: 0 !important;
    }

    /* Zoekbalk — minder ruimte onder */
    .stv-search-wrap {
        margin-bottom: 10px !important;
    }

    /* Buitenste container padding */
    .elementor-element-f37f740 > .e-con-inner {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* Glightbox icoontje verbergen */
    .glightbox-desc,
    .stv-glightbox-trigger {
        display: none !important;
    }

    /* Cookie consent icoontje verbergen */
    #cc-icon {
        display: none !important;
    }

    /* Volgorde — filters boven, machines+banner onder */
    .elementor-element-7a374f2 {
        order: 1 !important;
        margin-top: 90px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .elementor-element-7a374f2 > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .elementor-element-c7e3d8b {
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .elementor-element-c7e3d8b > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Verberg decoratief zwart/rood blok boven banner */
    .elementor-element-c7e3d8b > .e-con-inner > .e-con:first-child {
        display: none !important;
    }

    /* Banner container — rode achtergrond */
    .elementor-element-e0abd28 {
        background: #E4002B !important;
        background-image: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 0 16px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Banner heading verbergen */
    .elementor-element-9405bf3 {
        display: none !important;
    }

    /* Banner tekst NL */
    .elementor-21067 .elementor-element-e0abd28::before {
        content: 'AANBOD GEBRUIKTE EN NIEUWE MACHINES';
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
        font-family: 'Cera Pro', sans-serif !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 0 10px !important;
    }

    /* Banner tekst EN */
    .elementor-18888 .elementor-element-e0abd28::before {
        content: 'USED AND NEW EQUIPMENT OFFERS';
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
        font-family: 'Cera Pro', sans-serif !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 0 10px !important;
    }

    /* FILTERS heading verbergen op mobiel */
    .elementor-element-13df769 {
        display: none !important;
    }

    /* Accordion — geforceerd gesloten op mobiel */
    .stv-filter-group.is-open .stv-filter-body {
        display: none !important;
    }
    .stv-filter-group.is-open.stv-mobile-open .stv-filter-body {
        display: block !important;
    }

    /* Filters witte ruimte rechts fix */
    .elementor-element-7a374f2 {
        --padding-right: 0px !important;
        --padding-left: 0px !important;
        --container-max-width: 100% !important;
    }
    .elementor-element-7a374f2.e-con.e-flex {
        --flex-basis: 100% !important;
        flex-basis: 100% !important;
    }
    .stv-filter-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .stv-filter-header {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}