/*!
 * CBASCO Haika — Product Catalog Page
 * - Hero with badges
 * - Two bilingual catalog cards (Persian + English) with view/download CTAs + QR
 * - Info strip explaining the three access modes
 * - Built-in PDF viewer modal (iframe + fallback)
 * Mobile-first, RTL.
 */

/* ════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════ */
.cbcat-main {
	background: var(--cb-bg, #0d1117);
	color: var(--cb-text, #e4e8ee);
	overflow: hidden;
}
.cbcat-sec { padding: 64px 0; position: relative; }

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.cbcat-hero {
	position: relative;
	padding: 96px 0 72px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(100, 170, 210, 0.13) 0%, transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgba(200, 168, 76, 0.06) 0%, transparent 60%),
		linear-gradient(180deg, var(--cb-bg-deep, #0a0e14) 0%, var(--cb-bg, #0d1117) 100%);
}
.cbcat-hero-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 12px 0 14px;
	color: var(--cb-text);
}
.cbcat-hero-title em {
	font-style: normal;
	background: linear-gradient(120deg, var(--cb-steel, #6aaecc) 0%, var(--cb-gold, #c8a84c) 50%, var(--cb-steel, #6aaecc) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: cbcat-shimmer 6s linear infinite;
}
@keyframes cbcat-shimmer {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.cbcat-hero-sub {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	color: var(--cb-text-muted, #98a2af);
	margin: 0 auto 32px;
	max-width: 700px;
	line-height: 1.85;
}
.cbcat-hero-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}
.cbcat-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: rgba(100, 170, 210, .08);
	border: 1px solid rgba(100, 170, 210, .24);
	border-radius: 999px;
	transition: transform .3s, border-color .3s;
}
.cbcat-hero-badge:hover {
	transform: translateY(-3px);
	border-color: rgba(100, 170, 210, .55);
}
.cbcat-hb-num {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--cb-steel, #6aaecc);
	font-variant-numeric: tabular-nums;
}
.cbcat-hb-icon {
	display: inline-flex;
	color: var(--cb-steel, #6aaecc);
}
.cbcat-hb-icon svg { width: 18px; height: 18px; }
.cbcat-hb-lbl {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cb-text);
}

/* ════════════════════════════════════════════════════════
   CATALOG CARDS GRID
   ════════════════════════════════════════════════════════ */
.cbcat-cards-sec {
	background: linear-gradient(180deg, var(--cb-bg, #0d1117) 0%, var(--cb-bg-deep, #0a0e14) 100%);
}
.cbcat-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 960px) {
	.cbcat-cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

.cbcat-card {
	position: relative;
	background:
		radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cb-acc) 14%, transparent) 0%, transparent 50%),
		linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
	border: 1px solid color-mix(in srgb, var(--cb-acc) 28%, transparent);
	border-radius: 22px;
	padding: 28px 26px 26px;
	overflow: hidden;
	transition: transform .35s, border-color .35s, box-shadow .35s;
}
.cbcat-card::before {
	content: "";
	position: absolute;
	top: 0; right: 0; left: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--cb-acc), transparent);
	opacity: .85;
}
.cbcat-card:hover {
	transform: translateY(-6px);
	border-color: var(--cb-acc);
	box-shadow: 0 22px 48px color-mix(in srgb, var(--cb-acc) 18%, transparent);
}
.cbcat-card-edge {
	position: absolute;
	inset: -1px;
	border-radius: 22px;
	background:
		linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--cb-acc) 18%, transparent) 50%, transparent 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s;
	z-index: 0;
}
.cbcat-card:hover .cbcat-card-edge { opacity: 1; }
.cbcat-card > * { position: relative; z-index: 1; }

/* Header */
.cbcat-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.cbcat-card-lang {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cbcat-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--cb-acc) 26%, transparent), color-mix(in srgb, var(--cb-acc) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--cb-acc) 42%, transparent);
	color: var(--cb-acc);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 1px;
}
.cbcat-lang-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cbcat-lang-fa {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cb-text);
}
.cbcat-lang-en {
	font-size: 0.72rem;
	color: var(--cb-text-muted, #98a2af);
	font-family: 'Courier New', monospace;
}
.cbcat-card-pdf-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cb-acc) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--cb-acc) 28%, transparent);
	color: var(--cb-acc);
	border-radius: 12px;
}
.cbcat-card-pdf-icon svg { width: 28px; height: 28px; }

