/* ========== ТАРИФЫ ========== */
.tariffs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tariff-card { background: var(--bg-input); border: 1px solid var(--border-l2); border-radius: var(--radius-lg); padding: 20px 16px; text-align: center; transition: all var(--transition-duration) var(--ease-in-out); position: relative; box-sizing: border-box; }
.tariff-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.tariff-card.popular { border-color: var(--accent); background: rgba(0, 113, 227, 0.08); }
.tariff-popular-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 4px 14px; border-radius: var(--radius-round); font-size: 11px; font-weight: 600; }
.tariff-icon { font-size: 28px; margin-bottom: 8px; }
.tariff-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.tariff-card .price { font-size: 28px; font-weight: 800; margin: 8px 0; }
.tariff-card .price.free { color: var(--green); }
.tariff-divider { height: 0.5px; background: var(--border-l2); margin: 10px 0; }
.tariff-features { text-align: left; font-size: 12px; margin-bottom: 12px; }
.tariff-feature { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: var(--text-secondary); }
.tariff-feature i { color: var(--green); }
.tariff-feature.disabled { color: var(--text-tertiary); opacity: 0.5; text-decoration: line-through; }
.tariff-card .btn-primary { min-height: 44px; }

/* ========== ТАРИФЫ В МОДАЛКЕ ========== */
.tariffs-header-new { text-align: center; margin-bottom: 28px; }
.tariffs-header-new h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 6px; }
.tariffs-header-new p { color: var(--text-secondary); font-size: 14px; }

