/* ==========================================================================
   CALLCOMPANY × REPAIRPLUGIN PRO — Theme Stijl Integratie v3
   Zorgt dat alle RepairPlugin Pro shortcode-output naadloos aansluit
   op het Callcompany theme. Dekt zowel rp-* als ros-* class-prefixes.
   ========================================================================== */

/* ---- VARIABELEN SYNCHRONISATIE ---- */
:root {
    /* RepairPlugin Pro variabelen → theme tokens */
    --rp-primary:           var(--cc-red);
    --rp-primary-dark:      var(--cc-red-dark);
    --rp-font-family:       var(--cc-font);
    --rp-font-family-head:  var(--cc-font-head);
    --rp-border-radius:     var(--cc-radius);
    --rp-shadow:            var(--cc-shadow);
    --rp-border-color:      var(--cc-border);
    --rp-text-color:        var(--cc-dark);
    --rp-text-muted:        var(--cc-gray);
    --rp-bg-light:          var(--cc-gray-light);

    /* Legacy RepairOS aliassen */
    --ros-primary:          var(--cc-red);
    --ros-primary-dark:     var(--cc-red-dark);
}

/* ==========================================================================
   WIZARD WRAPPER — responsive containment
   ========================================================================== */
.rp-wizard,
.rp-wizard-container,
.rp-front-end-wrapper,
.ros-wizard {
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.rp-wizard *,
.rp-wizard *::before,
.rp-wizard *::after,
.rp-wizard-container *,
.rp-front-end-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   STAP 2/3 — SERIE/FILTER TABS: scroll-fix
   ========================================================================== */
#rp-series-filter,
#ros-series-filter,
.rp-filter-tabs,
.rp-tabs-wrapper,
.ros-filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    padding: 4px 0 10px;
    margin-bottom: 16px;
    max-width: 100%;
    width: 100%;
}

#rp-series-filter::-webkit-scrollbar,
#ros-series-filter::-webkit-scrollbar,
.rp-filter-tabs::-webkit-scrollbar,
.ros-filter-tabs::-webkit-scrollbar { display: none; }

.rp-filter-wrapper,
.ros-filter-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.rp-filter-chip,
.rp-filter-tab,
.ros-filter-chip {
    flex-shrink: 0;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
}

/* Actieve filter-chip: theme kleur */
.rp-filter-chip.active,
.rp-filter-tab.active,
.ros-filter-chip.active {
    background-color: var(--cc-red) !important;
    color: #fff !important;
    border-color: var(--cc-red) !important;
}

/* ==========================================================================
   MERK KAARTEN
   ========================================================================== */
.rp-brand-card,
.rp-brand-item,
.ros-brand-card {
    border-radius: var(--cc-radius) !important;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    cursor: pointer;
}
.rp-brand-card:hover,
.rp-brand-item:hover,
.ros-brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10) !important;
}
.rp-brand-card.selected,
.rp-brand-item.selected,
.ros-brand-card.selected {
    border-color: var(--cc-red) !important;
    box-shadow: 0 0 0 2px var(--cc-red)44 !important;
}

/* ==========================================================================
   MODEL KAARTEN
   ========================================================================== */
.rp-model-card,
.rp-model-item,
.ros-model-card {
    border-radius: var(--cc-radius) !important;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.rp-model-card:hover,
.rp-model-item:hover,
.ros-model-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10) !important;
}
.rp-model-card.selected,
.rp-model-item.selected,
.ros-model-card.selected {
    border-color: var(--cc-red) !important;
    box-shadow: 0 0 0 2px var(--cc-red)44 !important;
}

/* ==========================================================================
   REPARATIE-ITEMS
   ========================================================================== */
.rp-repair-item,
.rp-repair-card,
.ros-repair-item {
    border-radius: var(--cc-radius) !important;
    transition: border-color .2s, box-shadow .2s;
}
.rp-repair-item.selected,
.rp-repair-card.selected,
.ros-repair-item.selected {
    border-color: var(--cc-red) !important;
    box-shadow: 0 0 0 2px var(--cc-red)33 !important;
}

/* ==========================================================================
   KNOPPEN
   ========================================================================== */
.rp-btn-primary,
.rp-submit-btn,
.rp-next-btn,
.rp-book-btn,
.rp-cta-btn,
.ros-btn {
    background-color: var(--cc-red) !important;
    border-color:     var(--cc-red) !important;
    font-family:      var(--cc-font-head) !important;
    letter-spacing:   0.3px;
    border-radius:    var(--cc-radius) !important;
    transition:       background-color .2s, border-color .2s !important;
}
.rp-btn-primary:hover,
.rp-submit-btn:hover,
.rp-next-btn:hover,
.rp-book-btn:hover,
.rp-cta-btn:hover,
.ros-btn:hover {
    background-color: var(--cc-red-dark) !important;
    border-color:     var(--cc-red-dark) !important;
}

.rp-btn-outline,
.rp-back-btn {
    border-color: var(--cc-red) !important;
    color:        var(--cc-red) !important;
    border-radius: var(--cc-radius) !important;
}
.rp-btn-outline:hover,
.rp-back-btn:hover {
    background-color: var(--cc-red) !important;
    color: #fff !important;
}

