/*
 * Playgame Trade-In – responsive type scale.
 *
 * Loaded after the compiled app CSS. The app sizes almost all text and spacing
 * in rem, so adjusting the root size per screen width scales the whole layout
 * in proportion (text, padding, gaps) instead of only shrinking letters.
 * Percentages are used so a visitor's own browser text-size setting still works.
 * Form fields keep their fixed 16px so iPhones do not zoom in when typing.
 *
 * To tune: change the percentages below (100% = the original size).
 */

/* Small phones (iPhone SE, older Androids) */
html { font-size: 84.375%; }

/* Regular phones */
@media (min-width: 360px) { html { font-size: 87.5%; } }

/* Large phones */
@media (min-width: 412px) { html { font-size: 90.625%; } }

/* Small tablets / phones in landscape */
@media (min-width: 640px) { html { font-size: 93.75%; } }

/* Tablets: the 3-column layout starts here, so tighten again */
@media (min-width: 768px) { html { font-size: 84.375%; } }

/* Small laptops: full desktop layout on a narrow screen */
@media (min-width: 1024px) { html { font-size: 87.5%; } }

/* Regular laptops */
@media (min-width: 1280px) { html { font-size: 93.75%; } }

/* Large desktop: original size */
@media (min-width: 1536px) { html { font-size: 100%; } }

/* Headings: on phones the big display sizes are stepped down a little more than
   body text, so titles stop breaking into three or four lines. */
@media (max-width: 639.98px) {
	:root {
		--text-3xl: 1.7rem;
		--text-4xl: 2rem;
		--text-5xl: 2.4rem;
		--text-6xl: 2.8rem;
		--text-7xl: 3.2rem;
		--text-8xl: 3.75rem;
	}
}

/* Even line lengths in headings, no single orphan word in paragraphs. */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }

/* Micro labels were set as small as 5–7px, which is unreadable on a phone. */
.text-\[5px\], .text-\[6px\], .text-\[7px\] { font-size: 8px; }
.text-\[8px\] { font-size: 8.5px; }

/* Tablets: the top information bar has no room for both notices, so they wrapped
   onto three lines and were cut off. Show the first one only, on a single line. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.h-10.justify-between > .flex-1 > .uppercase { white-space: nowrap; font-size: 11px; }
	.h-10.justify-between > .flex-1 > .uppercase > :not(:first-child) { display: none; }
}

/* Laptops: the main menu has nine links plus the phone button and wrapped onto two
   lines (worst in Russian). Keep everything on one line with tighter spacing. */
