/**
 * you.bid Item Location Badges - 3D Glass Morphism Styles
 * Version: 1.0.0
 */

/* Hide old flat badge style if it exists from cached HTML */
.state-badge {
    display: none !important;
}

/* Base positioning for product links */
.woocommerce-loop-product__link {
    position: relative;
    display: block;
}

/* Base badge styles - Apple Liquid Glass */
.youbid-state-badge,
div.youbid-state-badge {
    position: absolute !important;
    z-index: 100 !important;
    color: white !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Shape variations */
/* Ribbon/Flag shape (default - pointed bottom) */
body.youbid-badge-shape-ribbon .youbid-state-badge,
body.youbid-badge-shape-ribbon div.youbid-state-badge {
    border-radius: 3px 3px 0 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%) !important;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%) !important;
}

/* Rounded Rectangle shape (original design) */
body.youbid-badge-shape-rounded .youbid-state-badge,
body.youbid-badge-shape-rounded div.youbid-state-badge {
    border-radius: 12px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Shield shape (classic emblem) */
body.youbid-badge-shape-shield .youbid-state-badge,
body.youbid-badge-shape-shield div.youbid-state-badge {
    border-radius: 3px 3px 0 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%) !important;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%) !important;
}

/* Banner shape (angled ends) */
body.youbid-badge-shape-banner .youbid-state-badge,
body.youbid-badge-shape-banner div.youbid-state-badge {
    border-radius: 4px !important;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%) !important;
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%) !important;
}

/* Hexagon shape (six-sided) */
body.youbid-badge-shape-hexagon .youbid-state-badge,
body.youbid-badge-shape-hexagon div.youbid-state-badge {
    border-radius: 0 !important;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) !important;
    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) !important;
}

/* Circle shape (rounded badge) */
body.youbid-badge-shape-circle .youbid-state-badge,
body.youbid-badge-shape-circle div.youbid-state-badge {
    border-radius: 50% !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 8px 12px !important;
}

/* Size variations */
/* Small size (default - compact and unobtrusive) */
body.youbid-badge-size-small .youbid-state-badge,
body.youbid-badge-size-small div.youbid-state-badge {
    padding: 6px 12px 10px 12px !important;
    font-size: 11px !important;
    min-width: 45px !important;
    min-height: 38px !important;
}

/* Medium size (balanced) */
body.youbid-badge-size-medium .youbid-state-badge,
body.youbid-badge-size-medium div.youbid-state-badge {
    padding: 8px 15px 12px 15px !important;
    font-size: 13px !important;
    min-width: 55px !important;
    min-height: 45px !important;
}

/* Large size (prominent and bold) */
body.youbid-badge-size-large .youbid-state-badge,
body.youbid-badge-size-large div.youbid-state-badge {
    padding: 10px 18px 14px 18px !important;
    font-size: 15px !important;
    min-width: 65px !important;
    min-height: 52px !important;
}

/* Position variations - !important to override any cached/inline styles */
.youbid-badge-bottom-right {
    bottom: 12px !important;
    right: 12px !important;
    top: auto !important;
    left: auto !important;
}

.youbid-badge-bottom-left {
    bottom: 12px !important;
    left: 12px !important;
    top: auto !important;
    right: auto !important;
}

.youbid-badge-top-right {
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
}

.youbid-badge-top-left {
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
}

/* 3D Glass Morphism Style - Apple-style Liquid Glass with Ribbon Shape */
body.youbid-badge-style-glass-3d .youbid-state-badge,
body.youbid-badge-style-glass-3d div.youbid-state-badge {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.1) 100%
    ) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15),
        inset 1px 0 1px rgba(255, 255, 255, 0.3),
        inset -1px 0 1px rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    
    /* Subtle 3D effect - less pronounced for ribbon */
    transform: perspective(1000px) translateZ(10px) !important;
}

/* Remove hover effects since it's not clickable */
body.youbid-badge-style-glass-3d .youbid-state-badge:hover {
    transform: perspective(1000px) translateZ(10px) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15),
        inset 1px 0 1px rgba(255, 255, 255, 0.3),
        inset -1px 0 1px rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

/* Add glossy overlay for enhanced liquid glass effect */
body.youbid-badge-style-glass-3d .youbid-state-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 100%
    );
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

