/* Container for floating icons */
.hi-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* Changed to left as per common design, or user preference? User didn't specify, but usually it's left or right. I'll put it on the left to avoid conflict with scroll to top buttons often on right. */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Visibility Control */
.hi-container {
    display: none;
    /* Hidden by default */
}

/* Show based on classes added by PHP */
@media (min-width: 769px) {
    .hi-container.hi-show-desktop {
        display: flex;
    }
}

@media (max-width: 768px) {
    .hi-container.hi-show-mobile {
        display: flex;
    }
}

/* Icon Wrappers */
.hi-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.hi-icon-wrapper:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.hi-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

/* Tooltips */
.hi-tooltip {
    position: absolute;
    left: 70px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hi-icon-wrapper:hover .hi-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Specific Styles */
/* Specific Styles */
.hi-whatsapp-wrapper {
    background: #fff;
}

.hi-phone-wrapper {
    background: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hi-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .hi-icon {
        width: 28px;
        height: 28px;
    }
}

/* Modal Styles */
.hi-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.hi-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    animation: hi-fade-in 0.3s ease;
}

@keyframes hi-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hi-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.hi-close:hover,
.hi-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#hi-qrcode-canvas {
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

.hi-btn {
    display: inline-block;
    background: #25D366;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    transition: background 0.3s;
}

.hi-btn:hover {
    background: #128C7E;
}