/**
 * HLxHub — Single Mobile General Layout
 *
 * File:
 * assets/css/single-mobile/general-single.css
 *
 * Purpose:
 * Complete Single Mobile Review page ko ek
 * continuous premium container ke andar rakhna.
 *
 * Flow:
 *
 * Hero
 *   ↓
 * Quick Verdict
 *   ↓
 * Pros & Cons
 *   ↓
 * TOC
 *   ↓
 * Review
 *   ↓
 * Specifications
 *   ↓
 * Camera / Display / Performance
 *   ↓
 * Price / Buying
 *   ↓
 * Compare
 *   ↓
 * Final Verdict
 *   ↓
 * FAQ
 *
 */


/* ================================================================
   ROOT
================================================================ */

.hlx-single-mobile-page {
	position: relative;

	width: 100%;
	max-width: 1280px;

	margin: 0 auto;
	padding: 20px;

	box-sizing: border-box;

	isolation: isolate;
}


/* ================================================================
   MAIN CONTINUOUS BOX
================================================================ */
.hlx-single-mobile-page__container {
    position: relative;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    overflow: visible;

    border: 1px solid rgba(16, 24, 40, 0.07);
    border-radius: 32px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdff 48%,
            #ffffff 100%
        );

    box-shadow:
        0 25px 80px rgba(16, 24, 40, 0.08),
        0 8px 30px rgba(16, 24, 40, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    isolation: isolate;
}

/* ================================================================
   GLOBAL INNER BOX SIZING
================================================================ */

.hlx-single-mobile-page__container *,
.hlx-single-mobile-page__container *::before,
.hlx-single-mobile-page__container *::after {
	box-sizing: border-box;
}


/* ================================================================
   TOP GLASS HIGHLIGHT
================================================================ */

.hlx-single-mobile-page__container::before {
	content: "";

	position: absolute;

	top: 0;
	left: 8%;

	width: 84%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 1),
			transparent
		);

	pointer-events: none;

	z-index: 20;
}


/* ================================================================
   BACKGROUND LIGHT
================================================================ */

.hlx-single-mobile-page__container::after {
	content: "";

	position: absolute;

	top: -180px;
	right: -180px;

	width: 420px;
	height: 420px;

	border-radius: 50%;

	background: rgba(23, 105, 255, 0.035);

	filter: blur(80px);

	pointer-events: none;

	z-index: -1;
}


/* ================================================================
   SECTIONS
================================================================ */

.hlx-single-mobile-page__container > section {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ================================================================
   SECTION DIVIDER
================================================================ */

.hlx-single-mobile-page__container > section + section {
	border-top: 1px solid rgba(16, 24, 40, 0.055);
}


/* ================================================================
   REMOVE SECTION OUTER BOX FEEL
================================================================ */

/*
 * Individual sections apna separate card na lagen.
 * Main container hi overall card rahega.
 */

.hlx-single-mobile-page__container
.hlx-mobile-hero,
.hlx-single-mobile-page__container
.hlx-quick-verdict,
.hlx-single-mobile-page__container
.hlx-pros-cons {
	border-radius: 0;

	border-left: 0;
	border-right: 0;

	box-shadow: none;
}


/* ================================================================
   HERO
================================================================ */

.hlx-single-mobile-page__container
.hlx-mobile-hero {
	width: 100%;

	margin: 0;

	border-top: 0;
}


/* ================================================================
   QUICK VERDICT
================================================================ */

.hlx-single-mobile-page__container
.hlx-quick-verdict {
	width: 100%;

	margin: 0;
}


/* ================================================================
   PROS & CONS
================================================================ */

.hlx-single-mobile-page__container
.hlx-pros-cons {
	width: 100%;

	margin: 0;
}


/* ================================================================
   COMMON CONTENT WIDTH
================================================================ */

.hlx-single-mobile-page__container
.hlx-mobile-hero__inner,

.hlx-single-mobile-page__container
.hlx-quick-verdict__inner,

.hlx-single-mobile-page__container
.hlx-pros-cons__inner {
	width: min(1160px, calc(100% - 60px));

	margin-left: auto;
	margin-right: auto;
}


/* ================================================================
   CONTENT SECTIONS
================================================================ */

.hlx-single-mobile-page__section {
	position: relative;

	width: 100%;

	padding: 60px 40px;

	background: transparent;
}


/* ================================================================
   SECTION HEADER
================================================================ */

.hlx-single-mobile-page__section-header {
	max-width: 760px;

	margin-bottom: 32px;
}


.hlx-single-mobile-page__section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0 0 10px;

	font-size: 11px;
	font-weight: 800;

	line-height: 1.2;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: #1769ff;
}


.hlx-single-mobile-page__section-eyebrow::before {
	content: "";

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #1769ff;

	box-shadow:
		0 0 0 5px rgba(23, 105, 255, 0.08);
}


.hlx-single-mobile-page__section-title {
	margin: 0;

	font-size: clamp(28px, 4vw, 44px);

	font-weight: 800;

	line-height: 1.08;

	letter-spacing: -0.035em;

	color: #101828;
}


