/* ============================================================
 * BAMMAT DESIGN SYSTEM  —  Phase 0 foundation
 *
 * The single source of truth for the site's look: warm & friendly,
 * grey canvas with white cards, subtle shadows, #517dfc + neutrals.
 *
 * This file defines:
 *   1. Design tokens (CSS custom properties)
 *   2. Global canvas (grey background so white cards pop)
 *   3. Reusable component classes (.bm-card, .bm-btn, .bm-pill, …)
 *
 * Page-specific templates use these tokens/classes so the whole
 * site stays coherent. Change a token here → it changes everywhere.
 * ========================================================== */

:root{
	/* ---- brand ---- */
	--bm-blue:#517dfc;
	--bm-blue-dark:#3a5fd9;
	--bm-blue-tint:#eef3ff;
	--bm-green:#2fbf71;
	--bm-green-tint:#e8f9f0;
	--bm-red:#e2504a;
	--bm-red-tint:#fdecec;

	/* ---- ink (text) ---- */
	--bm-ink:#1c2333;
	--bm-ink-2:#5b6479;
	--bm-ink-3:#8b93a7;

	/* ---- surfaces ---- */
	--bm-bg:#f6f7fb;        /* grey page canvas */
	--bm-card:#ffffff;      /* white cards */
	--bm-line:#eceef3;      /* hairline dividers */
	--bm-line-2:#e0e3ec;    /* slightly stronger border */

	/* ---- radius ---- */
	--bm-radius:16px;
	--bm-radius-sm:12px;
	--bm-radius-pill:20px;

	/* ---- shadow (subtle) ---- */
	--bm-shadow:0 1px 2px rgba(28,35,51,.04), 0 8px 24px rgba(28,35,51,.06);
	--bm-shadow-sm:0 1px 2px rgba(28,35,51,.05);

	/* ---- spacing scale ---- */
	--bm-sp-1:4px;
	--bm-sp-2:8px;
	--bm-sp-3:12px;
	--bm-sp-4:16px;
	--bm-sp-5:20px;
	--bm-sp-6:24px;
	--bm-sp-8:32px;

	/* ---- type ---- */
	--bm-font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ============================================================
 * 2. GLOBAL CANVAS
 * Grey background so white cards read as distinct surfaces —
 * the core of the mockup's look. Scoped to WooCommerce/account
 * and our custom pages so we don't disturb unrelated areas yet.
 * ========================================================== */

body.woocommerce-cart,
body.woocommerce-checkout,
body.single-product,
body.dokan-store,
body.woocommerce-account,
body.woocommerce-order-received,
body.bammat-page{
	background:var(--bm-bg) !important;
}

/* ============================================================
 * 3. REUSABLE COMPONENTS
 * These classes are the building blocks every custom template
 * uses, so pages look identical by construction.
 * ========================================================== */

/* ---- card ---- */
.bm-card{
	background:var(--bm-card);
	border-radius:var(--bm-radius);
	box-shadow:var(--bm-shadow);
	overflow:hidden;
}
.bm-card--flat{ box-shadow:none; border:1px solid var(--bm-line); }
.bm-card__pad{ padding:var(--bm-sp-6); }

/* ---- section heading ---- */
.bm-h{
	font-family:var(--bm-font);
	font-size:16px; font-weight:700; color:var(--bm-ink);
	letter-spacing:-.01em; margin:0 0 var(--bm-sp-4);
}
.bm-h--lg{ font-size:24px; letter-spacing:-.02em; }

/* ---- primary button ---- */
.bm-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:15px 20px; border:none; border-radius:14px; cursor:pointer;
	font-family:var(--bm-font); font-size:15px; font-weight:700; line-height:1;
	background:var(--bm-blue); color:#fff; text-decoration:none;
	box-shadow:0 6px 16px rgba(81,125,252,.28); transition:background .15s;
}
.bm-btn:hover{ background:var(--bm-blue-dark); color:#fff; }
.bm-btn:active{ transform:translateY(1px); }
.bm-btn--block{ width:100%; }
.bm-btn--ghost{
	background:transparent; color:var(--bm-blue); box-shadow:none;
	border:1.5px solid var(--bm-line-2);
}
.bm-btn--ghost:hover{ background:var(--bm-blue-tint); color:var(--bm-blue); border-color:var(--bm-blue); }

/* ---- pill / badge ---- */
.bm-pill{
	display:inline-flex; align-items:center; gap:5px;
	font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--bm-radius-pill);
	background:var(--bm-blue-tint); color:var(--bm-blue-dark);
}
.bm-pill--green{ background:var(--bm-green-tint); color:var(--bm-green); }
.bm-pill .bm-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- summary row (subtotal / fee / total style) ---- */
.bm-row{
	display:flex; justify-content:space-between; align-items:center;
	font-family:var(--bm-font); font-size:14px; color:var(--bm-ink-2); padding:9px 0;
}
.bm-row .bm-row__val{ color:var(--bm-ink); font-weight:600; }
.bm-row--total{
	padding-top:16px; margin-top:8px; border-top:1px solid var(--bm-line);
	align-items:baseline;
}
.bm-row--total .bm-row__lbl{ font-size:15px; font-weight:700; color:var(--bm-ink); }
.bm-row--total .bm-row__val{ font-size:24px; font-weight:800; letter-spacing:-.02em; }

/* ---- quantity stepper ---- */
.bm-qty{
	display:inline-flex; align-items:center; background:var(--bm-bg);
	border-radius:10px; padding:3px;
}
.bm-qty button{
	width:28px; height:28px; border:none; background:var(--bm-card); border-radius:8px;
	font-size:16px; font-weight:600; color:var(--bm-blue); cursor:pointer;
	box-shadow:var(--bm-shadow-sm); display:flex; align-items:center; justify-content:center; line-height:1;
}
.bm-qty button:active{ transform:scale(.94); }
.bm-qty input{
	width:40px; border:none; background:transparent; text-align:center;
	font-size:14px; font-weight:600; color:var(--bm-ink); -moz-appearance:textfield;
}
.bm-qty input::-webkit-outer-spin-button,
.bm-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---- tip / choice buttons ---- */
.bm-choice{
	flex:1; padding:9px 0; border:1.5px solid var(--bm-line-2); background:var(--bm-card);
	border-radius:10px; font-size:13px; font-weight:600; color:var(--bm-ink-2);
	cursor:pointer; transition:all .12s;
}
.bm-choice:hover{ border-color:var(--bm-blue); color:var(--bm-blue); }
.bm-choice.is-active{ background:var(--bm-blue); border-color:var(--bm-blue); color:#fff; }

/* ---- thumbnail tile ---- */
.bm-thumb{
	width:64px; height:64px; border-radius:12px; background:var(--bm-bg);
	overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bm-thumb img{ width:100%; height:100%; object-fit:contain; }