/* =====================================================================
   Carta — new storefront (update-31). Loaded after carta.css only when ui_theme = v2.
   Same Carta system (ink / ivory card face / card red, Lalezar + IBM Plex Sans Arabic);
   this file adds the new blocks and tightens rhythm. Every rule is scoped (.ui-v2 / .v2-*),
   so switching back to the classic look leaves no trace.
   ===================================================================== */

:root {
  --m-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.8l8.5 6.7'/%3E%3Cpath d='M5.5 9v10.2c0 .6.4 1 1 1h3.8v-5.6h3.4v5.6h3.8c.6 0 1-.4 1-1V9'/%3E%3C/svg%3E");
  --m-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c3.9 0 6.5-2.6 6.5-6.2 0-3.9-2.8-6-4.2-8.8-.4 2.2-1.6 3.4-2.9 4.1C11.6 7.3 10.5 4.9 8.6 3c.2 3.3-3.1 5.6-3.1 10.3C5.5 17.9 8.1 21 12 21z'/%3E%3Cpath d='M12 21c-1.7 0-2.9-1.2-2.9-2.9 0-2 1.6-2.8 2.2-4.4.9 1 3.6 2.3 3.6 4.5 0 1.6-1.2 2.8-2.9 2.8z'/%3E%3C/svg%3E");
  --m-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.4'/%3E%3Ccircle cx='17' cy='17' r='2.4'/%3E%3C/svg%3E");
  --v2-tabbar-h: 62px;
  --v2-gold: #C9A85C;
}
.ct-ico--home { --m: var(--m-home); }
.ct-ico--flame { --m: var(--m-flame); }
.ct-ico--percent { --m: var(--m-percent); }

/* ---------- top bars ---------- */
.v2-announce { background: var(--red); color: var(--on-red); font-size: 14px; line-height: 20px; font-weight: 600; }
.v2-announce .ct-container { display: flex; justify-content: center; padding-block: 8px; text-align: center; }
.v2-announce a { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.v2-announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2-previewbar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6px 16px; background: var(--card-face); color: var(--card-ink); font-size: 13px; font-weight: 600; }
.v2-previewbar a { color: var(--red); }

/* ---------- header: sticky, translucent, chip-style section links ---------- */
.ui-v2 .ct-header { position: sticky; top: 0; z-index: 30; background: rgba(18, 18, 22, .88); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
.ui-v2 .ct-navdrawer { z-index: 60; }
.ui-v2 .ct-subnav { border-top-color: transparent; }
.ui-v2 .ct-subnav .ct-nav { gap: 8px; padding-block: 0 10px; }
.ui-v2 .ct-subnav .ct-nav a { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px; min-height: 36px; white-space: nowrap; color: var(--text-muted); }
.ui-v2 .ct-subnav .ct-nav a:hover { color: var(--text); border-color: var(--line-strong); }
.ui-v2 .ct-subnav .ct-nav a[aria-current="page"] { color: var(--card-ink); background: var(--card-face); border-color: var(--card-face); box-shadow: none; }

/* ---------- section scaffolding ---------- */
.v2-block { padding-block: var(--space-6) var(--space-8); }
.v2-block--tight { padding-block: var(--space-4); }
.v2-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.v2-head h2, .v2-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 36px; text-wrap: balance; }
.v2-head h1 { font-size: 34px; line-height: 44px; }
.v2-head h2 > .ct-ico, .v2-head h1 > .ct-ico { width: 22px; height: 22px; color: var(--red-text); }
.v2-head--page { margin-bottom: var(--space-4); }
.v2-sub { margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--text-muted); font-size: 14px; }
.v2-more { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 2px; }
.v2-more:hover { color: var(--text); }
html[dir="ltr"] .v2-more .ct-ico { transform: scaleX(-1); }

/* ---------- hero ---------- */
.v2-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-8); align-items: center; padding-block: var(--space-12) var(--space-8); }
.v2-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 68px; text-wrap: balance; }
.v2-hero__lead { margin-top: var(--space-3); max-width: 34em; color: var(--text-muted); font-size: 17px; line-height: 30px; }
.v2-hero__search { margin-top: var(--space-6); max-width: 560px; }
.v2-hero__fan { min-height: 340px; }
.v2-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-5); }
.v2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.v2-chip:hover { border-color: var(--line-strong); }
.v2-chip[aria-current="page"] { background: var(--card-face); color: var(--card-ink); border-color: var(--card-face); }
.v2-chips--bar { margin: 0 0 var(--space-6); }

