/**
 * TND Button Arrow Styles
 * Scope: .tnd-btn-primary elements only
 * Version: 1.0.0
 */

/* 1. Define Variables for Scope */
.tnd-btn-primary {
    --tnd-arrow-gap: 5px;
    --tnd-arrow-w: 10px;
    --tnd-arrow-h: 2px;
    --tnd-arrow-color: var(--e-global-color-yellow, #ffd100); /* Fallback color if var missing */
    --tnd-arrow-hover-color: var(--e-global-color-black, #000);
    --tnd-anim-bezier: cubic-bezier(0.16, 1, 0.3, 1);
    --tnd-anim-duration: 0.4s;
    --tnd-shadow-normal: 0 2px 20px rgba(255, 209, 0, 0.25);
    --tnd-shadow-hover: 0 10px 30px rgba(255, 209, 0, 0.35);
}

/* 2. Button Base Styles */
.tnd-btn-primary .elementor-button,
.tnd-btn-primary.elementor-button {
    display: inline-flex;
    align-items: center;
    gap: var(--tnd-arrow-gap);
    /* Performance: Transition box-shadow and transform together */
    transition: transform var(--tnd-anim-duration) var(--tnd-anim-bezier), 
                box-shadow var(--tnd-anim-duration) var(--tnd-anim-bezier);
    box-shadow: var(--tnd-shadow-normal);
    /* Optimization: Remove will-change to save memory, browser handles hover well enough */
}

/* 3. Button Hover State */
.tnd-btn-primary .elementor-button:hover,
.tnd-btn-primary.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--tnd-shadow-hover);
}

/* 4. Arrow Wrapper Structure */
.tnd-btn-primary .arrow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: var(--tnd-arrow-gap);
    pointer-events: none; /* Prevent interference */
}

/* 5. Main Arrow Line */
.tnd-btn-primary .arrow {
    margin-top: 1px;
    width: var(--tnd-arrow-w);
    height: var(--tnd-arrow-h);
    background: var(--tnd-arrow-color);
    position: relative;
    transition: background var(--tnd-anim-duration) var(--tnd-anim-bezier);
}

/* 6. Arrow Head (Triangle) */
.tnd-btn-primary .arrow::before {
    content: "";
    position: absolute;
    top: -3px;
    right: 3px;
    padding: 3px;
    border: solid var(--tnd-arrow-hover-color); /* Initial border color logic from original? Check constraint. */
    /* Original code had border: solid var(--e-global-color-black). Keeping strictly consistent below */
    border-color: var(--tnd-arrow-hover-color); 
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: right var(--tnd-anim-duration) var(--tnd-anim-bezier);
}

/* 7. Hover Effects on Arrow */
.tnd-btn-primary .elementor-button:hover .arrow,
.tnd-btn-primary.elementor-button:hover .arrow {
    background: var(--tnd-arrow-hover-color);
}

.tnd-btn-primary .elementor-button:hover .arrow::before,
.tnd-btn-primary.elementor-button:hover .arrow::before {
    right: 0;
}