.modern-post-nav-wrapper {
    width: 100%;
    position: relative;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.modern-post-nav-750254e7 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 40px 0;
    gap: 40px; /* Default overridden by control */
    position: relative;
}

.modern-post-nav-750254e7 .post-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    max-width: calc(50% - 20px); /* Account for gap */
}

.modern-post-nav-750254e7 .empty-item {
    visibility: hidden;
    pointer-events: none;
}

.modern-post-nav-750254e7 .post-nav-prev {
    justify-content: flex-start;
    text-align: left;
}

.modern-post-nav-750254e7 .post-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.modern-post-nav-750254e7 .nav-content {
    display: flex;
    flex-direction: column;
}

.modern-post-nav-750254e7 .nav-label-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.modern-post-nav-750254e7 .nav-icon {
    display: inline-flex;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.modern-post-nav-750254e7 .nav-icon svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    transition: stroke 0.3s ease;
}

.modern-post-nav-750254e7 .nav-title {
    font-size: 20px;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.4;
    transition: color 0.3s ease;
}


/* -------------------------------------------------------------
   Layout Option: "Inhaltsbreite" (content)
   Arrows stay inside the normal flow, content is pushed inwards
------------------------------------------------------------- */
.layout-content .modern-post-nav-750254e7 .post-nav-prev .nav-icon {
    margin-right: 20px;
}
.layout-content .modern-post-nav-750254e7 .post-nav-next .nav-icon {
    margin-left: 20px;
}

/* Hover effects for content layout */
.layout-content .modern-post-nav-750254e7 .post-nav-prev:hover .nav-icon {
    transform: translateX(-5px);
}
.layout-content .modern-post-nav-750254e7 .post-nav-next:hover .nav-icon {
    transform: translateX(5px);
}


/* -------------------------------------------------------------
   Layout Option: "Volle Breite" (full)
   Text goes to the container edges, arrows are positioned outside (absolute)
------------------------------------------------------------- */
.layout-full .modern-post-nav-750254e7 {
    /* Need padding so content doesn't get covered if arrows overlap too much, but we want text near the edge.
       We'll let the user decide if they want padding via widget settings. */
}

/* Position icons absolutely outside the wrapper bounds */
.layout-full .modern-post-nav-750254e7 .post-nav-prev .nav-icon,
.layout-full .modern-post-nav-750254e7 .post-nav-next .nav-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.layout-full .modern-post-nav-750254e7 .post-nav-prev .nav-icon {
    right: 100%; /* Push outside the left edge */
    margin-right: 20px; /* Space from the edge */
}

.layout-full .modern-post-nav-750254e7 .post-nav-next .nav-icon {
    left: 100%; /* Push outside the right edge */
    margin-left: 20px; /* Space from the edge */
}

/* Ensure the nav content takes full space when icon is absolute */
.layout-full .modern-post-nav-750254e7 .nav-content {
    width: 100%;
}

/* Hover effects for full layout */
.layout-full .modern-post-nav-750254e7 .post-nav-prev:hover .nav-icon {
    transform: translate(-5px, -50%);
}
.layout-full .modern-post-nav-750254e7 .post-nav-next:hover .nav-icon {
    transform: translate(5px, -50%);
}


@media (max-width: 767px) {
    .modern-post-nav-750254e7 {
        flex-direction: column;
        gap: 20px;
    }
    
    .modern-post-nav-750254e7 .post-nav-item {
        max-width: 100%;
        justify-content: flex-start; /* Ensure left alignment on mobile */
    }
    
    .modern-post-nav-750254e7 .post-nav-next {
        text-align: left;
    }
    
    /* Reset absolute positioning on mobile */
    .layout-full .modern-post-nav-750254e7 .nav-icon {
        position: static;
        transform: none;
    }
    .layout-full .modern-post-nav-750254e7 .post-nav-prev .nav-icon {
        margin-right: 20px;
    }
    .layout-full .modern-post-nav-750254e7 .post-nav-next .nav-icon {
        margin-left: 0;
        margin-right: 20px;
        order: -1;
    }
    
    .layout-content .modern-post-nav-750254e7 .post-nav-next .nav-icon {
        margin-left: 0;
        margin-right: 20px;
        order: -1;
    }
    
    .layout-full .modern-post-nav-750254e7 .post-nav-prev:hover .nav-icon,
    .layout-content .modern-post-nav-750254e7 .post-nav-prev:hover .nav-icon {
        transform: translateX(-5px);
    }
    .layout-full .modern-post-nav-750254e7 .post-nav-next:hover .nav-icon,
    .layout-content .modern-post-nav-750254e7 .post-nav-next:hover .nav-icon {
        transform: translateX(-5px); /* Moves left because order is reversed */
    }
}