/* ========================================
   SVG Icon Reset
======================================== */

.theme-btn i svg,
.theme-btn i .vj-icon {
	max-width: none;
	width: var(--button-icon-font-size);
	height: var(--button-icon-font-size);
	display: block;
}


/* ========================================
   Base Button Styles
======================================== */

.btn,
.vj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-button-icon, var(--space-xs));
	min-height: var(--control-height);
	padding: 8px 18px;
	border-radius: 999px;
	font-family: var(--font-family-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.btn:focus-visible,
.vj-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(201, 147, 42, 0.4);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-button-group, var(--space-sm));
}

.btn--block,
.vj-btn--block {
	width: 100%;
}


/* ========================================
   Theme Button Base (Pills)
======================================== */

.theme-btn,
.btn.btn--has-icon.theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-md);
	border-radius: var(--radius-button-pill, 1.875rem);
	line-height: var(--button-line-height, 1.25rem);
	text-decoration: none;
	white-space: nowrap;
}


/* ========================================
   Icon Styles
======================================== */

.theme-btn i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--button-icon-size, 2.25rem);
	height: var(--button-icon-size, 2.25rem);
	margin-inline-start: 0;
	border-radius: 50%;
	font-style: normal;
	font-size: var(--button-icon-font-size, 0.8125rem);
	box-sizing: border-box;
	transform: rotate(0deg);
	transform-origin: center center;
	transition:
		transform var(--duration-base, 0.3s) var(--ease-standard, ease),
		background-color var(--duration-base, 0.3s) var(--ease-standard, ease),
		color var(--duration-base, 0.3s) var(--ease-standard, ease),
		border-color var(--duration-base, 0.3s) var(--ease-standard, ease);
}

/* Icon hover rotation (all pill variants) */
.theme-btn:hover i,
.theme-btn:focus-visible i,
.theme-btn:hover > i,
.theme-btn:focus-visible > i {
	transform: rotate(var(--rotate-button-icon-hover, -45deg));
}

/* Symmetrical centering when no trailing icon is present */
.theme-btn:not(.btn--has-icon) {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.theme-btn i {
		transition:
			background-color var(--duration-base, 0.3s) var(--ease-standard, ease),
			color var(--duration-base, 0.3s) var(--ease-standard, ease),
			border-color var(--duration-base, 0.3s) var(--ease-standard, ease);
	}

	.theme-btn:hover i,
	.theme-btn:focus-visible i {
		transform: rotate(0deg) !important;
	}
}


/* ========================================
   Primary Button Variant (style-one)
   Light bg: yellow button, blue icon
   Hover: blue button
======================================== */

.theme-btn.style-one {
	min-height: calc(var(--button-icon-size, 2.25rem) + (var(--padding-button-pill-y, 0.3125rem) * 2));
	background-color: var(--color-button-primary-bg);
	color: var(--color-button-primary-fg);
	border: 1px solid transparent;
	box-shadow: none;
	transition:
		background-color var(--duration-base, 0.3s) var(--ease-standard, ease),
		color var(--duration-base, 0.3s) var(--ease-standard, ease),
		border-color var(--duration-base, 0.3s) var(--ease-standard, ease);
}

.theme-btn.style-one.btn--has-icon {
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-end, 0.3125rem) var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-start, 1.5625rem);
}

.theme-btn.style-one:not(.btn--has-icon) {
	justify-content: center;
	padding: var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-start, 1.5625rem);
}

.theme-btn.style-one i {
	background-color: var(--color-button-on-brand-bg);
	color: var(--color-button-secondary-bg-hover);
}

.theme-btn.style-one:hover,
.theme-btn.style-one:focus-visible {
	background-color: var(--color-button-primary-bg-hover);
	color: var(--color-button-primary-fg-hover);
}

.theme-btn.style-one:hover i,
.theme-btn.style-one:focus-visible i {
	background-color: var(--color-button-primary-icon-bg-hover);
	color: var(--color-button-primary-icon-fg-hover);
}


/* ========================================
   Secondary Button Variant
   Light bg: blue button, light icon
   Hover: yellow button
======================================== */

.theme-btn.style-one.btn--secondary {
	background-color: var(--color-button-secondary-bg);
	color: var(--color-text-on-primary);
}

.theme-btn.style-one.btn--secondary i {
	background-color: var(--color-button-secondary-icon-bg);
	color: var(--color-button-secondary-icon-fg);
}

.theme-btn.style-one.btn--secondary:hover,
.theme-btn.style-one.btn--secondary:focus-visible {
	background-color: var(--color-button-secondary-bg-hover);
	color: var(--color-text-on-secondary);
}

.theme-btn.style-one.btn--secondary:hover i,
.theme-btn.style-one.btn--secondary:focus-visible i {
	background-color: var(--color-button-secondary-icon-bg-hover);
	color: var(--color-button-secondary-icon-fg-hover);
}


