/*
 * Material Design 3 foundation for the Lubuk Kuih storefront.
 *
 * M3 is a system (shape scale, tonal elevation, type scale, component
 * recipes) rather than a fixed palette, so the tonal palettes below are
 * seeded from the brand's own heritage colours — banana-leaf green as
 * primary, charcoal-grill orange as tertiary, warm cream as the neutral
 * surface ramp — instead of Google's default purple. That keeps the
 * kampung/warisan identity the merchant asked for while adopting M3's
 * structure.
 *
 * Reference: https://m3.material.io/
 */

:root {
	/* ---- M3 colour roles (light scheme) ---- */
	--md-primary: #3e6b44;
	--md-on-primary: #ffffff;
	--md-primary-container: #bdedbf;
	--md-on-primary-container: #06210f;

	--md-secondary: #52634f;
	--md-on-secondary: #ffffff;
	--md-secondary-container: #d5e8cf;
	--md-on-secondary-container: #101f10;

	--md-tertiary: #c1622d;
	--md-on-tertiary: #ffffff;
	--md-tertiary-container: #ffdbc8;
	--md-on-tertiary-container: #351000;

	--md-error: #ba1a1a;
	--md-on-error: #ffffff;
	--md-error-container: #ffdad6;
	--md-on-error-container: #410002;

	--md-surface: #fdfbf3;
	--md-on-surface: #1b1c18;
	--md-surface-variant: #e0e4d9;
	--md-on-surface-variant: #43483f;

	--md-surface-container-lowest: #ffffff;
	--md-surface-container-low: #fbf6ee;
	--md-surface-container: #f4f0e7;
	--md-surface-container-high: #eeeae1;
	--md-surface-container-highest: #e8e4db;

	--md-outline: #73796e;
	--md-outline-variant: #c3c8bc;
	--md-inverse-surface: #30312c;
	--md-inverse-on-surface: #f1f1e9;
	--md-scrim: rgba(0, 0, 0, 0.32);

	/* ---- M3 shape scale ---- */
	--md-corner-xs: 4px;
	--md-corner-sm: 8px;
	--md-corner-md: 12px;
	--md-corner-lg: 16px;
	--md-corner-xl: 28px;
	--md-corner-full: 9999px;

	/* ---- M3 elevation ---- */
	--md-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
	--md-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
	--md-elevation-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

	/* ---- M3 motion ---- */
	--md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-duration-short: 150ms;
	--md-duration-medium: 250ms;

	/* ---- Type ---- */
	--md-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/*
	 * Aliases kept so checkout.css / quickbuy.css keep working without
	 * being rewritten line by line. New rules should use the --md-* tokens.
	 */
	--tj-accent: var(--md-primary);
	--tj-accent-warm: var(--md-tertiary);
	--tj-cream: var(--md-surface);
	--tj-ink: var(--md-on-surface);
	--tj-radius-lg: var(--md-corner-lg);
	--tj-radius-md: var(--md-corner-md);
	--tj-radius-sm: var(--md-corner-sm);
	--tj-radius-pill: var(--md-corner-full);
	--tj-shadow-card: var(--md-elevation-1);
	--tj-shadow-card-hover: var(--md-elevation-2);
	--tj-font: var(--md-font);
}

body {
	padding-top: 64px;
	background: var(--md-surface);
	color: var(--md-on-surface);
	font-family: var(--md-font);
}

body.woocommerce-page,
body.home,
body.single-product {
	font-family: var(--md-font);
}

.tj-hidden {
	display: none !important;
}

/* ============================================================
   Top app bar (M3) — small variant, 64px, surface-coloured
   ============================================================ */
.tj-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: var(--md-surface);
	border-bottom: 1px solid var(--md-outline-variant);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	z-index: 1000;
	font-family: var(--md-font);
}

.tj-site-header-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.2;
	text-decoration: none;
}

/* title-large */
.tj-site-header-logo {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--md-on-surface);
}

/* label-medium */
.tj-site-header-tagline {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: var(--md-tertiary);
}

/* M3 icon button: 48px touch target, 40px state layer */
.tj-site-header-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--md-corner-full);
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: background-color var(--md-duration-short) var(--md-ease-standard);
}

