/* =========================================================
   GPL Villa — Homepage components
   ========================================================= */

.gv-home section,
.gv-home .gv-section { max-width: 1240px; margin: 0 auto; padding: var(--gv-space-xl) 24px; }

/* Hero + sidebar layout */
.gv-hero-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	max-width: 1240px;
	margin: 10px auto 0;
	padding: 0 24px;
}

.gv-hero-carousel {
	position: relative;
	background:
		radial-gradient(circle at 15% 20%, rgba(212,175,55,0.12), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(47,189,142,0.08), transparent 45%),
		var(--gv-ink);
	border: 1px solid var(--gv-gold-dark);
	border-radius: var(--gv-radius-lg);
	min-height: 440px;
	overflow: hidden;
	box-shadow: var(--gv-shadow-lg), 0 0 40px rgba(232,172,31,0.08);
}

.gv-hero-slide {
	display: none;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 440px;
	background:
		radial-gradient(circle at 20% 15%, rgba(232,172,31,0.16), transparent 50%),
		linear-gradient(135deg, var(--gv-ink), var(--gv-bg-alt) 55%, #2a1f08);
	position: relative;
	overflow: hidden;
}

.gv-hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 90%, rgba(0,0,0,0.35), transparent 55%);
	pointer-events: none;
}

.gv-hero-slide.is-active { display: grid; animation: gv-fade-in 0.5s ease; }

@keyframes gv-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.gv-hero-slide-inner {
	max-width: 100%;
	position: relative;
	z-index: 1;
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.gv-hero-brand { display: block; height: 30px; width: auto; margin-bottom: 16px; object-fit: contain; object-position: left center; }

.gv-hero-photo {
	position: relative;
	min-height: 440px;
	min-width: 0;
	background: var(--gv-black);
}
.gv-hero-photo img { display: block; width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.gv-hero-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5,6,11,0.55), rgba(5,6,11,0.05) 45%), linear-gradient(0deg, rgba(232,172,31,0.14), transparent 60%);
	pointer-events: none;
}

/* Slide 1: "WordPress" needs to sit on the same visual line as "Premium"
   instead of wrapping to its own line — rather than shrinking the whole
   heading, only this one word scales down enough to fit alongside it. */
.gv-hero-title-sm { font-size: 0.72em; color: var(--gv-gold-light); }

.gv-hero-eyebrow {
	display: inline-block;
	background: rgba(0,0,0,0.28);
	color: #ffd23f;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 18px;
}
.gv-eyebrow-license { background: rgba(0,0,0,0.28); color: #fff; }
.gv-eyebrow-pay { background: rgba(0,0,0,0.28); color: #ffd23f; }

.gv-hero-slide h1 { font-size: 34px; line-height: 1.22; margin-bottom: 16px; color: #fff; }
.gv-hero-slide p { color: rgba(255,255,255,0.85); font-size: 15.5px; margin-bottom: 22px; }

.gv-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gv-hero-tags span {
	font-size: 12px; color: var(--gv-gold-light); font-weight: 600;
	border: 1px solid var(--gv-gold-dark); border-radius: 20px; padding: 4px 12px;
	background: rgba(232,172,31,0.12);
	white-space: nowrap;
}
/* Slides with 3-4 short tags ("JazzCash / Easypaisa / SadaPay / Bank
   Transfer", "Affordable Plans / Verified Pricing / Quick Access") need
   to stay on one line rather than wrapping — wrapping is what pushed the
   last tag down onto its own row. Tighter sizing plus a horizontal-
   scroll fallback (only ever needed on the narrowest phones) keeps every
   tag on a single row without any of them getting cut off. */
.gv-hero-tags-scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.gv-hero-tags-scroll::-webkit-scrollbar { display: none; }
.gv-hero-tags-scroll span { font-size: 11.5px; padding: 4px 10px; }

.gv-hero-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(255,255,255,0.06); border: 1px solid var(--gv-border);
	color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
	transition: all 0.15s ease;
}
.gv-hero-prev { left: 16px; }
.gv-hero-next { right: 16px; }
.gv-hero-nav:hover { background: rgba(212,175,55,0.18); border-color: var(--gv-gold); }

.gv-hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.gv-hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--gv-border); cursor: pointer; transition: all 0.2s ease; }
.gv-hero-dots span.is-active { background: var(--gv-gold); width: 22px; border-radius: 6px; }

