/* CommerceGurus: Display a "Price per day" or "Benefit badges" on Product Pages */
/* Container for the 3 benefit items */
.price_per_day {
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: space-between; /* Spreads items evenly across width */
}

/* Individual item wrapper (Icon + Text) */
.price_per_day_item {
    display: inline-flex;
    align-items: center;
    position: relative; /* Required for absolute positioning of tooltips */
    cursor: pointer;
    z-index: 1;
}

/* Icon Sizing */
.price_per_day svg {
    width: 18px;
    flex-shrink: 0;
    /* margin-right: 0.5rem; */ 
}

/* -----------------------------------------------------------
   TOOLTIP STYLES 
   ----------------------------------------------------------- */

/* Shared Tooltip Base Styles 
.price_per_day_item[data-customTooltip]:after {
    content: attr(data-customTooltip);
    */
    /* Appearance 
    background-color: #fff;
    color: #222;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
    */
    /* Dimensions & Text 
    height: fit-content;
    width: fit-content;
    word-break: normal;
    text-align: center;
    white-space: nowrap;
    */
    /* Positioning (Default: Center aligned) 
    position: absolute;
    bottom: -2px;
    left: 50%;
    z-index: 100;
    */
    /* Animation: Hidden state (using opacity/visibility avoids layout jumping) 
    opacity: 0;
    visibility: hidden; 
    transform: translate(-50%, 110%) scale(0.95);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}*/

/* Hover State: Show Tooltip 
.price_per_day_item[data-customTooltip]:hover:after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 110%) scale(1);
}*/

/* -----------------------------------------------------------
   MOBILE FIX: Prevent First Tooltip from going off-screen
   ----------------------------------------------------------- */

/* Force the FIRST item's tooltip to align Left instead of Center
 * Reset horizontal translation to 0 
.price_per_day_item:first-child[data-customTooltip]:after {
    left: 0;
    transform-origin: top left;
    transform: translate(0, 110%) scale(0.95); 
}*/

/* Hover State for the First Item 
.price_per_day_item:first-child[data-customTooltip]:hover:after {
    transform: translate(0, 110%) scale(1);
}*/