/* ========================================================
   BKRTC Mobile App CSS — Progressive Web App shell
   Loaded on all pages but only active on small screens
   ======================================================== */

/* ---- Root: account for safe-area (iPhone notch etc.) ---- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-nav-h: 60px;
}

/* ---- Bottom navigation bar ---- */
.bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
  /* Show bottom nav only on mobile */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: #ffffff;
    border-top: 1px solid #e8eaf0;
    box-shadow: 0 -4px 20px rgba(26,34,56,.08);
    z-index: 900;
    align-items: stretch;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #9da3ae;
    padding: 6px 2px 0;
    position: relative;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }

  .bottom-nav-item.active {
    color: #1A2238;
  }

  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 16%; right: 16%;
    height: 3px;
    background: #FF6B35;
    border-radius: 0 0 4px 4px;
  }

  .bn-icon {
    font-size: 22px;
    line-height: 1;
  }

  .bn-label {
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Push page content up so bottom nav doesn't cover it */
  .page-wrap {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  }

  /* Hide top navbar links on mobile (bottom nav handles navigation) */
  .navbar-links {
    /* already handled by existing hamburger CSS */
  }

  /* Bigger tap targets on all buttons/links */
  .btn, button, select, input[type="submit"] {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 36px;
  }

  /* Cards full-width on mobile */
  .card {
    border-radius: 14px;
    padding: 16px;
  }

  /* Tables — horizontal scroll on mobile */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  /* Form inputs — bigger on mobile */
  .form-control,
  input[type="text"], input[type="email"], input[type="number"],
  input[type="tel"], input[type="date"], input[type="password"],
  select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 11px 14px;
  }

  /* Page title */
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }

  /* Stats grid — 2 col on mobile */
  .stats, [class*="stats"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Program grid — 1 or 2 col */
  .program-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Exhibition grid — 2 col on mobile */
  .exh-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .exh-card-body { padding: 10px; }
  .exh-card-title { font-size: 12.5px; }
  .exh-card-price { font-size: 13px; }
  .exh-add-cart-btn { font-size: 11px; padding: 5px 8px; }

  /* Carousel caption smaller */
  .exh-carousel-caption h3 { font-size: 16px; }

  /* Form grid — single col on mobile */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Navbar: sticky top with safe area */
  .navbar {
    padding-top: var(--safe-top);
    position: sticky;
    top: 0;
    z-index: 800;
  }

  /* Install banner: above bottom nav */
  #bkrtcInstallBanner {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px) !important;
  }

  /* Verify page: full width card */
  .verify-wrap { max-width: 100%; }

  /* Dashboard quick-action cards */
  .quick-actions {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Notices / updates list */
  .notice-card { padding: 12px; }

  /* PDF action buttons — full width stacked */
  .pdf-actions { flex-direction: column; gap: 8px; }
  .pdf-actions .btn { width: 100%; }

  /* Artist card — smaller on mobile */
  .artist-card-preview { transform: scale(0.9); }
}

/* Extra small phones */
@media (max-width: 380px) {
  .exh-grid { grid-template-columns: 1fr; }
  .bn-label { font-size: 9px; }
  .bn-icon { font-size: 20px; }
  .stats { grid-template-columns: 1fr 1fr !important; }
}

/* ---- App-like interaction feel ---- */
@media (max-width: 767px) {
  /* Smooth scrolling */
  html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

  /* Remove click flash on mobile */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Card press effect */
  .card:active { transform: scale(0.99); transition: transform .1s; }
  .exh-card:active { transform: scale(0.98); }
  .bottom-nav-item:active .bn-icon { transform: scale(1.15); transition: transform .1s; }

  /* Floating action feel for primary buttons */
  .btn-primary {
    box-shadow: 0 4px 12px rgba(26,34,56,.2);
  }
  .btn-primary:active { transform: scale(0.97); box-shadow: none; }

  /* Pull-to-refresh visual cue (native-like) */
  body { overscroll-behavior-y: contain; }
}

/* ---- PWA standalone mode tweaks ---- */
@media (display-mode: standalone) {
  /* In standalone (installed) mode — hide browser-chrome elements */
  .navbar { padding-top: max(var(--safe-top), 12px); }
  /* Show install banner only in browser mode */
  #bkrtcInstallBanner { display: none !important; }
}

/* ---- Share row: hide on very small screens inside cards ---- */
@media (max-width: 767px) {
  /* The share row inside program cards looks cluttered on mobile,
     keep it but make it more compact */
  .share-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .share-btn-sm {
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* AI chat launcher — move above bottom nav on mobile
     (selector must match the real element: #bkrtc-chat-launcher / .chat-launcher
     in includes/chat_widget.php — previous selectors here never matched it) */
  #bkrtc-chat-launcher,
  .chat-launcher,
  #bkrtc-chat-window,
  .chat-window {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  }

  /* OneSignal subscription bell — same treatment, kept on the opposite (left) corner
     via notifyButton position:'bottom-left' in includes/header.php so it never
     stacks on top of the chat launcher */
  .onesignal-bell-launcher {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
  }
}

/* ---- Form field overflow fix ---- */
@media (max-width: 767px) {
  .form-group label,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .form-control {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Step form container padding */
  .step-form-wrap,
  .application-form,
  .bkrtc-form,
  form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }

  /* Page container overflow hidden */
  .page-wrap,
  .container {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Radio/checkbox labels */
  .radio-group label,
  .checkbox-group label {
    word-break: break-word;
  }

  /* Step indicators */
  .step-indicator {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---- Compact form fields on mobile ---- */
@media (max-width: 767px) {
  .form-group {
    margin-bottom: 12px !important;
  }
  .form-group label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
    font-weight: 500;
  }
  .form-control,
  input[type="text"], input[type="email"], input[type="number"],
  input[type="tel"], input[type="date"], input[type="password"],
  select, textarea {
    padding: 9px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    min-height: unset !important;
  }
  /* 2-column layout for short fields */
  .form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Section heading */
  .form-section-title,
  .bkrtc-section-title {
    font-size: 13px !important;
    padding: 6px 10px !important;
    margin: 14px 0 10px !important;
  }
  /* Step progress bar compact */
  .progress-steps {
    gap: 4px;
    font-size: 11px;
  }
  /* Card padding smaller */
  .card {
    padding: 14px !important;
  }
}