/* License sidebar */
.gv-license-sidebar {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius-lg);
	padding: 20px;
	box-shadow: var(--gv-shadow);
}
.gv-license-sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gv-license-sidebar-head h3 { font-size: 15px; margin: 0; color: #fff; }
.gv-license-sidebar-head a { font-size: 12px; color: var(--gv-gold-light); }

.gv-license-sidebar-list { list-style: none; margin: 0; padding: 0; }
.gv-license-sidebar-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 8px;
	border-radius: var(--gv-radius-sm); transition: background 0.15s ease;
}
.gv-license-sidebar-item:hover { background: var(--gv-card-hover); }
.gv-license-sidebar-item img { border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.gv-license-sidebar-info { display: flex; flex-direction: column; min-width: 0; }
.gv-license-sidebar-name { font-size: 13px; color: #dfe2ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-license-sidebar-price { font-size: 12px; color: var(--gv-gold-light); font-weight: 700; }
.gv-license-sidebar-price em { display: block; font-style: normal; color: var(--gv-text-muted); font-weight: 400; font-size: 11px; }
.gv-license-sidebar-empty { font-size: 13px; color: var(--gv-text-muted); }

/* Category quick links */
.gv-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}
.gv-category-card {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	padding: 22px;
	display: flex; flex-direction: column; gap: 6px;
	transition: all 0.2s ease;
}
.gv-category-card:hover { border-color: var(--gv-gold-dark); transform: translateY(-3px); box-shadow: var(--gv-shadow); }
.gv-category-card strong { color: #fff; font-size: 16px; }
.gv-category-card span { font-size: 12px; color: var(--gv-text-muted); }
.gv-category-card-accent {
	background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.03));
	border-color: var(--gv-gold-dark);
}

/* Plans grid — cards pulled in a bit narrower from the sides (max-width
   + centered) and given a soft animated glow so they feel more premium. */
.gv-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 26px;
	text-align: left;
	max-width: 940px;
	margin-inline: auto;
}
.gv-plan-card {
	position: relative;
	border: 1px solid var(--gv-gold-dark);
	border-radius: var(--gv-radius-lg);
	padding: 32px 22px;
	background: var(--gv-card);
	text-align: center;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	animation: gv-plan-glow 3.2s ease-in-out infinite;
	box-shadow: 0 0 0 1px rgba(232,172,31,0.15) inset;
}
.gv-plan-card:hover { transform: translateY(-6px); border-color: var(--gv-gold); box-shadow: var(--gv-shadow-lg), 0 0 0 1px rgba(232,172,31,0.3) inset; }
.gv-plan-popular {
	border: 2px solid var(--gv-gold);
	background: linear-gradient(180deg, var(--gv-card-hover), var(--gv-card));
}

@keyframes gv-plan-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(232,172,31,0); }
	50% { box-shadow: 0 0 22px rgba(232,172,31,0.28); }
}
@media (prefers-reduced-motion: reduce) {
	.gv-plan-card { animation: none; }
}
.gv-plans-grid .gv-plan-card:nth-child(2) { animation-delay: 0.5s; }
.gv-plans-grid .gv-plan-card:nth-child(3) { animation-delay: 1s; }
.gv-plan-badge-popular {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: linear-gradient(135deg, var(--gv-gold-light), var(--gv-gold-dark));
	color: #171106; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 20px;
}
.gv-plan-card h3 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--gv-gold-light); margin: 6px 0; }
/* Price sits on its own dark-red pill so it stands out from the rest of
   the card — scoped to .price-wrap only, so it doesn't touch price
   styling used anywhere else (single product page, product cards). */
