Partner, na którym możesz
polegać .
Od doradztwa technicznego, przez błyskawiczną wycenę, aż po
terminową dostawę na plac budowy. Zapewniamy wszystko, czego
potrzebujesz, aby Twój projekt zakończył się sukcesem.
Gwarancja jakości
Certyfikowane
Wsparcie 24/7
Zawsze dostępni
"Firma Pascal z powierzonego zadania wywiązała się należycie, a same prace montażowe przebiegły sprawnie i zogdnie z zasadami sztuki budowlanej. Dobrze oceniamy jakość wykonanych prac."
Regulamin Sklepu PrefabHub
§ 1. Postanowienia ogólne
1. Sklep internetowy PrefabHub, działający pod adresem [adres strony], prowadzony jest przez [Nazwa Firmy], z siedzibą w [Miasto], NIP: [NIP Firmy].
2. Niniejszy regulamin określa zasady i warunki korzystania ze Sklepu, w tym składania zamówień, dokonywania płatności, realizacji dostaw oraz procedur reklamacyjnych.
§ 2. Składanie zamówień
1. Zamówienia można składać 24 godziny na dobę, 7 dni w tygodniu.
2. Warunkiem złożenia zamówienia jest akceptacja niniejszego regulaminu oraz polityki prywatności.
3. Złożenie zamówienia stanowi zawarcie umowy kupna-sprzedaży w rozumieniu Kodeksu Cywilnego.
§ 5. Polityka Prywatności
1. Administratorem danych osobowych jest [Nazwa Firmy]. Dane są przetwarzane w celu realizacji zamówienia oraz w celach marketingowych, jeśli Klient wyraził na to zgodę.
2. Klient ma prawo dostępu do swoich danych, ich sprostowania, usunięcia lub ograniczenia przetwarzania.
3. Szczegółowe informacje na temat przetwarzania danych osobowych znajdują się w dokumencie "Polityka Prywatności" dostępnym na stronie Sklepu.
§ 6. Postanowienia końcowe
W sprawach nieuregulowanych niniejszym regulaminem mają zastosowanie przepisy prawa polskiego, w szczególności Kodeksu Cywilnego.
Razem:
0.00 zł
KARTA PRODUKTU - NOWY DESIGN
========================================== */
.product-card {
background: linear-gradient(135deg, rgba(42, 46, 54, 0.98), rgba(37, 40, 46, 0.98)) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.product-card:hover {
transform: translateY(-8px) scale(1.02) !important;
border-color: rgba(250, 204, 21, 0.4) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(250, 204, 21, 0.2) !important;
}
/* Zawartość karty */
.product-content {
padding: 1.5rem !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
}
/* Kategoria */
.product-category {
color: #94a3b8 !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin: 0 0 0.75rem 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* Nazwa produktu */
.product-title {
color: #f8fafc !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
text-align: center !important;
min-height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Meta informacje (SKU, waga) - w jednej linii */
.product-meta {
display: none !important;
justify-content: center !important;
align-items: center !important;
gap: 0.75rem !important;
margin: 0 0 1.25rem 0 !important;
padding: 0 !important;
flex-wrap: wrap !important;
}
.meta-badge {
display: inline-flex !important;
align-items: center !important;
gap: 0.375rem !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 0.375rem 0.75rem !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
color: #cbd5e1 !important;
transition: all 0.2s ease !important;
}
.meta-badge:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(250, 204, 21, 0.3) !important;
}
.meta-badge i {
width: 14px !important;
height: 14px !important;
color: #94a3b8 !important;
flex-shrink: 0 !important;
}
/* Cena */
.product-price {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-size: 2rem !important;
font-weight: 900 !important;
margin: 0 0 1.5rem 0 !important;
padding: 0 !important;
text-align: center !important;
line-height: 1 !important;
}
/* ==========================================
KONTENER ILOŚCI I PRZYCISKU
========================================== */
.quantity-cart-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
margin-top: auto !important;
padding: 0 !important;
}
/* Selektor ilości */
.quantity-selector {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 2px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
overflow: hidden !important;
height: 52px !important;
padding: 6px !important;
gap: 4px !important;
}
/* Przyciski +/- */
.quantity-btn {
background: rgba(0, 0, 0, 0.3) !important;
color: #e2e8f0 !important;
border: none !important;
width: 42px !important;
height: 40px !important;
border-radius: 8px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.quantity-btn:hover {
background: #facc15 !important;
color: #1f2937 !important;
transform: scale(1.1) !important;
}
.quantity-btn:active {
transform: scale(0.95) !important;
}
.quantity-btn i {
width: 18px !important;
height: 18px !important;
stroke-width: 2.5 !important;
}
/* Input ilości */
.quantity-input-inline {
background: transparent !important;
color: #f8fafc !important;
border: none !important;
text-align: center !important;
font-weight: 700 !important;
font-size: 20px !important;
width: 70px !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
flex-shrink: 0 !important;
}
.quantity-input-inline::-webkit-outer-spin-button,
.quantity-input-inline::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.quantity-input-inline[type="number"] {
-moz-appearance: textfield !important;
}
/* Przycisk "Dodaj do koszyka" */
.btn-add-to-cart-inline {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
color: #1f2937 !important;
border: none !important;
padding: 16px 20px !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 15px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 6px 25px rgba(250, 204, 21, 0.35) !important;
margin: 0 !important;
}
.btn-add-to-cart-inline:hover {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
box-shadow: 0 10px 35px rgba(250, 204, 21, 0.5) !important;
transform: translateY(-3px) !important;
}
.btn-add-to-cart-inline:active {
transform: translateY(0) !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart-inline i {
width: 20px !important;
height: 20px !important;
stroke-width: 2.5 !important;
}
/* ==========================================
RESPONSYWNOŚĆ
========================================== */
@media (max-width: 768px) {
.product-content {
padding: 1.25rem !important;
}
.product-title {
font-size: 1.1rem !important;
min-height: 50px !important;
}
.product-price {
font-size: 1.75rem !important;
margin-bottom: 1.25rem !important;
}
.quantity-selector {
height: 48px !important;
padding: 5px !important;
}
.quantity-btn {
width: 38px !important;
height: 36px !important;
}
.quantity-input-inline {
font-size: 18px !important;
width: 60px !important;
}
.btn-add-to-cart-inline {
font-size: 14px !important;
padding: 14px 18px !important;
}
}
@media (max-width: 480px) {
.product-content {
padding: 1rem !important;
}
.product-title {
font-size: 1rem !important;
}
.product-price {
font-size: 1.5rem !important;
}
.meta-badge {
font-size: 0.7rem !important;
padding: 0.25rem 0.5rem !important;
}
}
/* Style dla błędów walidacji w modalu checkout */
.error-border {
border-color: #ef4444 !important;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
animation: shake 0.3s ease-in-out;
}
/* Poprawka dla ikon błędu, tekstu i szerokości pola */
.error-message {
color: #ef4444 !important; /* Czerwony kolor tekstu błędu */
font-weight: 500 !important;
font-size: 0.875rem !important;
margin-top: 0.5rem !important; /* Zwiększony margines dla lepszego odstępu */
display: flex !important;
align-items: flex-start !important; /* Wyrównanie do góry dla lepszego ułożenia przy zawijaniu */
gap: 0.5rem !important; /* Zwiększony odstęp między ikoną a tekstem */
white-space: normal !important; /* Pozwala na naturalne zawijanie tekstu */
max-width: 100% !important; /* Umożliwia zajęcie pełnej dostępnej szerokości */
}
.error-message::before {
content: "▲"; /* Ustawienie pojedynczej ikony trójkąta */
color: #ef4444 !important; /* Czerwony kolor ikony */
font-size: 0.8rem !important; /* Dopasowanie wielkości ikony */
line-height: 1.5; /* Lepsze wyrównanie pionowe z pierwszą linią tekstu */
flex-shrink: 0; /* Zapobiega kurczeniu się ikony */
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Animacja dla komunikatów błędów */
.error-message {
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Poprawka koloru nagłówków w sekcji Ustawienia */
#profile .card-enhanced h4 {
color: #f1f5f9 !important; /* Jasnoszary kolor dla nagłówków */
}
#profile .card-enhanced h5 {
color: #e2e8f0 !important; /* Jeszcze jaśniejszy dla pod-nagłówków */
}
/* Dodatkowa poprawka dla spójności tekstu w listach danych */
#profile .card-enhanced dt {
color: #94a3b8 !important; /* Szary dla etykiet */
}
#profile .card-enhanced dd {
color: #f1f5f9 !important; /* Biały dla wartości */
}
/* Styl dla czerwonej gwiazdki przy wymaganych polach */
#checkout-modal-content label.required::after {
content: ' *';
color: #ef4444; /* Czerwony kolor */
font-weight: bold;
margin-left: 2px;
}
/* Zaokrąglenie wszystkich pól w modalu */
#checkout-modal-content input,
#checkout-modal-content select {
border-radius: 12px !important;
}
/* Styl dla niewypełnionych wymaganych pól */
#checkout-modal-content input:required:invalid,
#checkout-modal-content select:required:invalid {
border-color: #ef4444 !important; /* Czerwona ramka dla błędu */
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}
#login-modal input[type="email"], #login-modal input[type="password"] {
width:100%;
}
#checkout-modal {
background-color: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(15px) !important;
z-index: 1000;
}
input#search-input {
margin-bottom:0px;
border-radius:50px;
}
#notifications-btn {
display: none !important;
}
.hover\:bg-yellow-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(46 51 59)!important;
}
/* === JEDNOLITE PRZYCISKI PŁATNOŚCI === */
.payment-btn-unified {
background: rgba(255, 255, 255, 0.08) !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
color: #e2e8f0 !important;
border-radius: 16px !important;
padding: 1.5rem 1rem !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
min-height: 120px !important;
text-align: center !important;
cursor: pointer !important;
backdrop-filter: blur(10px) !important;
}
.payment-btn-unified:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(250, 204, 21, 0.5) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
transform: translateY(-2px) scale(1.02) !important;
color: #facc15 !important;
}
/* Aktywny stan przycisku płatności */
.payment-btn-unified.active {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 25px rgba(250, 204, 21, 0.4) !important;
}
.payment-btn-unified.active:hover {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
transform: translateY(-3px) scale(1.02) !important;
}
/* Ikony w przyciskach płatności */
.payment-btn-unified i {
transition: all 0.3s ease !important;
flex-shrink: 0 !important;
}
.payment-btn-unified:hover i {
transform: scale(1.1) !important;
}
.payment-btn-unified.active i {
color: #1f2937 !important;
}
/* Tekst w przyciskach */
.payment-btn-unified span {
line-height: 1.3 !important;
margin-top: 0.25rem !important;
}
/* Responsywność */
@media (max-width: 768px) {
.payment-btn-unified {
min-height: 100px !important;
padding: 1rem 0.75rem !important;
font-size: 0.8rem !important;
gap: 0.5rem !important;
}
.payment-btn-unified i {
width: 1.5rem !important;
height: 1.5rem !important;
}
}
@media (max-width: 640px) {
#payment-options {
grid-template-columns: 1fr 1fr !important;
gap: 0.75rem !important;
}
}
/* === ZMODERNIZOWANY MODAL FINALIZACJI ZAMÓWIENIA === */
/* Zwiększenie szerokości i poprawa estetyki modala */
#checkout-modal-content {
padding: 2.5rem !important; /* Większe wewnętrzne odstępy */
}
/* Nowe, ulepszone przyciski płatności - mniejsze i bardziej przezroczyste */
.payment-btn-blue {
background: rgba(59, 130, 246, 0.15) !important;
color: #3b82f6 !important;
border: 2px solid rgba(59, 130, 246, 0.3) !important;
border-radius: 16px !important;
padding: 1rem 1.5rem !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
min-height: 90px;
max-height: 90px;
text-align: center;
backdrop-filter: blur(10px) !important;
}
.payment-btn-blue:hover {
background: rgba(59, 130, 246, 0.25) !important;
border-color: rgba(59, 130, 246, 0.5) !important;
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2) !important;
transform: translateY(-2px) scale(1.02) !important;
}
/* Aktywny stan przycisku płatności */
.payment-btn-blue.active {
background: rgba(250, 204, 21, 0.2) !important;
color: #d97706 !important;
border-color: #facc15 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 25px rgba(250, 204, 21, 0.3) !important;
}
.payment-btn-logo {
height: 28px !important;
max-width: 70px;
object-fit: contain;
}
/* Specjalne style dla tradycyjnych przycisków płatności */
.payment-btn {
background: rgba(107, 114, 128, 0.1) !important;
color: #6b7280 !important;
border: 2px solid rgba(107, 114, 128, 0.2) !important;
border-radius: 16px !important;
padding: 1rem 1.5rem !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
box-shadow: 0 4px 20px rgba(107, 114, 128, 0.1) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.75rem !important;
min-height: 90px;
max-height: 90px;
text-align: center;
backdrop-filter: blur(10px) !important;
}
.payment-btn:hover {
background: rgba(107, 114, 128, 0.2) !important;
border-color: rgba(107, 114, 128, 0.4) !important;
box-shadow: 0 8px 30px rgba(107, 114, 128, 0.2) !important;
transform: translateY(-2px) scale(1.02) !important;
}
.payment-btn.active {
background: rgba(250, 204, 21, 0.2) !important;
color: #d97706 !important;
border-color: #facc15 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 25px rgba(250, 204, 21, 0.3) !important;
}
.payment-btn-logo {
height: 32px !important;
max-width: 80px;
object-fit: contain;
}
/* Filtr do ikon SVG, aby były białe na niebieskim tle */
.payment-btn-logo.logo-light {
filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
/* Usunięcie filtra dla aktywnego (żółtego) przycisku */
.payment-btn-blue.active .payment-btn-logo.logo-light {
filter: none;
}
/* === ULEPSZONE PRZYCISKI PŁATNOŚCI === */
.payment-btn-blue {
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
padding: 1rem !important;
font-weight: 600 !important;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
min-height: 100px;
text-align: center;
}
.payment-btn-blue:hover {
background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4) !important;
transform: translateY(-3px) !important;
}
.payment-btn-blue.active {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
color: #1f2937 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 25px rgba(250, 204, 21, 0.5) !important;
border-color: #facc15 !important;
}
.payment-btn-logo {
height: 32px !important;
max-width: 80px;
object-fit: contain;
}
/* Filtr do ikon SVG, aby były białe na niebieskim tle */
.payment-btn-logo.logo-light {
filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
/* Usunięcie filtra dla aktywnego (żółtego) przycisku */
.payment-btn-blue.active .payment-btn-logo.logo-light {
filter: none;
}
/* === OBSŁUGA FORMULARZA NOWEGO ADRESU === */
#delivery-address {
margin-bottom: 0.5rem;
}
/* Style dla paska postępu w modalu checkout */
.progress-bar-step {
transition: all 0.3s ease;
}
/* Style dla przycisków płatności w modalu checkout */
#checkout-modal .payment-btn {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #e2e8f0 !important;
transition: all 0.3s ease !important;
}
#checkout-modal .payment-btn:hover {
background: rgba(250, 204, 21, 0.2) !important;
border-color: rgba(250, 204, 21, 0.4) !important;
color: #ffe200 !important;
}
#checkout-modal .payment-btn.active {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3) !important;
}
#checkout-modal .btn-primary:disabled {
background: #4b5563 !important;
opacity: 0.6;
cursor: not-allowed;
box-shadow: none !important;
transform: none !important;
}
.quantity-input-inline {
width: 20px !important; /* Zmniejszono z 50px */
}
/* === ULEPSZONE I UPORZĄDKOWANE STYLE FILTRÓW === */
.filter-group label::before {
display: none !important;
}
/* Główny kontener filtrów - bardziej subtelny i uporządkowany */
.filters-container {
padding: 1.5rem !important; /* Więcej przestrzeni wewnętrznej */
border-radius: 16px !important; /* Bardziej zaokrąglone rogi */
margin-bottom: 2rem !important;
}
/* Grupowanie i Etykiety - dla lepszej organizacji i czytelności */
.filter-group {
display: flex;
align-items: center;
gap: 1.5rem; /* Odstęp między grupami filtrów */
flex-wrap: wrap; /* Zawijanie na mniejszych ekranach */
}
.filter-group-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.filter-label {
font-weight: 600 !important;
color: #f1f5f9 !important; /* Nagłówki filtrów bardziej widoczne */
font-size: 0.9rem;
white-space: nowrap;
}
/* === Ulepszone Filtry Kategorii (Styl zakładek/chipów) === */
#category-radios {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.75rem !important;
align-items: center;
}
#category-radios label {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 0.5rem 1rem !important;
border-radius: 999px !important; /* Styl "pigułki" */
cursor: pointer !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
color: #cbd5e1 !important;
}
#category-radios label:hover {
background: rgba(250, 204, 21, 0.1) !important;
border-color: rgba(250, 204, 21, 0.3) !important;
color: #ffe200 !important;
}
#category-radios label.checked {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.25) !important;
font-weight: 700 !important;
}
/* Zmiana koloru ikon i tekstu w aktywnej zakładce */
#category-radios label.checked i,
#category-radios label.checked span {
color: #1f2937 !important;
}
#category-radios input[type="radio"] {
display: none !important; /* Ukrywamy domyślne radio */
}
/* === Ulepszony Suwak Ceny === */
.price-slider-container {
display: flex;
align-items: center;
gap: 1rem;
min-width: 280px;
flex: 1;
}
.price-slider-container input[type="range"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
height: 6px !important;
background: linear-gradient(90deg, #374151, #4b5563) !important;
border-radius: 4px !important;
outline: none !important;
cursor: pointer;
}
.price-slider-container input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 3px solid #2a2e36 !important;
cursor: pointer !important;
box-shadow: 0 0 15px rgba(250, 204, 21, 0.5) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.price-slider-container input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.price-slider-container input[type="range"]::-moz-range-thumb {
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 3px solid #2a2e36 !important;
cursor: pointer !important;
box-shadow: 0 0 15px rgba(250, 204, 21, 0.5) !important;
}
.price-slider-container #price-range-value {
color: #facc15 !important;
font-weight: 700 !important;
min-width: 80px; /* Stała szerokość, by uniknąć "skakania" layoutu */
text-align: right;
}
/* === Ulepszone Sortowanie i Akcje === */
.actions-container {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.5rem 1rem;
border-radius: 12px;
border: 1px solid #3f424a;
}
.actions-container #sort-select {
background: transparent !important;
color: #ffffff !important;
border: none !important;
box-shadow: none !important;
padding: 0.25rem 0.5rem !important;
font-weight: 500;
cursor: pointer;
}
.actions-container #sort-select:focus {
outline: none;
text-shadow: 0 0 2px rgba(255,255,255,0.6);
}
.actions-container #sort-select option {
background: #1e293b !important;
color: #ffffff !important;
}
#results-count {
color: #ffe200 !important;
font-weight: 700 !important;
}
#clear-filters-btn {
background: linear-gradient(135deg, #4b5563, #374151) !important;
color: white !important;
border: 1px solid #6b7280 !important;
transition: all 0.3s ease !important;
padding: 0.5rem 1rem !important;
border-radius: 8px !important;
}
#clear-filters-btn:hover {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
border-color: #ef4444 !important;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}
/* Separator dla wizualnego podziału */
.filter-separator {
width: 1px;
height: 2rem;
background-color: #4a5568;
}
/* Stary kod do zastÄ
pienia */
:root {
--main-color: #ca8a04;
--main-color-light: #fefce8;
--main-color-dark: #a16207;
--gradient-primary: linear-gradient(
135deg,
#fef3c7 0%,
#fde68a 50%,
#f59e0b 100%
);
--primary-gradient: linear-gradient(
135deg,
#f59e0b 0%,
#d97706 50%,
#ca8a04 100%
);
}
/* Floating Cart Styles */
/* === ULEPSZONE STYLE PŁYWAJĄCEGO KOSZYKA (DOPASOWANE DO HEADERA) === */
#floating-cart-bar {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
background: linear-gradient(135deg, #2a2e36, #252931) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(250, 204, 21, 0.3) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5),
0 0 40px rgba(250, 204, 21, 0.2) !important;
border-radius: 16px !important;
padding: 1.5rem !important;
z-index: 10000 !important;
width: 380px !important;
max-width: 90vw !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
transform-origin: bottom right !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(20px) scale(0.95) !important;
color: #e2e8f0 !important;
}
/* Stan widoczności koszyka */
#floating-cart-bar.visible {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
}
/* Header floating cart */
#floating-cart-bar .floating-cart-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 1rem !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#floating-cart-bar h4 {
font-weight: 700 !important;
color: #f8fafc !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
font-size: 1.1rem !important;
margin: 0 !important;
}
#floating-cart-bar h4 i {
color: #facc15 !important;
}
/* Przycisk zamknięcia */
#floating-cart-close {
color: #94a3b8 !important;
transition: all 0.3s ease !important;
padding: 4px !important;
border-radius: 6px !important;
}
#floating-cart-close:hover {
color: #facc15 !important;
background: rgba(250, 204, 21, 0.1) !important;
transform: scale(1.1) !important;
}
/* Lista produktów w koszyku */
#floating-cart-items {
max-height: 240px !important;
overflow-y: auto !important;
margin: 0 -8px 1rem 0 !important;
padding-right: 8px !important;
scrollbar-width: thin !important;
scrollbar-color: #facc15 rgba(255, 255, 255, 0.1) !important;
}
#floating-cart-items::-webkit-scrollbar {
width: 4px !important;
}
#floating-cart-items::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 2px !important;
}
#floating-cart-items::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
border-radius: 2px !important;
}
/* Pojedynczy produkt w koszyku */
.floating-item {
display: flex !important;
align-items: center !important;
padding: 0.75rem !important;
margin-bottom: 0.5rem !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
}
.floating-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.floating-item:last-child {
margin-bottom: 0 !important;
}
.floating-item-image {
width: 40px !important;
height: 40px !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
margin-right: 0.75rem !important;
flex-shrink: 0 !important;
object-fit: cover !important;
}
.floating-item-details {
flex: 1 !important;
min-width: 0 !important;
}
.item-name {
color: #f8fafc !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
line-height: 1.2 !important;
margin-bottom: 0.25rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.item-details {
color: #94a3b8 !important;
font-size: 0.75rem !important;
}
.floating-item-price {
text-align: right !important;
flex-shrink: 0 !important;
}
.item-qty {
color: #facc15 !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
}
.item-price {
color: #e2e8f0 !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
}
.item-remove {
color: #ef4444 !important;
font-size: 0.625rem !important;
margin-top: 2px !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
}
.item-remove:hover {
color: #dc2626 !important;
text-decoration: underline !important;
}
/* Footer floating cart */
#floating-cart-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 1rem !important;
}
/* Suma w koszyku */
#floating-cart-total-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 1rem !important;
}
#floating-cart-total {
font-weight: 800 !important;
font-size: 1.5rem !important;
color: #facc15 !important;
text-shadow: 0 1px 3px rgba(250, 204, 21, 0.3) !important;
}
/* Przycisk "Przejdź do kasy" */
#floating-cart-checkout-btn {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
color: #1f2937 !important;
font-weight: 700 !important;
border-radius: 12px !important;
padding: 0.875rem 1.25rem !important;
box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
font-size: 0.875rem !important;
}
#floating-cart-checkout-btn:hover {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
box-shadow: 0 8px 30px rgba(250, 204, 21, 0.5) !important;
transform: translateY(-2px) !important;
}
#floating-cart-checkout-btn:active {
transform: translateY(0) !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4) !important;
}
#floating-cart-checkout-btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Responsywność */
@media (max-width: 640px) {
#floating-cart-bar {
width: calc(100vw - 2rem) !important;
bottom: 1rem !important;
right: 1rem !important;
left: 1rem !important;
padding: 1.25rem !important;
}
}
/* === POPRAWIONE STYLE MODALA LOGOWANIA (CIEMNY MOTYW) === */
/* === KOMPLETNA AKTUALIZACJA STYLÓW FILTRÓW (CIEMNY MOTYW) === */
/* --- Główny kontener filtrów --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 {
background: linear-gradient(135deg, #2a2e36, #25282e) !important;
border: 1px solid #3f424a !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
/* --- Etykiety i tekst w filtrach --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 label,
.bg-gradient-to-r.from-gray-50.to-gray-100 span {
color: #e2e8f0 !important;
font-weight: 500 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 label {
font-weight: 600 !important;
}
/* --- Select (Dropdown) i Sortowanie --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 select {
background: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 0.5rem !important;
padding: 0.5rem 0.75rem !important;
transition: all 0.2s ease !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 select:focus {
outline: none !important;
border-color: #facc15 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2) !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 select option {
background: #1e293b !important;
color: #ffffff !important;
}
/* --- Checkboxy i Radio buttony --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="checkbox"],
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="radio"] {
accent-color: #facc15 !important;
transform: scale(1.1) !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="checkbox"]:focus,
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="radio"]:focus {
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3) !important;
outline: none;
}
/* --- Separatory pionowe --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 .h-6.w-px.bg-gray-300 {
background: #4a5568 !important;
}
/* --- Suwaki (Range Sliders) --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="range"] {
accent-color: #facc15 !important;
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
height: 6px !important;
background: linear-gradient(90deg, #374151, #4b5563) !important;
border-radius: 4px !important;
outline: none !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 2px solid white !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3) !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="range"]::-moz-range-thumb {
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 2px solid white !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3) !important;
}
/* --- Sekcja zaawansowanych filtrów --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content {
background: rgba(30, 33, 39, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 1rem;
border-radius: 0.75rem;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content .bg-white {
background: rgba(42, 46, 54, 0.5) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 .border-t.border-gray-200 {
border-color: #4a5568 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content h4 {
color: #f8fafc !important;
font-weight: 600 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content .text-xs.text-gray-600 {
color: #94a3b8 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content .text-xs.text-gray-500 {
color: #64748b !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #length-range-value,
.bg-gradient-to-r.from-gray-50.to-gray-100 #height-range-value,
.bg-gradient-to-r.from-gray-50.to-gray-100 #weight-range-value {
color: #facc15 !important;
font-weight: 600 !important;
}
/* --- Przyciski (Wyczyść, Zaawansowane) --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 #clear-filters-btn {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
transition: all 0.3s ease !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #clear-filters-btn:hover {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-toggle {
color: #cbd5e1 !important;
transition: color 0.3s ease !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-toggle:hover {
color: #facc15 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-toggle i {
color: #facc15 !important;
}
/* --- Licznik wyników --- */
.bg-gradient-to-r.from-gray-50.to-gray-100 #results-count {
color: #ffe200 !important;
font-weight: 700 !important;
}
#login-modal {
background-color: rgba(15, 23, 42, 0.75) !important;
backdrop-filter: blur(10px) !important;
}
#login-modal .bg-white {
background: linear-gradient(135deg, #2a2e36, #252931) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
#login-modal .bg-gradient-to-r.from-yellow-500.to-yellow-600 {
background: linear-gradient(135deg, #333842, #2a2e36) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#login-modal h3 {
color: #f8fafc !important;
}
#login-modal #close-login-modal {
color: #9ca3af !important;
}
#login-modal #close-login-modal:hover {
color: #facc15 !important;
}
#login-modal label {
color: #cbd5e1 !important;
font-weight: 600 !important;
}
#login-modal input[type="email"],
#login-modal input[type="password"] {
background-color: rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #f1f5f9 !important;
border-radius: 0.75rem !important;
}
#login-modal input::placeholder {
color: #64748b !important;
}
#login-modal input:focus {
border-color: #facc15 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3) !important;
outline: none !important;
--tw-ring-shadow: 0 0 #0000 !important; /* Usuwa domyślny ring Tailwind */
}
#login-modal #login-btn {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
}
#login-modal p.text-gray-500 {
color: #94a3b8 !important;
}
#login-modal #register-btn {
background: linear-gradient(135deg, #4b5563, #374151) !important;
color: white !important;
}
/* === ZAKTUALIZOWANE STYLE DLA HEADERA (CIEMNY MOTYW) Z !IMPORTANT === */
/* --- GĹoĹwne tĹo i wyglÄ
d nagĹoĹwka --- */
.header-gradient {
background: linear-gradient(135deg, #252931, #1f2125) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
0 0 40px rgba(250, 204, 21, 0.1) !important;
}
.header-gradient::after {
background: linear-gradient(90deg, #ffe200, #facc15) !important;
box-shadow: 0 2px 10px rgba(250, 204, 21, 0.3) !important;
}
/* --- Nawigacja gĹoĹwna (Panel Klienta, Katalog) --- */
.nav-item {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #cbd5e1 !important; /* JaĹÂniejszy tekst dla nawigacji */
}
.nav-item:hover {
transform: translateY(-3px) !important;
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 8px 25px rgba(250, 204, 21, 0.2) !important;
color: #ffffff !important;
}
.nav-item.active {
background: rgba(250, 204, 21, 0.1) !important;
border-color: rgba(250, 204, 21, 0.3) !important;
color: #ffe200 !important; /* Kolor akcentujÄ
cy dla aktywnej zakĹadki */
}
.nav-item::before {
background: linear-gradient(90deg, #ffe200, #facc15) !important;
}
.product-card input[type="number"] {
margin-bottom: 0px !important;
}
h6.font-semibold.mb-1,
h6.font-semibold.text-gray-700.mb-3 {
color: #ffffffa5 !important;
}
/* --- Wyszukiwarka --- */
.search-input {
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(10px) !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important; /* Kolor wpisywanego tekstu */
}
.search-input::placeholder {
color: #9ca3af !important; /* JaĹÂniejszy kolor placeholdera */
}
.search-input:focus {
background: rgba(0, 0, 0, 0.3) !important;
border-color: #facc15 !important;
box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2),
0 12px 40px rgba(0, 0, 0, 0.15) !important;
}
/* --- Ikony (Powiadomienia, Koszyk) i Avatar --- */
.header-gradient .icon-enhanced {
color: #cbd5e1 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.header-gradient .icon-enhanced:hover {
color: #ffe200 !important;
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 8px 25px rgba(250, 204, 21, 0.3) !important;
}
.user-avatar {
border: 3px solid rgba(255, 255, 255, 0.15) !important;
}
.user-avatar:hover {
border-color: #facc15 !important;
box-shadow: 0 12px 35px rgba(250, 204, 21, 0.3) !important;
}
.user-info .user-name {
color: #f1f5f9 !important; /* Jasne imiÄ
i nazwisko */
}
.user-info .user-company {
color: #94a3b8 !important; /* Jasnoszary kolor firmy */
}
.header-gradient #user-menu-arrow {
color: #94a3b8 !important; /* Kolor strzaĹki w doĹĹ */
}
/* --- Rozwijane menu (Dropdowns) --- */
.dropdown-enhanced {
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
background: #282c32 !important;
}
/* NagĹoĹwki i tĹa w dropdownach */
.dropdown-enhanced .bg-gradient-to-r.from-yellow-50.to-yellow-100 {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.dropdown-enhanced .border-b,
.dropdown-enhanced .border-t {
border-color: rgba(255, 255, 255, 0.1) !important;
margin-top: 20px !important;
}
.dropdown-enhanced .bg-gray-50 {
background-color: rgba(255, 255, 255, 0.03) !important;
}
/* Teksty w dropdownach */
.dropdown-enhanced h3,
.dropdown-enhanced .font-semibold {
color: #f8fafc !important;
}
.dropdown-enhanced .text-gray-800 {
color: #f8fafc !important;
}
.dropdown-enhanced .text-gray-700 {
color: #e2e8f0 !important;
}
.dropdown-enhanced .text-gray-600 {
color: #cbd5e1 !important;
}
.dropdown-enhanced .text-gray-500 {
color: #94a3b8 !important;
}
.dropdown-enhanced .text-gray-400 {
color: #64748b !important;
}
/* Linki i przyciski w dropdownach */
.dropdown-enhanced .text-yellow-600 {
color: #facc15 !important;
}
.dropdown-enhanced .hover\\:text-yellow-700:hover {
color: #ffe200 !important;
}
.dropdown-enhanced .hover\\:bg-yellow-50:hover {
background-color: rgba(250, 204, 21, 0.1) !important;
}
.dropdown-enhanced .text-red-600 {
color: #f87171 !important;
}
.dropdown-enhanced .hover\\:bg-red-50:hover {
background-color: rgba(248, 113, 113, 0.1) !important;
}
/* Ikony w dropdownach */
.dropdown-enhanced .bg-green-100 {
background-color: rgba(16, 185, 129, 0.1) !important;
}
.dropdown-enhanced .text-green-600 {
color: #4ade80 !important;
}
.dropdown-enhanced .bg-blue-100 {
background-color: rgba(59, 130, 246, 0.1) !important;
}
.dropdown-enhanced .text-blue-600 {
color: #60a5fa !important;
}
.dropdown-enhanced .bg-yellow-100 {
background-color: rgba(245, 158, 11, 0.1) !important;
}
.dropdown-enhanced .text-yellow-600 {
color: #facc15 !important;
}
/* Dostosowanie wynikoĹw wyszukiwania */
#search-results .text-yellow-600 {
color: #facc15 !important;
}
/* === POPRAWIONE STYLE ZAKŁADEK === */
/* Kontener nawigacji tabów */
#tab-nav {
display: flex;
width: 100%;
margin-bottom: 2rem;
overflow-x: auto; /* Przewijanie na małych ekranach */
}
/* Styl podstawowy dla przycisków tabów */
.tab-btn {
flex: 1; /* Równa szerokość wszystkich tabów */
min-width: 180px; /* Minimalna szerokość */
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem; /* Odstęp między ikoną a tekstem */
padding: 1rem 1.5rem;
border-radius: 1rem 1rem 0 0;
transition: all 0.3s ease;
margin: 0; /* Usuń margines aby taby były razem */
font-weight: 600;
font-size: 0.95rem;
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap; /* Zapobiega łamaniu tekstu */
text-align: center;
}
/* Ikona w przycisku taba */
.tab-btn .icon-circle {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
flex-shrink: 0; /* Ikona nie zmniejsza się */
transition: all 0.3s ease;
}
/* Aktywny tab */
.tab-btn.active {
background: linear-gradient(
135deg,
#ffe200 0%,
#facc15 100%
) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
box-shadow: 0 8px 25px rgba(250, 204, 21, 0.3) !important;
}
/* Ikona w aktywnym tabie */
.tab-btn.active .icon-circle {
background: rgba(0, 0, 0, 0.2) !important;
border-color: rgba(0, 0, 0, 0.3) !important;
}
/* Ikona w aktywnym tabie - kolor ikon */
.tab-btn.active .icon-circle i {
color: #ffe200 !important;
}
/* Nieaktywne taby */
.tab-btn:not(.active) {
background: rgba(42, 46, 54) !important;
color: #cbd5e1 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Ikona w nieaktywnym tabie */
.tab-btn:not(.active) .icon-circle {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Ikona w nieaktywnym tabie - kolor ikon */
.tab-btn:not(.active) .icon-circle i {
color: #94a3b8 !important;
}
/* Hover dla nieaktywnych tabów */
.tab-btn:not(.active):hover {
background: rgba(55, 65, 81, 0.7) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/* Hover dla ikon w nieaktywnych tabach */
.tab-btn:not(.active):hover .icon-circle {
background: rgba(255, 255, 255, 0.12) !important;
transform: scale(1.05);
}
.tab-btn:not(.active):hover .icon-circle i {
color: #facc15 !important;
}
/* Responsywność */
@media (max-width: 1200px) {
.tab-btn {
min-width: 160px;
font-size: 0.875rem;
padding: 0.875rem 1.25rem;
gap: 0.5rem;
}
.tab-btn .icon-circle {
width: 2.25rem;
height: 2.25rem;
}
}
@media (max-width: 768px) {
#tab-nav {
flex-direction: column;
overflow-x: visible;
}
.tab-btn {
flex: none;
width: 100%;
min-width: auto;
justify-content: flex-start;
padding: 1rem;
border-radius: 0.75rem;
margin-bottom: 0.5rem;
}
.tab-btn .icon-circle {
margin-right: 0;
}
}
@media (max-width: 480px) {
.tab-btn {
font-size: 0.875rem;
gap: 0.5rem;
}
.tab-btn .icon-circle {
width: 2rem;
height: 2rem;
}
}
/* --- UNIFIKACJA TĹÂA WSZYSTKICH IKON W PANELU KLIENTA --- */
.icon-circle {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.33) !important;
transition: background 0.2s, border 0.2s;
}
/* Lepszy kontrast dla ikony w aktywnej zakĹadce (tabie) */
.tab-btn.active .icon-circle {
background: rgba(0, 0, 0, 0.2) !important;
border-color: #ffe200 !important;
}
/* Efekt hover: lekkie rozjaĹÂnienie */
.tab-btn:hover .icon-circle,
.tab-btn:not(.active):hover .icon-circle {
background: rgb(42 46 54) !important;
}
.tab-btn:not(.active) {
background: rgb(42 46 54) !important;
}
/* === ZAKTUALIZOWANE STYLE KARTY PRODUKTU (CIEMNY MOTYW) Z !IMPORTANT === */
/* --- GĹoĹwne tĹo i wyglÄ
d karty --- */
.product-card {
background: linear-gradient(
135deg,
#2a2e36 0%,
#252931 100%
) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}
/* Pasek akcentu i cieĹÂ po najechaniu pozostajÄ
zoĹĹte dla spoĹjnoĹÂci marki */
.product-card:hover {
border-color: rgba(250, 204, 21, 0.4) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(250, 204, 21, 0.2) !important;
}
.product-card::before {
background: linear-gradient(90deg, #ffe200, #facc15) !important;
}
/* --- Teksty wewnÄ
trz karty --- */
.product-card h4 {
color: #f8fafc !important;
text-align: center;
}
.product-card .text-gray-600 {
color: #94a3b8 !important;
}
/* --- Cena produktu --- */
.product-card .bg-clip-text {
background-image: linear-gradient(135deg, #ffe200, #facc15) !important;
}
/* --- Kontener obrazka --- */
.product-image-container {
background: rgba(0, 0, 0, 0.2) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* --- Odznaki na obrazku (np. CE, B) --- */
.image-badge {
background: rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(5px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #e2e8f0 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
/* --- Parametry (, , ) --- */
.param-item {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.param-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}
.param-item .text-gray-500 {
color: #94a3b8 !important;
}
.param-item .font-bold {
color: #f8fafc !important;
}
.param-item i {
color: #facc15 !important; /* Ikona w kolorze akcentu */
}
/* --- Przycisk "Dodaj do koszyka" pozostaje zoĹĹty --- */
.btn-add-to-cart {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
box-shadow: 0 4px 20px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart:hover {
box-shadow: 0 8px 30px rgba(250, 204, 21, 0.4) !important;
}
/* --- Odznaka statusu "DOSTÄ
ÂPNY" pozostaje zielona dla kontrastu --- */
.status-badge {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: white !important;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
}
/* Ikony w boxach i kartach dashboardu, boczne sekcje, timeline itd. */
#dashboard .icon-circle,
#orders .icon-circle,
#tracking .icon-circle,
#invoices .icon-circle,
#returns .icon-circle,
#profile .icon-circle {
background: rgba(255, 255, 255, 0.08) !important;
border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.3) !important;
}
/* === KOMPLETNA POPRAWKA STYLoÂW FILTRoÂW (CIEMNY MOTYW) Z !IMPORTANT === */
/* --- OgoĹlny wyglÄ
d panelu i grup filtroĹw --- */
.filter-sidebar {
background: linear-gradient(
135deg,
#2a2e36 0%,
#252931 100%
) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
padding: 1.2rem !important;
}
.filter-sidebar::before {
display: none !important;
}
.filter-group {
background: rgba(42, 46, 54, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 1rem !important;
margin-bottom: 1rem !important;
backdrop-filter: none !important;
}
.filter-group:hover {
background: rgba(55, 65, 81, 0.7) !important;
box-shadow: none !important;
transform: none !important;
}
/* --- NagĹoĹwki grup filtroĹw (bez ikon) --- */
.filter-group h3 {
color: #f1f5f9 !important;
font-weight: 600 !important;
font-size: 1rem !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
margin-bottom: 1rem !important;
}
/* --- Niestandardowe Checkboxy --- */
.filter-group input[type="checkbox"] {
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
}
.filter-group label {
display: flex !important;
align-items: center !important;
cursor: pointer !important;
padding: 0.5rem !important;
border-radius: 0.5rem !important;
transition: background-color 0.2s ease !important;
color: #cbd5e1 !important;
}
.filter-group label:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.filter-group label::before {
content: "" !important;
width: 1.15rem !important;
height: 1.15rem !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 0.25rem !important;
margin-right: 0.75rem !important;
flex-shrink: 0 !important;
background-color: rgba(255, 255, 255, 0.05) !important;
transition: all 0.2s ease !important;
}
.filter-group input[type="checkbox"]:checked + span, /* Dla struktury z
*/
.filter-group input[type="checkbox"]:checked + ::before /* Dla struktury bez */ {
border-color: #facc15 !important;
background-color: #facc15 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.filter-group input[type="checkbox"]:checked + span {
color: #ffe200 !important;
}
/* --- Niestandardowe Przyciski Radio --- */
.filter-group input[type="radio"] {
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
}
.filter-group input[type="radio"] + span::before,
.filter-group input[type="radio"] + ::before {
border-radius: 50% !important;
}
.filter-group input[type="radio"]:checked + span::before,
.filter-group input[type="radio"]:checked + ::before {
background-image: none !important;
box-shadow: inset 0 0 0 4px #2a2e36 !important; /* WewnÄ
trzna kropka */
}
.filter-group input[type="radio"]:checked + span {
color: #ffe200 !important;
}
/* --- Niestandardowe Suwaki (Range Sliders) --- */
.filter-group input[type="range"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
height: 8px !important;
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 5px !important;
outline: none !important;
padding: 0 !important;
margin: 0.5rem 0 !important;
}
/* Kciuk suwaka dla Chrome/Safari/Edge */
.filter-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 3px solid #2a2e36 !important;
cursor: pointer !important;
margin-top: -6px !important; /* WyĹÂrodkowanie kciuka na ĹÂciezce */
box-shadow: 0 0 15px rgba(250, 204, 21, 0.5) !important;
transition: transform 0.2s ease !important;
}
.filter-group input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2) !important;
}
/* Kciuk suwaka dla Firefox */
.filter-group input[type="range"]::-moz-range-thumb {
width: 20px !important;
height: 20px !important;
background: linear-gradient(135deg, #ffe200, #facc15) !important;
border-radius: 50% !important;
border: 3px solid #2a2e36 !important;
cursor: pointer !important;
box-shadow: 0 0 15px rgba(250, 204, 21, 0.5) !important;
}
/* Etykiety suwakoĹw */
.filter-group .text-gray-500 {
color: #94a3b8 !important;
}
.filter-group #price-range-value,
.filter-group #length-range-value,
.filter-group #height-range-value,
.filter-group #weight-range-value {
color: #e2e8f0 !important;
font-weight: 600 !important;
}
/* Ujednolicenie ikon takze w sekcjach bocznych â przykĹadowo dla opiekuna klienta, podsumowania */
.bg-gradient-primary,
.bg-gradient-secondary,
.bg-gradient-warning,
.bg-gradient-success,
.bg-gradient-danger,
.bg-gradient-to-br,
.from-green-500,
.from-blue-500,
.from-yellow-500,
.from-pink-500,
.from-purple-500,
.to-green-700,
.to-blue-700,
.to-yellow-700,
.to-pink-700,
.to-purple-700 {
background: none !important;
background-color: rgba(255, 255, 255, 0.08) !important;
border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.22) !important;
}
/* Wersja zoĹĹtego akcentu na hover/aktywnej ikonie */
.icon-circle-accent,
.tab-btn.active .icon-circle,
.icon-circle:focus,
.icon-circle:active {
border-color: #ffe200 !important;
box-shadow: 0 0 0 4px rgba(255, 226, 0, 0.15),
0 4px 15px rgba(0, 0, 0, 0.23) !important;
}
/* === ZAKTUALIZOWANE STYLE DLA KATALOGU PRODUKToÂW (ĹĹĽoÂĹÂTY MOTYW) Z !IMPORTANT === */
/* --- GĹÂoÂWNA ZMIENNA GRADIENTU --- */
/* Ta zmiana wpĹynie na wiele elementoĹw, ktoĹre korzystaĹy z pomaraĹÂczowego gradientu */
:root {
--primary-gradient: linear-gradient(
135deg,
#ffe200 0%,
#facc15 100%
) !important;
}
/* --- KARTA PRODUKTU --- */
/* Zmiana koloru paska pojawiajÄ
cego siÄ
nad kartÄ
po najechaniu */
.product-card::before {
background: linear-gradient(90deg, #ffe200, #facc15) !important;
}
/* Zmiana cienia i obramowania karty na zoĹĹty */
.product-card {
border-color: rgba(250, 204, 21, 0.15) !important;
}
.product-card:hover {
box-shadow: 0 20px 60px rgba(250, 204, 21, 0.25) !important;
border-color: rgba(250, 204, 21, 0.4) !important;
}
/* Zmiana koloru ceny na karcie produktu (zamiast pomaraĹÂczowego gradientu) */
.product-card .bg-clip-text {
background-image: linear-gradient(
135deg,
#eab308,
#b45309
) !important; /* Ciemniejszy gradient dla lepszej czytelnoĹÂci ceny */
}
/* --- PRZYCISK "DODAJ DO KOSZYKA" --- */
.btn-add-to-cart {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important; /* Ciemny tekst dla kontrastu */
box-shadow: 0 4px 20px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart:hover {
box-shadow: 0 8px 30px rgba(250, 204, 21, 0.4) !important;
}
/* --- PARAMETRY (, , ) --- */
.param-item {
background: rgba(250, 204, 21, 0.05) !important;
border: 1px solid rgba(250, 204, 21, 0.15) !important;
}
.param-item:hover {
background: rgba(250, 204, 21, 0.1) !important;
box-shadow: 0 5px 15px rgba(250, 204, 21, 0.2) !important;
}
.param-item i {
color: #facc15 !important;
}
.param-item:hover i {
color: #ffe200 !important;
}
/* --- ODZNAKI (BADGES) --- */
/* Zamiana pomaraĹÂczowej odznaki na nowy zoĹĹty gradient */
.badge-yellow {
background: linear-gradient(
135deg,
#ffe200 0%,
#facc15 100%
) !important;
color: #1f2937 !important;
box-shadow: 0 4px 14px rgba(250, 204, 21, 0.3) !important;
}
/* Aktualizacja animacji "glow" dla odznak */
@keyframes pulseGlow {
0%,
100% {
box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}
50% {
box-shadow: 0 0 40px rgba(250, 204, 21, 0.7);
}
}
/* --- FILTRY I KONTROLKI --- */
/* Tekst "Filtry" i nagĹoĹwki grup */
.filter-sidebar .from-yellow-600.to-orange-600 {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
}
.filter-group-header {
background: linear-gradient(135deg, #eab308, #b45309) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
/* Ikona rozwijania filtra */
.toggle-icon {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3) !important;
}
/* Suwak ceny */
.price-slider::-webkit-slider-thumb,
.range-slider::-webkit-slider-thumb {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
box-shadow: 0 2px 15px rgba(250, 204, 21, 0.5) !important;
}
/* Dropdown sortowania */
.sort-select {
border-color: rgba(250, 204, 21, 0.4) !important;
}
.sort-select:focus {
border-color: #facc15 !important;
box-shadow: 0 0 20px rgba(250, 204, 21, 0.3) !important;
}
/* --- POPUP SZCZEGoÂĹÂoÂW PRODUKTU --- */
/* Przycisk "Dodaj do koszyka" w popupie */
.add-to-cart-modal-btn {
background-color: #facc15 !important;
}
.add-to-cart-modal-btn:hover {
background-color: #ffe200 !important;
}
/* ZakĹadki (Opis, Dane techniczne) */
.product-tab.active,
.product-tab:hover {
color: #facc15 !important;
border-bottom-color: #facc15 !important;
}
/* === ZAKTUALIZOWANE STYLE DLA SEKCJI DASHBOARD (CIEMNY MOTYW) Z !IMPORTANT === */
/* --- OgoĹlne tĹo i tekst w Dashboard --- */
#dashboard,
#orders,
#tracking,
#invoices,
#returns,
#profile {
color: #e2e8f0 !important;
}
#dashboard h3,
#dashboard h4,
#dashboard h5,
#orders h3,
#invoices h3,
#tracking h3,
#returns h3,
#profile h3 {
color: #f8fafc !important;
}
#dashboard p,
#dashboard span,
#dashboard label,
#dashboard dt,
#orders label,
#invoices label,
#tracking label,
#returns label,
#profile label {
color: #cbd5e1 !important;
}
.cart-item {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* --- GĹoĹwny kontener i karty --- */
.card-enhanced {
background: linear-gradient(
135deg,
#2a2e36 0%,
#252931 100%
) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e2e8f0 !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}
.card-enhanced::before {
background: linear-gradient(
90deg,
#282c33,
#282b32,
#3f4550
) !important;
}
/* --- Powitanie i ostatnie logowanie --- */
#dashboard h3.text-gray-800 {
color: #f8fafc !important;
}
#dashboard .text-yellow-600 {
color: #ffe200 !important;
}
#dashboard .text-sm.text-gray-500 {
color: #94a3b8 !important;
}
#dashboard .font-semibold.text-gray-800 {
color: #e2e8f0 !important;
}
#dashboard .bg-gradient-primary.rounded-full {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
}
#dashboard .bg-gradient-primary.rounded-full span {
color: #1f2937 !important;
}
/* --- GoĹrne karty statystyk --- */
#dashboard .bg-white.p-6 {
background: rgba(30, 33, 39) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
#dashboard .bg-white.p-6 h4 {
color: #f8fafc !important;
}
#dashboard .bg-white.p-6 p {
color: #94a3b8 !important;
}
#dashboard .bg-white.p-6 .text-green-600 {
color: #4ade80 !important;
}
#dashboard .bg-white.p-6 .text-blue-600 {
color: #60a5fa !important;
}
#dashboard .bg-white.p-6 .text-yellow-600 {
color: #facc15 !important;
}
#dashboard .bg-white.p-6 .text-red-600 {
color: #f87171 !important;
}
#dashboard .ring-red-500\/50 {
ring-color: rgba(248, 113, 113, 0.5) !important;
}
/* --- Wykres analizy wydatkoĹw --- */
#spending-chart {
background: rgba(15, 23, 42, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#spending-chart .chart-bar-fill {
background-color: #facc15 !important;
}
#spending-chart .chart-bar-fill:hover {
background-color: #ffe200 !important;
}
#spending-chart span {
color: #94a3b8 !important;
}
#spending-chart .font-bold {
color: #facc15 !important;
}
/* --- Lista ostatnich dziaĹaĹÂ --- */
#dashboard .bg-green-50\/50 {
background: rgba(16, 185, 129, 0.1) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
#dashboard .bg-blue-50\/50 {
background: rgba(59, 130, 246, 0.1) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
#dashboard .bg-yellow-50\/50 {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
/* --- Kolumna boczna (Opiekun, Podsumowanie, Akcje) --- */
.bg-gray-50\/50 {
background: rgba(30, 33, 39, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.glow-effect {
box-shadow: 0 0 30px rgba(250, 204, 21, 0.25) !important;
}
.border-yellow-400 {
border-color: #ffe200 !important;
}
.btn-primary {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4) !important;
}
.btn-primary:hover {
box-shadow: 0 12px 35px rgba(250, 204, 21, 0.5) !important;
}
.btn-secondary {
background: linear-gradient(
135deg,
#4b5563 0%,
#374151 100%
) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
color: white !important;
}
#dashboard .bg-gray-100 {
background-color: rgba(55, 65, 81, 0.5) !important;
}
#dashboard .bg-red-100 {
background-color: rgba(239, 68, 68, 0.1) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
}
#dashboard .text-blue-600 {
color: #60a5fa !important;
}
#dashboard .text-green-600 {
color: #4ade80 !important;
}
/* === STYLE DLA TABEL I FORMULARZY W PANELU === */
.modern-table {
background: #252931 !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
.modern-table th {
background: linear-gradient(
135deg,
#333842 0%,
#2a2e36 100%
) !important;
color: #f1f5f9 !important;
}
.modern-table td {
border-bottom: 1px solid #333842 !important;
}
.modern-table tr:hover {
background: linear-gradient(
135deg,
rgba(250, 204, 21, 0.1) 0%,
rgba(245, 158, 11, 0.15) 100%
) !important;
}
#account select,
#account input[type="text"],
#account input[type="number"],
#account input[type="password"],
#account textarea {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #f1f5f9 !important;
border-radius: 0.5rem !important;
}
#account select:focus,
#account input:focus,
#account textarea:focus {
border-color: #facc15 !important;
background-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2) !important;
}
/* === ĹCIEĹĹĽKA ĹLEDZENIA PRZESYĹÂKI (TIMELINE) === */
.timeline-step.completed .timeline-icon-wrapper,
.timeline-step.completed + .timeline-line {
background: linear-gradient(
135deg,
#10b981 0%,
#059669 100%
) !important;
}
.timeline-step.active .timeline-icon-wrapper {
background: linear-gradient(
135deg,
#ffe200 0%,
#facc15 100%
) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
}
.timeline-line {
background: #333842 !important;
}
/* === DODATKOWE POPRAWKI DLA PASKoÂW POSTÄ
ÂPU I ODZNAK === */
.badge-green {
background: linear-gradient(
135deg,
#10b981 0%,
#059669 100%
) !important;
}
.badge-yellow {
background: linear-gradient(
135deg,
#f59e0b 0%,
#d97706 100%
) !important;
}
.badge-red {
background: linear-gradient(
135deg,
#ef4444 0%,
#dc2626 100%
) !important;
}
.badge-blue {
background: linear-gradient(
135deg,
#3b82f6 0%,
#1d4ed8 100%
) !important;
}
/* === SEKCJA FILTRoÂW I PRODUKToÂW === */
.filter-sidebar {
background: linear-gradient(
135deg,
#2a2e36 0%,
#252931 100%
) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.filter-sidebar::before {
display: none !important;
}
.filter-group {
background: rgba(42, 46, 54, 0.5) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.filter-group:hover {
background: rgba(55, 65, 81, 0.7) !important;
}
#products h2,
#products h3 {
color: #f8fafc !important;
}
#products label,
#products span {
color: #cbd5e1 !important;
}
/* === ZAKTUALIZOWANE STYLE ZAKĹÂADEK (CIEMNY MOTYW) Z !IMPORTANT === */
/* --- Styl dla aktywnej zakĹadki (BEZ ZMIAN) --- */
.tab-btn.active {
background: linear-gradient(
135deg,
#ffe200 0%,
#facc15 100%
) !important;
color: #1f2937 !important;
border-color: #facc15 !important;
box-shadow: 0 8px 25px rgba(250, 204, 21, 0.3) !important;
}
/* --- Styl dla nieaktywnych zakĹadek (BEZ ZMIAN) --- */
.tab-btn:not(.active) {
background: rgba(42, 46, 54) !important;
color: #cbd5e1 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
}
.tab-btn:not(.active):hover {
background: rgba(55, 65, 81, 0.7) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/* --- NOWY, ZUNIFIKOWANY STYL DLA WSZYSTKICH IKON --- */
/* Wszystkie ikony otrzymujÄ
teraz neutralne, ciemne tĹo pasujÄ
ce do motywu */
.tab-btn .icon-circle {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
/* Ikona wewnÄ
trz AKTYWNEJ zakĹadki dostaje ciemniejsze tĹo dla lepszego kontrastu z zoĹĹtym przyciskiem */
.tab-btn.active .icon-circle {
background: rgba(0, 0, 0, 0.2) !important;
border-color: rgba(0, 0, 0, 0.3) !important;
}
/* --- OgoĹlne tĹo pod zakĹadkami (BEZ ZMIAN) --- */
{
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* === POPRAWIONE STYLE FILTRoÂW === */
#filters-container {
padding-top: 1.5rem;
space-y: 1rem;
}
.filter-group {
position: relative;
margin: 1rem 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
padding: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(245, 158, 11, 0.1);
backdrop-filter: blur(10px);
}
.filter-group:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}
.filter-group-content {
display: none;
padding-top: 1rem;
animation: fadeIn 0.3s ease-out;
}
.filter-group.open .filter-group-content {
display: block;
}
/* === POPRAWIONE STYLE KART PRODUKToÂW === */
.product-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(245, 158, 11, 0.1);
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(245, 158, 11, 0.3);
border-color: rgba(245, 158, 11, 0.3);
}
.product-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.product-card:hover::before {
transform: scaleX(1);
}
.product-image-container {
position: relative;
overflow: hidden;
border-radius: 15px;
margin: 1rem;
display:none!important;
}
.product-image-container img {
transition: all 0.4s ease;
}
.product-card:hover .product-image-container img {
transform: scale(1.1);
}
.product-item {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === PRZYCISKI Z EFEKTEM WOW === */
.btn-add-to-cart {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
font-weight: 700;
padding: 0.75rem 1.5rem;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
position: relative;
overflow: hidden;
}
.btn-add-to-cart::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.btn-add-to-cart:hover::before {
left: 100%;
}
.btn-add-to-cart:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(245, 158, 11, 0.5);
}
/* === PARAMETRY PRODUKToÂW === */
.param-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: rgba(245, 158, 11, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
border: 1px solid rgba(245, 158, 11, 0.1);
}
.param-item:hover {
background: rgba(245, 158, 11, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2);
}
.param-item i {
color: #f59e0b;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.param-item:hover i {
transform: scale(1.2);
color: #d97706;
}
/* === BADGES Z EFEKTEM WOW === */
.image-badge {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 2px solid rgba(245, 158, 11, 0.3);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
color: #d97706;
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}
.status-badge {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
@
/* === EFEKT WOW - ZAAWANSOWANE STYLE === */
:root {
--primary-gradient: linear-gradient(
135deg,
#f59e0b 0%,
#d97706 50%,
#ca8a04 100%
);
--secondary-gradient: linear-gradient(
135deg,
#fef3c7 0%,
#fde68a 50%,
#fbbf24 100%
);
--glass-effect: rgba(255, 255, 255, 0.25);
--glass-border: rgba(255, 255, 255, 0.18);
--shadow-primary: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
--shadow-hover: 0 15px 35px rgba(245, 158, 11, 0.4);
--neon-glow: 0 0 20px rgba(245, 158, 11, 0.6);
}
/* === GLASSMORPHISM EFFECTS === */
.glass-effect {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.glass-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.6)
);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.glass-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.8s ease;
}
.glass-card:hover::before {
left: 100%;
}
/* === ZAAWANSOWANE ANIMACJE === */
@keyframes floatAnimation {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-5px) rotate(1deg);
}
50% {
transform: translateY(-10px) rotate(0deg);
}
75% {
transform: translateY(-5px) rotate(-1deg);
}
}
@keyframes pulseGlow {
0%,
100% {
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
50% {
box-shadow: 0 0 40px rgba(245, 158, 11, 0.8);
}
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes morphIn {
0% {
transform: scale(0) rotate(180deg);
opacity: 0;
}
50% {
transform: scale(1.1) rotate(90deg);
opacity: 0.8;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* === HEADER Z EFEKTEM WOW === */
.header-gradient {
background: linear-gradient(
135deg,
#ffffff 0%,
#fef3c7 20%,
#fde68a 40%,
#f59e0b 70%,
#d97706 100%
);
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(245, 158, 11, 0.3);
}
.header-gradient::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: shimmerEffect 3s infinite;
}
@keyframes shimmerEffect {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* === FILTRY Z EFEKTEM WOW === */
.filter-sidebar {
background: linear-gradient(
135deg,
#ffffff 0%,
#fef9e7 50%,
#fef3c7 100%
);
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(245, 158, 11, 0.2);
position: relative;
overflow: hidden;
animation: slideInFromLeft 0.8s ease-out;
}
.filter-sidebar::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(245, 158, 11, 0.1) 0%,
transparent 70%
);
animation: rotateGlow 10s linear infinite;
}
@keyframes rotateGlow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.filter-group {
position: relative;
margin: 1rem 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
padding: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(245, 158, 11, 0.1);
}
.filter-group:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}
.filter-group-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0.75rem;
font-weight: 700;
font-size: 1.1rem;
background: linear-gradient(135deg, #f59e0b, #d97706);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.filter-group-header:hover {
transform: scale(1.02);
}
.toggle-icon {
background: var(--primary-gradient);
border-radius: 50%;
padding: 0.5rem;
color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.toggle-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}
.filter-group.open .toggle-icon {
transform: rotate(180deg) scale(1.1);
background: linear-gradient(135deg, #10b981, #059669);
}
/* === NOWE CHECKBOXY Z EFEKTEM WOW === */
.custom-filter-item {
display: flex;
align-items: center;
padding: 0.75rem;
margin: 0.5rem 0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(245, 158, 11, 0.1);
position: relative;
overflow: hidden;
}
.custom-filter-item::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(245, 158, 11, 0.2),
transparent
);
transition: left 0.5s ease;
}
.custom-filter-item:hover::before {
left: 100%;
}
.custom-filter-item:hover {
background: rgba(245, 158, 11, 0.1);
transform: translateX(5px);
box-shadow: 0 5px 20px rgba(245, 158, 11, 0.3);
}
.custom-checkbox {
width: 24px;
height: 24px;
border: 3px solid #d1d5db;
border-radius: 8px;
margin-right: 1rem;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.custom-checkbox::after {
content: "âÂÂ";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: white;
font-weight: bold;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-filter-item input[type="checkbox"]:checked + .custom-checkbox {
background: var(--primary-gradient);
border-color: #d97706;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}
.custom-filter-item
input[type="checkbox"]:checked
+ .custom-checkbox::after {
transform: translate(-50%, -50%) scale(1);
}
/* === SUWAK CENOWY Z NEONEM === */
.price-range-container {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.8),
rgba(254, 243, 199, 0.8)
);
border-radius: 15px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: inset 0 2px 10px rgba(245, 158, 11, 0.1);
}
.price-input {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(245, 158, 11, 0.3);
border-radius: 10px;
padding: 0.75rem;
text-align: center;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.price-input:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
transform: scale(1.05);
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--primary-gradient);
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 2px 15px rgba(245, 158, 11, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.range-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.8);
}
/* === KARTY PRODUKToÂW Z EFEKTEM WOW === */
.product-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(245, 158, 11, 0.1);
position: relative;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(245, 158, 11, 0.3);
border-color: rgba(245, 158, 11, 0.3);
}
.product-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.product-card:hover::before {
transform: scaleX(1);
}
.product-image-container {
position: relative;
overflow: hidden;
border-radius: 15px;
margin: 1rem;
}
.product-image-container img {
transition: all 0.4s ease;
}
.product-card:hover .product-image-container img {
transform: scale(1.1);
}
.image-badge {
position: absolute;
bottom: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 2px solid rgba(245, 158, 11, 0.3);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
color: #d97706;
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}
.status-badge {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
animation: pulseGlow 2s infinite;
}
.param-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: rgba(245, 158, 11, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
border: 1px solid rgba(245, 158, 11, 0.1);
}
.param-item:hover {
background: rgba(245, 158, 11, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2);
}
.param-item i {
color: #f59e0b;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.param-item:hover i {
transform: scale(1.2);
color: #d97706;
}
.btn-add-to-cart {
background: var(--primary-gradient);
color: white;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 15px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
position: relative;
overflow: hidden;
}
.btn-add-to-cart::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.btn-add-to-cart:hover::before {
left: 100%;
}
.btn-add-to-cart:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(245, 158, 11, 0.5);
}
/* === ANIMACJE WEJĹCIA === */
.animate-slide-in-left {
animation: slideInFromLeft 0.8s ease-out;
}
.animate-slide-in-right {
animation: slideInFromRight 0.8s ease-out;
}
/* === CLEAR BUTTON Z EFEKTEM WOW === */
.clear-filters-btn {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
position: relative;
overflow: hidden;
display: none;
}
.clear-filters-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.clear-filters-btn:hover::before {
left: 100%;
}
.clear-filters-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}
/* === SORTING DROPDOWN Z EFEKTEM WOW === */
.sort-select {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(245, 158, 11, 0.3);
border-radius: 15px;
padding: 0.75rem 1rem;
font-weight: 600;
color: #1f2937;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.sort-select:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
transform: scale(1.02);
}
/* === RESPONSYWNOĹÄ
 === */
