/* Вынесено из wholesale.php. Правьте здесь — страница подключает этот файл. */
/* ТВОИ РОДНЫЕ НЕИЗМЕНЕННЫЕ СТИЛИ ИЗ ACCOUNT.PHP */
*, *::before, *::after { box-sizing: border-box; }
:root {
--bg: #f4f6fa;
--card: #ffffff;
--sidebar-bg: #ffffff;
--border: #e8ecf3;
--blue: #0099ff;
--blue-hover: #007acc;
--blue-soft: rgba(0, 153, 255, 0.08);
--text: #1e293b;
--muted: #64748b;
--green: #10b981;
--green-soft: rgba(16, 185, 129, 0.1);
--orange: #f59e0b;
--orange-soft: rgba(245, 158, 11, 0.1);
--red: #ef4444;
/* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН */
--tg-cosmic-mesh: url("data:image/svg+xml,%3Csvg width='190' height='180' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30,50 L80,25 L140,65 L200,35 L220,110 L160,150 L85,120 L30,190 L65,225 L150,210 L210,175 M80,25 L85,120 M140,65 L160,150 M200,35 L210,175 M30,50 L30,190' stroke-opacity='0.16' stroke-dasharray='3,3'/%3E%3Cpath d='M15,110 L90,80 L180,160 M100,10 L230,130' stroke='%2300c9a7' stroke-opacity='0.15' stroke-width='0.8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='50' r='2' opacity='0.5'/%3E%3Ccircle cx='80' cy='25' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='140' cy='65' r='2' opacity='0.4'/%3E%3Ccircle cx='200' cy='35' r='4' opacity='0.6' fill='%2300c9a7'/%3E%3Ccircle cx='220' cy='110' r='2' opacity='0.4'/%3E%3Ccircle cx='160' cy='150' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='85' cy='120' r='2.5' opacity='0.5'/%3E%3Ccircle cx='30' cy='190' r='3' opacity='0.4'/%3E%3Ccircle cx='150' cy='210' r='3' opacity='0.6' fill='%2300c9a7'/%3E%3C/g%3E%3Cg transform='translate%2845, 65%29 scale%280.55%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.35' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='22' stroke-opacity='0.15' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate%28170, 45%29 scale%280.45%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.25' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3C/g%3E%3Cg transform='translate%28105, 155%29 scale%280.65%29' stroke='%2300c9a7' stroke-width='1.6' stroke-opacity='0.4' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='24' stroke-opacity='0.2' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
#searchInput::placeholder {
color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
padding-top: 52px;
font-size: 13px;
-webkit-font-smoothing: antialiased;
zoom: 1;
}
.layout { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - 65px); gap: 0; }
.main { padding: 5px 5px 25px; width: 100%; box-sizing: border-box; background: #f8fafc;
background-color: #f4f7fb;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
background-size: 290px 290px;}
.table-section-title.head-tbl p { margin: 3px 0 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.9) !important; }
.top-nav-buttons {
display: flex;
gap: 5px;
margin-bottom: 4px;
width: 100%;
align-items: stretch;
}
.promo-card {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
padding: 8px 10px 9px 12px;
border-radius: 16px;
text-decoration: none;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-catalog { background:var(--tg-cosmic-mesh), linear-gradient(135deg, #43b487 0%, #4ab48b 45%, #42f782 100%) !important; }
.card-discounts { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #10c5ab 0%, #00a6dd 45%, #068de5 100%) !important;}
.card-wholesale { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #b357f2 0%, #931eff 45%, #c757ff 100%) !important; }
.promo-card:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,0.32);
}
.card-catalog:hover {
box-shadow: 0 8px 16px -4px rgba(4, 197, 107, 0.4), 0 3px 8px rgba(0,0,0,0.14);
}
.card-discounts:hover {
box-shadow: 0 8px 16px -4px rgba(37, 117, 252, 0.4), 0 3px 8px rgba(0,0,0,0.14);
}
.card-wholesale:hover {
box-shadow: 0 8px 16px -4px rgba(182, 36, 255, 0.4), 0 3px 8px rgba(0,0,0,0.14);
}
.promo-card.active {
border-color: rgba(255,255,255,0.55);
}
.promo-card-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
.promo-card-icon {
position: relative;
width: 30px;
height: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(4px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.promo-card:hover .promo-card-icon { transform: scale(1.08) rotate(-4deg); }
.promo-card-icon svg { width: 15.5px; height: 15.5px; color: #ffffff; }
.promo-card-title {
font-weight: 800;
font-size: 14px;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.promo-card-stat {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
font-size: 10.3px;
font-weight: 800;
color: #ffffff;
padding: 4px 10px;
border-radius: 20px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.24);
backdrop-filter: blur(4px);
white-space: nowrap;
}
.promo-card-desc {
font-weight: 450;
font-size: 9.4px;
color: rgba(255,255,255,0.90);
line-height: 1.3;
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.promo-card-link {
margin-top: auto;
font-size: 11px;
font-weight: 700;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: 0.1px;
}
.promo-card-link svg {
width: 12px; height: 12px;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.table-section-title.head-tbl h1 { margin: 0; font-size: 15px; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.table-section-title.head-tbl p { margin: 3px 0 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.9) !important; }
.promo-card:hover .promo-card-link svg { transform: translateX(4px); }
@media (max-width: 992px) {
.main{margin-top:-22px;}
.top-nav-buttons { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 2px !important; margin-bottom: 4px !important; }
.promo-card { padding: 4px 1.5px 5px 5px !important; border-radius: 8px !important; }
.promo-card-row { gap: 3px !important; margin-bottom: 4px !important; flex-wrap: wrap !important; }
.promo-card-icon { width: 15px !important; height: 15px !important; border-radius: 5px !important; }
.promo-card-icon svg { width: 8px !important; height: 8px !important; }
.promo-card-title { font-size: 7px !important; max-width: 50px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15 !important; }
.promo-card-stat { font-size: 5.5px !important; padding: 1px 4px !important; }
.promo-card-desc { font-size: 5px !important; -webkit-line-clamp: 3 !important; margin-bottom: 3px !important; line-height: 1.2 !important; }
.promo-card-link { font-size: 7px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100% !important; }
.promo-card-link svg { width: 6px !important; height: 6px !important; flex-shrink: 0 !important; }
.table-section-title.head-tbl p { margin: 3px 0 0 0; font-size: 8.5px; color: rgba(255, 255, 255, 0.9) !important; }
}
/* РОДНАЯ СТИЛЬНАЯ ШАПКА ИЗ СКРИНА 2 */
.table-section-title.head-tbl {
margin-top: 5px !important;
margin-bottom: 5px !important;
background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important;
padding: 22px 20px;
border-radius: 14px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}
/* =========================================================================
ЭКСКЛЮЗИВНЫЙ КИБЕР-ГРИД ИЗ СТРОГО 3-Х КАРТОЧЕК В РЯД (КАК ТЫ ПРОСИЛ)
========================================================================= */
.wholesale-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
margin-top: 1px;
}
@media (min-width: 1200px) {
.wholesale-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
.premium-bundle-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e8ecf3;
padding: 11px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
width: 100%;
box-sizing: border-box;
height: 300px;
overflow: hidden;
}
.premium-bundle-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
border-color: #cbd5e1;
}
/* Название теперь строго сверху вместе со стеком аватарок */
.card-top-flex-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.header-left-side {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
flex: 1;
}
/* Каскадный 3-Avatar Stack */
.avatar-stack-container {
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
.avatar-stack-item {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ffffff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
transition: all 0.2s ease;
flex-shrink: 0;
}
.avatar-stack-item:not(:first-child) {
margin-left: -12px;
}
.avatar-stack-item:not(:first-child) {
margin-left: -16px;
}
.premium-bundle-card:hover .avatar-stack-item {
transform: scale(1.03);
}
.card-bundle-title {
font-size: 10px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.bundle-badge-discount {
background: #ef4444;
color: #ffffff;
font-size: 9.5px;
font-weight: 800;
padding: 2px 7px;
border-radius: 20px;
box-shadow: 0 2px 5px rgba(239, 68, 68, 0.15);
flex-shrink: 0;
}
.card-bundle-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 9.5px;
color: #64748b;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid #f1f5f9;
}
.meta-folder, .meta-subs {
display: flex;
align-items: center;
gap: 4px;
font-weight: 500;
}
.meta-subs { color: #0f172a; font-weight: 600; }
/* Внутренние блоки списка каналов с аватарками и кликабельностью */
.bundle-channels-list-box {
background: #f8fafc;
border-left: 3px solid #0099ff;
padding: 7px 9px;
border-radius: 4px 10px 10px 4px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
max-height: 76px;
overflow-y: auto;
}
.bundle-channel-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 9.5px;
}
.channel-link-anchor {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
min-width: 0;
flex: 1;
}
.channel-link-anchor:hover .channel-item-title {
color: #0099ff !important;
}
.channel-item-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid #e2e8f0;
background: #ffffff;
}
.channel-item-title {
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s ease;
}
/* НЕОНОВЫЕ ВЕКТОРНЫЕ БЕЙДЖИ ПОДПИСЧИКОВ ВЗАМЕН СТАРЫХ ЗНАЧКОВ */
.channel-item-subs-badge {
display: inline-flex;
align-items: center;
gap: 3px;
color: #0099ff;
background: rgba(0, 153, 255, 0.06);
border: 1px solid rgba(0, 153, 255, 0.15);
padding: 2px 6px;
border-radius: 7px;
font-weight: 700;
font-size: 9px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.bundle-channel-item:hover .channel-item-subs-badge {
background: #0099ff;
color: #ffffff;
box-shadow: 0 2px 6px rgba(0, 153, 255, 0.2);
}
.card-price-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.price-item-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
color: #64748b;
}
.price-label { font-weight: 400; }
.price-values { display: flex; align-items: center; gap: 5px; }
.price-old { text-decoration: line-through; color: #94a3b8; font-size: 9px; }
.price-current { font-weight: 700; color: #10b981; font-size: 10.5px; }
/* Полноширокая кнопка действия */
.btn-bundle-action {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background: #0f172a;
color: #ffffff;
text-decoration: none;
padding: 8px 10px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 600;
transition: all 0.2s ease;
width: 100%;
text-align: center;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
flex-shrink: 0;
}
.btn-bundle-action:hover {
background: #1e293b;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
}
.empty-state { background: var(--card); border: 1px dashed var(--border); border-radius: 14px; padding: 40px 20px; text-align: center; max-width: 480px; margin: 20px auto; }
.empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.empty-text { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
@media (max-width: 992px) {
.layout{ display: grid; grid-template-columns: 107px 1fr; min-height: 100vh; }
.main { flex-grow: 1 !important; padding: 5px !important; }
.wholesale-grid { grid-template-columns: 1fr !important; }
.premium-bundle-card { height: auto !important; }
}
/* ===== ФИКСИРОВАННОЕ увеличение +19% для всех десктопных экранов (993px+), БЕЗ vw/clamp/тиров ===== */
@media (min-width: 993px) {
/* ТВОИ РОДНЫЕ НЕИЗМЕНЕННЫЕ СТИЛИ ИЗ ACCOUNT.PHP */
*, *::before, *::after { box-sizing: border-box; }
:root {
--bg: #f4f6fa;
--card: #ffffff;
--sidebar-bg: #ffffff;
--border: #e8ecf3;
--blue: #0099ff;
--blue-hover: #007acc;
--blue-soft: rgba(0, 153, 255, 0.08);
--text: #1e293b;
--muted: #64748b;
--green: #10b981;
--green-soft: rgba(16, 185, 129, 0.1);
--orange: #f59e0b;
--orange-soft: rgba(245, 158, 11, 0.1);
--red: #ef4444;
/* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН */
--tg-cosmic-mesh: url("data:image/svg+xml,%3Csvg width='190' height='180' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30,50 L80,25 L140,65 L200,35 L220,110 L160,150 L85,120 L30,190 L65,225 L150,210 L210,175 M80,25 L85,120 M140,65 L160,150 M200,35 L210,175 M30,50 L30,190' stroke-opacity='0.16' stroke-dasharray='3,3'/%3E%3Cpath d='M15,110 L90,80 L180,160 M100,10 L230,130' stroke='%2300c9a7' stroke-opacity='0.15' stroke-width='0.8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='50' r='2' opacity='0.5'/%3E%3Ccircle cx='80' cy='25' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='140' cy='65' r='2' opacity='0.4'/%3E%3Ccircle cx='200' cy='35' r='4' opacity='0.6' fill='%2300c9a7'/%3E%3Ccircle cx='220' cy='110' r='2' opacity='0.4'/%3E%3Ccircle cx='160' cy='150' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='85' cy='120' r='2.5' opacity='0.5'/%3E%3Ccircle cx='30' cy='190' r='3' opacity='0.4'/%3E%3Ccircle cx='150' cy='210' r='3' opacity='0.6' fill='%2300c9a7'/%3E%3C/g%3E%3Cg transform='translate%2845, 65%29 scale%280.55%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.35' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='22' stroke-opacity='0.15' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate%28170, 45%29 scale%280.45%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.25' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3C/g%3E%3Cg transform='translate%28105, 155%29 scale%280.65%29' stroke='%2300c9a7' stroke-width='1.6' stroke-opacity='0.4' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='24' stroke-opacity='0.2' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
#searchInput::placeholder {
color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
padding-top: 61.9px;
font-size: 15.5px;
-webkit-font-smoothing: antialiased;
zoom: 1;
}
.layout { display: grid; grid-template-columns: 238px 1fr; min-height: calc(100vh - 77.3px); gap: 0; }
.main { padding: 5.9px 5.9px 29.8px; width: 100%; box-sizing: border-box; background: #f8fafc;
background-color: #f4f7fb;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
background-size: 345.1px 345.1px;}
.table-section-title.head-tbl p { margin: 3.6px 0 0 0; font-size: 13.1px; color: rgba(255, 255, 255, 0.9) !important; }
.top-nav-buttons {
display: flex;
gap: 5.9px;
margin-bottom: 4.8px;
width: 100%;
align-items: stretch;
}
.promo-card {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
padding: 9.5px 11.9px 10.7px 14.3px;
border-radius: 19px;
text-decoration: none;
overflow: hidden;
isolation: isolate;
border: 1.2px solid rgba(255,255,255,0.14);
box-shadow: 0 7.1px 21.4px rgba(0,0,0,0.12);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-catalog { background:var(--tg-cosmic-mesh), linear-gradient(135deg, #43b487 0%, #4ab48b 45%, #42f782 100%) !important; }
.card-discounts { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #10c5ab 0%, #00a6dd 45%, #068de5 100%) !important;}
.card-wholesale { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #b357f2 0%, #931eff 45%, #c757ff 100%) !important; }
.promo-card:hover {
transform: translateY(-3.6px);
border-color: rgba(255,255,255,0.32);
}
.card-catalog:hover {
box-shadow: 0 9.5px 19px -4.8px rgba(4, 197, 107, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
}
.card-discounts:hover {
box-shadow: 0 9.5px 19px -4.8px rgba(37, 117, 252, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
}
.card-wholesale:hover {
box-shadow: 0 9.5px 19px -4.8px rgba(182, 36, 255, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
}
.promo-card.active {
border-color: rgba(255,255,255,0.55);
}
.promo-card-row {
display: flex;
align-items: center;
gap: 11.9px;
margin-bottom: 5.9px;
}
.promo-card-icon {
position: relative;
width: 35.7px;
height: 35.7px;
border-radius: 11.9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,0.16);
border: 1.2px solid rgba(255,255,255,0.22);
backdrop-filter: blur(4.8px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.promo-card:hover .promo-card-icon { transform: scale(1.08) rotate(-4deg); }
.promo-card-icon svg { width: 18.4px; height: 18.4px; color: #ffffff; }
.promo-card-title {
font-weight: 800;
font-size: 16.7px;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.2px;
text-shadow: 0 1.2px 3.6px rgba(0,0,0,0.15);
}
.promo-card-stat {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
font-size: 12.3px;
font-weight: 800;
color: #ffffff;
padding: 4.8px 11.9px;
border-radius: 23.8px;
background: rgba(255,255,255,0.16);
border: 1.2px solid rgba(255,255,255,0.24);
backdrop-filter: blur(4.8px);
white-space: nowrap;
}
.promo-card-desc {
font-weight: 450;
font-size: 11.2px;
color: rgba(255,255,255,0.90);
line-height: 1.3;
margin: 0 0 7.1px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.promo-card-link {
margin-top: auto;
font-size: 13.1px;
font-weight: 700;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 4.8px;
letter-spacing: 0.1px;
}
.promo-card-link svg {
width: 14.3px; height: 14.3px;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.table-section-title.head-tbl h1 { margin: 0; font-size: 17.8px; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9.5px; }
.table-section-title.head-tbl p { margin: 3.6px 0 0 0; font-size: 13.1px; color: rgba(255, 255, 255, 0.9) !important; }
.promo-card:hover .promo-card-link svg { transform: translateX(4.8px); }
/* РОДНАЯ СТИЛЬНАЯ ШАПКА ИЗ СКРИНА 2 */
.table-section-title.head-tbl {
margin-top: 5.9px !important;
margin-bottom: 5.9px !important;
background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important;
padding: 26.2px 23.8px;
border-radius: 16.7px;
box-shadow: 0 4.8px 17.8px rgba(0,0,0,0.04);
}
/* =========================================================================
ЭКСКЛЮЗИВНЫЙ КИБЕР-ГРИД ИЗ СТРОГО 3-Х КАРТОЧЕК В РЯД (КАК ТЫ ПРОСИЛ)
========================================================================= */
.wholesale-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5.9px;
margin-top: 1.2px;
}
.premium-bundle-card {
background: #ffffff;
border-radius: 19px;
border: 1.2px solid #e8ecf3;
padding: 13.1px;
box-shadow: 0 11.9px 29.8px rgba(15, 23, 42, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
width: 100%;
box-sizing: border-box;
height: 357px;
overflow: hidden;
}
.premium-bundle-card:hover {
transform: translateY(-4.8px);
box-shadow: 0 19px 38.1px rgba(15, 23, 42, 0.06);
border-color: #cbd5e1;
}
/* Название теперь строго сверху вместе со стеком аватарок */
.card-top-flex-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9.5px;
margin-bottom: 9.5px;
}
.header-left-side {
display: flex;
align-items: center;
gap: 8.3px;
min-width: 0;
flex: 1;
}
/* Каскадный 3-Avatar Stack */
.avatar-stack-container {
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
.avatar-stack-item {
width: 33.3px;
height: 33.3px;
border-radius: 50%;
object-fit: cover;
border: 2.4px solid #ffffff;
box-shadow: 0 2.4px 7.1px rgba(15, 23, 42, 0.1);
transition: all 0.2s ease;
flex-shrink: 0;
}
.avatar-stack-item:not(:first-child) {
margin-left: -14.3px;
}
.avatar-stack-item:not(:first-child) {
margin-left: -19px;
}
.premium-bundle-card:hover .avatar-stack-item {
transform: scale(1.03);
}
.card-bundle-title {
font-size: 11.9px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.bundle-badge-discount {
background: #ef4444;
color: #ffffff;
font-size: 11.3px;
font-weight: 800;
padding: 2.4px 8.3px;
border-radius: 23.8px;
box-shadow: 0 2.4px 5.9px rgba(239, 68, 68, 0.15);
flex-shrink: 0;
}
.card-bundle-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11.3px;
color: #64748b;
margin-bottom: 9.5px;
padding-bottom: 7.1px;
border-bottom: 1.2px solid #f1f5f9;
}
.meta-folder, .meta-subs {
display: flex;
align-items: center;
gap: 4.8px;
font-weight: 500;
}
.meta-subs { color: #0f172a; font-weight: 600; }
/* Внутренние блоки списка каналов с аватарками и кликабельностью */
.bundle-channels-list-box {
background: #f8fafc;
border-left: 3.6px solid #0099ff;
padding: 8.3px 10.7px;
border-radius: 4.8px 11.9px 11.9px 4.8px;
margin-bottom: 9.5px;
display: flex;
flex-direction: column;
gap: 5.9px;
box-shadow: inset 0 1.2px 3.6px rgba(0,0,0,0.02);
max-height: 90.4px;
overflow-y: auto;
}
.bundle-channel-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7.1px;
font-size: 11.3px;
}
.channel-link-anchor {
display: flex;
align-items: center;
gap: 9.5px;
text-decoration: none;
min-width: 0;
flex: 1;
}
.channel-link-anchor:hover .channel-item-title {
color: #0099ff !important;
}
.channel-item-avatar {
width: 21.4px;
height: 21.4px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1.2px solid #e2e8f0;
background: #ffffff;
}
.channel-item-title {
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s ease;
}
/* НЕОНОВЫЕ ВЕКТОРНЫЕ БЕЙДЖИ ПОДПИСЧИКОВ ВЗАМЕН СТАРЫХ ЗНАЧКОВ */
.channel-item-subs-badge {
display: inline-flex;
align-items: center;
gap: 3.6px;
color: #0099ff;
background: rgba(0, 153, 255, 0.06);
border: 1.2px solid rgba(0, 153, 255, 0.15);
padding: 2.4px 7.1px;
border-radius: 8.3px;
font-weight: 700;
font-size: 10.7px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.bundle-channel-item:hover .channel-item-subs-badge {
background: #0099ff;
color: #ffffff;
box-shadow: 0 2.4px 7.1px rgba(0, 153, 255, 0.2);
}
.card-price-list {
display: flex;
flex-direction: column;
gap: 4.8px;
margin-bottom: 9.5px;
}
.price-item-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.9px;
color: #64748b;
}
.price-label { font-weight: 400; }
.price-values { display: flex; align-items: center; gap: 5.9px; }
.price-old { text-decoration: line-through; color: #94a3b8; font-size: 10.7px; }
.price-current { font-weight: 700; color: #10b981; font-size: 12.5px; }
/* Полноширокая кнопка действия */
.btn-bundle-action {
display: flex;
align-items: center;
justify-content: center;
gap: 5.9px;
background: #0f172a;
color: #ffffff;
text-decoration: none;
padding: 9.5px 11.9px;
border-radius: 11.9px;
font-size: 12.5px;
font-weight: 600;
transition: all 0.2s ease;
width: 100%;
text-align: center;
box-shadow: 0 4.8px 11.9px rgba(15, 23, 42, 0.12);
flex-shrink: 0;
}
.btn-bundle-action:hover {
background: #1e293b;
box-shadow: 0 7.1px 16.7px rgba(15, 23, 42, 0.2);
}
.empty-state { background: var(--card); border: 1.2px dashed var(--border); border-radius: 16.7px; padding: 47.6px 23.8px; text-align: center; max-width: 571.2px; margin: 23.8px auto; }
.empty-title { font-size: 16.7px; font-weight: 600; margin-bottom: 4.8px; }
.empty-text { font-size: 14.3px; color: var(--muted); margin-bottom: 19px; }
}
.catalog-seo-box {
background:
radial-gradient(circle at 30% 35%, rgba(56, 224, 178, 0.42), transparent 50%),
radial-gradient(circle at 70% 25%, rgba(94, 129, 255, 0.38), transparent 55%),
radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.32), transparent 60%),
linear-gradient(135deg, #05070f 0%, #071b2e 40%, #062a24 75%, #041f3d 100%);
border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
padding: 18px 20px; margin-top: 16px;
}
.catalog-seo-box h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #ffffff; }
.catalog-seo-box p { margin: 0; font-size: 12px; line-height: 1.65; color: rgba(255,255,255,0.82); max-width: 900px; }
/* ===================== Оптовые наборы — новый вид (обе темы) ===================== */
.wholesale-grid .premium-bundle-card {
position: relative; overflow: hidden;
border-radius: 18px !important;
border: 1px solid #e3eaf2 !important;
background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%) !important;
box-shadow: 0 10px 28px -16px rgba(15, 23, 42, .22) !important;
transition: transform .25s ease, box-shadow .25s ease !important;
}
.wholesale-grid .premium-bundle-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, #8b5cf6, #6366f1 45%, #22d3ee);
}
.wholesale-grid .premium-bundle-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(99, 102, 241, .35) !important; }
.wholesale-grid .bundle-badge-discount {
background: linear-gradient(135deg, #f43f5e, #f97316) !important; color: #fff !important; border: 0 !important;
box-shadow: 0 6px 14px -6px rgba(244, 63, 94, .6) !important; font-weight: 800 !important;
}
.wholesale-grid .bundle-channels-list-box {
border-left: 0 !important; border-radius: 12px !important;
background: #f3f6fb !important; position: relative;
box-shadow: inset 3px 0 0 #8b5cf6 !important;
}
.wholesale-grid .channel-item-subs-badge { background: rgba(99, 102, 241, .1) !important; color: #4f46e5 !important; border-color: transparent !important; }
.wholesale-grid .price-current { color: #059669 !important; font-weight: 800 !important; }
.wholesale-grid .btn-bundle-action {
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #0ea5e9 100%) !important;
color: #fff !important; border: 0 !important; font-weight: 800 !important; letter-spacing: .2px;
box-shadow: 0 10px 22px -8px rgba(99, 102, 241, .6), inset 0 1px 0 rgba(255,255,255,.25) !important;
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.wholesale-grid .btn-bundle-action:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.1); box-shadow: 0 14px 26px -8px rgba(99, 102, 241, .7) !important; }