/* Enhanced PWA Install Button Styles */

#pwa-install-btn {
  position: relative;
  overflow: hidden;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(212, 124, 47, 0.25);
  background: linear-gradient(135deg, rgba(212, 124, 47, 0.98) 0%, rgba(173, 96, 29, 0.95) 100%);
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  min-height: 40px;
}

#pwa-install-btn:hover {
  background: linear-gradient(135deg, rgba(181, 113, 49, 1) 0%, rgba(147, 82, 24, 1) 100%);
  border-color: rgba(181, 113, 49, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

#pwa-install-btn:active {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

#pwa-install-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  background: linear-gradient(135deg, #9c9c9c 0%, #7d7d7d 100%);
  border-color: #8f8f8f;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #pwa-install-btn {
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.1em;
    min-height: 44px;
    min-width: 150px;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  #pwa-install-btn {
    padding: 10px 20px;
    font-size: 11px;
    min-width: 190px;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  #pwa-install-btn {
    padding: 10px 18px;
    font-size: 12px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  #pwa-install-btn {
    padding: 12px 20px;
    font-size: 12px;
  }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
  #pwa-install-btn {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  #pwa-install-btn:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  }
}

/* Accessibility: remove animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #pwa-install-btn {
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
}