/* ---------- popular games: round brand marks ---------- */
.v2-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 124px)); justify-content: center; gap: var(--space-5) var(--space-3); }
/* one line only: carta.js hides the games that would start a second line (phones swipe instead) */
.v2-brands > [data-v2-off] { display: none; }
.v2-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text); min-width: 0; }
.v2-brand__img { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-raised); border: 2px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transition: transform .18s ease, border-color .18s ease; font-family: var(--font-display); font-size: 30px; color: var(--text-muted); }
.v2-brand__img img { width: 100%; height: 100%; object-fit: cover; }
.v2-brand:hover .v2-brand__img, .v2-brand:focus-visible .v2-brand__img { transform: translateY(-3px); border-color: var(--red); }
.v2-brand b { font-size: 13px; line-height: 18px; font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- trust + payment strip ---------- */
.v2-trust { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.v2-trust__pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.v2-trust__pts li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.v2-trust__pts .ct-ico { flex: none; width: 22px; height: 22px; color: var(--red-text); margin-top: 2px; }
.v2-trust__pts b { display: block; font-size: 15px; line-height: 22px; }
.v2-trust__pts small { display: block; color: var(--text-muted); font-size: 13px; line-height: 20px; }
.v2-trust__pay { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.v2-paylogos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v2-paylogos img { width: 64px; height: 32px; object-fit: contain; background: #FFFFFF; border-radius: 6px; padding: 3px 5px; box-sizing: content-box; }
.v2-paylogos--sm img { width: 48px; height: 24px; padding: 2px 4px; }
.v2-paychip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--line); font-size: 12px; font-weight: 600; }

/* ---------- product rows: grid on desktop, swipe row on phones ---------- */
.v2-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: var(--space-8) var(--space-6); justify-items: center; padding: 14px 16px 18px; }
/* desktop: carta.js keeps one full line of cards per section (the rest sits behind "See all") */
.v2-row > [data-v2-off] { display: none; }
.v2-ranked { position: relative; display: flex; justify-content: center; }
.v2-rank { position: absolute; z-index: 5; top: -14px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px; display: grid; place-items: center; background: var(--red); color: var(--on-red); font-family: var(--font-display); font-size: 20px; line-height: 1; box-shadow: 0 0 0 3px var(--bg), 0 6px 14px rgba(0, 0, 0, .4); }
.v2-block--best { position: relative; isolation: isolate; }
.v2-block--best::before { content: ""; position: absolute; inset: 0 var(--space-4); z-index: -1; border-radius: 24px; background: radial-gradient(120% 90% at 100% 0%, rgba(208, 2, 27, .16), transparent 60%), var(--surface); border: 1px solid var(--line); }
.v2-block--best { padding: var(--space-8) calc(var(--space-8) + var(--space-4)); margin-block: var(--space-6); }
.v2-sections { padding-bottom: var(--space-4); }

/* ---------- product page extras ---------- */
.v2-payline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-related { margin-top: var(--space-12); }

/* ---------- search page ---------- */
.v2-searchchips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--space-6); }
.v2-chip small { font-weight: 500; opacity: .7; }
.v2-popular { margin-top: var(--space-6); }
.v2-popular h2 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 var(--space-3); }

