/* =========================================================
   TachograafService.nl - Mobiele Stylesheet v2.0
   Verbeterde versie met sticky buttons en Elementor support
   ========================================================= */

/* ============================================
   ALGEMENE MOBIELE BASIS
   ============================================ */
@media (max-width: 991px) {

    /* ----- Reset & basis ----- */
    html,
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
        overflow-x: hidden !important;
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ----- Containers ----- */
    .container,
    .container-fluid,
    .elementor-container,
    .elementor-section-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ----- Secties compacter ----- */
    section,
    .section,
    .elementor-section {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    /* ----- Typography ----- */
    h1, .elementor-heading-title.elementor-size-xxl {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    h2, .elementor-heading-title.elementor-size-xl {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    h3, .elementor-heading-title.elementor-size-large {
        font-size: 19px !important;
        line-height: 1.4 !important;
    }

    p, li {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   HEADER & NAVIGATIE
   ============================================ */
@media (max-width: 991px) {

    .navbar-area,
    header,
    .site-header {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Logo kleiner */
    .site-logo img,
    .custom-logo,
    .elementor-widget-theme-site-logo img {
        max-height: 45px !important;
        width: auto !important;
    }

    /* Hamburger menu goed klikbaar */
    .navbar-toggle,
    .menu-toggle,
    .navbar-toggler,
    .elementor-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        z-index: 2000 !important;
    }

    /* Menu items onder elkaar */
    .navbar-nav,
    .nav,
    .menu,
    .main-navigation ul {
        width: 100% !important;
    }

    .navbar-nav > li,
    .nav > li,
    .menu > li {
        display: block !important;
        width: 100% !important;
    }

    .navbar-nav > li > a,
    .nav > li > a,
    .menu > li > a {
        display: block !important;
        padding: 12px 15px !important;
        text-align: left;
    }
}

/* ============================================
   KNOPPEN - GROTE TAP TARGETS
   ============================================ */
@media (max-width: 991px) {

    button,
    .button,
    .btn,
    a.btn,
    .elementor-button,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Full-width CTA knoppen */
    .elementor-button.elementor-size-lg,
    .elementor-button.elementor-size-xl,
    .cta-button {
        width: 100% !important;
        max-width: 400px !important;
        margin: 10px auto !important;
    }

    /* Telefoon en WhatsApp links */
    a[href^="tel:"],
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 14px 20px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* Afspraak knop */
    .tachograaf-afspraak-btn {
        width: 100% !important;
        max-width: 320px !important;
        margin: 10px auto !important;
        display: block !important;
    }
}

/* ============================================
   ELEMENTOR SPECIFIEK
   ============================================ */
@media (max-width: 991px) {

    /* Kolommen onder elkaar */
    .elementor-row {
        flex-direction: column !important;
    }

    .elementor-column {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .elementor-column-wrap,
    .elementor-widget-wrap {
        padding: 10px !important;
    }

    /* Icon boxes */
    .elementor-icon-box-wrapper {
        text-align: center !important;
        padding: 20px 15px !important;
    }

    .elementor-icon-box-icon {
        margin-bottom: 15px !important;
    }

    .elementor-icon-box-icon i,
    .elementor-icon-box-icon svg {
        font-size: 36px !important;
    }

    /* Verberg desktop-only elementen */
    .elementor-hidden-tablet,
    .elementor-hidden-mobile {
        display: none !important;
    }
}

/* ============================================
   HERO SECTIE
   ============================================ */
@media (max-width: 991px) {

    .page-title,
    .inner-header,
    .hero-section,
    [class*="hero"] {
        padding: 30px 15px !important;
        min-height: auto !important;
        text-align: center !important;
    }

    .hero-section h1,
    [class*="hero"] h1,
    .page-title h1 {
        font-size: 24px !important;
    }
}

/* ============================================
   FIX: OVERLAPPENDE ELEMENTEN OP MOBIEL
   ============================================ */
@media (max-width: 991px) {

    /* ==========================================
       KRITIEKE FIX: Rode accordion knoppen
       Deze hebben position:sticky/fixed en moeten
       in normale flow komen
       ========================================== */
    
    /* Target alle mogelijke accordion/menu containers */
    .wpb_accordion,
    .vc_tta,
    .vc_tta-accordion,
    .vc_tta-tabs,
    .vc_tta-container,
    .ts-accordion,
    .ts-tabs,
    .accordion,
    .tabs,
    [class*="accordion"],
    [class*="toggle"],
    [class*="tta-"] {
        position: relative !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        z-index: 1 !important;
        transform: none !important;
    }

    /* Target de headers/titels specifiek */
    .wpb_accordion_header,
    .wpb_accordion .wpb_accordion_header,
    .vc_tta-panel-heading,
    .vc_tta-tab,
    .vc_tta.vc_general .vc_tta-panel-heading,
    .vc_toggle_title,
    .ui-accordion-header,
    [class*="accordion-header"],
    [class*="accordion-title"],
    [class*="toggle-title"],
    [class*="panel-heading"] {
        position: relative !important;
        position: static !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        z-index: 1 !important;
        transform: none !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
    }

    /* Target panels */
    .vc_tta-panel,
    .vc_tta-panels,
    .wpb_accordion_section,
    .accordion-section,
    [class*="accordion-panel"],
    [class*="accordion-section"] {
        position: relative !important;
        top: unset !important;
        z-index: 1 !important;
    }

    /* NUCLEAIRE OPTIE: Alles met position fixed/sticky/absolute 
       behalve onze eigen widgets */
    body:not(#tacho-chat-box):not(#tachograaf-widget):not(#mobile-sticky-buttons):not(.call-now-button) 
    [style*="position: fixed"],
    body:not(#tacho-chat-box):not(#tachograaf-widget):not(#mobile-sticky-buttons):not(.call-now-button) 
    [style*="position:fixed"],
    body:not(#tacho-chat-box):not(#tachograaf-widget):not(#mobile-sticky-buttons):not(.call-now-button) 
    [style*="position: sticky"],
    body:not(#tacho-chat-box):not(#tachograaf-widget):not(#mobile-sticky-buttons):not(.call-now-button) 
    [style*="position:sticky"] {
        position: relative !important;
    }

    /* Fix voor elementen in hero/slider die fixed zijn */
    .ts-slider [style*="position"],
    .main-slider [style*="position"],
    .hero-section [style*="position"],
    [class*="slider"] [style*="position"],
    [class*="hero"] [style*="position"] {
        position: relative !important;
    }

    /* ALLE elementen in normale document flow */
    .vc_btn3-container,
    .wpb_button,
    .ts-btn,
    a.vc_btn3,
    .ts-cta-btn,
    .wpb_column,
    .vc_column_container,
    .ts-cta-column {
        position: static !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 !important;
        z-index: 1 !important;
    }

    /* Hero/slider content onder elkaar */
    .ts-slider,
    .main-slider,
    .rev_slider,
    .slider-content,
    [class*="slider"] {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .ts-slider .slide-content,
    .slider-content,
    [class*="slide-content"] {
        position: relative !important;
        display: block !important;
        padding: 20px 15px !important;
    }

    /* CTA blokken */
    .cta-box,
    .cta-block,
    .call-box,
    .contact-box,
    [class*="cta-"],
    [class*="call-to-action"] {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        float: none !important;
    }

    /* Elementor widgets in flow */
    .elementor-widget,
    .elementor-element {
        position: relative !important;
        margin-bottom: 15px !important;
    }
}

/* ============================================
   FORMULIEREN
   ============================================ */
@media (max-width: 991px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        border: 2px solid #ddd !important;
        -webkit-appearance: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: #FF6B00 !important;
        outline: none !important;
    }

    label {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
}

/* ============================================
   TACHOGRAAF CHATBOT WIDGET
   ============================================ */
@media (max-width: 991px) {

    /* Widget rechtsonder - BLIJFT FLOATING (werkt goed) */
    #tachograaf-widget {
        position: fixed !important;
        top: auto !important;
        bottom: 80px !important;
        right: 10px !important;
        left: auto !important;
        z-index: 9998 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Knoppen compact maar klikbaar */
    #tachograaf-widget .tacho-btn,
    #tachograaf-widget .tacho-chat-btn,
    #tachograaf-widget .tacho-reminder-btn {
        display: inline-flex !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
        padding: 10px 14px !important;
        font-size: 11px !important;
        margin: 0 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
        border-radius: 8px !important;
    }

    /* Chatbox fullscreen op mobiel */
    #tacho-chat-box {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 999999 !important;
    }
}

/* ============================================
   TRANSPORTEX THEMA SPECIFIEKE FIXES
   ============================================ */
@media (max-width: 991px) {

    /* Transportex accordion/tabs */
    .ts-accordion,
    .ts-tabs,
    .ts-toggle,
    .ts-service-box,
    .ts-icon-box {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* Transportex slider fixes */
    .ts-main-slider,
    .ts-slider-wrapper,
    .ts-hero-slider {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
    }

    .ts-slide,
    .ts-slide-content {
        position: relative !important;
        display: block !important;
        height: auto !important;
    }

    /* Transportex kolommen */
    .ts-column,
    .ts-col,
    [class*="ts-col-"] {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 15px !important;
    }

    /* WPBakery Row fixes */
    .vc_row,
    .wpb_row {
        display: block !important;
        width: 100% !important;
    }

    .vc_row .vc_column_container,
    .wpb_row .wpb_column {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important;
    }

    /* Inner row containers */
    .vc_row-fluid,
    .vc_row-no-padding {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vc_column-inner,
    .wpb_wrapper {
        padding: 10px !important;
    }
}

/* Kleine schermen - nog compacter */
@media (max-width: 480px) {

    #tachograaf-widget {
        bottom: 75px !important;
        right: 8px !important;
    }

    #tachograaf-widget .tacho-btn,
    #tachograaf-widget .tacho-chat-btn,
    #tachograaf-widget .tacho-reminder-btn {
        min-width: 100px !important;
        max-width: 130px !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   VIDEO'S RESPONSIVE
   ============================================ */
@media (max-width: 991px) {

    iframe,
    video,
    embed {
        max-width: 100% !important;
        height: auto !important;
    }

    .elementor-video,
    .video-container {
        position: relative !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
    }

    .elementor-video iframe,
    .video-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   FOOTER
   ============================================ */
@media (max-width: 991px) {

    footer,
    .site-footer {
        padding: 30px 15px !important;
        text-align: center !important;
        margin-bottom: 70px !important; /* Ruimte voor sticky buttons */
    }

    footer .elementor-column {
        margin-bottom: 25px !important;
    }
}

/* ============================================
   RUIMTE VOOR STICKY BUTTONS
   ============================================ */
@media (max-width: 991px) {

    body {
        padding-bottom: 70px !important;
    }
}

/* ============================================
   STICKY BEL/WHATSAPP BUTTONS ONDERAAN
   ============================================ */
#mobile-sticky-buttons {
    display: none;
}

@media (max-width: 991px) {

    #mobile-sticky-buttons {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        background: linear-gradient(180deg, rgba(26,26,26,0.95) 0%, #1a1a1a 100%) !important;
        padding: 10px 8px !important;
        gap: 10px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
    }

    #mobile-sticky-buttons a {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 12px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        transition: transform 0.15s ease !important;
    }

    #mobile-sticky-buttons .btn-call {
        background: linear-gradient(135deg, #FF6B00 0%, #F57C00 100%) !important;
        color: #fff !important;
        box-shadow: 0 2px 10px rgba(255,107,0,0.3) !important;
    }

    #mobile-sticky-buttons .btn-whatsapp {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
        color: #fff !important;
        box-shadow: 0 2px 10px rgba(37,211,102,0.3) !important;
    }

    #mobile-sticky-buttons a:active {
        transform: scale(0.96) !important;
    }

    /* Emoji's goed uitlijnen */
    #mobile-sticky-buttons a span {
        font-size: 18px !important;
    }
}

/* Landscape modus */
@media (max-width: 991px) and (orientation: landscape) {

    #mobile-sticky-buttons {
        padding: 6px 8px !important;
    }

    #mobile-sticky-buttons a {
        padding: 10px 10px !important;
        font-size: 13px !important;
    }

    #tachograaf-widget {
        bottom: 55px !important;
    }

    body {
        padding-bottom: 55px !important;
    }
}

/* ============================================
   PRINT - VERBERG WIDGETS
   ============================================ */
@media print {

    #mobile-sticky-buttons,
    #tachograaf-widget,
    #tacho-chat-box {
        display: none !important;
    }
}