/** * Ingredients Line Styles - Porównywarka Cen MED-LEK * Style dla linii składników w kartach produktów * * System gradientu mocy:* - Składniki z większą ilością = większa widoczność (ciemniejsze/intensywniejsze) * - Składniki z mniejszą ilością = mniejsza widoczność (jaśniejsze/bledsze) *//* ================================================== INGREDIENTS LINE CONTAINER ================================================== */.ingredients-line{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;align-items:center;min-height:24px}.ingredients-line--compact{gap:3px;margin-bottom:4px;min-height:20px}/* ================================================== INGREDIENT PILL (pojedynczy składnik) ================================================== */.ingredient-pill{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:12px;font-size:11px;line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;/* Bazowy gradient - turkusowy z przezroczystością */ background:linear-gradient(135deg, rgba(12, 222, 208, 0.15) 0%, rgba(10, 184, 173, 0.10) 100% );border:1px solid rgba(12, 222, 208, 0.25);color:#0d9488;transition:all 0.2s ease}.ingredient-pill:hover{background:linear-gradient(135deg, rgba(12, 222, 208, 0.25) 0%, rgba(10, 184, 173, 0.18) 100% );border-color:rgba(12, 222, 208, 0.4);transform:translateY(-1px)}/* Kompaktowy wariant */.ingredient-pill--compact{padding:2px 6px;font-size:9px;border-radius:8px;gap:2px}/* ================================================== NAZWA I ILOŚĆ SKŁADNIKA ================================================== */.ingredient-name{font-weight:600;text-overflow:ellipsis;overflow:hidden}.ingredient-amount{font-weight:700;font-size:10px;opacity:0.9;padding-left:2px;border-left:1px solid rgba(12, 222, 208, 0.3);margin-left:1px}.ingredient-pill--compact .ingredient-amount{font-size:8px}/* ================================================== GRADIENT MOCY - Opacity Classes Klasy od 4 do 10 (0.35 - 1.0) Im wyższa liczba, tym większa moc składnika ================================================== *//* Opacity 10 (1.0) - Najsilniejszy składnik */.ingredient-opacity-10{background:linear-gradient(135deg, rgba(12, 222, 208, 0.35) 0%, rgba(10, 184, 173, 0.28) 100% );border-color:rgba(12, 222, 208, 0.5);color:#0d7d74;font-weight:600}.ingredient-opacity-10 .ingredient-name{font-weight:700}/* Opacity 9 (0.9) */.ingredient-opacity-9{background:linear-gradient(135deg, rgba(12, 222, 208, 0.30) 0%, rgba(10, 184, 173, 0.24) 100% );border-color:rgba(12, 222, 208, 0.45);color:#0d8880}/* Opacity 8 (0.8) */.ingredient-opacity-8{background:linear-gradient(135deg, rgba(12, 222, 208, 0.26) 0%, rgba(10, 184, 173, 0.20) 100% );border-color:rgba(12, 222, 208, 0.40);color:#0d9488}/* Opacity 7 (0.7) */.ingredient-opacity-7{background:linear-gradient(135deg, rgba(12, 222, 208, 0.22) 0%, rgba(10, 184, 173, 0.16) 100% );border-color:rgba(12, 222, 208, 0.35);color:#0d9f95}/* Opacity 6 (0.6) - Średnia moc */.ingredient-opacity-6{background:linear-gradient(135deg, rgba(12, 222, 208, 0.18) 0%, rgba(10, 184, 173, 0.12) 100% );border-color:rgba(12, 222, 208, 0.30);color:#10a89e}/* Opacity 5 (0.5) */.ingredient-opacity-5{background:linear-gradient(135deg, rgba(12, 222, 208, 0.14) 0%, rgba(10, 184, 173, 0.09) 100% );border-color:rgba(12, 222, 208, 0.25);color:#14b3a8}/* Opacity 4 (0.4) - Najsłabszy wyświetlany */.ingredient-opacity-4{background:linear-gradient(135deg, rgba(12, 222, 208, 0.10) 0%, rgba(10, 184, 173, 0.06) 100% );border-color:rgba(12, 222, 208, 0.18);color:#1abfb4}.ingredient-opacity-4 .ingredient-name,.ingredient-opacity-5 .ingredient-name{font-weight:500}/* Opacity 3 (0.35) - Bardzo słabe (prawie niewidoczne) */.ingredient-opacity-3{background:linear-gradient(135deg, rgba(12, 222, 208, 0.07) 0%, rgba(10, 184, 173, 0.04) 100% );border-color:rgba(12, 222, 208, 0.12);color:#22c9bd}.ingredient-opacity-3 .ingredient-name{font-weight:400}/* ================================================== PRZYCISK "+N więcej" ================================================== */.ingredient-more{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;white-space:nowrap;background:linear-gradient(135deg, rgba(26, 26, 26, 0.08) 0%, rgba(26, 26, 26, 0.05) 100% );border:1px solid rgba(26, 26, 26, 0.15);color:#666;cursor:default;transition:all 0.2s ease}.ingredient-more:hover{background:linear-gradient(135deg, rgba(26, 26, 26, 0.12) 0%, rgba(26, 26, 26, 0.08) 100% );color:#444}.ingredients-line--compact .ingredient-more{padding:2px 6px;font-size:8px;border-radius:8px}/* ================================================== WIDOK LISTY (products-list) ================================================== */.products-list .ingredients-line{margin-bottom:0;gap:4px;flex-wrap:nowrap;overflow:hidden;max-width:200px}.products-list .ingredient-pill{padding:2px 6px;font-size:9px;border-radius:8px}.products-list .ingredient-amount{font-size:8px}.products-list .ingredient-more{padding:2px 5px;font-size:8px;border-radius:8px}/* ================================================== RESPONSIVE - TABLET (< 968px) ================================================== */@media (max-width:968px){.ingredients-line{gap:4px;margin-bottom:6px}.ingredient-pill{padding:2px 6px;font-size:10px}.ingredient-amount{font-size:9px}.ingredient-more{padding:2px 6px;font-size:9px}}/* ================================================== RESPONSIVE - MOBILE (< 640px) ================================================== */@media (max-width:640px){.ingredients-line{gap:3px;margin-bottom:5px;min-height:20px}.ingredient-pill{padding:2px 5px;font-size:9px;border-radius:10px;gap:2px}.ingredient-name{max-width:55px}.ingredient-amount{font-size:8px;padding-left:1px}.ingredient-more{padding:2px 5px;font-size:8px;border-radius:10px}/* Na mobile pokazuj mniej składników */ .products-grid .ingredients-line .ingredient-pill:nth-child(n+3){display:none}.products-grid .ingredients-line .ingredient-more{display:inline-flex}}/* ================================================== RESPONSIVE - ULTRA SMALL (< 380px) ================================================== */@media (max-width:380px){.ingredients-line{gap:2px;margin-bottom:4px}.ingredient-pill{padding:1px 4px;font-size:8px;border-radius:8px}.ingredient-name{max-width:45px}.ingredient-amount{font-size:7px}.ingredient-more{padding:1px 4px;font-size:7px}/* Na bardzo małych ekranach pokazuj tylko 1-2 składniki */ .products-grid .ingredients-line .ingredient-pill:nth-child(n+2){display:none}}/* ================================================== DARK MODE SUPPORT (jeśli będzie potrzebne) ================================================== */@media (prefers-color-scheme:dark){/* Placeholder dla dark mode - do implementacji w przyszłości */}/* ================================================== ANIMACJE I EFEKTY ================================================== */@keyframes ingredientPulse{0%, 100%{opacity:1}50%{opacity:0.7}}/* Opcjonalnie:podświetlenie przy ładowaniu */.ingredient-pill--loading{animation:ingredientPulse 1.5s ease-in-out infinite}/* ================================================== TOOLTIP DLA PEŁNEJ NAZWY (desktop hover) ================================================== */.ingredient-pill[title]{cursor:help}/* Natywny tooltip - prostsze rozwiązanie */.ingredient-pill[title]:hover::after{content:none;/* Używamy natywnego title */}/* ================================================== SEKCJA SKŁADNIKÓW DLA KATEGORII SKŁADNIKOWYCH Layout:Progress bar głównego składnika + pozostałe z rozwijaniem ================================================== */.ingredient-category-section{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}/* Progress bar głównego składnika */.ingredient-main-bar{display:flex;flex-direction:column;gap:4px;padding:6px 10px;background:linear-gradient(135deg, rgba(12, 222, 208, 0.08) 0%, rgba(10, 184, 173, 0.04) 100% );border-radius:8px;border:1px solid rgba(12, 222, 208, 0.15)}.ingredient-main-info{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ingredient-main-name{font-size:10px;font-weight:600;color:#0d7d74;text-transform:uppercase;letter-spacing:0.3px}.ingredient-main-amount{font-size:13px;font-weight:800;color:#0a6b64}.ingredient-main-progress{width:100%;height:6px;background:rgba(12, 222, 208, 0.12);border-radius:3px;overflow:hidden}.ingredient-main-progress-fill{height:100%;background:linear-gradient(90deg, #0cded0 0%, #0ab8ad 60%, #099e94 100% );border-radius:3px;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1);min-width:4px;position:relative}/* Efekt połysku na progress barze */.ingredient-main-progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100% );border-radius:3px 3px 0 0}/* Pozostałe składniki */.ingredient-others{display:flex;flex-wrap:wrap;align-items:center;gap:4px}/* Przycisk rozwijania */.ingredient-expand-btn{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:10px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid rgba(12, 222, 208, 0.25);background:linear-gradient(135deg, rgba(12, 222, 208, 0.12) 0%, rgba(10, 184, 173, 0.08) 100% );color:#0d9488;transition:all 0.2s ease}.ingredient-expand-btn:hover{background:linear-gradient(135deg, rgba(12, 222, 208, 0.22) 0%, rgba(10, 184, 173, 0.15) 100% );border-color:rgba(12, 222, 208, 0.4);transform:scale(1.05)}.ingredient-expand-btn:focus{outline:none;box-shadow:0 0 0 2px rgba(12, 222, 208, 0.3)}.ingredient-expand-btn[aria-expanded="true"]{background:rgba(12, 222, 208, 0.25);border-color:rgba(12, 222, 208, 0.5)}/* Ukryte składniki (domyślnie niewidoczne) */.ingredient-hidden{display:none;flex-wrap:wrap;gap:4px;width:100%;margin-top:4px;padding-top:4px;border-top:1px dashed rgba(12, 222, 208, 0.2);animation:ingredientSlideDown 0.3s ease}.ingredient-hidden.expanded{display:flex}@keyframes ingredientSlideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}/* ================================================== RESPONSIVE - SEKCJA KATEGORII SKŁADNIKOWYCH ================================================== */@media (max-width:968px){.ingredient-category-section{gap:5px;margin-bottom:6px}.ingredient-main-bar{padding:5px 8px;gap:3px}.ingredient-main-name{font-size:9px}.ingredient-main-amount{font-size:12px}.ingredient-main-progress{height:5px}.ingredient-others{gap:3px}.ingredient-expand-btn{padding:2px 6px;font-size:9px}}@media (max-width:640px){.ingredient-category-section{gap:4px;margin-bottom:5px}.ingredient-main-bar{padding:4px 6px;gap:2px;border-radius:6px}.ingredient-main-name{font-size:8px}.ingredient-main-amount{font-size:11px}.ingredient-main-progress{height:4px;border-radius:2px}.ingredient-main-progress-fill{border-radius:2px}.ingredient-others{gap:2px}.ingredient-expand-btn{padding:2px 5px;font-size:8px;border-radius:8px}.ingredient-hidden{margin-top:3px;padding-top:3px}}@media (max-width:380px){.ingredient-main-bar{padding:3px 5px}.ingredient-main-name{font-size:7px}.ingredient-main-amount{font-size:10px}.ingredient-main-progress{height:3px}.ingredient-expand-btn{padding:1px 4px;font-size:7px}}/* ================================================== BADGE FORMY I TYPU PRODUKTU Wyświetlane w lewym górnym rogu karty produktu ================================================== */.product-badges-top{position:absolute;top:8px;left:8px;z-index:3;display:flex;flex-direction:column;gap:4px;max-width:calc(100% - 16px)}.badge-form,.badge-type{display:inline-block;padding:3px 8px;border-radius:4px;font-size:9px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-shadow:0 1px 3px rgba(0,0,0,0.12);transition:all 0.2s ease}/* Forma produktu - turkusowy */.badge-form{background:linear-gradient(135deg, #0cded0 0%, #0ab8ad 100%);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.1)}.badge-form:hover{background:linear-gradient(135deg, #0ab8ad 0%, #099e94 100%);transform:translateY(-1px);box-shadow:0 2px 6px rgba(12, 222, 208, 0.35)}/* Typ produktu - szary/neutralny */.badge-type{background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);color:#495057;border:1px solid rgba(0,0,0,0.08)}.badge-type:hover{background:linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);transform:translateY(-1px)}/* ================================================== RESPONSIVE - BADGE FORMY I TYPU ================================================== */@media (max-width:968px){.product-badges-top{top:6px;left:6px;gap:3px}.badge-form, .badge-type{padding:2px 6px;font-size:8px;border-radius:3px}}@media (max-width:640px){.product-badges-top{top:5px;left:5px;gap:2px}.badge-form, .badge-type{padding:2px 5px;font-size:7px}}@media (max-width:380px){.product-badges-top{top:4px;left:4px;gap:2px}.badge-form, .badge-type{padding:1px 4px;font-size:6px}/* Na bardzo małych ekranach ukryj typ, zostaw tylko formę */ .badge-type{display:none}}