/* ═══════════════════════════════════════════════════════════════════
 * components.css — ПЕРЕИСПОЛЬЗУЕМЫЕ UI КОМПОНЕНТЫ
 * ═══════════════════════════════════════════════════════════════════
 *
 * Загружается на всех страницах (после style.css).
 *
 * СОДЕРЖИТ:
 *   • Buttons (primary, secondary, ghost)
 *
 * Все правила тут универсальные. Page-specific стили — в page-css файлах.
 * ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — FULL REDESIGN
   Primary: blue gradient + shimmer + glow
   Secondary: dark glass with accent border
   Ghost: transparent + white border
   ═══════════════════════════════════════════════════════════════════ */

/* ── База для всех кнопок ─────────────────────────────────────── */
.bh-button,
.bh-button:visited,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	--bh-button-gap: 8px;
	--bh-button-min-height: 50px;
	--bh-button-padding: 0 28px;
	--bh-button-radius: 12px;
	--bh-button-font-size: 0.9rem;
	--bh-button-font-weight: 700;
	--bh-button-letter-spacing: 0.02em;
	--bh-button-transition:
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s ease,
		border-color 0.28s ease,
		background 0.28s ease,
		color 0.28s ease;
	position: relative;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--bh-button-gap);
	min-height: var(--bh-button-min-height) !important;
	padding: var(--bh-button-padding) !important;
	border-radius: var(--bh-button-radius) !important;
	font-size: var(--bh-button-font-size) !important;
	font-weight: var(--bh-button-font-weight) !important;
	letter-spacing: var(--bh-button-letter-spacing) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: var(--bh-button-transition);
	will-change: transform;
}

/* ── Shimmer overlay (::before) ───────────────────────────────── */
.bh-button::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce a.button.alt::before,
.woocommerce button.button.alt::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 255, 255, 0.16) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
	z-index: 1;
}

.bh-button:hover::before,
.bh-button:focus::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce a.button.alt:hover::before,
.woocommerce button.button.alt:hover::before {
	left: 130%;
}

.bh-button > *,
.woocommerce a.button > *,
.woocommerce button.button > * {
	position: relative;
	z-index: 2;
}

/* ── Primary — blue gradient + glow ───────────────────────────── */
.bh-button-primary,
.bh-button:not(.bh-button-secondary):not(.bh-button-ghost),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: linear-gradient(135deg, var(--bh-accent) 0%, var(--bh-accent-deep) 50%, #0a6fa3 100%) !important;
	color: var(--bh-white) !important;
	border: 1px solid rgba(92, 197, 255, 0.35) !important;
	box-shadow:
		0 4px 14px rgba(15, 139, 203, 0.40),
		0 14px 32px rgba(15, 139, 203, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
	font-weight: 800 !important;
}

.bh-button-primary:hover,
.bh-button-primary:focus,
.bh-button:not(.bh-button-secondary):not(.bh-button-ghost):hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: linear-gradient(135deg, var(--bh-accent-strong) 0%, var(--bh-accent) 50%, var(--bh-accent-deep) 100%) !important;
	border-color: rgba(92, 197, 255, 0.65) !important;
	box-shadow:
		0 6px 20px rgba(15, 139, 203, 0.55),
		0 20px 44px rgba(15, 139, 203, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
	transform: translateY(-2px);
	color: var(--bh-white) !important;
}

.bh-button-primary:active {
	transform: translateY(0);
}

/* ── Secondary — dark glass with accent edge ───────────────────── */
a.bh-button.bh-button-secondary,
a.bh-button-secondary,
button.bh-button-secondary,
.bh-button-secondary {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--bh-white) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

a.bh-button.bh-button-secondary:hover,
a.bh-button-secondary:hover,
.bh-button-secondary:hover {
	background: rgba(15, 139, 203, 0.12) !important;
	border-color: rgba(92, 197, 255, 0.55) !important;
	box-shadow:
		0 6px 20px rgba(15, 139, 203, 0.32),
		0 14px 32px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
	transform: translateY(-2px);
	color: var(--bh-white) !important;
}

/* ── Ghost ─────────────────────────────────────────────────────── */
.bh-button-ghost {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
	color: var(--bh-white) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}

.bh-button-ghost:hover {
	background: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 255, 255, 0.70) !important;
	transform: translateY(-2px);
}

