/* ==========================================================================
   News PWA Builder — App Shell Styles v2
   سبک پرانرژی و رنگی (اپ‌مانند) — کاملاً مستقل از استایل تم اصلی سایت
   ========================================================================== */

:root{
	--npwa-theme: #c0392b;
	--npwa-bg: #ffffff;
	--npwa-accent: #c0392b;

	--npwa-surface: #ffffff;
	--npwa-surface-2: #f4f5f8;
	--npwa-surface-3: #ffffff;
	--npwa-text: #16181d;
	--npwa-text-muted: #7b8190;
	--npwa-border: #eef0f3;
	--npwa-shadow: 0 4px 16px rgba(20,20,40,.07);
	--npwa-shadow-lg: 0 10px 28px rgba(20,20,40,.14);
	--npwa-radius: 18px;
	--npwa-radius-sm: 12px;
	--npwa-accent-tint: color-mix(in srgb, var(--npwa-accent) 12%, white);
	--npwa-font: "Vazirmatn", -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
}

html[data-npwa-theme="dark"]{
	--npwa-surface: #1b1c22;
	--npwa-surface-2: #121317;
	--npwa-surface-3: #24262e;
	--npwa-text: #f5f5f7;
	--npwa-text-muted: #9299a8;
	--npwa-border: #2c2e37;
	--npwa-bg: #121317;
	--npwa-accent-tint: color-mix(in srgb, var(--npwa-accent) 22%, #1b1c22);
	--npwa-shadow: 0 4px 16px rgba(0,0,0,.35);
	--npwa-shadow-lg: 0 10px 30px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){
	html[data-npwa-theme="auto"]{
		--npwa-surface: #1b1c22;
		--npwa-surface-2: #121317;
		--npwa-surface-3: #24262e;
		--npwa-text: #f5f5f7;
		--npwa-text-muted: #9299a8;
		--npwa-border: #2c2e37;
		--npwa-bg: #121317;
		--npwa-accent-tint: color-mix(in srgb, var(--npwa-accent) 22%, #1b1c22);
		--npwa-shadow: 0 4px 16px rgba(0,0,0,.35);
		--npwa-shadow-lg: 0 10px 30px rgba(0,0,0,.5);
	}
}

*{ box-sizing:border-box; }

body.npwa-body{
	margin:0;
	font-family: var(--npwa-font);
	background: var(--npwa-surface-2);
	color: var(--npwa-text);
	-webkit-font-smoothing:antialiased;
	overscroll-behavior-y: contain;
	letter-spacing: -0.1px;
}

#npwa-app{ min-height:100dvh; display:flex; flex-direction:column; }

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3{ margin:0; }

/* ---------------- Topbar ---------------- */
.npwa-topbar{
	position: sticky; top:0; z-index: 50;
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
	background: var(--npwa-surface);
	border-bottom: 1px solid var(--npwa-border);
}
.npwa-topbar-title{ flex:1; display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; }
.npwa-logo-badge{
	width:30px; height:30px; border-radius:9px; background: var(--npwa-accent); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0;
}
.npwa-logo{ color: var(--npwa-text); font-weight:800; font-size:17px; }
.npwa-icon-btn{ color: var(--npwa-text); padding:8px; border-radius:50%; display:flex; background: var(--npwa-surface-2); }
.npwa-icon-btn:active{ transform: scale(.92); }

/* ---------------- Content ---------------- */
.npwa-content{
	flex:1;
	padding: 16px 16px calc(100px + env(safe-area-inset-bottom));
	max-width: 720px; margin:0 auto; width:100%;
}

.npwa-section-title{ font-size:18px; font-weight:800; margin: 4px 2px 14px; display:flex; align-items:center; gap:8px; }
.npwa-section-title::before{ content:""; width:5px; height:18px; border-radius:4px; background: var(--npwa-accent); display:inline-block; }

/* ---------------- News list & cards ---------------- */
.npwa-news-list{ display:flex; flex-direction:column; gap:14px; }
.npwa-news-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.npwa-news-card{
	position:relative;
	background: var(--npwa-surface);
	border-radius: var(--npwa-radius);
	box-shadow: var(--npwa-shadow);
	overflow:hidden;
	display:flex;
	transition: transform .15s ease, box-shadow .15s ease;
	border: 1px solid var(--npwa-border);
}
.npwa-news-card:active{ transform: scale(.97); box-shadow: var(--npwa-shadow-lg); }

.npwa-card-horizontal{ flex-direction:row-reverse; align-items:stretch; min-height:104px; }
.npwa-card-horizontal .npwa-card-thumb{ width:112px; flex:0 0 112px; }
.npwa-card-horizontal .npwa-card-body{ flex:1; padding:12px 14px; display:flex; flex-direction:column; justify-content:center; gap:6px; }

.npwa-card-vertical{ flex-direction:column; }
.npwa-card-vertical .npwa-card-thumb{ width:100%; aspect-ratio:16/9; }
.npwa-card-vertical .npwa-card-body{ padding:14px; display:flex; flex-direction:column; gap:6px; }

.npwa-news-grid-2 .npwa-news-card{ flex-direction:column; }
.npwa-news-grid-2 .npwa-card-thumb{ width:100%; aspect-ratio:4/3; }
.npwa-news-grid-2 .npwa-card-body{ padding:10px 12px; display:flex; flex-direction:column; gap:5px; }

.npwa-card-thumb{ position:relative; }
.npwa-card-thumb, .npwa-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; background: linear-gradient(135deg, var(--npwa-surface-2), var(--npwa-border)); }
.npwa-card-thumb-placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--npwa-surface-2), var(--npwa-border)); }

