/* =========================================================================
   Custom Design System (Front-end, di atas Bootstrap 5)
   Font modern (Plus Jakarta Sans via Google Fonts, di-load di header.php)
   Redesign v2: aksen warna & shadow lebih premium, kartu produk, navbar,
   dan terutama MODAL/SweetAlert2 dibuat setara gaya template CodeCanyon.
   ========================================================================= */
:root {
	--ds-primary: #4f46e5;
	--ds-primary-dark: #4338ca;
	--ds-secondary: #7c3aed;
	--ds-success: #16a34a;
	--ds-radius: 14px;
	--ds-radius-sm: 10px;
	--ds-shadow-sm: 0 2px 8px rgba(17, 24, 39, .06);
	--ds-shadow-md: 0 10px 30px rgba(17, 24, 39, .09);
	--ds-shadow-lg: 0 20px 50px rgba(17, 24, 39, .16);
	--ds-shadow-xl: 0 30px 70px rgba(17, 24, 39, .22);
	--ds-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

body {
	font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .fw-bold { letter-spacing: -.02em; }
::selection { background: rgba(79,70,229,.18); }
* { scrollbar-width: thin; scrollbar-color: #c7cadd transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c7cadd; border-radius: 99px; }

/* ---------- Navbar ---------- */
.navbar-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
/* backdrop-filter hanya di desktop: pada elemen dengan backdrop-filter, elemen turunan
   position:fixed (panel offcanvas menu mobile) akan "terperangkap" di dalam kotak elemen
   ini alih-alih menutupi seluruh layar. Makanya dimatikan khusus saat menu mobile aktif. */
@media (min-width: 992px) {
	.navbar { backdrop-filter: saturate(180%) blur(10px); }
}
.navbar .nav-link { font-weight: 600; color: #475569; }
.navbar .nav-link:hover { color: var(--ds-primary); }
.navbar .btn-outline-secondary,
.navbar .btn-outline-success { border-radius: 10px; font-weight: 600; }
.navbar .dropdown-menu {
	border: 1px solid #eef0f5; border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lg);
	padding: .5rem; margin-top: .5rem !important; overflow: hidden;
}
.ds-mega-menu { min-width: 640px; }
@media (max-width: 991.98px) {
	.ds-mega-menu {
		position: static !important;
		min-width: 0; width: 100%;
		margin-top: .5rem !important;
		box-shadow: none; border: 1px solid #eef0f5; background: #fbfbfe;
		transform: none !important; inset: auto !important;
	}
}
.navbar .dropdown-item { border-radius: 8px; padding: .55rem .75rem; font-weight: 500; transition: background .12s ease; }
.navbar .dropdown-item:hover { background: #f3f2ff; color: var(--ds-primary-dark); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active { background: var(--ds-primary); color: #fff; }

/* ---------- Navbar toggler (hamburger, pojok kiri sebelah judul) ---------- */
.navbar-toggler { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: none; }

/* Ikon hamburger custom yang beranimasi jadi tanda silang (X) saat menu mobile terbuka */
.ds-hamburger-icon { position: relative; width: 18px; height: 14px; display: inline-block; }
.ds-hamburger-icon span {
	position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
	background: #334155; transition: transform .28s ease, opacity .2s ease, top .28s ease;
}
.ds-hamburger-icon span:nth-child(1) { top: 0; }
.ds-hamburger-icon span:nth-child(2) { top: 6px; }
.ds-hamburger-icon span:nth-child(3) { top: 12px; }
.ds-hamburger-btn.is-active .ds-hamburger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.ds-hamburger-btn.is-active .ds-hamburger-icon span:nth-child(2) { opacity: 0; }
.ds-hamburger-btn.is-active .ds-hamburger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- Menu mobile bergaya slide-in dari samping (offcanvas) ---------- */
@media (max-width: 991.98px) {
	.ds-mobile-offcanvas {
		width: 82%;
		max-width: 340px;
	}
	.ds-mobile-offcanvas .offcanvas-header {
		border-bottom: 1px solid #eef0f5;
		padding: 1rem 1.15rem;
	}
	.ds-mobile-offcanvas .offcanvas-title { font-size: 1.05rem; color: #1e293b; }
	.ds-mobile-offcanvas .offcanvas-body { padding: 1.1rem; }
	.ds-offcanvas-search .form-control {
		border-radius: var(--ds-radius-sm);
		background: #f6f6fb;
		border-color: #eef0f5;
	}
	.ds-mobile-offcanvas .navbar-nav { width: 100%; }
	.ds-mobile-offcanvas .nav-item { border-bottom: 1px solid #f2f2f7; }
	.ds-mobile-offcanvas .nav-item:last-child { border-bottom: none; }
	.ds-mobile-offcanvas .nav-link {
		padding: .85rem .25rem;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 8px;
	}
	.ds-mobile-offcanvas .nav-link:hover,
	.ds-mobile-offcanvas .nav-link:focus {
		background: #f3f2ff;
		color: var(--ds-primary-dark);
	}
	.ds-mobile-offcanvas .dropdown-toggle::after { margin-left: auto; }
	/* Blur konten utama di belakang panel menu mobile, alih-alih overlay gelap polos */
	.offcanvas-backdrop {
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		background-color: rgba(15, 23, 42, .28);
	}
	.offcanvas-backdrop.show { opacity: 1; }
}

/* ---------- Header dropdown akun (desktop & tombol akun mobile di top bar) ---------- */
.dropdown-header { font-weight: 700; color: #1e293b; }
.ds-mobile-account .btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.ds-avatar-btn {
	width: 36px; height: 36px; border-radius: 50%; background: var(--ds-gradient); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .92rem; text-decoration: none; box-shadow: 0 6px 14px -4px rgba(79,70,229,.45);
}
.ds-avatar-btn::after { display: none; }

/* ---------- Tombol pilih bahasa (ID / EN) ---------- */
.ds-lang-toggle .btn {
	min-width: 2.6rem;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .02em;
}
.ds-mobile-menu-card .btn-group .btn {
	min-width: 2.4rem;
	font-weight: 700;
	font-size: .72rem;
}

/* ---------- Kartu aksi (dark mode, wishlist, cart, akun) di dalam menu hamburger mobile ---------- */
.ds-mobile-menu-actions {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid #f2f2f7;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.ds-mobile-menu-card {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	background: #fff;
	border: 1px solid #eef0f5;
	border-radius: var(--ds-radius-sm);
	padding: .7rem .85rem;
	text-decoration: none;
	text-align: left;
	box-shadow: var(--ds-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ds-mobile-menu-card:hover,
.ds-mobile-menu-card:focus {
	transform: translateY(-1px);
	box-shadow: var(--ds-shadow-md);
	border-color: #e0e1f7;
}
.ds-mobile-menu-card-icon {
	width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
	background: #f3f2ff; color: var(--ds-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.05rem;
}
.ds-mobile-menu-card-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ds-mobile-menu-card-label { font-weight: 700; font-size: .92rem; color: #1e293b; }
.ds-mobile-menu-card-sub { font-size: .76rem; color: #94a3b8; margin-top: 1px; }
.ds-mobile-menu-card-arrow { color: #c7cadd; font-size: .75rem; flex-shrink: 0; }
.ds-mobile-menu-card-badge {
	background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Tombol akun di navbar desktop: avatar bulat + panah saja (hemat ruang) ---------- */
.ds-account-toggle {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .28rem .55rem .28rem .28rem;
	border-radius: 999px;
	flex-shrink: 0;
}
.ds-account-avatar {
	width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255,255,255,.25);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .8rem; color: #fff; flex-shrink: 0;
}

/* ---------- Kartu Saldo di dalam dropdown akun (desktop & mobile) ---------- */
.ds-wallet-dropdown-card {
	display: flex; align-items: center; gap: .7rem;
	background: var(--ds-gradient);
	border-radius: var(--ds-radius-sm);
	padding: .7rem .85rem;
	text-decoration: none;
	box-shadow: 0 8px 18px -6px rgba(79,70,229,.45);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ds-wallet-dropdown-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -6px rgba(79,70,229,.55);
}
.ds-wallet-dropdown-icon {
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.22);
	color: #fff; font-size: .95rem;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.ds-wallet-dropdown-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ds-wallet-dropdown-label { font-size: .72rem; color: rgba(255,255,255,.85); font-weight: 600; }
.ds-wallet-dropdown-amount { font-size: 1rem; font-weight: 800; color: #fff; white-space: nowrap; }
.ds-wallet-dropdown-arrow { color: rgba(255,255,255,.75); font-size: .75rem; flex-shrink: 0; }

/* ---------- Kartu "Toko Saya" / "Mulai Jualan" di dalam dropdown akun (desktop & mobile) ---------- */
.ds-store-dropdown-card {
	display: flex; align-items: center; gap: .7rem;
	background: #f5f6fb;
	border: 1px solid #e6e8f4;
	border-radius: var(--ds-radius-sm);
	padding: .65rem .85rem;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ds-store-dropdown-card:hover {
	background: #eef0fb;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(17,24,39,.12);
}
.ds-store-dropdown-icon {
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(79,70,229,.12);
	color: var(--ds-primary); font-size: .95rem;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.ds-store-dropdown-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ds-store-dropdown-label { font-size: .84rem; font-weight: 700; color: #1e2333; }
.ds-store-dropdown-sub { font-size: .72rem; color: #7c8296; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-store-dropdown-arrow { color: #a4a9bd; font-size: .75rem; flex-shrink: 0; }

/* Varian "Mulai Jualan" (belum jadi seller) - sedikit lebih mengundang/CTA */
.ds-store-dropdown-card--cta {
	background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(124,58,237,.08));
	border-color: rgba(79,70,229,.25);
}
.ds-store-dropdown-card--cta:hover { background: linear-gradient(135deg, rgba(79,70,229,.14), rgba(124,58,237,.14)); }
.ds-store-dropdown-card--cta .ds-store-dropdown-icon { background: rgba(79,70,229,.18); }

[data-bs-theme="dark"] .ds-store-dropdown-card { background: #232a3d; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-store-dropdown-card:hover { background: #2a3247; }
[data-bs-theme="dark"] .ds-store-dropdown-label { color: #e2e8f0; }

/* ---------- Cegah navbar dempet/rusak di layar desktop ---------- */
.navbar .navbar-collapse { flex-wrap: nowrap; gap: .5rem; }
.navbar .navbar-nav { flex-shrink: 0; }
.navbar form[action*="search"] { flex-shrink: 1; min-width: 120px; }

/* Paksa layout desktop secara eksplisit — jangan bergantung pada reset otomatis
   Bootstrap untuk kombinasi navbar-expand-lg + offcanvas, yang ternyata tidak
   konsisten: offcanvas harus melebar mengisi sisa baris agar search+ikon
   bisa terdorong ke pojok kanan, dan menu kategori tetap dekat logo. */
@media (min-width: 992px) {
	.navbar .ds-mobile-offcanvas {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-grow: 1 !important;
		flex-wrap: nowrap !important;
		margin-left: 1.75rem;
	}
	.navbar .ds-mobile-offcanvas .offcanvas-body {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-grow: 1 !important;
		flex-wrap: nowrap !important;
		width: 100%;
	}
	.navbar .ds-mobile-offcanvas .navbar-nav {
		flex-direction: row !important;
		flex-shrink: 0 !important;
		margin-right: 1.5rem !important;
	}
	.navbar .ds-mobile-offcanvas form[action*="search"] {
		flex: 0 1 320px;
	}
	.navbar .ds-mobile-offcanvas .offcanvas-body > .d-none.d-lg-flex {
		flex-shrink: 0;
		margin-left: auto;
	}
}

/* ---------- Cards & product grid ---------- */
.card { border-radius: var(--ds-radius); border-color: #eef0f5; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow-md); }
.card-img-top { border-top-left-radius: var(--ds-radius); border-top-right-radius: var(--ds-radius); }

/* ---------- Kartu produk gaya marketplace (wishlist + keranjang langsung) ---------- */
.product-card { position: relative; overflow: hidden; }
.product-card-media { position: relative; overflow: hidden; border-top-left-radius: var(--ds-radius); border-top-right-radius: var(--ds-radius); }
.product-card-media img { width: 100%; display: block; transition: transform .35s ease; }
.product-card:hover .product-card-media img { transform: scale(1.06); }

.product-wish-btn {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	color: #94a3b8; font-size: .85rem; cursor: pointer;
	box-shadow: 0 2px 8px rgba(17,24,39,.14);
	transition: transform .15s ease, color .15s ease, background .15s ease;
}
.product-wish-btn:hover { transform: scale(1.1); color: #e11d48; }
.product-wish-btn.active { color: #e11d48; background: #fff; }
.product-wish-btn.is-loading { opacity: .6; pointer-events: none; }

.product-badge-discount, .product-badge-free {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	font-size: .68rem; font-weight: 700; padding: .3em .6em; border-radius: 999px;
	color: #fff; box-shadow: 0 2px 6px rgba(17,24,39,.18);
}
.product-badge-discount { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.product-badge-free { background: linear-gradient(135deg, #16a34a, #059669); }

.product-cart-btn.is-loading { opacity: .7; pointer-events: none; }

.line-clamp-2 {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 2.6em;
}

/* ---------- Hero ---------- */
.ds-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #312e81 0%, #4f46e5 45%, #7c3aed 100%);
}
.ds-hero-blob {
	position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none;
}
.ds-hero-blob-1 { width: 380px; height: 380px; background: #a78bfa; top: -120px; left: -80px; }
.ds-hero-blob-2 { width: 320px; height: 320px; background: #22d3ee; bottom: -140px; right: -60px; }
.ds-hero-eyebrow {
	display: inline-flex; align-items: center; gap: .4rem;
	background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
	padding: .35rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.ds-hero-search {
	display: flex; align-items: center; gap: .5rem;
	background: #fff; border-radius: 999px; padding: .4rem .4rem .4rem 1.25rem;
	max-width: 620px; box-shadow: var(--ds-shadow-xl); position: relative;
	transition: box-shadow .2s ease;
}
.ds-hero-search:focus-within { box-shadow: 0 0 0 4px rgba(255,255,255,.25), var(--ds-shadow-xl); }
.ds-hero-search-icon { color: #9ca3af; }
.ds-hero-search input { border: none; box-shadow: none !important; background: transparent; }
.ds-hero-search input:focus { outline: none; }
.ds-hero-search .btn { border-radius: 999px; padding: .55rem 1.6rem; font-weight: 700; }
.ds-hero-chip {
	background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
	padding: .35rem 1rem; border-radius: 999px; font-size: .82rem; text-decoration: none; transition: .15s;
}
.ds-hero-chip:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-1px); }

/* ---------- Category chips (gaya "Jelajahi Kategori") ---------- */
.ds-category-chips-wrap { overflow: visible; }
.ds-category-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ds-category-chip {
	display: inline-flex; align-items: center; gap: .65rem;
	padding: .65rem 1rem; border: 1px solid #e6e8f0; border-radius: 12px;
	background: #fff; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ds-category-chip:hover { border-color: var(--ds-primary); box-shadow: var(--ds-shadow); transform: translateY(-1px); }
.ds-category-chip-icon {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
	background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(124,58,237,.12));
	display: flex; align-items: center; justify-content: center;
	color: var(--ds-primary); font-size: .95rem;
}
.ds-category-chip-label { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.ds-category-chip-arrow { color: #b6bacb; font-size: .8rem; margin-left: .15rem; }

/* Dot indicator kategori (mobile) — gaya sama seperti dot slider testimoni */
.ds-category-dots { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: .9rem; }
.ds-category-dots.d-none { display: none; }
.ds-category-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: #d8dbe6; cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.ds-category-dot.is-active { width: 22px; border-radius: 5px; background: var(--ds-primary, #4f46e5); }
[data-bs-theme="dark"] .ds-category-dot { background: #3a4054; }

@media (max-width: 991.98px) {
	/* Mobile: kategori tampil 2 baris saja, sisanya digeser (swipe)
	   horizontal — gaya yang sama seperti slider testimoni. */
	.ds-category-chips {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: minmax(240px, 80%);
		gap: .6rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: .1rem .1rem .35rem;
		margin-bottom: -.25rem;
		scrollbar-width: none; -ms-overflow-style: none;
		justify-content: flex-start;
	}
	.ds-category-chips::-webkit-scrollbar { display: none; }
	.ds-category-chip { width: 100%; scroll-snap-align: start; }
	.ds-category-chip-label { white-space: normal; }
}

/* ---------- Testimoni (beranda): slider horizontal, ganti grid statis ---------- */
.ds-testi-wrap { position: relative; }

.ds-testi-track {
	display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
	padding: .25rem .25rem 1rem; margin-bottom: -.75rem;
	scrollbar-width: none; -ms-overflow-style: none;
}
.ds-testi-track::-webkit-scrollbar { display: none; }

.ds-testi-card {
	position: relative; overflow: hidden; flex: 0 0 85%; scroll-snap-align: start;
	background: #fff; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm);
	padding: 1.5rem 1.4rem; border: 1px solid rgba(15,23,42,.04);
}
[data-bs-theme="dark"] .ds-testi-card { background: #1e2333; border-color: #2e3446; }

.ds-testi-quote-icon { position: absolute; top: .85rem; right: 1.1rem; font-size: 2.1rem; color: var(--ds-primary, #4f46e5); opacity: .08; }
.ds-testi-msg { min-height: 4.4em; line-height: 1.55; }

.ds-testi-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(15,23,42,.06);
	background: #fff; color: var(--ds-primary, #4f46e5); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 24px -10px rgba(15,23,42,.3); cursor: pointer;
	transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ds-testi-nav:hover { box-shadow: 0 12px 26px -8px rgba(79,70,229,.4); transform: translateY(-50%) scale(1.06); }
.ds-testi-nav--prev { left: -20px; }
.ds-testi-nav--next { right: -20px; }
.ds-testi-nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
[data-bs-theme="dark"] .ds-testi-nav { background: #1e2333; border-color: #2e3446; }

.ds-testi-dots { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: .25rem; }
.ds-testi-dots.d-none { display: none; }
.ds-testi-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: #d8dbe6; cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.ds-testi-dot.is-active { width: 22px; border-radius: 5px; background: var(--ds-primary, #4f46e5); }
[data-bs-theme="dark"] .ds-testi-dot { background: #3a4054; }

@media (min-width: 768px) {
	.ds-testi-card { flex: 0 0 calc((100% - 2.5rem) / 3); }
	.ds-testi-nav--prev { left: -20px; }
	.ds-testi-nav--next { right: -20px; }
}

@media (max-width: 767.98px) {
	.ds-testi-nav { display: none; }
}

/* ---------- Artikel Terbaru: list horizontal di mobile (thumbnail kiri, teks kanan) ---------- */
@media (max-width: 767.98px) {
	.ds-article-card {
		flex-direction: row;
		align-items: stretch;
		padding: .6rem;
		gap: .85rem;
	}
	.ds-article-card .ds-article-card-thumb {
		flex: 0 0 92px;
		width: 92px;
		height: 92px;
		align-self: center;
	}
	.ds-article-card .ds-article-card-thumb .card-img-top {
		width: 92px;
		height: 92px !important;
		border-radius: .6rem;
	}
	.ds-article-card .card-body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.ds-article-card .ds-article-card-category {
		font-size: .7rem;
	}
	.ds-article-card .ds-article-card-title {
		font-size: .85rem;
		line-height: 1.35;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.ds-article-card .ds-article-card-excerpt {
		font-size: .74rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 0;
	}
}

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 700; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ds-gradient); border: none; box-shadow: 0 8px 20px -6px rgba(79,70,229,.55); }
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); box-shadow: 0 12px 26px -6px rgba(79,70,229,.6); }
.btn-outline-primary { border-width: 1.5px; }
.btn-outline-primary:hover { box-shadow: 0 8px 18px -6px rgba(79,70,229,.35); }
.btn-lg { border-radius: 12px; }
.btn-success { box-shadow: 0 8px 20px -6px rgba(22,163,74,.45); }
.btn-danger { box-shadow: 0 8px 20px -6px rgba(220,38,38,.4); }

/* ---------- Product detail sidebar (info CodeCanyon-style) ---------- */
.ds-meta-panel {
	background: #f8fafc;
	border-radius: var(--ds-radius-sm);
	padding: 1rem 1.1rem;
}
.ds-meta-item {
	display: flex; align-items: center; gap: .65rem;
	padding: .55rem 0;
	border-bottom: 1px dashed #e2e8f0;
}
.ds-meta-item:last-child { border-bottom: none; }
.ds-meta-icon {
	width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
	background: #eef2ff; color: var(--ds-primary);
	display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ds-meta-label { font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.ds-meta-value { font-size: .88rem; font-weight: 700; color: #1e293b; }
.ds-author-card {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(124,58,237,.06));
	border-radius: var(--ds-radius-sm);
	padding: .85rem 1rem;
}
.ds-author-card-link {
	display: flex; align-items: center; gap: .7rem;
	min-width: 0;
}
.ds-author-avatar {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1);
	flex: 0 0 auto;
}
/* Icon chat sejajar nama toko, di area profil pemilik produk (sidebar PDP desktop) */
.ds-author-chat-btn {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: var(--ds-primary); font-size: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
	transition: transform .12s ease, background .15s ease, color .15s ease;
}
.ds-author-chat-btn:hover { background: var(--ds-gradient); color: #fff; }
.ds-author-chat-btn:active { transform: scale(.94); }

/* ---------- Modal pilih lisensi (mobile PDP) ---------- */
.ds-license-option {
	display: flex; align-items: center; gap: .75rem;
	border: 1.5px solid #e2e8f0; border-radius: var(--ds-radius-sm);
	padding: .75rem .9rem; cursor: pointer; transition: .15s;
}
.ds-license-option:has(input:checked) {
	border-color: var(--ds-primary);
	background: rgba(79,70,229,.06);
}
.ds-license-option input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--ds-primary); }
.ds-license-option-body { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: .5rem; }
.ds-license-option-name { font-weight: 700; font-size: .9rem; color: #1e293b; }
.ds-license-option-price { font-weight: 800; font-size: .9rem; color: var(--ds-primary); white-space: nowrap; }

/* ---------- Dashboard ---------- */
.ds-dash-sidebar {
	background: #fff; border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-sm);
	padding: 1.25rem 0;
}
.ds-dash-sidebar .nav-link {
	color: #475569; font-weight: 600; border-radius: 10px;
	padding: .6rem 1rem; margin: 0 .6rem .15rem; display: flex; align-items: center; gap: .6rem;
	transition: .15s;
}
.ds-dash-sidebar .nav-link i { width: 18px; text-align: center; color: #94a3b8; }
.ds-dash-sidebar .nav-link:hover { background: #f3f2ff; color: #1e293b; }
.ds-dash-sidebar .nav-link.active {
	background: var(--ds-gradient);
	color: #fff; box-shadow: 0 8px 18px -4px rgba(79,70,229,.4);
}
.ds-dash-sidebar .nav-link.active i { color: #fff; }
.ds-dash-nav-badge {
	margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 .4em; border-radius: 999px;
	background: #f43f5e; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1;
}
.ds-dash-sidebar .nav-link.active .ds-dash-nav-badge { background: #fff; color: var(--ds-primary-dark); }
.ds-dash-profile { text-align: center; padding: 0 1rem 1.1rem; border-bottom: 1px solid #f1f5f9; margin-bottom: .75rem; }
.ds-dash-profile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: var(--ds-shadow-sm); }

/* ---------- Dashboard: separator polos antar grup menu ---------- */
.ds-dash-menu-divider { height: 1px; background: #f1f5f9; margin: .85rem 1.1rem; }
.ds-dash-menu-divider--tight { margin: .5rem 1.1rem; }

/* ---------- Dashboard: label kecil di atas sebuah grup menu (mis. "TOKO SAYA") ---------- */
.ds-dash-menu-label {
	display: flex; align-items: center; gap: .5rem;
	padding: 0 1rem; margin: 0 0 .5rem;
	font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
	color: #a1a7ba;
}
.ds-dash-menu-label i { font-size: .72rem; color: var(--ds-primary); width: 18px; text-align: center; }
.ds-dash-seller-badge {
	display: inline-flex; align-items: center; gap: .3rem; margin-left: auto;
	font-size: .62rem; font-weight: 800; letter-spacing: .02em; text-transform: none;
	color: #059669; background: rgba(5,150,105,.1); padding: .18rem .5rem; border-radius: 20px;
}
.ds-dash-seller-badge i { font-size: .4rem; color: #10b981; width: auto; }
.ds-dash-seller-badge--profile { margin: .5rem 0 0; }

/* ---------- Dashboard: header profil bermerek toko (Seller Center) - banner + logo toko ---------- */
.ds-dash-profile--store { padding-top: 0; }
.ds-dash-store-banner {
	position: relative; width: 100%; height: 64px; border-radius: 12px;
	background: var(--ds-gradient); background-size: cover; background-position: center;
	margin-bottom: 34px;
}
.ds-dash-store-logo {
	position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
	width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
	border: 3px solid #fff; background: #fff; box-shadow: var(--ds-shadow-sm);
}
[data-bs-theme="dark"] .ds-dash-store-logo { border-color: #1e2333; }

/* ---------- Dashboard: grup menu "Toko Saya" - menyatu rata dengan gaya menu utama (bukan kotak terpisah), konsisten dengan pola sidebar SaaS modern ---------- */
.ds-dash-seller-group { margin: 0; padding: 0; }
.ds-dash-seller-group .ds-dash-menu-label { margin-bottom: .35rem; }
.ds-dash-seller-group .nav-link { margin: 0 .6rem .15rem; }
.ds-dash-seller-group .nav-link.active { box-shadow: 0 8px 18px -4px rgba(79,70,229,.35); }

/* ---------- Dashboard: kartu switch context (Seller Center <-> Profil Saya) ----------
   Tombol tunggal bergaya "kartu" yang mengganti daftar menu grup lama. Varian default
   (gradient ungu/violet) dipakai untuk mengarah ke Seller Center; varian --muted
   (netral) dipakai di dalam Seller Center untuk kembali ke Profil Saya. */
.ds-dash-switch-card {
	display: flex; align-items: center; gap: .8rem;
	margin: 0 .6rem .5rem; padding: .9rem 1rem;
	border-radius: 14px; text-decoration: none;
	background: var(--ds-gradient); color: #fff;
	box-shadow: 0 10px 24px -8px rgba(79,70,229,.5);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ds-dash-switch-card:hover, .ds-dash-switch-card:focus {
	color: #fff; transform: translateY(-2px);
	box-shadow: 0 14px 30px -8px rgba(79,70,229,.6);
}
.ds-dash-switch-card-icon {
	width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
	background: rgba(255,255,255,.18);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
}
.ds-dash-switch-card-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ds-dash-switch-card-label { font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.ds-dash-switch-card-sub { font-size: .74rem; opacity: .85; margin-top: 1px; }
.ds-dash-switch-card-arrow { opacity: .8; font-size: .8rem; flex-shrink: 0; }
.ds-dash-switch-card-badge {
	font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
	background: rgba(255,255,255,.25); padding: .12rem .45rem; border-radius: 20px;
}
.ds-dash-switch-card--muted {
	background: #f8f8fc; color: #1e293b;
	border: 1px solid #eef0f5;
	box-shadow: var(--ds-shadow-sm);
}
.ds-dash-switch-card--muted:hover {
	color: #1e293b; box-shadow: var(--ds-shadow-md); border-color: #e0e1f7;
}
.ds-dash-switch-card--muted .ds-dash-switch-card-icon { background: #f3f2ff; color: var(--ds-primary); }
.ds-dash-switch-card--muted .ds-dash-switch-card-sub { color: #94a3b8; opacity: 1; }
.ds-dash-switch-card--muted .ds-dash-switch-card-arrow { color: #c7cadd; opacity: 1; }

[data-bs-theme="dark"] .ds-dash-switch-card--muted { background: #232a3d; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-dash-switch-card--muted { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-dash-switch-card--muted .ds-dash-switch-card-icon { background: rgba(129,140,248,.16); }
[data-bs-theme="dark"] .ds-dash-switch-card--muted .ds-dash-switch-card-sub { color: #7c8296; }

[data-bs-theme="dark"] .ds-dash-menu-divider { background: #2e3446; }
[data-bs-theme="dark"] .ds-dash-menu-label { color: #7c8296; }
[data-bs-theme="dark"] .ds-dash-seller-badge { background: rgba(16,185,129,.14); color: #34d399; }

/* ---------- Dashboard: menu akun jadi offcanvas (slide-in) di layar < lg ---------- */
/* Dipicu oleh hamburger utama di header (lihat header.php: $is_account_area) */

/* PENTING: Bootstrap membuat .offcanvas-body jadi "display:flex" (default flex-direction: row)
   begitu breakpoint offcanvas-lg aktif (>=992px). Tanpa baris ini, profil & menu akun akan
   tampil berdampingan (berantakan) di layar desktop, bukan tersusun ke bawah. */
.ds-dash-sidebar .offcanvas-body {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
@media (min-width: 992px) {
	/* Bootstrap membuat background offcanvas-lg jadi transparan di layar besar;
	   kembalikan jadi kartu putih seperti desain semula */
	.ds-dash-sidebar.offcanvas-lg {
		background-color: #fff !important;
	}
}

/* Saat < lg, .ds-dash-sidebar (yang juga offcanvas-lg) menjadi panel slide-in */
@media (max-width: 991.98px) {
	.ds-dash-sidebar.offcanvas-lg {
		width: 280px;
		padding: 0;
	}
	.ds-dash-sidebar .offcanvas-header {
		padding: 1rem 1.1rem;
		border-bottom: 1px solid #f1f5f9;
	}
	.ds-dash-sidebar .offcanvas-body {
		padding: 1.1rem 0;
	}
	.ds-dash-sidebar .ds-dash-profile {
		padding: 0 1.1rem 1.1rem;
	}
}

.ds-stat-card {
	border-radius: 18px; border: 1px solid rgba(15,23,42,.05); box-shadow: 0 1px 3px rgba(15,23,42,.04);
	padding: 1.4rem 1.35rem; position: relative; overflow: hidden; background: #fff;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ds-stat-card::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(160deg, rgba(79,70,229,.06), transparent 55%);
	opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ds-stat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(15,23,42,.18); border-color: rgba(79,70,229,.16); }
.ds-stat-card:hover::before { opacity: 1; }
.ds-stat-icon {
	width: 48px; height: 48px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
	background: var(--ds-gradient); box-shadow: 0 10px 20px -6px rgba(79,70,229,.45);
	position: relative; z-index: 1;
}
.ds-stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: #0f172a; position: relative; z-index: 1; margin-top: .1rem; }
.ds-stat-card .small.text-muted { position: relative; z-index: 1; font-weight: 600; font-size: .78rem; }

[data-bs-theme="dark"] .ds-stat-card { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-stat-value { color: #f1f5f9; }
[data-bs-theme="dark"] .ds-stat-card:hover { border-color: rgba(129,140,248,.35); box-shadow: 0 18px 36px -14px rgba(0,0,0,.5); }
.ds-stat-icon--success { background: linear-gradient(135deg,#16a34a,#22c55e); box-shadow: 0 10px 20px -6px rgba(22,163,74,.45); }
.ds-stat-icon--warning { background: linear-gradient(135deg,#d97706,#f59e0b); box-shadow: 0 10px 20px -6px rgba(217,119,6,.45); }
.ds-stat-icon--info { background: linear-gradient(135deg,#0891b2,#06b6d4); box-shadow: 0 10px 20px -6px rgba(8,145,178,.45); }

/* ---------- Stat card gaya gradient (dashboard user - Overview) ---------- */
.ds-stat-grad {
	border: none; border-radius: 18px; padding: 1.5rem 1.4rem; position: relative; overflow: hidden;
	color: #fff; min-height: 138px; display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 14px 28px -12px rgba(15,23,42,.28);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ds-stat-grad:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -14px rgba(15,23,42,.38); }
.ds-stat-grad-bgicon {
	position: absolute; right: -.6rem; bottom: -1rem; font-size: 6rem; opacity: .16;
	transform: rotate(-8deg); pointer-events: none;
}
.ds-stat-grad-icon {
	width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.22);
	display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff;
	position: relative; z-index: 1; margin-bottom: .9rem; backdrop-filter: blur(2px);
}
.ds-stat-grad-value { font-size: clamp(1.25rem, 1.05rem + 1.6vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-stat-grad-value--sm { font-size: clamp(1rem, .82rem + 1vw, 1.35rem); }
.ds-stat-grad-label { font-size: .82rem; font-weight: 600; opacity: .92; margin-top: .2rem; position: relative; z-index: 1; }

.ds-stat-grad--blue   { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.ds-stat-grad--teal   { background: linear-gradient(135deg,#34d399,#059669); }
.ds-stat-grad--orange { background: linear-gradient(135deg,#fbbf24,#ea580c); }
.ds-stat-grad--pink   { background: linear-gradient(135deg,#fb7185,#e11d48); }
.ds-stat-grad--purple { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.ds-stat-grad--cyan   { background: linear-gradient(135deg,#22d3ee,#0891b2); }
.ds-stat-grad--gold   { background: linear-gradient(135deg,#fde047,#ca8a04); }

/* Versi lebih ringkas (dipakai untuk baris kedua kartu statistik, mis. dashboard toko seller) */
.ds-stat-grad--compact { min-height: 108px; padding: 1.1rem 1.2rem; }
.ds-stat-grad--compact .ds-stat-grad-icon { width: 36px; height: 36px; margin-bottom: .65rem; font-size: .92rem; }
.ds-stat-grad--compact .ds-stat-grad-value { font-size: clamp(1.05rem, .9rem + 1.1vw, 1.5rem); }
.ds-stat-grad--compact .ds-stat-grad-bgicon { font-size: 4.6rem; }

/* ---------- Kartu saldo (Saldo Saya) — tombol Tarik Dana & Top Up menyatu di dalam kartu, di bawah nominal ---------- */
.ds-wallet-hero { padding-bottom: 1.4rem; }
.ds-wallet-hero-body { position: relative; z-index: 1; }
.ds-wallet-hero-value { margin-top: .1rem; }
.ds-wallet-hero-actions {
	display: flex; gap: .5rem; flex-wrap: wrap; position: relative; z-index: 1;
	margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px solid rgba(255,255,255,.22);
}
.ds-wallet-hero-btn {
	border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff;
	font-weight: 600; font-size: .8rem; backdrop-filter: blur(3px); white-space: nowrap;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ds-wallet-hero-btn:hover, .ds-wallet-hero-btn:focus {
	background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.55); color: #fff; transform: translateY(-1px);
}
.ds-wallet-hero-btn--solid { background: #fff; border-color: #fff; color: #2563eb; box-shadow: 0 6px 16px -6px rgba(15,23,42,.35); }
.ds-wallet-hero-btn--solid:hover, .ds-wallet-hero-btn--solid:focus { background: #f1f5f9; color: #1d4ed8; }

/* Di layar mobile nominal saldo dibesarkan lagi supaya lebih menonjol (angka
   adalah info paling penting di kartu ini), dan tombol dibuat full-width
   sejajar di bawah nominal & keterangan. */
@media (max-width: 575.98px) {
	.ds-wallet-hero-value { font-size: clamp(2rem, 1.55rem + 4.2vw, 2.5rem) !important; }
	.ds-wallet-hero-actions { justify-content: stretch; }
	.ds-wallet-hero-actions .btn { flex: 1 1 0; }
}

/* ---------- Flash message banner (pengganti modal/popup SweetAlert untuk
   notifikasi sukses/gagal setelah redirect) — tampil ringkas tepat di atas
   konten halaman, bukan modal yang menutupi layar. ---------- */
.ds-flash-toast {
	display: flex; align-items: flex-start; gap: .65rem;
	padding: .8rem 1rem; border-radius: 10px; border: 1px solid;
	box-shadow: 0 8px 22px -10px rgba(15, 23, 42, .14);
	font-size: .88rem; font-weight: 600; line-height: 1.4;
	animation: dsFlashToastIn .35s ease;
}
.ds-flash-toast-icon { font-size: 1.05rem; flex: none; margin-top: .05rem; }
.ds-flash-toast-msg { flex: 1 1 auto; min-width: 0; }
.ds-flash-toast-close {
	background: none; border: none; padding: .15rem .3rem; margin: -.15rem -.3rem -.15rem 0;
	color: inherit; opacity: .55; cursor: pointer; flex: none; line-height: 1; font-size: .82rem;
	transition: opacity .15s ease;
}
.ds-flash-toast-close:hover { opacity: 1; }
.ds-flash-toast--success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.ds-flash-toast--success .ds-flash-toast-icon { color: #16a34a; }
.ds-flash-toast--error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ds-flash-toast--error .ds-flash-toast-icon { color: #dc2626; }
.ds-flash-toast--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ds-flash-toast--warning .ds-flash-toast-icon { color: #d97706; }
.ds-flash-toast--info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ds-flash-toast--info .ds-flash-toast-icon { color: #2563eb; }
[data-bs-theme="dark"] .ds-flash-toast--success { background: #062615; border-color: #14532d; color: #86efac; }
[data-bs-theme="dark"] .ds-flash-toast--error { background: #2a0d0d; border-color: #7f1d1d; color: #fca5a5; }
[data-bs-theme="dark"] .ds-flash-toast--warning { background: #271a04; border-color: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .ds-flash-toast--info { background: #0a1d33; border-color: #1e3a5f; color: #93c5fd; }
@keyframes dsFlashToastIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Dashboard: header halaman (ikon + judul), konsisten di semua sub-halaman akun ---------- */
.ds-dash-page-header {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem;
	margin-bottom: 1.25rem;
}
.ds-dash-page-title { display: flex; align-items: center; gap: .7rem; margin: 0; min-width: 0; }
.ds-dash-page-title .ds-dash-page-icon {
	width: 32px; height: 32px; border-radius: 9px; flex: none;
	display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--ds-primary, #4f46e5);
	background: rgba(79,70,229,.1); box-shadow: none;
}
.ds-dash-page-title h4 { min-width: 0; }
.ds-dash-page-title small { display: block; color: #94a3b8; font-weight: 600; font-size: .78rem; }

/* ---------- Dashboard: kartu tabel data, seragam di semua halaman akun ---------- */
.ds-table-card { border: none; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); overflow: hidden; }
.ds-table-card .table { margin-bottom: 0; }
.ds-table-card .table thead th {
	background: #f8f8fc; color: #64748b; font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #eef0f5;
	padding: .85rem 1.1rem; white-space: nowrap;
}
.ds-table-card .table tbody td { padding: .8rem 1.1rem; vertical-align: middle; border-color: #f1f5f9; }
.ds-table-card .table tbody tr:last-child td { border-bottom: none; }
.ds-table-card .card-header { background: #fff; border-bottom: 1px solid #f1f5f9; padding: 1rem 1.1rem; }
.ds-table-card .card-footer { background: #fff; border-top: 1px solid #f1f5f9; }

/* Tabel berubah jadi kartu bertumpuk di layar mobile (<768px) agar TIDAK perlu
   digeser ke samping (horizontal scroll) — setiap baris jadi satu kartu ringkas.
   Kartu dibuat rata dengan tepi container (tanpa margin kiri/kanan tambahan)
   supaya jaraknya ke tepi layar konsisten dengan box lain (mis. box deskripsi
   produk), tidak menjorok lebih dalam. */
@media (max-width: 767.98px) {
	.ds-table-mobile-cards thead { display: none; }
	.ds-table-mobile-cards, .ds-table-mobile-cards tbody, .ds-table-mobile-cards tr, .ds-table-mobile-cards td {
		display: block; width: 100%;
	}
	.ds-table-mobile-cards tbody { padding: .35rem 0; }
	.ds-table-mobile-cards tr {
		border: 1px solid #eef0f5; border-radius: var(--ds-radius-sm);
		margin: .5rem 0; padding: .15rem .85rem; box-shadow: var(--ds-shadow-sm);
	}
	.ds-table-mobile-cards td {
		display: flex; align-items: center; justify-content: space-between; gap: .75rem;
		padding: .6rem 0; border: none !important; border-bottom: 1px solid #f4f5f9 !important;
		text-align: right; white-space: normal;
	}
	.ds-table-mobile-cards td:last-child { border-bottom: none !important; }
	.ds-table-mobile-cards td::before {
		content: attr(data-label); font-weight: 700; color: #64748b; text-align: left;
		font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; flex: none; margin-right: 1rem;
	}
	.ds-table-mobile-cards td[data-label=""] { justify-content: flex-end; }
	.ds-table-mobile-cards td[data-label=""]::before { content: none; }
	.ds-table-mobile-cards td:empty { display: none; }

	/* Kartu statistik gradient (Overview, Dashboard Toko) — kurangi padding
	   internal supaya angka & label tidak terlalu menjorok ke dalam di layar sempit. */
	.ds-stat-grad { padding: 1.15rem 1.05rem; min-height: 122px; border-radius: 16px; }
	.ds-stat-grad-icon { width: 36px; height: 36px; margin-bottom: .65rem; }
	.ds-stat-grad--compact { padding: 1rem .95rem; min-height: 98px; }
}

/* ---------- Badges ---------- */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

/* ---------- Forms ---------- */
.form-control, .form-select {
	border-radius: var(--ds-radius-sm); border-color: #e2e5ee; padding: .62rem .95rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
	border-color: var(--ds-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.14);
}
.form-label { font-weight: 700; font-size: .86rem; color: #374151; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--ds-radius-sm); border: 1px solid transparent; }

/* ---------- Pagination ---------- */
.ds-pagination-nav { display: flex; }
.pagination {
	display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; margin-right: auto;
	padding: .3rem; background: #f8f9fc; border: 1px solid #eef0f7; border-radius: 999px;
}
.ds-pagination-nav .pagination.justify-content-start { margin-left: 0; }
.ds-pagination-nav .pagination.justify-content-end { margin-right: 0; }
.pagination .page-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 .55rem; margin: 0;
	border-radius: 999px; border: none; background: transparent;
	font-weight: 600; font-size: .88rem; color: #4b5065;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.pagination-sm .page-link { min-width: 32px; height: 32px; font-size: .8rem; }
.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
	background: #fff; color: var(--ds-primary); box-shadow: 0 2px 8px -2px rgba(17,24,39,.12);
}
.pagination .page-item.active .page-link {
	background: var(--ds-gradient); color: #fff; border-color: var(--ds-primary);
	box-shadow: 0 6px 14px -4px rgba(79,70,229,.45);
}
.pagination .page-item.disabled .page-link { color: #c3c7d6; background: transparent; box-shadow: none; cursor: default; }
.pagination .ds-page-arrow { font-size: .78rem; }
.pagination .ds-page-ellipsis .page-link { min-width: 24px; background: transparent; cursor: default; }
[data-bs-theme="dark"] .pagination { background: #1b2030; border-color: #262c40; }
[data-bs-theme="dark"] .pagination .page-link { color: #b9c0d4; }
[data-bs-theme="dark"] .pagination .page-item:not(.disabled):not(.active) .page-link:hover { background: #262c40; color: #fff; }
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { color: #4b5065; }

/* =========================================================================
   SWEETALERT2 — tema modern, dipakai lewat customClass: { popup: 'ds-swal' }
   ========================================================================= */
.swal2-popup.ds-swal {
	border-radius: 22px !important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	box-shadow: var(--ds-shadow-xl) !important;
	padding: 2rem 1.75rem 1.75rem !important;
}
.swal2-popup.ds-swal .swal2-title { font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; }
.swal2-popup.ds-swal .swal2-html-container { font-size: .92rem; color: #5b607a; }
.swal2-popup.ds-swal .swal2-confirm,
.swal2-popup.ds-swal .swal2-deny,
.swal2-popup.ds-swal .swal2-cancel {
	border-radius: 10px !important; font-weight: 700 !important; padding: .6rem 1.5rem !important;
	box-shadow: none !important; transition: transform .12s ease, filter .15s ease !important;
}
.swal2-popup.ds-swal .swal2-confirm:hover, .swal2-popup.ds-swal .swal2-deny:hover { transform: translateY(-1px); filter: brightness(1.05); }
.swal2-popup.ds-swal .swal2-cancel { background: #f1f2f8 !important; color: #334155 !important; }
.swal2-popup.ds-swal .swal2-icon { border-width: 3px; }
.swal2-backdrop-show { background: rgba(15,14,35,.55) !important; backdrop-filter: blur(4px); }

/* =========================================================================
   MODALS (Bootstrap 5) — dibuat setara gaya premium CodeCanyon/Envato:
   sudut lebih membulat, shadow melayang, header dengan sedikit gradasi,
   tombol close bulat, animasi masuk yang lebih halus, full-width di mobile.
   ========================================================================= */
.modal-backdrop { background-color: #0f0e23; }
.modal-backdrop.show { opacity: .6; }
.modal.fade .modal-dialog { transition: transform .25s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease; transform: translateY(24px) scale(.97); opacity: 0; }
.modal.show .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.modal-content {
	border-radius: 20px; border: none; box-shadow: var(--ds-shadow-xl); overflow: hidden;
}
.modal-header {
	border-bottom: 1px solid #f1f2f8; padding: 1.15rem 1.4rem;
	background: linear-gradient(180deg, #fbfbff, #ffffff);
}
.modal-title { font-weight: 800; letter-spacing: -.01em; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid #f1f2f8; padding: 1rem 1.4rem; background: #fbfbfe; }
.modal-footer .btn { min-width: 96px; }
.btn-close {
	background-size: .75em; opacity: 1; width: 1.7rem; height: 1.7rem; border-radius: 50%;
	background-color: #f1f2f8; padding: 0; display: flex; align-items: center; justify-content: center;
	transition: all .15s ease;
}
.btn-close:hover { background-color: #e6e8f3; transform: rotate(90deg); }
.modal-xl .modal-content, .modal-lg .modal-content { border-radius: 22px; }
@media (max-width: 575.98px) {
	.modal.fade .modal-dialog { transform: translateY(40px); }
	.modal-dialog { margin: 0.75rem; max-width: calc(100% - 1.5rem); }
	.modal-content { border-radius: 20px; }
	.modal.fullscreen-sm-down .modal-content { border-radius: 0; min-height: 100vh; }
}

/* ---------- Toasts ---------- */
.toast { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lg); border: none; }

/* ---------- Misc responsive polish ---------- */
@media (max-width: 767.98px) {
	.ds-hero-search { flex-wrap: nowrap; padding: .3rem .3rem .3rem 1rem; }
	.ds-hero-search .btn { padding: .5rem 1rem; }
	.display-5 { font-size: 1.85rem; }
}

/* =========================================================================
   BREADCRUMB — dipakai di semua halaman front (front/partials/breadcrumb.php)
   ========================================================================= */
/* ---------- Kartu profil toko (halaman toko seller) - overlap di atas banner ---------- */
.ds-store-banner { margin-bottom: 0; }
.ds-store-hero-card { margin-top: -4.5rem; position: relative; z-index: 2; background: #fff; }
.ds-store-actions-label { margin-left: .35rem; }
@media (max-width: 767.98px) {
	.ds-store-hero-card { margin-top: -3rem; }
	.ds-store-hero-card .ds-store-hero-avatar { width: 72px; height: 72px; }

	/* Tombol Chat Toko & Laporkan Toko dipindah ke pojok kanan atas card,
	   jadi icon-only supaya rapi dan tidak numpuk di bawah nama toko. */
	.ds-store-actions {
		position: absolute;
		top: .75rem;
		right: .75rem;
		z-index: 3;
		gap: .5rem !important;
	}
	.ds-store-actions .btn {
		width: 34px;
		height: 34px;
		padding: 0;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: .85rem;
	}
	.ds-store-actions-label { display: none; }
}

.ds-breadcrumb-wrap { min-width: 0; }
.ds-breadcrumb-list {
	display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
	list-style: none; margin: 0; padding: .58rem 1.1rem;
	background: #fff; border: 1px solid #eef0f5; border-radius: 12px;
	box-shadow: var(--ds-shadow-sm);
	font-size: .82rem; font-weight: 600;
	max-width: 100%;
}
.ds-breadcrumb-item { display: flex; align-items: center; min-width: 0; }
.ds-breadcrumb-item a {
	color: #64748b; text-decoration: none; display: flex; align-items: center; gap: .4rem;
	transition: color .15s ease;
}
.ds-breadcrumb-item a:hover { color: var(--ds-primary); }
.ds-breadcrumb-item a i { font-size: .78rem; color: var(--ds-primary); }
.ds-breadcrumb-item span {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.ds-breadcrumb-item.active span { color: #0f172a; font-weight: 700; }
.ds-breadcrumb-sep { display: flex; align-items: center; color: #cbd5e1; font-size: .62rem; }
@media (max-width: 576px) {
	.ds-breadcrumb-list { font-size: .76rem; padding: .5rem .85rem; gap: .32rem; }
	.ds-breadcrumb-item span { max-width: 130px; }
}

/* =========================================================================
   BLOG SIDEBAR — kategori blog dibuat lebih rapi & profesional
   ========================================================================= */
.ds-blog-sidebar { position: sticky; top: 90px; }
.ds-blog-sidebar-card {
	border: none; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); overflow: hidden;
}
.ds-blog-sidebar-card .card-header {
	background: var(--ds-gradient); color: #fff; border: none;
	padding: .95rem 1.1rem; font-weight: 800; letter-spacing: -.01em;
	display: flex; align-items: center; gap: .55rem;
}
.ds-blog-sidebar-card .card-header i { font-size: .95rem; opacity: .9; }
.ds-blog-cat-list { list-style: none; margin: 0; padding: .5rem; }
.ds-blog-cat-list a {
	display: flex; align-items: center; justify-content: space-between; gap: .5rem;
	padding: .6rem .75rem; margin-bottom: .15rem; border-radius: 10px;
	color: #475569; font-weight: 600; font-size: .88rem; text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.ds-blog-cat-list a:hover { background: #f3f2ff; color: var(--ds-primary-dark); transform: translateX(2px); }
.ds-blog-cat-list a.active { background: var(--ds-gradient); color: #fff; box-shadow: 0 8px 18px -6px rgba(79,70,229,.4); }
.ds-blog-cat-list a i:first-child { font-size: .7rem; color: #c7cadd; width: 14px; }
.ds-blog-cat-list a.active i:first-child { color: rgba(255,255,255,.85); }
.ds-blog-cat-count {
	font-size: .72rem; font-weight: 700; color: #94a3b8; background: #f1f2f8;
	border-radius: 999px; padding: .1rem .5rem; min-width: 24px; text-align: center;
}
.ds-blog-cat-list a.active .ds-blog-cat-count { background: rgba(255,255,255,.22); color: #fff; }
.ds-blog-sidebar-empty { padding: .75rem 1.1rem 1rem; font-size: .82rem; color: #94a3b8; }

/* =========================================================================
   CART / CHECKOUT ITEM ROW — responsif, harga & aksi pindah ke baris bawah
   di layar mobile supaya tidak berantakan.
   ========================================================================= */
.cart-item-body {
	display: flex; align-items: center; flex-wrap: wrap; gap: .85rem 1rem;
}
.cart-item-main {
	display: flex; align-items: center; gap: .85rem;
	flex: 1 1 auto; min-width: 0;
}
.cart-item-img {
	width: 88px; height: 64px; object-fit: cover; flex-shrink: 0;
}
.cart-item-info { min-width: 0; }
.cart-item-info a { display: block; }
.cart-item-meta {
	display: flex; align-items: center; gap: 1rem; flex-shrink: 0; margin-left: auto;
}
@media (max-width: 575.98px) {
	.cart-item-body { padding: .9rem !important; gap: 0; }
	.cart-item-main { flex: 1 1 100%; }
	.cart-item-img { width: 68px; height: 68px; border-radius: 10px; }
	.cart-item-info a { font-size: .88rem; }
	.cart-item-meta {
		flex: 1 1 100%; justify-content: space-between; margin-left: 0;
		padding-top: .75rem; margin-top: .75rem; border-top: 1px dashed #e2e8f0;
	}
}

/* ---------- Grid produk 2 kolom rapi di layar kecil (HP) ---------- */
@media (max-width: 575.98px) {
	.row.g-3, .row.g-4 { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
	.row.g-3 > [class*="col-"], .row.g-4 > [class*="col-"] { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
	.col-6 .card-img-top { height: 110px !important; }
	.col-6 .card-body { padding: .65rem !important; }
	.col-6 .card-body .small, .col-6 .card-body .fw-semibold, .col-6 .card-body .fw-bold { font-size: .78rem; }
	.col-6 .card-body .badge { font-size: .65rem; padding: .3em .5em; }
	.col-6 .card .card-title { font-size: .82rem; }
}

/* ---------- Fix: sticky sidebar produk menutupi navbar saat scroll ---------- */
/* Navbar utama harus selalu berada di atas elemen sticky lain (mis. sidebar beli di halaman detail produk) */
.navbar.sticky-top {
	z-index: 1030;
}
/* Sidebar "Pilih Lisensi" di halaman detail produk: turunkan z-index agar tidak menutupi navbar */
.col-lg-4 > .card.sticky-top {
	z-index: 1010;
}


/* =========================================================================
   WYSIWYG CONTENT — styling untuk HTML hasil editor TinyMCE yang ditampilkan
   di front-end: konten blog, deskripsi & fitur produk, changelog versi,
   dan jawaban FAQ. Class ".wysiwyg-content" ditambahkan pada wrapper.
   ========================================================================= */
.wysiwyg-content { color: #374151; line-height: 1.75; }
.wysiwyg-content > *:first-child { margin-top: 0; }
.wysiwyg-content > *:last-child { margin-bottom: 0; }
.wysiwyg-content h1, .wysiwyg-content h2, .wysiwyg-content h3,
.wysiwyg-content h4, .wysiwyg-content h5, .wysiwyg-content h6 {
	letter-spacing: -.02em;
	font-weight: 700;
	margin-top: 1.5em;
	margin-bottom: .6em;
	color: #111827;
}
.wysiwyg-content h1 { font-size: 1.75rem; }
.wysiwyg-content h2 { font-size: 1.5rem; }
.wysiwyg-content h3 { font-size: 1.25rem; }
.wysiwyg-content p { margin-bottom: 1em; }
.wysiwyg-content ul, .wysiwyg-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.wysiwyg-content li { margin-bottom: .35em; }
.wysiwyg-content a { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 2px; }
.wysiwyg-content a:hover { color: var(--ds-primary-dark); }
.wysiwyg-content img { max-width: 100%; height: auto; border-radius: var(--ds-radius-sm); margin: .5em 0; }
.wysiwyg-content blockquote {
	border-left: 4px solid var(--ds-primary);
	background: rgba(79, 70, 229, .05);
	padding: .75em 1.25em;
	margin: 1.25em 0;
	border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
	color: #4b5563;
}
.wysiwyg-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.wysiwyg-content table th, .wysiwyg-content table td { border: 1px solid #e5e7eb; padding: .5em .75em; }
.wysiwyg-content table th { background: #f9fafb; font-weight: 600; }
.wysiwyg-content code { background: #f3f4f6; padding: .15em .4em; border-radius: 6px; font-size: .9em; }
.wysiwyg-content pre { background: #111827; color: #e5e7eb; padding: 1em; border-radius: var(--ds-radius-sm); overflow-x: auto; }
.wysiwyg-content pre code { background: none; padding: 0; color: inherit; }
.wysiwyg-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.tab-content.p-4 {
    padding: 1rem !important;
}
/* =========================================================================
   HALAMAN VOUCHER & KUPON — kartu kupon gaya "tiket digital" + sidebar filter
   ========================================================================= */
.ds-voucher-sidebar { position: sticky; top: 90px; }

/* ---------- Filter sidebar sebagai offcanvas (slide-in) di layar < lg ---------- */
/* Dipakai halaman toko/portofolio seller agar filter tidak mendorong konten ke bawah di mobile */
.ds-filter-fab {
	position: fixed;
	right: 16px;
	bottom: 22px;
	z-index: 1035;
	width: 52px; height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--ds-gradient);
	color: #fff;
	font-size: 1.15rem;
	box-shadow: 0 10px 22px -6px rgba(79,70,229,.55);
	display: flex; align-items: center; justify-content: center;
}
.ds-filter-fab:active { transform: scale(.94); }

.ds-filter-offcanvas .offcanvas-body {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
@media (min-width: 992px) {
	.ds-filter-offcanvas.offcanvas-lg { background-color: transparent !important; }
}
@media (max-width: 991.98px) {
	.ds-filter-offcanvas.offcanvas-lg { width: 300px; padding: 0; }
	.ds-filter-offcanvas .offcanvas-header {
		padding: 1rem 1.1rem;
		border-bottom: 1px solid #f1f5f9;
	}
	.ds-filter-offcanvas .offcanvas-body { padding: 1.1rem; }
	.ds-filter-offcanvas .card { box-shadow: none !important; border: none !important; }
	.ds-filter-offcanvas .card-body { padding: 0 !important; }
}

.ds-voucher-search-box { position: relative; }
.ds-voucher-search-box i {
	position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
	color: #94a3b8; font-size: .8rem; pointer-events: none;
}
.ds-voucher-search-box .form-control { padding-left: 2rem; }

.ds-voucher-info-card {
	background: var(--ds-gradient);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-md);
	padding: 1.4rem 1.1rem;
	text-align: center;
	color: #fff;
}
.ds-voucher-info-icon {
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,.18);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.15rem; margin-bottom: .6rem;
}
.ds-voucher-info-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.ds-voucher-info-label { font-size: .78rem; opacity: .9; margin-top: .1rem; }

/* ---------- Tiket voucher — satu desain seragam (tanpa warna-warni),
   dipakai untuk KEDUA daftar: "Voucher Tersedia" dan "Voucher Saya",
   sehingga tampilannya konsisten di seluruh halaman. Gaya boarding-pass:
   ikon di kiri, garis putus-putus dengan lubang notch, info di tengah,
   kode/tombol aksi di kanan. ---------- */
.ds-voucher-ticket {
	--icon-w: 84px;
	display: flex; align-items: stretch; background: var(--bs-body-bg);
	border: none; border-radius: 16px; box-shadow: var(--ds-shadow-sm); overflow: hidden;
	position: relative; transition: box-shadow .18s ease, transform .18s ease;
}
.ds-voucher-ticket:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
.ds-voucher-ticket.is-claimed,
.ds-voucher-ticket.is-used { opacity: .62; }

.ds-voucher-ticket-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.ds-voucher-ticket-icon {
	flex: 0 0 var(--icon-w); width: var(--icon-w); display: flex; align-items: center; justify-content: center;
	background: #f3f2ff; color: var(--ds-primary); font-size: 1.6rem; position: relative;
}
.ds-voucher-ticket-icon::after {
	content: ''; position: absolute; top: 12%; bottom: 12%; right: 0;
	border-right: 2px dashed #d9d5f7;
}
[data-bs-theme="dark"] .ds-voucher-ticket-icon { background: rgba(129,140,248,.14); }
[data-bs-theme="dark"] .ds-voucher-ticket-icon::after { border-color: rgba(129,140,248,.25); }

.ds-voucher-ticket-notch {
	position: absolute; left: var(--icon-w); transform: translateX(-50%);
	width: 20px; height: 20px; border-radius: 50%; background: var(--bs-body-bg); z-index: 2;
}
.ds-voucher-ticket-notch-top { top: -10px; }
.ds-voucher-ticket-notch-bottom { bottom: -10px; }

.ds-voucher-ticket-body { flex: 1 1 auto; min-width: 0; padding: .85rem 1.1rem; display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.ds-voucher-ticket-body h6 { min-width: 0; }
.ds-voucher-ticket-desc { font-size: .78rem; color: #64748b; }

.ds-voucher-badge-value {
	display: inline-flex; align-items: center; background: rgba(79,70,229,.1); color: var(--ds-primary);
	font-weight: 700; font-size: .72rem; padding: .28rem .6rem; border-radius: 20px; white-space: nowrap;
}
[data-bs-theme="dark"] .ds-voucher-badge-value { background: rgba(129,140,248,.16); }

.ds-voucher-ticket-info { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: .15rem .9rem; font-size: .76rem; color: #64748b; }
.ds-voucher-ticket-info li { display: flex; align-items: center; gap: .32rem; }
.ds-voucher-ticket-info li i { color: var(--ds-primary); font-size: .72rem; }

.ds-voucher-ticket-meta { font-size: .78rem; color: #64748b; }

.ds-voucher-ticket-right {
	flex: 0 0 172px; width: 172px; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
	gap: .5rem; padding: .85rem 1.1rem; border-left: 1px solid #eef0f5;
}
.ds-voucher-ticket-code {
	font-size: .8rem; font-weight: 800; letter-spacing: .01em; color: #1e293b; text-align: center;
	background: #f8f8fc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: .32rem .4rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .ds-voucher-ticket-right { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-voucher-ticket-code { background: #262c3d; border-color: #3a4157; color: #e2e8f0; }

@media (max-width: 575.98px) {
	.ds-voucher-ticket { flex-direction: column; }
	.ds-voucher-ticket-icon { font-size: 1.4rem; }
	.ds-voucher-ticket-body { padding: .8rem .9rem; }
	.ds-voucher-ticket-right {
		flex: 0 0 auto; width: 100%; height: auto;
		flex-direction: row; align-items: center; justify-content: space-between;
		border-left: none; border-top: 1px dashed #dfe3ee; padding: .7rem .9rem;
	}
	[data-bs-theme="dark"] .ds-voucher-ticket-right { border-top-color: #3a4157; }
	.ds-voucher-ticket-code { flex: 1 1 auto; }
	.ds-voucher-ticket-right .btn { flex: 0 0 auto; }
}

/* =========================================================================
   DARK MODE — perbaikan warna teks & background kustom yang sebelumnya
   hardcoded (tidak otomatis mengikuti Bootstrap 5 [data-bs-theme="dark"]),
   sehingga teks di navbar, menu kategori, breadcrumb, sidebar, dsb tetap
   terbaca saat mode gelap aktif.
   ========================================================================= */
[data-bs-theme="dark"] {
	--ds-shadow-sm: 0 2px 8px rgba(0,0,0,.35);
	--ds-shadow-md: 0 10px 30px rgba(0,0,0,.45);
	--ds-shadow-lg: 0 20px 50px rgba(0,0,0,.55);
	--ds-shadow-xl: 0 30px 70px rgba(0,0,0,.6);
}

/* Navbar & menu kategori */
[data-bs-theme="dark"] .navbar .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus { color: #a5b4fc; }
[data-bs-theme="dark"] .navbar .dropdown-menu { border-color: #2e3446; }
[data-bs-theme="dark"] .navbar .dropdown-item { color: #e2e8f0; }
[data-bs-theme="dark"] .navbar .dropdown-item:hover { background: rgba(129,140,248,.16); color: #c7d2fe; }
[data-bs-theme="dark"] .ds-mega-menu { background: #171b28; border-color: #2e3446 !important; }
[data-bs-theme="dark"] .dropdown-header { color: #e2e8f0; }

/* Menu mobile (offcanvas) */
[data-bs-theme="dark"] .ds-mobile-offcanvas .offcanvas-header { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-mobile-offcanvas .offcanvas-title { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-offcanvas-search .form-control { background: #1e2333; border-color: #2e3446; color: #e2e8f0; }
[data-bs-theme="dark"] .ds-mobile-offcanvas .nav-item { border-color: #262b3d; }
[data-bs-theme="dark"] .ds-mobile-offcanvas .nav-link:hover,
[data-bs-theme="dark"] .ds-mobile-offcanvas .nav-link:focus { background: rgba(129,140,248,.16); color: #c7d2fe; }
[data-bs-theme="dark"] .ds-mobile-menu-card { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-mobile-menu-card-label { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-mobile-menu-card-icon { background: rgba(129,140,248,.16); }

/* Cards, breadcrumb, category chip */
[data-bs-theme="dark"] .card { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-breadcrumb-list { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-breadcrumb-item.active span { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-category-chip { background: #1e2333; border-color: #2e3446; }

/* Product detail meta panel */
[data-bs-theme="dark"] .ds-meta-panel { background: #1e2333; }
[data-bs-theme="dark"] .ds-meta-item { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-meta-icon { background: rgba(129,140,248,.16); }
[data-bs-theme="dark"] .ds-author-chat-btn { background: #1e2333; color: #a5b4fc; }
[data-bs-theme="dark"] .ds-license-option { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-license-option:has(input:checked) { background: rgba(129,140,248,.12); }
[data-bs-theme="dark"] .ds-license-option-name { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-meta-value { color: #e2e8f0; }

/* Dashboard sidebar */
[data-bs-theme="dark"] .ds-dash-sidebar { background: #1e2333; }
[data-bs-theme="dark"] .ds-dash-sidebar .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] .ds-dash-sidebar .nav-link:hover { background: rgba(129,140,248,.16); color: #e2e8f0; }
[data-bs-theme="dark"] .ds-dash-profile { border-color: #2e3446; }
@media (min-width: 992px) {
	[data-bs-theme="dark"] .ds-dash-sidebar.offcanvas-lg { background-color: #1e2333 !important; }
}
[data-bs-theme="dark"] .ds-dash-sidebar .offcanvas-header { border-color: #2e3446; }

/* Filter offcanvas (halaman toko/portofolio) */
@media (max-width: 991.98px) {
	[data-bs-theme="dark"] .ds-filter-offcanvas.offcanvas-lg { background-color: #1e2333 !important; }
	[data-bs-theme="dark"] .ds-filter-offcanvas .offcanvas-header { border-color: #2e3446; }
}
[data-bs-theme="dark"] .ds-dash-page-title small { color: #64748b; }
[data-bs-theme="dark"] .ds-table-card .table thead th { background: #1e2333; color: #94a3b8; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-table-card .table tbody td { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-table-card .card-header,
[data-bs-theme="dark"] .ds-table-card .card-footer { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .ds-table-mobile-cards tr { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-table-mobile-cards td { border-color: #2e3446 !important; }
[data-bs-theme="dark"] .ds-table-mobile-cards td::before { color: #64748b; }

/* Form & pagination */
[data-bs-theme="dark"] .form-label { color: #cbd5e1; }
[data-bs-theme="dark"] .pagination .page-link { color: #cbd5e1; border-color: #2e3446; }

/* SweetAlert2 & Modal */
[data-bs-theme="dark"] .swal2-popup.ds-swal { background: #1e2333; color: #e2e8f0; }
[data-bs-theme="dark"] .swal2-popup.ds-swal .swal2-html-container { color: #a8b0c4; }
[data-bs-theme="dark"] .swal2-popup.ds-swal .swal2-cancel { background: #2e3446 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .modal-header { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .modal-footer { background: #1e2333; border-color: #2e3446; }
[data-bs-theme="dark"] .btn-close { background-color: #2e3446; filter: invert(1) grayscale(100%) brightness(1.4); }
[data-bs-theme="dark"] .btn-close:hover { background-color: #3a4157; }

/* Blog sidebar */
[data-bs-theme="dark"] .ds-blog-cat-list a { color: #cbd5e1; }
[data-bs-theme="dark"] .ds-blog-cat-list a:hover { background: rgba(129,140,248,.16); color: #c7d2fe; }
[data-bs-theme="dark"] .ds-blog-cat-count { background: #2e3446; color: #94a3b8; }

/* Cart item divider */
[data-bs-theme="dark"] .cart-item-meta { border-color: #2e3446 !important; }

/* WYSIWYG content */
[data-bs-theme="dark"] .wysiwyg-content { color: #cbd5e1; }
[data-bs-theme="dark"] .wysiwyg-content h1, [data-bs-theme="dark"] .wysiwyg-content h2,
[data-bs-theme="dark"] .wysiwyg-content h3, [data-bs-theme="dark"] .wysiwyg-content h4,
[data-bs-theme="dark"] .wysiwyg-content h5, [data-bs-theme="dark"] .wysiwyg-content h6 { color: #f1f5f9; }
[data-bs-theme="dark"] .wysiwyg-content blockquote { color: #cbd5e1; background: rgba(129,140,248,.1); }
[data-bs-theme="dark"] .wysiwyg-content table th { background: #1e2333; }
[data-bs-theme="dark"] .wysiwyg-content table th, [data-bs-theme="dark"] .wysiwyg-content table td { border-color: #2e3446; }
[data-bs-theme="dark"] .wysiwyg-content code { background: #2e3446; color: #e2e8f0; }
[data-bs-theme="dark"] .wysiwyg-content hr { border-color: #2e3446; }

/* Halaman voucher: daftar tiket voucher & sidebar filter */
[data-bs-theme="dark"] .ds-voucher-ticket-info { color: #94a3b8; }
[data-bs-theme="dark"] .ds-voucher-ticket-desc { color: #94a3b8; }
[data-bs-theme="dark"] .ds-voucher-ticket-meta { color: #94a3b8; }
[data-bs-theme="dark"] .ds-voucher-ticket { box-shadow: none; border: 1px solid #2e3446; }
[data-bs-theme="dark"] .ds-voucher-search-box i { color: #64748b; }

/* =========================================================================
   BOTTOM NAVIGATION BAR (mobile only) — gaya app marketplace (Shopee/Tokopedia):
   bar melayang di bawah layar dengan tombol "Keranjang" dibuat elevated/floating
   di tengah agar jadi fokus utama, sisanya ikon polos + label kecil.
   ========================================================================= */
.ds-bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
	display: flex; align-items: stretch; justify-content: space-around;
	background: #fff; border-top: 1px solid #eef0f7;
	box-shadow: 0 -8px 24px -12px rgba(15,23,42,.18);
	padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
}
.ds-bottom-nav-item {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .2rem; padding: .35rem .1rem; color: #94a3b8; text-decoration: none;
	font-size: .66rem; font-weight: 700; position: relative; min-width: 0;
}
.ds-bottom-nav-item i { font-size: 1.15rem; }
.ds-bottom-nav-item span { line-height: 1; white-space: nowrap; }
.ds-bottom-nav-item.active { color: var(--ds-primary); }
.ds-bottom-nav-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid #e2e8f0; }
.ds-bottom-nav-item.active .ds-bottom-nav-avatar { border-color: var(--ds-primary); }

/* Tombol Keranjang: bulat, melayang naik ke atas garis bar, jadi focal point */
.ds-bottom-nav-item--fab { justify-content: flex-start; }
.ds-bottom-nav-fab {
	width: 50px; height: 50px; border-radius: 50%; margin-top: -22px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ds-gradient); color: #fff; font-size: 1.2rem;
	box-shadow: 0 10px 22px -6px rgba(79,70,229,.55); border: 4px solid #fff;
	position: relative; transition: transform .15s ease;
}
.ds-bottom-nav-item--fab:active .ds-bottom-nav-fab { transform: scale(.93); }
.ds-bottom-nav-fab.active { box-shadow: 0 10px 22px -6px rgba(79,70,229,.75), 0 0 0 3px rgba(79,70,229,.18); }

.ds-bottom-nav-badge {
	position: absolute; top: -3px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 20px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center; border: 2px solid #fff; line-height: 1;
}
.ds-bottom-nav-badge--corner { top: 0; right: 14%; }

[data-bs-theme="dark"] .ds-bottom-nav { background: #1e2333; border-color: #2e3446; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .ds-bottom-nav-item { color: #7c8296; }
[data-bs-theme="dark"] .ds-bottom-nav-item.active { color: #a5b4fc; }
[data-bs-theme="dark"] .ds-bottom-nav-fab { border-color: #1e2333; }
[data-bs-theme="dark"] .ds-bottom-nav-avatar { border-color: #3a4157; }

/* ---------- Action bar mobile di halaman Detail Produk (ganti nav bawah standar) ----------
   Gaya marketplace besar: ikon Wishlist & Laporkan di kiri, tombol CTA (Keranjang/
   Unduh/Gratis) besar mengisi sisa ruang di kanan, supaya aksi utama jelas & mudah dijangkau. */
.ds-product-actionbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
	display: flex; align-items: center; gap: .6rem;
	background: #fff; border-top: 1px solid #eef0f7;
	box-shadow: 0 -8px 24px -12px rgba(15,23,42,.18);
	padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.ds-product-actionbar-icon {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; border: none;
	display: flex; align-items: center; justify-content: center;
	background: #f6f6fb; color: #64748b; font-size: 1.1rem; text-decoration: none;
	transition: transform .12s ease, background .15s ease, color .15s ease;
}
.ds-product-actionbar-icon:active { transform: scale(.92); }
.ds-product-actionbar-icon.is-active { background: rgba(239,68,68,.1); color: #ef4444; }
.ds-product-actionbar-cta {
	flex: 1 1 auto; min-width: 0; height: 46px; border: none; border-radius: 12px;
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	background: var(--ds-gradient); color: #fff; font-weight: 800; font-size: .9rem;
	text-decoration: none; transition: transform .12s ease;
}
.ds-product-actionbar-cta:active { transform: scale(.98); }
.ds-product-actionbar-cta--outline { background: #fff; color: #ef4444; border: 1.5px solid #ef4444; }
.ds-product-actionbar-cta--success { background: #16a34a; }

[data-bs-theme="dark"] .ds-product-actionbar { background: #1e2333; border-color: #2e3446; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .ds-product-actionbar-icon { background: #232a3d; color: #94a3b8; }
[data-bs-theme="dark"] .ds-product-actionbar-icon.is-active { background: rgba(239,68,68,.16); color: #f87171; }
[data-bs-theme="dark"] .ds-product-actionbar-cta--outline { background: #232a3d; }


/* Beri jarak konten paling bawah supaya tidak ketutup bottom nav, dan geser FAB filter produk naik */
@media (max-width: 991.98px) {
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
	.ds-filter-fab { bottom: calc(22px + 58px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   TOMBOL SEARCH TOP-BAR MOBILE + OVERLAY PENCARIAN GLOBAL
   Menggantikan tombol avatar/akun di top bar mobile (akun sudah ada di
   bottom nav), sehingga di top bar mobile hanya tersisa 1 tombol: search.
   Overlay dibuat full-screen dengan latar konten di belakangnya di-blur.
   ========================================================================= */
.ds-search-trigger-btn {
	width: 38px; height: 38px; border-radius: 50%; border: none;
	background: #f3f2ff; color: var(--ds-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1rem; transition: transform .15s ease, background .15s ease;
}
.ds-search-trigger-btn:active { transform: scale(.92); background: #e9e7ff; }
[data-bs-theme="dark"] .ds-search-trigger-btn { background: rgba(129,140,248,.16); color: #a5b4fc; }

/* Kartu sheet melayang (bukan fullscreen): sudut membulat, ada jarak dari tepi layar,
   mengikuti gaya referensi (mis. modal "Select asset" ala MoonPay). */
.ds-search-overlay-dialog {
	margin: calc(4.2rem + env(safe-area-inset-top, 0px)) .85rem auto;
	max-width: 480px;
}
.ds-search-overlay .modal-content {
	border: none; border-radius: 26px; box-shadow: var(--ds-shadow-xl);
	max-height: calc(100dvh - 8rem - env(safe-area-inset-top, 0px));
	overflow: hidden;
}
.ds-search-overlay-form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }

.ds-search-overlay-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 1rem 1rem .55rem; flex: 0 0 auto; }
.ds-search-overlay-close {
	position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
	width: 28px; height: 28px; border-radius: 50%; border: none; background: #f1f2f7;
	color: #475569; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center;
}
.ds-search-overlay-title { margin: 0; font-size: 1.02rem; font-weight: 800; color: #1e293b; text-align: center; }

.ds-search-overlay-bar { padding: .95rem 1.1rem 1rem; flex: 0 0 auto; }
.ds-search-overlay-input-wrap {
	display: flex; align-items: center; gap: .55rem;
	background: #fff; border: 1.5px solid #e2e8f0; border-radius: 999px; padding: 0 .9rem; height: 46px;
}
.ds-search-overlay-input-wrap:focus-within { border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.ds-search-overlay-input-wrap i.fa-magnifying-glass { color: #94a3b8; font-size: .9rem; }
.ds-search-overlay-input {
	flex: 1 1 auto; border: none; background: transparent; outline: none;
	font-size: .95rem; height: 100%; min-width: 0;
}
.ds-search-overlay-clear { border: none; background: transparent; color: #94a3b8; padding: 0; font-size: 1.05rem; line-height: 1; }

.ds-search-overlay-body { flex: 1 1 auto; overflow-y: auto; padding: .4rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
.ds-search-overlay-section { margin-top: 1.1rem; }
.ds-search-overlay-section:first-child { margin-top: 0; }
.ds-search-overlay-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.ds-search-overlay-heading { font-size: .78rem; font-weight: 800; letter-spacing: .01em; color: #94a3b8; margin-bottom: .55rem; }
.ds-search-overlay-clearall { border: none; background: transparent; color: var(--ds-primary); font-size: .78rem; font-weight: 700; padding: 0; }

/* List baris (dipakai untuk "Pencarian Terakhir" & "Kategori Populer"), meniru pola baris ikon+teks pada referensi */
.ds-search-overlay-list { display: flex; flex-direction: column; }
.ds-search-overlay-row {
	display: flex; align-items: center; gap: .75rem; padding: .55rem 0;
	text-decoration: none; color: inherit; border: none; background: transparent; width: 100%; text-align: left;
}
.ds-search-overlay-row-icon {
	width: 38px; height: 38px; border-radius: 50%; background: #f3f2ff; color: var(--ds-primary);
	display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: 0 0 auto;
}
.ds-search-overlay-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ds-search-overlay-row-title { font-weight: 700; font-size: .92rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-search-overlay-row-sub { font-size: .76rem; color: #94a3b8; }
.ds-search-overlay-row-arrow { color: #cbd5e1; font-size: .78rem; flex: 0 0 auto; }
.ds-search-overlay-row-remove {
	border: none; background: transparent; color: #cbd5e1; font-size: .95rem; padding: .35rem; flex: 0 0 auto;
}

[data-bs-theme="dark"] .ds-search-overlay .modal-content { background: #1e2333; }
[data-bs-theme="dark"] .ds-search-overlay-title { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-search-overlay-close { background: #262c40; color: #cbd5e1; }
[data-bs-theme="dark"] .ds-search-overlay-input-wrap { background: #262c40; border-color: #3a4157; }
[data-bs-theme="dark"] .ds-search-overlay-input { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-search-overlay-row-icon { background: rgba(129,140,248,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .ds-search-overlay-row-title { color: #e2e8f0; }

/* Blur konten di belakang overlay pencarian, senada dengan backdrop offcanvas menu.
   Ditandai lewat class di <body> (lihat app.js) karena .modal-backdrop dari Bootstrap
   di-append sebagai child terakhir <body>, bukan sibling langsung dari modal. */
body.ds-search-overlay-open .modal-backdrop {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background-color: rgba(15, 23, 42, .32);
}
body.ds-search-overlay-open .modal-backdrop.show { opacity: 1; }

@media (min-width: 992px) {
	.ds-search-overlay { display: none !important; }
}

/* =========================================================================
   NOTIFIKASI — lonceng + badge (desktop dropdown & tombol mobile), dan
   halaman daftar notifikasi lengkap di dashboard akun.
   ========================================================================= */
.ds-notif-trigger-btn { position: relative; }

/* Badge navbar (wishlist, cart, notifikasi) diseragamkan ukuran & posisinya:
   line-height dan display flex dikunci supaya kotak badge tidak ikut membesar
   mengikuti line-height tombol pembungkusnya, sehingga posisinya (lewat
   translate-middle) konsisten di antara ketiganya, tidak ada yang "naik"
   / lebih besar sendiri. */
.ds-badge-wishlist,
.ds-badge-cart,
.ds-notif-badge {
	font-size: .64rem; font-weight: 800; line-height: 1;
	min-width: 17px; height: 17px; padding: 0 .32em; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
}
.ds-notif-badge--corner {
	position: absolute; top: 3px; right: 3px; transform: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: #f43f5e; color: #fff; box-shadow: 0 0 0 2px #fff;
}
[data-bs-theme="dark"] .ds-notif-badge--corner { box-shadow: 0 0 0 2px #1a1f2e; }

.ds-notif-dropdown-menu { width: 340px; max-width: 90vw; padding: 0; border: none; border-radius: 16px; box-shadow: var(--ds-shadow-xl); overflow: hidden; }
.ds-notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem .7rem; font-weight: 800; font-size: .95rem; border-bottom: 1px solid #eef0f7; }
.ds-notif-dropdown-markall { border: none; background: transparent; color: var(--ds-primary); font-size: .74rem; font-weight: 700; padding: 0; }
.ds-notif-dropdown-list { max-height: 360px; overflow-y: auto; }
.ds-notif-dropdown-empty { padding: 2.2rem 1rem; text-align: center; color: #94a3b8; font-size: .85rem; }
.ds-notif-dropdown-footer { display: block; text-align: center; padding: .7rem; font-size: .8rem; font-weight: 700; color: var(--ds-primary); text-decoration: none; border-top: 1px solid #eef0f7; }
.ds-notif-dropdown-footer:hover { background: #f8f9fd; }

.ds-notif-dd-item { display: flex; gap: .65rem; padding: .7rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f5f6fa; }
.ds-notif-dd-item:last-child { border-bottom: none; }
.ds-notif-dd-item:hover { background: #f8f9fd; }
.ds-notif-dd-item--unread { background: #f7f6ff; }
.ds-notif-dd-body { flex: 1 1 auto; min-width: 0; }
.ds-notif-dd-title { font-weight: 700; font-size: .84rem; color: #1e293b; display: block; }
.ds-notif-dd-message { font-size: .78rem; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
.ds-notif-dd-time { font-size: .72rem; color: #94a3b8; margin-top: 2px; display: block; }
.ds-notif-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-primary); margin-left: 6px; vertical-align: middle; }

/* Warna ikon berdasar tipe notifikasi, dipakai bareng di dropdown & halaman daftar lengkap */
.ds-notif-icon-success { background: #dcfce7; color: #16a34a; }
.ds-notif-icon-danger  { background: #fee2e2; color: #dc2626; }
.ds-notif-icon-warning { background: #fef3c7; color: #d97706; }
.ds-notif-icon-info    { background: #dbeafe; color: #2563eb; }
.ds-notif-icon-primary { background: #ede9fe; color: #7c3aed; }
.ds-notif-icon-secondary { background: #f1f5f9; color: #64748b; }
.ds-notif-icon, .ds-notif-item-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex: 0 0 auto; }
.ds-notif-item-icon { width: 42px; height: 42px; font-size: .95rem; }

[data-bs-theme="dark"] .ds-notif-dropdown-menu { background: #1e2333; }
[data-bs-theme="dark"] .ds-notif-dropdown-header { border-color: #2e3446; color: #e2e8f0; }
[data-bs-theme="dark"] .ds-notif-dd-item { border-color: #2e3446; }
[data-bs-theme="dark"] .ds-notif-dd-item:hover { background: #262c40; }
[data-bs-theme="dark"] .ds-notif-dd-item--unread { background: #232842; }
[data-bs-theme="dark"] .ds-notif-dd-title { color: #e2e8f0; }
[data-bs-theme="dark"] .ds-notif-dropdown-footer { border-color: #2e3446; }

/* Halaman "Notifikasi" lengkap (dashboard akun) */
.ds-notif-item { display: flex; gap: .8rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit; }
.ds-notif-item--unread { background: #f7f6ff; }
.ds-notif-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-notif-item-title { font-weight: 800; font-size: .92rem; color: #1e293b; }
.ds-notif-item-message { font-size: .84rem; color: #64748b; }
.ds-notif-item-time { font-size: .76rem; color: #94a3b8; }
[data-bs-theme="dark"] .ds-notif-item--unread { background: #232842; }
[data-bs-theme="dark"] .ds-notif-item-title { color: #e2e8f0; }

/* Badge unread di menu "Notifikasi" pada offcanvas menu mobile (jika ditambahkan) */
.ds-mobile-menu-card .ds-dash-nav-badge { margin-left: 0; }
/* ===========================================================
   Flash Sale — desain ulang gaya marketplace (Shopee/Tokopedia)
   =========================================================== */
.ds-flashsale-panel {
	background: linear-gradient(135deg, #fff5f0 0%, #fffaf0 55%, #fff5f5 100%);
	border: 1px solid #ffe1d2;
	border-radius: var(--ds-radius);
	padding: 1.35rem 1.35rem 1.6rem;
	box-shadow: var(--ds-shadow-sm);
	position: relative;
	overflow: hidden;
}
@media (max-width: 576px) {
	.ds-flashsale-panel { padding: .85rem .65rem 1.1rem; border-radius: 12px; }
}
.ds-flashsale-panel::before {
	content: '';
	position: absolute; top: -70px; right: -70px; width: 240px; height: 240px;
	background: radial-gradient(circle, rgba(239,68,68,.14), transparent 70%);
	pointer-events: none;
}
.ds-flashsale-panel::after {
	content: '';
	position: absolute; bottom: -80px; left: -40px; width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(251,146,60,.12), transparent 70%);
	pointer-events: none;
}

.ds-flashsale-head { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.15rem; position: relative; z-index: 1; }
.ds-flashsale-head-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: nowrap; }
.ds-flashsale-head-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.ds-flashsale-head-left .ds-flashsale-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ds-flashsale-flame {
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
	background: linear-gradient(135deg, #fb923c, #ef4444);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem; box-shadow: 0 8px 18px -6px rgba(239,68,68,.6);
	animation: dsFlashPulse 1.8s ease-in-out infinite;
}
@keyframes dsFlashPulse {
	0%, 100% { box-shadow: 0 8px 18px -6px rgba(239,68,68,.6); }
	50% { box-shadow: 0 8px 22px -4px rgba(239,68,68,.85); }
}

.ds-flashsale-title {
	font-weight: 800; margin: 0; font-size: 1.4rem; letter-spacing: .2px;
	background: linear-gradient(135deg, #ea580c, #e11d48);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

.ds-flashsale-timer { display: flex; align-items: center; gap: 4px; }
.ds-flashsale-timer-box {
	background: #1f2937; color: #fff; font-weight: 700; font-size: .85rem;
	min-width: 30px; text-align: center; padding: .3rem .35rem; border-radius: 6px;
	font-variant-numeric: tabular-nums;
}
.ds-flashsale-timer-colon { color: #ef4444; font-weight: 800; }

.ds-flashsale-viewall {
	color: #e11d48; font-weight: 700; font-size: .9rem; text-decoration: none;
	display: flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.ds-flashsale-viewall:hover { color: #be123c; }

@media (max-width: 576px) {
	.ds-flashsale-flame { width: 32px; height: 32px; font-size: .9rem; }
	.ds-flashsale-title { font-size: 1.1rem; }
	.ds-flashsale-viewall { font-size: .8rem; flex: 0 0 auto; }
	.ds-flashsale-timer-box { min-width: 26px; font-size: .78rem; padding: .25rem .3rem; }
}

.ds-flashsale-scrollwrap { position: relative; z-index: 1; }
.ds-flashsale-track {
	display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: .1rem .1rem .5rem;
	scrollbar-width: none;
}
.ds-flashsale-track::-webkit-scrollbar { display: none; }

.ds-flashsale-item { flex: 0 0 auto; width: 208px; scroll-snap-align: start; align-self: flex-start; }
@media (max-width: 576px) {
	.ds-flashsale-track { gap: .6rem; }
	.ds-flashsale-item { width: 46%; max-width: 178px; }
}
/* Rapatkan rating & harga: jangan biarkan mt-auto "meregangkan" kartu di flash sale */
.ds-flashsale-item .card-body { padding: .75rem; }
.ds-flashsale-item .card-body .mt-auto { margin-top: .5rem !important; }

.ds-flashsale-item .product-card {
	border: 1px solid #ffe1d2 !important; border-radius: var(--ds-radius-sm);
	box-shadow: 0 2px 10px -4px rgba(239,68,68,.16);
}
.ds-flashsale-item .product-card:hover { box-shadow: 0 12px 26px -10px rgba(239,68,68,.4); }
.ds-flashsale-item .product-badge-discount {
	background: linear-gradient(135deg, #fbbf24, #ef4444);
	font-weight: 800; letter-spacing: .3px; padding: .25rem .55rem .6rem;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
.ds-flashsale-item .card-body .fw-bold.text-primary { color: #e11d48 !important; }
.ds-flashsale-item .product-cart-btn.btn-primary {
	background: linear-gradient(135deg, #fb923c, #e11d48) !important;
	border: none; box-shadow: 0 6px 14px -4px rgba(225,29,72,.5);
}

/* Tombol keranjang di Flash Sale = bar sisa stok (progress + shimmer "loading") */
.product-cart-btn-stock {
	position: relative; overflow: hidden; border: none !important;
	background: #ffe1d2 !important; color: #7c2d12 !important;
}
.product-cart-btn-stock .product-cart-btn-fill {
	position: absolute; inset: 0; width: var(--stock-fill, 0%);
	background-image: linear-gradient(90deg, #fbbf24, #f43f5e), repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px);
	background-size: 100% 100%, 28px 28px;
	animation: dsStockLoading 1s linear infinite;
	transition: width .6s ease;
}
@keyframes dsStockLoading { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 28px 0; } }
.product-cart-btn-stock .product-cart-btn-label {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	gap: .3rem; font-weight: 700; font-size: .72rem; white-space: nowrap;
}
.product-cart-btn-stock .product-cart-btn-label .fa-fire { color: #ea580c; }
.product-cart-btn-stock:hover .product-cart-btn-label { filter: brightness(.9); }
.product-cart-btn-stock.btn-outline-danger { background: #fff !important; }

.ds-flashsale-arrow {
	position: absolute; top: 38%; transform: translateY(-50%);
	width: 38px; height: 38px; border-radius: 50%; border: none;
	background: #fff; color: #e11d48; box-shadow: var(--ds-shadow-md);
	display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ds-flashsale-arrow:hover { background: #e11d48; color: #fff; }
.ds-flashsale-arrow-left { left: -10px; }
.ds-flashsale-arrow-right { right: -10px; }
@media (max-width: 767px) { .ds-flashsale-arrow { display: none; } }

[data-bs-theme="dark"] .ds-flashsale-panel { background: linear-gradient(135deg, #2a1a16 0%, #241a12 55%, #2a1618 100%); border-color: #4a2a22; }
[data-bs-theme="dark"] .ds-flashsale-item .product-card { border-color: #4a2a22 !important; background: #1e2333; }
[data-bs-theme="dark"] .ds-flashsale-ends { background: #2a1a16; border-color: #5a2f27; color: #fca5a5; }
[data-bs-theme="dark"] .ds-flashsale-sold-bar { background: #3a2019; }
[data-bs-theme="dark"] .ds-flashsale-timer-box { background: #0f1220; }