/* ===========================================================
   ICTWorld24 Product Gallery — Frontend Styles
   Design philosophy: a neutral base + one accent color, generous whitespace,
   subtle motion — built to age well over the years.
   =========================================================== */

:root {
	--ipg-primary: #fc1812;      /* brand red (from logo) */
	--ipg-accent-blue: #30beed;  /* brand blue (from logo) */
	--ipg-accent-yellow: #fcba12;/* brand yellow (from logo) */
	--ipg-primary-contrast: #ffffff;
	--ipg-bg: #ffffff;
	--ipg-bg-alt: #f8fafc;
	--ipg-text: #0f172a;
	--ipg-text-muted: #64748b;
	--ipg-border: #e2e8f0;
	--ipg-radius: 14px;
	--ipg-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	--ipg-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.14);
	--ipg-transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);

	/* Shared with the site-wide header/footer (class-ipg-frontend.php),
	   which render outside .ipg-home on non-homepage requests. */
	--ipg-h-gradient: linear-gradient(135deg, var(--ipg-primary) 0%, #ff5b45 45%, var(--ipg-accent-yellow) 100%);
	--ipg-h-dark-bg: #0b0f19;
}

/* ---------- Hide the active theme's own header ----------
   This plugin renders its own complete site-wide header — logo +
   main menu (.ipg-topbar) — on every request via wp_body_open(), see
   IPG_Frontend::render_site_header() in class-ipg-frontend.php. That
   means the active theme's separate header (its own logo/site title
   + menu, from the theme's get_header()) is now a duplicate sitting
   directly underneath ours, which is the extra bar the site owner
   flagged in the screenshot. Rather than editing theme files, this
   hides it using the markers most WordPress themes use for their
   site header: the `role="banner"` landmark (only one should exist
   per page per the HTML5 spec), and the `.site-header` / `#masthead`
   wrapper used by the large majority of themes (Astra, GeneratePress,
   OceanWP, Kadence, Blocksy, the default `_s`-based themes, etc.).
   In-page headers — a blog post's own title area, for example —
   never carry this role or these classes, so they're untouched. If a
   theme uses different markup entirely, this simply won't match
   anything and the duplicate would need hiding another way. */
[role="banner"]:not(.ipg-topbar),
.site-header:not(.ipg-topbar),
#masthead:not(.ipg-topbar) {
	display: none !important;
}

/* ---------- Hide the active theme's own footer ----------
   Same duplication as the header above, but at the bottom of the
   page: this plugin renders its own complete site-wide footer
   (.ipg-home-footer) via wp_footer(), see
   IPG_Frontend::render_site_footer(). That leaves the active theme's
   separate footer — usually just its site logo/title plus a generic
   "All rights reserved" copyright line — sitting directly above ours,
   which is the extra white bar the site owner flagged in the
   screenshot. Hidden using the same kind of markers most themes use
   for their footer landmark: the `role="contentinfo"` landmark (only
   one should exist per page per the HTML5 spec), and the
   `.site-footer` / `#colophon` wrapper used by the large majority of
   themes (Astra, GeneratePress, OceanWP, Kadence, Blocksy, the
   default `_s`-based themes, etc.) — the same family of themes the
   header selectors above already cover. */
[role="contentinfo"]:not(.ipg-home-footer),
.site-footer:not(.ipg-home-footer),
#colophon:not(.ipg-home-footer) {
	display: none !important;
}

/* ---------- Defensive site header logo cap ----------
   Kept as a fallback in case a theme's header markup doesn't match
   the selectors above and still shows: caps an oversized logo (a
   logo image uploaded without an explicit display size very commonly
   renders at its full native pixel size) to a normal header height,
   without touching anything else in the header. If the active theme
   already sets its own (smaller or larger) logo size with equal or
   higher CSS specificity, that still wins.
   ---------------------------------------------------- */
.site-header .custom-logo,
.site-branding .custom-logo,
header .custom-logo,
.custom-logo-link img,
.site-logo img {
	max-height: 56px;
	width: auto;
	height: auto;
}

