.cr-nav-widget {
    width: 100%;
}

.cr-nav-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cr-nav-gap, 10px);
}

.cr-nav-widget ul li {
    margin: 0;
    padding: 0;
}

.cr-nav-widget ul li a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Alignment Classes - Desktop */
.cr-nav-align-left .cr-nav-widget ul {
    align-items: flex-start;
    text-align: left;
}

.cr-nav-align-center .cr-nav-widget ul {
    align-items: center;
    text-align: center;
}

.cr-nav-align-right .cr-nav-widget ul {
    align-items: flex-end;
    text-align: right;
}

/* Alignment Classes - Tablet */
@media (max-width: 1024px) {
    .cr-nav-align-tablet-left .cr-nav-widget ul {
        align-items: flex-start;
        text-align: left;
    }

    .cr-nav-align-tablet-center .cr-nav-widget ul {
        align-items: center;
        text-align: center;
    }

    .cr-nav-align-tablet-right .cr-nav-widget ul {
        align-items: flex-end;
        text-align: right;
    }
}

/* Alignment Classes - Mobile */
@media (max-width: 767px) {
    .cr-nav-align-mobile-left .cr-nav-widget ul {
        align-items: flex-start;
        text-align: left;
    }

    .cr-nav-align-mobile-center .cr-nav-widget ul {
        align-items: center;
        text-align: center;
    }

    .cr-nav-align-mobile-right .cr-nav-widget ul {
        align-items: flex-end;
        text-align: right;
    }
}

/* --- POINTER STYLES --- */

/* Base Pointer Setup */
.cr-nav-widget ul li a {
    position: relative;
    /* Default pointer color uses text color if not overridden */
    --pointer-color: var(--cr-nav-pointer-color, currentColor);
}

/* 1. Arrow Slide (->) */
.cr-nav-pointer-arrow-slide .cr-nav-widget ul li a::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: var(--pointer-color);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateX(-10px);
}

.cr-nav-pointer-arrow-slide .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-arrow-slide .cr-nav-widget ul li.current-menu-item > a::before {
    opacity: 1;
    transform: translateX(0);
}

.cr-nav-pointer-arrow-slide .cr-nav-widget ul li a {
    transition: transform 0.3s ease;
}

.cr-nav-pointer-arrow-slide .cr-nav-widget ul li a:hover,
.cr-nav-pointer-arrow-slide .cr-nav-widget ul li.current-menu-item > a {
    transform: translateX(20px);
}

/* 2. Line Grow (Left Line) */
.cr-nav-pointer-line-grow .cr-nav-widget ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    width: 0;
    height: 2px;
    background-color: var(--pointer-color);
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

.cr-nav-pointer-line-grow .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-line-grow .cr-nav-widget ul li.current-menu-item > a::before {
    width: 20px;
    left: -25px; /* Adjust left as it grows to keep it anchored or move out */
}

/* Actually, let's make the line stick to the text and push text */
.cr-nav-pointer-line-grow .cr-nav-widget ul li a {
    transition: transform 0.3s ease;
}

.cr-nav-pointer-line-grow .cr-nav-widget ul li a:hover,
.cr-nav-pointer-line-grow .cr-nav-widget ul li.current-menu-item > a {
    transform: translateX(15px);
}

/* 3. Dot Pulse */
.cr-nav-pointer-dot-pulse .cr-nav-widget ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pointer-color);
    transform: translateY(-50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cr-nav-pointer-dot-pulse .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-dot-pulse .cr-nav-widget ul li.current-menu-item > a::before {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.1); /* Subtle pulse ring */
}

.cr-nav-pointer-dot-pulse .cr-nav-widget ul li a {
    transition: padding-left 0.3s ease;
}

.cr-nav-pointer-dot-pulse .cr-nav-widget ul li a:hover,
.cr-nav-pointer-dot-pulse .cr-nav-widget ul li.current-menu-item > a {
    padding-left: 10px;
}

/* 4. Brackets [ Text ] */
.cr-nav-pointer-brackets .cr-nav-widget ul li a::before,
.cr-nav-pointer-brackets .cr-nav-widget ul li a::after {
    display: inline-block;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    color: var(--pointer-color);
}

.cr-nav-pointer-brackets .cr-nav-widget ul li a::before {
    content: '[';
    margin-right: 5px;
    transform: translateX(10px);
}