@media (min-width: 1024px) and (max-width: 1535.98px) {
	nav .h-20.justify-between > .gap-12 { gap: 1.25rem; }
	nav .h-20.justify-between .lg\:flex.gap-7 { gap: 1rem; white-space: nowrap; }
	nav .h-20.justify-between > a.md\:flex { white-space: nowrap; flex-shrink: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
	nav .h-20.justify-between .lg\:flex.gap-7 { gap: 0.7rem; font-size: 12px; }
	nav .h-20.justify-between > a.md\:flex { padding-left: 0.9rem; padding-right: 0.9rem; font-size: 13px; }
}
/* Narrowest laptops: the call button keeps its icon and link, without the number. */
@media (min-width: 1024px) and (max-width: 1099.98px) {
	nav .h-20.justify-between > a.md\:flex .ltr-nums { display: none; }
}

/* Very small phones: let side-by-side buttons drop onto a second line instead of
   running off the edge of the card. */
@media (max-width: 399.98px) {
	.pt-1.flex.gap-3 { flex-wrap: wrap; }
}

/* ==========================================================================
   HERO ON PHONES: rating line + INSTANT / SAFE / FREE
   (style: minimal)
   The rating wording lives here; the app's own "30+ STORES • 3K+ REVIEWS" line
   is hidden. Layout rules come first, colours and surfaces after.
   ========================================================================== */

/* --- Rating: layout and wording ----------------------------------------- */
.lg\:hidden.absolute.top-24.right-4.z-40 > div { gap: 8px; align-items: center; }
.lg\:hidden.absolute.top-24.right-4.z-40 > div > div:first-child { width: 24px; height: 24px; padding: 5px; border: 0; border-radius: 999px; background: #fff; box-shadow: none !important; flex-shrink: 0; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col { flex-direction: row; align-items: center; gap: 8px; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child { gap: 4px; white-space: nowrap; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child > span { font-size: 13.5px; font-weight: 800; line-height: 1; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child > svg { display: none; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child::after { content: "★★★★★"; color: #FBBC05; margin-inline-start: 4px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; line-height: 1; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child { font-size: 0 !important; line-height: 1; padding-inline-start: 8px; border-inline-start: 1px solid; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child::after { content: "30+ Stores Across Dubai"; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; }
html[lang="ar"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child::after { content: "★★★★★"; color: #FBBC05; letter-spacing: 1.5px; }
html[lang="ar"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child::after { content: "أكثر من 30 فرعاً في دبي"; }
html[lang="ru"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child::after { content: "Отзывы Google"; }
html[lang="ru"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child::after { content: "30+ магазинов в Дубае"; }
html[lang="zh"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child::after { content: "谷歌评价"; }
html[lang="zh"] .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child::after { content: "迪拜30+门店"; }

/* Phones: centred, directly after the INSTANT / SAFE / FREE row, above the
   "Select device category" card. Anchored from the bottom of the hero so it is
   in the same place on every slide. Tablets keep it top-right. */
@media (max-width: 767.98px) {
	section.min-h-\[620px\] { min-height: 650px; }
	.lg\:hidden.absolute.top-24.right-4.z-40 { top: auto; bottom: calc(5rem + 16px); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
	.lg\:hidden.absolute.top-24.right-4.z-40 > div { pointer-events: auto; }
}
@media (max-width: 339.98px) {
	.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col { flex-direction: column; align-items: flex-start; gap: 3px; }
	.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* --- INSTANT / SAFE / FREE: layout --------------------------------------- */
@media (min-width: 768px) {
	section .grid.grid-cols-3.max-w-sm .md\:text-\[8px\] { font-size: 10px; }
	section .grid.grid-cols-3.max-w-sm .text-white\/50 { color: rgba(255, 255, 255, 0.86); }
}
@media (max-width: 767.98px) {
	section .grid.grid-cols-3.max-w-sm { max-width: none; }
	section .grid.grid-cols-3.max-w-sm .text-\[9px\] { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.15; margin-top: 3px; }
	section .grid.grid-cols-3.max-w-sm .text-\[5px\] { font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; margin-top: 3px; }
	section .grid.grid-cols-3.max-w-sm > div > div:first-child svg { width: 14px; height: 14px; }
}

/* --- Style: minimal -------------------------------------------------------
   No boxes. White text straight on the photo, thin dividers, one green accent.
   A soft dark fade at the bottom of the photo keeps the text readable. */
@media (max-width: 767.98px) {
	section .absolute.inset-0.bg-black\/10.lg\:hidden { background: linear-gradient(to bottom, rgba(0,0,20,0) 28%, rgba(0,0,20,0.38) 55%, rgba(0,0,20,0.72) 100%) !important; }
	section .grid.grid-cols-3.max-w-sm { gap: 0; }
	section .grid.grid-cols-3.max-w-sm > div { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-radius: 0; padding: 2px 6px; }
	section .grid.grid-cols-3.max-w-sm > div + div { border-inline-start: 1px solid rgba(255, 255, 255, 0.28) !important; }
	section .grid.grid-cols-3.max-w-sm > div > div:first-child { background: transparent !important; color: #00d500 !important; padding: 0; }
	section .grid.grid-cols-3.max-w-sm > div > div:first-child svg { width: 18px; height: 18px; }
	section .grid.grid-cols-3.max-w-sm .text-\[9px\] { color: #fff; }
	section .grid.grid-cols-3.max-w-sm .text-\[5px\] { color: rgba(255, 255, 255, 0.8) !important; }
	.lg\:hidden.absolute.top-24.right-4.z-40 > div { padding: 9px 0 0 !important; border-radius: 0 !important; border-width: 1px 0 0 0 !important; border-style: solid !important; border-color: rgba(255, 255, 255, 0.28) !important; }
}
.lg\:hidden.absolute.top-24.right-4.z-40 > div { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; text-shadow: 0 1px 10px rgba(0, 0, 20, 0.55); }
@media (min-width: 768px) { .lg\:hidden.absolute.top-24.right-4.z-40 > div { border: 0 !important; padding: 0 !important; } }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child > span, .lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:first-child::after { color: #fff !important; }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child { border-color: rgba(255, 255, 255, 0.4); }
.lg\:hidden.absolute.top-24.right-4.z-40 .flex-col > div:last-child::after { color: #fff; }

/* Narrow phones: big rounded buttons with long labels (e.g. Russian) ran past the
   screen edge. Trim their side padding and never let them exceed the screen. */
@media (max-width: 399.98px) {
	.group\/button.px-10 { padding-left: 1.5rem; padding-right: 1.5rem; max-width: 100%; }
	.group\/button.px-10.tracking-widest { letter-spacing: 0.06em; }
}

/* Phones, all hero slides: sit the headline and text (and the INSTANT / SAFE /
   FREE row where a slide has one) at the bottom of the photo, just above the
   rating line, instead of a fixed distance from the top. This keeps the same
   small gap on every slide and in every language.
   The app marks the first two slides with pt-80 and the third with pt-40. */
@media (max-width: 767.98px) {
	section.min-h-\[620px\].pt-80,
	section.min-h-\[620px\].pt-40 {
		align-items: flex-end;
		padding-top: 6rem;
		padding-bottom: calc(5rem + 12px);
	}
	/* The third slide has no feature row, so drop the reserved empty space
	   under its text. */
	section.min-h-\[620px\].pt-40 .min-h-\[180px\] { min-height: 0; }
	section.min-h-\[620px\].pt-40 { padding-bottom: calc(8rem + 12px); }
}

/* ==========================================================================
   ARABIC (right-to-left) FIXES
   ========================================================================== */

/* ROOT CAUSE of most Arabic layout faults: the app forces EVERY <span> on Arabic
   pages to left-to-right (it was meant only to keep phone numbers readable).
   That pushed the second line of headlines to the wrong side, put full stops
   and question marks at the wrong end, and reversed short phrases.
   Fix: spans follow their own content instead. Arabic text runs right-to-left,
   while a span holding only a number, phone or Latin word still reads
   left-to-right. Spans the app explicitly marks as numbers are left alone. */
html[dir="rtl"] .font-arabic span:not(.ltr-nums):not(.no-ltr) {
	direction: rtl !important;
	unicode-bidi: plaintext;
}

/* Letter-spacing pulls Arabic letters apart and breaks the joins between them.
   The app uses wide/tight tracking on most labels, so switch it off in Arabic. */
html[dir="rtl"] body * { letter-spacing: 0 !important; }

/* The app pins many blocks to "left" by name, which is the wrong side in Arabic
   (the hero headline and text are the most visible case). Mirror them. */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
@media (min-width: 768px) {
	html[dir="rtl"] .md\:text-left { text-align: right; }
}
@media (min-width: 1024px) {
	html[dir="rtl"] .lg\:text-left { text-align: right; }
	html[dir="rtl"] .lg\:text-right { text-align: left; }
}

/* Phone numbers, emails and codes must always read left-to-right. */
html[dir="rtl"] .ltr-nums,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* Arabic script has no italic form; slanted Arabic headings look broken. */
html[dir="rtl"] .italic, html[dir="rtl"] em, html[dir="rtl"] i { font-style: normal; }

/* "Sell your gadgets" photo block: the Google rating card is pinned top-right,
   which in Arabic is exactly where the green label and headline start, so it
   covered them. Move it to the top-left in Arabic. */
html[dir="rtl"] section.pt-16.overflow-hidden .absolute.top-5.right-5 { right: auto; left: 1.25rem; }
@media (min-width: 768px) {
	html[dir="rtl"] section.pt-16.overflow-hidden .absolute.top-5.right-5 { left: 2rem; }
}


/* ==========================================================================
   HAND-OVER FROM SERVER-RENDERED PAGE TO THE APP
   The server sends the finished page (see inc/prerender.php). When the app
   starts it redraws the same content, and its entry animations begin from
   invisible, which made the text blink. While <html> has "pg-handover" those
   starting states are shown at full strength, so the swap is not visible.
   i18n/seo-fix.js removes the class about a second after the app has started.
   ========================================================================== */
html.pg-handover #root [style*="opacity: 0"],
html.pg-handover #root [style*="opacity:0"] {
	opacity: 1 !important;
	transform: none !important;
}