/**
 * Unified Button System - v3.4.0 DYNAMIC
 * Sistema unificato per tutti i pulsanti PWA e Sito
 * Garantisce coerenza visiva e funzionale
 * Usa variabili CSS dinamiche basate su dimensioni schermo
 */

/* ===== BASE BUTTON RESET ===== */
button,
.btn,
.button {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: var(--button-font-size, 1rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--button-border-radius, 12px);
  padding: var(--button-padding, 12px 24px);
  min-height: var(--button-min-height, 44px);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Prevent text selection */
button::selection,
.btn::selection,
.button::selection {
  background: transparent;
}

/* ===== PRIMARY BUTTON (Brand Gradient) ===== */
button.primary,
.btn-primary,
.button-primary,
.primary,
button[type="submit"]:not(.secondary):not(.ghost),
.action.primary,
.register-action-btn,
.add-photo-btn {
  background: linear-gradient(90deg, #0bb3b5, #ff7a29, #0bb3b5) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 3s ease-in-out infinite !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(11, 179, 181, 0.25);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button.primary:hover,
.btn-primary:hover,
.button-primary:hover,
.primary:hover,
button[type="submit"]:not(.secondary):not(.ghost):hover,
.action.primary:hover,
.register-action-btn:hover,
.add-photo-btn:hover {
  background-position: 100% 0 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(255, 122, 41, 0.35) !important;
  opacity: 0.95;
}

/* ===== OAUTH BUTTONS (Google & Apple) ===== */
.google-btn {
  background: #4285f4 !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
  animation: none !important;
}

.google-btn:hover {
  background: #357ae8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.35);
}

.apple-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: none !important;
}

.apple-btn:hover {
  background: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

button.primary:active,
.btn-primary:active,
.button-primary:active,
.primary:active,
.action.primary:active,
.register-action-btn:active,
.add-photo-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(11, 179, 181, 0.2) !important;
}

button.primary:disabled,
.btn-primary:disabled,
.button-primary:disabled,
.primary:disabled,
.action.primary:disabled,
.register-action-btn:disabled,
.add-photo-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  animation: none !important;
}

/* ===== SECONDARY BUTTON (Outlined) ===== */
button.secondary,
.btn-secondary,
.button-secondary,
.action.secondary {
  background: #ffffff;
  color: #0bb3b5;
  border: 2px solid #0bb3b5;
  box-shadow: 0 2px 8px rgba(11, 179, 181, 0.1);
}

button.secondary:hover,
.btn-secondary:hover,
.button-secondary:hover,
.action.secondary:hover {
  background: #e9f7fa;
  border-color: #ff7a29;
  color: #ff7a29;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 122, 41, 0.15);
}

button.secondary:active,
.btn-secondary:active,
.button-secondary:active,
.action.secondary:active {
  transform: translateY(0);
}

button.secondary:disabled,
.btn-secondary:disabled,
.button-secondary:disabled,
.action.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== GHOST BUTTON (Transparent) ===== */
button.ghost,
.btn-ghost,
.button-ghost {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

button.ghost:hover,
.btn-ghost:hover,
.button-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

button.ghost:active,
.btn-ghost:active,
.button-ghost:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.05);
}

/* Dark theme ghost */
html.dark-mode button.ghost,
html.dark-mode .btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ===== DANGER/DELETE BUTTON ===== */
button.danger,
.btn-danger,
.button-danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

button.danger:hover,
.btn-danger:hover,
.button-danger:hover {
  background: linear-gradient(135deg, #c82333, #bd2130);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.35);
}

button.danger:active,
.btn-danger:active,
.button-danger:active {
  transform: translateY(0);
}

/* ===== SUCCESS BUTTON ===== */
button.success,
.btn-success,
.button-success {
  background: linear-gradient(135deg, #28a745, #218838);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
}

button.success:hover,
.btn-success:hover,
.button-success:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.35);
}

/* ===== SIZE VARIANTS ===== */

/* Small - usa variabili dinamiche */
button.small,
.btn-small,
.button-small {
  padding: var(--button-small-padding, 8px 16px);
  font-size: var(--button-small-font-size, 0.875rem);
  border-radius: calc(var(--button-border-radius, 12px) - 2px);
  min-height: calc(var(--button-min-height, 44px) - 8px);
}

/* Large */
button.large,
.btn-large,
.button-large {
  padding: 16px 32px;
  font-size: calc(var(--button-font-size, 1rem) * 1.125);
  border-radius: calc(var(--button-border-radius, 12px) + 2px);
  min-height: calc(var(--button-min-height, 44px) + 8px);
}