.cr-nav-pointer-brackets .cr-nav-widget ul li a::after {
    content: ']';
    margin-left: 5px;
    transform: translateX(-10px);
}

.cr-nav-pointer-brackets .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-brackets .cr-nav-widget ul li.current-menu-item > a::before,
.cr-nav-pointer-brackets .cr-nav-widget ul li a:hover::after,
.cr-nav-pointer-brackets .cr-nav-widget ul li.current-menu-item > a::after {
    opacity: 1;
    transform: translateX(0);
}

/* 5. Underline Sweep */
.cr-nav-pointer-underline-sweep .cr-nav-widget ul li a {
    background-image: linear-gradient(var(--pointer-color), var(--pointer-color));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%; /* Left aligned start */
    transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: 2px;
}

/* Center align needs center sweep */
.cr-nav-align-center .cr-nav-pointer-underline-sweep .cr-nav-widget ul li a {
    background-position: 50% 100%;
}
/* Right align needs right sweep */
.cr-nav-align-right .cr-nav-pointer-underline-sweep .cr-nav-widget ul li a {
    background-position: 100% 100%;
}

.cr-nav-pointer-underline-sweep .cr-nav-widget ul li a:hover,
.cr-nav-pointer-underline-sweep .cr-nav-widget ul li.current-menu-item > a {
    background-size: 100% 2px;
}

/* 6. Double Arrow (>>) */
.cr-nav-pointer-double-arrow .cr-nav-widget ul li a::before {
    content: '»';
    position: absolute;
    left: -25px;
    opacity: 0;
    color: var(--pointer-color);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateX(-10px);
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
    top: 50%;
    margin-top: -0.6em; /* Half of font-size roughly */
}

.cr-nav-pointer-double-arrow .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-double-arrow .cr-nav-widget ul li.current-menu-item > a::before {
    opacity: 1;
    transform: translateX(0);
}

.cr-nav-pointer-double-arrow .cr-nav-widget ul li a {
    transition: transform 0.3s ease;
}

.cr-nav-pointer-double-arrow .cr-nav-widget ul li a:hover,
.cr-nav-pointer-double-arrow .cr-nav-widget ul li.current-menu-item > a {
    transform: translateX(25px);
}

/* 7. Thick Bar (Left) */
.cr-nav-pointer-thick-bar .cr-nav-widget ul li a {
    border-left: 0px solid var(--pointer-color);
    padding-left: 0;
    transition: all 0.2s ease;
}

.cr-nav-pointer-thick-bar .cr-nav-widget ul li a:hover,
.cr-nav-pointer-thick-bar .cr-nav-widget ul li.current-menu-item > a {
    border-left: 5px solid var(--pointer-color);
    padding-left: 15px;
}

/* 8. Circle Outline */
.cr-nav-pointer-circle-outline .cr-nav-widget ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--pointer-color);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

.cr-nav-pointer-circle-outline .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-circle-outline .cr-nav-widget ul li.current-menu-item > a::before {
    transform: translateY(-50%) scale(1);
}

.cr-nav-pointer-circle-outline .cr-nav-widget ul li a {
    transition: transform 0.3s ease;
}

.cr-nav-pointer-circle-outline .cr-nav-widget ul li a:hover,
.cr-nav-pointer-circle-outline .cr-nav-widget ul li.current-menu-item > a {
    transform: translateX(15px);
}

/* 9. Square Fill */
.cr-nav-pointer-square-fill .cr-nav-widget ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -18px;
    width: 8px;
    height: 8px;
    background-color: var(--pointer-color);
    transform: translateY(-50%) rotate(45deg) scale(0);
    transition: transform 0.3s ease;
}

