.wp-block-viperra-tabs.viperra-tabs,
.viperra-tabs {
    --viperra-tabs-bg: #090909;
    --viperra-tabs-panel: #111111;
    --viperra-tabs-line: rgba(255, 255, 255, 0.12);
    --viperra-tabs-line-strong: rgba(255, 255, 255, 0.2);
    --viperra-tabs-text: #f5f5f5;
    --viperra-tabs-muted: rgba(245, 245, 245, 0.72);
    --viperra-tabs-red: #d31414;
    --viperra-tabs-red-dark: #9f0f0f;

    margin: 2rem 0;
    color: var(--viperra-tabs-text);
    background: linear-gradient(180deg, #111111 0%, var(--viperra-tabs-bg) 100%);
    border: 1px solid var(--viperra-tabs-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.viperra-tabs__nav {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    padding: 0.7rem;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--viperra-tabs-line);
}

.viperra-tabs__button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--viperra-tabs-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
    padding: 0.78rem 1.05rem;
    text-transform: uppercase;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.viperra-tabs__button:hover,
.viperra-tabs__button:focus-visible {
    color: var(--viperra-tabs-text);
    border-color: var(--viperra-tabs-line-strong);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.viperra-tabs__button:focus-visible {
    box-shadow: 0 0 0 3px rgba(211, 20, 20, 0.35);
}

.viperra-tabs__button.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, var(--viperra-tabs-red) 0%, var(--viperra-tabs-red-dark) 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(211, 20, 20, 0.24);
}

.viperra-tab-panel {
    padding: clamp(1.1rem, 2.4vw, 2rem);
    background: var(--viperra-tabs-panel);
}

.viperra-tabs.is-enhanced .viperra-tab-panel[hidden] {
    display: none;
}

.viperra-tabs.is-enhanced .viperra-tab-panel__fallback-title {
    display: none;
}

.viperra-tab-panel__fallback-title {
    margin: 0 0 1rem;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
}

.viperra-tab-panel > :last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .wp-block-viperra-tabs.viperra-tabs,
    .viperra-tabs {
        border-radius: 14px;
    }

    .viperra-tabs__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .viperra-tabs__button {
        flex: 0 0 auto;
        font-size: 0.88rem;
        padding: 0.72rem 0.92rem;
        white-space: nowrap;
    }

    .viperra-tab-panel {
        padding: 1.05rem;
    }
}

/* Obal tabs */
.wp-block-viperra-tabs,
.viperra-tabs {
	background: linear-gradient(180deg, #111315 0%, #0b0d10 100%);
	border: 1px solid rgba(247, 56, 115, 0.14);
	border-radius: 18px;
	padding: 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Horní navigace */
.viperra-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	background: linear-gradient(90deg, rgba(247,56,115,0.06) 0%, rgba(0,0,0,0) 45%);
}

/* Jednotlivá tlačítka TABŮ */
.viperra-tabs__nav button,
.viperra-tabs__nav .viperra-tabs__button {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,0.72);
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 12px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1.1;
	min-height: auto;
	box-shadow: none;
}

/* Hover */
.viperra-tabs__nav button:hover,
.viperra-tabs__nav .viperra-tabs__button:hover {
	color: #ffffff;
	background: rgba(247, 56, 115, 0.10);
}

/* Aktivní tab */
.viperra-tabs__nav button[aria-selected="true"],
.viperra-tabs__nav button.is-active,
.viperra-tabs__nav .viperra-tabs__button.is-active {
	color: #ffffff;
	background: linear-gradient(180deg, #ff4f89 0%, #f73873 100%);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.05) inset,
		0 8px 24px rgba(247, 56, 115, 0.35);
}

/* Obsah panelu */
.viperra-tabs__panels,
.viperra-tabs__content {
	padding: 22px;
	background: linear-gradient(180deg, rgba(247,56,115,0.04) 0%, rgba(0,0,0,0) 40%);
}

/* Vnitřní karta obsahu podle obrázku 2 */
.viperra-tabs__panel,
.viperra-tabs__tabpanel {
	position: relative;
	background: linear-gradient(135deg, rgba(247,56,115,0.10) 0%, rgba(4,7,16,0.96) 40%, rgba(2,4,10,1) 100%);
	border: 1px solid rgba(247, 56, 115, 0.25);
	border-radius: 24px;
	padding: 34px 34px 32px;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.02),
		0 10px 40px rgba(0,0,0,0.35);
	overflow: hidden;
}

/* Levý svítivý proužek */
.viperra-tabs__panel::before,
.viperra-tabs__tabpanel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	bottom: 26px;
	width: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ff4f89 0%, #f73873 100%);
	box-shadow: 0 0 18px rgba(247, 56, 115, 0.7);
}

/* Malý štítek nahoře */
.viperra-tabs__panel-label {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ff4f89 0%, #f73873 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 22px rgba(247, 56, 115, 0.35);
	margin-bottom: 26px;
}

/* Nadpis a text */
.viperra-tabs__panel h2,
.viperra-tabs__panel h3,
.viperra-tabs__tabpanel h2,
.viperra-tabs__tabpanel h3 {
	color: #ffffff;
	font-size: clamp(28px, 3vw, 46px);
	line-height: 1.05;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.viperra-tabs__panel p,
.viperra-tabs__tabpanel p {
	color: rgba(255,255,255,0.72);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* Mobil */
@media (max-width: 767px) {
	.viperra-tabs__nav {
		gap: 8px;
		padding: 12px;
	}

	.viperra-tabs__nav button,
	.viperra-tabs__nav .viperra-tabs__button {
		font-size: 13px;
		padding: 10px 14px;
	}

	.viperra-tabs__panels,
	.viperra-tabs__content {
		padding: 14px;
	}

	.viperra-tabs__panel,
	.viperra-tabs__tabpanel {
		padding: 24px 22px 22px;
		border-radius: 20px;
	}
}