/* Full width */
button.full,
.btn-full,
.button-full,
.full,
.primary.full,
button.primary.full {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ===== ICON BUTTONS ===== */
button.icon,
.btn-icon,
.button-icon {
  padding: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  min-width: var(--button-min-height, 44px);
  min-height: var(--button-min-height, 44px);
}

button.icon.small,
.btn-icon.small {
  padding: 8px;
  min-width: calc(var(--button-min-height, 44px) - 8px);
  min-height: calc(var(--button-min-height, 44px) - 8px);
}

button.icon.large,
.btn-icon.large {
  padding: 16px;
  min-width: calc(var(--button-min-height, 44px) + 8px);
  min-height: calc(var(--button-min-height, 44px) + 8px);
}

/* ===== BUTTON GROUP ===== */
.button-group,
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button-group.vertical,
.btn-group.vertical {
  flex-direction: column;
}

.button-group.centered,
.btn-group.centered {
  justify-content: center;
}

/* ===== LOADING STATE ===== */
button.loading,
.btn-loading,
.button-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.loading::after,
.btn-loading::after,
.button-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* ===== NAVBAR BUTTONS ===== */
.navbar button,
.navbar .btn,
.navbar .button {
  background: transparent;
  border: none;
  color: inherit;
  padding: 8px 16px;
  font-size: 0.9rem;
  box-shadow: none;
}

.navbar button:hover,
.navbar .btn:hover {
  background: rgba(11, 179, 181, 0.1);
  transform: translateY(-1px);
}

/* ===== LANDING PAGE BUTTONS (Override) ===== */
.hero-cta .btn,
.hero-cta button {
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 700;
}

/* ===== DEVICE SPECIFIC ADJUSTMENTS ===== */

/* Mobile: Larger touch targets */
html.mobile button,
/* Mobile: Sistema dinamico gestisce già dimensioni, manteniamo solo override necessari */
html.mobile .btn,
html.mobile .button {
  /* Dimensioni gestite da variabili dinamiche */
  -webkit-tap-highlight-color: rgba(11, 179, 181, 0.2);
}

html.mobile button.small,
html.mobile .btn-small {
  /* Dimensioni gestite da variabili dinamiche */
}

/* iOS: Remove default styling */
html.ios button,
html.ios .btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Tablet: Slightly larger */
html.tablet button,
html.tablet .btn {
  padding: 13px 26px;
  font-size: 1.05rem;
}

/* Desktop: Hover effects more pronounced */
@media (min-width: 1024px) and (hover: hover) {
  button:hover,
  .btn:hover,
  .button:hover {
    transform: translateY(-3px) scale(1.02);
  }
}

/* ===== DARK MODE ADJUSTMENTS ===== */
html.dark-mode button.secondary,
html.dark-mode .btn-secondary {
  background: #1a2332;
  color: #0bb3b5;
  border-color: #0bb3b5;
}

html.dark-mode button.secondary:hover,
html.dark-mode .btn-secondary:hover {
  background: #2a3342;
}

/* ===== REDUCED MOTION ===== */
html.reduced-motion button,
html.reduced-motion .btn,
html.reduced-motion .button {
  animation: none !important;
  transition: none !important;
}

html.reduced-motion button:hover,
html.reduced-motion .btn:hover {
  transform: none !important;
}

/* ===== FOCUS STATES (Accessibility) ===== */
button:focus-visible,
.btn:focus-visible,
.button:focus-visible {
  outline: 3px solid rgba(11, 179, 181, 0.5);
  outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
  button,
  .btn,
  .button {
    display: none !important;
  }
}

/* ===== COMPATIBILITY FIXES ===== */

/* Fix for adaptive-responsive.css conflicts */
html.has-touch button,
html.has-touch .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Fix for conflicting hover on touch devices */
@media (hover: none) {
  button:hover,
  .btn:hover,
  .button:hover {
    transform: none;
  }
  
  button:active,
  .btn:active,
  .button:active {
    transform: scale(0.98);
  }
}

/* Ensure proper stacking */
button,
.btn,
.button {
  z-index: 1;
}

/* Fix button inside links */
a button,
a .btn {
  pointer-events: all;
}

/* ===== UTILITY CLASSES ===== */
.btn-block {
  width: 100%;
  display: block;
}

.btn-rounded {
  border-radius: 999px;
}

.btn-square {
  border-radius: 0;
}

.btn-shadow-none {
  box-shadow: none !important;
}

.btn-no-animation {
  animation: none !important;
}

/* ===== BACK BUTTON ===== */
.back-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #666;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.back-btn:hover {
  color: var(--brand);
  background: rgba(11, 179, 181, 0.05);
}

/* ===== MODAL CLOSE BUTTON ===== */
.modal-close-btn {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  color: #495057;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  font-weight: 300;
  padding: 0;
}

.modal-close-btn:hover {
  background: #e9ecef;
  border-color: #dc3545;
  color: #dc3545;
  transform: rotate(90deg);
}

/* ===== QUICK HOURS BUTTON ===== */
.quick-hours-btn {
  padding: 6px 12px;
  border: 1px solid #0bb3b5;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s;
  color: #0bb3b5;
  font-weight: 500;
}

.quick-hours-btn:hover {
  background: rgba(11, 179, 181, 0.05);
  border-color: #089a9c;
}

/* ===== MOBILE RESPONSIVE - GESTITO DA SISTEMA DINAMICO ===== */
/* Le dimensioni di bottoni sono ora gestite automaticamente tramite variabili CSS dinamiche
 * settate da device-detection.js in base alle dimensioni reali dello schermo.
 * Manteniamo solo override specifici che non possono essere gestiti dinamicamente.
 */

/* Full width su mobile quando necessario */
@media (max-width: 640px) {
  button.full,
  .btn-full,
  .button-full {
    width: 100%;
  }
}

/* iOS: Rimuovi stili di default */
@supports (-webkit-touch-callout: none) {
  button,
  .btn,
  .button {
    -webkit-tap-highlight-color: rgba(11, 179, 181, 0.2);
  }
}
    padding: 10px 8px !important;
    font-size: 1rem !important;
  }
}