/* ==========================================================================
   VOORTGANGSBALK & STAP-INDICATORS
   ========================================================================== */
.rp-progress-bar .rp-fill,
.rp-progress-bar .rp-progress-fill,
.rp-progress-fill {
    background-color: var(--cc-red) !important;
}

.rp-step-number.active,
.rp-step.active .rp-step-number,
.rp-step.done .rp-step-number,
.ros-progress-step.active span,
.ros-progress-step.done span {
    background: var(--cc-red) !important;
    color: #fff !important;
}

.rp-step.active .rp-step-label,
.rp-step-label.active {
    color: var(--cc-red) !important;
    font-weight: 700;
}

/* ==========================================================================
   PRIJZEN & ACCENTEN
   ========================================================================== */
.rp-price,
.rp-price-amount,
.rp-total-price,
.rp-total,
.ros-price {
    color: var(--cc-red) !important;
    font-weight: 700;
}

.rp-discount-badge,
.rp-badge-sale {
    background: var(--cc-red) !important;
    color: #fff !important;
}

/* ==========================================================================
   SUCCES / BEVESTIGING
   ========================================================================== */
.rp-check-icon,
.rp-success-icon,
.rp-confirmation-check,
.ros-check-icon {
    background: var(--cc-red) !important;
}

.rp-success-title,
.rp-confirmation-title {
    font-family: var(--cc-font-head) !important;
    color: var(--cc-dark) !important;
}

/* ==========================================================================
   TYPOGRAFIE AANSLUITING
   ========================================================================== */
.rp-wizard h1,
.rp-wizard h2,
.rp-wizard h3,
.rp-wizard-container h2,
.rp-step-title,
.rp-section-title,
.ros-wizard h2 {
    font-family: var(--cc-font-head) !important;
}

/* ==========================================================================
   PRIJSTABEL [Repair_Pricing_Table]
   ========================================================================== */
.rp-pricing-table,
.rp-price-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--cc-radius);
    overflow: hidden;
}
.rp-pricing-table thead th,
.rp-pricing-table .rp-table-header,
.rp-price-table thead td {
    background-color: var(--cc-dark) !important;
    color: #fff !important;
    font-family: var(--cc-font-head) !important;
    font-size: 13px;
    padding: 12px 16px;
    text-align: left;
}
.rp-pricing-table tbody tr:nth-child(even) {
    background: var(--cc-gray-light);
}
.rp-pricing-table tbody tr:hover {
    background: #f0f0f0;
}

/* ==========================================================================
   ZOEKBALK [Repair_Search_Box]
   ========================================================================== */
.rp-search-wrapper input,
.rp-search-input {
    border-radius: var(--cc-radius) !important;
    border-color: var(--cc-border) !important;
    font-family: var(--cc-font) !important;
    transition: border-color .2s, box-shadow .2s;
}
.rp-search-wrapper input:focus,
.rp-search-input:focus {
    border-color: var(--cc-red) !important;
    box-shadow: 0 0 0 3px var(--cc-red)22 !important;
    outline: none;
}
.rp-search-btn {
    background: var(--cc-red) !important;
    border-color: var(--cc-red) !important;
    border-radius: 0 var(--cc-radius) var(--cc-radius) 0 !important;
}

/* ==========================================================================
   FILIAAL KAARTEN
   ========================================================================== */
.rp-location-card,
.ros-filiaal-card {
    border-radius: var(--cc-radius) !important;
    transition: box-shadow .2s;
}
.rp-location-card:hover,
.ros-filiaal-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}
.rp-location-card.selected {
    border-color: var(--cc-red) !important;
}

/* ==========================================================================
   BOOKING SECTIE WRAPPER (theme templates)
   ========================================================================== */
.cc-booking-section {
    padding: 60px 0;
    background: var(--cc-gray-light);
}
.cc-booking-section .container {
    max-width: 900px;
}

/* De wizard op de booking-pagina */
.cc-wizard-page .rp-wizard,
.cc-wizard-page .rp-front-end-wrapper {
    max-width: 100%;
}

/* ==========================================================================
   MOBIEL RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .rp-wizard,
    .rp-wizard-container,
    .rp-front-end-wrapper {
        padding: 0 !important;
    }
    .rp-brand-grid,
    .rp-model-grid,
    .rp-repair-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .rp-step-label {
        display: none; /* verberg stapnamen op klein scherm, toon nummers */
    }
}
@media (max-width: 400px) {
    .rp-brand-grid,
    .rp-model-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ==========================================================================
   WIZARD PAGINA — standaard WP pagina met [repair_booking] shortcode
   Zorgt dat wizard correct schaalt zonder theme-padding problemen.
   ========================================================================== */
.page-template-page-reparatie-boeken .rp-wizard,
.page-template-page-reparatie-boeken .rp-front-end-wrapper,
body.has-rp-pro .entry-content .rp-wizard {
    max-width: 100% !important;
}

/* Als [repair_booking] / [Repair_All] direct op een pagina staat */
.cc-wizard-page .entry-content {
    max-width: 880px;
    margin: 0 auto;
}