/* MethodFeeder — Glass morphism & design tokens utilitare */

.bg-mf-base { background-color: var(--mf-bg) !important; }
.bg-mf-panel { background-color: var(--mf-panel) !important; }
.bg-mf-elevated { background-color: var(--mf-bg-elevated) !important; }
.text-mf-text { color: var(--mf-text) !important; }
.text-mf-muted { color: var(--mf-muted) !important; }
.text-mf-primary { color: var(--mf-primary) !important; }
.border-mf-border { border-color: var(--mf-border) !important; }
.bg-mf-primary { background-color: var(--mf-primary) !important; }
.hover\:bg-mf-primary_dark:hover { background-color: var(--mf-primary-dim) !important; }

.mf-glass,
.mf-glass-panel {
  position: relative;
  background: rgba(13, 20, 36, 0.52);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(0, 209, 160, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mf-glass-strong {
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(0, 209, 160, 0.2);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mf-glass::before,
.mf-glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%, rgba(0, 209, 160, 0.04) 100%);
  opacity: 0.85;
}

.mf-glass > *,
.mf-glass-panel > * {
  position: relative;
  z-index: 1;
}

.mf-glass-hover {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.35s;
}

.mf-glass-hover:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(0, 209, 160, 0.38);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 209, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mf-neon-border {
  box-shadow: 0 0 0 1px rgba(0, 209, 160, 0.25), 0 0 24px rgba(0, 209, 160, 0.08);
}

.mf-shimmer {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 90%);
  background-size: 200% 100%;
  animation: mf-shimmer 2.8s ease-in-out infinite;
}

@keyframes mf-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mf-grid-overlay {
  background-image:
    linear-gradient(rgba(0, 209, 160, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 209, 160, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.mf-stagger-in {
  animation: mf-stagger-in 0.55s ease-out both;
}

@keyframes mf-stagger-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-lacuri-page .mf-lake-card:nth-child(1) { animation-delay: 0.02s; }
.mf-lacuri-page .mf-lake-card:nth-child(2) { animation-delay: 0.06s; }
.mf-lacuri-page .mf-lake-card:nth-child(3) { animation-delay: 0.1s; }
.mf-lacuri-page .mf-lake-card:nth-child(4) { animation-delay: 0.14s; }
.mf-lacuri-page .mf-lake-card:nth-child(n+5) { animation-delay: 0.18s; }

body.mf-app:not(.mf-light-page) .mf-section-head,
body.mf-app:not(.mf-light-page) h3.bg-slate-100 {
  background: rgba(13, 20, 36, 0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 209, 160, 0.18) !important;
  border-bottom: 2px solid rgba(0, 209, 160, 0.45) !important;
  color: var(--mf-text) !important;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

body.mf-app:not(.mf-light-page) .prose.text-slate-700,
body.mf-app:not(.mf-light-page) .prose.max-w-none.text-slate-700 {
  color: var(--mf-muted) !important;
}

body.mf-app:not(.mf-light-page) #tab-anglers .bg-white.rounded-lg,
body.mf-app:not(.mf-light-page) .mf-angler-card {
  background: rgba(13, 20, 36, 0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 209, 160, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

body.mf-app:not(.mf-light-page) #tab-anglers .bg-white.rounded-lg:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 209, 160, 0.35) !important;
}

body.mf-app:not(.mf-light-page) .bg-gray-300 {
  background: rgba(30, 41, 59, 0.9) !important;
}

body.mf-app:not(.mf-light-page) #angler-popup > .bg-white,
body.mf-app:not(.mf-light-page) #lakeModal .modal-content {
  background: rgba(13, 20, 36, 0.92) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 209, 160, 0.2) !important;
  color: var(--mf-text);
}

body.mf-app:not(.mf-light-page) #popup-name,
body.mf-app:not(.mf-light-page) #popup-team,
body.mf-app:not(.mf-light-page) #angler-popup h4 {
  color: var(--mf-text) !important;
}

body.mf-app:not(.mf-light-page) table.min-w-full.bg-white thead tr {
  background: rgba(0, 209, 160, 0.12) !important;
}

body.mf-app:not(.mf-light-page) table.min-w-full.bg-white tbody tr {
  background: rgba(13, 20, 36, 0.4) !important;
}

body.mf-app:not(.mf-light-page) table.min-w-full.bg-white tbody tr:nth-child(even) {
  background: rgba(13, 20, 36, 0.65) !important;
}

body.mf-app:not(.mf-light-page) #main-tabs-container {
  background: rgba(13, 20, 36, 0.5);
  backdrop-filter: blur(10px);
  border-color: var(--mf-border) !important;
}

body.mf-app:not(.mf-light-page) .text-slate-700 {
  color: var(--mf-text) !important;
}

.mf-lacuri-page .weather-box {
  background: rgba(13, 20, 36, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 209, 160, 0.15);
  border-radius: 1rem;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.mf-lacuri-page .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.88);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.mf-lacuri-page .modal-overlay.active {
  display: flex;
  opacity: 1;
}

.mf-lacuri-page .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}