/**
 * jsm-shared.css
 * Refactored: dedup + cleanup duplicates (v0.43.1)
 * Total rules: 102 (reduced from 138)
 *
 * Class hierarchy:
 *   .jsm-fc (wrapper)          — fixed bottom, container untuk bar + panel
 *   .jsm-fc-bar (toggle)       — selalu visible
 *   .jsm-fc-panel              — slide-up expand
 *   .jsm-fc-row*               — single product row dalam panel
 *
 * Legacy (deprecated):
 *   .jsm-floating-cart*        — sebelum v0.43, sudah tidak di-render
 */

.jsm-app-body * { box-sizing: border-box; }

.jsm-app-body button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

.jsm-app-body a { color: var(--jsm-navy); text-decoration: none; }

.jsm-app-body h1, .jsm-app-body h2, .jsm-app-body h3 { margin: 0; }

/* v0.48.8: nav sticky di top + aware WP admin bar (offset 32px desktop / 46px mobile) */
.jsm-global-nav {
	width: 100%;
	background: var(--jsm-navy);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
/* WordPress admin bar offset */
html.admin-bar .jsm-global-nav,
body.admin-bar .jsm-global-nav {
	top: 32px;
}
@media screen and (max-width: 782px) {
	html.admin-bar .jsm-global-nav,
	body.admin-bar .jsm-global-nav {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	html.admin-bar .jsm-global-nav,
	body.admin-bar .jsm-global-nav {
		top: 0; /* admin bar di mobile non-sticky */
	}
}
.jsm-global-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 24px;
}
.jsm-global-nav-links {
	display: flex;
	gap: 6px;
	flex: 0 1 auto;
}
.jsm-global-nav-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.jsm-global-nav-brand:hover { color: var(--jsm-lime) !important; }

.jsm-global-nav-logo {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.jsm-global-nav-link {
	color: var(--jsm-text-muted, #6B7280);
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.12s;
}

.jsm-global-nav-link:hover { color: var(--jsm-navy, #1F2C72); background: var(--jsm-bg, #F7F8FA); }

.jsm-global-nav-link-active {
	color: var(--jsm-navy, #1F2C72) !important;
	background: var(--jsm-lime-soft, #E8FAA8);
}

.jsm-global-nav-link-active:hover {
	color: var(--jsm-navy) !important;
	background: var(--jsm-lime) !important;
	opacity: 0.92;
}

.jsm-global-nav-link i { font-size: 16px; }

.jsm-global-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.jsm-global-nav-btn i { font-size: 16px; }

.jsm-global-nav-btn-ghost {
	background: rgba(255,255,255,0.08);
	color: var(--jsm-white);
	border: 1px solid rgba(255,255,255,0.12);
}

.jsm-global-nav-btn-ghost:hover {
	background: rgba(255,255,255,0.16);
	color: var(--jsm-lime);
}

.jsm-global-nav-btn-primary {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
}

.jsm-global-nav-btn-primary:hover { opacity: 0.92; }

@media (max-width: 420px) {
	.jsm-global-nav-brand span { max-width: 70px; font-size: 11px; }
	.jsm-global-nav-logo { width: 30px; height: 30px; font-size: 17px; }
}

.jsm-global-nav-btn-active {
	background: var(--jsm-lime) !important;
	color: var(--jsm-navy) !important;
}

.jsm-app-body input:focus,
.jsm-app-body select:focus,
.jsm-app-body textarea:focus {
	outline: 0;
	border-color: var(--jsm-navy, #1F2C72) !important;
	box-shadow: 0 0 0 3px rgba(31,44,114,0.10) !important;
}

.jsm-app-body a:not([class]):hover { color: #2A3A8A; }

#jsm-modal-login .jsm-btn-ghost {
	background: transparent !important;
	color: #6B7280 !important;
	border: 1px solid #E5E7EB !important;
}

#jsm-modal-login .jsm-btn-ghost:hover { color: #1F2C72 !important; border-color: #1F2C72 !important; }

.jsm-app-body .jsm-global-nav-brand,
.jsm-app-body .jsm-global-nav-brand span {
	color: #FFFFFF !important;
}

.jsm-app-body .jsm-global-nav-logo {
	background: #C8F133 !important;
	color: #1F2C72 !important;
}

.jsm-app-body .jsm-global-nav-link {
	color: rgba(255,255,255,0.85) !important;
}

.jsm-app-body .jsm-global-nav-link:hover {
	color: #C8F133 !important;
	background: rgba(255,255,255,0.08) !important;
}

.jsm-app-body .jsm-global-nav-link-active {
	color: #1F2C72 !important;
	background: #C8F133 !important;
}

.jsm-app-body .jsm-global-nav-btn-primary {
	background: #C8F133 !important;
	color: #1F2C72 !important;
}

.jsm-app-body .jsm-global-nav-btn-primary:hover {
	background: #B8E020 !important;
	color: #1F2C72 !important;
}

.jsm-app-body .jsm-global-nav-btn-ghost {
	background: rgba(255,255,255,0.1) !important;
	color: rgba(255,255,255,0.9) !important;
}

.jsm-app-body .jsm-global-nav-btn-ghost:hover {
	color: #C8F133 !important;
	background: rgba(255,255,255,0.18) !important;
}

.jsm-app-body .jsm-global-cart-btn { color: #FFFFFF !important; }

.jsm-tier-silver   { background: linear-gradient(135deg, #e0e0e0, #c0c0c0); color: var(--jsm-navy); }

.jsm-tier-gold     { background: linear-gradient(135deg, #ffd700, #d4a017); color: var(--jsm-navy); }

.jsm-tier-platinum { background: linear-gradient(135deg, #e5e4e2, #b3b3b3); color: var(--jsm-navy); }

.jsm-tier-diamond  { background: linear-gradient(135deg, #b9f2ff, #80d4f5); color: var(--jsm-navy); }

.jsm-tier-guest    { background: #777; color: var(--jsm-white); }

@keyframes jsmTierPulse {
	0%,100% { transform: scale(1);   opacity: 0.7; }
	50%     { transform: scale(1.1); opacity: 0; }
}

.jsm-ref-modal-list {
	max-height: 360px;
	overflow-y: auto;
	margin: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 2px;
}

.jsm-ref-modal-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 12px;
	padding: 10px 12px;
}

.jsm-ref-modal-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--jsm-navy);
	color: var(--jsm-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
	flex-shrink: 0;
}

.jsm-ref-modal-info { flex: 1; min-width: 0; }

.jsm-ref-modal-name {
	font-weight: 700;
	font-size: 13px;
	color: var(--jsm-navy);
	font-family: "Courier New", monospace;
	letter-spacing: 0.5px;
}

.jsm-ref-modal-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11px;
	color: var(--jsm-text-muted);
	margin-top: 2px;
}

.jsm-ref-modal-meta i { vertical-align: -2px; margin-right: 2px; color: var(--jsm-navy); opacity: 0.6; }

.jsm-ref-modal-com {
	text-align: right;
	flex-shrink: 0;
}

.jsm-ref-modal-com small {
	display: block;
	font-size: 9px;
	color: var(--jsm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.jsm-ref-modal-com strong {
	font-size: 14px;
	font-weight: 800;
	color: var(--jsm-success);
}

.jsm-ref-modal-totals {
	border-top: 2px dashed var(--jsm-border);
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.jsm-ref-modal-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--jsm-text-muted);
	padding: 6px 4px;
}

.jsm-ref-modal-total-row strong {
	font-weight: 800;
	font-size: 14px;
	color: var(--jsm-navy);
}

.jsm-ref-modal-total-highlight {
	background: var(--jsm-lime-soft);
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 4px;
}

.jsm-ref-modal-total-highlight span { color: var(--jsm-navy); font-weight: 700; }

.jsm-ref-modal-total-highlight strong {
	font-size: 18px;
	color: var(--jsm-navy);
}

.jsm-ref-modal-list::-webkit-scrollbar-thumb {
	background: rgba(31,44,114,0.2);
	border-radius: 3px;
}

.jsm-eyebrow-light { color: var(--jsm-lime) !important; opacity: 1 !important; }

.jsm-title-light   { color: var(--jsm-white) !important; }

.jsm-desc-light    { color: rgba(255,255,255,0.75); }

.jsm-qty-btn {
	width: 28px;
	height: 28px;
	background: var(--jsm-bg);
	color: var(--jsm-navy);
	font-weight: 800;
	font-size: 16px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
}

.jsm-qty-btn:hover { background: var(--jsm-lime-soft); }

.jsm-qty-input {
	width: 48px;
	border: none;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--jsm-navy);
	background: transparent;
	font-family: inherit;
	-moz-appearance: textfield;
}

.jsm-qty-input::-webkit-outer-spin-button,
.jsm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.jsm-step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--jsm-text-muted);
	font-size: 12px;
	font-weight: 600;
}

.jsm-step:not(:last-child)::after {
	content: '→';
	margin-left: 12px;
	color: var(--jsm-border);
}

.jsm-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
}

.jsm-step-done { color: var(--jsm-success); }

.jsm-step-done .jsm-step-num {
	background: var(--jsm-success);
	color: var(--jsm-white);
	border-color: var(--jsm-success);
}

.jsm-step-active { color: var(--jsm-navy); font-weight: 800; }

.jsm-step-active .jsm-step-num {
	background: var(--jsm-lime);
	color: var(--jsm-navy);
	border-color: var(--jsm-lime);
}

.jsm-stock-ok    { color: var(--jsm-success); }

.jsm-stock-low   { color: #F59E0B !important; }

.jsm-stock-out   { color: #EF4444 !important; }

@keyframes jsm-fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.jsm-locked-pill {
	display: inline-flex; align-items: center; gap: 4px;
	background: #fef3c7; color: #92400e;
	padding: 3px 9px; border-radius: 999px;
	font-size: 11px; font-weight: 700; margin-left: 8px;
}

.jsm-locked-msg {
	color: var(--jsm-text-muted); font-size: 13px;
	background: #fafbfc; border: 1px dashed var(--jsm-border);
	border-radius: 8px; padding: 14px 16px; margin: 0;
	text-align: center;
}

.jsm-cashback-opt {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	background: var(--jsm-bg);
	border: 1px solid var(--jsm-border);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
}

.jsm-cashback-opt:has(input:checked),
.jsm-cashback-opt.is-active {
	border-color: var(--jsm-lime);
	background: var(--jsm-lime-soft);
}

.jsm-cashback-opt input[type="radio"] { margin: 0; }

.jsm-cashback-opt span { display: flex; flex-direction: column; gap: 2px; }

.jsm-cashback-opt strong { font-size: 14px; color: var(--jsm-navy); }

.jsm-cashback-opt small  { font-size: 11px; color: var(--jsm-text-muted); }

@keyframes jsm-pulse-bell {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.02); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
}

.jsm-pay-info {
	background: var(--jsm-bg);
	border-radius: 10px;
	padding: 12px 16px;
}

.jsm-pay-info-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dashed var(--jsm-border);
	gap: 8px;
}

.jsm-pay-info-row:last-child { border-bottom: 0; }

.jsm-pay-info-row span { font-size: 12px; color: var(--jsm-text-muted); }

.jsm-pay-info-row strong { font-size: 14px; color: var(--jsm-navy); font-weight: 700; }

.jsm-pay-info-row.jsm-pay-info-total strong { font-size: 18px; color: var(--jsm-navy); }

.jsm-pay-info-num { font-family: 'Courier New', monospace; letter-spacing: 1px; }

.jsm-pay-copy {
	background: var(--jsm-navy); color: var(--jsm-lime);
	border: 0; border-radius: 6px;
	padding: 5px 10px; font-size: 11px; font-weight: 700;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
}

.jsm-pay-copy:hover { opacity: 0.92; }

.jsm-pay-qris {
	margin-top: 14px; text-align: center;
}

.jsm-pay-qris img {
	max-width: 200px; border: 1px solid var(--jsm-border); border-radius: 8px;
}

.jsm-cashback-opts label { margin-bottom: 0; }

#jsm-checkout-login-otp:focus,
#jsm-checkout-reg-otp:focus {
	border-color: var(--jsm-navy, #1F2C72) !important;
}

.jsm-locked-pill i { color: #B45309 !important; }

.jsm-cat2 { padding-bottom: 80px; }

@keyframes jsm-spin {
	to { transform: rotate(360deg); }
}

.jsm-fc.is-open {
	box-shadow: 0 -8px 36px rgba(31,44,114,0.22) !important;
}

@media (min-width: 720px) {
	.jsm-fc {
		left: auto !important;
		right: 20px;
		bottom: 20px;
		width: 360px;
	}
	.jsm-fc.is-open {
		width: 400px;
	}
}

/* ============================================================
   v0.46 — MOBILE NAV: icon + label kecil (nenek-mabok friendly)
   Override monolith jsm-member-app.css yang hide nav label di mobile.
   ============================================================ */
@media (max-width: 720px) {
	.jsm-global-nav-inner {
		padding: 8px 12px !important;
		gap: 8px !important;
	}
	/* Brand: kasih ruang untuk JualLampu (9 char) */
	.jsm-global-nav-brand span {
		max-width: 110px !important;
		font-size: 14px !important;
		font-weight: 800 !important;
		display: inline-block !important;
	}
	/* Nav links: icon stacked di atas label kecil — OVERRIDE display:none monolith */
	.jsm-global-nav-links {
		gap: 2px !important;
		display: flex !important;
	}
	.jsm-global-nav-link {
		flex-direction: column !important;
		gap: 1px !important;
		padding: 5px 7px !important;
		min-width: 48px !important;
		text-align: center !important;
	}
	.jsm-global-nav-link i { font-size: 17px !important; }
	.jsm-global-nav-link span,
	.jsm-global-nav-btn span {
		display: inline-block !important;
		font-size: 9.5px !important;
		font-weight: 700 !important;
		letter-spacing: 0.2px !important;
		line-height: 1.1 !important;
		max-width: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: normal !important;
		margin-top: 1px;
	}
	/* Action buttons (cart + logout/login): label tetap inline tapi font lebih kecil */
	.jsm-global-nav-actions { gap: 4px !important; }
	.jsm-global-nav-btn {
		padding: 6px 10px !important;
		font-size: 11px !important;
		flex-direction: column !important;
		gap: 1px !important;
		min-width: 48px !important;
		border-radius: 12px !important;
	}
	.jsm-global-nav-btn i { font-size: 16px !important; }
	.jsm-cart-badge {
		position: absolute !important;
		top: 2px !important;
		right: 2px !important;
	}
	.jsm-global-cart-btn { position: relative !important; }
}

@media (max-width: 380px) {
	/* Layar super sempit: kompres lagi */
	.jsm-global-nav-brand span { max-width: 80px !important; font-size: 12px !important; }
	.jsm-global-nav-link { padding: 4px 5px; min-width: 42px; }
	.jsm-global-nav-btn { padding: 5px 7px; min-width: 42px; }
}