.hlx-single-mobile-page__section-description {
	max-width: 680px;

	margin: 12px 0 0;

	font-size: 15px;

	font-weight: 500;

	line-height: 1.7;

	color: #667085;
}


/* ================================================================
   CONTENT CARDS
================================================================ */

.hlx-single-mobile-page__card {
	position: relative;

	width: 100%;

	padding: 28px;

	border: 1px solid rgba(16, 24, 40, 0.07);

	border-radius: 22px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.98),
			rgba(248, 250, 252, 0.94)
		);

	box-shadow:
		0 14px 40px rgba(16, 24, 40, 0.055),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* ================================================================
   CARD HIGHLIGHT
================================================================ */

.hlx-single-mobile-page__card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 10%;

	width: 80%;
	height: 1px;

	background: rgba(255, 255, 255, 0.95);

	pointer-events: none;
}


/* ================================================================
   GRID
================================================================ */

.hlx-single-mobile-page__grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: 22px;

	width: 100%;
}


/* ================================================================
   THREE COLUMN GRID
================================================================ */

.hlx-single-mobile-page__grid--three {
	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
}


/* ================================================================
   FULL WIDTH
================================================================ */

.hlx-single-mobile-page__full {
	width: 100%;
}


/* ================================================================
   TABLES
================================================================ */

.hlx-single-mobile-page__container table {
	width: 100%;

	border-collapse: collapse;

	border-spacing: 0;
}


.hlx-single-mobile-page__container th,
.hlx-single-mobile-page__container td {
	padding: 14px 16px;

	border-bottom: 1px solid rgba(16, 24, 40, 0.07);

	text-align: left;

	vertical-align: middle;
}


.hlx-single-mobile-page__container th {
	font-size: 12px;

	font-weight: 800;

	color: #344054;

	background: rgba(248, 250, 252, 0.8);
}


.hlx-single-mobile-page__container td {
	font-size: 13px;

	font-weight: 500;

	color: #475467;
}


/* ================================================================
   IMAGES
================================================================ */

.hlx-single-mobile-page__container img {
	max-width: 100%;

	height: auto;

	display: block;
}


/* ================================================================
   LINKS
================================================================ */

.hlx-single-mobile-page__container a {
	text-decoration: none;
}


/* ================================================================
   TEXT
================================================================ */

.hlx-single-mobile-page__container p {
	max-width: 100%;

	overflow-wrap: anywhere;
}


/* ================================================================
   LISTS
================================================================ */

.hlx-single-mobile-page__container ul,
.hlx-single-mobile-page__container ol {
	max-width: 100%;
}


/* ================================================================
   BUYING / CTA AREA
================================================================ */

.hlx-single-mobile-page__buying {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 12px;

	width: 100%;
}


/* ================================================================
   AMAZON
================================================================ */

.hlx-single-mobile-page__amazon {
	background: #ff8a00;
	color: #ffffff;
}


/* ================================================================
   FLIPKART
================================================================ */

.hlx-single-mobile-page__flipkart {
	background: #1769ff;
	color: #ffffff;
}


/* ================================================================
   CTA COMMON
================================================================ */

.hlx-single-mobile-page__cta {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 46px;

	padding: 12px 20px;

	border-radius: 12px;

	font-size: 13px;

	font-weight: 800;

	line-height: 1;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.hlx-single-mobile-page__cta:hover {
	transform: translateY(-2px);

	box-shadow:
		0 10px 25px rgba(16, 24, 40, 0.12);
}


/* ================================================================
   TOC
================================================================ */

.hlx-single-mobile-page__toc {
	position: relative;

	width: 100%;

	padding: 28px 40px;

	border-bottom: 1px solid rgba(16, 24, 40, 0.055);
}


/* ================================================================
   FAQ
================================================================ */

.hlx-single-mobile-page__faq {
	width: 100%;
}


/* ================================================================
   FINAL VERDICT
================================================================ */

.hlx-single-mobile-page__final-verdict {
	position: relative;

	width: 100%;

	padding: 70px 40px;

	background:
		linear-gradient(
			180deg,
			rgba(23, 105, 255, 0.025),
			rgba(255, 255, 255, 0)
		);
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 900px) {

	.hlx-single-mobile-page {
		padding: 14px;
	}

	.hlx-single-mobile-page__container {
		border-radius: 26px;
	}

	.hlx-single-mobile-page__container
	.hlx-mobile-hero__inner,

	.hlx-single-mobile-page__container
	.hlx-quick-verdict__inner,

	.hlx-single-mobile-page__container
	.hlx-pros-cons__inner {
		width: min(100%, calc(100% - 36px));
	}

	.hlx-single-mobile-page__section {
		padding: 48px 28px;
	}

	.hlx-single-mobile-page__grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 700px) {

	.hlx-single-mobile-page {
		padding: 8px;
	}

	.hlx-single-mobile-page__container {
		border-radius: 22px;
	}

	.hlx-single-mobile-page__container
	.hlx-mobile-hero__inner,

	.hlx-single-mobile-page__container
	.hlx-quick-verdict__inner,

	.hlx-single-mobile-page__container
	.hlx-pros-cons__inner {
		width: calc(100% - 28px);
	}

	.hlx-single-mobile-page__section {
		padding: 40px 18px;
	}

	.hlx-single-mobile-page__grid,
	.hlx-single-mobile-page__grid--three {
		grid-template-columns: 1fr;

		gap: 15px;
	}

	.hlx-single-mobile-page__card {
		padding: 20px;

		border-radius: 18px;
	}

	.hlx-single-mobile-page__toc {
		padding: 22px 18px;
	}

	.hlx-single-mobile-page__final-verdict {
		padding: 48px 18px;
	}

	.hlx-single-mobile-page__cta {
		width: 100%;
	}

}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 390px) {

	.hlx-single-mobile-page {
		padding: 5px;
	}

	.hlx-single-mobile-page__container {
		border-radius: 18px;
	}

	.hlx-single-mobile-page__section {
		padding: 34px 14px;
	}

	.hlx-single-mobile-page__section-title {
		font-size: 28px;
	}

	.hlx-single-mobile-page__section-description {
		font-size: 13px;
	}

}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (prefers-reduced-motion: reduce) {

	.hlx-single-mobile-page__cta {
		transition: none;
	}

	.hlx-single-mobile-page__cta:hover {
		transform: none;
	}

}

