[data-trigger="fullscreen"] {
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10; /* Default z-index */
    transition: all 0.3s ease; /* Smooth transition */
}

[data-trigger="fullscreen"].full-screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Above everything */
    background: #ffffff; /* Ensure opaque background */
}

.toggle-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.2em;
    color: #333;
    z-index: 9;
}

.toggle-icon:hover {
    color: #007bff; /* Hover effect */
}

[data-trigger="fullscreen"] {
    overflow-y: scroll; /* Scrollable content in full-screen */
}