/*
 * Peloo Store app shell for the web storefront on phones.
 *
 * On a phone-width screen the storefront should look and move like the
 * Peloo Store app (E:/SB/Peloo Store, lib/theme/app_theme.dart and
 * screens/home_shell.dart): white app bars, an icon-only bottom tab bar,
 * flat cards with hairline borders, Material Symbols icons. Every rule that
 * changes layout lives under the phone media query, so desktop is untouched.
 * Pages opt in by including this file plus app-shell.js.
 */

:root {
  --pa-primary: #FF5722;
  --pa-primary-dark: #E64A19;
  --pa-accent: #FF9800;
  --pa-success: #2E7D32;
  --pa-warning: #F9A825;
  --pa-danger: #D32F2F;
  --pa-info: #0288D1;
  --pa-bg: #F5F5F7;
  --pa-surface: #FFFFFF;
  --pa-border: #E4E4E7;
  --pa-text: #18181B;
  --pa-text-2: #52525B;
  --pa-muted: #9CA3AF;
  --pa-star: #FFB300;
  --pa-verified: #1D9BF0;
  --pa-input: #F1F1F4;
  --pa-nav-h: 56px;
  --pa-safe-b: env(safe-area-inset-bottom, 0px);
}

/* Material Symbols Rounded — the app uses Material Icons (rounded/outlined).
   FILL 0 = outlined, FILL 1 = the selected/filled variant. */
.pa-i {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  vertical-align: middle;
  /* Until the font arrives the ligature name would show as text. */
  overflow: hidden;
  width: 1em;
}
.pa-i.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Where the app look applies:
   - existing storefront pages: phones only (their desktop layout stays);
   - pages that only exist in the app's form (Bag, Messages, Profile) mount
     with { always: true } -> body.pa-always, and on desktop show the same
     app layout in a centred phone-width column.
   Component styles below are global — they only ever appear inside
   phone-only markup or on pa-always pages. */
@media (min-width: 769px) {
  body:not(.pa-always) .pa-only-phone { display: none !important; }
  body.pa-always { max-width: 600px; margin: 0 auto !important; box-shadow: 0 0 0 1px var(--pa-border); min-height: 100vh; }
  body.pa-always .pa-nav { max-width: 600px; margin: 0 auto; }
  body.pa-always .pa-snack { max-width: 576px; margin: 0 auto; }
  body.pa-always .pa-sheet { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .pa-hide-phone { display: none !important; }
  body.pa-app {
    background: var(--pa-bg) !important;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--pa-text);
  }
  body.pa-has-nav { padding-bottom: calc(var(--pa-nav-h) + var(--pa-safe-b)); }
}
body.pa-always.pa-app {
  background: var(--pa-bg) !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--pa-text);
  margin: 0;
}
body.pa-always.pa-has-nav { padding-bottom: calc(var(--pa-nav-h) + var(--pa-safe-b)); }

