/* ======================================================
   MODUL FEED/SOSIAL -- tampilan vertical scroll-snap gaya
   TikTok Shop (foto/video full-layar, like/komentar, kartu
   produk shoppable). Di-scope ke .feed-page, tidak
   mempengaruhi halaman lain.
   Tinggi .feed-scroller diset lewat CSS variable
   --feed-header-h / --feed-bottombar-h, dihitung JS di
   feed.php (application/views/feed.php) berdasarkan tinggi
   asli header/bottom-bar situs supaya selalu pas walau
   tinggi header berubah (ada info-bar promo dsb).
   ====================================================== */
:root{
	--feed-header-h: 56px;
	--feed-bottombar-h: 0px;
}
.feed-page{
	background:#000;
}
.feed-scroller{
	height: calc(100dvh - var(--feed-header-h) - var(--feed-bottombar-h));
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.feed-scroller::-webkit-scrollbar{ display:none; }

.feed-empty{
	height: calc(100dvh - var(--feed-header-h) - var(--feed-bottombar-h));
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#888;
	font-size:13px;
}

.feed-item{
	position:relative;
	height: calc(100dvh - var(--feed-header-h) - var(--feed-bottombar-h));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background:#000;
}
.feed-media-wrap{ position:relative; width:100%; height:100%; overflow:hidden; }

.feed-media{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	object-fit:cover;
	display:none;
	background:#111;
}
.feed-media.active{ display:block; }
.feed-media-empty{
	width:100%; height:100%;
	display:flex; align-items:center; justify-content:center;
	color:#444;
	background:#151515;
}

.feed-media-slider{ position:relative; width:100%; height:100%; }
.feed-media-dots{
	position:absolute;
	top:12px; left:0; right:0;
	display:flex;
	justify-content:center;
	gap:5px;
	z-index:3;
}
.feed-dot{
	width:6px; height:6px;
	border-radius:50%;
	background:rgba(255,255,255,.4);
}
.feed-dot.active{ background:#fff; }
.feed-media-tap-l, .feed-media-tap-r{
	position:absolute;
	top:0; bottom:0;
	width:35%;
	z-index:2;
}
.feed-media-tap-l{ left:0; }
.feed-media-tap-r{ right:0; }

.feed-mute-btn{
	position:absolute;
	top:16px; right:16px;
	z-index:4;
	width:34px; height:34px;
	border-radius:50%;
	background:rgba(0,0,0,.4);
	color:#fff;
	border:0;
	display:flex; align-items:center; justify-content:center;
	font-size:13px;
}

/* ---------- overlay bawah: caption + kartu produk ---------- */
.feed-overlay-bottom{
	position:absolute;
	left:0; right:0; bottom:0;
	z-index:3;
	padding:16px 76px 20px 16px;
	background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 45%, transparent 100%);
	padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.feed-caption{
	color:#fff;
	font-size:13.5px;
	line-height:1.5;
	margin-bottom:12px;
	text-shadow:0 1px 3px rgba(0,0,0,.4);
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.feed-produk-row{ display:flex; flex-direction:column; gap:8px; }
.feed-produk-card{
	display:flex;
	align-items:center;
	gap:10px;
	background:rgba(255,255,255,.96);
	border-radius:12px;
	padding:8px 12px;
	text-decoration:none !important;
	max-width:280px;
	box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.feed-produk-card img{
	width:38px; height:38px;
	border-radius:8px;
	object-fit:cover;
	flex:0 0 38px;
	background:#f0f0f0;
}
.feed-produk-info{ flex:1 1 auto; min-width:0; }
.feed-produk-nama{
	font-size:12px;
	font-weight:600;
	color:#111;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.feed-produk-harga{ font-size:12px; font-weight:700; color:#e6001f; }
.feed-produk-card i{ color:#999; font-size:12px; flex:0 0 auto; }

/* ---------- kolom aksi kanan: like / komentar / keranjang ---------- */
.feed-actions-col{
	position:absolute;
	right:12px;
	bottom:24px;
	z-index:4;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	padding-bottom:env(safe-area-inset-bottom);
}
.feed-act-btn{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	color:#fff;
	cursor:pointer;
	text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.feed-act-btn i{ font-size:26px; transition:transform .15s ease; }
.feed-act-btn:active i{ transform:scale(.85); }
.feed-act-btn.feed-act-like.active i{ color:#e6001f; }
.feed-act-count{ font-size:11px; font-weight:600; }
.feed-act-bag i{ font-size:23px; }

.feed-loadmore{
	height:60px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#666;
	background:#000;
}

/* ---------- bottom sheet komentar (isi-nya spesifik, shell-nya reuse
   .uq-status-sheet-modal dari checkout-modern.css) ---------- */
.feed-komentar-list{
	max-height:50vh;
	overflow-y:auto;
	padding:8px 20px 12px;
}

/* ---------- bottom sheet lihat semua produk (>1 produk di-tag) -- shell
   reuse .uq-status-sheet-modal jg, kartunya reuse .feed-produk-card tapi
   dilonggarin (bukan chip mengambang di atas video lagi, ini di dalam
   sheet putih biasa) ---------- */
.feed-produk-modal-list{
	max-height:60vh;
	overflow-y:auto;
	padding:8px 20px 16px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.feed-produk-modal-list .feed-produk-card{
	max-width:none;
	box-shadow:none;
	border:1px solid #eee;
	background:#fff;
}
.feed-komentar-empty{
	text-align:center;
	color:#999;
	font-size:13px;
	padding:30px 0;
}
.feed-komentar-item{
	display:flex;
	gap:10px;
	padding:10px 0;
	border-bottom:1px solid #f4f4f4;
}
.feed-komentar-item:last-child{ border-bottom:0; }
.feed-komentar-avatar{
	width:32px; height:32px;
	border-radius:50%;
	background:#111;
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-size:13px;
	font-weight:700;
	flex:0 0 32px;
}
.feed-komentar-body{ flex:1 1 auto; min-width:0; }
.feed-komentar-nama{ font-size:12.5px; font-weight:700; color:#111; }
.feed-komentar-isi{ font-size:13px; color:#333; margin-top:2px; line-height:1.45; }
.feed-komentar-tgl{ font-size:11px; color:#999; margin-top:4px; }

.feed-komentar-form{
	display:flex;
	align-items:center;
	gap:8px;
	padding:12px 20px calc(12px + env(safe-area-inset-bottom));
	border-top:1px solid #f0f0f0;
}
.feed-komentar-form input{
	flex:1 1 auto;
	min-width:0;
	border:1px solid #e5e5e5;
	border-radius:999px;
	padding:10px 16px;
	font-size:13px;
	background:#fafafa;
}
.feed-komentar-form input:focus{ outline:none; border-color:#111; background:#fff; }
.feed-komentar-form button{
	flex:0 0 auto;
	width:40px; height:40px;
	border-radius:50%;
	background:#111;
	color:#fff;
	border:0;
	display:flex; align-items:center; justify-content:center;
}

/* ---------- desktop: feed jadi 1 kolom sempit di tengah, gaya story viewer ---------- */
@media (min-width:768px){
	.feed-page{ background:#f2f2f2; padding:20px 0; }
	.feed-scroller{
		max-width:420px;
		margin:0 auto;
		border-radius:16px;
		box-shadow:0 20px 60px -20px rgba(0,0,0,.35);
	}
	.feed-item{ border-radius:16px; overflow:hidden; }
}