/* Text Shadow */
.text-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Hero Angled Shape - Gray polygon at bottom */
.hero-angle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    height: 200px;
    background-color: white;
    /*background-color: red;*/
    clip-path: polygon(
        /* linkerbovenhoek */
        0%   0%,    /* linkerbovenhoek */
        16% 100%,   /* punt midden rechts */
        0%   100%   /* linkeronderhoek */
    );
    z-index: 999999;
}

/* Unique Design Section - Gray polygon at top (bottom half of triangle) */
.unique-angle::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 40%;
    height: 200px;
    background-color: white;
    clip-path: polygon(
        0%   0%,    /* linkerbovenhoek */
        0%  50%,   /* linkeronderhoek */
        16%   0%    /* punt midden rechts */
    );
    z-index: 999999;
}

/* Gray diagonal shape on left side */
.hero-angle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.2);
    clip-path: polygon(0 0, 110% 0, 0% 106%, 0 100%);
    z-index: 1;
}

/* Section Polygon Clips */
/*.clip-polygon-top {*/
/*    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);*/
/*}*/

.clip-polygon-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0% 100%);
}

/* Arrow Shape for Tooltip */
.arrow-up::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background-color: #e8e8e8;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Video Background */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Custom Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out;
}

/* Button Arrow */
.btn-arrow {
    position: relative;
}
.btn-arrow::after {
    content: '';
    width: 27px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTguNTI2IiBoZWlnaHQ9IjExLjgxNCIgdmlld0JveD0iMCAwIDE4LjUyNiAxMS44MTQiPjxwYXRoIGQ9Ik0yNi4wOTQsNy40OTNIOS45ODNtMTYuMTEyLDBMMjEuNiwxMS45ODVtNC40OTMtNC40OTNMMjEuNiwzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOC45ODMgLTEuNTg2KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Sticky Trail Portal */
.sticky-trail {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 15%;
    height: 11%;
    background: linear-gradient(135deg, #c30000 0%, #F7931E 100%);
    clip-path: polygon(
        /* linkerboven */   0%   0%,
            /* rechterboven */ 100%   0%,
            /* rechteronder */ 100%  74%,
            /* linkeronder */  15% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

/* Responsive sticky trail */
@media (max-width: 767px) {
    .sticky-trail {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sticky-trail {
        display: none;
    }
}

@media (min-width: 1024px) {
    .sticky-trail {
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        padding-right: 25px;
        padding-left: 35px;
    }
    .sticky-trail span {
        font-size: 0.875rem;
    }
}

@media (min-width: 1280px) {
    .sticky-trail span {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1536px) {
    .sticky-trail span {
        font-size: 1rem;
    }
}

@media (min-width: 1920px) {
    .sticky-trail span {
        font-size: 1.125rem;
    }
}

/* Floating Stempel - positioned over orange trail */
.floating-stempel {
    position: fixed;
    top: 3%;
    right: 8%;
    z-index: 101;
    width: 136px;
    height: 136px;
    pointer-events: none;
    /* Positioned to overlap with orange trail area */
    transform: translateY(-20px);
}

/* Responsive floating stempel - maintains position relative to orange trail */
@media (max-width: 767px) {
    .floating-stempel {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .floating-stempel {
        display: none;
    }
}

@media (min-width: 1024px) and (max-width: 1240px) {
    .floating-stempel {
        top: 8%;
        right: 7%;
        width: 119px;
        height: 119px;
        transform: translateY(-15px);
    }
}

@media (min-width: 1241px) and (max-width: 1600px) {
    .floating-stempel {
        top: 8%;
        right: 8%;
        width: 136px;
        height: 136px;
        transform: translateY(-20px);
    }
}

@media (min-width: 1601px) and (max-width: 2099px) {
    .floating-stempel {
        top: 2%;
        right: 10%;
        width: 153px;
        height: 153px;
        transform: translateY(-25px);
    }
}

@media (min-width: 2100px) {
    .floating-stempel {
        top: 2%;
        right: 12%;
        width: 153px;
        height: 153px;
        transform: translateY(-25px);
    }
}

/* Mobile Menu Styles */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 9999999;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hamburger {
    width: 24px;
    height: 18px;
    position: relative;
    cursor: pointer;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #4B4B4B;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 0px;
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
    top: 8px;
}

.hamburger span:nth-child(4) {
    top: 16px;
}

.hamburger.active span:nth-child(1) {
    top: 8px;
    width: 0%;
    left: 50%;
}

.hamburger.active span:nth-child(2) {
    transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
    top: 8px;
    width: 0%;
    left: 50%;
}

/* Header scroll styles */
.header-transparent { background-color: transparent; color: white; backdrop-filter: saturate(150%) blur(2px); }
.header-scrolled { background-color: white; color: #4B4B4B; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }

/* Remove blur on mobile */
@media (max-width: 767px) {
    .header-transparent { backdrop-filter: none; }
}

.hamburger span {
    background: currentColor;
}

.active {
    color: #F7931E;
    font-weight: 700;
    border-bottom: 1px solid #F7931E;
}

/* iOS-style Shopping Cart Badge */
.cart-badge {
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-width: 1.25rem;
    animation: cart-pulse 2s infinite;
}

@keyframes cart-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Cart hover effects */
.cart-container:hover .cart-badge {
    animation: cart-bounce 0.6s ease-in-out;
}

@keyframes cart-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Pricing Toggle Switch Styles */
.pricing-section {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.pricing-section.hidden {
    opacity: 0;
    transform: translateY(-10px);
}

/* Toggle button hover effects */
#newCustomerBtn:hover, #existingCustomerBtn:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Smooth toggle background animation */
#toggleBackground {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide header when hamburger menu is active (< 1024px) */
@media (max-width: 1023px) {
    #header {
        display: none; /* Hide header completely when hamburger menu is shown */
    }
}

/* Desktop menu positioning - gradual spacing increase */
@media (min-width: 1024px) and (max-width: 1100px) {
    nav.desktop-menu-adjusted {
        gap: 0.5rem !important; /* Compact for overlap issues */
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    nav.desktop-menu-adjusted {
        gap: 0.75rem !important; /* Begin spacing increase */
        margin-left: -2rem !important; /* Move menu to the left */
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    nav.desktop-menu-adjusted {
        gap: 1rem !important; /* Medium spacing */
        margin-left: -2rem !important; /* Keep left positioning */
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    nav.desktop-menu-adjusted {
        gap: 1.25rem !important; /* Almost normal spacing */
        margin-left: -2rem !important; /* Keep left positioning */
    }
}