/* plugins/charity-directory/shortcodes/charity-indicators/charity-indicators.css */

.charity-indicators {
    display: flex; /* Arrange icons in a row */
    flex-wrap: wrap; /* Allow icons to wrap to the next line on smaller screens */
    gap: 5px; /* Space between the icons */
    align-items: center;
}

.charity-indicator-icon {
    position: relative;
    cursor: help;
    display: inline-flex; /* Use inline-flex to center content if needed */
    align-items: center;
    justify-content: center;
    /* Set a consistent size for the icons */
    width: 40px; /* Example size for the icon container */
    height: 40px; /* Example size for the icon container */
    border-radius: 25px; /* Slightly rounded corners for the icon container */
    border: 4px solid transparent; /* Add transparent border to prevent layout shift on hover */
    box-sizing: border-box; /* Include border in the element's total width and height */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth hover effect */
}

.charity-indicator-icon:hover,
.charity-indicator-icon:focus {
    transform: translateY(-3px); /* Lift effect on hover/focus */
    border-color: var(--wp--preset--color--accent-2); /* Add border on hover/focus */
    z-index: 20; /* Ensure the icon and its tooltip appear above other card content */
}

.charity-indicator-icon img {
    max-width: 100%; /* Ensure icon fits within its container */
    max-height: 100%;
    display: block; /* Remove any extra space below the image */
}

.charity-indicator-icon .tooltip-text,
.tooltip-icon-wrapper .tooltip-text {
    visibility: hidden;
    width: 220px; /* Wider tooltip for more text */
    background-color: #0A1439E5; /* 90% opacity dark blue */
    color: #fff;
    text-align: center;
    border-radius: 5px; /* More rounded corners */
    padding: 8px 12px; /* More padding */
    position: absolute;
    z-index: 10; /* Ensure tooltip is above other content */
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%); /* Center the tooltip horizontally */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Allows interaction with elements behind the hidden tooltip */
    font-size: 13px; /* Slightly smaller font for tooltips */
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Added subtle shadow to tooltip */
    white-space: normal; /* Allow text to wrap */
}

/* Arrow for the tooltip */
.charity-indicator-icon .tooltip-text::after,
.tooltip-icon-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0A1439E5 transparent transparent transparent;
}

.charity-indicator-icon:hover .tooltip-text,
.charity-indicator-icon:focus .tooltip-text,
.tooltip-icon-wrapper:hover .tooltip-text,
.tooltip-icon-wrapper:focus .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .charity-indicators-container {
        justify-content: center; /* Center icons on smaller screens */
    }
    .charity-indicator-icon {
        width: 32px;
        height: 32px;
    }
    .charity-indicator-icon .tooltip-text,
    .tooltip-icon-wrapper .tooltip-text {
        width: 180px; /* Slightly smaller tooltip on mobile */
        font-size: 12px;
        padding: 6px 10px;
    }
}