/* CSS for Back Button */
.back-button-container {
    margin-bottom: 20px; /* Add some space below the back button */
}

.back-button {
    background-color: #feca16; /* Yellow background */
    color: #fff; /* White text */
    padding: 10px 20px;
    border: none;
    border-radius: 0; /* Sharp corners */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none; /* Remove underline from link */
    position: relative; /* For animation positioning */
    overflow: hidden; /* Clip hover effect */
    display: inline-block; /* Ensure inline-block for proper centering if needed */
}

.back-button i {
    margin-right: 8px; /* Spacing between icon and text */
}

/* equipment_rental.css, p_form.css, promoter_form.css, scout_form.css - Updated CSS for horizontal swipe Back button */

.back-button::before {
    content: "";
    position: absolute;
    top: 0; /* Align to the top of the button */
    right: 0; /* Start from the right edge */
    /* transform: translate(-50%, -50%) rotate(-45deg);  Remove diagonal transform */
    background-color: #29363e; /* Navy blue hover color */
    width: 0;      /* Start with zero width */
    height: 100%;   /* Full height of the button */
    z-index: -1;
    transition: width 0.3s ease-out; /* Animate width for horizontal swipe, use ease-out for a quicker end */
    left: auto; /* Ensure 'right' property takes precedence */
}

.back-button:hover::before {
    width: 100%; /* Expand width to 100% to swipe from right to left */
    left: 0; /* Make the swipe start from the left edge after width expands */
    right: auto; /* Ensure 'left' property takes precedence */
}

.back-button:hover {
    color: white; /* Keep text white on hover */
}