/* Brakker Pro v3.4 */
:root{--bpro-primary:#2563eb;--bpro-secondary:#64748b;--bpro-text:#1e293b;--bpro-border:#e2e8f0;--bpro-bg:#f8fafc;--bpro-radius:8px;--bpro-panel-top:60px}
body.bpro-no-scroll{overflow:hidden}

/* Filter Row */
.bpro-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding:14px;background:#fff;border:1px solid var(--bpro-border);border-radius:var(--bpro-radius)}
.bpro-filter-trigger{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:var(--bpro-primary);color:#fff;border:none;border-radius:var(--bpro-radius);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0}
.bpro-filter-trigger:hover{filter:brightness(.9)}
.bpro-filter-badge{background:#fff;color:var(--bpro-primary);padding:2px 6px;border-radius:10px;font-size:10px;font-weight:600;margin-left:3px}
.bpro-filter-badge:empty{display:none}

/* Use case badges - hide on mobile, show dropdown instead */
.bpro-usecase-badges{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.bpro-badge{display:inline-flex;align-items:center;padding:7px 12px;background:#fff;border:1px solid var(--bpro-border);border-radius:18px;font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap}
.bpro-badge:hover{border-color:var(--bpro-primary)}
.bpro-badge input{display:none}
.bpro-badge:has(input:checked){background:var(--bpro-primary);border-color:var(--bpro-primary);color:#fff}

/* Mobile dropdown for use cases */
.bpro-usecase-mobile{display:none;flex:1}
.bpro-usecase-mobile select{width:100%;padding:10px 30px 10px 12px;border:1px solid var(--bpro-border);border-radius:var(--bpro-radius);font-size:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer}
.bpro-usecase-mobile select.has-selection{border-color:var(--bpro-primary);color:var(--bpro-primary)}

@media(max-width:768px){
    .bpro-usecase-badges{display:none}
    .bpro-usecase-mobile{display:block}
    .bpro-filter-row{gap:8px;padding:10px}
    .bpro-filter-trigger{padding:8px 12px;font-size:13px}
    .bpro-sort{padding:8px 28px 8px 10px;font-size:12px}
}

/* Sort */
.bpro-sort-wrap{flex-shrink:0}
.bpro-sort{padding:10px 30px 10px 12px;border:1px solid var(--bpro-border);border-radius:var(--bpro-radius);font-size:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer}

/* Filter Panel */
.bpro-filter-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9998}
.bpro-filter-overlay.open{display:block}
.bpro-filter-panel{position:fixed;top:0;right:-480px;width:440px;max-width:95vw;height:100%;background:#fff;z-index:9999;overflow-y:auto;transition:right .3s ease;box-shadow:-5px 0 25px rgba(0,0,0,.15);padding:20px;padding-top:var(--bpro-panel-top)}
.bpro-filter-panel.open{right:0}
.bpro-filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--bpro-border)}
.bpro-filter-header h3{margin:0;font-size:17px;font-weight:600}
.bpro-filter-close{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--bpro-secondary)}

/* Filter Form */
.bpro-filter-form{display:flex;flex-direction:column;gap:18px}
.bpro-filter-section{background:transparent}
.bpro-label{display:block;font-size:11px;font-weight:600;color:var(--bpro-text);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.bpro-filter-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bpro-filter-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:500px){.bpro-filter-grid-2,.bpro-filter-grid-3{grid-template-columns:1fr 1fr}}

/* Use Cases - no blue bg */
.bpro-use-cases{display:flex;flex-wrap:wrap;gap:5px}
.bpro-use-case{display:flex;align-items:center;padding:7px 11px;background:#fff;border:1px solid var(--bpro-border);border-radius:18px;font-size:11px;cursor:pointer;transition:all .15s}
.bpro-use-case:hover{border-color:var(--bpro-primary)}
.bpro-use-case input{display:none}
.bpro-use-case:has(input:checked){background:var(--bpro-primary);border-color:var(--bpro-primary);color:#fff;font-weight:500}

/* Sliders - fix overflow */
.bpro-slider-wrap{padding:0 10px}
.bpro-slider{position:relative;height:22px;display:flex;align-items:center}
.bpro-slider-track{position:absolute;left:0;right:0;height:4px;background:var(--bpro-border);border-radius:2px}
.bpro-slider-range{position:absolute;height:4px;background:var(--bpro-primary);border-radius:2px}
.bpro-slider input[type=range]{position:absolute;width:100%;height:22px;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}
.bpro-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#fff;border:2px solid var(--bpro-primary);border-radius:50%;cursor:pointer;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.bpro-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#fff;border:2px solid var(--bpro-primary);border-radius:50%;cursor:pointer}
.bpro-slider-values{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--bpro-secondary);margin-top:3px}
.bpro-val-min,.bpro-val-max{font-weight:600;color:var(--bpro-text)}

/* Select */
.bpro-select{width:100%;padding:7px 24px 7px 8px;border:1px solid var(--bpro-border);border-radius:5px;font-size:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 6px center;appearance:none}
.bpro-select:focus{outline:none;border-color:var(--bpro-primary)}

/* Buttons */
.bpro-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 16px;font-size:13px;font-weight:500;border:none;border-radius:var(--bpro-radius);cursor:pointer;transition:all .15s;text-decoration:none}
.bpro-btn-primary{background:var(--bpro-primary);color:#fff}
.bpro-btn-primary:hover{filter:brightness(.9)}
.bpro-btn-secondary{background:var(--bpro-bg);color:var(--bpro-secondary);border:1px solid var(--bpro-border)}
.bpro-btn-outline{background:#fff;color:var(--bpro-text);border:1px solid var(--bpro-border)}
.bpro-btn-outline:hover{border-color:var(--bpro-primary);color:var(--bpro-primary)}
.bpro-btn-sm{padding:7px 12px;font-size:12px}
.bpro-btn-full{width:100%}
.bpro-btn-loading{display:none}
.bpro-btn.loading .bpro-btn-text{display:none}
.bpro-btn.loading .bpro-btn-loading{display:inline}
.bpro-filter-actions{display:flex;gap:10px;padding-top:14px;border-top:1px solid var(--bpro-border)}
.bpro-filter-actions .bpro-btn-primary{flex:1}

/* Grid */
.bpro-container{position:relative;min-height:200px}
.bpro-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bpro-count{font-size:13px;color:var(--bpro-secondary)}
.bpro-count-showing,.bpro-count-total{font-weight:600;color:var(--bpro-text)}
.bpro-loader{display:none;width:20px;height:20px;border:3px solid var(--bpro-border);border-top-color:var(--bpro-primary);border-radius:50%;animation:bpro-spin .7s linear infinite}
.bpro-container.loading .bpro-loader{display:block}
@keyframes bpro-spin{to{transform:rotate(360deg)}}

.bpro-grid{display:grid;grid-template-columns:repeat(var(--bpro-cols,3),1fr);gap:18px}
@media(max-width:1024px){.bpro-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bpro-grid{grid-template-columns:1fr}}

/* Card */
.bpro-card{position:relative;background:#fff;border:1px solid var(--bpro-border);border-radius:var(--bpro-radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.bpro-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.bpro-card-icons{position:absolute;top:8px;right:8px;display:flex;gap:5px;z-index:2}
.bpro-icon{display:inline-flex;align-items:center;gap:2px;padding:4px 8px;background:rgba(255,255,255,.95);border-radius:12px;font-size:10px;font-weight:600;color:var(--bpro-text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.bpro-card-tags{position:absolute;top:8px;left:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:2;max-width:60%}
.bpro-tag{padding:3px 7px;background:var(--bpro-primary);color:#fff;border-radius:10px;font-size:9px;font-weight:500}
.bpro-card-link{display:block;text-decoration:none;color:inherit}
.bpro-card-image{aspect-ratio:4/3;overflow:hidden;background:var(--bpro-bg)}
.bpro-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.bpro-card:hover .bpro-card-image img{transform:scale(1.05)}
.bpro-card-body{padding:12px}
.bpro-card-title{margin:0 0 5px;font-size:14px;font-weight:600;color:var(--bpro-text)}
.bpro-card-specs{display:flex;flex-wrap:wrap;gap:3px 8px;margin:0;padding:0;list-style:none}
.bpro-card-specs li{font-size:11px;color:var(--bpro-secondary)}
.bpro-card-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 12px}

/* Empty */
.bpro-empty{grid-column:1/-1;text-align:center;padding:40px 20px;background:var(--bpro-bg);border-radius:var(--bpro-radius)}
.bpro-empty p{margin:0 0 12px;color:var(--bpro-secondary)}

/* Pagination */
.bpro-pagination{display:flex;justify-content:center;gap:4px;margin-top:24px}
.bpro-pagination:empty{display:none}
.bpro-pagination a,.bpro-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;font-size:13px;border-radius:var(--bpro-radius);text-decoration:none}
.bpro-pagination a{background:#fff;border:1px solid var(--bpro-border);color:var(--bpro-text)}
.bpro-pagination a:hover{background:var(--bpro-primary);border-color:var(--bpro-primary);color:#fff}
.bpro-pagination span.current{background:var(--bpro-primary);color:#fff}

/* Modal */
.bpro-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;padding:20px}
.bpro-modal.open{display:flex}
.bpro-modal-content{background:#fff;border-radius:var(--bpro-radius);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:22px;position:relative}
.bpro-modal-lg{max-width:560px}
.bpro-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--bpro-secondary)}
.bpro-modal-title{margin:0 0 5px;font-size:18px;font-weight:600}
.bpro-modal-product{color:var(--bpro-primary);font-weight:500;margin:0 0 14px;font-size:14px}

/* Tabs */
.bpro-tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--bpro-border)}
.bpro-tab{padding:8px 14px;background:none;border:none;border-bottom:2px solid transparent;font-size:13px;font-weight:500;color:var(--bpro-secondary);cursor:pointer;margin-bottom:-1px}
.bpro-tab:hover{color:var(--bpro-text)}
.bpro-tab.active{color:var(--bpro-primary);border-bottom-color:var(--bpro-primary)}
.bpro-tab-content{display:none}
.bpro-tab-content.active{display:block}

/* Form */
.bpro-contact-form{display:flex;flex-direction:column;gap:12px}
.bpro-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:500px){.bpro-form-row{grid-template-columns:1fr}}
.bpro-form-group{display:flex;flex-direction:column;gap:4px}
.bpro-form-group label{font-size:11px;font-weight:500;color:var(--bpro-text)}
.bpro-form-group input,.bpro-form-group select,.bpro-form-group textarea{padding:8px 10px;border:1px solid var(--bpro-border);border-radius:5px;font-size:13px;font-family:inherit}
.bpro-form-group input:focus,.bpro-form-group select:focus,.bpro-form-group textarea:focus{outline:none;border-color:var(--bpro-primary)}
.bpro-checkbox-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.bpro-checkbox-grid label{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}
.bpro-privacy label{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--bpro-secondary)}
.bpro-privacy input{margin-top:2px}
.bpro-privacy a{color:var(--bpro-primary)}
.bpro-form-actions{padding-top:6px}
.bpro-form-message{text-align:center;padding:8px;border-radius:5px;margin-top:8px;font-size:13px}
.bpro-form-message:empty{display:none}
.bpro-form-message.success{background:#dcfce7;color:#166534}
.bpro-form-message.error{background:#fee2e2;color:#991b1b}
.bpro-warning{display:flex;gap:10px;padding:12px;background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;margin-top:12px}
.bpro-warning svg{flex-shrink:0;color:#d97706}
.bpro-warning strong{display:block;margin-bottom:2px;color:#92400e;font-size:12px}
.bpro-warning p{margin:0;font-size:11px;color:#78350f}

/* Slider shortcode */
.bpro-slider-wrap{position:relative;overflow:hidden}
.bpro-slider-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 0}
.bpro-slider-track::-webkit-scrollbar{display:none}
.bpro-slide{flex:0 0 280px;scroll-snap-align:start;background:#fff;border:1px solid var(--bpro-border);border-radius:var(--bpro-radius);overflow:hidden}
.bpro-slide a{text-decoration:none;color:inherit}
.bpro-slide-img{aspect-ratio:16/10;overflow:hidden}
.bpro-slide-img img{width:100%;height:100%;object-fit:cover}
.bpro-slide-info{padding:12px}
.bpro-slide-info h4{margin:0 0 4px;font-size:14px;font-weight:600}
.bpro-slide-info span{font-size:12px;color:var(--bpro-secondary)}
.bpro-slider-prev,.bpro-slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid var(--bpro-border);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;z-index:2}
.bpro-slider-prev{left:10px}
.bpro-slider-next{right:10px}