/* ---------- footer ---------- */
.v2-footpay { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-block: 0 var(--space-6); }
.v2-footpay > span { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- links that are controls: no underline ---------- */
.ct-root a.v2-chip, .ct-root a.v2-brand, .ct-root a.v2-more, .v2-tabbar a { text-decoration: none; }

/* ---------- shared page polish ---------- */
.ui-v2 .ct-crumbs { padding-block: var(--space-4); }
.ui-v2 .ct-panel { border-radius: var(--radius-lg); }
.ui-v2 .ct-footer { margin-top: var(--space-12); }
.ui-v2 .ct-btn:focus-visible, .v2-chip:focus-visible, .v2-brand:focus-visible, .v2-tabbar a:focus-visible, .v2-tabbar button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- phone tab bar ---------- */
.v2-tabbar { display: none; }
@media (max-width: 880px) {
  .v2-tabbar { position: fixed; z-index: 35; inset-inline: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(29, 29, 35, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .v2-tabbar a, .v2-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; border: 0; background: none; border-radius: 12px; color: var(--text-muted); font: inherit; font-size: 11px; line-height: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .v2-tabbar .ct-ico { width: 22px; height: 22px; }
  .v2-tabbar [aria-current="page"] { color: var(--text); }
  .v2-tabbar [aria-current="page"] .ct-ico { color: var(--red-text); }
  .v2-tabbar__ico { position: relative; display: inline-flex; }
  .v2-tabbar__n { position: absolute; top: -6px; inset-inline-end: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: var(--on-red); font-size: 11px; line-height: 18px; text-align: center; }
  .ui-v2 { padding-bottom: calc(var(--v2-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .ui-v2 .ct-fab { bottom: calc(var(--v2-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
  .ui-v2 .ct-fab__btn { min-height: 48px; padding: 0 14px; }
  .ui-v2 .ct-fab__btn span { display: none; }
  /* the tab bar already has cart + account; keep the header to logo · search · language */
  .ui-v2 .ct-header__end .ct-cart, .ui-v2 .ct-header__end > .ct-btn--secondary[href$="/login"] { display: none; }
  /* buy bar stays in reach while choosing an amount */
  .ui-v2 .ct-pricebar { position: sticky; z-index: 6; bottom: calc(var(--v2-tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
  .ui-v2 .ct-pricebar { flex-wrap: nowrap; gap: 10px; padding: 10px 12px; }
  .ui-v2 .ct-pricebar > div:first-child { min-width: 0; }
  .ui-v2 .ct-pricebar .ct-buybtns { display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; width: auto; justify-content: flex-end; }
  .ui-v2 .ct-pricebar .ct-btn { flex: 0 1 auto; min-height: 46px; padding-inline: 14px; }
  .ui-v2 .ct-pricebar #cartBtn { flex: 0 0 46px; padding: 0; font-size: 0; gap: 0; justify-content: center; }
  .ui-v2 .ct-pricebar #cartBtn .ct-ico { width: 22px; height: 22px; }
  .ui-v2 .ct-pricebar .ct-price { font-size: 20px; line-height: 26px; }
  .v2-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8) var(--space-4); }
  .v2-hero__fan { display: none; }
  .v2-trust__pts { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
@media (max-width: 720px) {
  .v2-hero h1 { font-size: 38px; line-height: 50px; }
  .v2-hero__lead { font-size: 15px; line-height: 26px; }
  .v2-head h2 { font-size: 22px; line-height: 30px; }
  .v2-head h1 { font-size: 28px; line-height: 38px; }
  .v2-block { padding-block: var(--space-4) var(--space-6); }
  .v2-chips:not(.v2-chips--bar), .v2-chips--bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .v2-chips::-webkit-scrollbar { display: none; }
  /* swipe rows: two cards and a peek of the third */
  .v2-row { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: 12px var(--space-4) 6px; justify-items: initial; }
  .v2-row::-webkit-scrollbar { display: none; }
  .v2-row > .ct-pstack, .v2-row > .v2-ranked { flex: 0 0 44%; scroll-snap-align: start; }
  .v2-row .ct-pstack { width: 100%; max-width: none; }
  .v2-ranked > .ct-pstack { width: 100%; }
  .v2-rank { top: -12px; min-width: 28px; height: 28px; font-size: 17px; }
  .v2-block--best { padding: var(--space-6) var(--space-4); margin-inline: 0; }
  .v2-block--best::before { inset: 0; border-radius: 0; border-inline: 0; }
  .v2-brands { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--space-3); margin-inline: calc(-1 * var(--space-4)); padding: 4px var(--space-4) 6px; }
  .v2-brands::-webkit-scrollbar { display: none; }
  .v2-brand { flex: 0 0 76px; }
  .v2-brand__img { width: 66px; height: 66px; }
  .v2-brand b { font-size: 12px; line-height: 16px; }
  .v2-trust { padding: var(--space-4); }
  .v2-paylogos img { width: 52px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-brand__img, .v2-chip { transition: none; }
  .v2-brand:hover .v2-brand__img { transform: none; }
}
.ct-root a.v2-more { color: var(--text-muted); }
.ct-root a.v2-more:hover { color: var(--text); }
.ct-root a.v2-brand { color: var(--text); }
@media (max-width: 880px) {
  /* the tab bar's "Account" replaces the header account menu on phones (the drawer keeps every link) */
  .ui-v2 .ct-header__end .ct-umenu { display: none; }
}
/* the header already lists the sections on wide screens */
@media (min-width: 881px) { .v2-hero .v2-chips { display: none; } }


/* ---------- update-34: payment strip, section grids with «عرض المزيد» ---------- */
.v2-paystrip { margin-block: var(--space-2) var(--space-4); background: linear-gradient(90deg, transparent, var(--surface) 12%, var(--surface) 88%, transparent); border-block: 1px solid var(--line); }
.v2-paystrip__in { display: flex; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; padding-block: var(--space-4); text-align: center; }
.v2-paystrip__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.v2-paystrip__label .ct-ico { color: var(--red-text); }
.v2-paystrip .v2-paylogos { justify-content: center; gap: 10px; }
.v2-paystrip .v2-paylogos img { width: 72px; height: 36px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.v2-grid { padding: 14px 16px 6px; }
.v2-moreline { display: flex; justify-content: center; margin-top: var(--space-6); }
@media (max-width: 720px) {
  .v2-paystrip { background: var(--surface); }
  .v2-paystrip__in { flex-direction: column; gap: var(--space-2); padding-block: var(--space-3); }
  /* one line: centred when the logos fit, a swipe line when there are more */
  .v2-paystrip .v2-paylogos { gap: 8px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px 0 4px; }
  .v2-paystrip .v2-paylogos::-webkit-scrollbar { display: none; }
  .v2-paystrip .v2-paylogos > :first-child { margin-inline-start: auto; }
  .v2-paystrip .v2-paylogos > :last-child { margin-inline-end: auto; }
  .v2-paystrip .v2-paylogos img { flex: none; width: 44px; height: 22px; padding: 2px 4px; border-radius: 6px; }
  .v2-paystrip .v2-paychip { flex: none; }
  /* phones: a section stays a swipe row of the owner's number of cards; «عرض المزيد» adds the rest to the same row */
  .ct-grid.v2-grid { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: 12px var(--space-4) 6px; }
  .ct-grid.v2-grid::-webkit-scrollbar { display: none; }
  .v2-grid .ct-pstack { flex: 0 0 44%; width: 100%; max-width: none; scroll-snap-align: start; }
  .v2-moreline { margin-top: var(--space-3); }
}