/* Floating animation for anchor */
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    /* Slow pulse for recommendation banner */
    @keyframes pulse-slow {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.85;
        }
    }

    .animate-pulse-slow {
        animation: pulse-slow 2.5s ease-in-out infinite;
    }

    /* CBM button hover - enhanced glow effect */
    .cbm-button {
        cursor: pointer;
        position: relative;
    }

    .cbm-button:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .cbm-button:active {
        transform: scale(0.98) translateY(0);
    }

    /* Help button glow on hover */
    .help-btn:hover {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.25), 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    /* FCL and LCL card styles - sharp corners with glow effect */
    .fcl-card,
    .lcl-card {
        border-radius: 0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(139, 92, 246, 0.2);
        border: 3px solid transparent;
        transition: all 0.3s ease;
        transform: translateY(0);
    }

    .fcl-card:hover,
    .lcl-card:hover {
        border-color: white;
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 35px rgba(139, 92, 246, 0.35);
        animation: card-pulse 1.5s ease-in-out infinite;
    }

    @keyframes card-pulse {
        0%, 100% {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 25px rgba(139, 92, 246, 0.25);
        }
        50% {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(255, 255, 255, 0.5), 0 0 40px rgba(139, 92, 246, 0.4);
        }
    }

    /* ============ TOGGLE BUTTONS (Tot aan je deur / Ik wil exporteren) ============ */
    .toggle-btn {
        border-radius: 0 !important;
        cursor: pointer;
    }

    .toggle-btn-inactive {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: none;
    }

    .toggle-btn-inactive:hover {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .toggle-btn-active {
        background: #22c55e;
        color: white;
        border: none;
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
    }

    .toggle-btn-active:hover {
        background: #16a34a;
    }

    /* ============ GREEN ACTION SECTION ============ */
    .green-action-section {
        background: linear-gradient(180deg, #10B981 0%, #059669 100%);
        transition: all 0.3s ease;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 15px rgba(16, 185, 129, 0.3);
    }

    /* Darker green with enhanced glow on card hover */
    .fcl-card:hover .green-action-section,
    .lcl-card:hover .green-action-section {
        background: linear-gradient(180deg, #059669 0%, #047857 100%);
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15), 0 0 25px rgba(16, 185, 129, 0.5);
    }

    /* ============ BUTTON STYLES ============ */

    /* Nu opvragen postcode button - green style */
    .btn-nu-opvragen-postcode {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        border: none;
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 0 4px 14px -3px rgba(34, 197, 94, 0.4);
        cursor: pointer;
    }

    .btn-nu-opvragen-postcode:hover {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.7), 0 6px 20px -3px rgba(34, 197, 94, 0.5);
        transform: translateY(-2px);
    }

    .btn-nu-opvragen-postcode:active {
        transform: translateY(0);
    }

    /* PRIMARY: Verder button - solid white, most prominent */
    .btn-direct-boeken-primary {
        background: white;
        color: #047857;
        font-weight: 700;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    .btn-direct-boeken-primary:hover {
        background: #f5f5f5;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .btn-direct-boeken-primary:active {
        transform: translateY(0);
        transition: transform 0.05s ease;
    }

    /* SECONDARY: Prijsoverzicht delen button - small, outlined white */
    .btn-delen {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-delen:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
        color: white;
    }

    /* Legacy btn-offerte-aanvraag kept for backwards compatibility */
    .btn-offerte-aanvraag {
        background: white;
        color: #047857;
        font-weight: 600;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* Legacy btn-direct-boeken kept for backwards compatibility */
    .btn-direct-boeken {
        background: transparent;
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.6);
        font-weight: 500;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* Modal option buttons */
    .btn-modal-option {
        border-radius: 0;
        cursor: pointer;
    }

    .btn-modal-option:hover {
        transform: translateY(-2px);
    }

    /* Legacy button styles for backwards compatibility */
    .btn-offerte {
        background: white;
        color: #047857;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.15s ease;
    }

    .btn-offerte:hover {
        background: #f5f5f5;
        transform: scale(1.03);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .btn-offerte:active {
        transform: scale(0.97);
        transition: transform 0.05s ease;
    }

    /* SECONDARY: Boeken button - outlined white */
    .btn-boeken {
        background: transparent;
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.7);
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .btn-boeken:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: white;
        transform: scale(1.02);
    }

    .btn-boeken:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0.97);
    }

    /* TERTIARY: Share buttons (WhatsApp, Mail) */
    .btn-share {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.15s ease;
    }

    .btn-share:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .btn-share:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0.97);
    }

    /* Icon animation on hover */
    .btn-share:hover i {
        transform: scale(1.1);
        transition: transform 0.15s ease;
    }

    /* Custom slider styling */
    .cbm-slider {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        outline: none;
        height: 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 9999px;
    }

    .cbm-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 32px;
        height: 32px;
        background: #10B981;
        border: 4px solid white;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease;
    }

    .cbm-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
    }

    .cbm-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
        background: #10B981;
        border: 4px solid white;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease;
    }

    .cbm-slider::-moz-range-thumb:hover {
        transform: scale(1.15);
    }

    .cbm-slider::-moz-range-track {
        background: rgba(255, 255, 255, 0.2);
        height: 16px;
        border-radius: 9999px;
        border: none;
    }

    .cbm-slider::-moz-focus-outer {
        border: 0;
    }

    .cbm-slider:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .cbm-slider:focus::-moz-range-thumb {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Trust links hover effects */
    .tfh-trust-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.2s ease;
    }

    .tfh-trust-link span {
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: rgba(255, 255, 255, 0.3);
        text-decoration-thickness: 2px;
        transition: all 0.2s ease;
    }

    .tfh-trust-link:hover {
        color: white;
    }

    .tfh-trust-link:hover span {
        text-decoration-color: #10B981;
    }

    .tfh-trust-link:hover i {
        transform: scale(1.15);
    }

    .tfh-trust-link i {
        transition: transform 0.2s ease;
    }

    /* ============ SHARP CORNERS OVERRIDES ============ */
    /* Remove rounded corners from all elements except inputs */

    /* Section containers - sharp with glow */
    #fcl-section,
    #lcl-price-card {
        border-radius: 0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 25px rgba(139, 92, 246, 0.2);
    }

    /* Green action section - sharp corners */
    .green-action-section {
        border-radius: 0 !important;
    }

    /* Buttons - sharp corners with glow */
    .btn-offerte,
    .btn-boeken,
    .btn-share,
    .btn-offerte-aanvraag,
    .btn-direct-boeken,
    .btn-direct-boeken-primary,
    .btn-delen,
    .btn-modal-option {
        border-radius: 0 !important;
    }

    .btn-offerte,
    .btn-offerte-aanvraag,
    .btn-direct-boeken-primary,
    .btn-nu-opvragen-postcode {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn-offerte:hover,
    .btn-offerte-aanvraag:hover,
    .btn-direct-boeken-primary:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .btn-nu-opvragen-postcode {
        border-radius: 0 !important;
    }

    /* CBM buttons - sharp corners */
    .cbm-button {
        border-radius: 0 !important;
    }

    /* Harbour/tab buttons - sharp corners */
    [class*="bg-white/10"] button,
    [class*="bg-brand-green"] {
        border-radius: 0 !important;
    }

    /* Share button container */
    button[class*="bg-white/10"][class*="hover:bg-white/20"] {
        border-radius: 0 !important;
    }

    /* Modal panels - keep slightly rounded for usability */
    [x-show*="showHelpModal"] > div,
    [x-show*="showCallMeModal"] > div {
        border-radius: 4px !important;
    }

    /* Postcode inputs - keep rounded */
    input[type="text"][maxlength="1"] {
        border-radius: 8px !important;
    }

    /* House number input - keep rounded, match postcode style */
    .house-number-input {
        border-radius: 8px !important;
        border: 2px solid transparent;
    }

    /* 1. Remove default browser arrow with higher specificity */
    select.harbour-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* 2. Harbour dropdown styling with separated background properties */
    .harbour-select {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 0 !important;
        padding-right: 40px;
        cursor: pointer;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23FFFFFF' d='M9 13L2 4h14z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-size: 14px 14px !important;

        transition: all 0.2s ease;
    }

    .harbour-select:hover {
        border-color: rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.15);
    }

    .harbour-select:focus {
        border-color: white;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    /* 3. Dropdown options readable in menu */
    .harbour-select option {
        color: #333;
        background-color: white;
    }