@media (max-width: 1024px) {
.product-card {
animation-delay: 0.1s;
}
.filter-sidebar {
animation: slideInFromLeft 0.6s ease-out;
}
}
@media (max-width: 768px) {
.glass-card {
border-radius: 15px;
margin: 0.5rem;
}
.product-card:hover {
transform: translateY(-5px) scale(1.01);
}
.filter-group-header {
font-size: 1rem;
}
}
.header-gradient {
background: linear-gradient(
135deg,
#ffffff 0%,
#fefce8 30%,
#fde68a 70%,
#f59e0b 100%
);
position: relative;
overflow: visible !important;
box-shadow: 0 10px 30px rgba(202, 138, 4, 0.15);
}
.header-gradient::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: shimmer-enhanced 6s infinite;
}
.header-gradient::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--main-color),
#fbbf24,
var(--main-color)
);
box-shadow: 0 2px 10px rgba(202, 138, 4, 0.3);
}
@keyframes shimmer-enhanced {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
}
@keyframes pulse-glow {
0%,
100% {
box-shadow: 0 0 20px rgba(202, 138, 4, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(202, 138, 4, 0.6);
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.nav-item {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-item::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--main-color), #fbbf24);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
border-radius: 2px;
}
.nav-item:hover::before,
.nav-item.active::before {
width: 80%;
}
.container {
max-width: 1536px !important;
}
#cta-pro h2 {
font-size: 2.25rem !important;
line-height: 2.5rem !important;
}
#cta-pro .text-xl {
font-size: 1.125rem !important;
line-height: 1.75rem !important;
}
#cta-pro > .absolute.inset-0 > img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
#cta-pro .bg-white\\/98 {
background-color: rgba(15, 23, 42, 0.75) !important;
backdrop-filter: blur(16px) !important;
}
#cta-pro .bg-white\\/98 h3,
#cta-pro .bg-white\\/98 p,
#cta-pro .bg-white\\/98 label {
color: #f1f5f9 !important;
}
#cta-pro .bg-white\\/98 select {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: white !important;
}
#cta-pro .bg-white\\/98 select option {
background-color: #1e293b !important;
color: white !important;
}
#cta-pro .bg-gradient-to-r.from-yellow-50.to-orange-50 {
background: transparent !important;
}
.nav-item:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(202, 138, 4, 0.2);
}
.nav-item.active {
background: rgba(202, 138, 4, 0.1);
border-color: rgba(202, 138, 4, 0.3);
}
.search-container {
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
max-width: 500px;
min-width: 400px;
}
.search-container:focus-within {
transform: scale(1.02);
filter: drop-shadow(0 10px 25px rgba(202, 138, 4, 0.25));
}
.search-input {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
width: 100% !important;
font-size: 16px;
font-weight: 500;
padding-left: 3.5rem !important;
padding-right: 3.5rem !important;
}
.search-input:focus {
background: white !important;
border-color: var(--main-color) !important;
box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.15),
0 12px 40px rgba(0, 0, 0, 0.15) !important;
}
.search-input::placeholder {
color: #6b7280;
font-weight: 500;
}
.user-avatar {
position: relative;
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
border: 3px solid rgba(255, 255, 255, 0.3);
}
.user-avatar:hover {
transform: scale(1.1) rotate(3deg);
box-shadow: 0 12px 35px rgba(202, 138, 4, 0.4);
border-color: rgba(202, 138, 4, 0.5);
}
.dropdown-enhanced {
backdrop-filter: blur(25px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
animation: slideInDown 0.3s ease-out;
position: absolute !important;
z-index: 99999 !important;
border-radius: 16px;
overflow: visible !important;
top: calc(100% + 8px) !important;
right: 0 !important;
margin: 0 !important;
display: none;
margin-top: 20px !important;
}
.dropdown-enhanced.show {
display: block !important;
}
.icon-enhanced {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: visible !important;
}
.icon-enhanced:hover {
transform: translateY(-4px) scale(1.1);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(202, 138, 4, 0.3);
}
.notification-badge {
animation: bounceIn 0.6s ease-out;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
border: 2px solid white;
z-index: 100000 !important;
position: absolute !important;
top: -8px !important;
right: -8px !important;
min-width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
pointer-events: none !important;
}
.user-info .user-name {
font-weight: 700;
font-size: 14px;
color: #374151;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.user-info .user-company {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
.btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: none;
padding: 14px 28px;
border-radius: 14px;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
font-size: 15px;
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}
.btn-secondary {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(107, 114, 128, 0.3);
}
.hover-lift {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024px) {
.header-top-row {
padding: 0 1rem;
}
.search-container {
max-width: 400px;
}
.user-info {
display: none !important;
}
}
@media (max-width: 768px) {
.search-container {
max-width: 300px;
}
.dropdown-enhanced {
width: 20rem !important;
max-width: 90vw !important;
}
.nav-item {
padding: 10px 16px;
font-size: 14px;
}
.tab-btn {
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.modern-table {
font-size: 0.875rem;
}
.card-enhanced {
padding: 1.5rem;
}
#cta-pro {
padding: 3rem 0;
margin-top: 2rem;
}
#cta-pro h2 {
font-size: 2.5rem;
}
#cta-pro .container {
padding: 0 1rem;
}
#cta-pro .grid {
gap: 2rem;
}
.filter-btn-enhanced {
font-size: 0.875rem;
padding: 0.75rem 1rem;
}
.product-grid {
padding: 0 1rem;
}
}
@media (max-width: 640px) {
.dropdown-enhanced {
width: 18rem !important;
}
.search-container {
max-width: 250px;
}
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(
135deg,
var(--main-color),
var(--main-color-dark)
);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--main-color-dark), #92400e);
}
.transition-enhanced {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-top-row {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
padding: 0 2rem;
overflow: visible !important;
}
.header-left-section {
display: flex;
align-items: center;
gap: 2rem;
flex: 1;
}
.header-nav-section {
display: flex;
align-items: center;
gap: 1rem;
overflow: visible !important;
}
.header-search-section {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
max-width: 500px;
}
.focus-enhanced:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.2);
}
#search-results {
position: absolute !important;
top: calc(100% + 0.5rem) !important;
left: 0 !important;
right: 0 !important;
margin-top: 0 !important;
}
.dropdown-container {
position: relative !important;
overflow: visible !important;
}
.bg-gradient-primary {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}
.bg-gradient-secondary {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.bg-gradient-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.bg-gradient-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.bg-gradient-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.bg-gradient-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.animate-slideIn {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.modern-table {
border-collapse: separate;
border-spacing: 0;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
background: white;
}
.modern-table th {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.1em;
padding: 1.25rem 1rem;
color: #374151;
}
.modern-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid #f1f5f9;
}
.modern-table tr:hover {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
transform: scale(1.01);
transition: all 0.2s ease;
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.25rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
position: relative;
overflow: hidden;
}
.badge-green {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.badge-yellow {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.badge-red {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.badge-blue {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}
.card-enhanced {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.card-enhanced::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #fbbf24, #f59e0b, #3b82f6);
}
.tab-btn {
position: relative;
padding: 1rem 1.5rem;
border-radius: 1rem;
transition: all 0.3s ease;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-weight: 600;
border: 2px solid transparent;
}
.tab-btn.active {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: white;
box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
border-color: #f59e0b;
}
.tab-btn:not(.active) {
background: rgba(251, 191, 36, 0.1);
color: #92400e;
border-color: rgba(251, 191, 36, 0.2);
}
.tab-btn:not(.active):hover {
background: rgba(251, 191, 36, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}
.icon-circle {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.timeline-step {
flex: 1;
position: relative;
}
.timeline-step.completed .timeline-icon-wrapper {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-color: #10b981;
color: white;
}
.timeline-step.active .timeline-icon-wrapper {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border-color: #fbbf24;
color: white;
animation: pulse 2s infinite;
}
.timeline-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%);
margin: 0 1rem;
position: relative;
top: 1.5rem;
}
.timeline-step.completed + .timeline-line {
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.glow-effect {
box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}
.notification-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.slider::-webkit-slider-thumb {
appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
cursor: pointer;
box-shadow: 0 4px 8px rgba(251, 191, 36, 0.3);
transition: all 0.3s ease;
}
.slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 12px rgba(251, 191, 36, 0.5);
}
.slider::-moz-range-thumb {
height: 24px;
width: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
cursor: pointer;
border: none;
box-shadow: 0 4px 8px rgba(251, 191, 36, 0.3);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.filter-btn-enhanced {
position: relative;
overflow: hidden;
}
.filter-btn-enhanced::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s;
}
.filter-btn-enhanced:hover::before {
left: 100%;
}
.price-slider::-webkit-slider-thumb {
appearance: none;
height: 28px;
width: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
cursor: pointer;
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
transition: all 0.3s ease;
}
.price-slider::-webkit-slider-thumb:hover {
transform: scale(1.3);
box-shadow: 0 8px 25px rgba(251, 191, 36, 0.6);
}
.price-slider::-webkit-slider-track {
height: 12px;
cursor: pointer;
background: linear-gradient(90deg, #e5e7eb, #d1d5db);
border-radius: 6px;
}
.loading-dots {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loading-dots div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fbbf24;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-dots div:nth-child(1) {
left: 8px;
animation: loading1 0.6s infinite;
}
.loading-dots div:nth-child(2) {
left: 8px;
animation: loading2 0.6s infinite;
}
.loading-dots div:nth-child(3) {
left: 32px;
animation: loading2 0.6s infinite;
}
.loading-dots div:nth-child(4) {
left: 56px;
animation: loading3 0.6s infinite;
}
@keyframes loading1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes loading3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes loading2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
@media (max-width: 768px) {
.product-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.6s ease-out;
}
.product-item {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.compare-icon {
transition: all 0.3s ease;
}
.compare-icon:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.9);
}
.compare-icon.selected {
background-color: #fbbf24;
color: white;
}
#compare-bar {
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
visibility: hidden;
}
#compare-bar.visible {
transform: translateY(0);
visibility: visible;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* New Styles for Filters */
.filter-accordion summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: #374151;
transition: color 0.2s ease;
}
.filter-accordion summary:hover {
color: var(--main-color-dark);
}
.filter-accordion summary::-webkit-details-marker {
display: none;
}
.filter-accordion summary .icon-plus-minus {
transition: transform 0.2s ease-in-out;
}
.filter-accordion[open] summary .icon-plus-minus {
transform: rotate(45deg);
}
.filter-accordion .filter-content {
padding-bottom: 1rem;
animation: fadeIn 0.3s ease-out;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox span {
display: flex;
align-items: center;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
font-weight: 500;
color: #4b5563;
}
.custom-checkbox span:before {
content: "";
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 0.25rem;
margin-right: 0.75rem;
transition: all 0.2s ease;
flex-shrink: 0;
}
.custom-checkbox input:checked + span {
color: var(--main-color-dark);
font-weight: 600;
}
.custom-checkbox input:checked + span:before {
background-color: var(--main-color);
border-color: var(--main-color-dark);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
.custom-checkbox:hover span {
background-color: #f3f4f6;
}
.custom-checkbox input:checked:hover + span {
background-color: var(--main-color-light);
}
.filter-slider-container {
padding: 0.5rem 0;
}
.filter-slider-container .range-labels {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 0.5rem;
}
.filter-slider-container .range-value {
font-weight: 600;
color: var(--main-color-dark);
}
/* Animated Chart */
#spending-chart .chart-bar-fill {
height: 0;
transition: height 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Enhanced Spending Analysis Styles */
.spending-analysis-container {
margin-bottom: 2rem;
}
.analysis-controls {
background: linear-gradient(135deg, #2a2e36 0%, #1e2228 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.chart-main-container {
position: relative;
background: linear-gradient(135deg, #2a2e36 0%, #1e2228 100%);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.stat-card {
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.chart-area {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
}
#spending-chart-enhanced {
background: linear-gradient(135deg, #2a2e36 0%, #1e2228 100%);
border: 1px solid #20242a;
border-radius: 0.5rem;
position: relative;
}
/* Enhanced Chart Bars */
.chart-bar-enhanced {
position: relative;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
border-radius: 4px 4px 0 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}
.chart-bar-enhanced:hover {
background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
transform: scaleY(1.05);
box-shadow: 0 4px 16px rgba(251, 191, 36, 0.5);
}
.chart-bar-enhanced::before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
border-radius: 4px 4px 0 0;
}
/* Chart Data Points */
.chart-data-point {
position: absolute;
width: 8px;
height: 8px;
background: #3b82f6;
border: 2px solid #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
cursor: pointer;
}
.chart-data-point:hover {
width: 12px;
height: 12px;
background: #1d4ed8;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* Tooltip Styles */
.chart-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
pointer-events: none;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.chart-tooltip.show {
opacity: 1;
transform: translateY(0);
}
.chart-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}
/* Category Chart Styles */
.category-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background: linear-gradient(135deg, #2a2e36 0%, #1e2228 100%);
border-radius: 0.5rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.category-item:hover {
background: #e2e8f0;
transform: translateX(4px);
}
.category-color {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
margin-right: 0.75rem;
}
/* Insights Cards */
.insight-card {
padding: 1rem;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 4px solid #3b82f6;
border-radius: 0.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.insight-card.positive {
background: linear-gradient(135deg, #25292f 0%, #1e2127 100%);
border-left-color: #10b981;
}
.insight-card.negative {
background: linear-gradient(135deg, #25292f 0%, #1e2127 100%);
border-left-color: #ef4444;
}
.insight-card.warning {
background: linear-gradient(135deg, #25292f 0%, #1e2127 100%);
border-left-color: #f59e0b;
}
/* Comparison Cards */
.comparison-card {
padding: 1.5rem;
background: linear-gradient(135deg, #2a2e36 0%, #1e2228 100%);
border-radius: 0.75rem;
border: 1px solid #e2e8f038;
}
.comparison-value {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #e2e8f0;
}
.comparison-value:last-child {
border-bottom: none;
}
.trend-indicator {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
}
.trend-up {
background: #33814e;
color: #166534;
}
.trend-down {
background: #ac2222;
color: #991b1b;
}
.trend-neutral {
background: #f1f5f9;
color: #475569;
}
/* Animation for chart loading */
@keyframes chartBarGrow {
from {
height: 0;
opacity: 0;
}
to {
height: var(--bar-height);
opacity: 1;
}
}
.chart-bar-animated {
animation: chartBarGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.analysis-controls .grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.chart-header .grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.analysis-details .grid {
grid-template-columns: 1fr;
}
.comparative-analysis .grid {
grid-template-columns: 1fr;
}
}
/* Kontener wyboru iloĹci */
.quantity-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
background: #f8fafc !important;
border-radius: 12px !important;
padding: 8px !important;
border: 2px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.quantity-container:focus-within {
border-color: #facc15 !important;
background: #fffbeb !important;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1) !important;
}
/* Przyciski iloĹci */
.quantity-btn-grid {
background: #ffffff !important;
border: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
color: #64748b !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.quantity-btn-grid:hover {
background: #facc15 !important;
color: #ffffff !important;
transform: scale(1.05) !important;
box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
}
.quantity-btn-grid:active {
transform: scale(0.95) !important;
}
.quantity-btn-grid svg {
width: 18px !important;
height: 18px !important;
}
/* Pole iloĹci */
.quantity-input {
width: 60px !important;
height: 40px !important;
border: none !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #1e293b !important;
background: transparent !important;
margin: 0 8px !important;
border-radius: 6px !important;
outline: none !important;
}
.quantity-input:focus {
background: #ffffff !important;
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2) !important;
}
/* UsuniÄcie strzaĹek w input number */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.quantity-input[type="number"] {
-moz-appearance: textfield !important;
}
/* Przycisk dodaj do koszyka */
.btn-add-to-cart {
width: 100% !important;
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
color: #1e293b !important;
border: none !important;
padding: 16px 20px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
position: relative !important;
overflow: hidden !important;
}
.btn-add-to-cart:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(250, 204, 21, 0.4) !important;
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.btn-add-to-cart:active {
transform: translateY(0) !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart svg {
width: 20px !important;
height: 20px !important;
transition: transform 0.2s ease !important;
}
.btn-add-to-cart:hover svg {
transform: scale(1.1) !important;
}
/* Efekt ripple dla przycisku */
.btn-add-to-cart::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 0 !important;
height: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.3) !important;
transform: translate(-50%, -50%) !important;
transition: width 0.6s, height 0.6s !important;
}
.btn-add-to-cart:active::before {
width: 300px !important;
height: 300px !important;
}
/* ResponsywnoĹÄ */
@media (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(
auto-fill,
minmax(280px, 1fr)
) !important;
gap: 16px !important;
padding: 16px !important;
}
.product-content {
padding: 20px !important;
}
.product-price {
font-size: 20px !important;
}
.quantity-btn-grid {
width: 36px !important;
height: 36px !important;
}
.quantity-input {
width: 50px !important;
height: 36px !important;
font-size: 14px !important;
}
}
@media (max-width: 480px) {
.product-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 12px !important;
}
.product-image {
height: 200px !important;
}
.quantity-container {
padding: 6px !important;
}
}
/* Animacje dla lepszego UX */
@keyframes fadeInUp {
from {
opacity: 0 !important;
transform: translateY(20px) !important;
}
to {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
.product-card {
animation: fadeInUp 0.6s ease forwards !important;
}
.product-card:nth-child(1) {
animation-delay: 0.1s !important;
}
.product-card:nth-child(2) {
animation-delay: 0.2s !important;
}
.product-card:nth-child(3) {
animation-delay: 0.3s !important;
}
.product-card:nth-child(4) {
animation-delay: 0.4s !important;
}
.product-card:nth-child(5) {
animation-delay: 0.5s !important;
}
.product-card:nth-child(6) {
animation-delay: 0.6s !important;
}
/* Stany Ĺadowania */
.product-card.loading {
background: linear-gradient(
90deg,
#f1f5f9 25%,
#e2e8f0 50%,
#f1f5f9 75%
) !important;
background-size: 200% 100% !important;
animation: loading 1.5s infinite !important;
}
@keyframes loading {
0% {
background-position: 200% 0 !important;
}
100% {
background-position: -200% 0 !important;
}
}
/* Kontener sortowania */
.sort-wrapper {
background: linear-gradient(135deg, #2a2e36, #25282e) !important;
border-radius: 12px;
padding: 0.5rem 1rem;
margin-right: auto;
border: 1px solid #3f424a;
}
.sort-wrapper label {
color: #ffffff;
font-weight: 600;
margin-right: 0.5rem;
}
.sort-wrapper .sort-select {
background: transparent !important;
color: #ffffff !important;
border: none !important;
box-shadow: none !important;
font-weight: 500;
}
.sort-wrapper .sort-select:focus {
outline: none;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
}
.sort-wrapper .sort-select option {
background: #23385c;
color: #ffffff;
}
/* Opcjonalnie: delikatne wyĹrodkowanie licznika */
.found-count {
background: none;
}
/* === POPRAWIONE STYLE KART PRODUKTÓW Z !IMPORTANT === */
/* === POPRAWIONE STYLE KART PRODUKTÓW Z !IMPORTANT === */
/* Kontener grid produktów */
.product-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 1rem !important;
padding: 0 !important;
}
/* Główna karta produktu - ZMODYFIKOWANA */
.product-card {
background: linear-gradient(
135deg,
#2a2e36 0%,
#252931 100%
) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
max-width: 100% !important;
margin: 0 auto !important;
display: flex !important; /* DODANE: Włącza flexbox dla karty */
flex-direction: column !important; /* DODANE: Ustawia pionowy układ flexbox */
}
.product-card:hover {
transform: translateY(-8px) scale(1.02) !important;
border-color: rgba(250, 204, 21, 0.4) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(250, 204, 21, 0.2) !important;
}
.product-card::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #ffe200, #facc15) !important;
transform: scaleX(0) !important;
transition: transform 0.4s ease !important;
}
.product-card:hover::before {
transform: scaleX(1) !important;
}
/* Kontener obrazka */
.product-image-container {
position: relative !important;
overflow: hidden !important;
border-radius: 0 !important;
margin: 0 !important;
height: 220px !important;
background: rgba(0, 0, 0, 0.2) !important;
flex-shrink: 0; /* Zapobiega kurczeniu się obrazka */
}
.product-image-container img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
}
.product-card:hover .product-image-container img {
transform: scale(1.1) !important;
}
/* Odznaki na obrazku */
.image-badge {
position: absolute !important;
background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important;
width: 35px !important;
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: bold !important;
font-size: 11px !important;
color: #e2e8f0 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
/* Zawartość karty - ZMODYFIKOWANA */
.product-card .p-6 {
padding: 1.5rem !important;
color: #e2e8f0 !important;
flex-grow: 1 !important; /* DODANE: Pozwala tej sekcji rosnąć i wypełniać przestrzeń */
display: flex !important; /* DODANE: Włącza flexbox dla zawartości */
flex-direction: column !important; /* DODANE: Ustawia pionowy układ */
}
/* Nagłówek produktu */
.product-card h4 {
color: #f8fafc !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
margin-bottom: 2rem !important;
line-height: 1.4 !important;
padding-right: 0px;
max-width: 200px;
margin: 0 auto;
}
/* Parametry produktu */
.product-card .grid.grid-cols-3 {
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
.param-item {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 1rem 0.5rem !important;
text-align: center !important;
transition: all 0.3s ease !important;
}
.param-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}
.param-item i {
color: #facc15 !important;
margin-bottom: 0.5rem !important;
display: block !important;
}
.param-item .font-bold {
color: #f8fafc !important;
font-size: 0.875rem !important;
display: block !important;
margin: 0.25rem 0 !important;
}
.param-item .text-xs {
color: #94a3b8 !important;
font-size: 0.75rem !important;
}
/* Cena produktu */
.product-card .text-3xl {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-size: 1.3rem !important;
font-weight: 900 !important;
margin-bottom: 1rem !important;
text-align: center !important;
}
/* DODANA NOWA REGUŁA: Wypycha sekcję ilości i przycisku na dół */
.product-card .quantity-cart-container {
margin-top: 15px!important;
}
/* Kontener wyboru ilości (istniejące style pozostają bez zmian) */
.product-card .flex.items-center.space-x-3 {
justify-content: center !important;
margin-bottom: 1rem !important;
}
.product-card .flex.items-center.border {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 10px !important;
overflow: hidden !important;
}
.quantity-btn-grid {
background: transparent !important;
color: #e2e8f0 !important;
border: none !important;
padding: 0.75rem !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.quantity-btn-grid:hover {
background: rgba(250, 204, 21, 0.2) !important;
color: #ffe200 !important;
}
.quantity-btn-grid svg {
width: 16px !important;
height: 16px !important;
}
.product-card input[type="number"] {
background: transparent !important;
color: #f8fafc !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
text-align: center !important;
font-weight: 600 !important;
width: 30px !important;
padding: 0.75rem 0.5rem !important;
}
.product-card input[type="number"]:focus {
outline: none !important;
background: rgba(255, 255, 255, 0.05) !important;
}
/* Przycisk dodaj do koszyka */
.btn-add-to-cart {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
border: none !important;
padding: 1rem 1.5rem !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 4px 20px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 30px rgba(250, 204, 21, 0.5) !important;
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
}
.btn-add-to-cart:active {
transform: translateY(0) !important;
}
.btn-add-to-cart svg {
width: 18px !important;
height: 18px !important;
}
/* Responsywność */
@media (max-width: 1200px) {
.product-grid {
grid-template-columns: repeat(
auto-fill,
minmax(280px, 1fr)
) !important;
gap: 1rem !important;
}
.product-card {
max-width: 100% !important;
}
}
@media (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
) !important;
gap: 1rem !important;
padding: 0 0.5rem !important;
}
.product-image-container {
height: 180px !important;
}
.product-card .p-6 {
padding: 1rem !important;
}
.product-card .text-3xl {
font-size: 1.5rem !important;
}
}
@media (max-width: 480px) {
.product-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.product-card {
max-width: 100% !important;
}
}
/* Animacje wejścia */
@keyframes fadeInUp {
from {
opacity: 0 !important;
transform: translateY(30px) !important;
}
to {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
.product-card {
animation: fadeInUp 0.6s ease forwards !important;
}
.product-card:nth-child(1) {
animation-delay: 0.1s !important;
}
.product-card:nth-child(2) {
animation-delay: 0.2s !important;
}
.product-card:nth-child(3) {
animation-delay: 0.3s !important;
}
.product-card:nth-child(4) {
animation-delay: 0.4s !important;
}
.product-card:nth-child(5) {
animation-delay: 0.5s !important;
}
.product-card:nth-child(6) {
animation-delay: 0.6s !important;
}
/* Horizontal Filters Styling */
.horizontal-filters {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid rgba(203, 213, 225, 0.3);
backdrop-filter: blur(10px);
}
.horizontal-filters input[type="checkbox"],
.horizontal-filters input[type="radio"] {
width: 16px;
height: 16px;
accent-color: #facc15;
}
.horizontal-filters input[type="range"] {
accent-color: #facc15;
}
.horizontal-filters input[type="range"]::-webkit-slider-thumb {
background: linear-gradient(135deg, #facc15, #f59e0b);
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
}
.horizontal-filters input[type="range"]::-webkit-slider-track {
background: linear-gradient(90deg, #e5e7eb, #d1d5db);
border-radius: 4px;
height: 6px;
}
.horizontal-filters input[type="range"]::-moz-range-thumb {
background: linear-gradient(135deg, #facc15, #f59e0b);
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
cursor: pointer;
}
/* Advanced filters transition */
#advanced-filters-content {
transition: all 0.3s ease;
}
#advanced-toggle-icon {
transition: transform 0.3s ease;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.horizontal-filters .flex-wrap {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.horizontal-filters .flex-wrap > div {
width: 100%;
}
#advanced-filters-content {
grid-template-columns: 1fr;
}
}
/* === STYLE FILTRÓW W STYLU SORTOWANIA === */
/* Główny kontener filtrów - ciemny motyw jak sortowanie */
.bg-gradient-to-r.from-gray-50.to-gray-100 {
background: linear-gradient(135deg, #2a2e36, #25282e) !important;
border: 1px solid #3f424a !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
/* Etykiety filtrów */
.bg-gradient-to-r.from-gray-50.to-gray-100 label {
color: #ffffff !important;
font-weight: 600 !important;
}
/* Checkboxy i radio buttony */
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="checkbox"],
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="radio"] {
accent-color: #facc15 !important;
transform: scale(1.1) !important;
}
/* Tekst przy checkboxach i radio */
.bg-gradient-to-r.from-gray-50.to-gray-100 span {
color: #e2e8f0 !important;
font-weight: 500 !important;
}
/* Separatory */
.bg-gradient-to-r.from-gray-50.to-gray-100 .h-8.w-px.bg-gray-300 {
background: #4a5568 !important;
}
/* Suwaki */
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="range"] {
accent-color: #facc15 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
input[type="range"]::-webkit-slider-thumb {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
border: 2px solid white !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3) !important;
cursor: pointer !important;
width: 20px !important;
height: 20px !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
input[type="range"]::-webkit-slider-track {
background: linear-gradient(90deg, #374151, #4b5563) !important;
border-radius: 4px !important;
height: 6px !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
input[type="range"]::-moz-range-thumb {
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
border: 2px solid white !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3) !important;
cursor: pointer !important;
width: 20px !important;
height: 20px !important;
}
/* Przycisk "Wyczyść" */
.bg-gradient-to-r.from-gray-50.to-gray-100 #clear-filters-btn {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
transition: all 0.3s ease !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #clear-filters-btn:hover {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
}
/* Przycisk filtrów zaawansowanych */
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-toggle {
color: #cbd5e1 !important;
transition: color 0.3s ease !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
#advanced-filters-toggle:hover {
color: #facc15 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-toggle i {
color: #facc15 !important;
}
/* Linia oddzielająca filtry zaawansowane */
.bg-gradient-to-r.from-gray-50.to-gray-100 .border-t.border-gray-200 {
border-color: #4a5568 !important;
}
/* Sekcja filtrów zaawansowanych */
.bg-gradient-to-r.from-gray-50.to-gray-100 #advanced-filters-content h4 {
color: #f8fafc !important;
font-weight: 600 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
#advanced-filters-content
.text-xs.text-gray-600 {
color: #94a3b8 !important;
}
.bg-gradient-to-r.from-gray-50.to-gray-100
#advanced-filters-content
.text-xs.text-gray-500 {
color: #64748b !important;
}
/* Wartości suwaków w filtrach zaawansowanych */
.bg-gradient-to-r.from-gray-50.to-gray-100 #length-range-value,
.bg-gradient-to-r.from-gray-50.to-gray-100 #height-range-value,
.bg-gradient-to-r.from-gray-50.to-gray-100 #weight-range-value {
color: #facc15 !important;
font-weight: 600 !important;
}
/* Hover effects dla opcji filtrów */
.bg-gradient-to-r.from-gray-50.to-gray-100 label:hover {
background: rgba(250, 204, 21, 0.1) !important;
border-radius: 4px !important;
transition: background 0.2s ease !important;
}
/* Focus states */
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="checkbox"]:focus,
.bg-gradient-to-r.from-gray-50.to-gray-100 input[type="radio"]:focus {
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3) !important;
}
/* === ZINTEGROWANY KONTENER ILOŚCI I PRZYCISKU DODAJ DO KOSZYKA === */
.add-to-cart-section {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
margin-top: 1rem !important;
}
.quantity-cart-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-bottom: 8px !important;
}
.quantity-label {
font-size: 14px !important;
font-weight: 600 !important;
color: #e2e8f0 !important;
white-space: nowrap !important;
}
.quantity-controls {
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.quantity-btn {
background: transparent !important;
color: #e2e8f0 !important;
border: none !important;
padding: 8px 10px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
font-size: 16px !important;
line-height: 1 !important;
}
.quantity-btn:hover {
background: rgba(250, 204, 21, 0.2) !important;
color: #ffe200 !important;
}
.quantity-btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.quantity-input {
background: transparent !important;
color: #f8fafc !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
text-align: center !important;
font-weight: 600 !important;
width: 50px !important;
padding: 8px 4px !important;
font-size: 14px !important;
}
.quantity-input:focus {
outline: none !important;
background: rgba(255, 255, 255, 0.05) !important;
}
/* Usuń strzałki w input number */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.quantity-input[type="number"] {
-moz-appearance: textfield !important;
}
/* Przycisk dodaj do koszyka - rozszerzony */
.btn-add-to-cart-enhanced {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
border: none !important;
padding: 12px 20px !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3) !important;
position: relative !important;
overflow: hidden !important;
}
.btn-add-to-cart-enhanced:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4) !important;
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
}
.btn-add-to-cart-enhanced:active {
transform: translateY(0) !important;
box-shadow: 0 3px 12px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart-enhanced:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
}
.btn-add-to-cart-enhanced svg {
width: 16px !important;
height: 16px !important;
transition: transform 0.2s ease !important;
}
.btn-add-to-cart-enhanced:hover svg {
transform: scale(1.1) !important;
}
/* Stock info display */
.stock-info {
font-size: 12px !important;
color: #94a3b8 !important;
text-align: center !important;
margin-top: 4px !important;
}
.stock-info.low-stock {
color: #f59e0b !important;
font-weight: 600 !important;
}
.stock-info.out-of-stock {
color: #ef4444 !important;
font-weight: 600 !important;
}
/* === ZMNIEJSZONE PARAMETRY PRODUKTÓW === */
.param-item-small {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 0.5rem 0.25rem !important;
text-align: center !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
}
.param-item-small:hover {
background: rgba(255, 255, 255, 0.1) !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}
.param-item-small i {
color: #facc15 !important;
width: 14px !important;
height: 14px !important;
display: block !important;
}
.param-item-small .font-bold {
color: #f8fafc !important;
font-size: 0.75rem !important;
line-height: 1.2 !important;
margin: 0 !important;
}
/* Aktualizacja ceny - większy nacisk wizualny */
.product-card .text-3xl {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
margin-bottom: 0 !important;
text-align: center !important;
padding: 0.5rem 0 !important;
}
/* Responsywność dla zmniejszonych elementów */
@media (max-width: 768px) {
.param-item-small {
padding: 0.375rem 0.125rem !important;
gap: 1px !important;
}
.param-item-small i {
width: 12px !important;
height: 12px !important;
}
.param-item-small .font-bold {
font-size: 0.625rem !important;
}
}
@media (max-width: 480px) {
.product-card .text-3xl {
font-size: 1.25rem !important;
}
.param-item-small {
padding: 0.25rem 0.125rem !important;
}
}
/* === ULEPSZONA SEKCJA ILOŚCI I PRZYCISKU === */
.quantity-cart-container {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
padding: 10px !important;
margin-top: 1rem !important;
transition: all 0.3s ease !important;
min-height: 44px !important;
}
.quantity-cart-container:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(250, 204, 21, 0.3) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Sekcja kontrolek ilości */
.quantity-section {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
.quantity-label-inline {
font-size: 12px !important;
font-weight: 600 !important;
color: #cbd5e1 !important;
white-space: nowrap !important;
min-width: 28px !important;
}
.quantity-controls-inline {
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
overflow: hidden !important;
height: 32px !important;
}
.quantity-btn-inline {
background: transparent !important;
color: #e2e8f0 !important;
border: none !important;
padding: 0 8px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
font-size: 14px !important;
line-height: 1 !important;
height: 100% !important;
min-width: 28px !important;
}
.quantity-btn-inline:hover {
background: rgba(250, 204, 21, 0.2) !important;
color: #ffe200 !important;
}
.quantity-btn-inline:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.quantity-input-inline {
background: transparent !important;
color: #f8fafc !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
text-align: center !important;
font-weight: 600 !important;
width: 40px !important;
padding: 0 4px !important;
font-size: 13px !important;
height: 100% !important;
outline: none !important;
}
.quantity-input-inline:focus {
background: rgba(255, 255, 255, 0.05) !important;
box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.3) !important;
}
/* Ukryj strzałki w input number */
.quantity-input-inline::-webkit-outer-spin-button,
.quantity-input-inline::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.quantity-input-inline[type="number"] {
-moz-appearance: textfield !important;
}
/* Przycisk dodaj do koszyka - zoptymalizowany */
.btn-add-to-cart-inline {
background: linear-gradient(135deg, #ffe200, #facc15) !important;
color: #1f2937 !important;
border: none !important;
padding: 0 16px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 13px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.3) !important;
white-space: nowrap !important;
height: 32px !important;
min-height: 32px !important;
}
.btn-add-to-cart-inline:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4) !important;
background: linear-gradient(135deg, #facc15, #f59e0b) !important;
}
.btn-add-to-cart-inline:active {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(250, 204, 21, 0.3) !important;
}
.btn-add-to-cart-inline svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
/* Responsywność */
@media (max-width: 768px) {
.quantity-cart-container {
padding: 8px !important;
gap: 8px !important;
min-height: 40px !important;
}
.quantity-section {
min-width: 85px !important;
}
.quantity-label-inline {
font-size: 11px !important;
min-width: 24px !important;
}
.quantity-controls-inline,
.btn-add-to-cart-inline {
height: 28px !important;
}
.quantity-input-inline {
width: 35px !important;
font-size: 12px !important;
}
.quantity-btn-inline {
min-width: 24px !important;
padding: 0 6px !important;
}
.btn-add-to-cart-inline {
font-size: 12px !important;
padding: 0 12px !important;
}
.btn-add-to-cart-inline svg {
width: 12px !important;
height: 12px !important;
}
}
@media (max-width: 480px) {
.quantity-cart-container {
flex-direction: column !important;
gap: 8px !important;
align-items: stretch !important;
}
.quantity-section {
justify-content: center !important;
min-width: auto !important;
}
.btn-add-to-cart-inline {
width: 100% !important;
flex: none !important;
}
}
/* Poprawki dla lepszego kontrastu i czytelności */
.quantity-cart-container .quantity-label-inline {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.quantity-controls-inline {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.btn-add-to-cart-inline {
text-shadow: none !important;
font-weight: 600 !important;
}
/* Animacje ładowania */
.quantity-cart-container.loading {
opacity: 0.7 !important;
pointer-events: none !important;
}
.quantity-cart-container.loading .btn-add-to-cart-inline {
background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
}
/* Stany błędu */
.quantity-cart-container.error {
border-color: rgba(239, 68, 68, 0.5) !important;
background: rgba(239, 68, 68, 0.1) !important;
}
.quantity-cart-container.error .quantity-input-inline {
color: #fca5a5 !important;
}
/* Fokus accessibility */
.quantity-cart-container:focus-within {
outline: 2px solid rgba(250, 204, 21, 0.5) !important;
outline-offset: 2px !important;
}
.tab-content {
margin-bottom: 200px;
}
/* Style for category radio buttons */
/* Ukryj kółka radio buttonów przy kategoriach */
.filter-radio {
appearance: none !important;
-webkit-appearance: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
opacity: 0 !important;
}
.filter-radio:focus {
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3) !important;
outline: none;
}
.filter-radio + i,
.filter-radio + i + span {
color: #94a3b8 !important;
transition: color 0.2s ease;
}
.filter-radio:checked + i {
color: #facc15 !important;
}
.filter-radio:checked + i + span {
color: #facc15 !important;
font-weight: 600 !important;
}
#category-radios label:hover i,
#category-radios label:hover span {
color: #fde047 !important;
}
#category-radios label:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Wklej ten fragment wewnątrz tagu