.npwa-card-cat-badge{
	display:inline-flex; align-self:flex-start; font-size:11px; color: var(--npwa-accent); font-weight:800;
	background: var(--npwa-accent-tint); padding:3px 10px; border-radius:999px;
}
.npwa-card-title{ font-size:14.5px; line-height:1.55; margin:0; font-weight:700; color: var(--npwa-text); }
.npwa-card-date{ font-size:11.5px; color: var(--npwa-text-muted); font-weight:500; }

.npwa-card-bookmark{
	position:absolute; top:10px; inset-inline-end:10px;
	background: rgba(15,16,20,.45); backdrop-filter: blur(4px); color:#fff; border-radius:50%;
	width:32px; height:32px; display:flex; align-items:center; justify-content:center;
}
.npwa-card-bookmark.is-active{ color: var(--npwa-accent); background: #fff; }

.npwa-load-more-wrap{ display:flex; justify-content:center; margin-top:20px; }
.npwa-load-more, .npwa-primary-btn{
	background: var(--npwa-accent); color:#fff; padding:12px 30px; border-radius:999px; font-weight:800; font-size:14px;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--npwa-accent) 40%, transparent);
}
.npwa-load-more:active, .npwa-primary-btn:active{ transform: scale(.96); }

/* ---------------- Story row (Instagram-style) ---------------- */
.npwa-story-row{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 18px; scrollbar-width:none; }
.npwa-story-row::-webkit-scrollbar{ display:none; }
.npwa-story-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; width:66px; }
.npwa-story-ring{
	width:64px; height:64px; border-radius:50%; padding:3px; display:flex; align-items:center; justify-content:center;
	transition: transform .15s ease;
}
.npwa-story-item:active .npwa-story-ring{ transform: scale(.93); }
.npwa-story-ring-gradient{ background: linear-gradient(135deg, var(--npwa-accent), color-mix(in srgb, var(--npwa-accent) 40%, #ffb400)); }
.npwa-story-ring-solid{ background: var(--npwa-accent); }
.npwa-story-avatar{
	width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center;
	background-color: var(--npwa-surface-2); border:2px solid var(--npwa-surface);
}
.npwa-story-label{ font-size:11px; font-weight:600; text-align:center; line-height:1.4; color: var(--npwa-text); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.npwa-story-item.is-viewed .npwa-story-ring-gradient,
.npwa-story-item.is-viewed .npwa-story-ring-solid{ background: var(--npwa-border); }
.npwa-story-item.is-viewed .npwa-story-label{ color: var(--npwa-text-muted); }

/* ---------------- Category grid ---------------- */
.npwa-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.npwa-cat-grid-cols-2{ grid-template-columns:repeat(2,1fr); }
.npwa-cat-grid-cols-4{ grid-template-columns:repeat(4,1fr); }
.npwa-cat-grid-item{
	background: var(--npwa-accent-tint); border: 1px solid var(--npwa-border); border-radius: var(--npwa-radius-sm); padding:18px 8px; text-align:center;
	font-size:13px; font-weight:800; color: var(--npwa-text); display:flex; flex-direction:column; gap:6px; align-items:center;
	transition: transform .15s ease;
}
.npwa-cat-grid-item:active{ transform: scale(.95); }
.npwa-cat-count{ font-size:11px; color: var(--npwa-accent); font-weight:800; background:var(--npwa-surface); padding:2px 8px; border-radius:999px; }

/* ---------------- Ticker ---------------- */
.npwa-widget-ticker{ display:flex; align-items:center; background: var(--npwa-surface); border-radius: var(--npwa-radius-sm); overflow:hidden; margin-bottom:16px; box-shadow:var(--npwa-shadow); border:1px solid var(--npwa-border); }
.npwa-ticker-badge{ background: var(--npwa-accent); color:#fff; font-size:12px; font-weight:800; padding:10px 14px; flex-shrink:0; }
.npwa-ticker-track{ overflow:hidden; flex:1; }
.npwa-ticker-items{ display:flex; gap:28px; white-space:nowrap; animation: npwa-ticker 24s linear infinite; padding:0 14px; }
.npwa-ticker-item{ font-size:13px; font-weight:600; }
@keyframes npwa-ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------------- Hero slider ---------------- */
.npwa-hero-slider{ margin-bottom:18px; }
.npwa-hero-track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none; }
.npwa-hero-track::-webkit-scrollbar{ display:none; }
.npwa-hero-slide{
	flex:0 0 86%; scroll-snap-align:start; border-radius: var(--npwa-radius); background-size:cover; background-position:center;
	background-color: var(--npwa-surface-2); display:flex; align-items:flex-end; overflow:hidden; position:relative;
	box-shadow: var(--npwa-shadow-lg);
}
.npwa-hero-overlay{ width:100%; padding:18px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.npwa-hero-title{ color:#fff; font-weight:800; font-size:17px; line-height:1.6; }

/* ---------------- Widget header ---------------- */
.npwa-widget-header{ display:flex; align-items:center; gap:10px; padding:6px 2px 18px; }
.npwa-widget-header-logo{ width:34px; height:34px; border-radius:10px; object-fit:cover; }
.npwa-widget-header-title{ font-weight:800; font-size:18px; flex:1; }
.npwa-widget-header-search{ background: var(--npwa-accent-tint); color: var(--npwa-accent); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---------------- Single article ---------------- */
.npwa-article-cover{ margin: -16px -16px 16px; }
.npwa-article-cover img{ width:100%; display:block; max-height:300px; object-fit:cover; }
.npwa-article-title{ font-size:21px; line-height:1.65; font-weight:800; margin:0 0 10px; }
.npwa-article-meta{ font-size:12.5px; color: var(--npwa-text-muted); display:flex; gap:6px; margin-bottom:16px; font-weight:600; }
.npwa-article-actions{ display:flex; gap:10px; margin-bottom:20px; }
.npwa-article-actions button{
	display:flex; align-items:center; gap:6px; font-size:13px; padding:10px 16px; border-radius:999px;
	background: var(--npwa-surface); box-shadow: var(--npwa-shadow); font-weight:700; border:1px solid var(--npwa-border);
}
.npwa-bookmark-btn.is-active{ color: var(--npwa-accent); border-color: var(--npwa-accent); }
.npwa-article-content{ font-size:16px; line-height:2.1; }
.npwa-article-content img{ max-width:100%; height:auto; border-radius: var(--npwa-radius-sm); }
.npwa-article-content p{ margin:0 0 18px; }

/* ---------------- Bottom nav ---------------- */
.npwa-bottom-nav{
	position: fixed; bottom:0; inset-inline:0; z-index:60;
	display:flex; justify-content:space-around;
	background: var(--npwa-surface); border-top:1px solid var(--npwa-border);
	padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 20px rgba(0,0,0,.05);
}
.npwa-nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color: var(--npwa-text-muted); flex:1; font-size:11px; font-weight:600; padding:2px 0; }
.npwa-nav-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:30px; border-radius:14px; transition: background .15s, color .15s; }
.npwa-nav-item.is-active{ color: var(--npwa-accent); }
.npwa-nav-item.is-active .npwa-nav-icon{ background: var(--npwa-accent-tint); }
.npwa-nav-icon svg{ display:block; }
.npwa-bottom-nav-preview{ position:static; box-shadow:none; }

/* ---------------- Search ---------------- */
.npwa-search-box{ margin-bottom:16px; }
.npwa-search-box input{
	width:100%; padding:14px 16px; border-radius: var(--npwa-radius-sm); border:1px solid var(--npwa-border);
	background: var(--npwa-surface); color: var(--npwa-text); font-size:14.5px; font-family:inherit;
}
.npwa-search-box input:focus{ outline:none; border-color: var(--npwa-accent); }

/* ---------------- Notifications ---------------- */
.npwa-notif-optin{ text-align:center; padding:60px 24px; }
.npwa-notif-optin p{ color: var(--npwa-text-muted); margin-bottom:20px; font-size:14px; }

/* ---------------- Install button ---------------- */
.npwa-install-btn{
	position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline-end:16px; z-index:70;
	background: var(--npwa-accent); color:#fff; padding:12px 18px; border-radius:999px; font-weight:800; font-size:13px;
	display:flex; align-items:center; gap:6px; box-shadow:0 8px 22px color-mix(in srgb, var(--npwa-accent) 45%, transparent);
}

.npwa-empty-state{ text-align:center; color: var(--npwa-text-muted); padding:60px 12px; font-size:14px; font-weight:500; }

.npwa-elementor-wrap{ margin: -16px -16px; }

/* Skeleton loading shimmer (used by future dynamic renders) */
.npwa-skeleton{ background: linear-gradient(90deg, var(--npwa-surface-2) 25%, var(--npwa-border) 37%, var(--npwa-surface-2) 63%); background-size:400% 100%; animation: npwa-shimmer 1.4s ease infinite; }
@keyframes npwa-shimmer{ 0%{ background-position:100% 50%;} 100%{ background-position:0 50%;} }