/* ================================================================
   STICKY TOC SUPPORT
================================================================ */

.hlx-single-mobile-page,
.hlx-single-mobile-page__container {
    overflow: visible;
}

.hlx-mobile-toc {
    position: -webkit-sticky;
    position: sticky;

    top: 0;

    z-index: 9999;
}

/* ================================================================
   HLXHub — STICKY TOC PARENT FIX
================================================================ */

.hlx-single-mobile-page,
.hlx-single-mobile-page__container {
    overflow: visible !important;
}

.hlx-single-mobile-page__container {
    position: relative;
}

/* ================================================================
   HLxHub — Single Mobile
   Section Spacing & Separators
================================================================ */

.hlx-mobile-single-content > * {
	margin-bottom: 0;
}


/* ================================================================
   SECTION GAP + SEPARATOR
================================================================ */

.hlx-mobile-single-content > section,
.hlx-mobile-single-content > .hlx-full-specs,
.hlx-mobile-single-content > .hlx-mobile-hero,
.hlx-mobile-single-content > .hlx-quick-verdict,
.hlx-mobile-single-content > .hlx-pros-cons,
.hlx-mobile-single-content > .hlx-mobile-toc,
.hlx-mobile-single-content > .hlx-mobile-gallery {
	position: relative;
	margin-bottom: 48px;
	padding-bottom: 48px;
}


/* ================================================================
   SEPARATOR LINE
================================================================ */

.hlx-mobile-single-content > section::after,
.hlx-mobile-single-content > .hlx-full-specs::after,
.hlx-mobile-single-content > .hlx-mobile-hero::after,
.hlx-mobile-single-content > .hlx-quick-verdict::after,
.hlx-mobile-single-content > .hlx-pros-cons::after,
.hlx-mobile-single-content > .hlx-mobile-toc::after,
.hlx-mobile-single-content > .hlx-mobile-gallery::after {

	content: "";

	position: absolute;

	left: 5%;
	right: 5%;
	bottom: 0;

	height: 1px;

	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(15, 23, 42, 0.10) 20%,
		rgba(15, 23, 42, 0.18) 50%,
		rgba(15, 23, 42, 0.10) 80%,
		transparent 100%
	);
}


/* ================================================================
   LAST SECTION — NO LINE
================================================================ */

.hlx-mobile-single-content > section:last-child::after,
.hlx-mobile-single-content > .hlx-full-specs:last-child::after,
.hlx-mobile-single-content > .hlx-mobile-gallery:last-child::after {
	display: none;
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 767px) {

	.hlx-mobile-single-content > section,
	.hlx-mobile-single-content > .hlx-full-specs,
	.hlx-mobile-single-content > .hlx-mobile-hero,
	.hlx-mobile-single-content > .hlx-quick-verdict,
	.hlx-mobile-single-content > .hlx-pros-cons,
	.hlx-mobile-single-content > .hlx-mobile-toc,
	.hlx-mobile-single-content > .hlx-mobile-gallery {

		margin-bottom: 32px;
		padding-bottom: 32px;
	}


	.hlx-mobile-single-content > section::after,
	.hlx-mobile-single-content > .hlx-full-specs::after,
	.hlx-mobile-single-content > .hlx-mobile-hero::after,
	.hlx-mobile-single-content > .hlx-quick-verdict::after,
	.hlx-mobile-single-content > .hlx-pros-cons::after,
	.hlx-mobile-single-content > .hlx-mobile-toc::after,
	.hlx-mobile-single-content > .hlx-mobile-gallery::after {

		left: 3%;
		right: 3%;
	}
}