/* /auth-state.css */

/* --- Fab (Language & User) --- */
#langFab,#userFab{position:fixed; top:10px; z-index:61;}
#langFab{ right:12px; }
#userFab{ right:58px; display:flex; gap:.4rem; }
#langBtn,#userBtn,#loginBtn{
  height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elev); border:1px solid var(--muted-2); color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.35); padding:.4rem .6rem; cursor:pointer;
}
#userBtn{ width:38px; padding:0; }
#userBtn .avatar{width:28px;height:28px;border-radius:999px;overflow:hidden;border:1px solid var(--muted-2)}
#userAvatar{width:100%;height:100%;object-fit:cover;display:block}
#loginBtn{ font-family:Montserrat,Inter,sans-serif; font-weight:700; letter-spacing:.06em; }

/* --- Dropdown menu (User) --- */
#userMenu{
  position:fixed; top:54px; right:58px; min-width:220px;
  background:var(--bg-elev); border:1px solid var(--muted-2); border-radius:12px; padding:.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45); display:none; z-index:62;
}
#userMenu.open{ display:block; }
#userMenu .row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:10px; }
#userMenu .row:hover{ background:var(--muted); }
#userMenu .name{ font-weight:800; letter-spacing:.06em; }

/* --- Modal (Auth) --- */
#authModal{ position:fixed; inset:0; background:rgba(13,13,21,.6); backdrop-filter: blur(6px); display:none; align-items:center; justify-content:center; z-index:70;}
#authModal.open{ display:flex; }
.auth-card{ width:min(480px,92%); background:radial-gradient(800px 400px at 0% -10%,rgba(168,85,247,.12),transparent), var(--bg-elev);
  border:1px solid var(--muted-2); border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.5); padding:1rem; }
.auth-card h3{ margin:.2rem 0 1rem; font-family:Montserrat,Inter,sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.auth-row{ display:flex; flex-direction:column; gap:.6rem; }
.auth-row input{ padding:.8rem .9rem; border:1px solid var(--muted-2); background:var(--bg); color:var(--text); border-radius:12px; }
.auth-actions{ display:flex; gap:.6rem; margin-top:.4rem; }
.auth-actions .btn{ flex:1; justify-content:center; border-radius:14px; background:linear-gradient(135deg,#6D28D9 0%,#A855F7 60%,#3B82F6 100%); color:#fff; border:1px solid transparent; }
.auth-actions .btn.ghost{ background:transparent; border-color:var(--muted-2); color:var(--text); }
.auth-error{ color:#ef4444; min-height:1.1em; }
.oauth-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.6rem; }
.oauth-row a{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem .8rem; border:1px solid var(--muted-2); border-radius:12px; background:var(--bg-elev); color:var(--text); text-decoration:none; }

/* --- Cart badge --- */
.icon-btn{ position:relative; }
#cartQty{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6D28D9,#A855F7); color:#fff; font-size:12px; font-weight:800;
  box-shadow:0 6px 14px rgba(168,85,247,.45);
  transition: transform .15s ease;
}

/* --- Neon accents --- */
.brand .title{ text-shadow: 0 0 20px rgba(168,85,247,.25), 0 0 40px rgba(59,130,246,.15); }
.btn{ box-shadow:0 10px 20px rgba(59,130,246,.22), 0 10px 30px rgba(168,85,247,.18); }
.card{ border-color: rgba(168,85,247,.22); }

/* =========================================================
   === Language dropdown – FIX (mała flaga + rozwijane menu)
   (umieszczone na końcu, aby nadpisać bazowe reguły)
   ========================================================= */
#langFab{
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 2000;
}

/* Przycisk z jedną małą flagą */
#langBtn{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--muted-2);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}
#langBtn .flag{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
#langBtn .flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Jeżeli nie chcesz literki EN/PL na przycisku – zostaw display:none */
#langBtn .code{ display: none; }

/* Ukryte menu pod przyciskiem */
#langMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg-elev);
  border: 1px solid var(--muted-2);
  border-radius: 12px;
  padding: 6px;
  width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display: none;                    /* <-- domyślnie niewidoczne */
}
#langMenu.open{
  display: block;                   /* pokazujemy po kliknięciu */
  animation: langFade .12s ease-out;
}
@keyframes langFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

#langMenu .lang-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-2);
}
#langMenu .lang-item:hover{
  background: var(--muted);
  color: var(--text);
}
#langMenu .lang-item .flag{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 18px;
}
#langMenu .lang-item .flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bezpieczeństwo: nigdy nie rozciągaj flag z dropdownu do szerokości strony */
#langFab img{ max-width: none; }