/* ==========================================================================
   The Capital — Global Button Styles
   Overrides Elementor's default button size presets and adds brand styles.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Size Presets  (XS / SM / MD / LG / XL)
   ------------------------------------------------------------------ */
.elementor-button.elementor-size-xs {
	padding: 8px 18px;
	font-size: 12px;
	line-height: 1.4;
}

.elementor-button.elementor-size-sm {
	padding: 10px 24px;
	font-size: 14px;
	line-height: 1.4;
	min-width: 138px;
}

.elementor-button.elementor-size-md {
	padding: 14px 32px;
	font-size: 14px;
	line-height: 1.4;
}

.elementor-button.elementor-size-lg {
	padding: 18px 40px;
	font-size: 15px;
	line-height: 1.4;
}

.elementor-button.elementor-size-xl {
	padding: 22px 52px;
	font-size: 16px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   2. Base Button Reset
   Applies to ALL Elementor buttons for a consistent starting point.
   ------------------------------------------------------------------ */
/* [type="button"]:focus, [type="submit"]:focus, button:focus {
	background: none !important;
} */

body .et_pb_button {
	padding: 8px 18px;
	font-size: 12px;
	line-height: 1.4;
}

body .et_pb_button,
body .elementor-button {
	font-family: var(--tc-font-body);
	font-weight: 700;
	/* text-transform: uppercase; */
	border-radius: 0 !important;
	border: 1px solid transparent;
	transition: background-color 0.25s ease,
	            color 0.25s ease,
	            border-color 0.25s ease,
	            box-shadow 0.25s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

body .et_pb_button,
body .button-gold .elementor-button,
body .button-gold.elementor-button {
	background-color: var(--tc-gold) !important;
	color: var(--tc-black) !important;
	border-color: var(--tc-gold) !important;
	text-transform: uppercase;
}

body .button-gold .elementor-button .elementor-button-icon svg {
	fill: var(--tc-black) !important;
}

body .button-gold .elementor-button:hover .elementor-button-icon svg {
	fill: var(--tc-white) !important;
}

body .button-gold--reverse .elementor-button:hover {
	background-color: var(--tc-gold) !important;
	color: var(--tc-black) !important;
	border-color: var(--tc-gold) !important;
}

body .button-gold--reverse .elementor-button:hover .e-font-icon-svg {
	fill: var(--tc-black) !important;
}

body .button-gold--reverse .elementor-button {
	background-color: var(--tc-black) !important;
	color: var(--tc-white) !important;
	border-color: var(--tc-gold) !important;
}

body .et_pb_button:hover,
body .button-gold .elementor-button:hover,
body .button-gold.elementor-button:hover {
	background-color: var(--tc-black) !important;
	color: var(--tc-white) !important;
	border-color: var(--tc-gold) !important;
}

body .elementor-button:hover {
	background-color: var(--tc-black);
	color: var(--tc-white);
}

/* Inherit font on inner Elementor wrappers */
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ------------------------------------------------------------------
   3. Primary Button  — Gold background
   Usage: Add CSS class  tc-btn-primary  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-primary,
.elementor-widget-button .elementor-button.tc-btn-primary {
	background-color: var(--tc-gold) !important;
	color: var(--tc-black) !important;
	border-color: var(--tc-gold) !important;
}

.elementor-button.tc-btn-primary:hover,
.elementor-widget-button .elementor-button.tc-btn-primary:hover {
	background-color: var(--tc-gold-hover) !important;
	border-color: var(--tc-gold-hover) !important;
	color: var(--tc-black) !important;
}

/* ------------------------------------------------------------------
   4. Secondary Button — Black background
   Usage: Add CSS class  tc-btn-secondary  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-secondary,
.elementor-widget-button .elementor-button.tc-btn-secondary {
	background-color: var(--tc-black) !important;
	color: var(--tc-white) !important;
	border-color: var(--tc-black) !important;
}

.elementor-button.tc-btn-secondary:hover,
.elementor-widget-button .elementor-button.tc-btn-secondary:hover {
	background-color: #222 !important;
	border-color: #222 !important;
	color: var(--tc-white) !important;
}

/* ------------------------------------------------------------------
   5. Outline Gold — Transparent with gold border
   Usage: Add CSS class  tc-btn-outline-gold  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-outline-gold,
.elementor-widget-button .elementor-button.tc-btn-outline-gold {
	background-color: transparent !important;
	color: var(--tc-gold) !important;
	border-color: var(--tc-gold) !important;
}

.elementor-button.tc-btn-outline-gold:hover,
.elementor-widget-button .elementor-button.tc-btn-outline-gold:hover {
	background-color: var(--tc-gold) !important;
	color: var(--tc-black) !important;
}

/* ------------------------------------------------------------------
   6. Outline Black — Transparent with black border
   Usage: Add CSS class  tc-btn-outline-black  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-outline-black,
.elementor-widget-button .elementor-button.tc-btn-outline-black {
	background-color: transparent !important;
	color: var(--tc-black) !important;
	border-color: var(--tc-black) !important;
}

.elementor-button.tc-btn-outline-black:hover,
.elementor-widget-button .elementor-button.tc-btn-outline-black:hover {
	background-color: var(--tc-black) !important;
	color: var(--tc-white) !important;
}

/* ------------------------------------------------------------------
   7. Outline White — For dark backgrounds
   Usage: Add CSS class  tc-btn-outline-white  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-outline-white,
.elementor-widget-button .elementor-button.tc-btn-outline-white {
	background-color: transparent !important;
	color: var(--tc-white) !important;
	border-color: var(--tc-white) !important;
}

.elementor-button.tc-btn-outline-white:hover,
.elementor-widget-button .elementor-button.tc-btn-outline-white:hover {
	background-color: var(--tc-white) !important;
	color: var(--tc-black) !important;
}

/* ------------------------------------------------------------------
   8. Text Link Button — No background, underline on hover
   Usage: Add CSS class  tc-btn-text  to the button widget.
   ------------------------------------------------------------------ */
.elementor-button.tc-btn-text,
.elementor-widget-button .elementor-button.tc-btn-text {
	background-color: transparent !important;
	color: var(--tc-gold) !important;
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-decoration: none !important;
	position: relative;
}

.elementor-button.tc-btn-text::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--tc-gold);
	transition: width 0.3s ease;
}

.elementor-button.tc-btn-text:hover::after {
	width: 100%;
}

/* ------------------------------------------------------------------
   9. Button Icon Spacing
   ------------------------------------------------------------------ */
.elementor-button .elementor-button-icon {
	transition: transform 0.25s ease;
}

.elementor-button:hover .elementor-button-icon {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------
   10. Responsive Adjustments
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.elementor-button.elementor-size-lg {
		padding: 14px 32px;
		font-size: 14px;
	}

	.elementor-button.elementor-size-xl {
		padding: 18px 40px;
		font-size: 15px;
	}
}