/* Styling for the reaction container */
.fa-face-meh{
    color: #ff6900;
}
.fa-face-smile{
    color: #00d084;
}
.fa-face-sad-tear{
    color: #0693e3;
}
.fa-face-grin-tongue-wink{
    color: #ff6b35;
}
.fa-face-angry{
    color: #e74c3c;
}
.fa-face-rolling-eyes{
    color: #95a5a6;
}
.fa-face-grin-hearts{
    color: #e91e63;
}
.fa-face-surprise{
    color: #f39c12;
}

.reaction-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 20px;
    padding: 15px;
    min-width: 0; /* Allow flex items to shrink */
    box-sizing: border-box;
    min-height: 50px; /* Ensure minimum height for proper alignment */
}

/* Width options */
.ppr-width-content {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ppr-width-full {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fallback for inline styles */
.reaction-container[style*="max-width: 800px"] {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.reaction-container[style*="max-width: 100%"] {
    max-width: 100% !important;
}

/* Styling for the left reaction icons */
.left-reaction-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: center;
}

/* Styling for the individual left reaction icons */
.left-reaction-icons .reaction-icon {
    margin: 0 5px;
    font-size: 1.3em;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Ensure smooth transitions for icon size changes */
.left-reaction-icons .reaction-icon i {
    transition: all 0.3s ease;
}

/* Dynamic icon size based on data attribute */
.reaction-container[data-icon-size] .left-reaction-icons .reaction-icon i {
    font-size: calc(var(--icon-size, 1.3) * 1em);
}

.reaction-container[data-icon-size] .right-reaction-icons .reaction-icon {
    font-size: calc(var(--icon-size, 1.3) * 0.7em);
}

/* Selected icon should be larger and more prominent */
.left-reaction-icons .reaction-icon i.fa-xl {
    font-size: calc(var(--icon-size, 1.3) * 1.5em) !important;
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    z-index: 2;
    position: relative;
}

.left-reaction-icons .reaction-icon i.fa-sm {
    font-size: calc(var(--icon-size, 1.3) * 1em);
    transform: scale(1);
    filter: none;
}

/* Custom icon colors and opacity */
.reaction-container[data-icon-color="custom"] .left-reaction-icons .reaction-icon i,
.reaction-container[data-icon-color="custom"] .right-reaction-icons .reaction-icon i {
    color: var(--icon-custom-color, #333333) !important;
    opacity: var(--icon-opacity, 1);
}

.reaction-container[data-icon-color="default"] .left-reaction-icons .reaction-icon i,
.reaction-container[data-icon-color="default"] .right-reaction-icons .reaction-icon i {
    opacity: var(--icon-opacity, 1);
}

/* Ensure FontAwesome icons are perfectly centered */
.left-reaction-icons .reaction-icon i,
.right-reaction-icons .reaction-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

/* Hover effect for the left reaction icons */
.left-reaction-icons .reaction-icon:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* Styling for the right reaction icons */
.right-reaction-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}

/* Styling for the individual right reaction icons and counts */
.right-reaction-icons .reaction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    margin: 0 3px;
    flex-shrink: 0;
    height: 100%;
}

/* Styling for the reaction counts */
.reaction-count {
    font-size: 0.8em;
    margin-left: 3px;
    font-weight: bold;
    color: #333;
}

.icon-disabled{
    opacity: 0.5;
    pointer-events: none;
}

.icon-redirect{
    cursor: pointer;
}

.icon-redirect:hover{
    opacity: 0.8;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .reaction-container {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .left-reaction-icons,
    .right-reaction-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .left-reaction-icons .reaction-icon,
    .right-reaction-icons .reaction-icon {
        font-size: 1.1em;
        margin: 0 3px;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .reaction-container {
        margin: 10px;
        padding: 8px;
    }
    
    .left-reaction-icons .reaction-icon,
    .right-reaction-icons .reaction-icon {
        font-size: 1em;
        margin: 0 2px;
    }
    
    .reaction-count {
        font-size: 0.7em;
    }
}