/*
 * CaseCreator — Components Stylesheet
 *
 * Shared utility components: buttons, forms, badges, containers.
 * Header styles live in header.css; footer styles in footer.css.
 */

/* =========================================================================
   Container
   ========================================================================= */
.container {
	width: 100%;
	max-width: var( --cc-container-max );
	margin-inline: auto;
	padding-inline: var( --cc-container-pad );
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: var( --cc-font-primary );
	border-radius: var( --cc-radius-md );
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var( --cc-transition ), color var( --cc-transition ),
	            border-color var( --cc-transition ), opacity var( --cc-transition );
	white-space: nowrap;
	text-decoration: none;
	line-height: 1.25;
}

.btn--primary {
	background-color: var( --cc-primary );
	color: var( --cc-white );
	border-color: var( --cc-primary );
}

.btn--primary:hover {
	background-color: var( --cc-primary-hover );
	border-color: var( --cc-primary-hover );
}

.btn--accent {
	background-color: var( --cc-accent );
	color: var( --cc-primary );
	border-color: var( --cc-accent );
}

.btn--accent:hover {
	opacity: 0.88;
}

.btn--outline {
	background-color: transparent;
	color: var( --cc-primary );
	border-color: var( --cc-primary );
}

.btn--outline:hover {
	background-color: var( --cc-primary );
	color: var( --cc-white );
}

.btn--sm {
	padding: 0.375rem 0.875rem;
	font-size: 0.875rem;
}

.btn--lg {
	padding: 0.875rem 2rem;
	font-size: 1.0625rem;
}

/* =========================================================================
   Badges / Pills
   ========================================================================= */
.cc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
}

.cc-badge--accent {
	background-color: var( --cc-accent );
	color: var( --cc-primary );
}

.cc-badge--pink {
	background-color: var( --cc-accent-alt );
	color: var( --cc-white );
}

/* Eyebrow label (small label above headings) */
.cc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --cc-mid-grey );
}

.cc-eyebrow span {
	display: inline-block;
	width: 20px;
	height: 2px;
	background-color: var( --cc-accent );
	border-radius: 1px;
}

/* =========================================================================
   Forms — Generic
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	font-family: var( --cc-font-primary );
	font-size: 0.9375rem;
	color: var( --cc-text );
	background: var( --cc-white );
	border: 1.5px solid var( --cc-light-grey );
	border-radius: var( --cc-radius-md );
	padding: 0.625rem 0.875rem;
	width: 100%;
	outline: none;
	transition: border-color var( --cc-transition );
	appearance: none;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var( --cc-primary );
}

label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.375rem;
	color: var( --cc-text );
}

/* =========================================================================
   Mini-Cart Sidebar (global drawer — rendered in header.php)
   ========================================================================= */
.mini-cart-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 400px, 100vw );
	background: var( --cc-white );
	z-index: 600;
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}

.mini-cart-sidebar[aria-hidden="false"] {
	transform: translateX( 0 );
}

.mini-cart-sidebar__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: var( --cc-space-lg ) var( --cc-space-lg ) var( --cc-space-md );
	border-bottom: 1px solid var( --cc-light-grey );
	flex-shrink: 0;
}

.mini-cart-sidebar__header h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var( --cc-primary );
	margin-top: 0.25rem;
}

.mini-cart-sidebar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var( --cc-text );
	transition: background-color var( --cc-transition );
	flex-shrink: 0;
}

.mini-cart-sidebar__close:hover {
	background-color: var( --cc-off-white );
}

.mini-cart-sidebar__content {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var( --cc-space-md ) var( --cc-space-lg );
}

/* =========================================================================
   WooCommerce Product Badges
   ========================================================================= */
.cc-product-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.03em;
}

.cc-product-badge--featured {
	background-color: var( --cc-accent );
	color: var( --cc-primary );
}

.cc-product-badge--sale {
	background-color: var( --cc-accent-alt );
	color: var( --cc-white );
}