/* ============================================================
   RetaPOS Category pages stylesheet — hub + 28 vertical pages
   Loaded only on the Category controller (see _Layout.cshtml).
   CSS-only modernization layered over the global redesign.css.
   Palette: navy rgb(20,28,77) · blue #2563eb→#3b82f6 · green #16a34a
   ============================================================ */

/* ---------- Hero badges → frosted glass pills ---------- */
.hero-section .badge.bg-light {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-weight: 600;
	border-radius: 50rem;
	backdrop-filter: blur(6px);
}

/* ---------- Section icon tiles (auto-tinted to the icon's own colour) ----------
   Turns the bare <i class="fas … fa-3x text-primary"> blocks used in the
   intro / "why choose" / benefit / related sections into modern rounded tiles. */
section .fa-3x:not(.category-icon i),
section .fa-4x:not(.category-icon i) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	font-size: 1.9rem;
	border-radius: 22px;
	background: color-mix(in srgb, currentColor 12%, #fff);
	box-shadow: 0 10px 24px color-mix(in srgb, currentColor 20%, transparent);
}
section .fa-2x:not(.category-icon i) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	font-size: 1.4rem;
	border-radius: 16px;
	background: color-mix(in srgb, currentColor 12%, #fff);
	box-shadow: 0 8px 18px color-mix(in srgb, currentColor 18%, transparent);
}

/* Centered icon blocks (intro 3-up, why-choose 4-up) — add lift */
.card-body.text-center,
section .text-center > .p-3,
section .col-md-4 > .text-center {
	transition: transform 0.3s ease;
}

/* ---------- Section headings ---------- */
.section-title { color: rgb(20, 28, 77); }

/* Per-group accent (set inline on .cat-group); defaults to brand blue */
.cat-group { --accent: #2563eb; scroll-margin-top: 150px; }

/* Smooth in-page jumps (scoped to category pages via this stylesheet) */
html { scroll-behavior: smooth; }

/* Sticky "jump to group" nav */
.cat-jump {
	position: sticky;
	top: 76px;
	z-index: 30;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0.7rem 0.25rem;
	margin: 0 0 2.25rem;
	background: rgba(247, 249, 252, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #eef1f6;
}
.cat-jump::-webkit-scrollbar { display: none; }
.cat-jump__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	border-radius: 50rem;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--accent, #2563eb);
	background: color-mix(in srgb, var(--accent, #2563eb) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 25%, #fff);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cat-jump__chip:hover { color: #fff; background: var(--accent, #2563eb); transform: translateY(-1px); }

@media (max-width: 575.98px) {
	.cat-jump { justify-content: flex-start; }
}

/* Hub group headers ("Fashion & Apparel", "Food & Beverage", …) */
.border-bottom.pb-2 {
	color: rgb(20, 28, 77) !important;
	border-bottom: none !important;
	position: relative;
	padding-bottom: 0.85rem !important;
	font-weight: 800;
}
.border-bottom.pb-2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 4px;
	border-radius: 50rem;
	background: var(--accent, #2563eb);
}

/* ---------- Feature lists (two-column "Key Features") ---------- */
.category-features li {
	padding: 0.5rem 0 0.5rem 1.9rem;
	color: #3a4256;
	line-height: 1.55;
}
.category-features li strong { color: rgb(20, 28, 77); }

/* ---------- Module / category cards (.category-card) ---------- */
.category-card .category-title { color: rgb(20, 28, 77) !important; font-weight: 700; }
.category-card .category-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	font-size: 1.6rem;
	margin-bottom: 1.25rem;
	background: color-mix(in srgb, var(--accent, #2563eb) 12%, #fff) !important;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--accent, #2563eb) 20%, transparent);
}
.category-card .category-icon i { color: var(--accent, #2563eb); }

/* ---------- Outline buttons → modern pills ---------- */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary {
	border-radius: 50rem;
	font-weight: 600;
	padding: 0.55rem 1.4rem;
	border-width: 1.5px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(20, 28, 77, 0.12);
}

/* ---------- Dark UI mockup sections (Bakery / Cafe / Vape etc.) ---------- */
.bg-dark[style*="#1a1a1a"],
section.bg-dark {
	background: linear-gradient(160deg, #141c4d 0%, #1d2a4f 100%) !important;
	border-radius: 22px;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
	section .fa-3x:not(.category-icon i),
	section .fa-4x:not(.category-icon i) { width: 68px; height: 68px; font-size: 1.6rem; }
}