/* Romami LLC - Professional Icon System */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 32px; height: 32px; }
.icon-lg { width: 48px; height: 48px; }
.icon-xl { width: 64px; height: 64px; }

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-fill svg { fill: currentColor; stroke: none; }

.icon-gold { color: #c9a84c; }
.icon-dark { color: #1a1a1a; }
.icon-grey { color: #888; }
.icon-white { color: #ffffff; }
.icon-red { color: #DC2626; }
.icon-green { color: #059669; }
.icon-blue { color: #2563EB; }

/* Service card icon wrapper */
.service-icon-wrap {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #c9a84c;
}

.service-icon-wrap .icon { width: 32px; height: 32px; }

/* PWA Install prompt */
.pwa-install {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  z-index: 9999;
  align-items: center;
  gap: 1rem;
}
.pwa-install.show { display: flex; }
.pwa-install-btn {
  background: #c9a84c;
  color: #1a1a1a;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile app-like navigation */
@media (max-width: 768px) {
  .romami-nav {
    padding: 0.75rem 1rem;
  }
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
}

/* Touch-friendly buttons */
.btn, .filter-btn, .nav-cta, .mobile-toggle {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}

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

/* Status bar safe area for PWA */
@supports (padding-top: env(safe-area-inset-top)) {
  .romami-nav {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
}