/* ---------- Top header / menu (always visible, no scroll-reveal gap) ---------- */
.ipg-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 24px;
	background: rgba(11,15,25,0.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	box-sizing: border-box;
}
.ipg-topbar * { box-sizing: border-box; }
/* !important here because the active theme's own generic button/img
   resets (loaded for its own site-header, buttons, etc.) can carry
   equal-or-higher specificity than a plain class selector and were
   observed bleeding into this header's logo and menu-toggle button —
   squishing the logo's aspect ratio and recoloring/always-showing the
   toggle. These rules must win unconditionally since this header has
   to look right regardless of what theme is active. */
.ipg-topbar-brand img {
	height: 42px !important;
	width: auto !important;
	max-width: none !important;
	display: block !important;
	object-fit: contain !important;
}
.ipg-topbar-links { display: flex; align-items: center; gap: 4px; }
.ipg-topbar-links a {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	padding: 9px 16px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.ipg-topbar-links a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ipg-topbar-links a.ipg-topbar-cta {
	background: var(--ipg-h-gradient);
	color: #fff;
	margin-left: 6px;
}
.ipg-topbar-toggle {
	display: none !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 5px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border: none !important;
	border-radius: 10px !important;
	background: rgba(255,255,255,0.08) !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.ipg-topbar-toggle span {
	display: block !important;
	width: 18px !important;
	height: 2px !important;
	margin: 0 auto !important;
	background: #fff !important;
	border-radius: 2px !important;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
}

@media (max-width: 640px) {
	.ipg-topbar-toggle { display: flex !important; }
	.ipg-topbar-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 10px 16px 16px;
		background: #0b0f19;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		display: none;
	}
	.ipg-topbar-links.ipg-topbar-links-open { display: flex; }
	.ipg-topbar-links a { padding: 12px 14px; }
	.ipg-topbar-links a.ipg-topbar-cta { margin-left: 0; text-align: center; }
}

/* ---------- Site footer (all posts/pages) ---------- */
.ipg-home-footer {
	background: var(--ipg-h-dark-bg);
	color: rgba(255,255,255,0.72);
	padding: 60px 0 0;
	box-sizing: border-box;
}
.ipg-home-footer *,
.ipg-home-footer *::before,
.ipg-home-footer *::after { box-sizing: border-box; }
.ipg-home-footer .ipg-section-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ipg-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ipg-footer-brand img { height: 28px; width: auto; margin-bottom: 14px; display: block; }
.ipg-footer-brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 280px; margin: 0; }
.ipg-footer-col h4 {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.ipg-footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ipg-footer-col a { color: rgba(255,255,255,0.65); font-size: 14.5px; text-decoration: none; transition: color .2s ease; }
.ipg-footer-col a:hover { color: #fff; }
.ipg-footer-contact li { font-size: 14.5px; }

.ipg-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 0;
	font-size: 13px;
	color: rgba(255,255,255,0.45);
}
.ipg-footer-credit { color: rgba(255,255,255,0.45); }

@media (max-width: 900px) {
	.ipg-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ipg-footer-grid { grid-template-columns: 1fr; gap: 28px; }
	.ipg-footer-bottom { justify-content: flex-start; }
}

/* ---------- Filter bar ---------- */
.ipg-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.ipg-filter-link {
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--ipg-border);
	color: var(--ipg-text-muted);
	text-decoration: none;
	font-size: 14px;
	transition: var(--ipg-transition);
}
.ipg-filter-link:hover,
.ipg-filter-link.active {
	background: var(--ipg-primary);
	border-color: var(--ipg-primary);
	color: var(--ipg-primary-contrast);
}

/* ---------- Grid ---------- */
.ipg-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(3, 1fr);
}
.ipg-columns-2 { grid-template-columns: repeat(2, 1fr); }
.ipg-columns-3 { grid-template-columns: repeat(3, 1fr); }
.ipg-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.ipg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ipg-grid { grid-template-columns: 1fr; }
}