.gv-plan-card .price-wrap {
	display: inline-block;
	background: linear-gradient(135deg, #8a0000, #c40000);
	border-radius: var(--gv-radius);
	padding: 6px 24px;
	margin: 10px 0;
	box-shadow: 0 8px 20px rgba(196,0,0,0.35);
}
.gv-plan-card .price { font-size: 36px; font-weight: 800; color: #fff; margin: 0; }
.gv-plan-card .price .amount, .gv-plan-card .price bdi { color: #fff !important; }
.gv-plan-limit { color: var(--gv-text-muted); font-size: 14px; margin-bottom: 24px; }

.gv-plan-features {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.gv-plan-features li {
	font-size: 12.5px;
	color: var(--gv-text-muted);
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.gv-plan-features li::before {
	content: '✓';
	color: var(--gv-teal);
	font-weight: 800;
	flex-shrink: 0;
}

.gv-plan-buy-now {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--gv-pink-strong);
	font-weight: 700;
}
.gv-plan-buy-now:hover { color: var(--gv-red-strong); }

.gv-dark-yellow-text { color: #c9960c !important; }

/* Payments */
.gv-payments-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.gv-payment-badge {
	background: var(--gv-card); border: 1px solid var(--gv-border); border-radius: var(--gv-radius-sm);
	padding: 15px 28px; font-weight: 700; color: #dfe2ef; font-size: 14px;
	transition: all 0.2s ease;
}
.gv-payment-badge:hover { border-color: var(--gv-gold-dark); transform: translateY(-2px); }

/* Steps */
.gv-steps-section { background: var(--gv-bg-alt); border-radius: var(--gv-radius-lg); }
.gv-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; margin-top: 32px; text-align: center; }
.gv-step { display: flex; flex-direction: column; align-items: center; }
.gv-step-number {
	display: inline-block; font-family: var(--gv-font-heading); font-size: 14px; font-weight: 700;
	color: #171106; background: linear-gradient(135deg, var(--gv-gold-light), var(--gv-gold-dark));
	border-radius: 50%; width: 36px; height: 36px; line-height: 36px; text-align: center; margin: 0 auto 14px;
}
.gv-step h3 { font-size: 17px; margin: 4px 0; color: #fff; }
.gv-step p { color: var(--gv-text-muted); font-size: 14px; text-align: justify; text-align-last: center; }

/* License callout */
.gv-license-callout {
	background: linear-gradient(135deg, rgba(212,175,55,0.10), rgba(212,175,55,0.02));
	border-top: 1px solid var(--gv-border);
	border-bottom: 1px solid var(--gv-border);
	border-radius: var(--gv-radius-lg);
}
.gv-license-callout-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.gv-license-callout h2 { margin-bottom: 10px; color: var(--gv-gold-light); }
.gv-license-callout p { color: var(--gv-text-muted); }

.gv-featured-section { text-align: center; }

@media (max-width: 900px) {
	.gv-hero-wrap { grid-template-columns: 1fr; padding: 0 12px; }
	/* Real photos now replace the old decorative SVG (which just got
	   hidden below this width since it had nowhere reserved to go).
	   Photos stay, just reflow above the text and shrink, matching the
	   same stacked pattern the source design used on mobile. */
	.gv-hero-slide { grid-template-columns: 1fr; }
	.gv-hero-slide-inner { order: 2; padding: 32px 24px 28px; max-width: 100%; }
	.gv-hero-photo { order: 1; min-height: 200px; }
	.gv-hero-photo img { min-height: 200px; }
}

@media (max-width: 600px) {
	.gv-hero-slide h1 { font-size: 26px; }
	.gv-hero-wrap { padding: 0 8px; }
	.gv-categories-section.gv-section,
	.gv-plans-section.gv-section,
	.gv-payments-section.gv-section,
	.gv-steps-section.gv-section,
	.gv-license-full-section.gv-section,
	.gv-cat-products-section.gv-section {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ===================== FEATURED DEAL CARD (replaces sidebar) ===================== */

.gv-deal-card {
	background:
		radial-gradient(circle at 15% 10%, rgba(255,215,120,0.18), transparent 45%),
		linear-gradient(160deg, #55090a 0%, #a01f1f 55%, #e0402a 85%, #ffb020 120%);
	border: 2px solid var(--gv-gold);
	border-radius: var(--gv-radius-lg);
	padding: 26px;
	box-shadow: 0 10px 34px rgba(255,59,59,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
}

.gv-deal-logo-wrap {
	background: #fff;
	border-radius: 12px;
	padding: 10px 14px;
	display: inline-flex;
	align-self: flex-start;
	box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.gv-deal-logo {
	display: block;
	width: 130px;
	height: auto;
}

.gv-deal-ribbon {
	align-self: flex-start;
	background: #ffd23f;
	color: #171106;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
}

.gv-deal-limited {
	align-self: flex-start;
	background: rgba(255,255,255,0.16);
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	margin-left: 8px;
}

.gv-deal-card h3 {
	font-size: 19px;
	margin: 0;
	color: #fff;
}

.gv-deal-card .gv-deal-sub {
	font-size: 12px;
	color: rgba(255,255,255,0.75);
	margin-top: -8px;
}

.gv-deal-price {
	font-family: var(--gv-font-heading);
	font-size: 40px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	animation: gv-price-pulse 1.6s ease-in-out infinite;
}
.gv-deal-price small {
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	font-weight: 500;
}

@keyframes gv-price-pulse {
	0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); }
	50% { transform: scale(1.05); text-shadow: 0 0 20px rgba(255,255,255,0.85); }
}

.gv-deal-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gv-deal-features li {
	font-size: 13.5px;
	color: #fff;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.gv-deal-features li::before {
	content: '✓';
	color: #ffd23f;
	font-weight: 800;
	flex-shrink: 0;
}

/* ===================== FULL LICENSE PRODUCTS LIST (one by one) ===================== */

.gv-license-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.gv-license-row {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 24px;
	align-items: center;
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	padding: 20px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.gv-license-row:hover { transform: translateY(-3px); border-color: var(--gv-gold-dark); box-shadow: var(--gv-shadow); }

.gv-license-row img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--gv-radius-sm);
	background: var(--gv-bg-alt);
}

.gv-license-row-body h3 { font-size: 17px; margin: 0 0 6px; color: #fff; }
.gv-license-row-body p { font-size: 13.5px; color: var(--gv-text-muted); margin: 0; }

.gv-license-row-price {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 140px;
}
.gv-license-row-price .gv-price-tag {
	font-size: 18px;
	font-weight: 800;
	color: var(--gv-gold-light);
}
.gv-license-row-price .gv-price-tag small { font-size: 11px; color: var(--gv-text-muted); font-weight: 500; display: block; }

@media (max-width: 700px) {
	.gv-license-row { grid-template-columns: 70px 1fr; }
	.gv-license-row-price { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ===================== CATEGORY PRODUCT SECTIONS (2 per row on desktop) ===================== */

.gv-cat-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 20px;
}
.gv-cat-section-head h2 { font-size: 22px; margin: 0; }
.gv-cat-section-head a { font-size: 13px; color: var(--gv-gold-light); }

ul.products.gv-cols-2 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 22px;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ===================== MISSION SECTION ===================== */

.gv-mission-section {
	background: var(--gv-bg-alt);
	border-radius: var(--gv-radius-lg);
	text-align: center;
}
.gv-mission-section .gv-section-head { max-width: 760px; }
.gv-mission-section p { font-size: 15.5px; line-height: 1.8; }

/* ===================== TESTIMONIALS ===================== */

.gv-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}
.gv-testimonial-card {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	padding: 24px;
}
.gv-testimonial-stars { color: var(--gv-gold); font-size: 14px; margin-bottom: 12px; }
.gv-testimonial-card p { font-size: 14px; color: #dfe2ef; line-height: 1.7; margin-bottom: 16px; }
.gv-testimonial-author { display: flex; align-items: center; gap: 10px; }
.gv-testimonial-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(135deg, var(--gv-gold-light), var(--gv-gold-dark));
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.gv-testimonial-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.gv-testimonial-loc { color: var(--gv-text-faint); font-size: 12px; }
.gv-testimonials-cta {
	text-align: center;
	margin-top: 24px;
}
.gv-testimonials-cta a {
	color: var(--gv-gold-light);
	font-weight: 600;
	font-size: 14px;
}
.gv-testimonials-cta a:hover { color: #fff; }

/* ===================== LEGAL / MORE LINKS GRID ===================== */

.gv-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.gv-link-btn {
	display: block;
	text-align: center;
	padding: 16px 18px;
	border: 1px solid var(--gv-border-light);
	border-radius: var(--gv-radius);
	color: #cdd1e4 !important;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
}
.gv-link-btn:hover {
	border-color: var(--gv-gold);
	color: var(--gv-gold-light) !important;
	background: var(--gv-card);
}

@media (max-width: 560px) {
	.gv-links-grid { gap: 10px; }
	.gv-link-btn { padding: 12px 10px; font-size: 12.5px; }
}

/* ===================== SOCIAL BUTTONS ===================== */

.gv-social-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 520px;
	margin: 0 auto;
}
.gv-social-btn {
	display: block;
	text-align: center;
	padding: 16px 18px;
	border-radius: var(--gv-radius);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.gv-social-btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff !important; }

.gv-social-youtube { background: #ff2323; }
.gv-social-facebook { background: #1877f2; }
.gv-social-whatsapp { background: #25d366; color: #06210f !important; }
.gv-social-google { background: linear-gradient(135deg, #4285F4, #34A853); }

@media (max-width: 560px) {
	.gv-social-grid { gap: 10px; }
	.gv-social-btn { padding: 12px 10px; font-size: 13px; }
}