/* Sticky button styles */
#slide-in-trigger {
    position: fixed;
    z-index: 10000; /* Higher than popout */
    padding: 10px 20px;
    background: #0073e6;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.5s ease;
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 5px 5px 0 0; /* Rounded corners on the top */
}

/* Position-specific button styles */
#slide-in-trigger[data-position="right"] {
    right: -50px; /* Hidden by default */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg); /* Rotate 90 degrees anti-clockwise */
    transform-origin: right center; /* Rotate around the right edge */
}

#slide-in-trigger[data-position="right"].visible {
    right: 20px; /* Visible 20px from the edge */
}

#slide-in-trigger[data-position="left"] {
    left: -50px; /* Hidden by default */
    top: 50%;
    transform: translateY(-50%) rotate(90deg); /* Rotate 90 degrees clockwise */
    transform-origin: left center; /* Rotate around the left edge */
}

#slide-in-trigger[data-position="left"].visible {
    left: 20px; /* Visible 20px from the edge */
}

#slide-in-trigger[data-position="top"] {
    top: -50px; /* Hidden by default */
    left: 50%;
    transform: translateX(-50%);
}

#slide-in-trigger[data-position="top"].visible {
    top: 20px; /* Visible 20px from the edge */
}

#slide-in-trigger[data-position="bottom"] {
    bottom: -50px; /* Hidden by default */
    left: 50%;
    transform: translateX(-50%);
}

#slide-in-trigger[data-position="bottom"].visible {
    bottom: 20px; /* Visible 20px from the edge */
}

/* Popout styles */
.slide-in-popout {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
    z-index: 9999; /* Lower than button */
    max-width: 90%; /* Ensure popout doesn't exceed screen width */
    max-height: 90vh; /* Ensure popout doesn't exceed screen height */
    overflow: auto; /* Add scroll if content is too large */
}

/* Position-specific popout styles */
.slide-in-popout[data-position="right"] {
    right: -100%; /* Hidden by default */
    top: 50%;
    transform: translateY(-50%);
}

.slide-in-popout[data-position="right"].visible {
    right: 20px; /* Visible 20px from the edge */
}

.slide-in-popout[data-position="left"] {
    left: -100%; /* Hidden by default */
    top: 50%;
    transform: translateY(-50%);
}

.slide-in-popout[data-position="left"].visible {
    left: 20px; /* Visible 20px from the edge */
}

.slide-in-popout[data-position="top"] {
    top: -100%; /* Hidden by default */
    left: 50%;
    transform: translateX(-50%);
}

.slide-in-popout[data-position="top"].visible {
    top: 20px; /* Visible 20px from the edge */
}

.slide-in-popout[data-position="bottom"] {
    bottom: -100%; /* Hidden by default */
    left: 50%;
    transform: translateX(-50%);
}

.slide-in-popout[data-position="bottom"].visible {
    bottom: 20px; /* Visible 20px from the edge */
}