/* Body */
.cbcat-card-body { margin-bottom: 20px; }
.cbcat-card-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--cb-text);
	margin: 0 0 6px;
	line-height: 1.4;
}
.cbcat-card-subtitle {
	font-size: 0.82rem;
	color: var(--cb-acc);
	margin: 0 0 14px;
	font-weight: 600;
}
.cbcat-card-desc {
	font-size: 0.88rem;
	color: var(--cb-text-muted, #b8c2cf);
	line-height: 1.95;
	text-align: justify;
	margin: 0;
}

/* Actions */
.cbcat-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}
.cbcat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 14px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: all .25s;
	background: transparent;
	white-space: nowrap;
}
.cbcat-btn svg { width: 18px; height: 18px; }
.cbcat-btn--primary {
	background: linear-gradient(135deg, var(--cb-acc), color-mix(in srgb, var(--cb-acc) 60%, #fff 30%));
	color: var(--cb-bg, #0d1117);
	border-color: transparent;
}
.cbcat-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px color-mix(in srgb, var(--cb-acc) 38%, transparent);
	color: var(--cb-bg, #0d1117);
}
.cbcat-btn--ghost {
	background: rgba(255,255,255,.04);
	border-color: color-mix(in srgb, var(--cb-acc) 32%, transparent);
	color: var(--cb-text);
}
.cbcat-btn--ghost:hover {
	background: color-mix(in srgb, var(--cb-acc) 12%, transparent);
	border-color: var(--cb-acc);
	color: var(--cb-text);
}

/* QR section */
.cbcat-card-qr {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 16px;
	background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
	border: 1px dashed color-mix(in srgb, var(--cb-acc) 35%, transparent);
	border-radius: 16px;
}
.cbcat-qr-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	flex: 0 0 140px;
	background: #fff;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--cb-acc) 25%, transparent);
	overflow: hidden;
	transition: transform .3s, box-shadow .3s;
}
.cbcat-qr-wrap:hover {
	transform: scale(1.04);
	box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 0 2px var(--cb-acc);
}
.cbcat-qr-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
/* Corner accents on QR */
.cbcat-qr-corner {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid var(--cb-acc);
}
.cbcat-qr-corner--tl { top: 4px;    left: 4px;    border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.cbcat-qr-corner--tr { top: 4px;    right: 4px;   border-left: 0;  border-bottom: 0; border-top-right-radius: 6px; }
.cbcat-qr-corner--bl { bottom: 4px; left: 4px;    border-right: 0; border-top: 0;    border-bottom-left-radius: 6px; }
.cbcat-qr-corner--br { bottom: 4px; right: 4px;   border-left: 0;  border-top: 0;    border-bottom-right-radius: 6px; }
/* Scan line — purely decorative */
.cbcat-qr-scan {
	position: absolute;
	left: 8%;
	right: 8%;
	top: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cb-acc), transparent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--cb-acc) 70%, transparent);
	border-radius: 2px;
	animation: cbcat-scan 2.8s ease-in-out infinite;
	opacity: 0;
	pointer-events: none;
}
.cbcat-qr-wrap:hover .cbcat-qr-scan { opacity: 1; }
@keyframes cbcat-scan {
	0%, 100% { top: 10%; }
	50%      { top: 86%; }
}

.cbcat-qr-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--cb-text-muted, #b8c2cf);
	font-size: 0.85rem;
	line-height: 1.65;
}
.cbcat-qr-meta svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--cb-acc);
}

/* ════════════════════════════════════════════════════════
   INFO STRIP
   ════════════════════════════════════════════════════════ */
