.profile-user-info {
  width: 100%;
  padding: 0;
}

.profile-user-info.embedded {
  height: 100%;
}

.user-info-card-simple {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  /* padding: 1.25rem 1.5rem; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  transition: all 0.3s ease;
}

.user-info-card-simple:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.user-info-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.user-info-text {
  flex: 1;
}

/* Griglia 2x2 per i 4 pulsanti */
.user-info-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  min-width: 160px;
  padding: 0.5rem;
}

.user-info-actions-grid button {
  white-space: nowrap;
}

/* Vecchi stili - deprecati */
.user-info-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
  margin-right: 0.5rem;
}

/* Action Buttons Styles */
.user-info-actions-grid button {
  border: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 14px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Share & QR Buttons */
.user-info-actions-grid .btn-share,
.user-info-actions-grid .btn-qr {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.user-info-actions-grid .btn-share:hover,
.user-info-actions-grid .btn-qr:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Edit Button */
.user-info-actions-grid .btn-edit {
  background: rgba(139, 92, 246, 0.9);
  color: white;
}

.user-info-actions-grid .btn-edit:hover {
  background: rgba(139, 92, 246, 1);
  transform: translateY(-2px);
}

/* Logout Button */
.user-info-actions-grid .btn-logout {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.user-info-actions-grid .btn-logout:hover {
  background: rgba(239, 68, 68, 1);
  transform: translateY(-2px);
}

/* Profile Image Styles */
.user-info-avatar {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* Desktop Adjustments */
@media (min-width: 769px) {
  .user-info-actions-grid button {
    height: 40px;
  }

  /* User profiles use 120px avatar on desktop */
  .user-info-avatar {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
  }

  /* Gym profiles use 100px avatar on desktop */
  .profile-user-info.gym .user-info-avatar {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
  }

  /* Flex-based responsive width for actions section */
  /* Avatar/info section - only what it needs */
  .user-info-left {
    flex: 0 0 auto; /* Don't grow, don't shrink, automatic width */
  }

  /* Actions section - takes available space intelligently */
  .user-info-actions-grid {
    flex: 1 1 35%; /* Grow to fill, shrink if needed, base 35% */
    min-width: 280px; /* Never smaller than this */
    max-width: 45%; /* Never more than 45% */
  }

  /* Ensure proper spacing between sections */
  .user-info-card-simple {
    gap: 2rem; /* Consistent gap between sections */
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .profile-user-info {
    box-shadow: none !important;
  }

  .user-info-card-simple {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    min-height: 100%;
    box-shadow: none !important;
  }

  .user-info-left {
    width: 100%;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .user-info-actions {
    width: 100%;
    flex-direction: row;
  }

  .user-info-actions-grid {
    width: 100%;
    margin-right: 0;
    padding: 0;
    gap: 0.75rem;
  }

  .user-info-text {
    padding: 0;
    margin-left: 0;
  }

  .user-info-left h3 {
    font-size: 28px !important;
  }

  /* Maintain gym own profile layout on mobile */
  .user-info-actions-grid.gym-own-profile {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Maintain gym public profile button order on mobile */
  .user-info-actions-grid.gym-public-profile {
    grid-template-columns: 1fr 1fr;
  }

  /* Mobile: Gym own profile WITHOUT gallery - 2x2 grid */
  .user-info-actions-grid.gym-own-profile.no-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .user-info-actions-grid.gym-own-profile.no-gallery .btn-share,
  .user-info-actions-grid.gym-own-profile.no-gallery .btn-qr,
  .user-info-actions-grid.gym-own-profile.no-gallery .btn-edit,
  .user-info-actions-grid.gym-own-profile.no-gallery .btn-logout {
    grid-column: span 1;
  }
}

/* Gym Profile Specific Styles */

/* Gallery Button (Gym Only) */
.user-info-actions-grid .btn-gallery {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
}

.user-info-actions-grid .btn-gallery:hover {
  background: rgba(255, 215, 0, 0.25);
  transform: translateY(-2px);
}

/* Favourite Button (Public Gym Profiles) - matches Share/QR styling exactly */
.user-info-actions-grid .btn-favourite {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.user-info-actions-grid .btn-favourite:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Gym Profile Specific Layout */
.profile-user-info.gym .user-info-text {
  /* Additional spacing adjustments for gym contact info if needed */
}

/* DESKTOP ONLY - Gym own profile button layouts (min-width: 769px) */
@media (min-width: 769px) {
  /* Special layout for own gym profiles - 3 buttons on top, 2 on bottom */
  .user-info-actions-grid.gym-own-profile {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    gap: 0.375rem;
  }

  /* WITH GALLERY (5 buttons total) */
  /* First row - Gallery, Share, QR (each takes 2 columns) */
  .user-info-actions-grid.gym-own-profile.has-gallery .btn-gallery {
    grid-column: span 2;
    grid-row: 1;
  }

  .user-info-actions-grid.gym-own-profile.has-gallery .btn-share {
    grid-column: span 2;
    grid-row: 1;
  }

  .user-info-actions-grid.gym-own-profile.has-gallery .btn-qr {
    grid-column: span 2;
    grid-row: 1;
  }

  /* Second row - Edit and Logout (each takes 3 columns) */
  .user-info-actions-grid.gym-own-profile.has-gallery .btn-edit {
    grid-column: span 3;
    grid-row: 2;
  }

  .user-info-actions-grid.gym-own-profile.has-gallery .btn-logout {
    grid-column: span 3;
    grid-row: 2;
  }

  /* WITHOUT GALLERY (4 buttons total) - 2x2 grid layout */
  /* Grid is 6 columns, so span 3 = 50% width for 2 buttons per row */
  .user-info-actions-grid.gym-own-profile.no-gallery .btn-share {
    grid-column: span 3;
    grid-row: 1;
  }

  .user-info-actions-grid.gym-own-profile.no-gallery .btn-qr {
    grid-column: span 3;
    grid-row: 1;
  }

  .user-info-actions-grid.gym-own-profile.no-gallery .btn-edit {
    grid-column: span 3;
    grid-row: 2;
  }

  .user-info-actions-grid.gym-own-profile.no-gallery .btn-logout {
    grid-column: span 3;
    grid-row: 2;
  }
}

/* Public gym profiles - Reorder buttons for better UX */
.user-info-actions-grid.gym-public-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.375rem;
}

/* WITH GALLERY (4 buttons: Share, QR, Gallery, Follow) */
/* Row 1: Share (left), QR (right) */
.user-info-actions-grid.gym-public-profile.has-gallery .btn-share {
  order: 1;
}

.user-info-actions-grid.gym-public-profile.has-gallery .btn-qr {
  order: 2;
}

/* Row 2: Gallery (left), Follow (right) */
.user-info-actions-grid.gym-public-profile.has-gallery .btn-gallery {
  order: 3;
}

.user-info-actions-grid.gym-public-profile.has-gallery .btn-favourite {
  order: 4;
}

/* WITHOUT GALLERY (3 buttons: Share, QR, Follow) */
/* Row 1: Share (left), QR (right) */
.user-info-actions-grid.gym-public-profile.no-gallery .btn-share {
  order: 1;
}

.user-info-actions-grid.gym-public-profile.no-gallery .btn-qr {
  order: 2;
}

/* Row 2: Follow button centered (spans both columns) */
.user-info-actions-grid.gym-public-profile.no-gallery .btn-favourite {
  order: 3;
  grid-column: 1 / -1; /* Span full width */
}

/* Gym profile specific - transparent container without background/border */
.profile-user-info.gym .user-info-card-simple {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Disable container hover transform for gym profiles only */
.profile-user-info.gym .user-info-card-simple:hover {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  transform: none !important;
}