/* Customer Services page (v6): header location, popular rail, category chips, mosaic tiles.
   Motion is transform/opacity only; tile reveals use scroll-driven timelines (no JS, no load-time blink). */

.svc5 {
  --svc5-red: #e11d48;
  --svc5-red-deep: #c8102e;
  --svc5-card: #fff;
  --svc5-line: rgba(15, 23, 42, 0.07);
  --svc5-shadow: 0 14px 34px -18px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.05);
  --svc5-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

/* ---------- Header: title + tappable location ---------- */
.svc5-top { gap: 10px; padding-bottom: 10px; }
.svc5-top-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.svc5-top .svc-page-title {
  flex: none;
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-align: left;
}
.svc5-loc-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 22px;
  margin: 0 0 0 -2px;
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;
}
.svc5-loc-line:active { transform: scale(0.96); color: var(--ink); }
.svc5-loc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc5-loc-chev { flex-shrink: 0; opacity: 0.7; }
.svc5-loc-dot {
  position: relative;
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
}
.svc5-loc-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.5);
  animation: svc5-ping 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes svc5-ping {
  0% { transform: scale(0.5); opacity: 1; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Popular rail ---------- */
.svc5 .svc-popular-block { padding: 8px 0 6px; }
.svc5 .svc-popular-head { align-items: center; padding-bottom: 12px; }
.svc5 .svc-popular-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 900;
}
.svc5-title-ico { font-size: 17px; line-height: 1; }
.svc5 .svc-popular-sub {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}
.svc5 .svc-popular-rail {
  gap: 12px;
  padding: 2px var(--pad) 18px;
  scroll-padding-inline: var(--pad);
}
.svc5 .svc-popular-card {
  flex: 0 0 150px;
  height: 200px;
  border-radius: 24px;
  background: #d9d4ce;
  box-shadow: 0 18px 32px -18px rgba(15, 23, 42, 0.55);
  transition: transform 180ms var(--svc5-ease);
}
.svc5 .svc-popular-card::after { display: none; }
.svc5 .svc-popular-card img { transition: transform 420ms var(--svc5-ease); }
.svc5 .svc-popular-card:active { transform: scale(0.965); }
.svc5 .svc-popular-card:active img { transform: scale(1.06); }
.svc5 .svc-popular-card.is-live { box-shadow: 0 18px 32px -18px rgba(22, 163, 74, 0.6), 0 0 0 1.5px rgba(34, 197, 94, 0.55); }
.svc5 .svc-popular-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(10, 6, 8, 0.78) 100%);
}
.svc5-pop-live {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px 0 7px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.5);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.svc5-pop-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
}
.svc5-pop-foot {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.svc5-pop-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.svc5 .svc5-pop-foot .svc-popular-name {
  position: static;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.svc5-pop-meta {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc5-pop-go {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--svc5-red-deep);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* ---------- Search + categories ---------- */
.svc5 .svc-search {
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--svc5-line);
  box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.35);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.svc5 .svc-search:focus-within {
  border-color: rgba(225, 29, 72, 0.4);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12), 0 10px 26px -16px rgba(15, 23, 42, 0.35);
}
.svc5 .chips.svc-cat-rail--text .chip.svc-cat-text {
  gap: 6px;
  height: 40px;
  max-width: none;
  padding: 0 12px 0 10px;
  font-size: 12.5px;
}
.svc5-chip-ico { font-size: 15px; line-height: 1; }
.svc5-chip-label { white-space: nowrap; }
.svc5-chip-n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.1);
  color: var(--svc5-red-deep);
  font-size: 10.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, color 200ms ease;
}
.svc5 .chips.svc-cat-rail--text .chip.svc-cat-text.on .svc5-chip-n {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.svc5 .svc-meta-row { padding-top: 2px; }

/* ---------- Groups ---------- */
.svc5 .svc-group--mosaic {
  margin-bottom: 14px;
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.svc5 .svc-group-head--v4 {
  gap: 12px;
  padding: 16px var(--pad) 12px;
}
.svc5-group-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 14px;
  font-size: 21px;
  background: linear-gradient(145deg, #fff 0%, #ffe9ec 100%);
  box-shadow: 0 8px 18px -10px rgba(200, 16, 46, 0.45), inset 0 0 0 1px rgba(225, 29, 72, 0.1);
}
.svc5 .svc-group-title { font-size: 18px; font-weight: 900; letter-spacing: -0.035em; }
.svc5 .svc-group-pill {
  min-width: 30px;
  height: 30px;
  background: rgba(225, 29, 72, 0.08);
  box-shadow: none;
}

/* ---------- Tiles: full-bleed photo cards ---------- */
.svc5 .svc-card-page--v4 .svc-mosaic-grid { gap: 12px; }
.svc5 .svc-mosaic-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 24px;
  background: #e9e4de;
  box-shadow: var(--svc5-shadow);
  text-align: left;
  animation: none;
  will-change: auto;
  transition: transform 170ms var(--svc5-ease);
  -webkit-tap-highlight-color: transparent;
}
.svc5 .svc-mosaic-tile:active { transform: scale(0.965); box-shadow: var(--svc5-shadow); }
.svc5 .svc-mosaic-media {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: linear-gradient(145deg, #f4f1ee, #e6e1dc);
}
.svc5 .svc-mosaic-media img { transition: transform 460ms var(--svc5-ease); }
.svc5 .svc-mosaic-tile:active .svc-mosaic-media img { transform: scale(1.07); }
.svc5 .svc-mosaic-scrim {
  background: linear-gradient(180deg, rgba(10, 6, 8, 0) 40%, rgba(10, 6, 8, 0.28) 62%, rgba(10, 6, 8, 0.8) 100%);
}
.svc5 .svc-mosaic-emoji { font-size: 44px; padding-bottom: 36px; }
.svc5 .svc-mosaic-chip {
  top: 10px; right: 10px;
  padding: 4px 9px;
  font-size: 9.5px;
  backdrop-filter: none;
}
.svc5 .svc-mosaic-live { top: 12px; left: 12px; bottom: auto; }
.svc5 .svc-mosaic-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 12px 46px 12px 12px;
}
.svc5 .svc-mosaic-name,
.svc5 .svc-mosaic-tile.is-near .svc-mosaic-name {
  color: #fff;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.svc5 .svc-mosaic-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}
.svc5-meta-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.svc5-meta-dot.is-on { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.28); }
.svc5-tile-go {
  position: absolute;
  right: 10px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--svc5-red-deep);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: transform 200ms var(--svc5-ease), background-color 200ms ease, color 200ms ease;
}
.svc5 .svc-mosaic-tile:active .svc5-tile-go {
  transform: translateX(2px);
  background: var(--svc5-red);
  color: #fff;
}
.svc5 .svc-mosaic-tile.is-near { box-shadow: var(--svc5-shadow), inset 0 0 0 2px rgba(74, 222, 128, 0.85); }
/* Odd-sized groups open with one wide feature tile so the grid never leaves a gap. */
@media (max-width: 419px) {
  .svc5 .svc-mosaic-grid > .svc-mosaic-tile:first-child:nth-last-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
  .svc5 .svc-mosaic-grid > .svc-mosaic-tile:first-child:nth-last-child(odd):not(:only-child) .svc-mosaic-name { font-size: 18px; }
  .svc5 .svc-mosaic-grid > .svc-mosaic-tile:first-child:nth-last-child(odd):not(:only-child) .svc-mosaic-body { padding: 14px 54px 14px 14px; }
}