/* ═══════════ Components ═══════════ */

  /* ── App bar (AppBarTheme: white, elevation 0, title 18/600 left) ── */
  .pa-appbar {
    position: sticky; top: 0; z-index: 900;
    height: 56px; display: flex; align-items: center; gap: 2px;
    padding: 0 4px 0 4px;
    background: var(--pa-surface); color: var(--pa-text);
    transition: box-shadow .15s;
  }
  .pa-appbar.scrolled { box-shadow: 0 0.5px 0 var(--pa-border), 0 1px 2px rgba(0,0,0,0.04); }
  .pa-appbar .pa-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }
  .pa-appbar .pa-title.big { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
  .pa-appbar .pa-title.wordmark { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; flex: 0 0 auto; }
  .pa-appbar .pa-back + .pa-title { padding-left: 4px; }
  .pa-iconbtn {
    position: relative; width: 48px; height: 48px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--pa-text); border-radius: 50%;
    cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .pa-iconbtn:active { background: rgba(0,0,0,0.06); }
  .pa-spacer { flex: 1; }

  /* ── Count badges (_Badged in home_shell.dart / feed bell) ── */
  .pa-badge {
    position: absolute; top: 6px; right: 4px;
    min-width: 17px; padding: 1.5px 5px; border-radius: 20px;
    background: var(--pa-primary); color: #fff; border: 1.5px solid var(--pa-surface);
    font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center;
    font-family: Roboto, -apple-system, sans-serif;
  }
  .pa-badge.danger { background: var(--pa-danger); }
  .pa-badge:empty, .pa-badge[data-n="0"] { display: none; }

  /* ── Bottom tab bar (icon-only, 5 tabs, iconSize 26) ── */
  .pa-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    height: calc(var(--pa-nav-h) + var(--pa-safe-b)); padding-bottom: var(--pa-safe-b);
    display: flex; background: var(--pa-surface); border-top: 1px solid var(--pa-border);
  }
  .pa-nav a {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--pa-muted); text-decoration: none; position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .pa-nav a .pa-i { font-size: 26px; }
  .pa-nav a.active { color: var(--pa-primary); }
  .pa-nav a .pa-badge { top: 8px; right: calc(50% - 22px); }

  /* ── Snackbar (floating, radius 12, #27272A) ── */
  .pa-snack {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(var(--pa-nav-h) + var(--pa-safe-b) + 10px);
    z-index: 1200; display: flex; align-items: center; gap: 12px;
    background: #27272A; color: #fff; border-radius: 12px; padding: 14px 16px;
    font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .2s;
  }
  body:not(.pa-has-nav) .pa-snack { bottom: calc(var(--pa-safe-b) + 12px); }
  .pa-snack.show { transform: none; opacity: 1; pointer-events: auto; }
  .pa-snack.error { background: var(--pa-danger); }
  .pa-snack .pa-snack-msg { flex: 1; }
  .pa-snack button { background: none; border: none; color: #FFB59D; font-weight: 600; font-size: 14px; padding: 0; }

  /* ── Bottom sheet (white, top radius 20, hand-drawn 38x4 handle) ── */
  .pa-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .pa-sheet-backdrop.show { opacity: 1; pointer-events: auto; }
  .pa-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101;
    background: var(--pa-surface); border-radius: 20px 20px 0 0;
    padding: 0 0 calc(12px + var(--pa-safe-b)); max-height: 90vh; overflow-y: auto;
    transform: translateY(100%); visibility: hidden; transition: transform .22s ease-out, visibility 0s linear .22s;
  }
  .pa-sheet.show { transform: none; visibility: visible; transition: transform .22s ease-out; }
  .pa-sheet .pa-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(156,163,175,0.4); margin: 10px auto; }
  .pa-sheet .pa-sheet-title { font-size: 16px; font-weight: 700; padding: 8px 18px 8px; }
  .pa-tile { display: flex; align-items: center; gap: 16px; padding: 12px 18px; font-size: 14.5px; color: var(--pa-text); text-decoration: none; background: none; border: none; width: 100%; text-align: left; }
  .pa-tile:active { background: rgba(0,0,0,0.04); }
  .pa-tile .pa-i { color: var(--pa-primary); font-size: 21px; }
  .pa-tile.danger, .pa-tile.danger .pa-i { color: var(--pa-danger); }
  .pa-tile .pa-tile-trail { margin-left: auto; color: var(--pa-muted); font-size: 13px; }
  .pa-sheet hr { border: none; border-top: 1px solid var(--pa-border); margin: 6px 0; }

  /* ── Buttons (ElevatedButton / OutlinedButton themes) ── */
  .pa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 20px; border-radius: 12px;
    background: var(--pa-primary); color: #fff; border: none;
    font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
    font-family: inherit;
  }
  .pa-btn.outline { background: var(--pa-surface); color: var(--pa-text); border: 1px solid var(--pa-border); }
  .pa-btn.stadium { border-radius: 999px; }
  .pa-btn.sm { min-height: 38px; font-size: 13.5px; padding: 0 14px; }
  .pa-btn.block { width: 100%; }
  .pa-btn:disabled { opacity: .5; }

  /* ── Empty state (states.dart EmptyState) ── */
  .pa-empty { text-align: center; padding: 48px 32px; }
  .pa-empty .pa-empty-icon { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,87,34,0.08); color: var(--pa-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
  .pa-empty .pa-empty-icon .pa-i { font-size: 38px; }
  .pa-empty h3 { font-size: 17px; font-weight: 600; color: var(--pa-text); margin-bottom: 7px; }
  .pa-empty p { font-size: 14px; color: var(--pa-text-2); line-height: 1.4; margin-bottom: 22px; }

  /* ── Spinner (CircularProgressIndicator in primary) ── */
  .pa-spinner { width: 22px; height: 22px; border: 2.4px solid rgba(255,87,34,0.2); border-top-color: var(--pa-primary); border-radius: 50%; animation: pa-spin .8s linear infinite; margin: 24px auto; }
  @keyframes pa-spin { to { transform: rotate(360deg); } }

  /* ── Store avatar with the story ring (network_image.dart StoreAvatar) ── */
  .pa-avatar { position: relative; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
  .pa-avatar.ring { padding: 2px; background: linear-gradient(135deg, #FF9800, #FF5722, #D81B60); }
  .pa-avatar .pa-avatar-in { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #FF5722, #FF9800); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .pa-avatar.ring .pa-avatar-in { border: 2px solid var(--pa-surface); }
  .pa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ── Section header (states.dart SectionHeader) ── */
  .pa-section-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 6px 8px 14px; font-size: 16px; font-weight: 700; }
  .pa-section-h a { font-size: 13.5px; color: var(--pa-primary); font-weight: 500; padding: 4px 8px; text-decoration: none; }

  /* ── Photo tile grid (photo_tile.dart; 3-up, 1.5px gutters) ── */
  .pa-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; padding: 1.5px; }
  .pa-tile3 { position: relative; aspect-ratio: 1; overflow: hidden; background: #EDEDF0; display: block; }
  .pa-tile3 img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pa-tile3 .pa-tile3-multi { position: absolute; top: 5px; right: 5px; color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  .pa-tile3 .pa-tile3-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 5px 4px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; display: flex; align-items: center; gap: 4px; }
  .pa-tile3 .pa-tile3-price { font-size: 10.5px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-tile3 .pa-tile3-likes { font-size: 9.5px; display: flex; align-items: center; gap: 1px; }
  .pa-tile3 .pa-tile3-likes .pa-i { font-size: 9px; }
  .pa-tile3 .pa-tile3-sold { position: absolute; inset: 0; background: rgba(0,0,0,0.45); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .pa-tile3 .pa-tile3-badge { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.55); color: #fff; border-radius: 4px; font-size: 8px; font-weight: 700; padding: 2px 4px; display: flex; align-items: center; gap: 2px; }
  .pa-tile3 .pa-tile3-badge .pa-i { font-size: 9px; }

  /* ── Tabs (TabBar: label P, indicator P, unselected muted, 13.5/600) ── */
  .pa-tabs { display: flex; background: var(--pa-surface); border-bottom: 1px solid var(--pa-border); position: relative; }
  .pa-tabs > * { flex: 1; text-align: center; padding: 13px 4px 12px; font-size: 13.5px; font-weight: 600; color: var(--pa-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; font-family: inherit; }
  .pa-tabs > .active { color: var(--pa-primary); border-bottom-color: var(--pa-primary); }