/*
 * SeifWeb Light — the service cards of the multi-page designs (owner, 2026-10-29: the old cards "look like the LaForno
 * bakery": they kept the bakery's orange circles, beige background and brown shadows in every design). Same markup;
 * only the design's own colours (--primary, --secondary, --gray-800), calm: start-aligned, a lift and a colour change on hover.
 * Loaded after the design's style.css (and with more weight than the services page's own <style>).
 */

.section-badge {
	background: color-mix(in srgb, var(--primary) 10%, #fff);
	color: var(--primary);
}

/* ---- Home: the service cards ---- */
.categories-section {
	background: color-mix(in srgb, var(--primary) 4%, #fff);
}

.categories-grid {
	gap: 22px;
}

.category-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding: 28px 24px 22px;
	border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(16, 38, 48, 0.04);
}

.category-card::before {
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	transform-origin: right;
}

[dir="ltr"] .category-card::before {
	transform-origin: left;
}

.category-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--primary) 35%, transparent);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 14%, transparent);
}

.category-icon {
	width: 56px;
	height: 56px;
	margin: 0 0 18px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--primary) 10%, #fff);
	color: var(--primary);
	font-size: 1.4rem;
}

.category-card:hover .category-icon {
	background: var(--primary);
	color: #fff;
	transform: none;
}

.category-card h3 {
	font-size: 1.15rem;
	color: var(--gray-800);
	margin-bottom: 8px;
}

.category-card p {
	color: #5f6b70;
	font-size: 0.93rem;
	line-height: 1.75;
	margin-bottom: 16px;
}

.category-items {
	width: 100%;
	margin: 0 0 18px;
	text-align: start;
}

.category-items li {
	padding: 6px 0;
	color: #2f3b40;
	font-size: 0.9rem;
	gap: 10px;
}

.category-items i {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--primary) 12%, #fff);
	color: var(--primary);
	font-size: 0.62rem;
}

.category-link {
	margin-top: auto;
	width: 100%;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
	justify-content: space-between;
	color: var(--primary);
	font-size: 0.92rem;
}

.category-link:hover {
	gap: 8px;
}

.category-link i {
	transition: transform 0.3s ease;
}

.category-card:hover .category-link i {
	transform: translateX(-4px);
}

[dir="ltr"] .category-card:hover .category-link i {
	transform: translateX(4px);
}

.category-card.is-box {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: start;
}

/* ---- Services page: the same colours for its rows ---- */
.products-section.products-section {
	background: color-mix(in srgb, var(--primary) 4%, #fff);
}

.products-section .product-img {
	background: color-mix(in srgb, var(--primary) 10%, #fff);
	color: var(--primary);
}

/* ---- Dark mode ---- */
body.dark-mode .section-badge {
	background: color-mix(in srgb, var(--primary) 22%, #111);
	color: #e6f4f5;
}

body.dark-mode .categories-section,
body.dark-mode .products-section.products-section {
	background: #121819;
}

body.dark-mode .category-card {
	background: #1a2224;
	border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .category-card:hover {
	border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

body.dark-mode .category-card h3 {
	color: #fff;
}

body.dark-mode .category-card p {
	color: #a7b4b8;
}

body.dark-mode .category-items li {
	color: #d7e0e2;
}

body.dark-mode .category-icon,
body.dark-mode .category-items i,
body.dark-mode .products-section .product-img {
	background: color-mix(in srgb, var(--primary) 25%, #1a2224);
	color: #fff;
}

body.dark-mode .category-link {
	border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .category-link {
	color: var(--secondary);
}

body.dark-mode .section-subtitle {
	color: #a7b4b8;
}

/* The home cards show the title, one line and «عرض المزيد»; the full lists stay on the services page (owner, 2026-10-29:
   «هيكون كفاية في الكارت الواحد»). */
.categories-section .category-items {
	display: none;
}

.categories-section .category-card p {
	margin-bottom: 22px;
}