/* Overlay clip-paths for each shape */
body.youbid-badge-style-glass-3d.youbid-badge-shape-ribbon .youbid-state-badge::before {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

body.youbid-badge-style-glass-3d.youbid-badge-shape-shield .youbid-state-badge::before {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

body.youbid-badge-style-glass-3d.youbid-badge-shape-banner .youbid-state-badge::before {
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
    -webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

body.youbid-badge-style-glass-3d.youbid-badge-shape-hexagon .youbid-state-badge::before {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

body.youbid-badge-style-glass-3d.youbid-badge-shape-rounded .youbid-state-badge::before,
body.youbid-badge-style-glass-3d.youbid-badge-shape-circle .youbid-state-badge::before {
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: inherit;
}

/* Text should be above the overlay */
body.youbid-badge-style-glass-3d .youbid-state-badge span {
    position: relative;
    z-index: 2;
}

/* Flat Glass Morphism Style */
body.youbid-badge-style-glass-flat .youbid-state-badge {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.youbid-badge-style-glass-flat .youbid-state-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Solid Classic Style */
body.youbid-badge-style-solid .youbid-state-badge {
    background: linear-gradient(145deg, var(--badge-color), var(--badge-color-dark));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.youbid-badge-style-solid .youbid-state-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* State-specific colors with beautiful gradients - Override any existing styles */
.youbid-state-NSW,
div.youbid-state-badge.youbid-state-NSW {
    --badge-color: #87CEEB;
    --badge-color-dark: #5FA8D3;
    background-color: #87CEEB !important;
}

body.youbid-badge-style-glass-3d .youbid-state-NSW,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-NSW {
    background: linear-gradient(145deg, 
        rgba(135, 206, 235, 0.25) 0%,
        rgba(95, 168, 211, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(135, 206, 235, 0.9) 0%,
        rgba(95, 168, 211, 0.8) 100%
    ) !important;
}

.youbid-state-QLD,
div.youbid-state-badge.youbid-state-QLD {
    --badge-color: #800000;
    --badge-color-dark: #5A0000;
    background-color: #800000 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-QLD,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-QLD {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(128, 0, 0, 0.9) 0%,
        rgba(90, 0, 0, 0.8) 100%
    ) !important;
}

.youbid-state-VIC,
div.youbid-state-badge.youbid-state-VIC {
    --badge-color: #000080;
    --badge-color-dark: #000055;
    background-color: #000080 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-VIC,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-VIC {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(0, 0, 128, 0.9) 0%,
        rgba(0, 0, 85, 0.8) 100%
    ) !important;
}

.youbid-state-SA,
div.youbid-state-badge.youbid-state-SA {
    --badge-color: #FF0000;
    --badge-color-dark: #CC0000;
    background-color: #FF0000 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-SA,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-SA {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(255, 0, 0, 0.9) 0%,
        rgba(204, 0, 0, 0.8) 100%
    ) !important;
}

.youbid-state-WA,
div.youbid-state-badge.youbid-state-WA {
    --badge-color: #FFD700;
    --badge-color-dark: #DAA520;
    background-color: #FFD700 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-WA,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-WA {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(255, 215, 0, 0.9) 0%,
        rgba(218, 165, 32, 0.8) 100%
    ) !important;
}

.youbid-state-TAS,
div.youbid-state-badge.youbid-state-TAS {
    --badge-color: #228B22;
    --badge-color-dark: #196619;
    background-color: #228B22 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-TAS,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-TAS {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(34, 139, 34, 0.9) 0%,
        rgba(25, 102, 25, 0.8) 100%
    ) !important;
}

.youbid-state-ACT,
div.youbid-state-badge.youbid-state-ACT {
    --badge-color: #4B4B4B;
    --badge-color-dark: #2A2A2A;
    background-color: #4B4B4B !important;
}

body.youbid-badge-style-glass-3d .youbid-state-ACT,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-ACT {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(75, 75, 75, 0.9) 0%,
        rgba(42, 42, 42, 0.8) 100%
    ) !important;
}

.youbid-state-NT,
div.youbid-state-badge.youbid-state-NT {
    --badge-color: #CC7722;
    --badge-color-dark: #A55A1A;
    background-color: #CC7722 !important;
}

body.youbid-badge-style-glass-3d .youbid-state-NT,
body.youbid-badge-style-glass-3d div.youbid-state-badge.youbid-state-NT {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(145deg, 
        rgba(204, 119, 34, 0.9) 0%,
        rgba(165, 90, 26, 0.8) 100%
    ) !important;
}

/* Shimmer effect - DISABLED for ribbon badges (not clickable) */
/* Users should not think this is interactive */

/* Inner glow effect for glass styles */
body.youbid-badge-style-glass-3d .youbid-state-badge span,
body.youbid-badge-style-glass-flat .youbid-state-badge span {
    position: relative;
    z-index: 2;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(255, 255, 255, 0.3);
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .youbid-state-badge {
        transition: none;
        transform: none !important;
    }
    
    .youbid-state-badge::after {
        display: none;
    }
}

/* Mobile optimizations - slightly smaller on mobile */
@media screen and (max-width: 768px) {
    /* Small size on mobile */
    body.youbid-badge-size-small .youbid-state-badge,
    body.youbid-badge-size-small div.youbid-state-badge {
        padding: 5px 10px 8px 10px !important;
        font-size: 10px !important;
        min-width: 40px !important;
        min-height: 34px !important;
    }
    
    /* Medium size on mobile */
    body.youbid-badge-size-medium .youbid-state-badge,
    body.youbid-badge-size-medium div.youbid-state-badge {
        padding: 6px 12px 10px 12px !important;
        font-size: 11px !important;
        min-width: 45px !important;
        min-height: 38px !important;
    }
    
    /* Large size on mobile */
    body.youbid-badge-size-large .youbid-state-badge,
    body.youbid-badge-size-large div.youbid-state-badge {
        padding: 7px 14px 11px 14px !important;
        font-size: 12px !important;
        min-width: 50px !important;
        min-height: 42px !important;
    }
    
    .youbid-badge-bottom-right,
    .youbid-badge-bottom-left,
    .youbid-badge-top-right,
    .youbid-badge-top-left {
        bottom: 8px;
        right: 8px;
        top: auto;
        left: auto;
    }
    
    .youbid-badge-bottom-left {
        left: 8px;
        right: auto;
    }
    
    .youbid-badge-top-right {
        top: 8px;
        bottom: auto;
    }
    
    .youbid-badge-top-left {
        top: 8px;
        left: 8px;
        bottom: auto;
        right: auto;
    }
}

/* High DPI displays - Extra crisp rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .youbid-state-badge {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dark mode support (if theme supports it) */
@media (prefers-color-scheme: dark) {
    body.youbid-badge-style-glass-3d .youbid-state-badge,
    body.youbid-badge-style-glass-flat .youbid-state-badge {
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.3),
            inset 0 -1px 2px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

/* Print styles - Hide badges when printing */
@media print {
    .youbid-state-badge {
        display: none !important;
    }
}