/* Booster Management System Styles v1.5.0 */
/* Dark Theme with Shadcn/ui inspired design */

/* =================================================================
GLOBAL STYLES & VARIABLES (Shadcn/ui inspired)
================================================================= */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Shadcn/ui inspired CSS Variables */
:root {
    /* Your brand colors */
    --primary-color: #e93d82;
    --primary-hover: #d63574;
    
    /* Shadcn/ui color system adapted for your brand */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 335 76% 60%; /* Your #e93d82 in HSL */
    --primary-foreground: 0 0% 98%;
    --secondary: 218 11% 16%; /* #27282f for inactive buttons */
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 345 100% 50%; /* Focus ring using your primary color */
    --radius: 0.5rem;
    
    /* Dark theme overrides */
    --background-dark: #15161c;
    --background-darker: #111115;
    --background-lighter: #191a21;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.11);
    --success-color: #82c15c;
    --danger-color: #ff0000;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.12);
}

/* Dark theme color adjustments */
.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 335 76% 60%; /* Your #e93d82 in HSL */
    --primary-foreground: 0 0% 9%;
    --secondary: 218 11% 16%; /* #27282f for inactive buttons in dark mode too */
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 345 100% 50%; /* Focus ring using your primary color */
}

/* =================================================================
   2. NOTIFICATION SYSTEM
   ================================================================= */

#booster-notification-badge {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    font-family: "Inter", sans-serif !important;
    min-width: 60px !important;
}

#booster-notification-badge:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 80, 0.4) !important;
}

#booster-notification-badge .notification-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

#booster-notification-badge .notification-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 20px !important;
    text-align: center !important;
}

#booster-notification-badge.pulse-animation {
    animation: pulseNotification 2s ease-in-out 3 !important;
}

@keyframes pulseNotification {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 6px 25px rgba(255, 0, 80, 0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3); }
}

/* =================================================================
   3. DASHBOARDS (Booster, Customer, Admin)
   ================================================================= */

html body .booster-dashboard, 
html body .customer-dashboard, 
html body .admin-dashboard {
    margin: 20px 0 !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* Dashboard Headers */
html body .booster-dashboard h2,
html body .customer-dashboard h2,
html body .admin-dashboard h2 {
    color: var(--text-primary) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
    line-height: 1.125 !important;
}

html body .booster-dashboard h3,
html body .customer-dashboard h3,
html body .admin-dashboard h3 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    line-height: 1.125 !important;
}

/* Statistics Boxes */
html body .booster-stats,
html body .stats-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

html body .stat-box {
    background: var(--background-dark) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    flex: 1 !important;
    min-width: 200px !important;
    transition: transform 0.2s ease !important;
}

html body .stat-box:hover {
    transform: translateY(-3px) !important;
}