/* ========================================
   Danger Button Variant
======================================== */

.theme-btn.style-one.btn--danger {
	background-color: var(--color-error-default);
	color: #fff;
}

.theme-btn.style-one.btn--danger i {
	background-color: var(--surface-grey-default);
	color: var(--color-error-default);
}

.theme-btn.style-one.btn--danger:hover,
.theme-btn.style-one.btn--danger:focus-visible {
	background-color: var(--color-error-dark, #991b1b);
	color: #fff;
}

.theme-btn.style-one.btn--danger:hover i,
.theme-btn.style-one.btn--danger:focus-visible i {
	color: var(--color-error-dark, #991b1b);
}


/* ========================================
   On-Brand / On-Dark Context Modifier
   (Primary on colored/dark backgrounds)
   Normal: white button, blue text, yellow icon
   Hover: yellow button, white icon
======================================== */

.theme-btn.style-one.btn--on-brand,
.theme-btn.style-one.btn--on-dark {
	background-color: var(--color-button-on-brand-bg);
	color: var(--color-button-on-brand-fg);
}

.theme-btn.style-one.btn--on-brand i,
.theme-btn.style-one.btn--on-dark i {
	background-color: var(--color-button-on-brand-icon-bg);
	color: var(--color-button-on-brand-icon-fg);
}

.theme-btn.style-one.btn--on-brand:hover,
.theme-btn.style-one.btn--on-brand:focus-visible,
.theme-btn.style-one.btn--on-dark:hover,
.theme-btn.style-one.btn--on-dark:focus-visible {
	background-color: var(--color-button-on-brand-bg-hover);
	color: var(--color-button-on-brand-fg-hover);
}

.theme-btn.style-one.btn--on-brand:hover i,
.theme-btn.style-one.btn--on-brand:focus-visible i,
.theme-btn.style-one.btn--on-dark:hover i,
.theme-btn.style-one.btn--on-dark:focus-visible i {
	background-color: var(--color-button-on-brand-icon-bg-hover);
	color: var(--color-button-on-brand-icon-fg-hover);
}


/* ========================================
   Outlined Button Variant (style-two)
   Light bg: grey border, dark text, outlined icon
   Hover: yellow border + text + icon
======================================== */

.theme-btn.style-two {
	min-height: calc(var(--button-icon-size, 2.25rem) + (var(--padding-button-pill-y, 0.3125rem) * 2));
	background-color: transparent;
	border: var(--border-width-1, 1px) solid var(--color-button-outline-border);
	color: var(--color-button-outline-fg);
	box-shadow: none;
	transition:
		background-color var(--duration-base, 0.3s) var(--ease-standard, ease),
		color var(--duration-base, 0.3s) var(--ease-standard, ease),
		border-color var(--duration-base, 0.3s) var(--ease-standard, ease);
}

.theme-btn.style-two.btn--has-icon {
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-end, 0.3125rem) var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-start, 1.5625rem);
}

.theme-btn.style-two:not(.btn--has-icon) {
	justify-content: center;
	padding: var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-start, 1.5625rem);
}

/* Icon disc: outlined circle matching button border */
.theme-btn.style-two i {
	background-color: transparent;
	border: var(--border-width-1, 1px) solid var(--color-button-outline-border);
	color: var(--color-button-outline-icon-fg);
}

/* Hover: yellow border + text + icon */
.theme-btn.style-two:hover,
.theme-btn.style-two:focus-visible {
	background-color: transparent;
	color: var(--color-button-outline-fg-hover);
	border-color: var(--color-button-outline-border-hover);
}

.theme-btn.style-two:hover i,
.theme-btn.style-two:focus-visible i {
	background-color: transparent;
	border-color: var(--color-button-outline-border-hover);
	color: var(--color-button-outline-icon-fg-hover);
}


/* ========================================
   Outlined on Dark / Colored Backgrounds
   Normal: white border + text + icon
   Hover: yellow border + text + icon
======================================== */

.theme-btn.style-two.btn--on-dark,
.theme-btn.style-two.btn--on-brand {
	color: var(--color-button-outline-on-dark-fg);
	border-color: var(--color-button-outline-on-dark-border);
}

.theme-btn.style-two.btn--on-dark i,
.theme-btn.style-two.btn--on-brand i {
	background-color: transparent;
	border-color: var(--color-button-outline-on-dark-border);
	color: var(--color-button-outline-on-dark-icon-fg);
}

.theme-btn.style-two.btn--on-dark:hover,
.theme-btn.style-two.btn--on-dark:focus-visible,
.theme-btn.style-two.btn--on-brand:hover,
.theme-btn.style-two.btn--on-brand:focus-visible {
	background-color: transparent;
	color: var(--color-button-outline-on-dark-fg-hover);
	border-color: var(--color-button-outline-on-dark-border-hover);
}

