/*
 * Autopharm - Per-tenant color overrides for Cartzilla template
 * Style ID: 4
 *
 * Override only the variables that differ from Cartzilla defaults.
 * Cartzilla default primary: #f55266 (red/pink)
 * Reference: templates/frontend/cartzilla/assets/css/theme.css :root block
 */

:root,
[data-bs-theme="light"] {
	/* -----------------------------------------------------------------------
	   PRIMARY COLOR
	   Change these three to set the brand color.
	   Use https://www.w3schools.com/colors/colors_rgb.asp to get the RGB triplet.
	----------------------------------------------------------------------- */
	--cz-primary: #01b9a0;
	--cz-primary-rgb: 1, 185, 160;

	/* -----------------------------------------------------------------------
	   DERIVED PRIMARY TONES
	   Sourced from Bootstrap shade/tint functions applied to #01b9a0.
	----------------------------------------------------------------------- */
	--cz-primary-text-emphasis: rgb(0.6, 111, 96);              /* shade-color($primary, 40%) */
	--cz-primary-bg-subtle: rgb(229.6, 247.5, 245);             /* tint-color($primary, 90%) */
	--cz-primary-border-subtle: rgb(204.2, 240, 235);           /* tint-color($primary, 80%) */

	/* -----------------------------------------------------------------------
	   SUCCESS COLOR — kept explicitly green so it isn't overridden
	----------------------------------------------------------------------- */
	--cz-success: #33b36b;
	--cz-success-rgb: 51, 179, 107;

	/* -----------------------------------------------------------------------
	   LINKS  (typically follow primary)
	----------------------------------------------------------------------- */
	--cz-link-color: var(--cz-primary);
	--cz-link-color-rgb: var(--cz-primary-rgb);
	--cz-link-hover-color: var(--cz-primary);
	--cz-link-hover-color-rgb: var(--cz-primary-rgb);

	/* -----------------------------------------------------------------------
	   FOCUS RING  (10% opacity of primary)
	----------------------------------------------------------------------- */
	--cz-focus-ring-color: rgba(var(--cz-primary-rgb), 0.1);

	/* -----------------------------------------------------------------------
	   LAYOUT
	   --ap-header-height: logo 43px + py-lg-3 (16×2) + border 1px = 76px
	----------------------------------------------------------------------- */
	--ap-header-height: 76px;
	--ap-sticky-gap: 20px;
	--ap-sticky-pt: 20px;
	--ap-content-px: 1.5rem;
}

/* -----------------------------------------------------------------------
   BUTTONS — component-scoped vars (must be on the element, not :root)
----------------------------------------------------------------------- */
.btn-primary {
	--cz-btn-bg: #01b9a0;
	--cz-btn-border-color: #01b9a0;
	--cz-btn-hover-bg: #009b88;
	--cz-btn-hover-border-color: #009b88;
	--cz-btn-active-bg: #009b88;
	--cz-btn-active-border-color: #009b88;
	--cz-btn-disabled-bg: #01b9a0;
	--cz-btn-disabled-border-color: #01b9a0;
	--cz-btn-color: #fff;
	--cz-btn-hover-color: #fff;
	--cz-btn-active-color: #fff;
}

.btn-outline-primary {
	--cz-btn-color: #01b9a0;
	--cz-btn-border-color: #01b9a0;
	--cz-btn-hover-bg: #01b9a0;
	--cz-btn-hover-border-color: #01b9a0;
	--cz-btn-hover-color: #fff;
	--cz-btn-active-bg: #009b88;
	--cz-btn-active-border-color: #009b88;
	--cz-btn-active-color: #fff;
}

/* -----------------------------------------------------------------------
   DISCOUNT BADGES — bg-danger is used for "- X%" labels in product cards.
   Override to brand color; does NOT affect alert-danger (different selector).
----------------------------------------------------------------------- */
.badge.bg-danger {
	background-color: var(--cz-primary) !important;
	color: #fff !important;
}

/* -----------------------------------------------------------------------
   BODY BACKGROUND + CONTENT WRAPPER CARD EFFECT
   Light gray body exposes the white content-wrapper as a card on the page.
----------------------------------------------------------------------- */
[data-bs-theme="light"] body {
	background-color: #f5f7fa;
	--ap-content-pt: 1.25rem;
}

.ap-newsletter {
	background-color: #e8e8e8 !important;
}

.content-wrapper {
	margin-top: 0.75rem;
	padding-left: var(--ap-content-px);
	padding-right: var(--ap-content-px);
	border: 1px solid var(--bs-border-color);
}