/* OLEX Product Template Styles v2.0.0 - Enhanced with Smart Burn Time Support */

/* Pallet Dimensions Section */ .olex-pallet-dimensions { margin: 20px 0; padding: 16px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.pallet-dimensions-container { max-width: 100%; }

.icon-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }

.icon-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: white; border-radius: 8px; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); min-width: 140px; flex: 1; }

.info-icon { width: 24px; height: 24px; flex-shrink: 0; opacity: 0.8; }

.icon-text-content { display: flex; flex-direction: column; gap: 2px; }

.bold-number { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1; }

.icon-title { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; }

/* Technical Data Section */ .olex-technical-data-wrapper { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-technical-data-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; }

.olex-technical-data-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.olex-technical-data-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: white; border-radius: 8px; border: 1px solid #f1f5f9; transition: all 0.2s ease; }

.olex-technical-data-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-data-label { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #475569; }

.olex-data-icon { width: 20px; height: 20px; opacity: 0.7; flex-shrink: 0; }

.olex-data-value { font-weight: 700; color: #1e293b; font-size: 15px; min-width: fit-content; text-align: right; }

.olex-data-value-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.olex-data-note { font-size: 11px; color: #64748b; font-weight: 400; line-height: 1.3; text-align: right; max-width: 280px; font-style: italic; }

/* Enhanced Color Section - CSS-Only Implementation */ .olex-product-colors { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-product-colors h5 { margin: 0 0 16px 0; font-weight: 700; color: #1e293b; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }

.colors-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }

.color-item { position: relative; margin: 0; }

.color-circle { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #e5e7eb; cursor: help; position: relative; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.color-circle:hover { transform: scale(1.2); border-color: #374151; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); z-index: 10; }

/* Gold and Silver predefined colors */ .color-gold .color-circle { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); border-color: #B8860B; }

.color-gold .color-circle:hover { border-color: #8B6914; }

.color-silver .color-circle { background: linear-gradient(135deg, #E5E5E5 0%, #A8A8A8 100%); border-color: #808080; }

.color-silver .color-circle:hover { border-color: #606060; }

/* CSS-Only Tooltip Implementation - Enhanced */ .color-circle::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: rgba(17, 24, 39, 0.95); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); }

.color-circle::before { content: ''; position: absolute; bottom: 122%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(17, 24, 39, 0.95); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; pointer-events: none; }

.color-circle:hover::after, .color-circle:hover::before { opacity: 1; visibility: visible; }

/* Focus accessibility */ .color-circle:focus::after, .color-circle:focus::before { opacity: 1; visibility: visible; }

.color-circle:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* Responsive Design */ @media (max-width: 768px) { .icon-list { flex-direction: column; gap: 12px; }

.icon-list-item { min-width: auto; justify-content: center; text-align: center; }

.olex-technical-data-item { flex-direction: column; gap: 8px; text-align: center; }

.olex-data-label { justify-content: center; }

.olex-data-value-wrapper { align-items: center; }

.olex-data-note { text-align: center; font-size: 10px; max-width: 100%; }

.color-circle { width: 28px; height: 28px; }

.color-circle::after { bottom: auto; top: 130%; font-size: 11px; padding: 6px 10px; }

.color-circle::before { bottom: auto; top: 122%; transform: translateX(-50%) rotate(180deg); }

.colors-list { justify-content: center; gap: 10px; } }

@media (max-width: 480px) { .olex-pallet-dimensions, .olex-technical-data-wrapper, .olex-product-colors { padding: 16px; margin: 16px 0; }

.olex-technical-data-title, .olex-product-colors h5 { font-size: 14px; }

.bold-number { font-size: 16px; }

.icon-title { font-size: 10px; } }

/* High contrast mode support */ @media (prefers-contrast: high) { .color-circle { border-width: 4px; }

.color-circle::after { background: #000000; border: 2px solid #ffffff; }

.olex-technical-data-item, .icon-list-item { border-width: 2px; } }

/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .color-circle, .olex-technical-data-item, .color-circle::after, .color-circle::before { transition: none; }

.color-circle:hover { transform: none; } }

/* Print styles */ @media print { .olex-pallet-dimensions, .olex-technical-data-wrapper, .olex-product-colors { box-shadow: none; border: 1px solid #000; }

.color-circle::after, .color-circle::before { display: none; } }

/* OLEX Product Template Styles v2.0.0 - Enhanced with Smart Burn Time Support */

/* Pallet Dimensions Section */ .olex-pallet-dimensions { margin: 20px 0; padding: 16px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.pallet-dimensions-container { max-width: 100%; }

.icon-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }

.icon-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: white; border-radius: 8px; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); min-width: 140px; flex: 1; }

.info-icon { width: 24px; height: 24px; flex-shrink: 0; opacity: 0.8; }

.icon-text-content { display: flex; flex-direction: column; gap: 2px; }

.bold-number { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1; }

.icon-title { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; }

/* Technical Data Section */ .olex-technical-data-wrapper { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-technical-data-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; }

.olex-technical-data-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.olex-technical-data-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: white; border-radius: 8px; border: 1px solid #f1f5f9; transition: all 0.2s ease; }

.olex-technical-data-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-data-label { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #475569; }

.olex-data-icon { width: 20px; height: 20px; opacity: 0.7; flex-shrink: 0; }

.olex-data-value { font-weight: 700; color: #1e293b; font-size: 15px; min-width: fit-content; text-align: right; }

.olex-data-value-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.olex-data-note { font-size: 11px; color: #64748b; font-weight: 400; line-height: 1.3; text-align: right; max-width: 280px; font-style: italic; }

/* Enhanced Color Section - CSS-Only Implementation */ .olex-product-colors { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%); border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }

.olex-product-colors h5 { margin: 0 0 16px 0; font-weight: 700; color: #1e293b; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }

.colors-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }

.color-item { position: relative; margin: 0; }

.color-circle { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #e5e7eb; cursor: help; position: relative; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.color-circle:hover { transform: scale(1.2); border-color: #374151; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); z-index: 10; }

/* Gold and Silver predefined colors */ .color-gold .color-circle { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); border-color: #B8860B; }

.color-gold .color-circle:hover { border-color: #8B6914; }

.color-silver .color-circle { background: linear-gradient(135deg, #E5E5E5 0%, #A8A8A8 100%); border-color: #808080; }

.color-silver .color-circle:hover { border-color: #606060; }

/* CSS-Only Tooltip Implementation - Enhanced */ .color-circle::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: rgba(17, 24, 39, 0.95); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); }

.color-circle::before { content: ''; position: absolute; bottom: 122%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(17, 24, 39, 0.95); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; pointer-events: none; }

.color-circle:hover::after, .color-circle:hover::before { opacity: 1; visibility: visible; }

/* Focus accessibility */ .color-circle:focus::after, .color-circle:focus::before { opacity: 1; visibility: visible; }

.color-circle:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* Responsive Design */ @media (max-width: 768px) { .icon-list { flex-direction: column; gap: 12px; }

.icon-list-item { min-width: auto; justify-content: center; text-align: center; }

.olex-technical-data-item { flex-direction: column; gap: 8px; text-align: center; }

.olex-data-label { justify-content: center; }

.olex-data-value-wrapper { align-items: center; }

.olex-data-note { text-align: center; font-size: 10px; max-width: 100%; }

.color-circle { width: 28px; height: 28px; }

.color-circle::after { bottom: auto; top: 130%; font-size: 11px; padding: 6px 10px; }

.color-circle::before { bottom: auto; top: 122%; transform: translateX(-50%) rotate(180deg); }

.colors-list { justify-content: center; gap: 10px; } }

@media (max-width: 480px) { .olex-pallet-dimensions, .olex-technical-data-wrapper, .olex-product-colors { padding: 16px; margin: 16px 0; }

.olex-technical-data-title, .olex-product-colors h5 { font-size: 14px; }

.bold-number { font-size: 16px; }

.icon-title { font-size: 10px; } }

/* High contrast mode support */ @media (prefers-contrast: high) { .color-circle { border-width: 4px; }

.color-circle::after { background: #000000; border: 2px solid #ffffff; }

.olex-technical-data-item, .icon-list-item { border-width: 2px; } }

/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .color-circle, .olex-technical-data-item, .color-circle::after, .color-circle::before { transition: none; }

.color-circle:hover { transform: none; } }

/* Print styles */ @media print { .olex-pallet-dimensions, .olex-technical-data-wrapper, .olex-product-colors { box-shadow: none; border: 1px solid #000; }

.color-circle::after, .color-circle::before { display: none; } }