/* _buttons.css */
.buttons-group-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--gap-xl);
}

.buttons-group-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--gap-xl);
}

.buttons-group-row-left {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: var(--gap-xl);
}

.buttons-group-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gap-xl);
}

/* ===================================== */
/* ===== Rounded Rectangle Buttons ===== */
/* ===================================== */

.cta-button,
.neutral-button,
.alert-button,
.success-button {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: var(--rounded-rectangle-button-height);
	gap: var(--gap-lg);
	align-items: center;
	justify-content: center;
	padding: var(--padding-xl) var(--padding-xxxl);
	font-size: var(--font-size-button);
	font-weight: 400;
	font-family: 'Varela Round', sans-serif;
	white-space: nowrap;
	border: none;
	outline: none;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--soft-shadow-button);
	cursor: pointer;
	transition: all 0.5s ease;
}

.buttons-group-row-center .cta-button,
.buttons-group-row-center .neutral-button,
.buttons-group-row-center .alert-button,
.buttons-group-row-center .success-button {
	max-width: var(--screen-min-width);
}

.cta-button {
	background: var(--orange-gradient);
	text-shadow: var(--button-orange-text-shadow);  
	color: var(--button-orange-text);   
}

.cta-button:hover {
	background: var(--orange-gradient-hover);
	transform: scale(1.005);
}

.cta-button:focus {
	border: none;
	outline: 2px solid var(--button-outline);
	box-shadow: var(--soft-shadow-orange-focus-outline);
}

.cta-button.alert {
	background: var(--red-gradient);
	text-shadow: var(--button-alert-text-shadow);
	color: var(--button-alert-text);
}

.cta-button.alert:hover {
	background: var(--red-gradient-hover);
	transform: scale(1.005);
}

.cta-button.alert:focus {
	border: none;
	outline: 2px solid var(--button-outline);
	box-shadow: var(--soft-shadow-alert-focus-outline);	
}

.neutral-button {
	border: 1px solid var(--button-neutral-border);
	background: var(--button-neutral-background);
	color: var(--text-body-neutral);
}

.neutral-button:hover {
	background: var(--button-hover-background);
	border: 1px solid var(--button-hover-border);
}

.neutral-button:focus {
	border: 1px solid transparent;
	outline: 1px solid var(--button-focus-border);
}

.alert-button {
	background: var(--red-gradient);
	color: var(--button-alert-text);
	text-shadow: var(--button-alert-text-shadow);
	font-weight: 400;
}

.alert-button:hover {
	background: var(--red-gradient-hover);
	transform: scale(1.005);
}

.success-button {
	background: var(--green-gradient);
	color: var(--button-success-text);
	text-shadow: var(--button-success-text-shadow);
	font-weight: 400;
}

.success-button:hover {
	background: var(--green-gradient-hover);
	transform: scale(1.005);
}

.cta-button:disabled,
.neutral-button:disabled,
.alert-button:disabled,
.success-button:disabled {
	background: var(--grey-gradient);
	text-shadow: none;
	color: var(--button-disabled-text);
	cursor: not-allowed;
	transform: none;
	opacity: 0.7;
	box-shadow: none;
}

/* ===================================== */
/* ============ Action Buttons ========== */
/* ===================================== */

.shopping-cart-button {
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: var(--icon-size-xl);
	width: var(--icon-size-xl);
}

.shopping-cart-button-badge {
    position: absolute;
    bottom: -5px; /* Adjust as needed for vertical position */
    right: -5px; /* Adjust as needed for horizontal position */
    background: var(--green-gradient);
    color: var(--button-success-text); /* Text color */
	text-shadow: var(--button-success-text-shadow);
    border-radius: var(--border-radius-circle);
    padding: var(--space-0-125) var(--space-0-375);
    font-size: var(--font-size-xs);
    font-weight: bold;
    display: flex; /* Centers the number */
    justify-content: center;
    align-items: center;
    min-width: var(--space-1-5); /* Ensures a circular shape even for single digits */
    height: var(--space-1-5);
	line-height: var(--space-1-5);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: scale(0); /* Initially hidden */
    opacity: 0; /* Initially hidden */
}

.shopping-cart-button-badge.visible {
    transform: scale(1);
    opacity: 1;
}

.filters-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: var(--icon-size-xl);
	width: var(--icon-size-xl);
}