/* ============================================================
   Beniche Home Components — exact port from React Hero, Stories, CategoryIcons
   Tailwind classes translated to plain CSS (RTL).
   ============================================================ */

/* ---------- STORIES ---------- */
.bn-stories-section { padding: 24px 0 8px; }
.bn-stories-card {
	position: relative; overflow: hidden; border-radius: 20px;
	background: #fff; padding: 20px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.dark .bn-stories-card { background: #1e293b; }

.bn-stories-glow-1 {
	position: absolute; -right: 80px; -top: 80px; width: 192px; height: 192px;
	border-radius: 9999px; background: #fdf4ff; filter: blur(48px); pointer-events: none;
}
.dark .bn-stories-glow-1 { background: rgb(217 70 239 / .1); }
.bn-stories-glow-2 {
	position: absolute; -left: 80px; -bottom: 80px; width: 192px; height: 192px;
	border-radius: 9999px; background: #f5f3ff; filter: blur(48px); pointer-events: none;
}
.dark .bn-stories-glow-2 { background: rgb(139 92 246 / .1); }

.bn-stories-row { display: flex; align-items: center; gap: 20px; position: relative; }
.bn-stories-title-wrap { display: none; flex-shrink: 0; text-align: left; }
@media (min-width: 640px) { .bn-stories-title-wrap { display: block; } }
.bn-stories-title-wrap .kicker {
	font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #d946ef;
}
.bn-stories-title-wrap h2 { font-size: 18px; font-weight: 900; color: #0f172a; margin-top: 4px; }
.dark .bn-stories-title-wrap h2 { color: #fff; }
.bn-stories-title-wrap p { font-size: 12px; color: #9ca3af; }

.bn-stories-scroll {
	display: flex; flex: 1; align-items: flex-start; gap: 16px;
	overflow-x: auto; padding: 4px 4px 16px; scrollbar-width: none;
}
.bn-stories-scroll::-webkit-scrollbar { display: none; }

.bn-story-item {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: none; border: 0; cursor: pointer; padding: 0; font: inherit;
}
.bn-story-ring {
	position: relative; display: grid; place-items: center;
	width: 68px; height: 68px; border-radius: 50%; padding: 3px;
	transition: transform .3s var(--mn-ease);
}
.bn-story-item:hover .bn-story-ring { transform: scale(1.1); }
.bn-story-thumb {
	display: grid; place-items: center; width: 100%; height: 100%;
	border-radius: 50%; background: #fff; overflow: hidden;
	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}
.dark .bn-story-thumb { background: #0f172a; }
.bn-story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bn-story-new-badge {
	position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
	background: #ec4899; color: #fff; padding: 2px 6px; border-radius: 999px;
	font-size: 9px; font-weight: 800; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.bn-story-label {
	font-size: 12px; font-weight: 500; color: #4b5563;
	max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: color .2s;
}
.dark .bn-story-label { color: #d1d5db; }
.bn-story-item:hover .bn-story-label { color: #ec4899; }

.bn-story-all-btn {
	display: grid; place-items: center; width: 68px; height: 68px;
	border-radius: 50%; border: 2px dashed #d1d5db;
	color: #9ca3af; font-size: 20px; transition: border-color .2s, color .2s;
}
.dark .bn-story-all-btn { border-color: #475569; }
.bn-story-item:hover .bn-story-all-btn { border-color: #d946ef; color: #d946ef; }

/* ---------- HERO ---------- */
.bn-hero-section { margin-top: 24px; }
.bn-hero-grid {
	display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 1024px) { .bn-hero-grid { grid-template-columns: 1fr 2.4fr 1fr; } }

.bn-hero-side-cards { display: none; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .bn-hero-side-cards { display: flex; } }

.bn-hero-promo {
	position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
	border-radius: 16px; padding: 16px; color: #fff; overflow: hidden;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	transition: transform .3s var(--mn-ease), box-shadow .3s;
}
.bn-hero-promo:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.bn-hero-promo .z-10 { position: relative; z-index: 10; }
.bn-hero-promo h3 { font-size: 14px; font-weight: 800; }
.bn-hero-promo p { font-size: 12px; margin-top: 4px; color: rgb(255 255 255 / .9); }
.bn-hero-promo .btn {
	background: rgb(255 255 255 / .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; width: fit-content;
	margin-top: 12px; border: 0; cursor: pointer; color: #fff;
}
.bn-hero-promo .btn:hover { background: rgb(255 255 255 / .4); }
.bn-hero-promo .art {
	position: absolute; bottom: -8px; left: 8px; width: 80px; height: 80px;
	object-fit: contain; filter: drop-shadow(0 10px 15px rgb(0 0 0 / 0.3));
	transition: transform .5s var(--mn-ease);
}
.bn-hero-promo:hover .art { transform: scale(1.1) rotate(-6deg); }

.bn-hero-main {
	position: relative; border-radius: 24px; padding: 32px;
	color: #fff; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
	min-height: 340px; display: flex; flex-direction: column; justify-content: center;
	overflow: hidden;
}
@media (min-width: 640px) { .bn-hero-main { padding: 40px; } }
.bn-hero-pattern {
	position: absolute; inset: 0; opacity: .3; pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
	background-size: 24px 24px;
}
.bn-hero-glow {
	position: absolute; -right: 80px; -top: 80px; width: 256px; height: 256px;
	border-radius: 9999px; background: rgb(255 255 255 / .1); filter: blur(64px);
}
.bn-hero-content { position: relative; z-index: 10; max-width: 448px; }
.bn-hero-main h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.bn-hero-main p { margin-top: 16px; font-size: 16px; }
@media (min-width: 640px) { .bn-hero-main p { font-size: 18px; } }
.bn-hero-main .badge {
	display: inline-block; background: #fde047; color: #0f172a;
	padding: 2px 8px; border-radius: 8px; font-size: 20px; font-weight: 900;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
@media (min-width: 640px) { .bn-hero-main .badge { font-size: 24px; } }
.bn-hero-main .cta {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
	background: #fff; color: #6d28d9; padding: 12px 24px; border-radius: 12px;
	font-size: 14px; font-weight: 800; border: 0; cursor: pointer;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); transition: all .2s;
}
.bn-hero-main .cta:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

.bn-hero-art-svg {
	position: absolute; left: 16px; bottom: 0; top: 0; width: 50%;
	display: none; pointer-events: none;
}
@media (min-width: 640px) { .bn-hero-art-svg { display: block; } }

.bn-hero-controls {
	position: absolute; bottom: 20px; right: 32px; left: 32px; z-index: 10;
	display: flex; align-items: center; gap: 12px;
}
.bn-hero-dots { display: flex; gap: 8px; }
.bn-hero-dots span {
	width: 8px; height: 8px; border-radius: 9999px; background: rgb(255 255 255 / .4);
	cursor: pointer; transition: all .3s;
}
.bn-hero-dots span.active { width: 32px; background: #fff; }
.bn-hero-progress {
	display: none; margin-inline-start: auto; width: 100%; max-width: 128px;
	height: 4px; border-radius: 9999px; background: rgb(255 255 255 / .2); overflow: hidden;
}
@media (min-width: 640px) { .bn-hero-progress { display: block; } }
.bn-hero-progress-bar { height: 100%; background: #fff; transition: width .1s linear; }

/* Right specific promo cards */
.bn-hero-promo-right { background: #fff; color: #1f2937; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.dark .bn-hero-promo-right { background: #1e293b; color: #e5e7eb; }
.bn-hero-promo-right .btn { border: 2px solid currentColor; background: transparent; color: inherit; }
.bn-hero-promo-right .btn:hover { transform: scale(1.05); background: transparent; }

/* ---------- CATEGORY ICONS ---------- */
.bn-cats-section { margin-top: 24px; }
.bn-cats-card {
	border-radius: 16px; background: #fff; padding: 16px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.dark .bn-cats-card { background: #1e293b; }
.bn-cats-grid {
	display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
}
.bn-cats-grid::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
	.bn-cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
	.bn-cats-grid { grid-template-columns: repeat(10, 1fr); }
}

.bn-cat-btn {
	flex: 0 0 auto; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: none; border: 0; cursor: pointer; padding: 0; font: inherit;
}
@media (min-width: 640px) { .bn-cat-btn { width: auto; } }

.bn-cat-icon {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
	font-size: 24px; transition: transform .3s var(--mn-ease);
}
.bn-cat-btn:hover .bn-cat-icon { transform: scale(1.05); }
.bn-cat-btn-label { font-size: 11px; font-weight: 500; color: #4b5563; line-height: 1.25; }
.dark .bn-cat-btn-label { color: #d1d5db; }
.bn-cat-btn:hover .bn-cat-btn-label { color: #6d28d9; }

/* Specific Colors from CategoryIcons.tsx */
.bg-blue-50     { background-color: #eff6ff; color: #2563eb; }
.bg-cyan-50     { background-color: #ecfeff; color: #0891b2; }
.bg-amber-50    { background-color: #fffbeb; color: #d97706; }
.bg-orange-50   { background-color: #fff7ed; color: #ea580c; }
.bg-emerald-50  { background-color: #ecfdf5; color: #059669; }
.bg-rose-50     { background-color: #fff1f2; color: #e11d48; }
.bg-pink-50     { background-color: #fdf2f8; color: #db2777; }
.bg-indigo-50   { background-color: #eef2ff; color: #4f46e5; }
.bg-slate-100   { background-color: #f1f5f9; color: #475569; }
.bg-red-50      { background-color: #fef2f2; color: #dc2626; }

.dark .bg-blue-50, .dark .bg-cyan-50, .dark .bg-amber-50, .dark .bg-orange-50,
.dark .bg-emerald-50, .dark .bg-rose-50, .dark .bg-pink-50, .dark .bg-indigo-50,
.dark .bg-slate-100, .dark .bg-red-50 {
	background-color: rgb(255 255 255 / .05);
}
.dark .bg-blue-50 { color: #60a5fa; }
.dark .bg-cyan-50 { color: #22d3ee; }
.dark .bg-amber-50 { color: #fbbf24; }
.dark .bg-orange-50 { color: #fb923c; }
.dark .bg-emerald-50 { color: #34d399; }
.dark .bg-rose-50 { color: #fb7185; }
.dark .bg-pink-50 { color: #f472b6; }
.dark .bg-indigo-50 { color: #818cf8; }
.dark .bg-slate-100 { color: #94a3b8; }
.dark .bg-red-50 { color: #f87171; }

/* Animations */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes bnFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: bnFadeUp 0.5s ease both; }