.vip-page { max-width: 1100px; margin: 0 auto; padding: 40px 20px 60px 20px; }

.vip-hero { text-align: center; margin-bottom: 40px; }
.vip-hero h1 { font-size: 2rem; margin: 0 0 10px 0; }
.vip-hero-sub { color: #666; font-size: 1.05rem; margin: 0; }

.vip-section { margin-bottom: 46px; }
.vip-section h2 { font-size: 1.4rem; margin: 0 0 18px 0; text-align: center; }

.vip-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.vip-info-card {
    background: #fff;
    border: 1px solid rgba(200,16,46,.14);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.vip-info-icon { font-size: 1.8rem; margin-bottom: 8px; }
.vip-info-card h3 { margin: 0 0 8px 0; font-size: 1.05rem; }
.vip-info-card p { margin: 0; color: #555; font-size: .92rem; line-height: 1.55; }
.vip-bonus-list { margin: 10px 0 0 0; padding-left: 18px; color: #555; font-size: .9rem; }
.vip-bonus-list li { margin-bottom: 4px; }

.vip-table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.vip-table { width: 100%; border-collapse: collapse; background: #fff; }
.vip-table th, .vip-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(200,16,46,.14); white-space: nowrap; }
.vip-table thead th { background: #fdecee; color: #8f0c22; font-weight: 700; }

/* Tarify jako sloupce (transponovaná tabulka): první sloupec = název výhody,
   ostatní sloupce = jednotlivé tarify. */
.vip-table--tarify thead th,
.vip-table--tarify td { text-align: center; }
.vip-table--tarify thead th:first-child,
.vip-table--tarify td.vip-row-label { text-align: left; }
.vip-table--tarify td.vip-row-label { font-weight: 600; color: #333; background: #fafafa; }
.vip-table--tarify .vip-col--current { background: #fff9ec; }
.vip-table--tarify thead th.vip-col--current { background: #fdf0d0; }

.vip-current-tag {
    display: block;
    margin: 6px auto 0 auto;
    width: max-content;
    padding: 2px 9px;
    border-radius: 999px;
    background: #a97a2c;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}

.vip-badge { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px; font-weight:700; font-size:.9rem; }
.vip-badge-silver { background: linear-gradient(135deg,#b0b7bd,#8b939a); color:#fff; }
.vip-badge-gold { background: linear-gradient(135deg,#f2c14e,#c99a2e); color:#3a2a00; }
.vip-badge-premium { background: linear-gradient(135deg,#8f0c22,#430610); color:#fff; }

.vip-cta { text-align: center; margin-top: 24px; }
.vip-cta p { margin: 0 0 14px 0; color: #555; }
.btn-vip {
    display: inline-block;
    background: linear-gradient(135deg, #c8102e, #8f0c22);
    color: #fff;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(200,16,46,0.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-vip:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200,16,46,0.4); }

@media (max-width: 600px) {
    .vip-hero h1 { font-size: 1.5rem; }
    .vip-page { padding: 24px 14px 40px 14px; }
}