.cbcat-info-sec {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(200, 168, 76, .04) 0%, transparent 50%),
		linear-gradient(180deg, var(--cb-bg-deep, #0a0e14) 0%, var(--cb-bg, #0d1117) 100%);
	padding-bottom: 96px;
}
.cbcat-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 760px) { .cbcat-info-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.cbcat-info-item {
	text-align: center;
	padding: 24px 20px;
	background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
	border: 1px solid rgba(100, 170, 210, .18);
	border-radius: 16px;
	transition: transform .3s, border-color .3s, box-shadow .3s;
}
.cbcat-info-item:hover {
	transform: translateY(-4px);
	border-color: rgba(100, 170, 210, .45);
	box-shadow: 0 14px 32px rgba(100, 170, 210, .12);
}
.cbcat-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: rgba(100, 170, 210, .12);
	border: 1px solid rgba(100, 170, 210, .3);
	color: var(--cb-steel, #6aaecc);
	border-radius: 14px;
	margin-bottom: 14px;
}
.cbcat-info-icon svg { width: 26px; height: 26px; }
.cbcat-info-item h3 {
	margin: 0 0 8px;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--cb-text);
}
.cbcat-info-item p {
	margin: 0;
	font-size: 0.84rem;
	color: var(--cb-text-muted, #98a2af);
	line-height: 1.9;
}

/* ════════════════════════════════════════════════════════
   PDF VIEWER MODAL
   ════════════════════════════════════════════════════════ */
.cbcat-viewer {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.cbcat-viewer[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transition: opacity .3s ease;
}
.cbcat-viewer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 14, .82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}
.cbcat-viewer-shell {
	position: relative;
	width: 100%;
	max-width: 1180px;
	height: 100%;
	max-height: calc(100vh - 48px);
	background: var(--cb-bg, #0d1117);
	border: 1px solid rgba(100, 170, 210, .25);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(100, 170, 210, .1);
	transform: translateY(20px) scale(.98);
	transition: transform .35s cubic-bezier(.34, 1.16, .64, 1);
}
.cbcat-viewer[aria-hidden="false"] .cbcat-viewer-shell {
	transform: translateY(0) scale(1);
}

.cbcat-viewer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	background: linear-gradient(180deg, rgba(100, 170, 210, .1), rgba(100, 170, 210, .03));
	border-bottom: 1px solid rgba(100, 170, 210, .2);
	flex: 0 0 auto;
}
.cbcat-viewer-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.cbcat-viewer-title-wrap svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--cb-steel, #6aaecc);
}
.cbcat-viewer-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cb-text);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.cbcat-viewer-tools {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}
.cbcat-viewer-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(100, 170, 210, .2);
	color: var(--cb-text);
	border-radius: 10px;
	cursor: pointer;
	transition: all .2s;
	text-decoration: none;
}
.cbcat-viewer-tool:hover {
	background: rgba(100, 170, 210, .15);
	border-color: var(--cb-steel, #6aaecc);
	color: var(--cb-steel-l, #a0d0e8);
}
.cbcat-viewer-tool svg { width: 18px; height: 18px; }
.cbcat-viewer-close {
	background: rgba(200, 88, 120, .12);
	border-color: rgba(200, 88, 120, .25);
	color: #f8a8b8;
}
.cbcat-viewer-close:hover {
	background: rgba(200, 88, 120, .2);
	border-color: rgba(200, 88, 120, .55);
	color: #fff;
}

.cbcat-viewer-stage {
	position: relative;
	flex: 1 1 auto;
	background: #1a1f2a;
	overflow: hidden;
}
.cbcat-viewer-stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #fff;
}

.cbcat-viewer-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: center;
	background: rgba(13, 17, 23, .75);
	color: var(--cb-text);
	font-size: 0.9rem;
	z-index: 2;
}
.cbcat-spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(100, 170, 210, .25);
	border-top-color: var(--cb-steel, #6aaecc);
	animation: cbcat-spin 0.9s linear infinite;
}
@keyframes cbcat-spin { to { transform: rotate(360deg); } }
.cbcat-viewer-loader.is-hidden { display: none; }

/* Fallback panel */
.cbcat-viewer-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 30px;
	text-align: center;
	background: linear-gradient(160deg, var(--cb-bg, #0d1117), #1a1f2a);
	z-index: 3;
}
.cbcat-fb-icon { font-size: 3.5rem; line-height: 1; }
.cbcat-viewer-fallback h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cb-text);
}
.cbcat-viewer-fallback p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--cb-text-muted, #98a2af);
	max-width: 460px;
	line-height: 1.85;
}
.cbcat-fb-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 8px;
}
.cbcat-fb-actions .cbcat-btn {
	--cb-acc: var(--cb-steel, #6aaecc);
}

/* Disable body scroll when viewer open */
body.cbcat-viewer-open {
	overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   MOBILE FINE-TUNING
   ════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
	.cbcat-sec  { padding: 48px 0; }
	.cbcat-hero { padding: 72px 0 56px; }

	.cbcat-card { padding: 22px 18px; }
	.cbcat-card-title    { font-size: 1.1rem; }
	.cbcat-card-actions  { grid-template-columns: 1fr; }   /* stack buttons */

	.cbcat-card-qr {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
		text-align: center;
	}
	.cbcat-qr-wrap {
		width: 160px;
		height: 160px;
		flex: 0 0 160px;
		margin: 0 auto;
	}
	.cbcat-qr-meta {
		justify-content: center;
		text-align: center;
		font-size: 0.82rem;
	}

	.cbcat-viewer {
		padding: 0;
	}
	.cbcat-viewer-shell {
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
		border: 0;
	}
	.cbcat-viewer-head { padding: 12px 14px; }
	.cbcat-viewer-title { font-size: 0.85rem; }
	.cbcat-viewer-tool  { width: 34px; height: 34px; }
}

@media (max-width: 480px) {
	.cbcat-hero-badges .cbcat-hero-badge {
		padding: 8px 12px;
		gap: 6px;
	}
	.cbcat-hb-lbl { font-size: 0.78rem; }
	.cbcat-card-pdf-icon { display: none; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.cbcat-hero-title em,
	.cbcat-qr-scan,
	.cbcat-spinner { animation: none !important; }
	.cbcat-card,
	.cbcat-qr-wrap,
	.cbcat-btn,
	.cbcat-info-item,
	.cbcat-viewer-shell { transition: none !important; }
}