/* ---------- Product card ---------- */
.ipg-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--ipg-bg);
	border-radius: var(--ipg-radius);
	overflow: hidden;
	box-shadow: var(--ipg-shadow);
	transition: var(--ipg-transition);
	border: 1px solid var(--ipg-border);
}
.ipg-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ipg-shadow-hover);
}
.ipg-card-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ipg-bg-alt);
}
.ipg-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--ipg-transition);
}
.ipg-card:hover .ipg-card-thumb img {
	transform: scale(1.06);
}
.ipg-card-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--ipg-bg-alt), var(--ipg-border));
}
.ipg-card-body {
	padding: 18px 20px 22px;
}
.ipg-card-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--ipg-text);
}
.ipg-card-tagline {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ipg-text-muted);
	line-height: 1.5;
}
.ipg-card-cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--ipg-primary);
}

.ipg-no-products {
	color: var(--ipg-text-muted);
	text-align: center;
	padding: 40px 0;
}

/* ---------- Pagination ---------- */
.ipg-pagination-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}
.ipg-page-btn {
	min-width: 40px;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid var(--ipg-border);
	background: var(--ipg-bg);
	color: var(--ipg-text);
	cursor: pointer;
	font-size: 14px;
	transition: var(--ipg-transition);
}
.ipg-page-btn:hover,
.ipg-page-btn.active {
	background: var(--ipg-primary);
	border-color: var(--ipg-primary);
	color: var(--ipg-primary-contrast);
}
.ipg-gallery-wrapper.ipg-loading .ipg-grid-container {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ---------- Single product landing page ---------- */
.ipg-single-product {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}
.ipg-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding: 60px 0;
}
@media (max-width: 800px) {
	.ipg-hero { grid-template-columns: 1fr; padding: 32px 0; }
}
.ipg-hero-media img {
	width: 100%;
	border-radius: var(--ipg-radius);
	box-shadow: var(--ipg-shadow);
}
.ipg-hero-title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	margin: 0 0 16px;
	font-weight: 700;
}
.ipg-hero-tagline {
	font-size: 18px;
	color: var(--ipg-text-muted);
	margin: 0 0 28px;
	line-height: 1.6;
}

.ipg-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--ipg-transition);
}
.ipg-btn-primary {
	background: var(--ipg-primary);
	color: var(--ipg-primary-contrast);
}
.ipg-btn-primary:hover {
	opacity: 0.88;
	transform: translateY(-2px);
}
.ipg-btn-secondary {
	background: transparent;
	color: var(--ipg-text);
	border: 1px solid var(--ipg-border);
	margin-left: 12px;
}
.ipg-btn-secondary:hover {
	border-color: var(--ipg-primary);
	color: var(--ipg-primary);
}
.ipg-btn-large {
	padding: 18px 42px;
	font-size: 17px;
}

.ipg-video-wrap {
	position: relative;
	width: 100%;
	max-width: 900px;
	aspect-ratio: 16/9;
	border-radius: var(--ipg-radius);
	overflow: hidden;
	box-shadow: var(--ipg-shadow);
}
.ipg-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ipg-section {
	padding: 44px 0;
	border-top: 1px solid var(--ipg-border);
}
.ipg-section h2 {
	font-size: 26px;
	margin: 0 0 22px;
}
.ipg-content {
	color: var(--ipg-text-muted);
	line-height: 1.8;
	font-size: 16px;
}

.ipg-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 700px) {
	.ipg-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.ipg-gallery-item img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 10px;
	transition: var(--ipg-transition);
}
.ipg-gallery-item:hover img {
	transform: scale(1.03);
	box-shadow: var(--ipg-shadow-hover);
}

.ipg-specs-table {
	width: 100%;
	border-collapse: collapse;
}
.ipg-specs-table tr {
	border-bottom: 1px solid var(--ipg-border);
}
.ipg-specs-table th,
.ipg-specs-table td {
	text-align: left;
	padding: 14px 8px;
	font-size: 15px;
}
.ipg-specs-table th {
	color: var(--ipg-text-muted);
	font-weight: 500;
	width: 40%;
}

