/**
 * ProductCCA Checkout Labels - Dual Labeling System CSS
 * Enhanced styling for checkout pages with main/component badges
 * v6.1.1
 */

/* Dual labels container */
.productcca-dual-labels-js {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    animation: fadeInLabels 0.3s ease-out;
}

/* Main product badges (configurable gradient) */
.productcca-main-badge {
    display: inline-block;
    background: var(--productcca-main-badge-color, #007bff);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin: 1px 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.productcca-main-badge:hover {
    /* hover effect without transform */
}

/* Component product badges (configurable color) */
.productcca-component-badge {
    display: inline-block;
    background: var(--productcca-component-badge-color, #ffc107);
    color: var(--productcca-component-text-color, #212529);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin: 1px 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.productcca-component-badge:hover {
    transform: translateY(-1px);
}

/* Fade in animation */
@keyframes fadeInLabels {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .productcca-dual-labels-js {
        gap: 2px;
    }
    
    .productcca-main-badge,
    .productcca-component-badge {
        font-size: 10px;
        padding: 1px 4px;
    }
}

/* Ensure labels don't interfere with layout */
.productcca-dual-labels-js + * {
    margin-top: 0.25rem;
}

/* Order confirmation specific styling */
.order-confirmation__table .productcca-dual-labels-js,
.item__details .productcca-dual-labels-js {
    margin-top: 6px;
    margin-bottom: 4px;
}

.order-confirmation__table .productcca-main-badge,
.order-confirmation__table .productcca-component-badge,
.item__details .productcca-main-badge,
.item__details .productcca-component-badge {
    font-size: 10px;
    padding: 2px 5px;
}

/* Akira theme table-based cart layout */
td.product-name .productcca-dual-labels,
td.product-name .productcca-dual-labels-js {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Akira checkout sidebar (media-body layout) */
.media-body .productcca-dual-labels,
.media-body .productcca-dual-labels-js {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Akira mini-cart / canvas-mini-cart */
#canvas-mini-cart .productcca-dual-labels,
#canvas-mini-cart .productcca-dual-labels-js,
.product-name .productcca-dual-labels,
.product-name .productcca-dual-labels-js {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Ensure labels don't overflow in narrow table cells */
td.product-name .productcca-main-badge,
td.product-name .productcca-component-badge,
.media-body .productcca-main-badge,
.media-body .productcca-component-badge,
#canvas-mini-cart .productcca-main-badge,
#canvas-mini-cart .productcca-component-badge,
.product-name .productcca-main-badge,
.product-name .productcca-component-badge {
    font-size: 10px;
    padding: 2px 5px;
    max-width: 100%;
    word-wrap: break-word;
    white-space: normal;
    margin: 1px 2px 1px 0;
}

/* Legacy badge styling for order confirmation */
.order-confirmation__table .productcca-label-badge,
.item__details .productcca-label-badge {
    font-size: 9px;
    padding: 2px 5px;
    margin-top: 3px;
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
    .productcca-component-badge {
        background: var(--productcca-component-badge-color, #ffc107);
        color: var(--productcca-component-text-color, #000);
    }
}

/* Legacy label badge styling (for older methods still using this class) */
.productcca-label-badge {
    display: inline-block;
    background: var(--productcca-main-badge-color, #0d6efd);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-top: 4px;
    font-weight: 500;
}

/* ========================================
   CIRCLE ICON LABEL STYLE
   ======================================== */

/* Circle badge base styling */
.productcca-circle-badge {
    position: relative;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    line-height: 1;
    padding: 0 !important;
    text-align: center;
    cursor: help;
    z-index: 100;
    transition: box-shadow 0.2s ease;
}

/* Mobile - slightly larger letter */
@media (max-width: 767px) {
    .productcca-circle-badge {
        font-size: 11px !important;
    }
}

/* Default text color for main badges (blue background) */
.productcca-main-badge.productcca-circle-badge {
    color: white !important;
}

/* Hover effect - just shadow, no scaling */
.productcca-circle-badge:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 500;
}

/* Tooltip - desktop (hover-based) */
@media (min-width: 768px) {
    .productcca-circle-badge::before {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) scale(0);
        transform-origin: top center;
        padding: 6px 10px;
        background: rgba(0,0,0,0.9);
        color: #fff;
        border-radius: 3px;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .productcca-circle-badge::after {
        content: '';
        position: absolute;
        top: calc(100% + 3px);
        left: 50%;
        transform: translateX(-50%) scale(0) rotate(180deg);
        border: 6px solid transparent;
        border-top-color: rgba(0,0,0,0.9);
        z-index: 1001;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .productcca-circle-badge:hover::before {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    
    .productcca-circle-badge:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(180deg);
    }

    
}

/* Mobile tooltip - tap to toggle */
@media (max-width: 767px) {
    .productcca-circle-badge.active::before {
        content: attr(data-tooltip);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 14px;
        background: rgba(0,0,0,0.9);
        color: #fff;
        border-radius: 3px;
        max-width: 80vw;
        white-space: normal;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    /* Backdrop for mobile tooltip */
    .productcca-circle-badge.active::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
}

/* Circle label container spacing */
.productcca-circle-labels {
    gap: 6px !important;
    margin-top: 0;
    margin-bottom: 0;
    display: inline-flex !important;
    position: relative;
    z-index: 100;
}

/* Inline display for dual labels container */
.productcca-dual-labels {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}

/* Prevent labels from covering content above */
.productcca-labels-wrapper {
    margin-top: 4px;
    clear: both;
}

/* Ensure circles don't wrap too aggressively */
.productcca-circle-labels .productcca-circle-badge {
    flex-shrink: 0;
}

/* Focus state for keyboard navigation */
.productcca-circle-badge:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.productcca-circle-badge:focus::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.productcca-circle-badge:focus::after {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(180deg);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .productcca-circle-badge {
        border: 2px solid currentColor;
    }
    
    .productcca-circle-badge::before {
        border: 1px solid #fff;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .productcca-circle-badge::before {
        background: #1a1a1a;
        border: 1px solid #444;
    }
    
    .productcca-circle-badge::after {
        border-top-color: #1a1a1a;
    }
}

/* Ensure circle badges work in all contexts */
td.product-name .productcca-circle-badge,
.media-body .productcca-circle-badge,
#canvas-mini-cart .productcca-circle-badge,
.product-name .productcca-circle-badge {
    margin: 2px;
}

/* CRITICAL: Allow tooltips to overflow in cart summary containers */
.cart-summary-top,
.js-cart-summary-top,
.cart-summary-products,
.cart-summary-products-wrapper,
.js-cart-summary-products,
.cart-summary-product-list,
.cart-summary-items-subtotal,
.media,
#js-checkout-summary {
    overflow: visible !important;
}

/* Ensure badges in cart summary create stacking context for tooltips */
.cart-summary .productcca-dual-labels,
.cart-summary-products .productcca-dual-labels,
.js-cart-summary .productcca-dual-labels,
.media .productcca-dual-labels {
    position: relative;
    z-index: 10;
    margin-bottom: 30px;
}

.cart-summary .productcca-circle-badge,
.cart-summary-products .productcca-circle-badge,
.js-cart-summary .productcca-circle-badge,
.media .productcca-circle-badge {
    position: relative;
    z-index: 100;
}

/* Ensure tooltip appears above everything */
.cart-summary .productcca-circle-badge::before,
.cart-summary-products .productcca-circle-badge::before,
.js-cart-summary .productcca-circle-badge::before,
.media .productcca-circle-badge::before {
    z-index: 99999 !important;
}

.cart-summary .productcca-circle-badge::after,
.cart-summary-products .productcca-circle-badge::after,
.js-cart-summary .productcca-circle-badge::after,
.media .productcca-circle-badge::after {
    z-index: 99999 !important;
}

/* Print styles - show full text */
@media print {
    .productcca-circle-badge::before {
        content: " [" attr(data-tooltip) "]";
        position: static;
        transform: none;
        background: none;
        color: inherit;
        opacity: 1;
        white-space: normal;
    }
}

/* Discount per kg display */
.productcca-discount-info {
    display: inline-block;
    margin-left: 4px;
    font-weight: 600;
    color: #28a745 !important;
    font-size: 11px;
    white-space: nowrap;
}

.productcca-discount-info::before {
    content: "•";
    margin-right: 4px;
    opacity: 0.6;
}

/* Responsive discount info */
@media (max-width: 768px) {
    .productcca-discount-info {
        display: block;
        margin-left: 0;
        margin-top: 2px;
        font-size: 10px;
    }
    
    .productcca-discount-info::before {
        display: none;
    }
}