:root { /* Цветовая палитра */ --bg-primary: #1b1e27; --bg-secondary: #252a33; --accent-light: #66e0c1; --accent-dark: #4ecca3; --text-light: #f0f0f0; --text-muted: #b0b0b0; --card-border: rgba(255, 255, 255, 0.08); --shadow-light: rgba(0, 0, 0, 0.15); }

.transportCard { border-radius: 24px; overflow: hidden; max-width: 360px; background: linear-gradient(145deg, var(--bg-primary), #2a2e38); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); height: 100%; border: 1px solid var(--card-border); position: relative; backdrop-filter: blur(8px); max-height: 500px; }

.transportCard:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15); }

.transportCard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08), var(--accent-light), transparent ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }

.transportCard:hover::before { opacity: 1; }

.transportImage { width: 100%; height: 180px; object-fit: cover; filter: brightness(0.95) contrast(1.05); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

.transportCard:hover .transportImage { filter: brightness(1.1) contrast(1.1); transform: scale(1.05); }

.headerCard { background: linear-gradient(90deg, var(--bg-secondary) 0%, #2e333f 100%); text-align: center; padding: 14px; font-size: 16px; color: var(--text-light); letter-spacing: 0.8px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; transition: background 0.4s ease; }

.headerCard::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-light), transparent ); transform: translateX(-100%); transition: transform 0.6s ease; }

.transportCard:hover .headerCard::after { transform: translateX(100%); }

.price { text-align: right; padding: 14px 18px; background: linear-gradient(135deg, #20232a, #2a2f38); font-size: 24px; font-weight: 700; color: var(--accent-dark); margin-top: auto; position: relative; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.07); transition: background 0.4s ease, transform 0.4s ease, color 0.4s ease; }

.price::before { content: "Price:"; font-size: 16px; color: var(--text-muted); font-weight: 500; transition: color 0.3s ease; }

.price:hover { background: linear-gradient(135deg, #2a2f38, #363d4a); color: var(--accent-light); transform: translateY(-3px); }

.price:hover::before { color: var(--text-light); }

.details { display: flex; padding: 16px; background: linear-gradient(180deg, #22262f, #2a2e38); }

.leftColumn { flex: 1; margin-right: 20px; }

.rightColumn { flex: 1; }

.detailItem { display: flex; align-items: center; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease, color 0.4s ease; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.04); backdrop-filter: blur(5px); cursor: pointer; }

.detailItem:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.07); transform: translateX(5px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 5px 15px var(--shadow-light); }

.detailItem .icon { margin-right: 12px; color: var(--accent-light); width: 26px; opacity: 0.9; transition: transform 0.4s ease, opacity 0.4s ease; }

.detailItem:hover .icon { opacity: 1; transform: scale(1.2) rotate(5deg); }

/* Tooltip для цены */ .tooltip { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(42, 47, 56, 0.95); color: #ffffff; padding: 12px 18px; border-radius: 12px; font-size: 15px; white-space: nowrap; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.12); pointer-events: none; z-index: 10; backdrop-filter: blur(10px); }

.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: rgba(42, 47, 56, 0.95) transparent transparent transparent; }

.price:hover .tooltip { opacity: 1; visibility: visible; bottom: 110%; transform: translateX(-50%) scale(1.05); }

/* Эффект пульсации для интерактивных элементов (при желании) */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(78, 204, 163, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0); } }

.price:active { transform: scale(0.98); }

/* Дополнительный "стеклянный" эффект для современных интерфейсов */ .glass-effect { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }

/* Адаптивная верстка */ @media (max-width: 768px) { .transportCard { max-width: 100%; border-radius: 20px; }

.details { flex-direction: column; padding: 14px; }

.leftColumn { margin-right: 0; margin-bottom: 10px; }

.detailItem { padding: 8px; margin-bottom: 8px; }

.headerCard { padding: 10px; font-size: 15px; }

.price { padding: 10px 15px; font-size: 22px; } }

улучши ui/ux дизайн данного компонента сделай его современнее красивее добавь что нибудь от себя но не забудь что бы он сохранял адптивность