.cr-nav-pointer-square-fill .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-square-fill .cr-nav-widget ul li.current-menu-item > a::before {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.cr-nav-pointer-square-fill .cr-nav-widget ul li a {
    transition: transform 0.3s ease;
}

.cr-nav-pointer-square-fill .cr-nav-widget ul li a:hover,
.cr-nav-pointer-square-fill .cr-nav-widget ul li.current-menu-item > a {
    transform: translateX(15px);
}

/* 10. Angle Brackets < Text > */
.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a::before,
.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a::after {
    display: inline-block;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    color: var(--pointer-color);
    font-weight: bold;
}

.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a::before {
    content: '‹';
    margin-right: 5px;
    transform: translateX(10px);
}

.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a::after {
    content: '›';
    margin-left: 5px;
    transform: translateX(-10px);
}

.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-angle-brackets .cr-nav-widget ul li.current-menu-item > a::before,
.cr-nav-pointer-angle-brackets .cr-nav-widget ul li a:hover::after,
.cr-nav-pointer-angle-brackets .cr-nav-widget ul li.current-menu-item > a::after {
    opacity: 1;
    transform: translateX(0);
}

/* 11. Wavy Underline */
.cr-nav-pointer-wavy-underline .cr-nav-widget ul li a {
    text-decoration: none;
    background: linear-gradient(to bottom, var(--pointer-color) 0%, var(--pointer-color) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 0px;
    transition: background-size .2s;
    padding-bottom: 3px;
}

.cr-nav-pointer-wavy-underline .cr-nav-widget ul li a:hover,
.cr-nav-pointer-wavy-underline .cr-nav-widget ul li.current-menu-item > a {
    /* CSS native wavy underline is easier */
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--pointer-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    background: none;
}

/* 12. Overline */
.cr-nav-pointer-overline .cr-nav-widget ul li a {
    position: relative;
}

.cr-nav-pointer-overline .cr-nav-widget ul li a::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--pointer-color);
    transition: width 0.3s ease;
}

/* Center align support */
.cr-nav-align-center .cr-nav-pointer-overline .cr-nav-widget ul li a::before {
    left: 50%;
    transform: translateX(-50%);
}

.cr-nav-pointer-overline .cr-nav-widget ul li a:hover::before,
.cr-nav-pointer-overline .cr-nav-widget ul li.current-menu-item > a::before {
    width: 100%;
}

/* 13. Fade Background */
.cr-nav-pointer-fade-bg .cr-nav-widget ul li a {
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cr-nav-pointer-fade-bg .cr-nav-widget ul li a:hover,
.cr-nav-pointer-fade-bg .cr-nav-widget ul li.current-menu-item > a {
    background-color: var(--pointer-color);
    /* For fade bg, usually we want the text to contrast. 
       We assume user sets text hover color correctly, or we inverse. 
       Let's use a subtle opacity of pointer color for BG if possible, 
       but CSS vars are raw colors. We'll just set BG. */
    /* If pointer color is not set, it defaults to currentColor, which is bad for BG.
       But user should set it. */
}

/* 14. Terminal Cursor (Blink) */
@keyframes cr-cursor-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.cr-nav-pointer-terminal-cursor .cr-nav-widget ul li a::after {
    content: '_';
    display: inline-block;
    margin-left: 2px;
    color: var(--pointer-color);
    opacity: 0;
    font-weight: bold;
}

.cr-nav-pointer-terminal-cursor .cr-nav-widget ul li a:hover::after,
.cr-nav-pointer-terminal-cursor .cr-nav-widget ul li.current-menu-item > a::after {
    animation: cr-cursor-blink 1s step-end infinite;
    opacity: 1;
}

/* 15. Glitch Effect (Simple CSS shake) */
@keyframes cr-glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-10deg); }
    40% { transform: skew(10deg); }
    60% { transform: skew(-5deg); }
    80% { transform: skew(5deg); }
    100% { transform: skew(0deg); }
}

.cr-nav-pointer-glitch .cr-nav-widget ul li a {
    position: relative;
    display: inline-block;
}

.cr-nav-pointer-glitch .cr-nav-widget ul li a:hover,
.cr-nav-pointer-glitch .cr-nav-widget ul li.current-menu-item > a {
    animation: cr-glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    color: var(--pointer-color);
    text-shadow: 2px 0 rgba(255,0,0,0.5), -2px 0 rgba(0,0,255,0.5);
}

/* Adjustments for centered mobile layout */
/* If mobile is centered, we might want to disable side-pointers or adjust them */
@media (max-width: 767px) {
    /* If arrow-slide or line-grow is used in center mode, it shifts text weirdly. 
       Let's ensure the shift doesn't break centering too much or just accept it as "style".
       Actually, standard behavior is fine. The text will shift, and flexbox keeps it centered.
    */
}