.tj-site-header-cart:hover {
	background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.tj-site-header-cart:active {
	background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

/* M3 badge */
.tj-cart-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--md-error);
	color: var(--md-on-error);
	font-size: 11px;
	font-weight: 500;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	border-radius: var(--md-corner-full);
	padding: 0 4px;
}

/* ============================================================
   Buttons (M3) — filled by default, full-corner
   ============================================================ */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order,
.woocommerce input.button,
.tj-share-btn,
.tj-copy-link-btn,
#tj-get-location {
	border-radius: var(--md-corner-full) !important;
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	line-height: 20px;
	min-height: 40px;
	padding: 10px 24px;
	border: none;
	box-shadow: none;
	transition: box-shadow var(--md-duration-short) var(--md-ease-standard),
		background-color var(--md-duration-short) var(--md-ease-standard);
}

.woocommerce #place_order,
.woocommerce button.button.alt {
	background: var(--md-primary) !important;
	color: var(--md-on-primary) !important;
}

.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover {
	box-shadow: var(--md-elevation-1);
}

/* Text/outlined-ish secondary actions */
#tj-get-location,
.tj-copy-link-btn {
	background: transparent !important;
	color: var(--md-primary) !important;
	border: 1px solid var(--md-outline) !important;
}

#tj-get-location:hover,
.tj-copy-link-btn:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}

/* M3 has no scale-down press; it uses a state layer instead. */
.woocommerce .button:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.woocommerce #place_order:active,
.tj-share-btn:active,
.tj-copy-link-btn:active,
#tj-get-location:active {
	box-shadow: none;
	filter: brightness(0.94);
}

/* ============================================================
   Text fields (M3 outlined)
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border: 1px solid var(--md-outline) !important;
	border-radius: var(--md-corner-xs) !important;
	background: transparent !important;
	color: var(--md-on-surface);
	font-family: var(--md-font);
	font-size: 16px;
	line-height: 24px;
	padding: 14px 16px;
	transition: border-color var(--md-duration-short) var(--md-ease-standard),
		box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--md-primary) !important;
	box-shadow: inset 0 0 0 1px var(--md-primary);
}

.woocommerce form .form-row label {
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--md-on-surface-variant);
}

.woocommerce form .form-row .required {
	color: var(--md-error);
	text-decoration: none;
}

/* ============================================================
   Cards (M3) — filled + outlined variants
   ============================================================ */
#tj-delivery-fields,
.tj-group-progress,
.woocommerce-checkout-review-order,
.woocommerce-checkout-payment {
	border-radius: var(--md-corner-md) !important;
	border: none !important;
}

/* The delivery-method and box-picker cards behave as M3 selectable cards:
   outlined at rest, filled tonal once chosen. */
.tj-method-card,
.tj-box-card {
	background: var(--md-surface-container-low);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--md-corner-md);
	box-shadow: none;
	transition: background-color var(--md-duration-short) var(--md-ease-standard),
		border-color var(--md-duration-short) var(--md-ease-standard),
		box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.tj-method-card:hover,
.tj-box-card:hover {
	background: var(--md-surface-container);
	box-shadow: var(--md-elevation-1);
}

.tj-method-card:active,
.tj-box-card:active {
	background: var(--md-surface-container-high);
	box-shadow: none;
}

/* ============================================================
   FAB (M3) — the WhatsApp button is a textbook FAB
   ============================================================ */
.tj-wa-float {
	border-radius: var(--md-corner-lg) !important;
	box-shadow: var(--md-elevation-3) !important;
	transition: box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.tj-wa-float:hover {
	transform: none;
	box-shadow: var(--md-elevation-3), 0 0 0 8px color-mix(in srgb, #25D366 12%, transparent) !important;
}

/* ============================================================
   Bottom cart bar — M3 elevated surface, not a black pill
   ============================================================ */
.tj-sticky-cart-bar {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	background: var(--md-surface-container-high);
	color: var(--md-on-surface);
	border-radius: var(--md-corner-xl);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 24px;
	box-shadow: var(--md-elevation-2);
	z-index: 999;
	font-family: var(--md-font);
}

.tj-sticky-cart-info {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
}

.tj-sticky-cart-btn {
	background: var(--md-primary);
	color: var(--md-on-primary);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1px;
	padding: 10px 24px;
	border-radius: var(--md-corner-full);
	text-decoration: none;
	transition: box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.tj-sticky-cart-btn:hover {
	box-shadow: var(--md-elevation-1);
}