/* ========================================================== */
/* 1. Comparison Control Container (The Main Floating Panel) */
/* ========================================================== */
.compare_control {
    position: fixed;
    top: 50%;
    left: -5px;
    /* left: 20px; */
    z-index: 1000;
    /* display: none; */
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    transform: translateY(-50%);
    
    /* Animation Control */
    width: 60px; /* Default width (when closed, only showing the icon) */
    background: #fff; /* White background for the panel */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Animation transition for the panel itself */
    transition: width 0.3s ease, padding 0.3s ease;
    padding: 10px; /* Padding for the closed state */
}

.compare_control.active {
    /* display: flex;
    flex-direction: column; */
    /* State when the panel is OPEN */
    width: 250px; /* Example: Expanded width */
    padding: 10px;
}

/* ========================================================== */
/* 2. Icon Toggling (Overlay for Smooth Transition) */
/* ========================================================== */

/* Container to hold the two overlay icons */
.compare_control--toggle_icon {
    position: relative; 
    width: 40px; /* Must match the icon size */
    height: 40px; /* Must match the icon size */
    cursor: pointer;
    /* Ensure the icon is centered within the default 60px control width */
    align-self: center; 
}

/* Both open and close buttons are positioned absolutely to overlap */
.compare_control--open_btn, .compare_control--close_btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Centers the SVG inside the button */
    justify-content: center;
    align-items: center;
    
    /* Use opacity for smooth fade transition */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Default state: Close button is hidden and non-interactive */
.compare_control--close_btn {
    opacity: 0; 
    pointer-events: none; /* Prevents clicks when hidden */
}

/* Active state: Hide the open button and show the close button */
.compare_control.active .compare_control--open_btn {
    opacity: 0;
    pointer-events: none;
}

.compare_control.active .compare_control--close_btn {
    opacity: 1;
    pointer-events: auto;
}

.compare_control--icon svg {
    display: block; /* Removes any baseline space under the SVG */
}

/* ========================================================== */
/* 3. Content Panel (The List of Products) */
/* ========================================================== */

.compare_control--content {
    /* Hide content by default */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    
    /* Animation transition for the content */
    /* max-height changes quickly, opacity changes after a short delay */
    transition: max-height 0.5s ease, opacity 0.3s ease 0.2s; 
}

.compare_control.active .compare_control--content {
    /* Show content when Active */
    max-height: 500px; /* Must be larger than the max possible content height */
    opacity: 1;
}

.compare_control--open_btn--text {
    display: block;
    text-align: center;
    /* margin-bottom: 10px; */
    font-size: 0.8rem;
    
}

.compare_control--compare-pd-wrapper {
    display: flex;
    flex-direction: column;
    /* max-height is already handled by the parent .compare_control--content */
    max-height: 300px; 
    overflow-y: auto;
    gap: 5px; /* Added gap for spacing between product items */
}

.compare_control--compare-pd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background: #f8f8f8;
    border-radius: 4px;
}

.compare_control--compare-pd-item p {
    font-size: 0.7rem; /* Adjusted font size for readability */
    margin: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.compare_control--compare-pd-item-image_container {
    position: relative;
    margin-bottom: 5px;
}

.compare_control--compare-pd-item-image {
    width: 40px; /* Smaller image size for the panel */
    height: 40px;
    object-fit: contain;
    border: 1px solid #ccc;
    padding: 3px;
    background: #fff;
    border-radius: 4px;
}

.compare_control--compare-pd-item--remove {
    position: absolute;
    cursor: pointer;
    font-size: 0.9rem; /* Adjusted size */
    color: white;
    background: red;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    top: 0; /* Positioned at the top right of the image container */
    right: 0;
    transform: translate(30%, -30%); /* Push slightly outside the corner */
}

/* ========================================================== */
/* 4. Original/Misc Styles (Kept for Context) */
/* ========================================================== */

.compare_control--icon{
    display:flex;
    align-items:center;
    flex-direction:column;
    position: relative;
}

.compare_control--icon::after{

    position: absolute;
    top: 0;
    right: 0;

    width: 1.5em;
    height: 1.5em;
    transform: translate(1.5em, -1.5em);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--secondary-color);
    content: var(--compare_product_amount, "0");;
    color: white;
    font-size: small;


}
@media only screen and (max-width: 767px) {
    .compare_control{
        display: none !important;
    }
}