/* =============================================================
   Lap N Tab Mart — Base styles
   Premium technology palette + Sora (headings) / Inter (body) typography.
   Colors are overridden live by inc/customizer.php CSS variables.
============================================================= */

:root {
	--color-dark: #0B0D10;
	--color-surface: #12151A;
	--color-primary: #0B5FFF;      /* electric blue */
	--color-accent: #22D3EE;       /* cyan */
	--color-sale: #FF5A1F;
	--color-white: #FFFFFF;
	--color-muted: #9CA3AF;
	--color-text: #171A1F;
	--color-border: #E7E9EE;
	--color-bg: #FFFFFF;
	--color-bg-soft: #F6F7F9;
	--color-green: #16A34A;

	--radius: 16px;
	--radius-sm: 10px;
	--shadow-sm: 0 2px 10px rgba(11, 13, 16, 0.06);
	--shadow-md: 0 10px 28px rgba(11, 13, 16, 0.10);
	--shadow-lg: 0 20px 50px rgba(11, 13, 16, 0.18);

	--container: 1360px;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-heading: 'Sora', 'Inter', system-ui, sans-serif;

	--ease: cubic-bezier(.4,0,.2,1);
	--speed-fast: 220ms;
	--speed-med: 320ms;
	--speed-hero: 750ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.full-bleed { width: 100%; }
.text-accent { color: var(--color-primary); }

/* Standard WordPress a11y utility — visually hides content while keeping
   it available to screen readers / keyboard focus (e.g. our hidden
   fallback "Update cart" submit button on the Cart page). */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important; clip-path: none;
	color: #21759b; display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal;
	padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* Prevents child sections' top/bottom margins (e.g. `section.container { margin: 72px auto }`
   below) from "collapsing" through <main> and making it report a much smaller height than
   its visible content — which was pushing the footer up to overlap page content. */
.site-main { display: flow-root; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; margin: 0 0 .5em; letter-spacing: -0.01em; color: var(--color-dark); line-height: 1.15; }

.eyebrow { font-family: var(--font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--color-primary); text-transform: uppercase; margin: 0 0 10px; }
.eyebrow--center { text-align: center; }
.section-title--plain { font-size: 30px; margin: 0 0 6px; }
.section-title--center { font-size: 34px; text-align: center; margin: 0 auto 12px; max-width: 720px; }
.section-subtitle { color: var(--color-muted); margin: 0; font-size: 15px; }
.section-subtitle--center { color: var(--color-muted); text-align: center; max-width: 580px; margin: 0 auto 32px; }

section.container, section.full-bleed { margin: 72px auto; }
@media (max-width: 768px) { section.container, section.full-bleed { margin: 48px auto; } }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 15px;
	border: none; cursor: pointer; font-family: var(--font-heading);
	transition: transform var(--speed-fast) var(--ease), filter var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--color-dark); }
.btn--white:hover { transform: translateY(-2px); filter: brightness(0.97); }
.btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn--outline:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn--outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); }
.btn--dark { background: var(--color-dark); color: #fff; }
.btn--dark:hover { filter: brightness(1.3); transform: translateY(-2px); }
.pill { display: inline-block; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; padding: 7px 18px; border-radius: 999px; margin-bottom: 18px; }

/* ---------- Badges ---------- */
.badge { position: absolute; font-size: 10.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; z-index: 2; color: #fff; letter-spacing: .4px; text-transform: uppercase; }
.badge--bestseller { top: 12px; right: 12px; background: #F5A623; }
.badge--hot { top: 12px; right: 12px; background: var(--color-dark); }
.badge--new { top: 12px; right: 12px; background: var(--color-green); }
.badge--limited { top: 12px; right: 12px; background: #E11D48; }
.badge--percent { top: 12px; left: 12px; background: var(--color-sale); }
.badge--outofstock { top: 12px; left: 12px; background: var(--color-dark); }
.badge--prebooking { top: 12px; left: 12px; background: #7C3AED; }

/* ---------- WooCommerce star ratings (product cards, single product
   summary, reviews) — a real, self-contained implementation since this
   theme doesn't rely on WooCommerce's own bundled icon font. Renders
   real visual stars (including partial fills for fractional averages
   like 4.5) instead of falling back to raw "Rated X out of 5" text. ---------- */
.star-rating { position: relative; width: 5.4em; height: 1em; font-size: 15px; line-height: 1; overflow: hidden; display: inline-block; vertical-align: middle; }
.star-rating::before { content: '\2605\2605\2605\2605\2605'; position: absolute; top: 0; left: 0; color: #D9D9E3; letter-spacing: .12em; white-space: nowrap; }
.star-rating span { overflow: hidden; position: absolute; top: 0; left: 0; height: 0; padding-top: 1.5em; }
.star-rating span::before { content: '\2605\2605\2605\2605\2605'; position: absolute; top: 0; left: 0; color: #F5A623; letter-spacing: .12em; white-space: nowrap; }

/* ---------- SVG icon base ---------- */
.lntm-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }
.lntm-icon--star { fill: currentColor; stroke: currentColor; stroke-width: 1; }

/* ---------- Scroll reveal (respects prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
	[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
}

/* ---------- Skeleton / misc ---------- */
::selection { background: var(--color-primary); color: #fff; }