/* ---------- Empty state ---------- */
.svc5 .svc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px var(--pad) 28px;
  text-align: center;
}
.svc5 .svc-empty.hidden { display: none; }
.svc5-empty-ico {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 22px;
  font-size: 28px;
  background: linear-gradient(145deg, #fff, #ffe9ec);
  box-shadow: 0 12px 26px -14px rgba(200, 16, 46, 0.5);
}
.svc5 .svc-empty p { margin: 4px 0 6px; line-height: 1.4; }
.svc5 .svc-empty small { color: var(--mute); font-weight: 600; }

/* ---------- Scroll-driven motion (compositor only) ---------- */
@supports (animation-timeline: view()) {
  .svc5 .svc-mosaic-tile {
    animation: svc5-tile-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .svc5 .svc-popular-card {
    animation: svc5-pop-in linear both;
    animation-timeline: view(inline);
    animation-range: entry 0% entry 90%;
  }
  .svc5 .svc5-group-ico {
    animation: svc5-ico-pop linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 80%;
  }
  html.native-shell .svc5 .svc-mosaic-tile {
    animation: svc5-tile-rise linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 55% !important;
  }
}
/* Individual translate / scale / rotate so :active transform presses still work on top. */
@keyframes svc5-tile-rise {
  from { opacity: 0.001; translate: 0 22px; scale: 0.96; }
  to { opacity: 1; translate: none; scale: none; }
}
@keyframes svc5-pop-in {
  from { opacity: 0.4; scale: 0.88; }
  to { opacity: 1; scale: none; }
}
@keyframes svc5-ico-pop {
  from { scale: 0.7; rotate: -8deg; }
  to { scale: none; rotate: none; }
}

/* Category jump highlight */
.svc5 .svc-group--flash .svc5-group-ico { animation: svc5-flash 720ms var(--svc5-ease); }
@keyframes svc5-flash {
  40% { scale: 1.14; box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.16); }
}

/* ---------- Dark ---------- */
html[data-theme="dark"] .svc5 {
  --svc5-card: #1b1b22;
  --svc5-line: rgba(255, 255, 255, 0.07);
  --svc5-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
html[data-theme="dark"] .svc5 .svc-mosaic-tile { background: #25252d; }
html[data-theme="dark"] .svc5 .svc-mosaic-media { background: linear-gradient(145deg, #2a2a33, #1f1f26); }
html[data-theme="dark"] .svc5 .svc-mosaic-tile.is-near { box-shadow: var(--svc5-shadow), inset 0 0 0 2px rgba(74, 222, 128, 0.7); }
html[data-theme="dark"] .svc5-tile-go { background: #f1f1f5; color: #e11d48; }
html[data-theme="dark"] .svc5-group-ico,
html[data-theme="dark"] .svc5-empty-ico {
  background: linear-gradient(145deg, #25252d, #2d1a20);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 122, 140, 0.14);
}
html[data-theme="dark"] .svc5 .svc-group-pill { background: rgba(255, 122, 140, 0.12); color: #ff8fa0; }
html[data-theme="dark"] .svc5-chip-n { background: rgba(255, 122, 140, 0.14); color: #ff8fa0; }
html[data-theme="dark"] .svc5 .svc-search { border-color: var(--svc5-line); }
html[data-theme="dark"] .svc5 .svc-popular-card { background: #25252d; }
html[data-theme="dark"] .svc5-pop-go { background: #f1f1f5; }

/* ---------- APK / low-end + reduced motion ---------- */
html.native-shell .svc5 .svc-mosaic-tile { box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.45); }
html.native-shell[data-theme="dark"] .svc5 .svc-mosaic-tile { box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.85); }
html.native-shell .svc5 .svc-mosaic-tile.is-near { box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.45), inset 0 0 0 2px rgba(74, 222, 128, 0.8); }
@media (prefers-reduced-motion: reduce) {
  .svc5-loc-dot::after,
  .svc5 .svc-mosaic-tile,
  .svc5 .svc-popular-card,
  .svc5 .svc5-group-ico { animation: none !important; }
}