/* ═══════════════════════════════════════════════════════
   iRegalo Mobile-First CSS
   ═══════════════════════════════════════════════════════ */

:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-h: calc(60px + var(--safe-bottom));
}

/* Prevent zoom on inputs (iOS) */
input, select, textarea { font-size: 16px !important; }

/* Minimum touch targets */
button, a { -webkit-tap-highlight-color: transparent; }

/* ── BOTTOM NAV — hidden on desktop ── */
.ir-bottom-nav { display: none; }

@media (max-width: 768px) {

  .ir-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    padding-bottom: var(--safe-bottom);
    background: rgba(15,15,15,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 500;
    align-items: stretch;
    justify-content: space-around;
  }

  .ir-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(255,255,255,0.35);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    padding: 8px 4px;
    min-height: 60px;
  }

  .ir-bottom-nav a svg { width: 22px; height: 22px; stroke-width: 1.8; transition: transform .15s; }
  .ir-bottom-nav a.active { color: #E8322A; }
  .ir-bottom-nav a.active svg { transform: scale(1.1); }
  .ir-bottom-nav a:active { color: #E8322A; }

  .nav-cart-wrap { position: relative; }
  .ir-nav-badge {
    position: absolute; top: -2px; right: -6px;
    background: #E8322A; color: white;
    font-size: 9px; font-weight: 800;
    min-width: 15px; height: 15px;
    border-radius: 8px;
    display: none; align-items: center; justify-content: center;
    border: 2px solid #0F0F0F;
  }
  .ir-nav-badge.show { display: flex; }

  /* Content above bottom nav */
  body { padding-bottom: var(--bottom-nav-h) !important; }

  /* Header — keep logo + cart only */
  .ir-header { padding: 0 16px; height: 54px; }
  .ir-header .btn-ghost,
  .ir-header .btn-red { display: none !important; }

  /* Pages */
  .ir-page { padding: 16px 16px 20px; }
  .ir-page-sm { padding: 16px 16px 20px; }

  /* Product grid — 2 columns */
  .ir-product-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .ir-product-body { padding: 10px 12px; }
  .ir-product-name { font-size: 13px; }
  .ir-product-price { font-size: 15px; margin-top: 6px; }
  .btn-add-cart { padding: 11px; font-size: 13px; }

  /* Cards */
  .ir-card-pad { padding: 18px 16px; }

  /* Amounts grid */
  .amounts { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .amt-btn { padding: 13px 6px; font-size: 15px; border-radius: 10px; }

  /* Forms */
  .ir-input { padding: 14px 16px; }
  .btn-red { padding: 14px 20px; font-size: 15px; }
  .ir-input-row { grid-template-columns: 1fr !important; }

  /* Checkout */
  .ir-checkout-grid { grid-template-columns: 1fr !important; }

  /* Breadcrumb scroll */
  .ir-breadcrumb {
    overflow-x: auto; white-space: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ir-breadcrumb::-webkit-scrollbar { display: none; }

  /* Category pills scroll */
  .ir-filter-bar {
    overflow-x: auto; flex-wrap: nowrap !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ir-filter-bar::-webkit-scrollbar { display: none; }

  /* Toast at top */
  .ir-toast {
    bottom: auto !important;
    top: calc(54px + 8px + var(--safe-top)) !important;
    left: 16px !important; right: 16px !important;
    border-radius: 12px !important;
    text-align: center;
  }

  /* Dashboard stats 2-col */
  .ir-stats { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* QR code sizing */
  .qr-img img { width: 220px !important; height: 220px !important; }

  /* Install app banner */
  .pwa-install-banner {
    position: fixed;
    bottom: var(--bottom-nav-h);
    left: 12px; right: 12px;
    background: #1C1C1C;
    border: 1px solid rgba(232,50,42,.25);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 450;
    box-shadow: 0 -8px 32px rgba(0,0,0,.5);
    animation: pwa-in .35s ease;
  }
  @keyframes pwa-in {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .pwa-install-banner .pwa-icon { font-size: 36px; }
  .pwa-install-banner .pwa-text strong { font-size: 14px; color: #fff; display: block; line-height: 1.3; }
  .pwa-install-banner .pwa-text span { font-size: 12px; color: #777; }
  .pwa-install-banner .pwa-btn { background: #E8322A; border: none; color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }
  .pwa-install-banner .pwa-close { background: none; border: none; color: #555; font-size: 22px; cursor: pointer; line-height: 1; margin-left: 4px; }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
  .ir-product-card:active  { transform: scale(0.96); transition: transform .1s; }
  .btn-red:active           { transform: scale(0.96); }
  .amt-btn:active           { border-color: #E8322A; background: rgba(232,50,42,.12); }
}

/* Smooth scroll */
html { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }