/* ═══════════════════════════════════════════════════════════════
   De Verhuizing WP — Premium V3  |  2026-04-24
   Exacte selectors op basis van rendered DOM
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DIENSTEN SECTIE — donker navy (override inline #F8FAFC)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dv-section#diensten {
    background: linear-gradient(135deg, #0a1432 0%, #0f2258 55%, #0a1432 100%) !important;
    padding: 80px 0 !important;
    position: relative;
}
section.dv-section#diensten .dv-section-label {
    color: rgba(249,103,6,.9) !important;
    background: rgba(249,103,6,.12) !important;
    border-color: rgba(249,103,6,.25) !important;
}
section.dv-section#diensten .dv-section-title,
section.dv-section#diensten h2 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
section.dv-section#diensten .dv-section-subtitle,
section.dv-section#diensten > div > p {
    color: rgba(255,255,255,.72) !important;
}

/* Service cards op donkere achtergrond */
section.dv-section#diensten .dv-service-card {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-top: 3px solid #F96706 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
section.dv-section#diensten .dv-service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 85%, rgba(249,103,6,.15), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
section.dv-section#diensten .dv-service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 56px rgba(0,0,0,.45), 0 0 0 1px rgba(249,103,6,.3) !important;
    background: rgba(255,255,255,.13) !important;
}
section.dv-section#diensten .dv-service-card:hover::after { opacity: 1; }
section.dv-section#diensten .dv-service-card h3 {
    color: #fff !important;
}
section.dv-section#diensten .dv-service-card p {
    color: rgba(255,255,255,.72) !important;
}
section.dv-section#diensten .dv-service-card-link {
    color: #F96706 !important;
    font-weight: 700 !important;
    transition: color .2s ease, gap .2s ease !important;
}
section.dv-section#diensten .dv-service-card:hover .dv-service-card-link {
    color: #fff !important;
}
/* Foto's in service cards: subtle darkening */
section.dv-section#diensten .dv-service-card img {
    filter: brightness(.92) !important;
    transition: transform .45s ease, filter .45s ease !important;
}
section.dv-section#diensten .dv-service-card:hover img {
    filter: brightness(1) !important;
}

/* Service card animatie — staggered reveal */
section.dv-section#diensten .dv-service-card:nth-child(1) { animation: dvFadeUp .5s .05s ease both; }
section.dv-section#diensten .dv-service-card:nth-child(2) { animation: dvFadeUp .5s .12s ease both; }
section.dv-section#diensten .dv-service-card:nth-child(3) { animation: dvFadeUp .5s .19s ease both; }
section.dv-section#diensten .dv-service-card:nth-child(4) { animation: dvFadeUp .5s .26s ease both; }
section.dv-section#diensten .dv-service-card:nth-child(5) { animation: dvFadeUp .5s .33s ease both; }
section.dv-section#diensten .dv-service-card:nth-child(6) { animation: dvFadeUp .5s .40s ease both; }
@keyframes dvFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. USP BAR — versterkt
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dv-usp-bar {
    background: linear-gradient(90deg, #071428 0%, #0f2258 50%, #071428 100%) !important;
    border-top: 2px solid rgba(249,103,6,.3) !important;
    border-bottom: 2px solid rgba(249,103,6,.15) !important;
}
section.dv-usp-bar .dv-usp-card {
    border-color: rgba(255,255,255,.08) !important;
    transition: border-color .25s ease, transform .25s ease !important;
}
section.dv-usp-bar .dv-usp-card:hover {
    border-color: rgba(249,103,6,.35) !important;
    transform: translateY(-3px) !important;
    background: rgba(255,255,255,.04) !important;
}
section.dv-usp-bar .dv-usp-card h4 { color: #fff !important; }
section.dv-usp-bar .dv-usp-card p  { color: rgba(255,255,255,.6) !important; }
section.dv-usp-bar .dv-usp-icon {
    background: rgba(249,103,6,.15) !important;
    box-shadow: 0 0 0 1px rgba(249,103,6,.2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. STATS SECTIE — cijfers verbeteren (al dark maar upgrade)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dv-stats .dv-stat-num {
    background: linear-gradient(135deg, #F96706, #FF8C3A, #FFD700) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 10px rgba(249,103,6,.35)) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. PROCES STAPPEN — 3D game nummers
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dv-process-step {
    transition: transform .25s ease !important;
}
.dv-process-step:hover {
    transform: translateY(-5px) !important;
}
.dv-process-num {
    background: linear-gradient(135deg, #F96706 0%, #e05500 100%) !important;
    box-shadow:
        0 8px 24px rgba(249,103,6,.45),
        0 0 0 4px rgba(249,103,6,.12),
        0 0 0 8px rgba(249,103,6,.06) !important;
    position: relative !important;
    z-index: 1 !important;
}

@keyframes dvProcGlow {
    0%   { box-shadow: 0 8px 24px rgba(249,103,6,.4), 0 0 0 4px rgba(249,103,6,.1); }
    50%  { box-shadow: 0 8px 32px rgba(249,103,6,.65), 0 0 0 8px rgba(249,103,6,.18); }
    100% { box-shadow: 0 8px 24px rgba(249,103,6,.4), 0 0 0 4px rgba(249,103,6,.1); }
}
.dv-process-grid > div:nth-child(1) .dv-process-num { animation: dvProcGlow 2.8s 0.0s ease-in-out infinite; }
.dv-process-grid > div:nth-child(2) .dv-process-num { animation: dvProcGlow 2.8s 0.7s ease-in-out infinite; }
.dv-process-grid > div:nth-child(3) .dv-process-num { animation: dvProcGlow 2.8s 1.4s ease-in-out infinite; }
.dv-process-grid > div:nth-child(4) .dv-process-num { animation: dvProcGlow 2.8s 2.1s ease-in-out infinite; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. REVIEWS — premium cards
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dv-review-card {
    border-radius: 20px !important;
    box-shadow: 0 4px 28px rgba(21,43,93,.08) !important;
    border: 1px solid rgba(21,43,93,.07) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.dv-review-card::before {
    content: '\201C' !important;
    position: absolute !important;
    top: -8px !important; left: 14px !important;
    font-size: 7rem !important;
    color: rgba(249,103,6,.06) !important;
    font-family: Georgia, serif !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.dv-review-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 48px rgba(21,43,93,.14) !important;
}
.dv-review-stars { filter: drop-shadow(0 1px 4px rgba(249,103,6,.25)) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. CBS STATS blok
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dvcbs .dvcbs__val {
    background: linear-gradient(135deg, #F96706, #FF8C3A, #ffd000) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
}
section.dvcbs .dvcbs__stat--cta { background: linear-gradient(135deg, #F96706, #e05500) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. KALENDER — fix + stijl
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dvbs {
    border-radius: 20px !important;
    border: 1px solid rgba(21,43,93,.12) !important;
    box-shadow: 0 8px 48px rgba(21,43,93,.12) !important;
    overflow: hidden !important;
}
section.dvbs .dvbs__head {
    background: linear-gradient(135deg, #152B5D 0%, #0f2258 100%) !important;
    padding: 20px 24px !important;
}
section.dvbs .dvbs__navbtn {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: background .2s !important;
    font-size: 1rem !important;
}
section.dvbs .dvbs__navbtn:hover { background: rgba(249,103,6,.5) !important; }
section.dvbs .dvbs__weekdays {
    background: rgba(21,43,93,.05) !important;
    font-weight: 700 !important;
    font-size: .72rem !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #152B5D !important;
    padding: 10px 0 !important;
}
section.dvbs .dvbs-cell {
    border-radius: 8px !important;
    transition: background .15s ease, transform .15s ease !important;
    cursor: pointer !important;
    min-height: 38px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}
section.dvbs .dvbs-cell:hover:not(.past) {
    background: rgba(249,103,6,.1) !important;
    transform: scale(1.06) !important;
}
section.dvbs .dvbs__loader {
    color: #64748B !important;
    font-style: italic !important;
    font-size: .85rem !important;
    padding: 32px !important;
    text-align: center !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. INPAKDOZEN CALCULATOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dvip .dvip__inner {
    border-radius: 24px !important;
    box-shadow: 0 12px 56px rgba(21,43,93,.12) !important;
    border: 1px solid rgba(21,43,93,.08) !important;
}
section.dvip .dvip-slider {
    accent-color: #F96706 !important;
}
section.dvip .dvip-total__wrap {
    background: linear-gradient(135deg, #0f2258, #152B5D) !important;
    border-radius: 16px !important;
    color: #fff !important;
}
section.dvip .dvip-total__cta {
    box-shadow: 0 6px 20px rgba(249,103,6,.4) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. FAQ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dvfaq .dvfaq__item {
    border-radius: 12px !important;
    border: 1px solid rgba(21,43,93,.09) !important;
    overflow: hidden !important;
    transition: box-shadow .2s ease !important;
    margin-bottom: 8px !important;
}
section.dvfaq .dvfaq__item:hover,
section.dvfaq .dvfaq__item[open] {
    box-shadow: 0 4px 24px rgba(21,43,93,.1) !important;
}
section.dvfaq .dvfaq__item[open] .dvfaq__q {
    background: rgba(249,103,6,.04) !important;
}
section.dvfaq .dvfaq__num {
    background: linear-gradient(135deg, #F96706, #e05500) !important;
    color: #fff !important;
    font-weight: 800 !important;
    min-width: 28px !important;
    text-align: center !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
}
section.dvfaq .dvfaq__arrow {
    transition: transform .25s ease !important;
}
section.dvfaq .dvfaq__item[open] .dvfaq__arrow {
    transform: rotate(180deg) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. CONTACT FORMULIER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dvck .dvck__inner {
    border-radius: 24px !important;
    box-shadow: 0 12px 56px rgba(21,43,93,.12) !important;
    border: 1px solid rgba(21,43,93,.08) !important;
    overflow: hidden !important;
}
section.dvck input,
section.dvck textarea,
section.dvck select {
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
section.dvck input:focus,
section.dvck textarea:focus {
    border-color: #F96706 !important;
    box-shadow: 0 0 0 3px rgba(249,103,6,.1) !important;
    outline: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. CTA SECTIE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dv-cta {
    background: linear-gradient(135deg, #071020 0%, #0f2258 50%, #071020 100%) !important;
    position: relative;
    overflow: hidden;
}
section.dv-cta::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,103,6,.08), transparent 65%);
    pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. NAVIGATIE — premium frosted glass
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-header {
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    background: linear-gradient(110deg, #0a1428 0%, #152B5D 45%, #1a3a7a 70%, #0f2258 100%) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,.45), 0 1px 0 rgba(249,103,6,.2) !important;
}
.menu-cta > a {
    background: linear-gradient(135deg, #F96706, #e05500) !important;
    box-shadow: 0 4px 14px rgba(249,103,6,.35) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.menu-cta > a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(249,103,6,.5) !important;
    background: linear-gradient(135deg, #FF8830, #F96706) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. SECTION LABELS — consistent overal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dv-section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: .3rem .8rem !important;
    border-radius: 999px !important;
    background: rgba(249,103,6,.1) !important;
    color: #F96706 !important;
    border: 1px solid rgba(249,103,6,.2) !important;
    margin-bottom: .75rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. GLOBALE BUTTON SHINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dv-btn-primary, .dvhm-btn--primary, .dvip-btn--primary,
a[style*="background:#F96706"],
a[style*="background: #F96706"] {
    position: relative !important;
    overflow: hidden !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.dv-btn-primary:hover, .dvhm-btn--primary:hover,
a[style*="background:#F96706"]:hover {
    transform: translateY(-2px) !important;
}
.dv-btn-primary::after, .dvhm-btn--primary::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -80% !important;
    width: 50% !important; height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: left .45s ease !important;
    pointer-events: none !important;
}
.dv-btn-primary:hover::after, .dvhm-btn--primary:hover::after {
    left: 120% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. STICKY CTA BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dv-sticky-cta {
    background: linear-gradient(90deg, #071020, #0f2258) !important;
    border-top: 2px solid rgba(249,103,6,.35) !important;
    box-shadow: 0 -4px 28px rgba(0,0,0,.25) !important;
}
.dv-scta-offerte {
    background: linear-gradient(135deg, #F96706, #e05500) !important;
    box-shadow: 0 4px 16px rgba(249,103,6,.4) !important;
}
.dv-scta-whatsapp { background: #25D366 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. OVERIGE LIGHT SECTIES — subtiele upgrade
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.dv-section:not(#diensten) {
    background:
        radial-gradient(ellipse at 15% 40%, rgba(249,103,6,.025) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 60%, rgba(21,43,93,.025) 0%, transparent 55%),
        #F8FAFC !important;
}
section.dv-section-center:not(#diensten) {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(249,103,6,.03) 0%, transparent 60%),
        #ffffff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-footer {
    background: linear-gradient(135deg, #071020 0%, #0d1b3e 100%) !important;
    border-top: 3px solid rgba(249,103,6,.3) !important;
}
.site-footer h3, .site-footer h4, .site-footer strong {
    color: #fff !important;
}
.site-footer p, .site-footer li {
    color: rgba(255,255,255,.6) !important;
}
.site-footer a {
    color: rgba(255,255,255,.6) !important;
    transition: color .2s ease !important;
}
.site-footer a:hover { color: #F96706 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. MOBILE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    section.dv-section#diensten { padding: 48px 0 !important; }
    section.dvbs { border-radius: 14px !important; }
    section.dvck .dvck__inner { border-radius: 16px !important; }
    section.dv-cta::before { width: 300px; height: 300px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. REDUCED MOTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}