/* ── Secondary поверх фото (hero с cinema/panoramic модификатором) */
.bh-hero--cinema .bh-button-secondary,
.bh-hero--panoramic .bh-button-secondary {
	background: rgba(0, 0, 0, 0.30) !important;
	border-color: rgba(255, 255, 255, 0.40) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.bh-hero--cinema .bh-button-secondary:hover,
.bh-hero--panoramic .bh-button-secondary:hover {
	background: rgba(15, 139, 203, 0.30) !important;
	border-color: rgba(255, 255, 255, 0.65) !important;
}

/* ── Disabled ──────────────────────────────────────────────────── */
.bh-button:disabled,
.bh-button[aria-disabled="true"],
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   CARDS — dark glass panel system
   Used across product cards, advantage cards, feature items.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base card ────────────────────────────────────────────────────── */
.bh-card {
	position: relative;
	background: var(--bh-grad-glass, linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%));
	border: 1px solid var(--bh-line, rgba(255,255,255,0.08));
	border-radius: var(--bh-radius-lg, 26px);
	padding: 28px 24px;
	overflow: hidden;
	transition:
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s ease,
		border-color 0.28s ease;
}

.bh-card:hover {
	transform: translateY(-4px);
	border-color: var(--bh-line-strong, rgba(255,255,255,0.15));
	box-shadow: 0 18px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Subtle shimmer on hover via ::before */
.bh-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% -20%, rgba(15, 139, 203, 0.08) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.32s ease;
	pointer-events: none;
}

.bh-card:hover::before {
	opacity: 1;
}

/* ── Card with accent glow ────────────────────────────────────────── */
.bh-card--accent {
	border-color: rgba(15, 139, 203, 0.22);
	box-shadow: 0 0 0 1px rgba(15, 139, 203, 0.08), 0 12px 32px rgba(0,0,0,0.25);
}

.bh-card--accent:hover {
	border-color: rgba(92, 197, 255, 0.45);
	box-shadow: 0 0 0 1px rgba(92, 197, 255, 0.15), 0 18px 48px rgba(15,139,203,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Card with warm glow ──────────────────────────────────────────── */
.bh-card--warm:hover {
	border-color: rgba(240, 165, 0, 0.35);
	box-shadow: 0 0 0 1px rgba(240,165,0,0.12), 0 18px 48px rgba(240,165,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Icon in card ─────────────────────────────────────────────────── */
.bh-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(15, 139, 203, 0.10);
	border: 1px solid rgba(15, 139, 203, 0.22);
	border-radius: 14px;
	color: var(--bh-accent-strong);
	margin-bottom: 18px;
	transition: all 0.28s ease;
	flex-shrink: 0;
}

.bh-card:hover .bh-card__icon {
	background: rgba(240, 165, 0, 0.12);
	border-color: rgba(240, 165, 0, 0.32);
	color: var(--bh-warm);
	box-shadow: 0 0 18px rgba(240,165,0,0.30);
	transform: scale(1.06);
}

/* ── Badge / kicker chip ─────────────────────────────────────────── */
.bh-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	background: rgba(15, 139, 203, 0.10);
	border: 1px solid rgba(15, 139, 203, 0.22);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bh-accent-strong);
}

.bh-badge--warm {
	background: rgba(240, 165, 0, 0.10);
	border-color: rgba(240, 165, 0, 0.22);
	color: var(--bh-warm);
}

.bh-badge--success {
	background: rgba(46, 196, 90, 0.10);
	border-color: rgba(46, 196, 90, 0.22);
	color: #5ee087;
}