.toggle-row { display: flex; justify-content: center; gap: 0; margin-bottom: 32px; background: rgba(255,255,255,0.05); border-radius: 9999px; padding: 4px; width: fit-content; margin-left: auto; margin-right: auto; }
.toggle-btn { padding: 10px 24px; border-radius: 9999px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; background: transparent; color: #98989d; transition: all 0.3s; font-family: inherit; }
.toggle-btn.active { background: #0071e3; color: #fff; }

.tariffs-grid-new { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1024px) { .tariffs-grid-new { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tariffs-grid-new { grid-template-columns: 1fr; } }

.tariffs-grid-sm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }
@media (max-width: 768px) { .tariffs-grid-sm { grid-template-columns: 1fr 1fr 1fr; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; } .tariffs-grid-sm .tariff-card-new { min-width: 200px; scroll-snap-align: center; } }

.tariff-card-new { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 28px 20px; text-align: center; position: relative; transition: all 0.4s cubic-bezier(0.22,0.61,0.36,1); display: flex; flex-direction: column; animation: fadeInUp 0.6s ease both; }
.tariff-card-new:hover { transform: translateY(-8px); border-color: rgba(0,113,227,0.4); box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,113,227,0.2); }
.tariff-card-new.popular { border-color: rgba(175,82,222,0.3) !important; background: rgba(175,82,222,0.05) !important; }
.tariff-card-new.popular:hover { border-color: rgba(175,82,222,0.6) !important; box-shadow: 0 20px 50px rgba(175,82,222,0.15), 0 0 0 1px rgba(175,82,222,0.3) !important; }

[data-theme="light"] .tariff-card-new { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .tariff-card-new:hover { border-color: rgba(0,113,227,0.4); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,113,227,0.2); }
[data-theme="light"] .toggle-row { background: rgba(0,0,0,0.04); }

.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #af52de, #ff6b9d); color: #fff; padding: 6px 18px; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; animation: badgePulse 2s ease-in-out infinite; white-space: nowrap; }
@keyframes badgePulse { 0%,100%{opacity:1;transform:translateX(-50%) scale(1)} 50%{opacity:.85;transform:translateX(-50%) scale(1.05)} }

.tariff-card-new .tariff-icon { font-size: 38px; margin: 6px 0 10px; display: block; }
.tariff-card-new .tariff-name { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.tariff-card-new .tariff-limit { font-size: 14px; color: #98989d; margin-bottom: 2px; }
.tariff-card-new .tariff-duration { font-size: 12px; color: #636366; margin-bottom: 14px; }

.tariff-price-wrap { background: rgba(255,255,255,0.04); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
[data-theme="light"] .tariff-price-wrap { background: rgba(0,0,0,0.03); }
.tariff-price { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff, #98989d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="light"] .tariff-price { background: linear-gradient(135deg, #1d1d1f, #86868b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tariff-price-sub { font-size: 11px; color: #636366; margin-top: 2px; }

.tariff-card-new .tariff-features { list-style: none; text-align: left; margin-bottom: 18px; flex: 1; }
.tariff-card-new .tariff-features li { font-size: 13px; padding: 4px 0; color: #98989d; display: flex; align-items: center; gap: 8px; }
.tariff-features .check { color: #34c759; font-weight: 700; }
.tariff-features .cross { color: #636366; }

.tariff-btn { display: block; width: 100%; padding: 14px; border-radius: 14px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.3s; text-decoration: none; text-align: center; }
.tariff-btn.primary { background: #0071e3; color: #fff; }
.tariff-btn.primary:hover { background: #0077ed; box-shadow: 0 8px 24px rgba(0,113,227,0.4); }
.tariff-btn.outline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.tariff-btn.outline:hover { border-color: #0071e3; background: rgba(0,113,227,0.1); }
.tariff-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[data-theme="light"] .tariff-btn.outline { border-color: rgba(0,0,0,0.15); color: #1d1d1f; }
[data-theme="light"] .tariff-btn.outline:hover { border-color: #0071e3; background: rgba(0,113,227,0.06); }

.tariffs-subtitle { text-align: center; font-size: 18px; font-weight: 700; margin: 28px 0 14px; color: #98989d; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
#tariffsGrid.tariffs-modal-content { display: block !important; }

/* Промокод в тарифах */
#promoRow:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.1); }
#promoRow input::placeholder { color: var(--text-caption); }
#btnApplyPromo:hover { filter: brightness(1.1); transform: translateY(-1px); }
#btnApplyPromo:disabled { opacity: 0.4; cursor: not-allowed; }

/* Таблица сравнения тарифов */
.tariffs-comparison-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.tariffs-comparison-table th { text-align: left; padding: 14px 16px; font-weight: 600; color: var(--text-primary); background: var(--bg-hover); border-bottom: 1px solid var(--border-l1); font-size: 14px; }
.tariffs-comparison-table th:first-child { border-radius: 14px 0 0 0; }
.tariffs-comparison-table th:last-child { border-radius: 0 14px 0 0; }
.tariffs-comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-l1); color: var(--text-secondary); }
.tariffs-comparison-table tr:last-child td { border-bottom: none; }
.tariffs-comparison-table tr:hover td { background: rgba(255,255,255,0.02); }
.tariffs-comparison-table .check-col { color: var(--green); font-weight: 700; text-align: center; }
.tariffs-comparison-table .cross-col { color: var(--text-tertiary); text-align: center; }
.tariffs-comparison-table .feature-col { font-weight: 500; color: var(--text-primary); }

/* ========== ТАБЛИЦА СРАВНЕНИЯ ТАРИФОВ ========== */
.compare-table-wrap { margin-top: 28px; border-radius: 16px; overflow: hidden; border: 0.5px solid var(--border-l1); background: var(--bg-card); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.compare-table thead th { padding: 16px 14px; font-weight: 700; font-size: 13px; color: var(--text-primary); background: rgba(0, 113, 227, 0.06); border-bottom: 1px solid var(--border-l1); text-align: center; letter-spacing: -0.01em; }
.compare-table thead th:first-child { text-align: left; padding-left: 20px; border-radius: 16px 0 0 0; background: rgba(255, 255, 255, 0.02); font-weight: 600; color: var(--text-secondary); font-size: 12px; }
.compare-table thead th:last-child { border-radius: 0 16px 0 0; }
.compare-table thead th.col-highlight { background: rgba(0, 113, 227, 0.1); color: var(--accent); position: relative; }
.compare-table thead th.col-highlight::after { content: '⭐'; position: absolute; top: -8px; right: 8px; font-size: 14px; }
.compare-table tbody td { padding: 14px 14px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.04); color: var(--text-secondary); text-align: center; font-weight: 500; transition: background 0.15s ease; }
.compare-table tbody td:first-child { text-align: left; padding-left: 20px; font-weight: 500; color: var(--text-primary); font-size: 13px; }
.compare-table tbody td.col-highlight { background: rgba(0, 113, 227, 0.03); font-weight: 600; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.compare-table tbody tr:hover td.col-highlight { background: rgba(0, 113, 227, 0.06); }
.compare-table tbody tr:last-child td:first-child { border-radius: 0 0 0 16px; }
.compare-table tbody tr:last-child td:last-child { border-radius: 0 0 16px 0; }
.compare-table tbody tr:last-child td { font-weight: 700; font-size: 14px; color: var(--text-primary); padding-top: 16px; padding-bottom: 16px; }
.compare-table .check { color: var(--green); font-weight: 700; font-size: 16px; }
.compare-table .cross { color: var(--text-tertiary); font-weight: 400; font-size: 14px; opacity: 0.5; }
[data-theme="light"] .compare-table thead th { background: rgba(0, 113, 227, 0.04); }
[data-theme="light"] .compare-table thead th:first-child { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .compare-table thead th.col-highlight { background: rgba(0, 113, 227, 0.08); }
[data-theme="light"] .compare-table tbody td.col-highlight { background: rgba(0, 113, 227, 0.02); }
[data-theme="light"] .compare-table tbody tr:hover td.col-highlight { background: rgba(0, 113, 227, 0.05); }