.theme-btn.style-two.btn--on-dark:hover i,
.theme-btn.style-two.btn--on-dark:focus-visible i,
.theme-btn.style-two.btn--on-brand:hover i,
.theme-btn.style-two.btn--on-brand:focus-visible i {
	background-color: transparent;
	border-color: var(--color-button-outline-on-dark-border-hover);
	color: var(--color-button-outline-on-dark-icon-fg-hover);
}


/* ========================================
   Plain Compact Buttons (Forms, Cards)
======================================== */

.btn--primary:not(.theme-btn),
.vj-btn--primary:not(.theme-btn) {
	background: var(--color-button-primary-bg);
	color: var(--color-button-primary-fg);
	border-color: var(--color-button-primary-bg);
}

.btn--primary:not(.theme-btn):hover,
.btn--primary:not(.theme-btn):focus-visible {
	background: var(--color-button-primary-bg-hover);
	border-color: var(--color-button-primary-bg-hover);
	color: var(--color-button-primary-fg-hover);
}

.btn--accent:not(.theme-btn),
.btn--secondary:not(.theme-btn),
.vj-btn--accent:not(.theme-btn),
.vj-btn--secondary:not(.theme-btn) {
	background: var(--color-button-secondary-bg);
	color: var(--color-text-on-primary);
	border-color: var(--color-button-secondary-bg);
}

.btn--accent:not(.theme-btn):hover,
.btn--accent:not(.theme-btn):focus-visible,
.btn--secondary:not(.theme-btn):hover,
.btn--secondary:not(.theme-btn):focus-visible {
	background: var(--color-button-secondary-bg-hover);
	border-color: var(--color-button-secondary-bg-hover);
	color: var(--color-text-on-secondary);
}

.btn--outline:not(.theme-btn),
.vj-btn--outline:not(.theme-btn) {
	background: transparent;
	color: var(--color-button-outline-fg);
	border-color: var(--color-button-outline-border);
}

.btn--outline:not(.theme-btn):hover,
.btn--outline:not(.theme-btn):focus-visible {
	background: transparent;
	border-color: var(--color-button-outline-border-hover);
	color: var(--color-button-outline-fg-hover);
}

.btn--ghost,
.vj-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover,
.vj-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.btn--text,
.vj-btn--text {
	background: transparent;
	color: var(--color-text-secondary);
	border-color: transparent;
	padding: 6px 10px;
	min-height: auto;
}

.btn--text:hover,
.vj-btn--text:hover {
	color: var(--color-error-default);
	background: var(--surface-error-subtle);
}

.btn--danger:not(.theme-btn),
.vj-btn--danger:not(.theme-btn) {
	background: var(--color-error-default);
	color: #fff;
	border-color: var(--color-error-default);
}

.btn--danger:not(.theme-btn):hover,
.btn--danger:not(.theme-btn):focus-visible {
	background: var(--color-error-dark, #991b1b);
	border-color: var(--color-error-dark, #991b1b);
	color: #fff;
}


/* ========================================
   Card Button Modifier (.vj-btn--card)
   - Align text to the left, icon to the right
   - Full width layout, centered vertically
   - Consistent padding & spacing
   ======================================== */

.theme-btn.vj-btn--card,
.theme-btn.btn--card {
	display: inline-flex !important;
	width: 100% !important;
	justify-content: space-between !important;
}

.theme-btn.vj-btn--card.btn--has-icon,
.theme-btn.btn--card.btn--has-icon {
	padding: var(--padding-button-pill-y, 0.3125rem) var(--padding-button-pill-end, 0.3125rem) var(--padding-button-pill-y, 0.3125rem) var(--space-md, 1.25rem) !important;
}

.theme-btn.vj-btn--card:not(.btn--has-icon),
.theme-btn.btn--card:not(.btn--has-icon) {
	padding: var(--padding-button-pill-y, 0.3125rem) var(--space-md, 1.25rem) !important;
}


/* ========================================
   Responsive / Size Modifiers
======================================== */

.btn--sm,
.vj-btn--sm {
	min-height: 30px;
	padding: 4px 14px;
	font-size: 12px;
}

.btn--lg,
.vj-btn--lg {
	padding: var(--padding-button-lg, 12px 24px);
	font-size: 14px;
}

.theme-btn.btn--sm {
	min-height: calc(var(--button-icon-size) + (var(--space-xs) * 2));
	font-size: var(--font-size-sm);
}

.theme-btn.btn--sm.btn--has-icon {
	padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--padding-md);
}

.theme-btn.btn--sm:not(.btn--has-icon) {
	padding: var(--space-xs) var(--padding-md);
}

.theme-btn.btn--sm i {
	width: calc(var(--button-icon-size) - var(--space-xs));
	height: calc(var(--button-icon-size) - var(--space-xs));
}

.theme-btn.btn--lg {
	font-size: var(--font-size-lg);
}

.theme-btn.btn--lg.style-two {
	padding-block: var(--padding-button-pill-y);
}