/* Horizontal Container Group Styles */

.horizontal-mask {
    width: 360px;
    height: 360px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}

.horizontal-container-wrapper {
    width: 360px;
    height: 360px;
    position: relative;
    cursor: grabbing;
}

.horizontal-container-group {
    display: flex;
    gap: 0.25em;
    transition: transform 0.25s cubic-bezier(0.5, 0, 0, 1);
    width: calc(360px * 3 + 0.25em * 2);
    touch-action: auto; /* Allow both vertical and horizontal touch gestures */
}

.horizontal-container {
    flex-shrink: 0;
    width: 360px;
    margin-right: 0;
}

/* Page Indicator*/
.horizontal-container-wrapper {
    position: relative;

}

.page-indicator {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.page-indicator .page-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #808080;
}

.page-indicator .page-dot.active {
    background-color: black;
    /* default to black for active */
}

body.dark-mode .page-indicator .page-dot.active {
    background-color: white;
    /* white in dark mode */
}