/* ============================================================== */
/* WISH PWA (PROGRESSIVE WEB APP) STYLING                         */
/* ============================================================== */

/* Tombol Pasang App di Atas (Top Bar / Search Bar) */
.pwa-top-install-btn,
.pwa-install-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: static !important; /* Mencegah floating/melayang menutupi konten */
  white-space: nowrap !important;
}

.pwa-top-install-btn:hover,
.pwa-install-fab:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.pwa-top-install-btn:active,
.pwa-install-fab:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.pwa-top-install-btn:disabled,
.pwa-install-fab:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Sembunyikan otomatis jika aplikasi sudah terpasang (Mode Standalone) */
@media all and (display-mode: standalone) {
  #pwaInstallBtn,
  #pwaNavInstall,
  .pwa-install-fab,
  .pwa-top-install-btn {
    display: none !important;
  }
}

/* Styling Modal Panduan PWA Multi-Platform */
#pwaInstallGuideModal .modal-content {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

#pwaInstallGuideModal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 18px 24px !important;
}

#pwaInstallGuideModal .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 24px !important;
}

.pwa-nav-pills .nav-link {
  color: #94a3b8 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
}

.pwa-nav-pills .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.pwa-nav-pills .nav-link.active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.pwa-guide-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  margin-bottom: 12px;
}

.pwa-step-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.pwa-step-text {
  flex-grow: 1;
  font-size: 0.92rem;
  color: #e2e8f0;
  line-height: 1.5;
}

.pwa-step-text strong {
  color: #ffffff;
}

.pwa-inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.82rem;
}

/* ========================================================================== */
/* UNIVERSAL IOS & IPADOS WEBKIT TOUCH & TAP ENGINE FIX (IPHONE / IPAD)       */
/* ========================================================================== */

/* 1. Global Touch-Action: Removes 300ms double-tap delay on iOS Safari */
html, body {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  -webkit-text-size-adjust: 100% !important;
}

/* 2. WebKit Click Delegation: iOS Safari REQUIRES cursor: pointer to dispatch click events on non-native tags */
button,
a,
input,
select,
textarea,
[role="button"],
[tabindex],
.btn,
.nav-link,
.nav-dock-item,
.app-tile-item,
.android-app-tile,
.drawer-app-item,
.chip-filter,
.deck-action-btn,
.user-profile-btn,
.card-stat,
.panel-box,
[onclick],
[data-bs-toggle],
[data-bs-target],
[data-bs-dismiss] {
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Prevent accidental text highlight selection during rapid thumb tapping */
.android-app-tile,
.app-tile-item,
.chip-filter,
.deck-action-btn,
.nav-dock-item,
.btn {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Inputs and textareas must remain selectable */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* 3. Ghost Backdrop Killer: Inactive or fading modal-backdrops MUST NEVER block touches */
.modal-backdrop:not(.show) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -9999 !important;
}

/* 4. Strict Z-Index Layering to prevent mobile dock & modal collisions */
.android-bottom-nav {
  z-index: 100030 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.modal-backdrop.show {
  z-index: 100040 !important;
  pointer-events: auto !important;
}

.modal.show {
  z-index: 100050 !important;
  pointer-events: auto !important;
}

/* 5. Clean scrolling recovery for iOS Safari */
body:not(.modal-open):not(.wish-sidebar-open) {
  overflow-y: auto !important;
}