.tpl-guest-messages-preview {
    text-align: initial;
}

.tpl-guest-messages-preview-slider {
    --preview-items-visible: var(--preview-visible-default, 1);
    --preview-slide-gap: 1rem;
    position: relative;
}

@media (min-width: 576px) {
    .tpl-guest-messages-preview-slider {
        --preview-items-visible: var(--preview-visible-sm, 2);
    }
}

@media (min-width: 768px) {
    .tpl-guest-messages-preview-slider {
        --preview-items-visible: var(--preview-visible-md, 3);
    }
}

@media (min-width: 992px) {
    .tpl-guest-messages-preview-slider {
        --preview-items-visible: var(--preview-visible-lg, 4);
    }
}

.tpl-guest-messages-preview-slider__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tpl-guest-messages-preview-slider__viewport::-webkit-scrollbar {
    display: none;
}

.tpl-guest-messages-preview-slider__track {
    display: flex;
    gap: var(--preview-slide-gap);
    justify-content: safe center;
}

.tpl-guest-messages-preview-slider--centered .tpl-guest-messages-preview-slider__track {
    justify-content: center;
}

.tpl-guest-messages-preview-slide {
    flex: 0 0 calc(
        (100% - ((var(--preview-items-visible) - 1) * var(--preview-slide-gap)))
        / var(--preview-items-visible)
    );
    min-width: 0;
    scroll-snap-align: start;
}

.tpl-guest-messages-preview-slider__dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tpl-guest-messages-preview-slider--paginated .tpl-guest-messages-preview-slider__dots {
    display: flex;
}

.tpl-guest-messages-preview-slider__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--tpl-text-secondary, #5c7268) 35%, transparent);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.tpl-guest-messages-preview-slider__dot:hover {
    background-color: color-mix(in srgb, var(--tpl-accent, var(--tpl-btn-primary, #6b8f71)) 55%, transparent);
}

.tpl-guest-messages-preview-slider__dot.is-active {
    background-color: var(--tpl-accent, var(--tpl-btn-primary, #6b8f71));
    transform: scale(1.2);
}

#guest-messages-root .card,
#guest-messages-root .card-body {
    color: var(--tpl-text-default);
    background-color: var(--tpl-bg-surface);
}

#guest-messages-root .card .h6 {
    color: var(--tpl-text-primary);
}

#guest-messages-root .text-tpl-secondary,
#guest-messages-preview-section .text-tpl-secondary {
    color: var(--tpl-text-secondary) !important;
}

#guest-messages-root .tpl-gm-icon-btn--danger,
#guest-messages-root .btn-outline-danger {
    color: #8b3a3a;
    border-color: color-mix(in srgb, #8b3a3a 40%, var(--tpl-border, #d4cfc4));
}

#guest-messages-root .tpl-gm-icon-btn--danger:hover,
#guest-messages-root .tpl-gm-icon-btn--danger:focus,
#guest-messages-root .btn-outline-danger:hover,
#guest-messages-root .btn-outline-danger:focus {
    color: #6e2c2c;
    background-color: color-mix(in srgb, #8b3a3a 10%, var(--tpl-bg-surface));
    border-color: #8b3a3a;
}