/* 9Plus Mobile — Mobile Shop theme */
:root {
  --shop-ink: #061525;
  --shop-deep: #0A2540;
  --shop-brand: #1B6BFF;
  --shop-brand-2: #3D8BFF;
  --shop-soft: #E8F1FF;
  --shop-mint: #00D4A1;
  --shop-mint-deep: #00B288;
  --shop-coral: #FF5A3D;
  --shop-mist: #EEF3F8;
  --shop-line: #D5DEE8;
  --shop-text: #142033;
  --shop-muted: #5B6B7C;
  --shop-panel: #ffffff;
  --shop-radius: 1rem;
  --shop-shadow: 0 10px 30px -12px rgba(6, 21, 37, 0.28);
}

html {
  scroll-behavior: smooth;
}

body.shop-app {
  color: var(--shop-text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(27, 107, 255, 0.16), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(0, 212, 161, 0.12), transparent 50%),
    linear-gradient(180deg, #F3F7FB 0%, #E8EEF5 100%);
  min-height: 100vh;
}

/* Soft mesh behind app chrome */
.shop-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(27, 107, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 20%, rgba(0, 212, 161, 0.16), transparent 50%),
    linear-gradient(145deg, #061525 0%, #0A2540 55%, #0E3A66 100%);
}

.shop-panel {
  background: var(--shop-panel);
  border: 1px solid rgba(213, 222, 232, 0.9);
  border-radius: var(--shop-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, var(--shop-shadow);
}

.shop-card {
  background: var(--shop-panel);
  border: 1px solid var(--shop-line);
  border-radius: 1.15rem;
  box-shadow: 0 8px 24px -16px rgba(6, 21, 37, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.shop-card:hover,
.shop-card:active {
  transform: translateY(-2px);
  border-color: rgba(27, 107, 255, 0.35);
  box-shadow: 0 16px 36px -18px rgba(27, 107, 255, 0.45);
}

.shop-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--shop-soft), #fff);
  color: var(--shop-brand);
  border: 1px solid rgba(27, 107, 255, 0.12);
}

.shop-btn {
  background: linear-gradient(135deg, var(--shop-brand) 0%, var(--shop-brand-2) 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 0.9rem;
  box-shadow: 0 10px 22px -10px rgba(27, 107, 255, 0.7);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.shop-btn:hover {
  filter: brightness(1.05);
}

.shop-btn:active {
  transform: scale(0.98);
}

.shop-btn-mint {
  background: linear-gradient(135deg, var(--shop-mint) 0%, var(--shop-mint-deep) 100%);
  color: #04261c;
  font-weight: 800;
  border-radius: 0.9rem;
  box-shadow: 0 10px 22px -10px rgba(0, 212, 161, 0.65);
}

.shop-input:focus {
  outline: none;
  border-color: var(--shop-brand) !important;
  box-shadow: 0 0 0 3px rgba(27, 107, 255, 0.18);
}

.shop-nav-active {
  color: var(--shop-brand) !important;
}

.shop-fab-pos {
  background: linear-gradient(145deg, var(--shop-brand), #4F8CFF);
  box-shadow: 0 12px 28px -8px rgba(27, 107, 255, 0.75);
  border: 3px solid #fff;
}

@keyframes shop-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-rise {
  animation: shop-rise 0.45s ease both;
}

.shop-rise-delay-1 { animation-delay: 0.05s; }
.shop-rise-delay-2 { animation-delay: 0.1s; }
.shop-rise-delay-3 { animation-delay: 0.15s; }

/* Bottom nav safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .shop-bottom-nav {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}