/*
 * Customer Layout Styles
 * 
 * These styles complement Tailwind CSS for customer-facing UI elements.
 */

/* ============================================
   CSS Variables (Big Pocket Design System)
   ============================================ */
:root {
  /* Colors - Primary */
  --color-primary: #FF7F00;
  --color-primary-hover: #E67300;
  --color-primary-light: #FFA340;
  
  /* Colors - Contrast (text) */
  --color-contrast: #111111;
  --color-contrast-2: #636363;
  --color-contrast-3: #A4A4A4;
  
  /* Colors - Base (backgrounds) */
  --color-base: #F9F9F9;
  --color-base-2: #FFFFFF;
  --color-base-3: #EEEEEE;
  
  /* Safe areas for mobile */
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   Typography
   ============================================ */
.font-heading {
  font-family: 'Lexend', sans-serif;
}

.font-body {
  font-family: 'Rubik', sans-serif;
}

/* ============================================
   Primary Color Utilities
   ============================================ */
.text-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

.border-primary {
  border-color: var(--color-primary);
}

/* ============================================
   Contrast Colors
   ============================================ */
.text-contrast {
  color: var(--color-contrast);
}

.text-contrast-2 {
  color: var(--color-contrast-2);
}

.text-contrast-3 {
  color: var(--color-contrast-3);
}

/* ============================================
   Base Colors
   ============================================ */
.bg-base {
  background-color: var(--color-base);
}

.bg-base-2 {
  background-color: var(--color-base-2);
}

.bg-base-3 {
  background-color: var(--color-base-3);
}

/* ============================================
   Navigation Styles
   ============================================ */
.desktop-nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.desktop-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.2s ease;
}

.desktop-nav-link:hover::after,
.desktop-nav-link.active::after {
  width: 80%;
}

.desktop-nav-link.active {
  color: var(--color-primary);
}

/* ============================================
   Bottom Navigation (Mobile)
   ============================================ */
.pb-safe {
  padding-bottom: calc(0.5rem + var(--safe-area-bottom));
}

/* ============================================
   Scrollbar Utilities
   ============================================ */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   Animations
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes success-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-success {
  animation: success-pulse 0.5s ease-in-out 3;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}

@keyframes fade-in {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

@keyframes fade-out {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

/* ============================================
   QR Scanner Animations
   ============================================ */

/* Scan line animation */
@keyframes scan {
  0%, 100% { top: 10%; }
  50% { top: 85%; }
}

.animate-scan {
  animation: scan 2s ease-in-out infinite;
}

/* Success scale animation */
@keyframes success-scale {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-success-scale {
  animation: success-scale 0.5s ease-out forwards;
}

/* Celebrate animation for Iflo */
@keyframes celebrate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-5deg); }
  75% { transform: translateY(-5px) rotate(5deg); }
}

.animate-celebrate {
  animation: celebrate 1s ease-in-out infinite;
}

/* ============================================
   Button Styles
   ============================================ */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-base-3);
  color: var(--color-contrast);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: #E0E0E0;
}

/* ============================================
   Card Styles
   ============================================ */
.card {
  background-color: var(--color-base-2);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 1rem;
}

/* ============================================
   Form Styles
   ============================================ */
.form-input {
  @apply w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent bg-white;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

/* ============================================
   Map Styles (Leaflet)
   ============================================ */

/* Custom Marker Styles */
.custom-marker {
  background: transparent;
  border: none;
}

.marker-pin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 127, 0, 0.4);
  border: 3px solid white;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
}

.marker-pin:hover {
  transform: scale(1.1);
}

.marker-pin.closed {
  background-color: #6B7280;
  box-shadow: 0 4px 14px rgba(107, 114, 128, 0.4);
}

.marker-pin span {
  color: white;
  font-weight: 700;
  font-size: 10px;
  font-family: 'Lexend', sans-serif;
}

.marker-pin::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-primary);
}

.marker-pin.closed::after {
  border-top-color: #6B7280;
}

/* User location marker */
.user-location-marker {
  background: transparent;
  border: none;
}

.user-dot {
  width: 14px;
  height: 14px;
  background-color: #3B82F6;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
  position: relative;
}

.user-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background-color: rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Custom popup styles */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 0;
  min-width: 180px;
}

.leaflet-popup-tip {
  box-shadow: none;
}

.merchant-popup {
  padding: 12px;
}

.merchant-popup h3 {
  font-family: 'Lexend', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #111;
  margin-bottom: 4px;
}

.merchant-popup .popup-category {
  font-size: 11px;
  color: #636363;
  margin-bottom: 8px;
}

.merchant-popup .discount-badge {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.merchant-popup .see-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--color-primary);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.merchant-popup .see-btn:hover {
  background-color: var(--color-primary-hover);
}

/* Hide default zoom control */
.leaflet-control-zoom {
  display: none !important;
}