/* Основний контейнер-віджет */
.mood-widget {
    position: relative; 
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    background-color: #f8f9fa;
    padding: 1.5rem 0;
    border-radius: 0.75rem;
}
@media (min-width: 640px) {
    .mood-widget {
        padding: 2.5rem 0;
    }
}

.mood-widget-content {
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 640px) {
    .mood-widget-content {
         padding: 0 3rem;
    }
}

/* Заголовки */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 1.5rem;
}

.mood-section {
    margin-bottom: 1.5rem;
}
 .mood-section:last-child {
    margin-bottom: 0;
}

/* Стрічка з кнопками */
.mood-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.mood-container::-webkit-scrollbar {
    display: none;
}
 @media (min-width: 640px) {
    .mood-container {
         padding: 0.25rem 3rem;
    }
}

/* Стилі для кнопок */
.mood-button {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
}

/* --- Кольорові палітри --- */
.palette-blue.c1 { background-color: #d0ebff; color: #1971c2; }
.palette-blue.c2 { background-color: #e9ecef; color: #495057; }
.palette-blue.c3 { background-color: #fff0d4; color: #e8590c; }
.palette-blue.c4 { background-color: #ffe3e3; color: #c92a2a; }
.palette-blue.c5 { background-color: #d3f9d8; color: #2f9e44; }
.palette-green.c1 { background-color: #d1fae5; color: #065f46; }
.palette-green.c2 { background-color: #ccfbf1; color: #0f766e; }
.palette-green.c3 { background-color: #a7f3d0; color: #047857; }
.palette-green.c4 { background-color: #f0fdf4; color: #166534; }
.palette-green.c5 { background-color: #dcfce7; color: #15803d; }
.palette-warm.c1 { background-color: #ffedd5; color: #9a3412; }
.palette-warm.c2 { background-color: #fef9c3; color: #854d0e; }
.palette-warm.c3 { background-color: #fde68a; color: #a16207; }
.palette-warm.c4 { background-color: #fee2e2; color: #991b1b; }
.palette-warm.c5 { background-color: #fef3c7; color: #b45309; }
.mood-button.romance-pink { background-color: #ffddeeff; color: #d63384; }
.mood-button.monochrome { 
    background-color: #ffffff; 
    color: #212529; 
    border: 1px solid #dee2e6;
}

/* --- Стилі для кнопок скрола --- */
.scroll-controls {
    position: absolute;
    top: 2rem;
    right: 1rem;
    display: none;
    gap: 0.5rem;
    z-index: 10;
}
@media (min-width: 1024px) {
    .scroll-controls {
        display: flex;
    }
}
@media (min-width: 640px) {
     .scroll-controls {
        right: 3rem;
    }
}

.scroll-button {
    background-color: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-button:hover {
    transform: scale(1.1);
}
.scroll-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: scale(1);
}