.ipg-cta-section {
	text-align: center;
	border-top: none;
	padding: 28px 0 52px;
}

.ipg-powered-by {
	text-align: center;
	font-size: 12px;
	color: var(--ipg-text-muted);
	padding: 20px 0 40px;
}

.ipg-archive-header {
	max-width: 1140px;
	margin: 0 auto;
	padding: 50px 20px 30px;
}
.ipg-archive-header h1 {
	font-size: 34px;
	margin: 0;
}
.ipg-archive-wrap { padding: 0 20px 60px; }
.ipg-archive-wrap .ipg-grid,
.ipg-archive-wrap .ipg-filter-bar {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Floating customer care button (WhatsApp) ---------- */
.ipg-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
	z-index: 9999;
	transition: var(--ipg-transition);
}
.ipg-whatsapp-float:hover {
	transform: scale(1.08);
	color: #fff;
}
.ipg-whatsapp-float.ipg-status-offline {
	background: #94a3b8;
	box-shadow: 0 10px 30px rgba(148, 163, 184, 0.35);
}
.ipg-whatsapp-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #22c55e;
}
.ipg-status-offline .ipg-whatsapp-dot {
	background: #9ca3af;
}
.ipg-status-online .ipg-whatsapp-dot {
	animation: ipg-pulse 1.8s infinite;
}
@keyframes ipg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ipg-whatsapp-tooltip {
	position: absolute;
	right: 68px;
	bottom: 16px;
	background: var(--ipg-text);
	color: #fff;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: var(--ipg-transition);
}
.ipg-whatsapp-float:hover .ipg-whatsapp-tooltip {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- FAQ accordion ---------- */
.ipg-faq-list {
	max-width: 760px;
	margin: 0 auto;
}
.ipg-faq-item {
	border-bottom: 1px solid var(--ipg-border);
	padding: 16px 0;
}
.ipg-faq-question {
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ipg-faq-question::-webkit-details-marker { display: none; }
.ipg-faq-question::after {
	content: '+';
	font-size: 20px;
	color: var(--ipg-primary);
	transition: var(--ipg-transition);
}
.ipg-faq-item[open] .ipg-faq-question::after {
	transform: rotate(45deg);
}
.ipg-faq-answer {
	padding-top: 12px;
	color: var(--ipg-text-muted);
	line-height: 1.7;
}

/* ---------- Contact/ticket form ---------- */
.ipg-contact-form {
	max-width: 560px;
	margin: 0 auto;
}
.ipg-contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}
.ipg-contact-form input[type="text"],
.ipg-contact-form input[type="email"],
.ipg-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ipg-border);
	border-radius: 8px;
	font-size: 15px;
	box-sizing: border-box;
}
.ipg-contact-form input:focus,
.ipg-contact-form textarea:focus {
	outline: none;
	border-color: var(--ipg-primary);
}
.ipg-form-notice {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
}
.ipg-form-success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
.ipg-form-error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ---------- License badges (Free / Pro / license status) ---------- */
.ipg-license-badge {
	display: inline-block;
	margin: 10px 0 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ipg-license-free {
	background: #e0f2fe;
	color: #075985;
}
.ipg-license-pro {
	background: #fef3c7;
	color: #92400e;
}
.ipg-license-active {
	background: #dcfce7;
	color: #166534;
}
.ipg-license-inactive {
	background: #fee2e2;
	color: #991b1b;
}
.ipg-license-active-count {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	color: var(--ipg-text-muted, #64748b);
}
.ipg-license-portal-link {
	display: inline-block;
	margin: 12px 0 0 14px;
	font-size: 13px;
	text-decoration: underline;
	color: var(--ipg-text-muted, #64748b);
}
.ipg-card-thumb { position: relative; }
.ipg-card-badge {
	position: absolute;
	top: 10px;
	right: 10px;
}