html body .stat-box h3,
html body .stat-box h4 {
    margin-top: 0 !important;
    color: var(--primary-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

html body .stat-box p {
    margin-bottom: 0 !important;
    font-size: 26px !important;
    color: var(--text-primary) !important;
}

/* =================================================================
   4. SHADCN/UI BUTTON STYLES FOR TC EPO
   ================================================================= */

/* Remove all existing TC EPO borders and styling */
.tmcp-field-wrap,
.tmcp-field-wrap-inner,
.tc-field-label-wrap,
.tm-epo-field-label,
.tc-epo-text-label-wrapper,
.tc-epo-text-label-wrapper .tc-label-wrap,
.tc-epo-text-label-wrapper .tc-label,
.tc-epo-text-wrapper,
.tc-epo-text-wrapper.tc-active,
.tmcp-field-wrap.tc-active,
.tmcp-field-wrap.tc-active .tmcp-field-wrap-inner,
.tmcp-field-wrap.tc-active .tc-field-label-wrap,
.tmcp-field-wrap.tc-active label,
.tc-epo-text-wrapper.tc-active,
.tc-epo-text-wrapper.tc-active .tc-epo-text-label-wrapper,
.tc-mode-text {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Target only TEXT SWATCH containers - not affecting other radio types */
.tmcp-ul-wrap.tc-text-container {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
}

/* Make TEXT SWATCH buttons take full width and distribute evenly */
.tc-text-container .tmcp-field-wrap.tm-per-row {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 1 !important; /* This makes buttons share width equally */
    min-width: 0 !important; /* Allows flex items to shrink */
}

/* Ensure text swatch buttons fill their containers completely */
.tc-text-container .tc-epo-text-label-wrapper {
    width: 100% !important;
}

.tc-text-container .tc-epo-text-label-wrapper .tc-label-wrap {
    width: 100% !important;
}

/* Also reduce any padding on the inner wrapper */
.tmcp-field-wrap-inner {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove any default list styling */
.tmcp-ul-wrap li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove pseudo-elements that might add borders */
.tmcp-field-wrap:before,
.tmcp-field-wrap:after,
.tmcp-field-wrap.tc-active:before,
.tmcp-field-wrap.tc-active:after,
.tc-epo-text-wrapper:before,
.tc-epo-text-wrapper:after,
.tc-epo-text-wrapper.tc-active:before,
.tc-epo-text-wrapper.tc-active:after,
.tc-field-label-wrap:before,
.tc-field-label-wrap:after,
.tm-epo-field-label:before,
.tm-epo-field-label:after {
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Base wrapper styles */
.tc-epo-text-label-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 4px; /* Reduced from 8px to 4px */
}

/* Hide the actual radio input */
.tc-epo-text-label-wrapper .tc-input-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Shadcn/ui Button Base Styles */
.tc-epo-text-label-wrapper .tc-label-wrap {
    /* Base button styling from Shadcn/ui */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 14px;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    position: relative;
    cursor: pointer;
    user-select: none;
    border: none !important;
    outline: none !important;
    width: 100%;
    box-sizing: border-box;
    
    /* Focus styles */
    focus-visible: outline-none;
    
    /* Disabled styles */
    disabled: pointer-events-none;
    disabled: opacity-50;
    
    /* Size (default) */
    height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
    /* Default variant (secondary) */
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    
    /* Font family */
    font-family: "Nudica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Default variant hover */
.tc-epo-text-label-wrapper .tc-label-wrap:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

/* Focus visible state */
.tc-epo-text-label-wrapper .tc-label-wrap:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Selected state - Primary variant */
.tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
.tc-epo-text-label-wrapper input:checked ~ .tc-label,
.tc-epo-text-label-wrapper input:checked ~ * .tc-label {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border: none !important;
}

/* Selected state hover */
.tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap:hover,
.tc-epo-text-label-wrapper input:checked ~ .tc-label:hover,
.tc-epo-text-label-wrapper input:checked ~ * .tc-label:hover {
    background-color: hsl(var(--primary) / 0.9) !important;
}

/* Ensure text color is correct when selected */
.tc-epo-text-label-wrapper:has(input:checked) .tc-label-text,
.tc-epo-text-label-wrapper input:checked ~ * .tc-label-text {
    color: hsl(var(--primary-foreground)) !important;
}

/* =================================================================
   SHADCN/UI BUTTON VARIANTS (Optional Classes)
   ================================================================= */

/* Outline variant */
.shadcn-outline .tc-epo-text-label-wrapper .tc-label-wrap {
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.shadcn-outline .tc-epo-text-label-wrapper .tc-label-wrap:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.shadcn-outline .tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
.shadcn-outline .tc-epo-text-label-wrapper input:checked ~ * .tc-label {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border-color: hsl(var(--primary)) !important;
}

/* Ghost variant */
.shadcn-ghost .tc-epo-text-label-wrapper .tc-label-wrap {
    background-color: transparent;
    color: hsl(var(--foreground));
}

.shadcn-ghost .tc-epo-text-label-wrapper .tc-label-wrap:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.shadcn-ghost .tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
.shadcn-ghost .tc-epo-text-label-wrapper input:checked ~ * .tc-label {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* Destructive variant */
.shadcn-destructive .tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
.shadcn-destructive .tc-epo-text-label-wrapper input:checked ~ * .tc-label {
    background-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
}

/* =================================================================
   SIZE VARIANTS
   ================================================================= */

/* Small size */
.shadcn-sm .tc-epo-text-label-wrapper .tc-label-wrap {
    height: 2.25rem;
    border-radius: calc(var(--radius) - 4px);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 13px;
}

/* Large size */
.shadcn-lg .tc-epo-text-label-wrapper .tc-label-wrap {
    height: 2.75rem;
    border-radius: var(--radius);
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 16px;
}

/* Icon size (square) */
.shadcn-icon .tc-epo-text-label-wrapper .tc-label-wrap {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
}

/* =================================================================
   RESPONSIVE BEHAVIOR
   ================================================================= */

@media (max-width: 768px) {
    .tc-epo-text-label-wrapper .tc-label-wrap {
        height: 2.75rem; /* Better touch targets on mobile */
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tc-epo-text-label-wrapper .tc-label-wrap {
        height: 3rem;
        font-size: 13px;
    }
}

/* =================================================================
   DARK THEME COMPATIBILITY
   ================================================================= */

/* Adjust for your existing dark theme */
body.dark .tc-epo-text-label-wrapper .tc-label-wrap,
.dark .tc-epo-text-label-wrapper .tc-label-wrap {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

body.dark .tc-epo-text-label-wrapper .tc-label-wrap:hover,
.dark .tc-epo-text-label-wrapper .tc-label-wrap:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

/* Keep selected state consistent in dark theme */
body.dark .tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
body.dark .tc-epo-text-label-wrapper input:checked ~ * .tc-label,
.dark .tc-epo-text-label-wrapper:has(input:checked) .tc-label-wrap,
.dark .tc-epo-text-label-wrapper input:checked ~ * .tc-label {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* =================================================================
   TEXT SWATCH EQUAL WIDTH DISTRIBUTION - AGGRESSIVE APPROACH
   ================================================================= */

/* Target the exact UL container that holds the text swatches */
ul.tmcp-ul-wrap.tc-text-container,
.tmcp-ul-wrap.tc-text-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* Force each LI item to take equal width */
ul.tmcp-ul-wrap.tc-text-container li,
.tc-text-container li.tmcp-field-wrap,
.tc-text-container .tmcp-field-wrap {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    display: flex !important;
}

/* Ensure all nested wrappers take full width */
.tc-text-container li .tmcp-field-wrap-inner,
.tc-text-container .tmcp-field-wrap .tmcp-field-wrap-inner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.tc-text-container .tc-epo-text-label-wrapper {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* Make the actual button/label take full width and center text */
.tc-text-container .tc-epo-text-label-wrapper .tc-label-wrap,
.tc-text-container .tc-label-wrap {
    width: 100% !important;
    flex: 1 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
}

/* Target the inner label structure for proper centering */
.tc-text-container .tc-label-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
    min-height: inherit !important;
}

/* Force all child elements to center */
.tc-text-container .tc-label-inner * {
    text-align: center !important;
}

/* Ensure the text span is truly centered */
.tc-text-container .tc-label-text {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Keep price wrapper but don't let it interfere */
.tc-text-container .tc-price-wrap,
.tc-text-container .tc-col-auto {
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Center the actual price element */
.tc-text-container .tc-price,
.tc-text-container .price {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    width: 100% !important;
}

/* Center the price amount */
.tc-text-container .woocommerce-Price-amount {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Ensure wrapper takes full width */
.tc-text-container .tc-epo-style-space {
    width: 100% !important;
    text-align: center !important;
}

/* Reduce spacing between option sections */
.cpf-section {
    margin-bottom: 12px !important;
}

/* =================================================================
   5. PRODUCT BADGES
   ================================================================= */

/* Product badge container positioning */
.woocommerce ul.products li.product,
.woocommerce .product,
.product-item {
    position: relative !important;
}

/* Badge container overlay positioning */
.product-badges {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    pointer-events: none !important;
}

/* Individual badge styling - pill shaped with borders and glow */
.product-badge {
    display: inline-block !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: "Nudica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
    min-width: 65px !important;
    max-width: 120px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: 2px solid !important;
}

/* Hover effect for badges - enhanced glow */
.product-badge:hover {
    transform: scale(1.05) !important;
}

.badge-hot:hover {
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.5), inset 0 0 0 1px rgba(255, 69, 0, 0.3) !important;
}

.badge-limited:hover {
    box-shadow: 0 0 20px rgba(255, 191, 0, 0.5), inset 0 0 0 1px rgba(255, 191, 0, 0.3) !important;
}

.badge-fire-sale:hover {
    box-shadow: 0 0 20px rgba(220, 20, 60, 0.5), inset 0 0 0 1px rgba(220, 20, 60, 0.3) !important;
}

.badge-sale:hover {
    box-shadow: 0 0 20px rgba(60, 179, 113, 0.5), inset 0 0 0 1px rgba(60, 179, 113, 0.3) !important;
}

.badge-new:hover {
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.5), inset 0 0 0 1px rgba(0, 191, 255, 0.3) !important;
}

.badge-pre-order:hover {
    box-shadow: 0 0 20px rgba(120, 81, 169, 0.5), inset 0 0 0 1px rgba(120, 81, 169, 0.3) !important;
}

.badge-meta:hover {
    box-shadow: 0 0 20px rgba(108, 117, 125, 0.5), inset 0 0 0 1px rgba(108, 117, 125, 0.3) !important;
}

/* Badge color variants - transparent with colored borders and glow */
.badge-hot {
    border-color: #FF4500 !important;
    color: #FF4500 !important;
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.6) !important;
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.3), inset 0 0 0 1px rgba(255, 69, 0, 0.2) !important;
}

.badge-limited {
    border-color: #FFBF00 !important;
    color: #FFBF00 !important;
    text-shadow: 0 0 8px rgba(255, 191, 0, 0.6) !important;
    box-shadow: 0 0 12px rgba(255, 191, 0, 0.3), inset 0 0 0 1px rgba(255, 191, 0, 0.2) !important;
}

.badge-fire-sale {
    border-color: #DC143C !important;
    color: #DC143C !important;
    text-shadow: 0 0 8px rgba(220, 20, 60, 0.6) !important;
    box-shadow: 0 0 12px rgba(220, 20, 60, 0.3), inset 0 0 0 1px rgba(220, 20, 60, 0.2) !important;
}

.badge-sale {
    border-color: #3CB371 !important;
    color: #3CB371 !important;
    text-shadow: 0 0 8px rgba(60, 179, 113, 0.6) !important;
    box-shadow: 0 0 12px rgba(60, 179, 113, 0.3), inset 0 0 0 1px rgba(60, 179, 113, 0.2) !important;
}

.badge-new {
    border-color: #00BFFF !important;
    color: #00BFFF !important;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.6) !important;
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.3), inset 0 0 0 1px rgba(0, 191, 255, 0.2) !important;
}

.badge-pre-order {
    border-color: #7851A9 !important;
    color: #7851A9 !important;
    text-shadow: 0 0 8px rgba(120, 81, 169, 0.6) !important;
    box-shadow: 0 0 12px rgba(120, 81, 169, 0.3), inset 0 0 0 1px rgba(120, 81, 169, 0.2) !important;
}

.badge-meta {
    border-color: #6C757D !important;
    color: #6C757D !important;
    text-shadow: 0 0 8px rgba(108, 117, 125, 0.6) !important;
    box-shadow: 0 0 12px rgba(108, 117, 125, 0.3), inset 0 0 0 1px rgba(108, 117, 125, 0.2) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-badges {
        top: 6px !important;
        left: 6px !important;
    }
    
    .product-badge {
        font-size: 10px !important;
        padding: 5px 14px !important;
        min-width: 60px !important;
        max-width: 100px !important;
    }
}

@media (max-width: 480px) {
    .product-badges {
        top: 4px !important;
        left: 4px !important;
    }
    
    .product-badge {
        font-size: 9px !important;
        padding: 4px 12px !important;
        min-width: 55px !important;
        max-width: 90px !important;
        border-radius: 16px !important;
    }
}

/* Ensure badges work on single product pages */
.single-product .product-badges {
    top: 12px !important;
    left: 12px !important;
}

.single-product .product-badge {
    font-size: 12px !important;
    padding: 8px 18px !important;
    min-width: 75px !important;
    max-width: 140px !important;
}

/* =================================================================
   6. SHADCN/UI RADIO GROUP STYLES FOR EXECUTION OPTIONS
   ================================================================= */

/* Target specifically the Execution options radio buttons */
.tm-extra-product-options .cpf-section,
.tc-extra-product-options .cpf-section {
    margin-bottom: 20px;
}

/* Style the radio group container for execution options */
.tm-extra-product-options .tm-epo-field-label[data-epo-name*="execution"] + .tm-epo-fields .tmcp-ul-wrap,
.tc-extra-product-options .tm-epo-field-label[data-epo-name*="execution"] + .tm-epo-fields .tmcp-ul-wrap,
.tm-extra-product-options h6:contains("Execution") + ul,
.tc-extra-product-options h6:contains("Execution") + ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Target execution options specifically by looking for radio inputs in execution sections */
.tm-extra-product-options input[type="radio"][name*="execution"],
.tc-extra-product-options input[type="radio"][name*="execution"],
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] {
    /* Hide the default radio button */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Style the radio button container with shadcn/ui design */
.tm-extra-product-options input[type="radio"][name*="execution"] + label,
.tc-extra-product-options input[type="radio"][name*="execution"] + label,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: hsl(var(--foreground, 0 0% 98%)) !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Create custom radio button circle */
.tm-extra-product-options input[type="radio"][name*="execution"] + label:before,
.tc-extra-product-options input[type="radio"][name*="execution"] + label:before,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label:before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid hsl(var(--border, 0 0% 89.8%)) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    background: hsl(var(--background, 0 0% 100%)) !important;
    position: relative !important;
    display: block !important;
}

/* Radio button hover state */
.tm-extra-product-options input[type="radio"][name*="execution"] + label:hover:before,
.tc-extra-product-options input[type="radio"][name*="execution"] + label:hover:before,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label:hover:before {
    border-color: hsl(var(--ring, 345 100% 50%)) !important;
}

/* Radio button focus state */
.tm-extra-product-options input[type="radio"][name*="execution"]:focus + label:before,
.tc-extra-product-options input[type="radio"][name*="execution"]:focus + label:before,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"]:focus + label:before {
    outline: 2px solid hsl(var(--ring, 345 100% 50%)) !important;
    outline-offset: 2px !important;
}

/* Radio button checked state */
.tm-extra-product-options input[type="radio"][name*="execution"]:checked + label:before,
.tc-extra-product-options input[type="radio"][name*="execution"]:checked + label:before,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"]:checked + label:before {
    border-color: hsl(var(--primary, 345 100% 50%)) !important;
    background: hsl(var(--primary, 345 100% 50%)) !important;
}

/* Create the inner dot for checked state */
.tm-extra-product-options input[type="radio"][name*="execution"]:checked + label:after,
.tc-extra-product-options input[type="radio"][name*="execution"]:checked + label:after,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"]:checked + label:after {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    background: hsl(var(--primary-foreground, 0 0% 98%)) !important;
    border-radius: 50% !important;
    position: absolute !important;
    left: 21px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
}

/* Style the label text */
.tm-extra-product-options input[type="radio"][name*="execution"] + label .tm-epo-span,
.tc-extra-product-options input[type="radio"][name*="execution"] + label .tm-epo-span,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label .tm-epo-span {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Style the option text */
.tm-extra-product-options input[type="radio"][name*="execution"] + label .tm-epo-span .tm-epo-text,
.tc-extra-product-options input[type="radio"][name*="execution"] + label .tm-epo-span .tm-epo-text,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label .tm-epo-span .tm-epo-text {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: inherit !important;
    line-height: 1.5 !important;
}

/* Style the price if present */
.tm-extra-product-options input[type="radio"][name*="execution"] + label .price,
.tc-extra-product-options input[type="radio"][name*="execution"] + label .price,
.tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label .price {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: hsl(var(--muted-foreground, 0 0% 45.1%)) !important;
    margin-left: auto !important;
}

/* Dark theme adjustments */
body.dark .tm-extra-product-options input[type="radio"][name*="execution"] + label:before,
body.dark .tc-extra-product-options input[type="radio"][name*="execution"] + label:before,
body.dark .tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label:before,
.dark .tm-extra-product-options input[type="radio"][name*="execution"] + label:before,
.dark .tc-extra-product-options input[type="radio"][name*="execution"] + label:before,
.dark .tm-extra-product-options input[type="radio"][name*="tmcp_radio_"] + label:before {
    border-color: hsl(var(--border, 0 0% 14.9%)) !important;
    background: hsl(var(--background, 0 0% 3.9%)) !important;
}

/* Backup selectors - more aggressive targeting for execution options */
.tm-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"],
.tc-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"],
.tm-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"],
.tc-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.tm-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"] + label,
.tc-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"] + label,
.tm-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"] + label,
.tc-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"] + label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: hsl(var(--foreground, 0 0% 98%)) !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Apply the same styling to backup selectors */
.tm-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"] + label:before,
.tc-extra-product-options .cpf-section:has(.tm-epo-field-label[for*="execution"]) input[type="radio"] + label:before,
.tm-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"] + label:before,
.tc-extra-product-options .cpf-section h6:contains("Execution") ~ * input[type="radio"] + label:before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid hsl(var(--border, 0 0% 89.8%)) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    background: hsl(var(--background, 0 0% 100%)) !important;
    position: relative !important;
    display: block !important;
}

/* End of CSS file */