/* CSS for Display To Admin */
#tmp-contact-wrapper {
    position: fixed;
    bottom: 10px; /* Move icon to the bottom when collapsed */
    z-index: 99;
    max-width: 200px;
    width: auto;
    display: flex;
    flex-direction: column; /* Allow icons to display vertically */
    transition: bottom 0.3s ease; /* Transition effect */
}

.tmp-contact-left {
    left: 0; /* Place on the left */
}

.tmp-contact-right {
    right: 0; /* Place on the right */
}

#tmp-contact-toggle {
    display: block;
    cursor: pointer;
    background-color: #0073aa;
    color: white;
    padding: 15px;
    text-align: center;
    width: 100px; /* Ensure width and height are larger for easy clicking */
    height: 100px;
    border-radius: 50%; /* Round for the icon */
    position: fixed; /* Keep the "show" icon position fixed */
    bottom: 10px; /* Keep the icon at the bottom */
    z-index: 10000; /* Ensure it is above other elements */
}

#tmp-contact-toggle::before {
    content: "\260E"; /* Contact icon (phone image) */
    font-size: 24px;
    display: block;
}

#tmp-contact-toggle::after {
    content: "Contact"; /* Text for the show button */
    font-size: 16px;
    display: block;
    margin-top: 5px;
}

.tmp-contact-item {
    display: none; /* Initially hide icons */
    margin-bottom: 10px; /* Space between icons */
    position: relative; /* Allow description to be absolutely positioned */
}

.tmp-contact-open .tmp-contact-item {
    display: block; /* Show icons when opened */
}

.tmp-contact-column {
    position: fixed; /* Ensure icon remains in a fixed position */
    top: 50%; /* Place in the middle height */
    transform: translateY(-50%); /* Move up to the center */
}

.tmp-contact-column .tmp-contact-item { /* Support column display */
    display: block; /* Display as a column */
    margin-top: 5px; /* Space between icons */
    margin-bottom: 5px; /* Space between icons */
}

/* Center the first icon */
.tmp-contact-column .tmp-contact-item:first-child {
    margin-top: 0; /* No top margin */
}

/* Ensure column icons do not stay at the bottom corner */
.tmp-contact-column .tmp-contact-item:not(:first-child) {
    position: relative; /* Keep icon in relative position */
    top: 0; /* Ensure no offset */
}

/* Hover effects for icons */
.tmp-contact-left .tmp-contact-item[data-description]:hover::before {
    content: attr(data-description);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    position: absolute;
    left: 100%; /* Place to the left of the icon */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Move up to the center */
    white-space: nowrap;
    z-index: 10000;
}

.tmp-contact-right .tmp-contact-item[data-description]:hover::before {
    content: attr(data-description);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    position: absolute;
    right: 100%; /* Place to the right of the icon */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Move up to the center */
    white-space: nowrap;
}