/* ==========================================================================
   Bverr shared design tokens + base components
   Location: bverr-account/assets/css/bverr-tokens.css
   Loaded on: My Account, Single Product, Shop, Product categories/tags,
              and inside the Elementor editor preview.
   NOTE: if your My Account CSS already defines these values, move them
   here and have the account CSS use the variables instead of hex codes.
   ========================================================================== */

:root {
	/* Brand */
	--bv-primary: #c20021;
	--bv-primary-hover: #a1001b;
	--bv-primary-soft: #fde8eb;      /* tinted backgrounds, badges */
	--bv-focus-ring: 0 0 0 3px rgba(194, 0, 33, 0.25);

	/* Neutrals (NextAdmin-style greys) */
	--bv-bg: #f3f4f6;                /* page background */
	--bv-surface: #ffffff;           /* cards */
	--bv-border: #e5e7eb;
	--bv-text: #111928;              /* headings / strong text */
	--bv-text-body: #4b5563;         /* paragraphs */
	--bv-text-muted: #6b7280;

	/* Status */
	--bv-success: #22ad5c;
	--bv-success-soft: #dcfce7;
	--bv-warning: #f59e0b;
	--bv-warning-soft: #fef3c7;

	/* Typography — match the font your My Account page already loads */
	--bv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bv-fs-xs: 0.75rem;   /* 12px */
	--bv-fs-sm: 0.875rem;  /* 14px */
	--bv-fs-base: 1rem;    /* 16px */
	--bv-fs-lg: 1.125rem;  /* 18px */
	--bv-fs-xl: 1.5rem;    /* 24px */
	--bv-fs-2xl: 2rem;     /* 32px */
	--bv-fs-3xl: 2.75rem;  /* 44px */

	/* Shape & depth */
	--bv-radius-sm: 6px;
	--bv-radius: 10px;
	--bv-radius-lg: 16px;
	--bv-shadow: 0 1px 3px rgba(17, 25, 40, 0.06), 0 1px 2px rgba(17, 25, 40, 0.04);
	--bv-shadow-lg: 0 10px 30px rgba(17, 25, 40, 0.08);

	/* Spacing */
	--bv-space-1: 4px;
	--bv-space-2: 8px;
	--bv-space-3: 12px;
	--bv-space-4: 16px;
	--bv-space-6: 24px;
	--bv-space-8: 32px;
	--bv-space-12: 48px;
	--bv-space-16: 64px;

	--bv-container: 1200px;
}

/* --------------------------------------------------------------------------
   Base (scoped to shop pages so the rest of the site is untouched)
   -------------------------------------------------------------------------- */
body.single-product,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
	font-family: var(--bv-font);
	color: var(--bv-text-body);
	background: var(--bv-bg);
}

body.single-product :is(h1, h2, h3, h4),
body.post-type-archive-product :is(h1, h2, h3, h4),
body.tax-product_cat :is(h1, h2, h3, h4) {
	font-family: var(--bv-font);
	color: var(--bv-text);
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Components — add these classes in Elementor:
   Advanced → CSS Classes (on a container or widget)
   -------------------------------------------------------------------------- */

/* Card: use on any Elementor container */
.bv-card {
	background: var(--bv-surface);
	border: 1px solid var(--bv-border);
	border-radius: var(--bv-radius);
	box-shadow: var(--bv-shadow);
	padding: var(--bv-space-6);
}
.bv-card--hover {
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.bv-card--hover:hover {
	box-shadow: var(--bv-shadow-lg);
	transform: translateY(-2px);
	border-color: var(--bv-primary-soft);
}
.bv-card--featured {
	border: 2px solid var(--bv-primary);
	box-shadow: var(--bv-shadow-lg);
}

/* Buttons: works on Elementor Button widget (class on widget) or plain <a>/<button> */
.bv-btn .elementor-button,
a.bv-btn,
button.bv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bv-space-2);
	font-family: var(--bv-font);
	font-size: var(--bv-fs-sm);
	font-weight: 600;
	line-height: 1.25;
	padding: 12px 20px;
	border-radius: var(--bv-radius-sm);
	border: 1px solid var(--bv-primary);
	background: var(--bv-primary);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bv-btn .elementor-button:hover,
a.bv-btn:hover,
button.bv-btn:hover {
	background: var(--bv-primary-hover);
	border-color: var(--bv-primary-hover);
	color: #fff;
}
.bv-btn .elementor-button:focus-visible,
a.bv-btn:focus-visible,
button.bv-btn:focus-visible {
	outline: none;
	box-shadow: var(--bv-focus-ring);
}

/* Outline variant */
.bv-btn--outline .elementor-button,
a.bv-btn--outline,
button.bv-btn--outline {
	background: transparent;
	color: var(--bv-primary);
}
.bv-btn--outline .elementor-button:hover,
a.bv-btn--outline:hover,
button.bv-btn--outline:hover {
	background: var(--bv-primary-soft);
	color: var(--bv-primary);
}

/* Full-width variant (e.g. plan cards) */
.bv-btn--block .elementor-button,
a.bv-btn--block,
button.bv-btn--block {
	width: 100%;
}

/* Badge: small pill label */
.bv-badge,
.bv-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: var(--bv-space-1);
	font-size: var(--bv-fs-xs);
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--bv-primary-soft);
	color: var(--bv-primary);
}
.bv-badge--success { background: var(--bv-success-soft); color: var(--bv-success); }
.bv-badge--neutral { background: var(--bv-bg); color: var(--bv-text-muted); }

/* Text helpers */
.bv-eyebrow,
.bv-eyebrow .elementor-heading-title {
	font-size: var(--bv-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bv-primary);
}
.bv-muted,
.bv-muted p {
	color: var(--bv-text-muted);
	font-size: var(--bv-fs-sm);
}

/* Section wrapper: consistent vertical rhythm + max width */
.bv-section {
	padding-top: var(--bv-space-16);
	padding-bottom: var(--bv-space-16);
}
.bv-section > .e-con-inner {
	max-width: var(--bv-container);
}

@media (max-width: 767px) {
	.bv-section {
		padding-top: var(--bv-space-12);
		padding-bottom: var(--bv-space-12);
	}
	.bv-card { padding: var(--bv-space-4); }
}