/* Fix container to allow sticky to work - ALL SCREENS */
.fmg {
  display: flex !important; /* Change from inline-flex */
  align-items: flex-start !important;
  min-height: 100vh !important; /* Ensure full height */
}

/* Sticky tab navigation */
.fmgt {
  position: sticky !important;
  top: 0px !important;
  z-index: 100 !important;
  align-self: flex-start !important;
  transition: none !important; /* No transition for normal state */
}

/* Fixed position when scrolled (applied via JS) */
.fmgt.is-fixed {
  position: fixed !important;
  top: 99px !important; /* Below header (89px) + 10px gap */
  z-index: 90 !important;
  transition: none !important;
}

/* Bottom position - stick to bottom of container */
.fmgt.is-bottom {
  align-self: flex-end !important; /* Move to bottom */
  position: sticky !important;
  bottom: 0 !important;
  top: auto !important;
  transition: none !important;
}

/* Force game content to expand properly */
.fmgg {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Game image cover style */
.ggi {
  object-fit: cover !important;
}

/* Force 1:1 aspect ratio */
.r1 {
  aspect-ratio: 1 / 1 !important;
}

/* Skeleton loader */
.skeleton {
  background-color: rgba(255, 255, 255, 0.03);
  animation: skeleton-pulse 2s ease-in-out infinite;
  border: none !important;
  box-shadow: none !important;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Fade in animation for loaded content */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Provider card cursor fix and hover effects */
.pc {
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.pc:hover {
  transform: scale(1.05) !important;
}

.pc img {
  transition: transform 0.2s ease !important;
}

.pc:hover img {
  transform: scale(1.1) !important;
}

/* Search input focus styling */
.search-input:focus {
  border-color: #ccae7c !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(204, 174, 124, 0.3) !important;
}

/* Game card hover effects */
.gg {
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.gg:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 16px rgba(204, 174, 124, 0.4) !important;
}

.ggi {
  transition: transform 0.2s ease !important;
}

.gg:hover .ggi {
  transform: scale(1.05) !important;
}

/* Desktop provider tab improvements */
@media screen and (min-width: 768px) {
  /* Provider tabs only */
  .tab.provider-tab {
    justify-content: center !important;
    padding-left: 0 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  
  .tab.provider-tab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(204, 174, 124, 0.3) !important;
  }
  
  .tab.provider-tab .timg {
    width: 55px !important;
    height: 55px !important;
    transition: transform 0.2s ease !important;
  }
  
  .tab.provider-tab:hover .timg {
    transform: scale(1.05) !important;
  }
  
  /* Back button center alignment */
  .tab.back-btn {
    justify-content: center !important;
    padding-left: 0 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
  }
  
  .tab.back-btn:hover {
    transform: translateY(-1px) !important;
  }
  
  .tab.back-btn .timg {
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile iOS fix */
@media screen and (max-width: 767px) {
  .tab.provider-tab {
    max-width: 55px !important;
  }
  
  .tab.back-btn {
    max-width: 55px !important;
  }
}
}.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 200px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #f39c12;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-message {
  margin-top: 16px;
  color: #888;
  font-size: 14px;
}