/**
 * Shared button system — neobrutalist CCB (matches form submit style)
 * Load after ccb-a11y.css so press-shadow wins over legacy pill/hover rules.
 * @package Creative_Custom_Boxes
 */

/* ── Base ── */
.ccb-site .btn-primary,
.ccb-site a.btn-primary,
.ccb-site button.btn-primary,
.ccb-site .btn-outline-orange,
.ccb-site a.btn-outline-orange,
.ccb-site button.btn-outline-orange,
.ccb-site .btn-secondary,
.ccb-site a.btn-secondary,
.ccb-site .btn-dark,
.ccb-site a.btn-dark,
.ccb-site .btn-ghost,
.ccb-site a.btn-ghost,
.ccb-site .product-cta,
.ccb-site a.product-cta,
.ccb-site .form-submit,
.ccb-site button.form-submit,
.ccb-site .ccb-form-submit,
.ccb-site .ccb-quote-submit,
.ccb-site .ccb-contact-submit,
.ccb-site .ccb-pdp-submit,
.ccb-site .ccb-cf7-submit,
.ccb-site input.ccb-cf7-submit,
.ccb-site button.ccb-cf7-submit,
.ccb-site .wpcf7 input[type="submit"],
.ccb-site .wpcf7 button[type="submit"],
.ccb-site .top-bar__cta,
.ccb-site a.top-bar__cta,
.ccb-site .ccb-btn--primary,
.ccb-site .ft-top-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	font-family: var(--font-head, 'Urbanist', sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 10px;
	border: 2px solid var(--charcoal, #242424);
	box-shadow: 4px 4px 0 var(--charcoal, #242424);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ccb-site .btn-primary:hover,
.ccb-site a.btn-primary:hover,
.ccb-site button.btn-primary:hover,
.ccb-site .btn-outline-orange:hover,
.ccb-site a.btn-outline-orange:hover,
.ccb-site button.btn-outline-orange:hover,
.ccb-site .btn-secondary:hover,
.ccb-site a.btn-secondary:hover,
.ccb-site .btn-dark:hover,
.ccb-site a.btn-dark:hover,
.ccb-site .btn-ghost:hover,
.ccb-site a.btn-ghost:hover,
.ccb-site .product-cta:hover,
.ccb-site a.product-cta:hover,
.ccb-site .form-submit:hover,
.ccb-site button.form-submit:hover,
.ccb-site .ccb-form-submit:hover,
.ccb-site .ccb-quote-submit:hover,
.ccb-site .ccb-contact-submit:hover,
.ccb-site .ccb-cf7-submit:hover,
.ccb-site .wpcf7 input[type="submit"]:hover,
.ccb-site .wpcf7 button[type="submit"]:hover,
.ccb-site .top-bar__cta:hover,
.ccb-site a.top-bar__cta:hover,
.ccb-site .ft-top-cta:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--charcoal, #242424);
}

.ccb-site .btn-primary:active,
.ccb-site a.btn-primary:active,
.ccb-site .btn-outline-orange:active,
.ccb-site .btn-secondary:active,
.ccb-site .btn-dark:active,
.ccb-site .btn-ghost:active,
.ccb-site .product-cta:active,
.ccb-site .form-submit:active,
.ccb-site .ccb-form-submit:active,
.ccb-site .ccb-cf7-submit:active,
.ccb-site .wpcf7 input[type="submit"]:active,
.ccb-site .top-bar__cta:active {
	transform: translate(4px, 4px);
	box-shadow: none;
}

/* ── Primary (orange fill) ── */
.ccb-site .btn-primary,
.ccb-site a.btn-primary,
.ccb-site button.btn-primary,
.ccb-site .product-cta,
.ccb-site a.product-cta,
.ccb-site .form-submit,
.ccb-site button.form-submit,
.ccb-site .ccb-form-submit,
.ccb-site .ccb-quote-submit,
.ccb-site .ccb-contact-submit,
.ccb-site .ccb-pdp-submit,
.ccb-site .ccb-cf7-submit,
.ccb-site input.ccb-cf7-submit,
.ccb-site button.ccb-cf7-submit,
.ccb-site .wpcf7 input[type="submit"],
.ccb-site .wpcf7 button[type="submit"],
.ccb-site .top-bar__cta,
.ccb-site a.top-bar__cta,
.ccb-site .ft-top-cta {
	padding: 12px 28px;
	color: var(--charcoal, #242424) !important;
	background: var(--orange, #F59A57) !important;
	border-color: var(--charcoal, #242424) !important;
}

.ccb-site .btn-primary:hover,
.ccb-site a.btn-primary:hover,
.ccb-site .product-cta:hover,
.ccb-site .form-submit:hover,
.ccb-site .ccb-form-submit:hover,
.ccb-site .ccb-cf7-submit:hover,
.ccb-site .wpcf7 input[type="submit"]:hover,
.ccb-site .top-bar__cta:hover,
.ccb-site .ft-top-cta:hover {
	background: var(--orange-h, #e88a42) !important;
	color: var(--charcoal, #242424) !important;
}

/* ── Outline (light surfaces) ── */
.ccb-site .btn-outline-orange,
.ccb-site a.btn-outline-orange,
.ccb-site button.btn-outline-orange {
	padding: 11px 27px;
	color: var(--charcoal, #242424) !important;
	background: #fff !important;
	border-color: var(--charcoal, #242424) !important;
}

.ccb-site .btn-outline-orange:hover,
.ccb-site a.btn-outline-orange:hover {
	background: var(--orange, #F59A57) !important;
	color: var(--charcoal, #242424) !important;
	border-color: var(--charcoal, #242424) !important;
}

/* ── Secondary (dark / hero bands) ── */
.ccb-site .hero .btn-secondary,
.ccb-site .quote-section .btn-secondary,
.ccb-site .section-dark .btn-secondary {
	padding: 11px 27px;
	color: #fff !important;
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}

.ccb-site .hero .btn-secondary:hover,
.ccb-site .quote-section .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* Hero primary on dark — keep orange fill, stronger shadow */
.ccb-site .hero .btn-primary,
.ccb-site .quote-section .btn-primary {
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

.ccb-site .hero .btn-primary:hover,
.ccb-site .quote-section .btn-primary:hover {
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ── Dark fill ── */
.ccb-site .btn-dark,
.ccb-site a.btn-dark {
	padding: 12px 28px;
	color: #fff !important;
	background: var(--charcoal, #242424) !important;
	border-color: var(--charcoal, #242424) !important;
	box-shadow: 4px 4px 0 #0f0f0f;
}

.ccb-site .btn-dark:hover,
.ccb-site a.btn-dark:hover {
	background: #0f0f0f !important;
	color: #fff !important;
	box-shadow: 2px 2px 0 #0f0f0f;
}

/* ── Ghost (subtle on light) ── */
.ccb-site .btn-ghost,
.ccb-site a.btn-ghost {
	padding: 11px 22px;
	color: var(--charcoal, #242424) !important;
	background: #fff !important;
	border-color: #d8d8d8 !important;
	box-shadow: 3px 3px 0 #e8e8e8;
}

.ccb-site .btn-ghost:hover,
.ccb-site a.btn-ghost:hover {
	border-color: var(--orange, #F59A57) !important;
	color: var(--orange, #F59A57) !important;
	background: #fff !important;
	box-shadow: 2px 2px 0 #e8e8e8;
}

/* ── Dark CTA band (About, Terms, Privacy) ── */
.ccb-site .ccb-about-cta .btn-primary,
.ccb-site .ccb-about-cta a.btn-primary {
	color: var(--charcoal, #242424) !important;
	background: var(--orange, #F59A57) !important;
	border-color: var(--charcoal, #242424) !important;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.ccb-site .ccb-about-cta .btn-outline-orange,
.ccb-site .ccb-about-cta a.btn-outline-orange {
	background: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.85) !important;
	color: #fff !important;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}

.ccb-site .ccb-about-cta .btn-outline-orange:hover,
.ccb-site .ccb-about-cta a.btn-outline-orange:hover {
	background: var(--orange, #F59A57) !important;
	border-color: var(--charcoal, #242424) !important;
	color: var(--charcoal, #242424) !important;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* ── Compact: header, product cards, top bar ── */
.ccb-site .header__actions .btn-primary,
.ccb-site .header__quote-cta,
.ccb-site .product-cta,
.ccb-site a.product-cta {
	padding: 10px 20px;
	font-size: 13px;
	box-shadow: 3px 3px 0 var(--charcoal, #242424);
}

.ccb-site .header__actions .btn-primary:hover,
.ccb-site .header__quote-cta:hover,
.ccb-site .product-cta:hover {
	box-shadow: 2px 2px 0 var(--charcoal, #242424);
}

.ccb-site .top-bar__cta,
.ccb-site a.top-bar__cta {
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 8px;
	box-shadow: 2px 2px 0 #0f0f0f;
}

.ccb-site .top-bar__cta:hover,
.ccb-site a.top-bar__cta:hover {
	box-shadow: 1px 1px 0 #0f0f0f;
}

/* ── Full-width form submits (match header CTA neobrutalist, not legacy pill) ── */
.ccb-site .form-submit,
.ccb-site .ccb-form-submit,
.ccb-site .ccb-quote-submit,
.ccb-site .ccb-contact-submit,
.ccb-site .ccb-pdp-submit,
.ccb-site .ccb-cf7-submit,
.ccb-site input.ccb-cf7-submit,
.ccb-site button.ccb-cf7-submit,
.ccb-site .wpcf7 input[type="submit"],
.ccb-site .wpcf7 button[type="submit"] {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 16px 24px !important;
	font-weight: 700 !important;
	justify-content: center !important;
	text-align: center;
	border-radius: 10px !important;
	color: var(--charcoal, #242424) !important;
	background: var(--orange, #F59A57) !important;
	border: 2px solid var(--charcoal, #242424) !important;
	box-shadow: 4px 4px 0 var(--charcoal, #242424) !important;
	-webkit-appearance: none;
	appearance: none;
}

.ccb-site .ccb-cf7-field--submit,
.ccb-site .ccb-cf7-form .ccb-cf7-field--submit {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin-top: 8px;
}

.ccb-site .ccb-cf7-field--submit > p,
.ccb-site .ccb-cf7-form .ccb-cf7-field--submit > p {
	display: block;
	margin: 0;
	width: 100%;
}

.ccb-site .wpcf7-form input[type="submit"]:disabled,
.ccb-site .wpcf7-form button[type="submit"]:disabled {
	opacity: 0.92;
	cursor: wait;
}

/* ── Focus ── */
.ccb-site .btn-primary:focus-visible,
.ccb-site .btn-outline-orange:focus-visible,
.ccb-site .btn-secondary:focus-visible,
.ccb-site .btn-dark:focus-visible,
.ccb-site .product-cta:focus-visible,
.ccb-site .form-submit:focus-visible,
.ccb-site .ccb-cf7-submit:focus-visible,
.ccb-site .wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--orange, #F59A57);
	outline-offset: 2px;
}

@media (max-width: 575.98px) {
	.ccb-site .hero-actions .btn-primary,
	.ccb-site .hero-actions .btn-secondary,
	.ccb-site .ccb-about-cta__actions .btn-primary,
	.ccb-site .ccb-about-cta__actions .btn-outline-orange {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccb-site .btn-primary,
	.ccb-site .btn-outline-orange,
	.ccb-site .btn-secondary,
	.ccb-site .btn-dark,
	.ccb-site .product-cta,
	.ccb-site .form-submit,
	.ccb-site .top-bar__cta {
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.ccb-site .btn-primary:hover,
	.ccb-site .btn-outline-orange:hover,
	.ccb-site .product-cta:hover,
	.ccb-site .form-submit:hover {
		transform: none;
	}
}